From b75dc687ca2e338d5d25e97c74719643100284a2 Mon Sep 17 00:00:00 2001 From: Allan Wang Date: Sun, 12 Sep 2021 20:29:31 -0700 Subject: Update theme --- app/src/web/package-lock.json | 6 +++--- app/src/web/package.json | 2 +- app/src/web/scss/core/_base.scss | 4 +++- app/src/web/scss/facebook/core/_core_bg.scss | 2 +- app/src/web/scss/facebook/core/_core_border.scss | 2 +- app/src/web/scss/facebook/core/_core_text.scss | 6 +++--- 6 files changed, 12 insertions(+), 10 deletions(-) diff --git a/app/src/web/package-lock.json b/app/src/web/package-lock.json index 120e84af..45cb1eeb 100644 --- a/app/src/web/package-lock.json +++ b/app/src/web/package-lock.json @@ -146,9 +146,9 @@ } }, "sass": { - "version": "1.38.2", - "resolved": "https://registry.npmjs.org/sass/-/sass-1.38.2.tgz", - "integrity": "sha512-Bz1fG6qiyF0FX6m/I+VxtdVKz1Dfmg/e9kfDy2PhWOkq3T384q2KxwIfP0fXpeI+EyyETdOauH+cRHQDFASllA==", + "version": "1.39.2", + "resolved": "https://registry.npmjs.org/sass/-/sass-1.39.2.tgz", + "integrity": "sha512-4/6Vn2RPc+qNwSclUSKvssh7dqK1Ih3FfHBW16I/GfH47b3scbYeOw65UIrYG7PkweFiKbpJjgkf5CV8EMmvzw==", "requires": { "chokidar": ">=3.0.0 <4.0.0" } diff --git a/app/src/web/package.json b/app/src/web/package.json index a196211a..64988a42 100644 --- a/app/src/web/package.json +++ b/app/src/web/package.json @@ -10,7 +10,7 @@ "dependencies": { "compile": "0.0.2", "run": "^1.4.0", - "sass": "^1.38.2", + "sass": "^1.39.2", "typescript": "^3.9.10" } } diff --git a/app/src/web/scss/core/_base.scss b/app/src/web/scss/core/_base.scss index f6b5c903..8f233119 100644 --- a/app/src/web/scss/core/_base.scss +++ b/app/src/web/scss/core/_base.scss @@ -1,3 +1,5 @@ +@use 'sass:math'; + @mixin placeholder { ::placeholder { @content; @@ -80,7 +82,7 @@ $encoded: ""; $slice: 2000; $index: 0; - $loops: ceil(str-length($svg) / $slice); + $loops: ceil(math.div(str-length($svg), $slice)); @for $i from 1 through $loops { $chunk: str-slice($svg, $index, $index + $slice - 1); diff --git a/app/src/web/scss/facebook/core/_core_bg.scss b/app/src/web/scss/facebook/core/_core_bg.scss index c5269ccf..8e6ed2ce 100644 --- a/app/src/web/scss/facebook/core/_core_bg.scss +++ b/app/src/web/scss/facebook/core/_core_bg.scss @@ -30,7 +30,7 @@ html, body, :root, #root, #header, #MComposer, ._1upc, input, ._2f9r, ._59e9, ._ // card related ._31nf, ._2v9s, ._d4i, article._55wo, ._10c_, ._2jl2, ._6150, ._50mi, ._4-dw, ._4_2z, ._5m_s, ._13fn, ._7kxe, [style*="background-color: #F5F8FF"], -._84lx, ._517h, ._59pe:focus, ._59pe:hover, ._m_1, ._3eqz, ._6m2, ._6q-c { +._84lx, ._517h, ._59pe:focus, ._59pe:hover, ._m_1, ._3eqz, ._6m2, ._6q-c, ._61r- { background: $card !important; } diff --git a/app/src/web/scss/facebook/core/_core_border.scss b/app/src/web/scss/facebook/core/_core_border.scss index 1929e546..883d4eae 100644 --- a/app/src/web/scss/facebook/core/_core_border.scss +++ b/app/src/web/scss/facebook/core/_core_border.scss @@ -42,7 +42,7 @@ //friend card border ._d4i, ._f6s, .mentions-suggest-item, .mentions-suggest, .sharerAttachment, .mToken, #addMembersTypeahead .mToken.mTokenWeakReference, .mQuestionsPollResultsBar, -._15q7, ._2q7v, ._4dwt ._16ii, ._3qdi::after, ._6q-c, +._15q7, ._2q7v, ._4dwt ._16ii, ._3qdi::after, ._6q-c, ._61r-, ._2q7w, .acy, ._58ak, ._3t_l, ._4msa, ._3h8i, ._3clk, ._1kt6, ._1ksq, ._1_y5, ._lr0, ._5hgt, ._2cpp, ._50uu, ._50uw, ._31yd, ._1e3d, ._3xz7, ._1xoz, ._4kcb, ._2lut, .jewel .touchable-notification.touched, .touchable-notification .touchable.touched, diff --git a/app/src/web/scss/facebook/core/_core_text.scss b/app/src/web/scss/facebook/core/_core_text.scss index 8ac66758..60fd9c96 100644 --- a/app/src/web/scss/facebook/core/_core_text.scss +++ b/app/src/web/scss/facebook/core/_core_text.scss @@ -1,6 +1,6 @@ -html, body, input, ._42rv, ._4qau, ._dwm .descArea, ._eu5, -._1tcc, ._3g9-, ._29z_, ._3xz7, ._ib-, ._3bg5 ._56dq, ._477i, ._2vxk, ._29e6, ._8wr8, -.touched *, ._1_yj, ._1_yl, ._4pj9, ._2bdc, ._3qdh ._3qdn ._3qdk, ._3qdk ._48_q, ._7iah, +html, body, input, ._42rv, ._4qau, ._dwm .descArea, ._eu5, ._wn-, +._1tcc, ._3g9-, ._29z_, ._3xz7, ._ib-, ._3bg5 ._56dq, ._477i, ._2vxk, ._29e6, ._8wr8, ._52lz, +.touched *, ._1_yj, ._1_yl, ._4pj9, ._2bdc, ._3qdh ._3qdn ._3qdk, ._3qdk ._48_q, ._7iah, ._61mn ._61mo, ._z-z, ._z-v, ._1e8d, ._36nl, ._36nm, ._2_11, ._2_rf, ._2ip_, ._403p, .cq, ._usr, #mErrorView .message, ._5xu2, ._3ml8, ._3mla, ._50vk, ._1m2u, ._31y7, ._4kcb, ._1lf6, ._1lf5, ._7-1j, ._4ajz, ._m_1 ._2aha, ._1lf4, ._1hiz, ._xod, ._5ag5, ._zmk, ._3t_h, ._5lm6, ._3clv, ._3zlc, ._36rd, ._6oby, ._6_qk, -- cgit v1.2.3 From a07dc74dc80a9f6e416b8a06d6deeae84e3498e4 Mon Sep 17 00:00:00 2001 From: Allan Wang Date: Sun, 12 Sep 2021 20:32:44 -0700 Subject: Update theming docs --- docs/Theming.md | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/docs/Theming.md b/docs/Theming.md index dc027ba6..14fff12c 100644 --- a/docs/Theming.md +++ b/docs/Theming.md @@ -22,9 +22,9 @@ In the case of providing theme updates, identifying the relevant selectors will It is also useful to apply Frost's existing themes to see what is already configured and what is missing. To do so, I use the following tools: * [Visual Studio Code](https://code.visualstudio.com/) as the main IDE -* [CSS & JS Injection](https://chrome.google.com/webstore/detail/css-and-javascript-inject/ckddknfdmcemedlmmebildepcmneakaa) or any other plugin that allows you to apply CSS to a web page. - -When opening the Frost project, navigating to `app/web` and install the npm packages. Run SASS to generate the files, and focus on `app/web/assets/css/core/core.css`; this is what you'll want to paste into the browser extension to see the updates. To update the theme, modify one of the `app/web/scss/core/_core_*.scss` files, which will update `core.css`. +* [Super CSS Inject](https://chrome.google.com/webstore/detail/super-css-inject/pcfpmmmjdgngeidaggcahhoncahmpiin) or any other plugin that allows you to apply CSS to a web page. + * Use [Web Server for Chrome](https://chrome.google.com/webstore/detail/web-server-for-chrome/ofhbbkphhbklhfoeikjpcbhemlocgigb) to deliver local files. +When opening the Frost project, navigating to `app/web` and install the npm packages. Run SASS to generate the files, and focus on `app/web/assets/css/facebook/core/core.css`; this is what you'll want to paste into the browser extension to see the updates. To update the theme, modify one of the `app/web/scss/facebook/core/_core_*.scss` files, which will update `core.css`. If the update works, the selected elements should change. Note that the core theme is intentionally a mix of weird colors, to make it easier to see changes. -- cgit v1.2.3 From b3971080c25607484c75098c7a88ff4b7b273550 Mon Sep 17 00:00:00 2001 From: Allan Wang Date: Sun, 12 Sep 2021 20:51:41 -0700 Subject: Add vars for facebook --- app/src/web/scss/facebook/core/_core_vars.scss | 39 ++++++++++++++++++++++++++ app/src/web/scss/facebook/core/core.scss | 1 + 2 files changed, 40 insertions(+) create mode 100644 app/src/web/scss/facebook/core/_core_vars.scss diff --git a/app/src/web/scss/facebook/core/_core_vars.scss b/app/src/web/scss/facebook/core/_core_vars.scss new file mode 100644 index 00000000..a618b703 --- /dev/null +++ b/app/src/web/scss/facebook/core/_core_vars.scss @@ -0,0 +1,39 @@ +:root, .__fb-light-mode { + --accent: #{$accent} !important; + --attachment-footer-background: #{$background} !important; + --background-deemphasized: #{$background} !important; + --card-background: #{$card} !important; + --card-background-flat: #{$card} !important; + --comment-background: #{$background} !important; + --comment-footer-background: #{$background} !important; + --darkreader-bg--fds-white: #{$bg_opaque} !important; + --darkreader-text--primary-text: #{$text} !important; + --darkreader-text--secondary-text: #{$text} !important; + --disabled-button-background: #{$divider} !important; + --disabled-button-text: #{$text_disabled} !important; + --disabled-icon: #{$text_disabled} !important; + --disabled-text: #{$text_disabled} !important; + --divider: #{$divider} !important; + --event-date: #{$accent} !important; + --glimmer-spinner-icon: #{$accent} !important; + --hero-banner-background: #{$bg_opaque2} !important; + --highlight-bg: #{$background2} !important; + --media-outer-border: #{$divider} !important; + --messenger-card-background: #{$card} !important; + --messenger-reply-background: #{$card} !important; + --nav-bar-background: #{$bg_opaque} !important; + --new-notification-background: #{$background2} !important; + --placeholder-icon: #{$text} !important; + --placeholder-text: #{$text} !important; + --popover-background: #{$bg_opaque2} !important; + --primary-icon: #{$text} !important; + --primary-text: #{$text} !important; + --primary-button-text: #{$text} !important; + --primary-deemphasized-button-background: #{$divider} !important; + --primary-text-on-media: #{$text} !important; + --scroll-thumb: #{$accent} !important; + --secondary-icon: #{$text} !important; + --secondary-text: #{$text} !important; + --section-header-text: #{$text} !important; + --surface-background: #{$background} !important; +} diff --git a/app/src/web/scss/facebook/core/core.scss b/app/src/web/scss/facebook/core/core.scss index d7e790d1..557f7398 100644 --- a/app/src/web/scss/facebook/core/core.scss +++ b/app/src/web/scss/facebook/core/core.scss @@ -1,5 +1,6 @@ @import "../../core/colors"; @import "../../core/base"; +@import "core_vars"; @import "core_text"; @import "core_bg"; @import "core_border"; -- cgit v1.2.3 From 0c93df88738db175eb05ed7e72b9bb28e466da07 Mon Sep 17 00:00:00 2001 From: Allan Wang Date: Sun, 12 Sep 2021 20:58:51 -0700 Subject: Combine core vars --- app/src/web/scss/core/_core_vars.scss | 48 +++++++++++++++++++++++++ app/src/web/scss/facebook/core/_core_vars.scss | 39 -------------------- app/src/web/scss/facebook/core/core.scss | 2 +- app/src/web/scss/messenger/core/_core_vars.scss | 34 ------------------ app/src/web/scss/messenger/core/core.scss | 2 +- 5 files changed, 50 insertions(+), 75 deletions(-) create mode 100644 app/src/web/scss/core/_core_vars.scss delete mode 100644 app/src/web/scss/facebook/core/_core_vars.scss delete mode 100644 app/src/web/scss/messenger/core/_core_vars.scss diff --git a/app/src/web/scss/core/_core_vars.scss b/app/src/web/scss/core/_core_vars.scss new file mode 100644 index 00000000..c7bee823 --- /dev/null +++ b/app/src/web/scss/core/_core_vars.scss @@ -0,0 +1,48 @@ +:root, .__fb-light-mode { + --accent: #{$accent} !important; + --attachment-footer-background: #{$bg_opaque} !important; + --background-deemphasized: #{$background} !important; + --card-background: #{$bg_opaque} !important; + --card-background-flat: #{$bg_opaque} !important; + --comment-background: #{$bg_opaque2} !important; + --comment-footer-background: #{$bg_opaque} !important; + --darkreader-bg--fds-white: #{$bg_opaque} !important; + --darkreader-text--primary-text: #{$text} !important; + --darkreader-text--secondary-text: #{$text} !important; + --disabled-button-background: #{$divider} !important; + --disabled-button-text: #{$text_disabled} !important; + --disabled-icon: #{$text_disabled} !important; + --disabled-text: #{$text_disabled} !important; + --divider: #{$divider} !important; + --event-date: #{$accent} !important; + --glimmer-spinner-icon: #{$accent} !important; + --hero-banner-background: #{$bg_opaque2} !important; + --highlight-bg: #{$bg_opaque2} !important; + --media-outer-border: #{$divider} !important; + --messenger-card-background: #{$bg_opaque} !important; // Main background; needs to be opaque to hide gradient used for sender card + --messenger-reply-background: #{$bg_opaque2} !important; + --nav-bar-background: #{$bg_opaque} !important; + --new-notification-background: #{$background2} !important; + --placeholder-icon: #{$text} !important; + --popover-background: #{$bg_opaque2} !important; + --primary-icon: #{$text} !important; + --primary-text: #{$text} !important; + --primary-button-text: #{$text} !important; + --primary-deemphasized-button-background: #{$divider} !important; + --primary-text-on-media: #{$text} !important; + --scroll-thumb: #{$accent} !important; + --secondary-icon: #{$text} !important; + --secondary-text: #{$text} !important; + --section-header-text: #{$text} !important; + --nav-bar-background-gradient-wash: #{$bg_opaque} !important; + --nav-bar-background-gradient: #{$bg_opaque} !important; + --placeholder-text: #{$text} !important; // Date + --surface-background: #{$bg_opaque2} !important; // Emoji background + --toggle-active-background: #{$bg_opaque2} !important; + --wash: #{$bg_opaque2} !important; + --web-wash: #{$bg_opaque2} !important; + + [role="navigation"] { + --surface-background: #{$bg_opaque} !important; // Nav background + } +} diff --git a/app/src/web/scss/facebook/core/_core_vars.scss b/app/src/web/scss/facebook/core/_core_vars.scss deleted file mode 100644 index a618b703..00000000 --- a/app/src/web/scss/facebook/core/_core_vars.scss +++ /dev/null @@ -1,39 +0,0 @@ -:root, .__fb-light-mode { - --accent: #{$accent} !important; - --attachment-footer-background: #{$background} !important; - --background-deemphasized: #{$background} !important; - --card-background: #{$card} !important; - --card-background-flat: #{$card} !important; - --comment-background: #{$background} !important; - --comment-footer-background: #{$background} !important; - --darkreader-bg--fds-white: #{$bg_opaque} !important; - --darkreader-text--primary-text: #{$text} !important; - --darkreader-text--secondary-text: #{$text} !important; - --disabled-button-background: #{$divider} !important; - --disabled-button-text: #{$text_disabled} !important; - --disabled-icon: #{$text_disabled} !important; - --disabled-text: #{$text_disabled} !important; - --divider: #{$divider} !important; - --event-date: #{$accent} !important; - --glimmer-spinner-icon: #{$accent} !important; - --hero-banner-background: #{$bg_opaque2} !important; - --highlight-bg: #{$background2} !important; - --media-outer-border: #{$divider} !important; - --messenger-card-background: #{$card} !important; - --messenger-reply-background: #{$card} !important; - --nav-bar-background: #{$bg_opaque} !important; - --new-notification-background: #{$background2} !important; - --placeholder-icon: #{$text} !important; - --placeholder-text: #{$text} !important; - --popover-background: #{$bg_opaque2} !important; - --primary-icon: #{$text} !important; - --primary-text: #{$text} !important; - --primary-button-text: #{$text} !important; - --primary-deemphasized-button-background: #{$divider} !important; - --primary-text-on-media: #{$text} !important; - --scroll-thumb: #{$accent} !important; - --secondary-icon: #{$text} !important; - --secondary-text: #{$text} !important; - --section-header-text: #{$text} !important; - --surface-background: #{$background} !important; -} diff --git a/app/src/web/scss/facebook/core/core.scss b/app/src/web/scss/facebook/core/core.scss index 557f7398..f03cdd68 100644 --- a/app/src/web/scss/facebook/core/core.scss +++ b/app/src/web/scss/facebook/core/core.scss @@ -1,6 +1,6 @@ @import "../../core/colors"; @import "../../core/base"; -@import "core_vars"; +@import "../../core/core_vars"; @import "core_text"; @import "core_bg"; @import "core_border"; diff --git a/app/src/web/scss/messenger/core/_core_vars.scss b/app/src/web/scss/messenger/core/_core_vars.scss deleted file mode 100644 index 66795299..00000000 --- a/app/src/web/scss/messenger/core/_core_vars.scss +++ /dev/null @@ -1,34 +0,0 @@ -:root, .__fb-light-mode { - --attachment-footer-background: #{$bg_opaque} !important; - --card-background-flat: #{$bg_opaque} !important; - --card-background: #{$bg_opaque} !important; - --comment-background: #{$bg_opaque2} !important; - --comment-footer-background: #{$bg_opaque} !important; - --disabled-button-background: #{$bg_opaque} !important; - --disabled-icon: #{$text_disabled} !important; - --disabled-text: #{$text_disabled} !important; - --divider: #{$divider} !important; - --hero-banner-background: #{$bg_opaque} !important; - --highlight-bg: #{$bg_opaque2} !important; - --media-outer-border: #{$bg_opaque} !important; - --messenger-card-background: #{$bg_opaque} !important; - --messenger-card-background: #{$bg_opaque} !important; // Main background; needs to be opaque to hide gradient used for sender card - --messenger-reply-background: #{$bg_opaque2} !important; - --nav-bar-background-gradient-wash: #{$bg_opaque} !important; - --nav-bar-background-gradient: #{$bg_opaque} !important; - --nav-bar-background: #{$bg_opaque} !important; - --new-notification-background: #{$bg_opaque2} !important; - --placeholder-text: #{$text} !important; // Date - --primary-icon: #{$text} !important; - --primary-text: #{$text} !important; - --secondary-icon: #{$text} !important; - --secondary-text: #{$text} !important; - --surface-background: #{$bg_opaque2} !important; // Emoji background - --toggle-active-background: #{$bg_opaque2} !important; - --wash: #{$bg_opaque2} !important; - --web-wash: #{$bg_opaque2} !important; - - [role="navigation"] { - --surface-background: #{$bg_opaque} !important; // Nav background - } -} diff --git a/app/src/web/scss/messenger/core/core.scss b/app/src/web/scss/messenger/core/core.scss index 89199222..7cebadb5 100644 --- a/app/src/web/scss/messenger/core/core.scss +++ b/app/src/web/scss/messenger/core/core.scss @@ -1,6 +1,6 @@ @import "../../core/colors"; @import "../../core/base"; -@import "core_vars"; +@import "../../core/core_vars"; @import "core_text"; @import "core_bg"; @import "core_border"; -- cgit v1.2.3 From c9d3fac2af841181c64a1e2cfe9dd4edbb0e6fba Mon Sep 17 00:00:00 2001 From: Allan Wang Date: Sun, 12 Sep 2021 21:03:47 -0700 Subject: Update changelog [skip ci] --- app/src/main/play/en-US/whatsnew | 5 +++-- app/src/main/res/xml/frost_changelog.xml | 4 ++-- docs/Changelog.md | 3 ++- 3 files changed, 7 insertions(+), 5 deletions(-) diff --git a/app/src/main/play/en-US/whatsnew b/app/src/main/play/en-US/whatsnew index 1f46ec04..ea4ee41f 100644 --- a/app/src/main/play/en-US/whatsnew +++ b/app/src/main/play/en-US/whatsnew @@ -1,4 +1,5 @@ v3.1.0 -* Fix multi account signin -* Only clear out cookies on explicit logout; Facebook logout redirects no longer erase cookies \ No newline at end of file +* Fix multi account sign in +* Only clear out cookies on explicit logout; Facebook logout redirects no longer erase cookies +* Update themes \ No newline at end of file diff --git a/app/src/main/res/xml/frost_changelog.xml b/app/src/main/res/xml/frost_changelog.xml index 9a917099..ed3ea6e7 100644 --- a/app/src/main/res/xml/frost_changelog.xml +++ b/app/src/main/res/xml/frost_changelog.xml @@ -7,9 +7,9 @@ --> - + - + diff --git a/docs/Changelog.md b/docs/Changelog.md index 346b7087..50c1ab40 100644 --- a/docs/Changelog.md +++ b/docs/Changelog.md @@ -1,8 +1,9 @@ # Changelog ## v3.1.0 -* Fix multi account signin +* Fix multi account sign in * Only clear out cookies on explicit logout; Facebook logout redirects no longer erase cookies +* Update themes ## v3.0.0 * Removed email support. Please use GitHub for all inquiries as I no longer have time to look through all emails -- cgit v1.2.3