diff options
author | Allan Wang <me@allanwang.ca> | 2021-09-12 21:04:50 -0700 |
---|---|---|
committer | GitHub <noreply@github.com> | 2021-09-12 21:04:50 -0700 |
commit | ddfc240ed4c80dc8980f91f89d11f8b1563315cb (patch) | |
tree | d5093ab0bbd49861895b839ba3d767e4eea7bf8c /app/src/web/scss/core | |
parent | c77455ca08695a3d3470452d69bdead5dc961f4b (diff) | |
parent | c9d3fac2af841181c64a1e2cfe9dd4edbb0e6fba (diff) | |
download | frost-ddfc240ed4c80dc8980f91f89d11f8b1563315cb.tar.gz frost-ddfc240ed4c80dc8980f91f89d11f8b1563315cb.tar.bz2 frost-ddfc240ed4c80dc8980f91f89d11f8b1563315cb.zip |
Merge pull request #1803 from AllanWang/theme
Update theme
Diffstat (limited to 'app/src/web/scss/core')
-rw-r--r-- | app/src/web/scss/core/_base.scss | 4 | ||||
-rw-r--r-- | app/src/web/scss/core/_core_vars.scss | 48 |
2 files changed, 51 insertions, 1 deletions
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/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 + } +} |