diff options
Diffstat (limited to 'app/src/web')
36 files changed, 131 insertions, 23 deletions
diff --git a/app/src/web/scss/core/_base.scss b/app/src/web/scss/core/_base.scss index 472319fe..f6b5c903 100644 --- a/app/src/web/scss/core/_base.scss +++ b/app/src/web/scss/core/_base.scss @@ -1,4 +1,8 @@ @mixin placeholder { + ::placeholder { + @content; + } + ::-webkit-input-placeholder { @content; } @@ -14,6 +18,17 @@ :-ms-input-placeholder { @content; } + + ::-ms-input-placeholder { + @content; + } +} + +@mixin fill-available { + width: 100%; + max-width: -webkit-fill-available; + max-width: -moz-available; + max-width: fill-available; } @mixin keyframes($name) { @@ -38,7 +53,12 @@ @function str-replace($string, $search, $replace: "") { $index: str-index($string, $search); - @return if($index, str-slice($string, 1, $index - 1) + $replace + str-replace(str-slice($string, $index + str-length($search)), $search, $replace), $string); + @return if( + $index, + str-slice($string, 1, $index - 1) + $replace + + str-replace(str-slice($string, $index + str-length($search)), $search, $replace), + $string + ); } // https://css-tricks.com/probably-dont-base64-svg/ diff --git a/app/src/web/scss/core/_colors.scss b/app/src/web/scss/core/_colors.scss index 7610572c..ea75cc15 100644 --- a/app/src/web/scss/core/_colors.scss +++ b/app/src/web/scss/core/_colors.scss @@ -4,6 +4,7 @@ $bg_transparent: rgba(#f0f, 0.02) !default; //Our default colors are test colors; production files should always import the actual colors $text: #d7b0d7 !default; +$text_disabled: rgba($text, 0.6) !default; // must be visible with accent as the background $accent_text: #76d7c2 !default; $link: #9266d5 !default; diff --git a/app/src/web/scss/core/_core_bg.scss b/app/src/web/scss/facebook/core/_core_bg.scss index c5269ccf..c5269ccf 100644 --- a/app/src/web/scss/core/_core_bg.scss +++ b/app/src/web/scss/facebook/core/_core_bg.scss diff --git a/app/src/web/scss/core/_core_border.scss b/app/src/web/scss/facebook/core/_core_border.scss index 1929e546..1929e546 100644 --- a/app/src/web/scss/core/_core_border.scss +++ b/app/src/web/scss/facebook/core/_core_border.scss diff --git a/app/src/web/scss/facebook/core/_core_hider.scss b/app/src/web/scss/facebook/core/_core_hider.scss new file mode 100644 index 00000000..a166db3b --- /dev/null +++ b/app/src/web/scss/facebook/core/_core_hider.scss @@ -0,0 +1,4 @@ +[data-sigil=m_login_upsell], +[data-sigil="m-loading-indicator-animate m-loading-indicator-root"] { + display: none !important; +}
\ No newline at end of file diff --git a/app/src/web/scss/core/_core_messenger.scss b/app/src/web/scss/facebook/core/_core_messages.scss index 608fc23d..aa3c04eb 100644 --- a/app/src/web/scss/core/_core_messenger.scss +++ b/app/src/web/scss/facebook/core/_core_messages.scss @@ -1,4 +1,4 @@ -// Not all messenger related components are here; only the main ones. +// Not all message related components are here; only the main ones. // Borders for instance are merged into core_border // Other person's message bubble diff --git a/app/src/web/scss/core/_core_text.scss b/app/src/web/scss/facebook/core/_core_text.scss index 8ac66758..8ac66758 100644 --- a/app/src/web/scss/core/_core_text.scss +++ b/app/src/web/scss/facebook/core/_core_text.scss diff --git a/app/src/web/scss/core/_main.scss b/app/src/web/scss/facebook/core/_main.scss index 3e972f93..3e972f93 100644 --- a/app/src/web/scss/core/_main.scss +++ b/app/src/web/scss/facebook/core/_main.scss diff --git a/app/src/web/scss/core/_svg.scss b/app/src/web/scss/facebook/core/_svg.scss index 9ed25433..9ed25433 100644 --- a/app/src/web/scss/core/_svg.scss +++ b/app/src/web/scss/facebook/core/_svg.scss diff --git a/app/src/web/scss/core/core.scss b/app/src/web/scss/facebook/core/core.scss index 38086529..d7e790d1 100644 --- a/app/src/web/scss/core/core.scss +++ b/app/src/web/scss/facebook/core/core.scss @@ -1,9 +1,10 @@ -@import "colors"; -@import "base"; +@import "../../core/colors"; +@import "../../core/base"; @import "core_text"; @import "core_bg"; @import "core_border"; -@import "core_messenger"; +@import "core_messages"; +@import "core_hider"; //GLOBAL overrides; use with caution *, *::after, *::before { @@ -15,13 +16,8 @@ // box-shadow: none !important; // } -[data-sigil=m_login_upsell], -[data-sigil="m-loading-indicator-animate m-loading-indicator-root"] { - display: none !important; -} - @include placeholder { - color: $text !important; + color: $text_disabled !important; } .excessItem { diff --git a/app/src/web/scss/themes/.gitignore b/app/src/web/scss/facebook/themes/.gitignore index 4c46adff..4c46adff 100644 --- a/app/src/web/scss/themes/.gitignore +++ b/app/src/web/scss/facebook/themes/.gitignore diff --git a/app/src/web/scss/facebook/themes/custom.scss b/app/src/web/scss/facebook/themes/custom.scss new file mode 100644 index 00000000..ab3d0f34 --- /dev/null +++ b/app/src/web/scss/facebook/themes/custom.scss @@ -0,0 +1,2 @@ +@import "../../palette/custom"; +@import "../core/main"; diff --git a/app/src/web/scss/facebook/themes/default.scss b/app/src/web/scss/facebook/themes/default.scss new file mode 100644 index 00000000..92e352a7 --- /dev/null +++ b/app/src/web/scss/facebook/themes/default.scss @@ -0,0 +1 @@ +@import "../core/core_hider"; diff --git a/app/src/web/scss/facebook/themes/material_amoled.scss b/app/src/web/scss/facebook/themes/material_amoled.scss new file mode 100644 index 00000000..4b1b5d17 --- /dev/null +++ b/app/src/web/scss/facebook/themes/material_amoled.scss @@ -0,0 +1,2 @@ +@import "../../palette/material_amoled"; +@import "../core/main"; diff --git a/app/src/web/scss/facebook/themes/material_dark.scss b/app/src/web/scss/facebook/themes/material_dark.scss new file mode 100644 index 00000000..badec66d --- /dev/null +++ b/app/src/web/scss/facebook/themes/material_dark.scss @@ -0,0 +1,2 @@ +@import "../../palette/material_dark"; +@import "../core/main"; diff --git a/app/src/web/scss/facebook/themes/material_glass.scss b/app/src/web/scss/facebook/themes/material_glass.scss new file mode 100644 index 00000000..480def7f --- /dev/null +++ b/app/src/web/scss/facebook/themes/material_glass.scss @@ -0,0 +1,2 @@ +@import "../../palette/material_glass"; +@import "../core/main"; diff --git a/app/src/web/scss/facebook/themes/material_light.scss b/app/src/web/scss/facebook/themes/material_light.scss new file mode 100644 index 00000000..2a84f449 --- /dev/null +++ b/app/src/web/scss/facebook/themes/material_light.scss @@ -0,0 +1,2 @@ +@import "../../palette/material_light"; +@import "../core/main";
\ No newline at end of file diff --git a/app/src/web/scss/messenger/core/_core_bg.scss b/app/src/web/scss/messenger/core/_core_bg.scss new file mode 100644 index 00000000..92d3dd85 --- /dev/null +++ b/app/src/web/scss/messenger/core/_core_bg.scss @@ -0,0 +1,4 @@ +html, body, :root, #root, +[style*="background-color: #FFFFFF"], [style*="background-color: #E4E6EB"] { + background: $bg_transparent !important; +} diff --git a/app/src/web/scss/messenger/core/_core_border.scss b/app/src/web/scss/messenger/core/_core_border.scss new file mode 100644 index 00000000..10495a02 --- /dev/null +++ b/app/src/web/scss/messenger/core/_core_border.scss @@ -0,0 +1,3 @@ +[role="navigation"] { + border-right: 2px solid $bg_opaque2 !important; +}
\ No newline at end of file diff --git a/app/src/web/scss/messenger/core/_core_hider.scss b/app/src/web/scss/messenger/core/_core_hider.scss new file mode 100644 index 00000000..a2dbeb48 --- /dev/null +++ b/app/src/web/scss/messenger/core/_core_hider.scss @@ -0,0 +1,15 @@ +// Sizing adjustments +[role="navigation"] { + .rq0escxv.l9j0dhe7.du4w35lb.j83agx80.g5gj957u.rj1gh0hx.buofh1pr.hpfvmrgz.i1fnvgqd.bp9cbjyn.owycx6da.btwxx1t3.dflh9lhu.scb9dxdr.sj5x9vvc.cxgpxx05.sn0e7ne5.f6rbj1fe.l3ldwz01 /* New! Messenger app for windows */, + .rq0escxv.l9j0dhe7.du4w35lb.n851cfcs.aahdfvyu /* Search messenger */, + .wkznzc2l /* Top left chat + menu entry */ { + display: none !important; + } +} + +header[role="banner"] /* login banner */, +._90px._9gb7 /* login bottom banner */, +.rq0escxv.l9j0dhe7.du4w35lb.j83agx80.cbu4d94t.pfnyh3mw.d2edcug0.hpfvmrgz.p8fzw8mz.pcp91wgn.iuny7tx3.ipjc6fyt /* Top bar call video info icons */, +.kuivcneq /* Right sidebar */ { + display: none !important; +} diff --git a/app/src/web/scss/messenger/core/_core_text.scss b/app/src/web/scss/messenger/core/_core_text.scss new file mode 100644 index 00000000..7409cc4e --- /dev/null +++ b/app/src/web/scss/messenger/core/_core_text.scss @@ -0,0 +1,3 @@ +html, body, input { + color: $text !important; +}
\ No newline at end of file diff --git a/app/src/web/scss/messenger/core/_core_vars.scss b/app/src/web/scss/messenger/core/_core_vars.scss new file mode 100644 index 00000000..66795299 --- /dev/null +++ b/app/src/web/scss/messenger/core/_core_vars.scss @@ -0,0 +1,34 @@ +: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/_main.scss b/app/src/web/scss/messenger/core/_main.scss new file mode 100644 index 00000000..e5da5377 --- /dev/null +++ b/app/src/web/scss/messenger/core/_main.scss @@ -0,0 +1,3 @@ +@import "core"; + +//this file is used as the base for all messenger themes diff --git a/app/src/web/scss/messenger/core/core.scss b/app/src/web/scss/messenger/core/core.scss new file mode 100644 index 00000000..89199222 --- /dev/null +++ b/app/src/web/scss/messenger/core/core.scss @@ -0,0 +1,11 @@ +@import "../../core/colors"; +@import "../../core/base"; +@import "core_vars"; +@import "core_text"; +@import "core_bg"; +@import "core_border"; +@import "core_hider"; + +@include placeholder { + color: $text_disabled !important; +}
\ No newline at end of file diff --git a/app/src/web/scss/messenger/themes/.gitignore b/app/src/web/scss/messenger/themes/.gitignore new file mode 100644 index 00000000..4c46adff --- /dev/null +++ b/app/src/web/scss/messenger/themes/.gitignore @@ -0,0 +1 @@ +test.scss diff --git a/app/src/web/scss/messenger/themes/custom.scss b/app/src/web/scss/messenger/themes/custom.scss new file mode 100644 index 00000000..ab3d0f34 --- /dev/null +++ b/app/src/web/scss/messenger/themes/custom.scss @@ -0,0 +1,2 @@ +@import "../../palette/custom"; +@import "../core/main"; diff --git a/app/src/web/scss/messenger/themes/default.scss b/app/src/web/scss/messenger/themes/default.scss new file mode 100644 index 00000000..92e352a7 --- /dev/null +++ b/app/src/web/scss/messenger/themes/default.scss @@ -0,0 +1 @@ +@import "../core/core_hider"; diff --git a/app/src/web/scss/messenger/themes/material_amoled.scss b/app/src/web/scss/messenger/themes/material_amoled.scss new file mode 100644 index 00000000..4b1b5d17 --- /dev/null +++ b/app/src/web/scss/messenger/themes/material_amoled.scss @@ -0,0 +1,2 @@ +@import "../../palette/material_amoled"; +@import "../core/main"; diff --git a/app/src/web/scss/messenger/themes/material_dark.scss b/app/src/web/scss/messenger/themes/material_dark.scss new file mode 100644 index 00000000..badec66d --- /dev/null +++ b/app/src/web/scss/messenger/themes/material_dark.scss @@ -0,0 +1,2 @@ +@import "../../palette/material_dark"; +@import "../core/main"; diff --git a/app/src/web/scss/messenger/themes/material_glass.scss b/app/src/web/scss/messenger/themes/material_glass.scss new file mode 100644 index 00000000..480def7f --- /dev/null +++ b/app/src/web/scss/messenger/themes/material_glass.scss @@ -0,0 +1,2 @@ +@import "../../palette/material_glass"; +@import "../core/main"; diff --git a/app/src/web/scss/messenger/themes/material_light.scss b/app/src/web/scss/messenger/themes/material_light.scss new file mode 100644 index 00000000..2a84f449 --- /dev/null +++ b/app/src/web/scss/messenger/themes/material_light.scss @@ -0,0 +1,2 @@ +@import "../../palette/material_light"; +@import "../core/main";
\ No newline at end of file diff --git a/app/src/web/scss/themes/custom.scss b/app/src/web/scss/palette/_custom.scss index 50c029fb..0adb7768 100644 --- a/app/src/web/scss/themes/custom.scss +++ b/app/src/web/scss/palette/_custom.scss @@ -1,5 +1,6 @@ $bg_transparent: unquote('$BT$'); $text: unquote('$T$'); +$text_disabled: unquote('$TD$'); $link: unquote('$TT$'); $accent: unquote('$A$'); $accent_text: unquote('$AT$'); @@ -10,5 +11,3 @@ $bg_opaque2: unquote('$OO$'); $divider: unquote('$D$'); $card: unquote('$C$'); $tint: unquote('$TI$'); - -@import "../core/main"; diff --git a/app/src/web/scss/themes/material_amoled.scss b/app/src/web/scss/palette/_material_amoled.scss index 19190126..3eca36bc 100644 --- a/app/src/web/scss/themes/material_amoled.scss +++ b/app/src/web/scss/palette/_material_amoled.scss @@ -7,5 +7,3 @@ $background2: rgba($background, 0.35); $bg_transparent: $background; $card: $background2; $tint: rgba(#fff, 0.2); - -@import "../core/main"; diff --git a/app/src/web/scss/themes/material_dark.scss b/app/src/web/scss/palette/_material_dark.scss index 18b8b461..a27627c0 100644 --- a/app/src/web/scss/themes/material_dark.scss +++ b/app/src/web/scss/palette/_material_dark.scss @@ -6,5 +6,3 @@ $background: #303030; $bg_transparent: $background; $card: #353535; $tint: rgba(#fff, 0.2); - -@import "../core/main"; diff --git a/app/src/web/scss/themes/material_glass.scss b/app/src/web/scss/palette/_material_glass.scss index 0c61a38c..c9e399e7 100644 --- a/app/src/web/scss/themes/material_glass.scss +++ b/app/src/web/scss/palette/_material_glass.scss @@ -5,6 +5,4 @@ $accent: #5d86dd; $background: rgba(#000, 0.1); $bg_transparent: transparent; $card: rgba(#000, 0.25); -$tint: rgba(#fff, 0.15); - -@import "../core/main"; +$tint: rgba(#fff, 0.15);
\ No newline at end of file diff --git a/app/src/web/scss/themes/material_light.scss b/app/src/web/scss/palette/_material_light.scss index 7ec58463..2a799180 100644 --- a/app/src/web/scss/themes/material_light.scss +++ b/app/src/web/scss/palette/_material_light.scss @@ -10,6 +10,4 @@ $background2: rgba(darken($background, 8%), 0.35); $bg_transparent: $background; $card: #fff; -$tint: #ddd; - -@import "../core/main";
\ No newline at end of file +$tint: #ddd;
\ No newline at end of file |