aboutsummaryrefslogtreecommitdiff
path: root/app/src/web/scss
diff options
context:
space:
mode:
Diffstat (limited to 'app/src/web/scss')
-rw-r--r--app/src/web/scss/core/_base.scss22
-rw-r--r--app/src/web/scss/core/_colors.scss1
-rw-r--r--app/src/web/scss/facebook/core/_core_bg.scss (renamed from app/src/web/scss/core/_core_bg.scss)0
-rw-r--r--app/src/web/scss/facebook/core/_core_border.scss (renamed from app/src/web/scss/core/_core_border.scss)0
-rw-r--r--app/src/web/scss/facebook/core/_core_hider.scss4
-rw-r--r--app/src/web/scss/facebook/core/_core_messages.scss (renamed from app/src/web/scss/core/_core_messenger.scss)2
-rw-r--r--app/src/web/scss/facebook/core/_core_text.scss (renamed from app/src/web/scss/core/_core_text.scss)0
-rw-r--r--app/src/web/scss/facebook/core/_main.scss (renamed from app/src/web/scss/core/_main.scss)0
-rw-r--r--app/src/web/scss/facebook/core/_svg.scss (renamed from app/src/web/scss/core/_svg.scss)0
-rw-r--r--app/src/web/scss/facebook/core/core.scss (renamed from app/src/web/scss/core/core.scss)14
-rw-r--r--app/src/web/scss/facebook/themes/.gitignore (renamed from app/src/web/scss/themes/.gitignore)0
-rw-r--r--app/src/web/scss/facebook/themes/custom.scss2
-rw-r--r--app/src/web/scss/facebook/themes/default.scss1
-rw-r--r--app/src/web/scss/facebook/themes/material_amoled.scss2
-rw-r--r--app/src/web/scss/facebook/themes/material_dark.scss2
-rw-r--r--app/src/web/scss/facebook/themes/material_glass.scss2
-rw-r--r--app/src/web/scss/facebook/themes/material_light.scss2
-rw-r--r--app/src/web/scss/messenger/core/_core_bg.scss4
-rw-r--r--app/src/web/scss/messenger/core/_core_border.scss3
-rw-r--r--app/src/web/scss/messenger/core/_core_hider.scss15
-rw-r--r--app/src/web/scss/messenger/core/_core_text.scss3
-rw-r--r--app/src/web/scss/messenger/core/_core_vars.scss34
-rw-r--r--app/src/web/scss/messenger/core/_main.scss3
-rw-r--r--app/src/web/scss/messenger/core/core.scss11
-rw-r--r--app/src/web/scss/messenger/themes/.gitignore1
-rw-r--r--app/src/web/scss/messenger/themes/custom.scss2
-rw-r--r--app/src/web/scss/messenger/themes/default.scss1
-rw-r--r--app/src/web/scss/messenger/themes/material_amoled.scss2
-rw-r--r--app/src/web/scss/messenger/themes/material_dark.scss2
-rw-r--r--app/src/web/scss/messenger/themes/material_glass.scss2
-rw-r--r--app/src/web/scss/messenger/themes/material_light.scss2
-rw-r--r--app/src/web/scss/palette/_custom.scss (renamed from app/src/web/scss/themes/custom.scss)3
-rw-r--r--app/src/web/scss/palette/_material_amoled.scss (renamed from app/src/web/scss/themes/material_amoled.scss)2
-rw-r--r--app/src/web/scss/palette/_material_dark.scss (renamed from app/src/web/scss/themes/material_dark.scss)2
-rw-r--r--app/src/web/scss/palette/_material_glass.scss (renamed from app/src/web/scss/themes/material_glass.scss)4
-rw-r--r--app/src/web/scss/palette/_material_light.scss (renamed from app/src/web/scss/themes/material_light.scss)4
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