You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
3158 lines
164 KiB
3158 lines
164 KiB
2 years ago
|
diff --git a/app/javascript/styles/boost.scss b/app/javascript/styles/boost.scss
|
||
|
|
new file mode 100644
|
||
|
|
index 000000000..67f9a85d7
|
||
|
|
--- /dev/null
|
||
|
|
+++ b/app/javascript/styles/boost.scss
|
||
|
|
@@ -0,0 +1,61 @@
|
||
|
|
+@function hex-color($color) {
|
||
|
|
+ @if type-of($color) == 'color' {
|
||
|
|
+ $color: str-slice(ie-hex-str($color), 4);
|
||
|
|
+ }
|
||
|
|
+ @return '%23' + unquote($color)
|
||
|
|
+}
|
||
|
|
+
|
||
|
|
+@mixin boost-svg($color) {
|
||
|
|
+ background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' version='1.1' viewBox='0 0 22 684'><path fill='#{hex-color($color)}' d='m4.877 611.5c-.7624 0-1.377.61-1.377 1.38v1.0684l.52539-.73047c.55917-.73152 1.2573-.45681 1.5547-.0801l.87695 1.2207c.2438-.22.5648-.36 0.92-.36h7.2461c.52404 0 .97052.29533 1.2031.72461h-2.0039c-.34183 0-1.0466.46662-.59961 1.1953l3.3184 4.6172c.24449.30968.81966.53296 1.2793-.0684l3.2773-4.5606c.33160-.50694-.01861-1.1836-.61523-1.1836h-1.9824v-1.8477c.001-.77-.614-1.38-1.376-1.38h-12.246zm.011719 2.6055c-.23147-.0197-.48893.0743-.71875.375l-3.2773 4.5625c-.33159.50695.018609 1.1836.61523 1.1836h1.9922v1.8965c0 .76234.61461 1.377 1.377 1.377h12.246c.762 0 1.377-.61 1.377-1.38v-1.1309l-.53516.74414c-.55917.73153-1.2573.45682-1.5547.0801l-.85156-1.1856c-.245.24-.572.38-.935.38h-7.2461c-.54447 0-1.0088-.31647-1.2324-.77344h2.0234c.34183 0 1.0446-.46661.59766-1.1953l-3.3184-4.6172c-.12224-.15484-.32713-.28884-.55859-.30859zm-.0117-21.61c-.7624 0-1.377.61-1.377 1.38v1.4121l.52539-.73047c.55917-.73152 1.2573-.45681 1.5547-.0801l.73828 1.0254c.2522-.31.6297-.51 1.0586-.51h7.2461c.39170 0 .74003.16641.99023.42773h-1.791c-.34183 0-1.0466.46662-.59961 1.1953l3.3184 4.6172c.24449.30969.81966.53296 1.2793-.0684l3.2773-4.5605c.33160-.50695-.01861-1.1836-.61523-1.1836h-1.9824v-1.5508c.001-.78-.614-1.39-1.376-1.39h-12.246zm.011719 2.9492c-.23147-.0197-.48893.0743-.71875.375l-3.2773 4.5625c-.33159.50695.018609 1.1836.61523 1.1836h1.9922v1.5527c0 .76234.61461 1.377 1.377 1.377h12.246c.762.01 1.377-.60 1.377-1.37v-1.4277l-.53516.74414c-.55917.73153-1.2573.45682-1.5547.0801l-.732-1.02c-.25226.30339-.62786.5-1.0547.5h-7.2461c-.39272 0-.74186-.16718-.99219-.42969h1.7832c.34183 0 1.0446-.46661.59766-1.1953l-3.3184-4.6172c-.12224-.15484-.32713-.28884-.55859-.30859zm-.0117-21.95c-.7624 0-1.377.61-1.377 1.38v1.2402l.52539-.73047c.55917-.73153 1.2573-.45682 1.5547-.0801l.80273 1.1191c.2504-.27.6019-.43.9942-.43h7.2461c.47926 0 .89616.2454 1.1426.61523h-1.9434c-.34183 0-1.0466.46662-.59961 1.1953l3.3184 4.6172c.24449.30969.81966.53296 1.2793-.0684l3.2773-4.5605c.33160-.50695-.01861-1.1836-.61523-1.1836h-1.9824v-1.7383c0-.78-.615-1.39-1.377-1.39h-12.246zm.011719 2.7773c-.23147-.0197-.48893.0743-.71875.375l-3.2773 4.5625c-.33159.50695.018609 1.1836.61523 1.1836h1.9922v1.7246c0 .76234.61461 1.377 1.377 1.377h12.246c.762 0 1.377-.61 1.377-1.38v-1.2402l-.53516.74414c-.55917.73153-1.2573.45682-1.5547.0801l-.80469-1.1191c-.249.26-.596.42-.982.42h-7.2461c-.47361 0-.88718-.23908-1.1348-.60156h1.9258c.34183 0 1.0446-.46662.59766-1.1953l-3.3184-4.6172c-.12224-.15484-.32713-.28885-.55859-.3086zm-.0117-21.78c-.7624 0-1.377.61-1.377 1.38v1.709l.52539-.73047c.55917-.73153 1.2573-.45682 1.5547-.0801l.62891.875c.2426-.40.6730-.66 1.168-.66h7.2461c.16253 0 .31634.0327.46094.084h-1.2617c-.34183 0-1.0466.46662-.59961 1.1953l3.3184 4.6172c.24449.30969.81966.53296 1.2793-.0684l3.2773-4.5605c.33160-.50695-.01861-1.1836-.61523-1.1836h-1.9824v-1.207c.001-.77-.614-1.38-1.376-1.38h-12.246zm.011719 3.2461c-.23147-.0197-.48893.0743-.71875.375l-3.2773 4.5625c-.33159.50695.018609 1.1836.61523 1.1836h1.9922v1.2559c0 .76234.61461 1.377 1.377 1.377h12.246c.762 0 1.377-.61 1.377-1.38v-1.7715l-.53516.74414c-.55917.73153-1.2573.45682-1.5547.0801l-.60938-.84766c-.240.41-.675.68-1.178.68h-7.2461c-.20408 0-.39289-.0529-.56641-.13281h1.3574c.34183 0 1.0446-.46662.59766-1.1953l-3.3184-4.6172c-.12224-.15484-.32713-.28885-.55859-.3086zm-.0117-22.25c-.7624 0-1.377.61-1.377 1.38v2.0527l.52539-.73047c.55917-.73153 1.2573-.45682 1.5547-.0801l.52539.73047c.2064-.50.6962-.85 1.2715-.85h5.2227c.17041-.12069.36097-.19141.50195-.19141h.64453c-.35740.0546-.94208.49131-.52344 1.1738l3.3184 4.6172c.24449.30968.81966.53296 1.2793-.0684l3.2773-4.5606c.33160-.50694-.01861-1.1836-.61523-1.1836h-1.9824v-.91016c-.001-.77-.616-1.38-1.378-1.38h-12.246zm.011719 3.5898c-.23147-.0197-.48893.0743-.71875.375l-3.2773 4.5625c-.33159.50695.018609 1.1836.61523 1.1836h1.9922v.91211c0 .76234.61461 1.377 1.377 1.377h12.246c.762.01 1.377-.60 1.377-1.37v-2.0684
|
||
|
|
+}
|
||
|
|
+
|
||
|
|
+@mixin boost-locked-svg($color) {
|
||
|
|
+ background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' version='1.1' viewBox='0 0 22 684'><path fill='#{hex-color($color)}' d='m15.272 183.79h4.1402v-1.5526q0-.85715-.60647-1.4636-.60648-.60647-1.4636-.60647-.85715 0-1.4636.60647-.60647.60648-.60647 1.4636v1.5526zm6.728.78v4.6577q0 .32346-.22642.54987-.227.22-.550.22h-7.7629q-.32345 0-.54987-.22642-.22642-.22641-.22642-.54987v-4.6577q0-.32345.22642-.54987t.54987-.22642h.25876v-1.5526q0-1.4879 1.0674-2.5553t2.5553-1.0674 2.5553 1.0674 1.0674 2.5553v1.5526h.25876q.32345 0 .54987.22642.226.23.226.56zm-6.7278 322.22h4.1402v-1.5526q0-.85715-.60647-1.4636-.60648-.60647-1.4636-.60647-.85715 0-1.4636.60647-.60647.60648-.60647 1.4636v1.5526zm6.728.78v4.6577q0 .32346-.22642.54987-.227.22-.550.22h-7.7629q-.32345 0-.54987-.22642-.22642-.22641-.22642-.54987v-4.6577q0-.32345.22642-.54987t.54987-.22642h.25876v-1.5526q0-1.4879 1.0674-2.5553t2.5553-1.0674 2.5553 1.0674 1.0674 2.5553v1.5526h.25876q.32345 0 .54987.22642.226.23.226.56zm-6.7278-342.78h4.1402v-1.5526q0-.85715-.60647-1.4636-.60648-.60647-1.4636-.60647-.85715 0-1.4636.60647-.60647.60648-.60647 1.4636v1.5526zm6.728.78v4.6577q0 .32346-.22642.54987-.227.22-.550.22h-7.7629q-.32345 0-.54987-.22642-.22642-.22641-.22642-.54987v-4.6577q0-.32345.22642-.54987t.54987-.22642h.25876v-1.5526q0-1.4879 1.0674-2.5553t2.5553-1.0674 2.5553 1.0674 1.0674 2.5553v1.5526h.25876q.32345 0 .54987.22642.226.23.226.56zm-6.7278-19.776h4.1402v-1.5526q0-.85715-.60647-1.4636-.60648-.60647-1.4636-.60647-.85715 0-1.4636.60647-.60647.60648-.60647 1.4636v1.5526zm6.728.78v4.6577q0 .32346-.22642.54987-.227.22-.550.22h-7.7629q-.32345 0-.54987-.22642-.22642-.22641-.22642-.54987v-4.6577q0-.32345.22642-.54987t.54987-.22642h.25876v-1.5526q0-1.4879 1.0674-2.5553t2.5553-1.0674 2.5553 1.0674 1.0674 2.5553v1.5526h.25876q.32345 0 .54987.22642.226.23.226.56zm-6.7278-19.776h4.1402v-1.5526q0-.85715-.60647-1.4636-.60648-.60647-1.4636-.60647-.85715 0-1.4636.60647-.60647.60648-.60647 1.4636v1.5526zm6.728.78v4.6577q0 .32346-.22642.54987-.227.22-.550.22h-7.7629q-.32345 0-.54987-.22642-.22642-.22641-.22642-.54987v-4.6577q0-.32345.22642-.54987t.54987-.22642h.25876v-1.5526q0-1.4879 1.0674-2.5553t2.5553-1.0674 2.5553 1.0674 1.0674 2.5553v1.5526h.25876q.32345 0 .54987.22642.226.23.226.56zm-6.7278-19.776h4.1402v-1.5526q0-.85715-.60647-1.4636-.60648-.60647-1.4636-.60647-.85715 0-1.4636.60647-.60647.60648-.60647 1.4636v1.5526zm6.728.78v4.6577q0 .32346-.22642.54987-.227.22-.550.22h-7.7629q-.32345 0-.54987-.22642-.22642-.22641-.22642-.54987v-4.6577q0-.32345.22642-.54987t.54987-.22642h.25876v-1.5526q0-1.4879 1.0674-2.5553t2.5553-1.0674 2.5553 1.0674 1.0674 2.5553v1.5526h.25876q.32345 0 .54987.22642.226.23.226.56zm-6.7278-19.776h4.1402v-1.5526q0-.85715-.60647-1.4636-.60648-.60648-1.4636-.60648-.85715 0-1.4636.60648-.60647.60647-.60647 1.4636v1.5526zm6.728.772v4.6577q0 .32345-.22642.54987-.227.226-.550.226h-7.7629q-.32345 0-.54987-.22642t-.22642-.54987v-4.6577q0-.32345.22642-.54987t.54987-.22642h.25876v-1.5526q0-1.4879 1.0674-2.5553t2.5553-1.0674 2.5553 1.0674 1.0674 2.5553v1.5526h.25876q.32345 0 .54987.22642.226.227.226.550zm-6.7278-19.776h4.1402v-1.5526q0-.85715-.60647-1.4636-.60648-.60648-1.4636-.60648-.85715 0-1.4636.60648-.60647.60647-.60647 1.4636v1.5526zm6.728.776v4.6577q0 .32345-.22642.54987-.227.226-.550.226h-7.7629q-.32345 0-.54987-.22642t-.22642-.54987v-4.6577q0-.32345.22642-.54987t.54987-.22642h.25876v-1.5526q0-1.4879 1.0674-2.5553t2.5553-1.0674 2.5553 1.0674 1.0674 2.5553v1.5526h.25876q.32345 0 .54987.22642.226.227.226.550zm-6.7278-19.776h4.1402v-1.5526q0-.85715-.60647-1.4636-.60648-.60648-1.4636-.60648-.85715 0-1.4636.60648-.60647.60647-.60647 1.4636v1.5526zm6.728.776v4.6577q0 .32345-.22642.54987-.227.226-.550.226h-7.7629q-.32345 0-.54987-.22642t-.22642-.54987v-4.6577q0-.32345.22642-.54987t.54987-.22642h.25876v-1.5526q0-1.4879 1.0674-2.5553t2.5553-1.0674 2.5553 1.0674 1.0674 2.5553v1.5526h.25876q.32345 0 .54987.22642.226.227.226.550zm-6.7278-19.776h4.1402v-1.5526q0-.85715-.60647-1.4636-.60648-.60648-1.4636-.60648-.85715 0-1.4636.60648-.60647.6064
|
||
|
|
+}
|
||
|
|
+
|
||
|
|
+@mixin boost-svg-single($color) {
|
||
|
|
+ background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' version='1.1' viewBox='0 0 22 19'><path fill='#{hex-color($color)}' d='m6.0762 3.5l1.7968 2.5h6.75c.762 0 1.377.6146 1.377 1.377v1.7734h-2.123c-.342 0-1.045.4666-.598 1.1956l3.319 4.617c.244.310.817.533 1.277-.068l3.277-4.561c.332-.5070-.018-1.1836-.615-1.1836h-2.037v-4.2734c0-.7624-.615-1.377-1.377-1.377h-11.047zm-1.2305.2188c-.2315-.0198-.4909.0743-.7207.3750l-3.2773 4.5605c-.33164.5069.01857 1.1836.6152 1.1836h2.0371v4.2851c0 .762.6146 1.377 1.377 1.377h11.055l-1.797-2.5h-6.758c-.7624 0-1.377-.615-1.377-1.377v-1.7851h2.123c.3419 0 1.0447-.4647.5977-1.1934l-3.3184-4.6172c-.1222-.1548-.3251-.2888-.5566-.3085z'/></svg>");
|
||
|
|
+}
|
||
|
|
+
|
||
|
|
+@mixin boost-locked-svg-single($color) {
|
||
|
|
+ background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' version='1.1' viewBox='0 0 22 19'><path fill='#{hex-color($color)}' d='m15.272 12.79h4.1402v-1.5526q0-.85715-.60647-1.4636-.60648-.60648-1.4636-.60648-.85715 0-1.4636.60648-.60647.60647-.60647 1.4636v1.5526zm6.728.776v4.6577q0 .32345-.22642.54987-.227.226-.550.226h-7.7629q-.32345 0-.54987-.22642t-.22642-.54987v-4.6577q0-.32345.22642-.54987t.54987-.22642h.25876v-1.5526q0-1.4879 1.0674-2.5553t2.5553-1.0674 2.5553 1.0674 1.0674 2.5553v1.5526h.25876q.32345 0 .54987.22642.226.227.226.550zm-15.924-10.066 1.7968 2.5h6.75c.58173 0 1.0751.35888 1.2773.86719.46104-.15325.94168-.25195 1.4414-.25195.39794 0 .78277.068051 1.1582.16602v-1.9043c0-.7624-.615-1.377-1.377-1.377h-11.047zm-1.2305.2188c-.2315-.0198-.4909.0743-.7207.3750l-3.2773 4.5605c-.33159.50695.018609 1.1836.61523 1.1836h2.0371v4.2852c0 .762.6146 1.377 1.377 1.377h6.8066v-1.9336c0-.18721.04173-.38037.10547-.56641h-4.412c-.7624 0-1.377-.615-1.377-1.377v-1.7852h2.123c.34183 0 1.0446-.46466.59766-1.1934l-3.3184-4.6171c-.1222-.1548-.3251-.2888-.5566-.3085zm12.496 6.4492c-.33558 0-.51811.07475-.75586.3125-.23776.23775-.31445.42028-.31445.75586v.55273h2.1406v-.55273c0-.33558-.07475-.51811-.3125-.75586s-.42223-.3125-.75781-.3125z'/></svg>");
|
||
|
|
+}
|
||
|
|
+
|
||
|
|
+@mixin envelope($color) {
|
||
|
|
+ background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1792 1792'><path fill='#{hex-color($color)}' d='m1792 710v794q0 66-47 113t-113 47h-1472q-66 0-113-47t-47-113v-794q44 49 101 87 362 246 497 345 57 42 92.5 65.5t94.5 48 110 24.5h2q51 0 110-24.5t94.5-48 92.5-65.5q170-123 498-345 57-39 100-87zm0-294q0 79-49 151t-122 123q-376 261-468 325-10 7-42.5 30.5t-54 38-52 32.5-57.5 27-50 9h-2q-23 0-50-9t-57.5-27-52-32.5-54-38-42.5-30.5q-91-64-262-182.5t-205-142.5q-62-42-117-115.5t-55-136.5q0-78 41.5-130t118.5-52h1472q65 0 112.5 47t47.5 113z'/></svg>");
|
||
|
|
+}
|
||
|
|
+
|
||
|
|
+button.icon-button i.fa-retweet {
|
||
|
|
+ @include boost-svg-single($ui-base-lighter-color);
|
||
|
|
+}
|
||
|
|
+
|
||
|
|
+.status-private button.icon-button i.fa-retweet {
|
||
|
|
+ @include boost-locked-svg-single($ui-base-lighter-color);
|
||
|
|
+}
|
||
|
|
+
|
||
|
|
+// Disabled variant
|
||
|
|
+button.icon-button.disabled i.fa-retweet {
|
||
|
|
+ @include boost-locked-svg-single(lighten($ui-base-color, 13%));
|
||
|
|
+}
|
||
|
|
+
|
||
|
|
+// Disabled variant for use with DMs
|
||
|
|
+.status-direct button.icon-button.disabled i.fa-retweet {
|
||
|
|
+ @include envelope(lighten($ui-base-color, 16%));
|
||
|
|
+ background-position: center center;
|
||
|
|
+ background-repeat: no-repeat;
|
||
|
|
+}
|
||
|
|
+
|
||
|
|
+.no-reduce-motion button.icon-button i.fa-retweet {
|
||
|
|
+ transition: none;
|
||
|
|
+ background-position: 0px 684px;
|
||
|
|
+}
|
||
|
|
+
|
||
|
|
+.no-reduce-motion button.icon-button.active i.fa-retweet {
|
||
|
|
+ @include boost-svg($ui-highlight-color);
|
||
|
|
+ transition: background-position 0.6s steps(36);
|
||
|
|
+ background-size: 22px 684px;
|
||
|
|
+ background-position: 0px 0px;
|
||
|
|
+}
|
||
|
|
+.no-reduce-motion .status-private button.icon-button.active i.fa-retweet {
|
||
|
|
+ @include boost-locked-svg($ui-highlight-color);
|
||
|
|
+}
|
||
|
|
diff --git a/app/javascript/styles/coffee-dark.scss b/app/javascript/styles/coffee-dark.scss
|
||
|
|
new file mode 100644
|
||
|
|
index 000000000..6d613982f
|
||
|
|
--- /dev/null
|
||
|
|
+++ b/app/javascript/styles/coffee-dark.scss
|
||
|
|
@@ -0,0 +1,11 @@
|
||
|
|
+@import 'coffee-dark/variables';
|
||
|
|
+@import 'application';
|
||
|
|
+@import 'coffee-dark/diff';
|
||
|
|
+//@import 'boost';
|
||
|
|
+//@import 'mods/display_browserfont';
|
||
|
|
+@import 'mods/display_breakname';
|
||
|
|
+@import 'mods/display_fullname';
|
||
|
|
+@import 'mods/display_emojizoom';
|
||
|
|
+//@import 'mods/display_circleavatar';
|
||
|
|
+@import 'mods/layout_1600px';
|
||
|
|
+@import 'mods/layout_widercolumns';
|
||
|
|
diff --git a/app/javascript/styles/coffee-dark/diff.scss b/app/javascript/styles/coffee-dark/diff.scss
|
||
|
|
new file mode 100644
|
||
|
|
index 000000000..b612b87f4
|
||
|
|
--- /dev/null
|
||
|
|
+++ b/app/javascript/styles/coffee-dark/diff.scss
|
||
|
|
@@ -0,0 +1,77 @@
|
||
|
|
+// components.scss
|
||
|
|
+.compose-form {
|
||
|
|
+ .compose-form__modifiers {
|
||
|
|
+ .compose-form__upload {
|
||
|
|
+ &-description {
|
||
|
|
+ input {
|
||
|
|
+ &::placeholder {
|
||
|
|
+ opacity: 1;
|
||
|
|
+ }
|
||
|
|
+ }
|
||
|
|
+ }
|
||
|
|
+ }
|
||
|
|
+ }
|
||
|
|
+}
|
||
|
|
+
|
||
|
|
+.rich-formatting a,
|
||
|
|
+.rich-formatting p a,
|
||
|
|
+.rich-formatting li a,
|
||
|
|
+.landing-page__short-description p a,
|
||
|
|
+.status__content a,
|
||
|
|
+.reply-indicator__content a {
|
||
|
|
+ color: lighten($ui-highlight-color, 12%);
|
||
|
|
+ text-decoration: none;
|
||
|
|
+
|
||
|
|
+ &.mention {
|
||
|
|
+ text-decoration: none;
|
||
|
|
+ }
|
||
|
|
+
|
||
|
|
+ &.mention span {
|
||
|
|
+ text-decoration: none;
|
||
|
|
+
|
||
|
|
+ &:hover,
|
||
|
|
+ &:focus,
|
||
|
|
+ &:active {
|
||
|
|
+ text-decoration: none;
|
||
|
|
+ }
|
||
|
|
+ }
|
||
|
|
+
|
||
|
|
+ &:hover,
|
||
|
|
+ &:focus,
|
||
|
|
+ &:active {
|
||
|
|
+ text-decoration: none;
|
||
|
|
+ }
|
||
|
|
+
|
||
|
|
+ &.status__content__spoiler-link {
|
||
|
|
+ color: $secondary-text-color;
|
||
|
|
+ text-decoration: none;
|
||
|
|
+ }
|
||
|
|
+}
|
||
|
|
+
|
||
|
|
+.status__content__read-more-button {
|
||
|
|
+ text-decoration: none;
|
||
|
|
+
|
||
|
|
+ &:hover,
|
||
|
|
+ &:focus,
|
||
|
|
+ &:active {
|
||
|
|
+ text-decoration: none;
|
||
|
|
+ }
|
||
|
|
+}
|
||
|
|
+
|
||
|
|
+.getting-started__footer a {
|
||
|
|
+ text-decoration: none;
|
||
|
|
+
|
||
|
|
+ &:hover,
|
||
|
|
+ &:focus,
|
||
|
|
+ &:active {
|
||
|
|
+ text-decoration: none;
|
||
|
|
+ }
|
||
|
|
+}
|
||
|
|
+
|
||
|
|
+.nothing-here {
|
||
|
|
+ color: $darker-text-color;
|
||
|
|
+}
|
||
|
|
+
|
||
|
|
+.public-layout .public-account-header__tabs__tabs .counter.active::after {
|
||
|
|
+ border-bottom: 4px solid $ui-highlight-color;
|
||
|
|
+}
|
||
|
|
diff --git a/app/javascript/styles/coffee-dark/variables.scss b/app/javascript/styles/coffee-dark/variables.scss
|
||
|
|
new file mode 100644
|
||
|
|
index 000000000..e90d6842a
|
||
|
|
--- /dev/null
|
||
|
|
+++ b/app/javascript/styles/coffee-dark/variables.scss
|
||
|
|
@@ -0,0 +1,65 @@
|
||
|
|
+// Commonly used web colors
|
||
|
|
+$black: #000000; // Black
|
||
|
|
+$white: #ffffff; // White
|
||
|
|
+$success-green: #79bd9a !default; // Padua
|
||
|
|
+$error-red: #df405a !default; // Cerise
|
||
|
|
+$warning-red: #ff5050 !default; // Sunset Orange
|
||
|
|
+$gold-star: #ca8f04 !default; // Dark Goldenrod
|
||
|
|
+
|
||
|
|
+$red-bookmark: $warning-red;
|
||
|
|
+
|
||
|
|
+// Values from the classic Mastodon UI
|
||
|
|
+$classic-base-color: #282c37; // Midnight Express
|
||
|
|
+$classic-primary-color: #9baec8; // Echo Blue
|
||
|
|
+$classic-secondary-color: #d9e1e8; // Pattens Blue
|
||
|
|
+$classic-highlight-color: #e7b01c; // Summer Sky
|
||
|
|
+//$classic-highlight-color: #4285f4; // OE7DRT (new) Blue
|
||
|
|
+//$classic-highlight-color: #1e57b6; // OE7DRT (new) Blue (darker) (this is a bit too dark)
|
||
|
|
+//$classic-highlight-color: #3a74d5; // OE7DRT (new) Blue (darker) (use this)
|
||
|
|
+//$classic-highlight-color: #7612cc; // OE7DRT violet (too dark)
|
||
|
|
+//$classic-highlight-color: #8737cc; // OE7DRT violet (still a bit too dark)
|
||
|
|
+//$classic-highlight-color: #9d59d8; // OE7DRT violet (damn white)
|
||
|
|
+
|
||
|
|
+//$classic-highlight-color: #4c7899; // OE7DRT /\rch (not bad) bit too high
|
||
|
|
+//$classic-highlight-color: #00bc8c; // OE7DRT /\rch (greenish like cloudlog)
|
||
|
|
+
|
||
|
|
+// Variables for defaults in UI
|
||
|
|
+$base-shadow-color: $black !default;
|
||
|
|
+$base-overlay-background: $black !default;
|
||
|
|
+$base-border-color: $white !default;
|
||
|
|
+$simple-background-color: $white !default;
|
||
|
|
+$valid-value-color: $success-green !default;
|
||
|
|
+$error-value-color: $error-red !default;
|
||
|
|
+
|
||
|
|
+// Tell UI to use selected colors
|
||
|
|
+$ui-base-color: $classic-base-color !default; // Darkest
|
||
|
|
+$ui-base-lighter-color: lighten($ui-base-color, 26%) !default; // Lighter darkest
|
||
|
|
+$ui-primary-color: $classic-primary-color !default; // Lighter
|
||
|
|
+$ui-secondary-color: $classic-secondary-color !default; // Lightest
|
||
|
|
+$ui-highlight-color: $classic-highlight-color !default;
|
||
|
|
+
|
||
|
|
+// Variables for texts
|
||
|
|
+$primary-text-color: $white !default;
|
||
|
|
+$darker-text-color: $ui-primary-color !default;
|
||
|
|
+$dark-text-color: $ui-base-lighter-color !default;
|
||
|
|
+$secondary-text-color: $ui-secondary-color !default;
|
||
|
|
+$highlight-text-color: $ui-highlight-color !default;
|
||
|
|
+$action-button-color: $ui-base-lighter-color !default;
|
||
|
|
+// For texts on inverted backgrounds
|
||
|
|
+$inverted-text-color: $ui-base-color !default;
|
||
|
|
+$lighter-text-color: $ui-base-lighter-color !default;
|
||
|
|
+$light-text-color: $ui-primary-color !default;
|
||
|
|
+
|
||
|
|
+// Language codes that uses CJK fonts
|
||
|
|
+$cjk-langs: ja, ko, zh-CN, zh-HK, zh-TW;
|
||
|
|
+
|
||
|
|
+// Variables for components
|
||
|
|
+$media-modal-media-max-width: 100%;
|
||
|
|
+// put margins on top and bottom of image to avoid the screen covered by image.
|
||
|
|
+$media-modal-media-max-height: 80%;
|
||
|
|
+
|
||
|
|
+$no-gap-breakpoint: 415px;
|
||
|
|
+
|
||
|
|
+$font-sans-serif: 'mastodon-font-sans-serif' !default;
|
||
|
|
+$font-display: 'mastodon-font-display' !default;
|
||
|
|
+$font-monospace: 'mastodon-font-monospace' !default;
|
||
|
|
diff --git a/app/javascript/styles/coffee-light.scss b/app/javascript/styles/coffee-light.scss
|
||
|
|
new file mode 100644
|
||
|
|
index 000000000..118721f73
|
||
|
|
--- /dev/null
|
||
|
|
+++ b/app/javascript/styles/coffee-light.scss
|
||
|
|
@@ -0,0 +1,6 @@
|
||
|
|
+@import 'coffee-light/variables';
|
||
|
|
+@import 'application';
|
||
|
|
+@import 'coffee-light/diff';
|
||
|
|
+//@import 'boost';
|
||
|
|
+//@import 'mods/display_fullname';
|
||
|
|
+@import 'mods/display_circleavatar';
|
||
|
|
diff --git a/app/javascript/styles/coffee-light/diff.scss b/app/javascript/styles/coffee-light/diff.scss
|
||
|
|
new file mode 100644
|
||
|
|
index 000000000..7a846bcc6
|
||
|
|
--- /dev/null
|
||
|
|
+++ b/app/javascript/styles/coffee-light/diff.scss
|
||
|
|
@@ -0,0 +1,776 @@
|
||
|
|
+// Notes!
|
||
|
|
+// Sass color functions, "darken" and "lighten" are automatically replaced.
|
||
|
|
+
|
||
|
|
+html {
|
||
|
|
+ scrollbar-color: $ui-base-color rgba($ui-base-color, 0.25);
|
||
|
|
+}
|
||
|
|
+
|
||
|
|
+// Change the colors of button texts
|
||
|
|
+.button {
|
||
|
|
+ color: $white;
|
||
|
|
+
|
||
|
|
+ &.button-alternative-2 {
|
||
|
|
+ color: $white;
|
||
|
|
+ }
|
||
|
|
+}
|
||
|
|
+
|
||
|
|
+.status-card__actions button,
|
||
|
|
+.status-card__actions a {
|
||
|
|
+ color: rgba($white, 0.8);
|
||
|
|
+
|
||
|
|
+ &:hover,
|
||
|
|
+ &:active,
|
||
|
|
+ &:focus {
|
||
|
|
+ color: $white;
|
||
|
|
+ }
|
||
|
|
+}
|
||
|
|
+
|
||
|
|
+// Change default background colors of columns
|
||
|
|
+.column > .scrollable,
|
||
|
|
+.getting-started,
|
||
|
|
+.column-inline-form,
|
||
|
|
+.error-column,
|
||
|
|
+.regeneration-indicator {
|
||
|
|
+ background: $white;
|
||
|
|
+ border: 1px solid lighten($ui-base-color, 8%);
|
||
|
|
+ border-top: 0;
|
||
|
|
+}
|
||
|
|
+
|
||
|
|
+.directory__card__img {
|
||
|
|
+ background: lighten($ui-base-color, 12%);
|
||
|
|
+}
|
||
|
|
+
|
||
|
|
+.filter-form,
|
||
|
|
+.directory__card__bar {
|
||
|
|
+ background: $white;
|
||
|
|
+ border-bottom: 1px solid lighten($ui-base-color, 8%);
|
||
|
|
+}
|
||
|
|
+
|
||
|
|
+.scrollable .directory__list {
|
||
|
|
+ width: calc(100% + 2px);
|
||
|
|
+ margin-left: -1px;
|
||
|
|
+ margin-right: -1px;
|
||
|
|
+}
|
||
|
|
+
|
||
|
|
+.directory__card,
|
||
|
|
+.table-of-contents {
|
||
|
|
+ border: 1px solid lighten($ui-base-color, 8%);
|
||
|
|
+}
|
||
|
|
+
|
||
|
|
+.column-back-button,
|
||
|
|
+.column-header {
|
||
|
|
+ background: $white;
|
||
|
|
+ border: 1px solid lighten($ui-base-color, 8%);
|
||
|
|
+
|
||
|
|
+ @media screen and (max-width: $no-gap-breakpoint) {
|
||
|
|
+ border-top: 0;
|
||
|
|
+ }
|
||
|
|
+
|
||
|
|
+ &--slim-button {
|
||
|
|
+ top: -50px;
|
||
|
|
+ right: 0;
|
||
|
|
+ }
|
||
|
|
+}
|
||
|
|
+
|
||
|
|
+.column-header__back-button,
|
||
|
|
+.column-header__button,
|
||
|
|
+.column-header__button.active,
|
||
|
|
+.account__header__bar,
|
||
|
|
+.directory__card__extra {
|
||
|
|
+ background: $white;
|
||
|
|
+}
|
||
|
|
+
|
||
|
|
+.column-header__button.active {
|
||
|
|
+ color: $ui-highlight-color;
|
||
|
|
+
|
||
|
|
+ &:hover,
|
||
|
|
+ &:active,
|
||
|
|
+ &:focus {
|
||
|
|
+ color: $ui-highlight-color;
|
||
|
|
+ background: $white;
|
||
|
|
+ }
|
||
|
|
+}
|
||
|
|
+
|
||
|
|
+.account__header__bar .avatar .account__avatar {
|
||
|
|
+ border-color: $white;
|
||
|
|
+}
|
||
|
|
+
|
||
|
|
+.getting-started__footer a {
|
||
|
|
+ color: $ui-secondary-color;
|
||
|
|
+ text-decoration: underline;
|
||
|
|
+}
|
||
|
|
+
|
||
|
|
+.confirmation-modal__secondary-button,
|
||
|
|
+.confirmation-modal__cancel-button,
|
||
|
|
+.mute-modal__cancel-button,
|
||
|
|
+.block-modal__cancel-button {
|
||
|
|
+ color: lighten($ui-base-color, 26%);
|
||
|
|
+
|
||
|
|
+ &:hover,
|
||
|
|
+ &:focus,
|
||
|
|
+ &:active {
|
||
|
|
+ color: $primary-text-color;
|
||
|
|
+ }
|
||
|
|
+}
|
||
|
|
+
|
||
|
|
+.column-subheading {
|
||
|
|
+ background: darken($ui-base-color, 4%);
|
||
|
|
+ border-bottom: 1px solid lighten($ui-base-color, 8%);
|
||
|
|
+}
|
||
|
|
+
|
||
|
|
+.getting-started,
|
||
|
|
+.scrollable {
|
||
|
|
+ .column-link {
|
||
|
|
+ background: $white;
|
||
|
|
+ border-bottom: 1px solid lighten($ui-base-color, 8%);
|
||
|
|
+
|
||
|
|
+ &:hover,
|
||
|
|
+ &:active,
|
||
|
|
+ &:focus {
|
||
|
|
+ background: $ui-base-color;
|
||
|
|
+ }
|
||
|
|
+ }
|
||
|
|
+}
|
||
|
|
+
|
||
|
|
+.getting-started .navigation-bar {
|
||
|
|
+ border-top: 1px solid lighten($ui-base-color, 8%);
|
||
|
|
+ border-bottom: 1px solid lighten($ui-base-color, 8%);
|
||
|
|
+
|
||
|
|
+ @media screen and (max-width: $no-gap-breakpoint) {
|
||
|
|
+ border-top: 0;
|
||
|
|
+ }
|
||
|
|
+}
|
||
|
|
+
|
||
|
|
+.compose-form__autosuggest-wrapper,
|
||
|
|
+.poll__option input[type="text"],
|
||
|
|
+.compose-form .spoiler-input__input,
|
||
|
|
+.compose-form__poll-wrapper select,
|
||
|
|
+.search__input,
|
||
|
|
+.setting-text,
|
||
|
|
+.box-widget input[type="text"],
|
||
|
|
+.box-widget input[type="email"],
|
||
|
|
+.box-widget input[type="password"],
|
||
|
|
+.box-widget textarea,
|
||
|
|
+.statuses-grid .detailed-status,
|
||
|
|
+.audio-player {
|
||
|
|
+ border: 1px solid lighten($ui-base-color, 8%);
|
||
|
|
+}
|
||
|
|
+
|
||
|
|
+.search__input {
|
||
|
|
+ @media screen and (max-width: $no-gap-breakpoint) {
|
||
|
|
+ border-top: 0;
|
||
|
|
+ border-bottom: 0;
|
||
|
|
+ }
|
||
|
|
+}
|
||
|
|
+
|
||
|
|
+.list-editor .search .search__input {
|
||
|
|
+ border-top: 0;
|
||
|
|
+ border-bottom: 0;
|
||
|
|
+}
|
||
|
|
+
|
||
|
|
+.compose-form__poll-wrapper select {
|
||
|
|
+ background: $simple-background-color url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14.933 18.467' height='19.698' width='15.929'><path d='M3.467 14.967l-3.393-3.5H14.86l-3.392 3.5c-1.866 1.925-3.666 3.5-4 3.5-.335 0-2.135-1.575-4-3.5zm.266-11.234L7.467 0 11.2 3.733l3.733 3.734H0l3.733-3.734z' fill='#{hex-color(lighten($ui-base-color, 8%))}'/></svg>") no-repeat right 8px center / auto 16px;
|
||
|
|
+}
|
||
|
|
+
|
||
|
|
+.compose-form__poll-wrapper,
|
||
|
|
+.compose-form__poll-wrapper .poll__footer {
|
||
|
|
+ border-top-color: lighten($ui-base-color, 8%);
|
||
|
|
+}
|
||
|
|
+
|
||
|
|
+.notification__filter-bar {
|
||
|
|
+ border: 1px solid lighten($ui-base-color, 8%);
|
||
|
|
+ border-top: 0;
|
||
|
|
+}
|
||
|
|
+
|
||
|
|
+.compose-form .compose-form__buttons-wrapper {
|
||
|
|
+ background: $ui-base-color;
|
||
|
|
+ border: 1px solid lighten($ui-base-color, 8%);
|
||
|
|
+ border-top: 0;
|
||
|
|
+}
|
||
|
|
+
|
||
|
|
+.drawer__header,
|
||
|
|
+.drawer__inner {
|
||
|
|
+ background: $white;
|
||
|
|
+ border: 1px solid lighten($ui-base-color, 8%);
|
||
|
|
+}
|
||
|
|
+
|
||
|
|
+.drawer__inner__mastodon {
|
||
|
|
+ background: $white url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 234.80078 31.757813" width="234.80078" height="31.757812"><path d="M19.599609 0c-1.05 0-2.10039.375-2.90039 1.125L0 16.925781v14.832031h234.80078V17.025391l-16.5-15.900391c-1.6-1.5-4.20078-1.5-5.80078 0l-13.80078 13.099609c-1.6 1.5-4.19883 1.5-5.79883 0L179.09961 1.125c-1.6-1.5-4.19883-1.5-5.79883 0L159.5 14.224609c-1.6 1.5-4.20078 1.5-5.80078 0L139.90039 1.125c-1.6-1.5-4.20078-1.5-5.80078 0l-13.79883 13.099609c-1.6 1.5-4.20078 1.5-5.80078 0L100.69922 1.125c-1.600001-1.5-4.198829-1.5-5.798829 0l-13.59961 13.099609c-1.6 1.5-4.200781 1.5-5.800781 0L61.699219 1.125c-1.6-1.5-4.198828-1.5-5.798828 0L42.099609 14.224609c-1.6 1.5-4.198828 1.5-5.798828 0L22.5 1.125C21.7.375 20.649609 0 19.599609 0z" fill="#{hex-color($ui-base-color)}"/></svg>') no-repeat bottom / 100% auto;
|
||
|
|
+}
|
||
|
|
+
|
||
|
|
+// Change the colors used in compose-form
|
||
|
|
+.compose-form {
|
||
|
|
+ .compose-form__modifiers {
|
||
|
|
+ .compose-form__upload__actions .icon-button {
|
||
|
|
+ color: lighten($white, 7%);
|
||
|
|
+
|
||
|
|
+ &:active,
|
||
|
|
+ &:focus,
|
||
|
|
+ &:hover {
|
||
|
|
+ color: $white;
|
||
|
|
+ }
|
||
|
|
+ }
|
||
|
|
+
|
||
|
|
+ .compose-form__upload-description input {
|
||
|
|
+ color: lighten($white, 7%);
|
||
|
|
+
|
||
|
|
+ &::placeholder {
|
||
|
|
+ color: lighten($white, 7%);
|
||
|
|
+ }
|
||
|
|
+ }
|
||
|
|
+ }
|
||
|
|
+
|
||
|
|
+ .compose-form__buttons-wrapper {
|
||
|
|
+ background: darken($ui-base-color, 6%);
|
||
|
|
+ }
|
||
|
|
+
|
||
|
|
+ .autosuggest-textarea__suggestions {
|
||
|
|
+ background: darken($ui-base-color, 6%);
|
||
|
|
+ }
|
||
|
|
+
|
||
|
|
+ .autosuggest-textarea__suggestions__item {
|
||
|
|
+ &:hover,
|
||
|
|
+ &:focus,
|
||
|
|
+ &:active,
|
||
|
|
+ &.selected {
|
||
|
|
+ background: lighten($ui-base-color, 4%);
|
||
|
|
+ }
|
||
|
|
+ }
|
||
|
|
+}
|
||
|
|
+
|
||
|
|
+.emoji-mart-bar {
|
||
|
|
+ border-color: lighten($ui-base-color, 4%);
|
||
|
|
+
|
||
|
|
+ &:first-child {
|
||
|
|
+ background: darken($ui-base-color, 6%);
|
||
|
|
+ }
|
||
|
|
+}
|
||
|
|
+
|
||
|
|
+.emoji-mart-search input {
|
||
|
|
+ background: rgba($ui-base-color, 0.3);
|
||
|
|
+ border-color: $ui-base-color;
|
||
|
|
+}
|
||
|
|
+
|
||
|
|
+// Change the background colors of statuses
|
||
|
|
+.focusable:focus {
|
||
|
|
+ background: $ui-base-color;
|
||
|
|
+}
|
||
|
|
+
|
||
|
|
+.status.status-direct {
|
||
|
|
+ background: lighten($ui-base-color, 4%);
|
||
|
|
+}
|
||
|
|
+
|
||
|
|
+.focusable:focus .status.status-direct {
|
||
|
|
+ background: lighten($ui-base-color, 8%);
|
||
|
|
+}
|
||
|
|
+
|
||
|
|
+.detailed-status,
|
||
|
|
+.detailed-status__action-bar {
|
||
|
|
+ background: $white;
|
||
|
|
+}
|
||
|
|
+
|
||
|
|
+// Change the background colors of status__content__spoiler-link
|
||
|
|
+.reply-indicator__content .status__content__spoiler-link,
|
||
|
|
+.status__content .status__content__spoiler-link {
|
||
|
|
+ background: $ui-base-color;
|
||
|
|
+
|
||
|
|
+ &:hover {
|
||
|
|
+ background: lighten($ui-base-color, 4%);
|
||
|
|
+ }
|
||
|
|
+}
|
||
|
|
+
|
||
|
|
+// Change the background colors of media and video spoilers
|
||
|
|
+.media-spoiler,
|
||
|
|
+.video-player__spoiler {
|
||
|
|
+ background: $ui-base-color;
|
||
|
|
+}
|
||
|
|
+
|
||
|
|
+.privacy-dropdown.active .privacy-dropdown__value.active .icon-button {
|
||
|
|
+ color: $white;
|
||
|
|
+}
|
||
|
|
+
|
||
|
|
+.account-gallery__item a {
|
||
|
|
+ background-color: $ui-base-color;
|
||
|
|
+}
|
||
|
|
+
|
||
|
|
+// Change the colors used in the dropdown menu
|
||
|
|
+.dropdown-menu {
|
||
|
|
+ background: $white;
|
||
|
|
+
|
||
|
|
+ &__arrow {
|
||
|
|
+ &.left {
|
||
|
|
+ border-left-color: $white;
|
||
|
|
+ }
|
||
|
|
+
|
||
|
|
+ &.top {
|
||
|
|
+ border-top-color: $white;
|
||
|
|
+ }
|
||
|
|
+
|
||
|
|
+ &.bottom {
|
||
|
|
+ border-bottom-color: $white;
|
||
|
|
+ }
|
||
|
|
+
|
||
|
|
+ &.right {
|
||
|
|
+ border-right-color: $white;
|
||
|
|
+ }
|
||
|
|
+ }
|
||
|
|
+
|
||
|
|
+ &__item {
|
||
|
|
+ a {
|
||
|
|
+ background: $white;
|
||
|
|
+ color: $darker-text-color;
|
||
|
|
+ }
|
||
|
|
+ }
|
||
|
|
+}
|
||
|
|
+
|
||
|
|
+// Change the text colors on inverted background
|
||
|
|
+.privacy-dropdown__option.active,
|
||
|
|
+.privacy-dropdown__option:hover,
|
||
|
|
+.privacy-dropdown__option.active .privacy-dropdown__option__content,
|
||
|
|
+.privacy-dropdown__option.active .privacy-dropdown__option__content strong,
|
||
|
|
+.privacy-dropdown__option:hover .privacy-dropdown__option__content,
|
||
|
|
+.privacy-dropdown__option:hover .privacy-dropdown__option__content strong,
|
||
|
|
+.dropdown-menu__item a:active,
|
||
|
|
+.dropdown-menu__item a:focus,
|
||
|
|
+.dropdown-menu__item a:hover,
|
||
|
|
+.actions-modal ul li:not(:empty) a.active,
|
||
|
|
+.actions-modal ul li:not(:empty) a.active button,
|
||
|
|
+.actions-modal ul li:not(:empty) a:active,
|
||
|
|
+.actions-modal ul li:not(:empty) a:active button,
|
||
|
|
+.actions-modal ul li:not(:empty) a:focus,
|
||
|
|
+.actions-modal ul li:not(:empty) a:focus button,
|
||
|
|
+.actions-modal ul li:not(:empty) a:hover,
|
||
|
|
+.actions-modal ul li:not(:empty) a:hover button,
|
||
|
|
+.admin-wrapper .sidebar ul .simple-navigation-active-leaf a,
|
||
|
|
+.simple_form .block-button,
|
||
|
|
+.simple_form .button,
|
||
|
|
+.simple_form button {
|
||
|
|
+ color: $white;
|
||
|
|
+}
|
||
|
|
+
|
||
|
|
+.dropdown-menu__separator {
|
||
|
|
+ border-bottom-color: lighten($ui-base-color, 4%);
|
||
|
|
+}
|
||
|
|
+
|
||
|
|
+// Change the background colors of modals
|
||
|
|
+.actions-modal,
|
||
|
|
+.boost-modal,
|
||
|
|
+.confirmation-modal,
|
||
|
|
+.mute-modal,
|
||
|
|
+.block-modal,
|
||
|
|
+.report-modal,
|
||
|
|
+.embed-modal,
|
||
|
|
+.error-modal,
|
||
|
|
+.onboarding-modal,
|
||
|
|
+.report-modal__comment .setting-text__wrapper,
|
||
|
|
+.report-modal__comment .setting-text {
|
||
|
|
+ background: $white;
|
||
|
|
+ border: 1px solid lighten($ui-base-color, 8%);
|
||
|
|
+}
|
||
|
|
+
|
||
|
|
+.report-modal__comment {
|
||
|
|
+ border-right-color: lighten($ui-base-color, 8%);
|
||
|
|
+}
|
||
|
|
+
|
||
|
|
+.report-modal__container {
|
||
|
|
+ border-top-color: lighten($ui-base-color, 8%);
|
||
|
|
+}
|
||
|
|
+
|
||
|
|
+.column-header__collapsible-inner {
|
||
|
|
+ background: darken($ui-base-color, 4%);
|
||
|
|
+ border: 1px solid lighten($ui-base-color, 8%);
|
||
|
|
+ border-top: 0;
|
||
|
|
+}
|
||
|
|
+
|
||
|
|
+.focal-point__preview strong {
|
||
|
|
+ color: $white;
|
||
|
|
+}
|
||
|
|
+
|
||
|
|
+.boost-modal__action-bar,
|
||
|
|
+.confirmation-modal__action-bar,
|
||
|
|
+.mute-modal__action-bar,
|
||
|
|
+.block-modal__action-bar,
|
||
|
|
+.onboarding-modal__paginator,
|
||
|
|
+.error-modal__footer {
|
||
|
|
+ background: darken($ui-base-color, 6%);
|
||
|
|
+
|
||
|
|
+ .onboarding-modal__nav,
|
||
|
|
+ .error-modal__nav {
|
||
|
|
+ &:hover,
|
||
|
|
+ &:focus,
|
||
|
|
+ &:active {
|
||
|
|
+ background-color: darken($ui-base-color, 12%);
|
||
|
|
+ }
|
||
|
|
+ }
|
||
|
|
+}
|
||
|
|
+
|
||
|
|
+.display-case__case {
|
||
|
|
+ background: $white;
|
||
|
|
+}
|
||
|
|
+
|
||
|
|
+.embed-modal .embed-modal__container .embed-modal__html {
|
||
|
|
+ background: $white;
|
||
|
|
+ border: 1px solid lighten($ui-base-color, 8%);
|
||
|
|
+
|
||
|
|
+ &:focus {
|
||
|
|
+ border-color: lighten($ui-base-color, 12%);
|
||
|
|
+ background: $white;
|
||
|
|
+ }
|
||
|
|
+}
|
||
|
|
+
|
||
|
|
+.react-toggle-track {
|
||
|
|
+ background: $ui-secondary-color;
|
||
|
|
+}
|
||
|
|
+
|
||
|
|
+.react-toggle:hover:not(.react-toggle--disabled) .react-toggle-track {
|
||
|
|
+ background: darken($ui-secondary-color, 10%);
|
||
|
|
+}
|
||
|
|
+
|
||
|
|
+.react-toggle.react-toggle--checked:hover:not(.react-toggle--disabled) .react-toggle-track {
|
||
|
|
+ background: lighten($ui-highlight-color, 10%);
|
||
|
|
+}
|
||
|
|
+
|
||
|
|
+// Change the default color used for the text in an empty column or on the error column
|
||
|
|
+.empty-column-indicator,
|
||
|
|
+.error-column {
|
||
|
|
+ color: $primary-text-color;
|
||
|
|
+ background: $white;
|
||
|
|
+}
|
||
|
|
+
|
||
|
|
+.tabs-bar {
|
||
|
|
+ background: $white;
|
||
|
|
+ border: 1px solid lighten($ui-base-color, 8%);
|
||
|
|
+ border-bottom: 0;
|
||
|
|
+
|
||
|
|
+ @media screen and (max-width: $no-gap-breakpoint) {
|
||
|
|
+ border-top: 0;
|
||
|
|
+ }
|
||
|
|
+
|
||
|
|
+ &__link {
|
||
|
|
+ padding-bottom: 14px;
|
||
|
|
+ border-bottom-width: 1px;
|
||
|
|
+ border-bottom-color: lighten($ui-base-color, 8%);
|
||
|
|
+
|
||
|
|
+ &:hover,
|
||
|
|
+ &:active,
|
||
|
|
+ &:focus {
|
||
|
|
+ background: $ui-base-color;
|
||
|
|
+ }
|
||
|
|
+
|
||
|
|
+ &.active {
|
||
|
|
+ &:hover,
|
||
|
|
+ &:active,
|
||
|
|
+ &:focus {
|
||
|
|
+ background: transparent;
|
||
|
|
+ border-bottom-color: $ui-highlight-color;
|
||
|
|
+ }
|
||
|
|
+ }
|
||
|
|
+ }
|
||
|
|
+}
|
||
|
|
+
|
||
|
|
+// Change the default colors used on some parts of the profile pages
|
||
|
|
+.activity-stream-tabs {
|
||
|
|
+ background: $account-background-color;
|
||
|
|
+ border-bottom-color: lighten($ui-base-color, 8%);
|
||
|
|
+}
|
||
|
|
+
|
||
|
|
+.box-widget,
|
||
|
|
+.nothing-here,
|
||
|
|
+.page-header,
|
||
|
|
+.directory__tag > a,
|
||
|
|
+.directory__tag > div,
|
||
|
|
+.landing-page__call-to-action,
|
||
|
|
+.contact-widget,
|
||
|
|
+.landing .hero-widget__text,
|
||
|
|
+.landing-page__information.contact-widget {
|
||
|
|
+ background: $white;
|
||
|
|
+ border: 1px solid lighten($ui-base-color, 8%);
|
||
|
|
+
|
||
|
|
+ @media screen and (max-width: $no-gap-breakpoint) {
|
||
|
|
+ border-left: 0;
|
||
|
|
+ border-right: 0;
|
||
|
|
+ border-top: 0;
|
||
|
|
+ }
|
||
|
|
+}
|
||
|
|
+
|
||
|
|
+.landing .hero-widget__text {
|
||
|
|
+ border-top: 0;
|
||
|
|
+ border-bottom: 0;
|
||
|
|
+}
|
||
|
|
+
|
||
|
|
+.simple_form {
|
||
|
|
+ input[type=text],
|
||
|
|
+ input[type=number],
|
||
|
|
+ input[type=email],
|
||
|
|
+ input[type=password],
|
||
|
|
+ textarea {
|
||
|
|
+ &:hover {
|
||
|
|
+ border-color: lighten($ui-base-color, 12%);
|
||
|
|
+ }
|
||
|
|
+ }
|
||
|
|
+}
|
||
|
|
+
|
||
|
|
+.landing .hero-widget__footer {
|
||
|
|
+ background: $white;
|
||
|
|
+ border: 1px solid lighten($ui-base-color, 8%);
|
||
|
|
+ border-top: 0;
|
||
|
|
+
|
||
|
|
+ @media screen and (max-width: $no-gap-breakpoint) {
|
||
|
|
+ border: 0;
|
||
|
|
+ }
|
||
|
|
+}
|
||
|
|
+
|
||
|
|
+.brand__tagline {
|
||
|
|
+ color: $ui-secondary-color;
|
||
|
|
+}
|
||
|
|
+
|
||
|
|
+.directory__tag > a {
|
||
|
|
+ &:hover,
|
||
|
|
+ &:active,
|
||
|
|
+ &:focus {
|
||
|
|
+ background: $ui-base-color;
|
||
|
|
+ }
|
||
|
|
+
|
||
|
|
+ @media screen and (max-width: $no-gap-breakpoint) {
|
||
|
|
+ border: 0;
|
||
|
|
+ }
|
||
|
|
+}
|
||
|
|
+
|
||
|
|
+.directory__tag.active > a,
|
||
|
|
+.directory__tag.active > div {
|
||
|
|
+ border-color: $ui-highlight-color;
|
||
|
|
+
|
||
|
|
+ &,
|
||
|
|
+ h4,
|
||
|
|
+ h4 small,
|
||
|
|
+ .fa,
|
||
|
|
+ .trends__item__current {
|
||
|
|
+ color: $white;
|
||
|
|
+ }
|
||
|
|
+
|
||
|
|
+ &:hover,
|
||
|
|
+ &:active,
|
||
|
|
+ &:focus {
|
||
|
|
+ background: $ui-highlight-color;
|
||
|
|
+ }
|
||
|
|
+}
|
||
|
|
+
|
||
|
|
+.batch-table {
|
||
|
|
+ &__toolbar,
|
||
|
|
+ &__row,
|
||
|
|
+ .nothing-here {
|
||
|
|
+ border-color: lighten($ui-base-color, 8%);
|
||
|
|
+ }
|
||
|
|
+}
|
||
|
|
+
|
||
|
|
+.activity-stream {
|
||
|
|
+ border: 1px solid lighten($ui-base-color, 8%);
|
||
|
|
+
|
||
|
|
+ &--under-tabs {
|
||
|
|
+ border-top: 0;
|
||
|
|
+ }
|
||
|
|
+
|
||
|
|
+ .entry {
|
||
|
|
+ background: $account-background-color;
|
||
|
|
+
|
||
|
|
+ .detailed-status.light,
|
||
|
|
+ .more.light,
|
||
|
|
+ .status.light {
|
||
|
|
+ border-bottom-color: lighten($ui-base-color, 8%);
|
||
|
|
+ }
|
||
|
|
+ }
|
||
|
|
+
|
||
|
|
+ .status.light {
|
||
|
|
+ .status__content {
|
||
|
|
+ color: $primary-text-color;
|
||
|
|
+ }
|
||
|
|
+
|
||
|
|
+ .display-name {
|
||
|
|
+ strong {
|
||
|
|
+ color: $primary-text-color;
|
||
|
|
+ }
|
||
|
|
+ }
|
||
|
|
+ }
|
||
|
|
+}
|
||
|
|
+
|
||
|
|
+.accounts-grid {
|
||
|
|
+ .account-grid-card {
|
||
|
|
+ .controls {
|
||
|
|
+ .icon-button {
|
||
|
|
+ color: $darker-text-color;
|
||
|
|
+ }
|
||
|
|
+ }
|
||
|
|
+
|
||
|
|
+ .name {
|
||
|
|
+ a {
|
||
|
|
+ color: $primary-text-color;
|
||
|
|
+ }
|
||
|
|
+ }
|
||
|
|
+
|
||
|
|
+ .username {
|
||
|
|
+ color: $darker-text-color;
|
||
|
|
+ }
|
||
|
|
+
|
||
|
|
+ .account__header__content {
|
||
|
|
+ color: $primary-text-color;
|
||
|
|
+ }
|
||
|
|
+ }
|
||
|
|
+}
|
||
|
|
+
|
||
|
|
+.simple_form,
|
||
|
|
+.table-form {
|
||
|
|
+ .warning {
|
||
|
|
+ box-shadow: none;
|
||
|
|
+ background: rgba($error-red, 0.5);
|
||
|
|
+ text-shadow: none;
|
||
|
|
+ }
|
||
|
|
+
|
||
|
|
+ .recommended {
|
||
|
|
+ border-color: $ui-highlight-color;
|
||
|
|
+ color: $ui-highlight-color;
|
||
|
|
+ background-color: rgba($ui-highlight-color, 0.1);
|
||
|
|
+ }
|
||
|
|
+}
|
||
|
|
+
|
||
|
|
+.compose-form .compose-form__warning {
|
||
|
|
+ border-color: $ui-highlight-color;
|
||
|
|
+ background-color: rgba($ui-highlight-color, 0.1);
|
||
|
|
+
|
||
|
|
+ &,
|
||
|
|
+ a {
|
||
|
|
+ color: $ui-highlight-color;
|
||
|
|
+ }
|
||
|
|
+}
|
||
|
|
+
|
||
|
|
+.status__content,
|
||
|
|
+.reply-indicator__content {
|
||
|
|
+ a {
|
||
|
|
+ color: $highlight-text-color;
|
||
|
|
+ }
|
||
|
|
+}
|
||
|
|
+
|
||
|
|
+.button.logo-button {
|
||
|
|
+ color: $white;
|
||
|
|
+
|
||
|
|
+ svg {
|
||
|
|
+ fill: $white;
|
||
|
|
+ }
|
||
|
|
+}
|
||
|
|
+
|
||
|
|
+.public-layout {
|
||
|
|
+ .account__section-headline {
|
||
|
|
+ border: 1px solid lighten($ui-base-color, 8%);
|
||
|
|
+
|
||
|
|
+ @media screen and (max-width: $no-gap-breakpoint) {
|
||
|
|
+ border-top: 0;
|
||
|
|
+ }
|
||
|
|
+ }
|
||
|
|
+
|
||
|
|
+ .header,
|
||
|
|
+ .public-account-header,
|
||
|
|
+ .public-account-bio {
|
||
|
|
+ box-shadow: none;
|
||
|
|
+ }
|
||
|
|
+
|
||
|
|
+ .public-account-bio,
|
||
|
|
+ .hero-widget__text {
|
||
|
|
+ background: $account-background-color;
|
||
|
|
+ border: 1px solid lighten($ui-base-color, 8%);
|
||
|
|
+ }
|
||
|
|
+
|
||
|
|
+ .header {
|
||
|
|
+ background: $ui-base-color;
|
||
|
|
+ border: 1px solid lighten($ui-base-color, 8%);
|
||
|
|
+
|
||
|
|
+ @media screen and (max-width: $no-gap-breakpoint) {
|
||
|
|
+ border: 0;
|
||
|
|
+ }
|
||
|
|
+
|
||
|
|
+ .brand {
|
||
|
|
+ &:hover,
|
||
|
|
+ &:focus,
|
||
|
|
+ &:active {
|
||
|
|
+ background: lighten($ui-base-color, 4%);
|
||
|
|
+ }
|
||
|
|
+ }
|
||
|
|
+ }
|
||
|
|
+
|
||
|
|
+ .public-account-header {
|
||
|
|
+ &__image {
|
||
|
|
+ background: lighten($ui-base-color, 12%);
|
||
|
|
+
|
||
|
|
+ &::after {
|
||
|
|
+ box-shadow: none;
|
||
|
|
+ }
|
||
|
|
+ }
|
||
|
|
+
|
||
|
|
+ &__bar {
|
||
|
|
+ &::before {
|
||
|
|
+ background: $account-background-color;
|
||
|
|
+ border: 1px solid lighten($ui-base-color, 8%);
|
||
|
|
+ border-top: 0;
|
||
|
|
+ }
|
||
|
|
+
|
||
|
|
+ .avatar img {
|
||
|
|
+ border-color: $account-background-color;
|
||
|
|
+ }
|
||
|
|
+
|
||
|
|
+ @media screen and (max-width: $no-columns-breakpoint) {
|
||
|
|
+ background: $account-background-color;
|
||
|
|
+ border: 1px solid lighten($ui-base-color, 8%);
|
||
|
|
+ border-top: 0;
|
||
|
|
+ }
|
||
|
|
+ }
|
||
|
|
+
|
||
|
|
+ &__tabs {
|
||
|
|
+ &__name {
|
||
|
|
+ h1,
|
||
|
|
+ h1 small {
|
||
|
|
+ color: $white;
|
||
|
|
+
|
||
|
|
+ @media screen and (max-width: $no-columns-breakpoint) {
|
||
|
|
+ color: $primary-text-color;
|
||
|
|
+ }
|
||
|
|
+ }
|
||
|
|
+ }
|
||
|
|
+ }
|
||
|
|
+
|
||
|
|
+ &__extra {
|
||
|
|
+ .public-account-bio {
|
||
|
|
+ border: 0;
|
||
|
|
+ }
|
||
|
|
+
|
||
|
|
+ .public-account-bio .account__header__fields {
|
||
|
|
+ border-color: lighten($ui-base-color, 8%);
|
||
|
|
+ }
|
||
|
|
+ }
|
||
|
|
+ }
|
||
|
|
+}
|
||
|
|
+
|
||
|
|
+.notification__filter-bar button.active::after,
|
||
|
|
+.account__section-headline a.active::after {
|
||
|
|
+ border-color: transparent transparent $white;
|
||
|
|
+}
|
||
|
|
+
|
||
|
|
+.hero-widget,
|
||
|
|
+.box-widget,
|
||
|
|
+.contact-widget,
|
||
|
|
+.landing-page__information.contact-widget,
|
||
|
|
+.moved-account-widget,
|
||
|
|
+.memoriam-widget,
|
||
|
|
+.activity-stream,
|
||
|
|
+.nothing-here,
|
||
|
|
+.directory__tag > a,
|
||
|
|
+.directory__tag > div,
|
||
|
|
+.card > a,
|
||
|
|
+.page-header,
|
||
|
|
+.compose-form .compose-form__warning {
|
||
|
|
+ box-shadow: none;
|
||
|
|
+}
|
||
|
|
+
|
||
|
|
+.audio-player .video-player__controls button,
|
||
|
|
+.audio-player .video-player__time-sep,
|
||
|
|
+.audio-player .video-player__time-current,
|
||
|
|
+.audio-player .video-player__time-total {
|
||
|
|
+ color: $primary-text-color;
|
||
|
|
+}
|
||
|
|
diff --git a/app/javascript/styles/coffee-light/variables.scss b/app/javascript/styles/coffee-light/variables.scss
|
||
|
|
new file mode 100644
|
||
|
|
index 000000000..5faae83b6
|
||
|
|
--- /dev/null
|
||
|
|
+++ b/app/javascript/styles/coffee-light/variables.scss
|
||
|
|
@@ -0,0 +1,41 @@
|
||
|
|
+// Dependent colors
|
||
|
|
+$black: #000000;
|
||
|
|
+$white: #ffffff;
|
||
|
|
+
|
||
|
|
+$classic-base-color: #282c37;
|
||
|
|
+$classic-primary-color: #9baec8;
|
||
|
|
+$classic-secondary-color: #d9e1e8;
|
||
|
|
+$classic-highlight-color: #e7b01c;
|
||
|
|
+
|
||
|
|
+// Differences
|
||
|
|
+$success-green: lighten(#3c754d, 8%);
|
||
|
|
+
|
||
|
|
+$base-overlay-background: $white !default;
|
||
|
|
+$valid-value-color: $success-green !default;
|
||
|
|
+
|
||
|
|
+$ui-base-color: $classic-secondary-color !default;
|
||
|
|
+$ui-base-lighter-color: #b0c0cf;
|
||
|
|
+$ui-primary-color: #9bcbed;
|
||
|
|
+$ui-secondary-color: $classic-base-color !default;
|
||
|
|
+$ui-highlight-color: #e7b01c;
|
||
|
|
+
|
||
|
|
+$primary-text-color: $black !default;
|
||
|
|
+$darker-text-color: $classic-base-color !default;
|
||
|
|
+$dark-text-color: #444b5d;
|
||
|
|
+$action-button-color: #606984;
|
||
|
|
+
|
||
|
|
+$inverted-text-color: $black !default;
|
||
|
|
+$lighter-text-color: $classic-base-color !default;
|
||
|
|
+$light-text-color: #444b5d;
|
||
|
|
+
|
||
|
|
+//Newly added colors
|
||
|
|
+$account-background-color: $white !default;
|
||
|
|
+
|
||
|
|
+//Invert darkened and lightened colors
|
||
|
|
+@function darken($color, $amount) {
|
||
|
|
+ @return hsl(hue($color), saturation($color), lightness($color) + $amount);
|
||
|
|
+}
|
||
|
|
+
|
||
|
|
+@function lighten($color, $amount) {
|
||
|
|
+ @return hsl(hue($color), saturation($color), lightness($color) - $amount);
|
||
|
|
+}
|
||
|
|
diff --git a/app/javascript/styles/cute.scss b/app/javascript/styles/cute.scss
|
||
|
|
new file mode 100644
|
||
|
|
index 000000000..1a3dfb04e
|
||
|
|
--- /dev/null
|
||
|
|
+++ b/app/javascript/styles/cute.scss
|
||
|
|
@@ -0,0 +1,17 @@
|
||
|
|
+@import 'application';
|
||
|
|
+
|
||
|
|
+@import 'mfc/mastodonFlat';
|
||
|
|
+@import 'cute/palette';
|
||
|
|
+@import 'cute/overrides';
|
||
|
|
+
|
||
|
|
+@import 'mods/display_breakname';
|
||
|
|
+@import 'mods/display_fullname';
|
||
|
|
+//@import 'mods/display_browserfont';
|
||
|
|
+@import 'mods/display_circleavatar';
|
||
|
|
+//@import 'mods/display_collapsedinteractions';
|
||
|
|
+//@import 'mods/display_fadedinteractions';
|
||
|
|
+@import 'mods/display_transparentmedia';
|
||
|
|
+@import 'mods/layout_1600px';
|
||
|
|
+@import 'mods/layout_elefriend';
|
||
|
|
+//@import 'mods/layout_widercolumns';
|
||
|
|
+//@import 'mods/layout_mobile_bottombar';
|
||
|
|
diff --git a/app/javascript/styles/cute/overrides.scss b/app/javascript/styles/cute/overrides.scss
|
||
|
|
new file mode 100644
|
||
|
|
index 000000000..e69de29bb
|
||
|
|
diff --git a/app/javascript/styles/cute/palette.scss b/app/javascript/styles/cute/palette.scss
|
||
|
|
new file mode 100644
|
||
|
|
index 000000000..74d2bf093
|
||
|
|
--- /dev/null
|
||
|
|
+++ b/app/javascript/styles/cute/palette.scss
|
||
|
|
@@ -0,0 +1,57 @@
|
||
|
|
+/*------------------------------------------------------------------------------
|
||
|
|
+* DEFINE COLOR PALETTE
|
||
|
|
+*
|
||
|
|
+* Choose the CSS Variables that will be applied to recolor elements.
|
||
|
|
+* The current format is to use hex codes, e.g. #00FF00.
|
||
|
|
+*
|
||
|
|
+* A future refactor to use rgb() instead may allow transparency mods
|
||
|
|
+* via using these variables with rgba(). Hex codes currently do not
|
||
|
|
+* work with rgba(), so no transparency mods are included except for
|
||
|
|
+* those defined in absolute terms (i.e., non-variable colors).
|
||
|
|
+*
|
||
|
|
+* Foreground Colors:
|
||
|
|
+* --bg: | Background for foreground elements.
|
||
|
|
+* --text: | A color that stands out against bg.
|
||
|
|
+* --textBold: | A color that stands out strongly against bg.
|
||
|
|
+* --textMuted: | A color that stands out slightly against bg.
|
||
|
|
+*
|
||
|
|
+* Background Colors:
|
||
|
|
+* --bgPage: | Background for non-foreground elements.
|
||
|
|
+* --textPage: | A color that stands out against bgPage.
|
||
|
|
+* --textPageBold: | A color that stands out strongly against bgPage.
|
||
|
|
+* --textPageMuted: | A color that stands out slightly against bgPage.
|
||
|
|
+*
|
||
|
|
+* Highlights Colors:
|
||
|
|
+* --bgHead: | Background for column headers.
|
||
|
|
+* --textHead: | A color that stands out (strongly) against bgHead.
|
||
|
|
+* --accent: | An accent color for links and buttons.
|
||
|
|
+* --accentText: | A color that stands out (strongly) against accent.
|
||
|
|
+*
|
||
|
|
+* Palette advisories for choosing colors:
|
||
|
|
+* - Consider using an off-white or off-black for text tones,
|
||
|
|
+* but not necessary as long as there is sufficient contrast.
|
||
|
|
+* - Bold colors are highly recommended to be strong colors,
|
||
|
|
+* like pure white or pure black.
|
||
|
|
+* - Muted colors can be off-grey or any mid-tone with slight contrast.
|
||
|
|
+* - It might be best to base the background palette on a slightly
|
||
|
|
+* darker or lighter version of the foreground palette, but
|
||
|
|
+* this is no longer strictly necessary; you may use mixed palettes.
|
||
|
|
+* It is now possible to use a dark bgPage and light bg, or vice-versa.
|
||
|
|
+------------------------------------------------------------------------------*/
|
||
|
|
+
|
||
|
|
+:root {
|
||
|
|
+--bg: #222;
|
||
|
|
+--text: #ddd;
|
||
|
|
+--textBold: #fff;
|
||
|
|
+--textMuted: #777;
|
||
|
|
+
|
||
|
|
+--bgPage: #111;
|
||
|
|
+--textPage: var(--text);
|
||
|
|
+--textPageBold: var(--textBold);
|
||
|
|
+--textPageMuted: var(--textMuted);
|
||
|
|
+
|
||
|
|
+--bgHead: #333;
|
||
|
|
+--textHead: var(--textBold);
|
||
|
|
+--accent: #f09; /* flamingo: #f09 */
|
||
|
|
+--accentText: var(--textHead);
|
||
|
|
+}
|
||
|
|
diff --git a/app/javascript/styles/dark-red.scss b/app/javascript/styles/dark-red.scss
|
||
|
|
new file mode 100644
|
||
|
|
index 000000000..60c35c04e
|
||
|
|
--- /dev/null
|
||
|
|
+++ b/app/javascript/styles/dark-red.scss
|
||
|
|
@@ -0,0 +1,3 @@
|
||
|
|
+@import 'dark-red/variables';
|
||
|
|
+@import 'application';
|
||
|
|
+@import 'dark-red/diff';
|
||
|
|
diff --git a/app/javascript/styles/dark-red/diff.scss b/app/javascript/styles/dark-red/diff.scss
|
||
|
|
new file mode 100644
|
||
|
|
index 000000000..b612b87f4
|
||
|
|
--- /dev/null
|
||
|
|
+++ b/app/javascript/styles/dark-red/diff.scss
|
||
|
|
@@ -0,0 +1,77 @@
|
||
|
|
+// components.scss
|
||
|
|
+.compose-form {
|
||
|
|
+ .compose-form__modifiers {
|
||
|
|
+ .compose-form__upload {
|
||
|
|
+ &-description {
|
||
|
|
+ input {
|
||
|
|
+ &::placeholder {
|
||
|
|
+ opacity: 1;
|
||
|
|
+ }
|
||
|
|
+ }
|
||
|
|
+ }
|
||
|
|
+ }
|
||
|
|
+ }
|
||
|
|
+}
|
||
|
|
+
|
||
|
|
+.rich-formatting a,
|
||
|
|
+.rich-formatting p a,
|
||
|
|
+.rich-formatting li a,
|
||
|
|
+.landing-page__short-description p a,
|
||
|
|
+.status__content a,
|
||
|
|
+.reply-indicator__content a {
|
||
|
|
+ color: lighten($ui-highlight-color, 12%);
|
||
|
|
+ text-decoration: none;
|
||
|
|
+
|
||
|
|
+ &.mention {
|
||
|
|
+ text-decoration: none;
|
||
|
|
+ }
|
||
|
|
+
|
||
|
|
+ &.mention span {
|
||
|
|
+ text-decoration: none;
|
||
|
|
+
|
||
|
|
+ &:hover,
|
||
|
|
+ &:focus,
|
||
|
|
+ &:active {
|
||
|
|
+ text-decoration: none;
|
||
|
|
+ }
|
||
|
|
+ }
|
||
|
|
+
|
||
|
|
+ &:hover,
|
||
|
|
+ &:focus,
|
||
|
|
+ &:active {
|
||
|
|
+ text-decoration: none;
|
||
|
|
+ }
|
||
|
|
+
|
||
|
|
+ &.status__content__spoiler-link {
|
||
|
|
+ color: $secondary-text-color;
|
||
|
|
+ text-decoration: none;
|
||
|
|
+ }
|
||
|
|
+}
|
||
|
|
+
|
||
|
|
+.status__content__read-more-button {
|
||
|
|
+ text-decoration: none;
|
||
|
|
+
|
||
|
|
+ &:hover,
|
||
|
|
+ &:focus,
|
||
|
|
+ &:active {
|
||
|
|
+ text-decoration: none;
|
||
|
|
+ }
|
||
|
|
+}
|
||
|
|
+
|
||
|
|
+.getting-started__footer a {
|
||
|
|
+ text-decoration: none;
|
||
|
|
+
|
||
|
|
+ &:hover,
|
||
|
|
+ &:focus,
|
||
|
|
+ &:active {
|
||
|
|
+ text-decoration: none;
|
||
|
|
+ }
|
||
|
|
+}
|
||
|
|
+
|
||
|
|
+.nothing-here {
|
||
|
|
+ color: $darker-text-color;
|
||
|
|
+}
|
||
|
|
+
|
||
|
|
+.public-layout .public-account-header__tabs__tabs .counter.active::after {
|
||
|
|
+ border-bottom: 4px solid $ui-highlight-color;
|
||
|
|
+}
|
||
|
|
diff --git a/app/javascript/styles/dark-red/variables.scss b/app/javascript/styles/dark-red/variables.scss
|
||
|
|
new file mode 100644
|
||
|
|
index 000000000..d8456fe12
|
||
|
|
--- /dev/null
|
||
|
|
+++ b/app/javascript/styles/dark-red/variables.scss
|
||
|
|
@@ -0,0 +1,56 @@
|
||
|
|
+// Commonly used web colors
|
||
|
|
+$black: #000000; // Black
|
||
|
|
+$white: #ffffff; // White
|
||
|
|
+$success-green: #79bd9a !default; // Padua
|
||
|
|
+$error-red: #df405a !default; // Cerise
|
||
|
|
+$warning-red: #ff5050 !default; // Sunset Orange
|
||
|
|
+$gold-star: #ca8f04 !default; // Dark Goldenrod
|
||
|
|
+
|
||
|
|
+$red-bookmark: $warning-red;
|
||
|
|
+
|
||
|
|
+// Values from the classic Mastodon UI
|
||
|
|
+$classic-base-color: #282c37; // Midnight Express
|
||
|
|
+$classic-primary-color: #9baec8; // Echo Blue
|
||
|
|
+$classic-secondary-color: #d9e1e8; // Pattens Blue
|
||
|
|
+$classic-highlight-color: #d92b2b; // Summer Sky
|
||
|
|
+
|
||
|
|
+// Variables for defaults in UI
|
||
|
|
+$base-shadow-color: $black !default;
|
||
|
|
+$base-overlay-background: $black !default;
|
||
|
|
+$base-border-color: $white !default;
|
||
|
|
+$simple-background-color: $white !default;
|
||
|
|
+$valid-value-color: $success-green !default;
|
||
|
|
+$error-value-color: $error-red !default;
|
||
|
|
+
|
||
|
|
+// Tell UI to use selected colors
|
||
|
|
+$ui-base-color: $classic-base-color !default; // Darkest
|
||
|
|
+$ui-base-lighter-color: lighten($ui-base-color, 26%) !default; // Lighter darkest
|
||
|
|
+$ui-primary-color: $classic-primary-color !default; // Lighter
|
||
|
|
+$ui-secondary-color: $classic-secondary-color !default; // Lightest
|
||
|
|
+$ui-highlight-color: $classic-highlight-color !default;
|
||
|
|
+
|
||
|
|
+// Variables for texts
|
||
|
|
+$primary-text-color: $white !default;
|
||
|
|
+$darker-text-color: $ui-primary-color !default;
|
||
|
|
+$dark-text-color: $ui-base-lighter-color !default;
|
||
|
|
+$secondary-text-color: $ui-secondary-color !default;
|
||
|
|
+$highlight-text-color: $ui-highlight-color !default;
|
||
|
|
+$action-button-color: $ui-base-lighter-color !default;
|
||
|
|
+// For texts on inverted backgrounds
|
||
|
|
+$inverted-text-color: $ui-base-color !default;
|
||
|
|
+$lighter-text-color: $ui-base-lighter-color !default;
|
||
|
|
+$light-text-color: $ui-primary-color !default;
|
||
|
|
+
|
||
|
|
+// Language codes that uses CJK fonts
|
||
|
|
+$cjk-langs: ja, ko, zh-CN, zh-HK, zh-TW;
|
||
|
|
+
|
||
|
|
+// Variables for components
|
||
|
|
+$media-modal-media-max-width: 100%;
|
||
|
|
+// put margins on top and bottom of image to avoid the screen covered by image.
|
||
|
|
+$media-modal-media-max-height: 80%;
|
||
|
|
+
|
||
|
|
+$no-gap-breakpoint: 415px;
|
||
|
|
+
|
||
|
|
+$font-sans-serif: 'mastodon-font-sans-serif' !default;
|
||
|
|
+$font-display: 'mastodon-font-display' !default;
|
||
|
|
+$font-monospace: 'mastodon-font-monospace' !default;
|
||
|
|
diff --git a/app/javascript/styles/droid.scss b/app/javascript/styles/droid.scss
|
||
|
|
new file mode 100644
|
||
|
|
index 000000000..846fbd7ef
|
||
|
|
--- /dev/null
|
||
|
|
+++ b/app/javascript/styles/droid.scss
|
||
|
|
@@ -0,0 +1,17 @@
|
||
|
|
+@import 'application';
|
||
|
|
+
|
||
|
|
+@import 'mfc/mastodonFlat';
|
||
|
|
+@import 'droid/palette';
|
||
|
|
+@import 'droid/overrides';
|
||
|
|
+
|
||
|
|
+@import 'mods/display_breakname';
|
||
|
|
+@import 'mods/display_fullname';
|
||
|
|
+//@import 'mods/display_browserfont';
|
||
|
|
+@import 'mods/display_circleavatar';
|
||
|
|
+//@import 'mods/display_collapsedinteractions';
|
||
|
|
+//@import 'mods/display_fadedinteractions';
|
||
|
|
+@import 'mods/display_transparentmedia';
|
||
|
|
+@import 'mods/layout_1600px';
|
||
|
|
+@import 'mods/layout_elefriend';
|
||
|
|
+//@import 'mods/layout_widercolumns';
|
||
|
|
+//@import 'mods/layout_mobile_bottombar';
|
||
|
|
diff --git a/app/javascript/styles/droid/overrides.scss b/app/javascript/styles/droid/overrides.scss
|
||
|
|
new file mode 100644
|
||
|
|
index 000000000..e69de29bb
|
||
|
|
diff --git a/app/javascript/styles/droid/palette.scss b/app/javascript/styles/droid/palette.scss
|
||
|
|
new file mode 100644
|
||
|
|
index 000000000..4dffdfddf
|
||
|
|
--- /dev/null
|
||
|
|
+++ b/app/javascript/styles/droid/palette.scss
|
||
|
|
@@ -0,0 +1,59 @@
|
||
|
|
+/*------------------------------------------------------------------------------
|
||
|
|
+* DEFINE COLOR PALETTE
|
||
|
|
+*
|
||
|
|
+* Choose the CSS Variables that will be applied to recolor elements.
|
||
|
|
+* The current format is to use hex codes, e.g. #00FF00.
|
||
|
|
+*
|
||
|
|
+* A future refactor to use rgb() instead may allow transparency mods
|
||
|
|
+* via using these variables with rgba(). Hex codes currently do not
|
||
|
|
+* work with rgba(), so no transparency mods are included except for
|
||
|
|
+* those defined in absolute terms (i.e., non-variable colors).
|
||
|
|
+*
|
||
|
|
+* Foreground Colors:
|
||
|
|
+* --bg: | Background for foreground elements.
|
||
|
|
+* --text: | A color that stands out against bg.
|
||
|
|
+* --textBold: | A color that stands out strongly against bg.
|
||
|
|
+* --textMuted: | A color that stands out slightly against bg.
|
||
|
|
+*
|
||
|
|
+* Background Colors:
|
||
|
|
+* --bgPage: | Background for non-foreground elements.
|
||
|
|
+* --textPage: | A color that stands out against bgPage.
|
||
|
|
+* --textPageBold: | A color that stands out strongly against bgPage.
|
||
|
|
+* --textPageMuted: | A color that stands out slightly against bgPage.
|
||
|
|
+*
|
||
|
|
+* Highlights Colors:
|
||
|
|
+* --bgHead: | Background for column headers.
|
||
|
|
+* --textHead: | A color that stands out (strongly) against bgHead.
|
||
|
|
+* --accent: | An accent color for links and buttons.
|
||
|
|
+* --accentText: | A color that stands out (strongly) against accent.
|
||
|
|
+*
|
||
|
|
+* Palette advisories for choosing colors:
|
||
|
|
+* - Consider using an off-white or off-black for text tones,
|
||
|
|
+* but not necessary as long as there is sufficient contrast.
|
||
|
|
+* - Bold colors are highly recommended to be strong colors,
|
||
|
|
+* like pure white or pure black.
|
||
|
|
+* - Muted colors can be off-grey or any mid-tone with slight contrast.
|
||
|
|
+* - It might be best to base the background palette on a slightly
|
||
|
|
+* darker or lighter version of the foreground palette, but
|
||
|
|
+* this is no longer strictly necessary; you may use mixed palettes.
|
||
|
|
+* It is now possible to use a dark bgPage and light bg, or vice-versa.
|
||
|
|
+------------------------------------------------------------------------------*/
|
||
|
|
+
|
||
|
|
+/* linernotes dark */
|
||
|
|
+
|
||
|
|
+:root {
|
||
|
|
+--bg: #222;
|
||
|
|
+--text: #ddd;
|
||
|
|
+--textBold: #fff;
|
||
|
|
+--textMuted: #777;
|
||
|
|
+
|
||
|
|
+--bgPage: #111;
|
||
|
|
+--textPage: var(--text);
|
||
|
|
+--textPageBold: var(--textBold);
|
||
|
|
+--textPageMuted: var(--textMuted);
|
||
|
|
+
|
||
|
|
+--bgHead: #333;
|
||
|
|
+--textHead: var(--textBold);
|
||
|
|
+--accent: #a4c639; /* flamingo: #f09 */
|
||
|
|
+--accentText: var(--textHead);
|
||
|
|
+}
|
||
|
|
diff --git a/app/javascript/styles/fullwidth-media.scss b/app/javascript/styles/fullwidth-media.scss
|
||
|
|
new file mode 100644
|
||
|
|
index 000000000..f6a036d4f
|
||
|
|
--- /dev/null
|
||
|
|
+++ b/app/javascript/styles/fullwidth-media.scss
|
||
|
|
@@ -0,0 +1,48 @@
|
||
|
|
+
|
||
|
|
+.detailed-status > .media-spoiler,
|
||
|
|
+.status > .media-spoiler,
|
||
|
|
+.status .video-player,
|
||
|
|
+.media-gallery,
|
||
|
|
+.status .status-card.interactive {
|
||
|
|
+ margin-top: 20px;
|
||
|
|
+ margin-left: -68px;
|
||
|
|
+ width: calc(100% + 80px);
|
||
|
|
+}
|
||
|
|
+
|
||
|
|
+.detailed-status > .media-spoiler,
|
||
|
|
+.status > .media-spoiler,
|
||
|
|
+.video-player {
|
||
|
|
+ max-width: none;
|
||
|
|
+}
|
||
|
|
+
|
||
|
|
+/* If there's no status text, add an extra margin on top */
|
||
|
|
+.status .status__info + .media-gallery,
|
||
|
|
+.status .status__info + .media-spoiler,
|
||
|
|
+.status .status__info + .video-player,
|
||
|
|
+.status .status__info + .status-card {
|
||
|
|
+ margin-top: 40px;
|
||
|
|
+}
|
||
|
|
+
|
||
|
|
+.status__video-player-video {
|
||
|
|
+ transform: unset;
|
||
|
|
+ top: unset;
|
||
|
|
+}
|
||
|
|
+
|
||
|
|
+.detailed-status .media-gallery {
|
||
|
|
+ margin-left: -10px;
|
||
|
|
+ width: calc(100% + 22px);
|
||
|
|
+}
|
||
|
|
+
|
||
|
|
+.public-layout .status {
|
||
|
|
+ .status__content {
|
||
|
|
+ min-height: 15px;
|
||
|
|
+ }
|
||
|
|
+ & > .media-spoiler,
|
||
|
|
+ .video-player,
|
||
|
|
+ .media-gallery,
|
||
|
|
+ .status-card {
|
||
|
|
+ margin-top: 20px;
|
||
|
|
+ width: calc(100% + 94px);
|
||
|
|
+ margin-left: -78px;
|
||
|
|
+ }
|
||
|
|
+}
|
||
|
|
diff --git a/app/javascript/styles/light-red.scss b/app/javascript/styles/light-red.scss
|
||
|
|
new file mode 100644
|
||
|
|
index 000000000..6969822c1
|
||
|
|
--- /dev/null
|
||
|
|
+++ b/app/javascript/styles/light-red.scss
|
||
|
|
@@ -0,0 +1,3 @@
|
||
|
|
+@import 'light-red/variables';
|
||
|
|
+@import 'application';
|
||
|
|
+@import 'light-red/diff';
|
||
|
|
diff --git a/app/javascript/styles/light-red/diff.scss b/app/javascript/styles/light-red/diff.scss
|
||
|
|
new file mode 100644
|
||
|
|
index 000000000..7a846bcc6
|
||
|
|
--- /dev/null
|
||
|
|
+++ b/app/javascript/styles/light-red/diff.scss
|
||
|
|
@@ -0,0 +1,776 @@
|
||
|
|
+// Notes!
|
||
|
|
+// Sass color functions, "darken" and "lighten" are automatically replaced.
|
||
|
|
+
|
||
|
|
+html {
|
||
|
|
+ scrollbar-color: $ui-base-color rgba($ui-base-color, 0.25);
|
||
|
|
+}
|
||
|
|
+
|
||
|
|
+// Change the colors of button texts
|
||
|
|
+.button {
|
||
|
|
+ color: $white;
|
||
|
|
+
|
||
|
|
+ &.button-alternative-2 {
|
||
|
|
+ color: $white;
|
||
|
|
+ }
|
||
|
|
+}
|
||
|
|
+
|
||
|
|
+.status-card__actions button,
|
||
|
|
+.status-card__actions a {
|
||
|
|
+ color: rgba($white, 0.8);
|
||
|
|
+
|
||
|
|
+ &:hover,
|
||
|
|
+ &:active,
|
||
|
|
+ &:focus {
|
||
|
|
+ color: $white;
|
||
|
|
+ }
|
||
|
|
+}
|
||
|
|
+
|
||
|
|
+// Change default background colors of columns
|
||
|
|
+.column > .scrollable,
|
||
|
|
+.getting-started,
|
||
|
|
+.column-inline-form,
|
||
|
|
+.error-column,
|
||
|
|
+.regeneration-indicator {
|
||
|
|
+ background: $white;
|
||
|
|
+ border: 1px solid lighten($ui-base-color, 8%);
|
||
|
|
+ border-top: 0;
|
||
|
|
+}
|
||
|
|
+
|
||
|
|
+.directory__card__img {
|
||
|
|
+ background: lighten($ui-base-color, 12%);
|
||
|
|
+}
|
||
|
|
+
|
||
|
|
+.filter-form,
|
||
|
|
+.directory__card__bar {
|
||
|
|
+ background: $white;
|
||
|
|
+ border-bottom: 1px solid lighten($ui-base-color, 8%);
|
||
|
|
+}
|
||
|
|
+
|
||
|
|
+.scrollable .directory__list {
|
||
|
|
+ width: calc(100% + 2px);
|
||
|
|
+ margin-left: -1px;
|
||
|
|
+ margin-right: -1px;
|
||
|
|
+}
|
||
|
|
+
|
||
|
|
+.directory__card,
|
||
|
|
+.table-of-contents {
|
||
|
|
+ border: 1px solid lighten($ui-base-color, 8%);
|
||
|
|
+}
|
||
|
|
+
|
||
|
|
+.column-back-button,
|
||
|
|
+.column-header {
|
||
|
|
+ background: $white;
|
||
|
|
+ border: 1px solid lighten($ui-base-color, 8%);
|
||
|
|
+
|
||
|
|
+ @media screen and (max-width: $no-gap-breakpoint) {
|
||
|
|
+ border-top: 0;
|
||
|
|
+ }
|
||
|
|
+
|
||
|
|
+ &--slim-button {
|
||
|
|
+ top: -50px;
|
||
|
|
+ right: 0;
|
||
|
|
+ }
|
||
|
|
+}
|
||
|
|
+
|
||
|
|
+.column-header__back-button,
|
||
|
|
+.column-header__button,
|
||
|
|
+.column-header__button.active,
|
||
|
|
+.account__header__bar,
|
||
|
|
+.directory__card__extra {
|
||
|
|
+ background: $white;
|
||
|
|
+}
|
||
|
|
+
|
||
|
|
+.column-header__button.active {
|
||
|
|
+ color: $ui-highlight-color;
|
||
|
|
+
|
||
|
|
+ &:hover,
|
||
|
|
+ &:active,
|
||
|
|
+ &:focus {
|
||
|
|
+ color: $ui-highlight-color;
|
||
|
|
+ background: $white;
|
||
|
|
+ }
|
||
|
|
+}
|
||
|
|
+
|
||
|
|
+.account__header__bar .avatar .account__avatar {
|
||
|
|
+ border-color: $white;
|
||
|
|
+}
|
||
|
|
+
|
||
|
|
+.getting-started__footer a {
|
||
|
|
+ color: $ui-secondary-color;
|
||
|
|
+ text-decoration: underline;
|
||
|
|
+}
|
||
|
|
+
|
||
|
|
+.confirmation-modal__secondary-button,
|
||
|
|
+.confirmation-modal__cancel-button,
|
||
|
|
+.mute-modal__cancel-button,
|
||
|
|
+.block-modal__cancel-button {
|
||
|
|
+ color: lighten($ui-base-color, 26%);
|
||
|
|
+
|
||
|
|
+ &:hover,
|
||
|
|
+ &:focus,
|
||
|
|
+ &:active {
|
||
|
|
+ color: $primary-text-color;
|
||
|
|
+ }
|
||
|
|
+}
|
||
|
|
+
|
||
|
|
+.column-subheading {
|
||
|
|
+ background: darken($ui-base-color, 4%);
|
||
|
|
+ border-bottom: 1px solid lighten($ui-base-color, 8%);
|
||
|
|
+}
|
||
|
|
+
|
||
|
|
+.getting-started,
|
||
|
|
+.scrollable {
|
||
|
|
+ .column-link {
|
||
|
|
+ background: $white;
|
||
|
|
+ border-bottom: 1px solid lighten($ui-base-color, 8%);
|
||
|
|
+
|
||
|
|
+ &:hover,
|
||
|
|
+ &:active,
|
||
|
|
+ &:focus {
|
||
|
|
+ background: $ui-base-color;
|
||
|
|
+ }
|
||
|
|
+ }
|
||
|
|
+}
|
||
|
|
+
|
||
|
|
+.getting-started .navigation-bar {
|
||
|
|
+ border-top: 1px solid lighten($ui-base-color, 8%);
|
||
|
|
+ border-bottom: 1px solid lighten($ui-base-color, 8%);
|
||
|
|
+
|
||
|
|
+ @media screen and (max-width: $no-gap-breakpoint) {
|
||
|
|
+ border-top: 0;
|
||
|
|
+ }
|
||
|
|
+}
|
||
|
|
+
|
||
|
|
+.compose-form__autosuggest-wrapper,
|
||
|
|
+.poll__option input[type="text"],
|
||
|
|
+.compose-form .spoiler-input__input,
|
||
|
|
+.compose-form__poll-wrapper select,
|
||
|
|
+.search__input,
|
||
|
|
+.setting-text,
|
||
|
|
+.box-widget input[type="text"],
|
||
|
|
+.box-widget input[type="email"],
|
||
|
|
+.box-widget input[type="password"],
|
||
|
|
+.box-widget textarea,
|
||
|
|
+.statuses-grid .detailed-status,
|
||
|
|
+.audio-player {
|
||
|
|
+ border: 1px solid lighten($ui-base-color, 8%);
|
||
|
|
+}
|
||
|
|
+
|
||
|
|
+.search__input {
|
||
|
|
+ @media screen and (max-width: $no-gap-breakpoint) {
|
||
|
|
+ border-top: 0;
|
||
|
|
+ border-bottom: 0;
|
||
|
|
+ }
|
||
|
|
+}
|
||
|
|
+
|
||
|
|
+.list-editor .search .search__input {
|
||
|
|
+ border-top: 0;
|
||
|
|
+ border-bottom: 0;
|
||
|
|
+}
|
||
|
|
+
|
||
|
|
+.compose-form__poll-wrapper select {
|
||
|
|
+ background: $simple-background-color url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14.933 18.467' height='19.698' width='15.929'><path d='M3.467 14.967l-3.393-3.5H14.86l-3.392 3.5c-1.866 1.925-3.666 3.5-4 3.5-.335 0-2.135-1.575-4-3.5zm.266-11.234L7.467 0 11.2 3.733l3.733 3.734H0l3.733-3.734z' fill='#{hex-color(lighten($ui-base-color, 8%))}'/></svg>") no-repeat right 8px center / auto 16px;
|
||
|
|
+}
|
||
|
|
+
|
||
|
|
+.compose-form__poll-wrapper,
|
||
|
|
+.compose-form__poll-wrapper .poll__footer {
|
||
|
|
+ border-top-color: lighten($ui-base-color, 8%);
|
||
|
|
+}
|
||
|
|
+
|
||
|
|
+.notification__filter-bar {
|
||
|
|
+ border: 1px solid lighten($ui-base-color, 8%);
|
||
|
|
+ border-top: 0;
|
||
|
|
+}
|
||
|
|
+
|
||
|
|
+.compose-form .compose-form__buttons-wrapper {
|
||
|
|
+ background: $ui-base-color;
|
||
|
|
+ border: 1px solid lighten($ui-base-color, 8%);
|
||
|
|
+ border-top: 0;
|
||
|
|
+}
|
||
|
|
+
|
||
|
|
+.drawer__header,
|
||
|
|
+.drawer__inner {
|
||
|
|
+ background: $white;
|
||
|
|
+ border: 1px solid lighten($ui-base-color, 8%);
|
||
|
|
+}
|
||
|
|
+
|
||
|
|
+.drawer__inner__mastodon {
|
||
|
|
+ background: $white url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 234.80078 31.757813" width="234.80078" height="31.757812"><path d="M19.599609 0c-1.05 0-2.10039.375-2.90039 1.125L0 16.925781v14.832031h234.80078V17.025391l-16.5-15.900391c-1.6-1.5-4.20078-1.5-5.80078 0l-13.80078 13.099609c-1.6 1.5-4.19883 1.5-5.79883 0L179.09961 1.125c-1.6-1.5-4.19883-1.5-5.79883 0L159.5 14.224609c-1.6 1.5-4.20078 1.5-5.80078 0L139.90039 1.125c-1.6-1.5-4.20078-1.5-5.80078 0l-13.79883 13.099609c-1.6 1.5-4.20078 1.5-5.80078 0L100.69922 1.125c-1.600001-1.5-4.198829-1.5-5.798829 0l-13.59961 13.099609c-1.6 1.5-4.200781 1.5-5.800781 0L61.699219 1.125c-1.6-1.5-4.198828-1.5-5.798828 0L42.099609 14.224609c-1.6 1.5-4.198828 1.5-5.798828 0L22.5 1.125C21.7.375 20.649609 0 19.599609 0z" fill="#{hex-color($ui-base-color)}"/></svg>') no-repeat bottom / 100% auto;
|
||
|
|
+}
|
||
|
|
+
|
||
|
|
+// Change the colors used in compose-form
|
||
|
|
+.compose-form {
|
||
|
|
+ .compose-form__modifiers {
|
||
|
|
+ .compose-form__upload__actions .icon-button {
|
||
|
|
+ color: lighten($white, 7%);
|
||
|
|
+
|
||
|
|
+ &:active,
|
||
|
|
+ &:focus,
|
||
|
|
+ &:hover {
|
||
|
|
+ color: $white;
|
||
|
|
+ }
|
||
|
|
+ }
|
||
|
|
+
|
||
|
|
+ .compose-form__upload-description input {
|
||
|
|
+ color: lighten($white, 7%);
|
||
|
|
+
|
||
|
|
+ &::placeholder {
|
||
|
|
+ color: lighten($white, 7%);
|
||
|
|
+ }
|
||
|
|
+ }
|
||
|
|
+ }
|
||
|
|
+
|
||
|
|
+ .compose-form__buttons-wrapper {
|
||
|
|
+ background: darken($ui-base-color, 6%);
|
||
|
|
+ }
|
||
|
|
+
|
||
|
|
+ .autosuggest-textarea__suggestions {
|
||
|
|
+ background: darken($ui-base-color, 6%);
|
||
|
|
+ }
|
||
|
|
+
|
||
|
|
+ .autosuggest-textarea__suggestions__item {
|
||
|
|
+ &:hover,
|
||
|
|
+ &:focus,
|
||
|
|
+ &:active,
|
||
|
|
+ &.selected {
|
||
|
|
+ background: lighten($ui-base-color, 4%);
|
||
|
|
+ }
|
||
|
|
+ }
|
||
|
|
+}
|
||
|
|
+
|
||
|
|
+.emoji-mart-bar {
|
||
|
|
+ border-color: lighten($ui-base-color, 4%);
|
||
|
|
+
|
||
|
|
+ &:first-child {
|
||
|
|
+ background: darken($ui-base-color, 6%);
|
||
|
|
+ }
|
||
|
|
+}
|
||
|
|
+
|
||
|
|
+.emoji-mart-search input {
|
||
|
|
+ background: rgba($ui-base-color, 0.3);
|
||
|
|
+ border-color: $ui-base-color;
|
||
|
|
+}
|
||
|
|
+
|
||
|
|
+// Change the background colors of statuses
|
||
|
|
+.focusable:focus {
|
||
|
|
+ background: $ui-base-color;
|
||
|
|
+}
|
||
|
|
+
|
||
|
|
+.status.status-direct {
|
||
|
|
+ background: lighten($ui-base-color, 4%);
|
||
|
|
+}
|
||
|
|
+
|
||
|
|
+.focusable:focus .status.status-direct {
|
||
|
|
+ background: lighten($ui-base-color, 8%);
|
||
|
|
+}
|
||
|
|
+
|
||
|
|
+.detailed-status,
|
||
|
|
+.detailed-status__action-bar {
|
||
|
|
+ background: $white;
|
||
|
|
+}
|
||
|
|
+
|
||
|
|
+// Change the background colors of status__content__spoiler-link
|
||
|
|
+.reply-indicator__content .status__content__spoiler-link,
|
||
|
|
+.status__content .status__content__spoiler-link {
|
||
|
|
+ background: $ui-base-color;
|
||
|
|
+
|
||
|
|
+ &:hover {
|
||
|
|
+ background: lighten($ui-base-color, 4%);
|
||
|
|
+ }
|
||
|
|
+}
|
||
|
|
+
|
||
|
|
+// Change the background colors of media and video spoilers
|
||
|
|
+.media-spoiler,
|
||
|
|
+.video-player__spoiler {
|
||
|
|
+ background: $ui-base-color;
|
||
|
|
+}
|
||
|
|
+
|
||
|
|
+.privacy-dropdown.active .privacy-dropdown__value.active .icon-button {
|
||
|
|
+ color: $white;
|
||
|
|
+}
|
||
|
|
+
|
||
|
|
+.account-gallery__item a {
|
||
|
|
+ background-color: $ui-base-color;
|
||
|
|
+}
|
||
|
|
+
|
||
|
|
+// Change the colors used in the dropdown menu
|
||
|
|
+.dropdown-menu {
|
||
|
|
+ background: $white;
|
||
|
|
+
|
||
|
|
+ &__arrow {
|
||
|
|
+ &.left {
|
||
|
|
+ border-left-color: $white;
|
||
|
|
+ }
|
||
|
|
+
|
||
|
|
+ &.top {
|
||
|
|
+ border-top-color: $white;
|
||
|
|
+ }
|
||
|
|
+
|
||
|
|
+ &.bottom {
|
||
|
|
+ border-bottom-color: $white;
|
||
|
|
+ }
|
||
|
|
+
|
||
|
|
+ &.right {
|
||
|
|
+ border-right-color: $white;
|
||
|
|
+ }
|
||
|
|
+ }
|
||
|
|
+
|
||
|
|
+ &__item {
|
||
|
|
+ a {
|
||
|
|
+ background: $white;
|
||
|
|
+ color: $darker-text-color;
|
||
|
|
+ }
|
||
|
|
+ }
|
||
|
|
+}
|
||
|
|
+
|
||
|
|
+// Change the text colors on inverted background
|
||
|
|
+.privacy-dropdown__option.active,
|
||
|
|
+.privacy-dropdown__option:hover,
|
||
|
|
+.privacy-dropdown__option.active .privacy-dropdown__option__content,
|
||
|
|
+.privacy-dropdown__option.active .privacy-dropdown__option__content strong,
|
||
|
|
+.privacy-dropdown__option:hover .privacy-dropdown__option__content,
|
||
|
|
+.privacy-dropdown__option:hover .privacy-dropdown__option__content strong,
|
||
|
|
+.dropdown-menu__item a:active,
|
||
|
|
+.dropdown-menu__item a:focus,
|
||
|
|
+.dropdown-menu__item a:hover,
|
||
|
|
+.actions-modal ul li:not(:empty) a.active,
|
||
|
|
+.actions-modal ul li:not(:empty) a.active button,
|
||
|
|
+.actions-modal ul li:not(:empty) a:active,
|
||
|
|
+.actions-modal ul li:not(:empty) a:active button,
|
||
|
|
+.actions-modal ul li:not(:empty) a:focus,
|
||
|
|
+.actions-modal ul li:not(:empty) a:focus button,
|
||
|
|
+.actions-modal ul li:not(:empty) a:hover,
|
||
|
|
+.actions-modal ul li:not(:empty) a:hover button,
|
||
|
|
+.admin-wrapper .sidebar ul .simple-navigation-active-leaf a,
|
||
|
|
+.simple_form .block-button,
|
||
|
|
+.simple_form .button,
|
||
|
|
+.simple_form button {
|
||
|
|
+ color: $white;
|
||
|
|
+}
|
||
|
|
+
|
||
|
|
+.dropdown-menu__separator {
|
||
|
|
+ border-bottom-color: lighten($ui-base-color, 4%);
|
||
|
|
+}
|
||
|
|
+
|
||
|
|
+// Change the background colors of modals
|
||
|
|
+.actions-modal,
|
||
|
|
+.boost-modal,
|
||
|
|
+.confirmation-modal,
|
||
|
|
+.mute-modal,
|
||
|
|
+.block-modal,
|
||
|
|
+.report-modal,
|
||
|
|
+.embed-modal,
|
||
|
|
+.error-modal,
|
||
|
|
+.onboarding-modal,
|
||
|
|
+.report-modal__comment .setting-text__wrapper,
|
||
|
|
+.report-modal__comment .setting-text {
|
||
|
|
+ background: $white;
|
||
|
|
+ border: 1px solid lighten($ui-base-color, 8%);
|
||
|
|
+}
|
||
|
|
+
|
||
|
|
+.report-modal__comment {
|
||
|
|
+ border-right-color: lighten($ui-base-color, 8%);
|
||
|
|
+}
|
||
|
|
+
|
||
|
|
+.report-modal__container {
|
||
|
|
+ border-top-color: lighten($ui-base-color, 8%);
|
||
|
|
+}
|
||
|
|
+
|
||
|
|
+.column-header__collapsible-inner {
|
||
|
|
+ background: darken($ui-base-color, 4%);
|
||
|
|
+ border: 1px solid lighten($ui-base-color, 8%);
|
||
|
|
+ border-top: 0;
|
||
|
|
+}
|
||
|
|
+
|
||
|
|
+.focal-point__preview strong {
|
||
|
|
+ color: $white;
|
||
|
|
+}
|
||
|
|
+
|
||
|
|
+.boost-modal__action-bar,
|
||
|
|
+.confirmation-modal__action-bar,
|
||
|
|
+.mute-modal__action-bar,
|
||
|
|
+.block-modal__action-bar,
|
||
|
|
+.onboarding-modal__paginator,
|
||
|
|
+.error-modal__footer {
|
||
|
|
+ background: darken($ui-base-color, 6%);
|
||
|
|
+
|
||
|
|
+ .onboarding-modal__nav,
|
||
|
|
+ .error-modal__nav {
|
||
|
|
+ &:hover,
|
||
|
|
+ &:focus,
|
||
|
|
+ &:active {
|
||
|
|
+ background-color: darken($ui-base-color, 12%);
|
||
|
|
+ }
|
||
|
|
+ }
|
||
|
|
+}
|
||
|
|
+
|
||
|
|
+.display-case__case {
|
||
|
|
+ background: $white;
|
||
|
|
+}
|
||
|
|
+
|
||
|
|
+.embed-modal .embed-modal__container .embed-modal__html {
|
||
|
|
+ background: $white;
|
||
|
|
+ border: 1px solid lighten($ui-base-color, 8%);
|
||
|
|
+
|
||
|
|
+ &:focus {
|
||
|
|
+ border-color: lighten($ui-base-color, 12%);
|
||
|
|
+ background: $white;
|
||
|
|
+ }
|
||
|
|
+}
|
||
|
|
+
|
||
|
|
+.react-toggle-track {
|
||
|
|
+ background: $ui-secondary-color;
|
||
|
|
+}
|
||
|
|
+
|
||
|
|
+.react-toggle:hover:not(.react-toggle--disabled) .react-toggle-track {
|
||
|
|
+ background: darken($ui-secondary-color, 10%);
|
||
|
|
+}
|
||
|
|
+
|
||
|
|
+.react-toggle.react-toggle--checked:hover:not(.react-toggle--disabled) .react-toggle-track {
|
||
|
|
+ background: lighten($ui-highlight-color, 10%);
|
||
|
|
+}
|
||
|
|
+
|
||
|
|
+// Change the default color used for the text in an empty column or on the error column
|
||
|
|
+.empty-column-indicator,
|
||
|
|
+.error-column {
|
||
|
|
+ color: $primary-text-color;
|
||
|
|
+ background: $white;
|
||
|
|
+}
|
||
|
|
+
|
||
|
|
+.tabs-bar {
|
||
|
|
+ background: $white;
|
||
|
|
+ border: 1px solid lighten($ui-base-color, 8%);
|
||
|
|
+ border-bottom: 0;
|
||
|
|
+
|
||
|
|
+ @media screen and (max-width: $no-gap-breakpoint) {
|
||
|
|
+ border-top: 0;
|
||
|
|
+ }
|
||
|
|
+
|
||
|
|
+ &__link {
|
||
|
|
+ padding-bottom: 14px;
|
||
|
|
+ border-bottom-width: 1px;
|
||
|
|
+ border-bottom-color: lighten($ui-base-color, 8%);
|
||
|
|
+
|
||
|
|
+ &:hover,
|
||
|
|
+ &:active,
|
||
|
|
+ &:focus {
|
||
|
|
+ background: $ui-base-color;
|
||
|
|
+ }
|
||
|
|
+
|
||
|
|
+ &.active {
|
||
|
|
+ &:hover,
|
||
|
|
+ &:active,
|
||
|
|
+ &:focus {
|
||
|
|
+ background: transparent;
|
||
|
|
+ border-bottom-color: $ui-highlight-color;
|
||
|
|
+ }
|
||
|
|
+ }
|
||
|
|
+ }
|
||
|
|
+}
|
||
|
|
+
|
||
|
|
+// Change the default colors used on some parts of the profile pages
|
||
|
|
+.activity-stream-tabs {
|
||
|
|
+ background: $account-background-color;
|
||
|
|
+ border-bottom-color: lighten($ui-base-color, 8%);
|
||
|
|
+}
|
||
|
|
+
|
||
|
|
+.box-widget,
|
||
|
|
+.nothing-here,
|
||
|
|
+.page-header,
|
||
|
|
+.directory__tag > a,
|
||
|
|
+.directory__tag > div,
|
||
|
|
+.landing-page__call-to-action,
|
||
|
|
+.contact-widget,
|
||
|
|
+.landing .hero-widget__text,
|
||
|
|
+.landing-page__information.contact-widget {
|
||
|
|
+ background: $white;
|
||
|
|
+ border: 1px solid lighten($ui-base-color, 8%);
|
||
|
|
+
|
||
|
|
+ @media screen and (max-width: $no-gap-breakpoint) {
|
||
|
|
+ border-left: 0;
|
||
|
|
+ border-right: 0;
|
||
|
|
+ border-top: 0;
|
||
|
|
+ }
|
||
|
|
+}
|
||
|
|
+
|
||
|
|
+.landing .hero-widget__text {
|
||
|
|
+ border-top: 0;
|
||
|
|
+ border-bottom: 0;
|
||
|
|
+}
|
||
|
|
+
|
||
|
|
+.simple_form {
|
||
|
|
+ input[type=text],
|
||
|
|
+ input[type=number],
|
||
|
|
+ input[type=email],
|
||
|
|
+ input[type=password],
|
||
|
|
+ textarea {
|
||
|
|
+ &:hover {
|
||
|
|
+ border-color: lighten($ui-base-color, 12%);
|
||
|
|
+ }
|
||
|
|
+ }
|
||
|
|
+}
|
||
|
|
+
|
||
|
|
+.landing .hero-widget__footer {
|
||
|
|
+ background: $white;
|
||
|
|
+ border: 1px solid lighten($ui-base-color, 8%);
|
||
|
|
+ border-top: 0;
|
||
|
|
+
|
||
|
|
+ @media screen and (max-width: $no-gap-breakpoint) {
|
||
|
|
+ border: 0;
|
||
|
|
+ }
|
||
|
|
+}
|
||
|
|
+
|
||
|
|
+.brand__tagline {
|
||
|
|
+ color: $ui-secondary-color;
|
||
|
|
+}
|
||
|
|
+
|
||
|
|
+.directory__tag > a {
|
||
|
|
+ &:hover,
|
||
|
|
+ &:active,
|
||
|
|
+ &:focus {
|
||
|
|
+ background: $ui-base-color;
|
||
|
|
+ }
|
||
|
|
+
|
||
|
|
+ @media screen and (max-width: $no-gap-breakpoint) {
|
||
|
|
+ border: 0;
|
||
|
|
+ }
|
||
|
|
+}
|
||
|
|
+
|
||
|
|
+.directory__tag.active > a,
|
||
|
|
+.directory__tag.active > div {
|
||
|
|
+ border-color: $ui-highlight-color;
|
||
|
|
+
|
||
|
|
+ &,
|
||
|
|
+ h4,
|
||
|
|
+ h4 small,
|
||
|
|
+ .fa,
|
||
|
|
+ .trends__item__current {
|
||
|
|
+ color: $white;
|
||
|
|
+ }
|
||
|
|
+
|
||
|
|
+ &:hover,
|
||
|
|
+ &:active,
|
||
|
|
+ &:focus {
|
||
|
|
+ background: $ui-highlight-color;
|
||
|
|
+ }
|
||
|
|
+}
|
||
|
|
+
|
||
|
|
+.batch-table {
|
||
|
|
+ &__toolbar,
|
||
|
|
+ &__row,
|
||
|
|
+ .nothing-here {
|
||
|
|
+ border-color: lighten($ui-base-color, 8%);
|
||
|
|
+ }
|
||
|
|
+}
|
||
|
|
+
|
||
|
|
+.activity-stream {
|
||
|
|
+ border: 1px solid lighten($ui-base-color, 8%);
|
||
|
|
+
|
||
|
|
+ &--under-tabs {
|
||
|
|
+ border-top: 0;
|
||
|
|
+ }
|
||
|
|
+
|
||
|
|
+ .entry {
|
||
|
|
+ background: $account-background-color;
|
||
|
|
+
|
||
|
|
+ .detailed-status.light,
|
||
|
|
+ .more.light,
|
||
|
|
+ .status.light {
|
||
|
|
+ border-bottom-color: lighten($ui-base-color, 8%);
|
||
|
|
+ }
|
||
|
|
+ }
|
||
|
|
+
|
||
|
|
+ .status.light {
|
||
|
|
+ .status__content {
|
||
|
|
+ color: $primary-text-color;
|
||
|
|
+ }
|
||
|
|
+
|
||
|
|
+ .display-name {
|
||
|
|
+ strong {
|
||
|
|
+ color: $primary-text-color;
|
||
|
|
+ }
|
||
|
|
+ }
|
||
|
|
+ }
|
||
|
|
+}
|
||
|
|
+
|
||
|
|
+.accounts-grid {
|
||
|
|
+ .account-grid-card {
|
||
|
|
+ .controls {
|
||
|
|
+ .icon-button {
|
||
|
|
+ color: $darker-text-color;
|
||
|
|
+ }
|
||
|
|
+ }
|
||
|
|
+
|
||
|
|
+ .name {
|
||
|
|
+ a {
|
||
|
|
+ color: $primary-text-color;
|
||
|
|
+ }
|
||
|
|
+ }
|
||
|
|
+
|
||
|
|
+ .username {
|
||
|
|
+ color: $darker-text-color;
|
||
|
|
+ }
|
||
|
|
+
|
||
|
|
+ .account__header__content {
|
||
|
|
+ color: $primary-text-color;
|
||
|
|
+ }
|
||
|
|
+ }
|
||
|
|
+}
|
||
|
|
+
|
||
|
|
+.simple_form,
|
||
|
|
+.table-form {
|
||
|
|
+ .warning {
|
||
|
|
+ box-shadow: none;
|
||
|
|
+ background: rgba($error-red, 0.5);
|
||
|
|
+ text-shadow: none;
|
||
|
|
+ }
|
||
|
|
+
|
||
|
|
+ .recommended {
|
||
|
|
+ border-color: $ui-highlight-color;
|
||
|
|
+ color: $ui-highlight-color;
|
||
|
|
+ background-color: rgba($ui-highlight-color, 0.1);
|
||
|
|
+ }
|
||
|
|
+}
|
||
|
|
+
|
||
|
|
+.compose-form .compose-form__warning {
|
||
|
|
+ border-color: $ui-highlight-color;
|
||
|
|
+ background-color: rgba($ui-highlight-color, 0.1);
|
||
|
|
+
|
||
|
|
+ &,
|
||
|
|
+ a {
|
||
|
|
+ color: $ui-highlight-color;
|
||
|
|
+ }
|
||
|
|
+}
|
||
|
|
+
|
||
|
|
+.status__content,
|
||
|
|
+.reply-indicator__content {
|
||
|
|
+ a {
|
||
|
|
+ color: $highlight-text-color;
|
||
|
|
+ }
|
||
|
|
+}
|
||
|
|
+
|
||
|
|
+.button.logo-button {
|
||
|
|
+ color: $white;
|
||
|
|
+
|
||
|
|
+ svg {
|
||
|
|
+ fill: $white;
|
||
|
|
+ }
|
||
|
|
+}
|
||
|
|
+
|
||
|
|
+.public-layout {
|
||
|
|
+ .account__section-headline {
|
||
|
|
+ border: 1px solid lighten($ui-base-color, 8%);
|
||
|
|
+
|
||
|
|
+ @media screen and (max-width: $no-gap-breakpoint) {
|
||
|
|
+ border-top: 0;
|
||
|
|
+ }
|
||
|
|
+ }
|
||
|
|
+
|
||
|
|
+ .header,
|
||
|
|
+ .public-account-header,
|
||
|
|
+ .public-account-bio {
|
||
|
|
+ box-shadow: none;
|
||
|
|
+ }
|
||
|
|
+
|
||
|
|
+ .public-account-bio,
|
||
|
|
+ .hero-widget__text {
|
||
|
|
+ background: $account-background-color;
|
||
|
|
+ border: 1px solid lighten($ui-base-color, 8%);
|
||
|
|
+ }
|
||
|
|
+
|
||
|
|
+ .header {
|
||
|
|
+ background: $ui-base-color;
|
||
|
|
+ border: 1px solid lighten($ui-base-color, 8%);
|
||
|
|
+
|
||
|
|
+ @media screen and (max-width: $no-gap-breakpoint) {
|
||
|
|
+ border: 0;
|
||
|
|
+ }
|
||
|
|
+
|
||
|
|
+ .brand {
|
||
|
|
+ &:hover,
|
||
|
|
+ &:focus,
|
||
|
|
+ &:active {
|
||
|
|
+ background: lighten($ui-base-color, 4%);
|
||
|
|
+ }
|
||
|
|
+ }
|
||
|
|
+ }
|
||
|
|
+
|
||
|
|
+ .public-account-header {
|
||
|
|
+ &__image {
|
||
|
|
+ background: lighten($ui-base-color, 12%);
|
||
|
|
+
|
||
|
|
+ &::after {
|
||
|
|
+ box-shadow: none;
|
||
|
|
+ }
|
||
|
|
+ }
|
||
|
|
+
|
||
|
|
+ &__bar {
|
||
|
|
+ &::before {
|
||
|
|
+ background: $account-background-color;
|
||
|
|
+ border: 1px solid lighten($ui-base-color, 8%);
|
||
|
|
+ border-top: 0;
|
||
|
|
+ }
|
||
|
|
+
|
||
|
|
+ .avatar img {
|
||
|
|
+ border-color: $account-background-color;
|
||
|
|
+ }
|
||
|
|
+
|
||
|
|
+ @media screen and (max-width: $no-columns-breakpoint) {
|
||
|
|
+ background: $account-background-color;
|
||
|
|
+ border: 1px solid lighten($ui-base-color, 8%);
|
||
|
|
+ border-top: 0;
|
||
|
|
+ }
|
||
|
|
+ }
|
||
|
|
+
|
||
|
|
+ &__tabs {
|
||
|
|
+ &__name {
|
||
|
|
+ h1,
|
||
|
|
+ h1 small {
|
||
|
|
+ color: $white;
|
||
|
|
+
|
||
|
|
+ @media screen and (max-width: $no-columns-breakpoint) {
|
||
|
|
+ color: $primary-text-color;
|
||
|
|
+ }
|
||
|
|
+ }
|
||
|
|
+ }
|
||
|
|
+ }
|
||
|
|
+
|
||
|
|
+ &__extra {
|
||
|
|
+ .public-account-bio {
|
||
|
|
+ border: 0;
|
||
|
|
+ }
|
||
|
|
+
|
||
|
|
+ .public-account-bio .account__header__fields {
|
||
|
|
+ border-color: lighten($ui-base-color, 8%);
|
||
|
|
+ }
|
||
|
|
+ }
|
||
|
|
+ }
|
||
|
|
+}
|
||
|
|
+
|
||
|
|
+.notification__filter-bar button.active::after,
|
||
|
|
+.account__section-headline a.active::after {
|
||
|
|
+ border-color: transparent transparent $white;
|
||
|
|
+}
|
||
|
|
+
|
||
|
|
+.hero-widget,
|
||
|
|
+.box-widget,
|
||
|
|
+.contact-widget,
|
||
|
|
+.landing-page__information.contact-widget,
|
||
|
|
+.moved-account-widget,
|
||
|
|
+.memoriam-widget,
|
||
|
|
+.activity-stream,
|
||
|
|
+.nothing-here,
|
||
|
|
+.directory__tag > a,
|
||
|
|
+.directory__tag > div,
|
||
|
|
+.card > a,
|
||
|
|
+.page-header,
|
||
|
|
+.compose-form .compose-form__warning {
|
||
|
|
+ box-shadow: none;
|
||
|
|
+}
|
||
|
|
+
|
||
|
|
+.audio-player .video-player__controls button,
|
||
|
|
+.audio-player .video-player__time-sep,
|
||
|
|
+.audio-player .video-player__time-current,
|
||
|
|
+.audio-player .video-player__time-total {
|
||
|
|
+ color: $primary-text-color;
|
||
|
|
+}
|
||
|
|
diff --git a/app/javascript/styles/light-red/variables.scss b/app/javascript/styles/light-red/variables.scss
|
||
|
|
new file mode 100644
|
||
|
|
index 000000000..3bbef4ae0
|
||
|
|
--- /dev/null
|
||
|
|
+++ b/app/javascript/styles/light-red/variables.scss
|
||
|
|
@@ -0,0 +1,41 @@
|
||
|
|
+// Dependent colors
|
||
|
|
+$black: #000000;
|
||
|
|
+$white: #ffffff;
|
||
|
|
+
|
||
|
|
+$classic-base-color: #282c37;
|
||
|
|
+$classic-primary-color: #9baec8;
|
||
|
|
+$classic-secondary-color: #d9e1e8;
|
||
|
|
+$classic-highlight-color: #d92b2b;
|
||
|
|
+
|
||
|
|
+// Differences
|
||
|
|
+$success-green: lighten(#3c754d, 8%);
|
||
|
|
+
|
||
|
|
+$base-overlay-background: $white !default;
|
||
|
|
+$valid-value-color: $success-green !default;
|
||
|
|
+
|
||
|
|
+$ui-base-color: $classic-secondary-color !default;
|
||
|
|
+$ui-base-lighter-color: #b0c0cf;
|
||
|
|
+$ui-primary-color: #9bcbed;
|
||
|
|
+$ui-secondary-color: $classic-base-color !default;
|
||
|
|
+$ui-highlight-color: #d92b2b;
|
||
|
|
+
|
||
|
|
+$primary-text-color: $black !default;
|
||
|
|
+$darker-text-color: $classic-base-color !default;
|
||
|
|
+$dark-text-color: #444b5d;
|
||
|
|
+$action-button-color: #606984;
|
||
|
|
+
|
||
|
|
+$inverted-text-color: $black !default;
|
||
|
|
+$lighter-text-color: $classic-base-color !default;
|
||
|
|
+$light-text-color: #444b5d;
|
||
|
|
+
|
||
|
|
+//Newly added colors
|
||
|
|
+$account-background-color: $white !default;
|
||
|
|
+
|
||
|
|
+//Invert darkened and lightened colors
|
||
|
|
+@function darken($color, $amount) {
|
||
|
|
+ @return hsl(hue($color), saturation($color), lightness($color) + $amount);
|
||
|
|
+}
|
||
|
|
+
|
||
|
|
+@function lighten($color, $amount) {
|
||
|
|
+ @return hsl(hue($color), saturation($color), lightness($color) - $amount);
|
||
|
|
+}
|
||
|
|
diff --git a/app/javascript/styles/mods/deprecated/display_bettersearch.css b/app/javascript/styles/mods/deprecated/display_bettersearch.css
|
||
|
|
new file mode 100644
|
||
|
|
index 000000000..c9bf8850f
|
||
|
|
--- /dev/null
|
||
|
|
+++ b/app/javascript/styles/mods/deprecated/display_bettersearch.css
|
||
|
|
@@ -0,0 +1,10 @@
|
||
|
|
+/*
|
||
|
|
+Make search results look better:
|
||
|
|
+- adds contrast to search icon
|
||
|
|
+- overlay-style shadowed background
|
||
|
|
+
|
||
|
|
+author: trwnh
|
||
|
|
+license: Public Domain
|
||
|
|
+*/
|
||
|
|
+.search__icon .fa.active {opacity: 1}
|
||
|
|
+.drawer__inner.darker {background: rgba(0,0,0,0.5)}
|
||
|
|
diff --git a/app/javascript/styles/mods/display_breakname.css b/app/javascript/styles/mods/display_breakname.css
|
||
|
|
new file mode 100644
|
||
|
|
index 000000000..fc3936e23
|
||
|
|
--- /dev/null
|
||
|
|
+++ b/app/javascript/styles/mods/display_breakname.css
|
||
|
|
@@ -0,0 +1,9 @@
|
||
|
|
+/*
|
||
|
|
+Add a line break between display name and account handle:
|
||
|
|
+- this allows user/display names to expand more by default.
|
||
|
|
+- it also makes names look better in general.
|
||
|
|
+
|
||
|
|
+author: trwnh
|
||
|
|
+license: Public Domain
|
||
|
|
+*/
|
||
|
|
+.display-name__html {display: block;}
|
||
|
|
\ No newline at end of file
|
||
|
|
diff --git a/app/javascript/styles/mods/display_browserfont.css b/app/javascript/styles/mods/display_browserfont.css
|
||
|
|
new file mode 100644
|
||
|
|
index 000000000..6389f20b4
|
||
|
|
--- /dev/null
|
||
|
|
+++ b/app/javascript/styles/mods/display_browserfont.css
|
||
|
|
@@ -0,0 +1,20 @@
|
||
|
|
+/*
|
||
|
|
+Use browser default font:
|
||
|
|
+- override mastodon-font-sans-serif with sans-serif
|
||
|
|
+- note: this is not the same as "use system default font"
|
||
|
|
+ in mastodon's preferences! that option uses a font that
|
||
|
|
+ would be *expected to load on that system*, and ignores
|
||
|
|
+ your browser's settings entirely. for example, if you
|
||
|
|
+ are running ms windows, you will see segoe ui, even if
|
||
|
|
+ your browser's default font is something else!
|
||
|
|
+
|
||
|
|
+author: trwnh
|
||
|
|
+license: Public Domain
|
||
|
|
+*/
|
||
|
|
+body,
|
||
|
|
+.landing-page #mastodon-timeline,
|
||
|
|
+.landing-page li,
|
||
|
|
+.landing-page p
|
||
|
|
+{
|
||
|
|
+ font-family: sans-serif
|
||
|
|
+}
|
||
|
|
\ No newline at end of file
|
||
|
|
diff --git a/app/javascript/styles/mods/display_circleavatar.css b/app/javascript/styles/mods/display_circleavatar.css
|
||
|
|
new file mode 100644
|
||
|
|
index 000000000..b7d5d4955
|
||
|
|
--- /dev/null
|
||
|
|
+++ b/app/javascript/styles/mods/display_circleavatar.css
|
||
|
|
@@ -0,0 +1,15 @@
|
||
|
|
+/*
|
||
|
|
+* Rounded avatars:
|
||
|
|
+* - adjust the border radius around all avatar elements.
|
||
|
|
+* - default override is 50% (i.e. turn squares into circles),
|
||
|
|
+* but you can set it to whatever you want.
|
||
|
|
+*
|
||
|
|
+* author: trwnh
|
||
|
|
+* license: Public Domain
|
||
|
|
+*/
|
||
|
|
+.card .avatar img,
|
||
|
|
+.activity-stream .status.light .status__avatar img,
|
||
|
|
+.account__avatar,
|
||
|
|
+ .account__avatar-overlay-base,
|
||
|
|
+ .account__avatar-overlay-overlay
|
||
|
|
+{border-radius: 50%}
|
||
|
|
diff --git a/app/javascript/styles/mods/display_collapsedinteractions.css b/app/javascript/styles/mods/display_collapsedinteractions.css
|
||
|
|
new file mode 100644
|
||
|
|
index 000000000..7cb1f7c6a
|
||
|
|
--- /dev/null
|
||
|
|
+++ b/app/javascript/styles/mods/display_collapsedinteractions.css
|
||
|
|
@@ -0,0 +1,37 @@
|
||
|
|
+/*
|
||
|
|
+Collapse fave/boost/poll notifications
|
||
|
|
+- limits display to just a few lines (~3), so you can at least identify it
|
||
|
|
+- hides the display name on fave/boost, because you already know you posted it
|
||
|
|
+- tighter margins, remove space between CW and content
|
||
|
|
+- hides the buttons, but you can expand a status to interact with it
|
||
|
|
+
|
||
|
|
+author: trwnh
|
||
|
|
+license: Public Domain
|
||
|
|
+*/
|
||
|
|
+
|
||
|
|
+.notification-favourite .status,
|
||
|
|
+.notification-reblog .status,
|
||
|
|
+.notification-poll .status{
|
||
|
|
+ max-height: 4em;
|
||
|
|
+ overflow: hidden;
|
||
|
|
+}
|
||
|
|
+
|
||
|
|
+.notification-favourite .display-name,
|
||
|
|
+.notification-reblog .display-name {
|
||
|
|
+ display: none;
|
||
|
|
+}
|
||
|
|
+
|
||
|
|
+.notification-favourite .status__content,
|
||
|
|
+.notification-reblog .status__content {
|
||
|
|
+ margin-top: -4px;
|
||
|
|
+}
|
||
|
|
+
|
||
|
|
+.notification-favourite .status__content p,
|
||
|
|
+.notification-reblog .status__content p {
|
||
|
|
+ margin-bottom: 0px;
|
||
|
|
+}
|
||
|
|
+
|
||
|
|
+.notification-favourite .status__action-bar,
|
||
|
|
+.notification-reblog .status__action-bar {
|
||
|
|
+ display: none;
|
||
|
|
+}
|
||
|
|
diff --git a/app/javascript/styles/mods/display_emojizoom.css b/app/javascript/styles/mods/display_emojizoom.css
|
||
|
|
new file mode 100644
|
||
|
|
index 000000000..32ba536bb
|
||
|
|
--- /dev/null
|
||
|
|
+++ b/app/javascript/styles/mods/display_emojizoom.css
|
||
|
|
@@ -0,0 +1,23 @@
|
||
|
|
+ /*
|
||
|
|
+ Emoji hover zoom:
|
||
|
|
+ - makes emoji grow in size when moused over
|
||
|
|
+
|
||
|
|
+ author: noiob
|
||
|
|
+ license: CC0 - Public Domain
|
||
|
|
+ source: https://userstyles.org/styles/150165
|
||
|
|
+ */
|
||
|
|
+
|
||
|
|
+ .emojione:hover
|
||
|
|
+ {
|
||
|
|
+ width: 50px !important;
|
||
|
|
+ /* set the width and height of the expanded emojo here */
|
||
|
|
+ height: 50px !important;
|
||
|
|
+ transition: all 0.3s ease-in-out !important;
|
||
|
|
+ /* the 0.3s is the animation time for growing the emojo, it can be set to 0 */;
|
||
|
|
+ }
|
||
|
|
+
|
||
|
|
+ .emojione
|
||
|
|
+ {
|
||
|
|
+ transition: all 0.2s ease-in-out;
|
||
|
|
+ /* the 0.2s is the animation time for shrinking the emojo, it can be set to 0 */;
|
||
|
|
+ }
|
||
|
|
\ No newline at end of file
|
||
|
|
diff --git a/app/javascript/styles/mods/display_fadedinteractions.css b/app/javascript/styles/mods/display_fadedinteractions.css
|
||
|
|
new file mode 100644
|
||
|
|
index 000000000..8945d2699
|
||
|
|
--- /dev/null
|
||
|
|
+++ b/app/javascript/styles/mods/display_fadedinteractions.css
|
||
|
|
@@ -0,0 +1,9 @@
|
||
|
|
+/*
|
||
|
|
+Fade out faved/boosted toots in notifications:
|
||
|
|
+- for "x favourited your toot" / "x boosted your toot",
|
||
|
|
+ make the faved/boosted toot half-transparent.
|
||
|
|
+
|
||
|
|
+author: trwnh
|
||
|
|
+license: Public Domain
|
||
|
|
+*/
|
||
|
|
+.status.muted {opacity: 0.5}
|
||
|
|
\ No newline at end of file
|
||
|
|
diff --git a/app/javascript/styles/mods/display_fullmedia.css b/app/javascript/styles/mods/display_fullmedia.css
|
||
|
|
new file mode 100644
|
||
|
|
index 000000000..04cdbf574
|
||
|
|
--- /dev/null
|
||
|
|
+++ b/app/javascript/styles/mods/display_fullmedia.css
|
||
|
|
@@ -0,0 +1,31 @@
|
||
|
|
+/*
|
||
|
|
+Full-height media previews:
|
||
|
|
+- normal media previews are forced to be 16:9 for consistency
|
||
|
|
+- use this if you prefer to see the aspect ratio unchanged
|
||
|
|
+
|
||
|
|
+author: Kevin
|
||
|
|
+license: CC0 - Public Domain
|
||
|
|
+source: https://userstyles.org/styles/167207 [in part]
|
||
|
|
+*/
|
||
|
|
+
|
||
|
|
+.media-gallery {
|
||
|
|
+ max-height: 100% !important;
|
||
|
|
+ height: 100% !important;
|
||
|
|
+}
|
||
|
|
+
|
||
|
|
+.media-gallery__item-gifv-thumbnail, .media-gallery__item-gifv-thumbnail img {
|
||
|
|
+ transform: translateY(0%) !important;
|
||
|
|
+ max-height: 100% !important;
|
||
|
|
+}
|
||
|
|
+
|
||
|
|
+.media-gallery__item-thumbnail, .media-gallery__item-thumbnail img, .media-gallery__gifv {
|
||
|
|
+ max-height: 100% !important;
|
||
|
|
+}
|
||
|
|
+
|
||
|
|
+.media-gallery__item {
|
||
|
|
+ width: 100% !important;
|
||
|
|
+ height: 100% !important;
|
||
|
|
+ max-height: 100% !important;
|
||
|
|
+ inset: 0 !important;
|
||
|
|
+ margin-bottom: 4px;
|
||
|
|
+}
|
||
|
|
diff --git a/app/javascript/styles/mods/display_fullname.css b/app/javascript/styles/mods/display_fullname.css
|
||
|
|
new file mode 100644
|
||
|
|
index 000000000..1f2e541af
|
||
|
|
--- /dev/null
|
||
|
|
+++ b/app/javascript/styles/mods/display_fullname.css
|
||
|
|
@@ -0,0 +1,11 @@
|
||
|
|
+/*
|
||
|
|
+Always show full name and handle:
|
||
|
|
+- this removes the `...` and allows text to overflow past the column.
|
||
|
|
+- this can look worse, but it can also prevent having to mouse over
|
||
|
|
+ to see the full name or handle.
|
||
|
|
+- by default, it will also break long names onto a new line.
|
||
|
|
+
|
||
|
|
+author: trwnh
|
||
|
|
+license: Public Domain
|
||
|
|
+*/
|
||
|
|
+.display-name {overflow: visible; white-space: normal; word-wrap: break-word}
|
||
|
|
\ No newline at end of file
|
||
|
|
diff --git a/app/javascript/styles/mods/display_hidefollowcounts.css b/app/javascript/styles/mods/display_hidefollowcounts.css
|
||
|
|
new file mode 100644
|
||
|
|
index 000000000..e9ac9ed56
|
||
|
|
--- /dev/null
|
||
|
|
+++ b/app/javascript/styles/mods/display_hidefollowcounts.css
|
||
|
|
@@ -0,0 +1,10 @@
|
||
|
|
+/*
|
||
|
|
+Hide the following and follower counters on profiles.
|
||
|
|
+- full counts are still available by hovering over the text, though
|
||
|
|
+author: trwnh
|
||
|
|
+license: Public Domain
|
||
|
|
+*/
|
||
|
|
+.account__header__extra__links a:not(:first-child) strong
|
||
|
|
+{display: none}
|
||
|
|
+.details-counters .counter:not(:first-child) .counter-number
|
||
|
|
+{visibility: hidden}
|
||
|
|
diff --git a/app/javascript/styles/mods/display_hidereplycounts.css b/app/javascript/styles/mods/display_hidereplycounts.css
|
||
|
|
new file mode 100644
|
||
|
|
index 000000000..513251cde
|
||
|
|
--- /dev/null
|
||
|
|
+++ b/app/javascript/styles/mods/display_hidereplycounts.css
|
||
|
|
@@ -0,0 +1,7 @@
|
||
|
|
+/*
|
||
|
|
+Hide the 0/1/1+ counters of replies.
|
||
|
|
+
|
||
|
|
+author: trwnh
|
||
|
|
+license: Public Domain
|
||
|
|
+*/
|
||
|
|
+.status__action-bar__counter__label {display: none}
|
||
|
|
\ No newline at end of file
|
||
|
|
diff --git a/app/javascript/styles/mods/display_starstohearts.css b/app/javascript/styles/mods/display_starstohearts.css
|
||
|
|
new file mode 100644
|
||
|
|
index 000000000..53efb5576
|
||
|
|
--- /dev/null
|
||
|
|
+++ b/app/javascript/styles/mods/display_starstohearts.css
|
||
|
|
@@ -0,0 +1,16 @@
|
||
|
|
+/*
|
||
|
|
+Turn stars into hearts:
|
||
|
|
+- similar to twitter's change
|
||
|
|
+
|
||
|
|
+author: numimyon
|
||
|
|
+license: CC0 - Public Domain
|
||
|
|
+source: https://userstyles.org/styles/151233
|
||
|
|
+*/
|
||
|
|
+
|
||
|
|
+.notification__favourite-icon-wrapper .star-icon,
|
||
|
|
+.star-icon.active,
|
||
|
|
+.star-icon:hover,
|
||
|
|
+.star-icon:active
|
||
|
|
+{color: crimson !important;}
|
||
|
|
+
|
||
|
|
+.fa-star:before {content: "";}
|
||
|
|
diff --git a/app/javascript/styles/mods/display_transparentmedia.css b/app/javascript/styles/mods/display_transparentmedia.css
|
||
|
|
new file mode 100644
|
||
|
|
index 000000000..afa18a18a
|
||
|
|
--- /dev/null
|
||
|
|
+++ b/app/javascript/styles/mods/display_transparentmedia.css
|
||
|
|
@@ -0,0 +1,10 @@
|
||
|
|
+/*
|
||
|
|
+Remove the checker-board background from the media modal:
|
||
|
|
+- this makes transparent images actually transparent
|
||
|
|
+
|
||
|
|
+author: trwnh
|
||
|
|
+license: Public Domain
|
||
|
|
+*/
|
||
|
|
+.media-modal canvas,
|
||
|
|
+.media-modal img
|
||
|
|
+{background: none}
|
||
|
|
\ No newline at end of file
|
||
|
|
diff --git a/app/javascript/styles/mods/layout_1600px.css b/app/javascript/styles/mods/layout_1600px.css
|
||
|
|
new file mode 100644
|
||
|
|
index 000000000..f81af0046
|
||
|
|
--- /dev/null
|
||
|
|
+++ b/app/javascript/styles/mods/layout_1600px.css
|
||
|
|
@@ -0,0 +1,12 @@
|
||
|
|
+/*
|
||
|
|
+Allow for wider layout on bigger screens
|
||
|
|
+- vanilla max-width is 1200px
|
||
|
|
+- there is no penalty to slightly expanding flexbox on bigger screens
|
||
|
|
+- only applies on landing pages (webapp will expand as you add columns)
|
||
|
|
+
|
||
|
|
+author: trwnh
|
||
|
|
+license: Public Domain
|
||
|
|
+*/
|
||
|
|
+@media (min-width: 1600px) {
|
||
|
|
+ .landing-page .container {max-width: 1600px}
|
||
|
|
+}
|
||
|
|
\ No newline at end of file
|
||
|
|
diff --git a/app/javascript/styles/mods/layout_elefriend.css b/app/javascript/styles/mods/layout_elefriend.css
|
||
|
|
new file mode 100644
|
||
|
|
index 000000000..3d79a2cf2
|
||
|
|
--- /dev/null
|
||
|
|
+++ b/app/javascript/styles/mods/layout_elefriend.css
|
||
|
|
@@ -0,0 +1,20 @@
|
||
|
|
+/*
|
||
|
|
+Release elephant friend from their confines:
|
||
|
|
+- elephant friend will now hang out in the corner of your browser,
|
||
|
|
+ instead of being trapped in the drawer.
|
||
|
|
+
|
||
|
|
+author: trwnh
|
||
|
|
+license: Public Domain
|
||
|
|
+*/
|
||
|
|
+.drawer__inner, .drawer__inner__mastodon {
|
||
|
|
+ background: none; z-index: 0
|
||
|
|
+}
|
||
|
|
+.drawer__inner__mastodon > img {
|
||
|
|
+ position: fixed;
|
||
|
|
+ bottom: 0;
|
||
|
|
+ left: 0;
|
||
|
|
+ height: 180px;
|
||
|
|
+ z-index: -1
|
||
|
|
+}
|
||
|
|
+.compose-form {z-index: 1}
|
||
|
|
+.drawer__inner {height: 100%} /* firefox bug highlights drawer text on click? */
|
||
|
|
\ No newline at end of file
|
||
|
|
diff --git a/app/javascript/styles/mods/layout_gettingstartedheight.css b/app/javascript/styles/mods/layout_gettingstartedheight.css
|
||
|
|
new file mode 100644
|
||
|
|
index 000000000..536a70751
|
||
|
|
--- /dev/null
|
||
|
|
+++ b/app/javascript/styles/mods/layout_gettingstartedheight.css
|
||
|
|
@@ -0,0 +1,13 @@
|
||
|
|
+/*
|
||
|
|
+Make "getting started" column height consistent with all other columns:
|
||
|
|
+- puts the footer back at the bottom of the page, instead of floating.
|
||
|
|
+
|
||
|
|
+author: trwnh
|
||
|
|
+license: Public Domain
|
||
|
|
+*/
|
||
|
|
+.getting-started {
|
||
|
|
+ height: 100%;
|
||
|
|
+ display: flex;
|
||
|
|
+ flex-flow: column;
|
||
|
|
+ justify-content: space-between
|
||
|
|
+}
|
||
|
|
\ No newline at end of file
|
||
|
|
diff --git a/app/javascript/styles/mods/layout_hidedisabled.css b/app/javascript/styles/mods/layout_hidedisabled.css
|
||
|
|
new file mode 100644
|
||
|
|
index 000000000..3196db9b1
|
||
|
|
--- /dev/null
|
||
|
|
+++ b/app/javascript/styles/mods/layout_hidedisabled.css
|
||
|
|
@@ -0,0 +1,17 @@
|
||
|
|
+/*
|
||
|
|
+Hide buttons that can't be clicked
|
||
|
|
+- columns on /about and tag pages have buttons that don't work.
|
||
|
|
+- so, this snippet hides those nonworking buttons to save space
|
||
|
|
+- and to avoid confusion.
|
||
|
|
+- unboostable buttons are made transparent on hover instead.
|
||
|
|
+
|
||
|
|
+this is fixed in https://github.com/tootsuite/mastodon/pull/10054
|
||
|
|
+
|
||
|
|
+author: trwnh
|
||
|
|
+license: Public Domain
|
||
|
|
+*/
|
||
|
|
+.status__action-bar .icon-button.disabled:hover,
|
||
|
|
+.notification-favourite .status.status-direct .icon-button.disabled:hover
|
||
|
|
+{color: transparent !important}
|
||
|
|
+
|
||
|
|
+#mastodon-timeline .status__action-bar {display: none}
|
||
|
|
\ No newline at end of file
|
||
|
|
diff --git a/app/javascript/styles/mods/layout_hidefiltered.css b/app/javascript/styles/mods/layout_hidefiltered.css
|
||
|
|
new file mode 100644
|
||
|
|
index 000000000..f701e5f53
|
||
|
|
--- /dev/null
|
||
|
|
+++ b/app/javascript/styles/mods/layout_hidefiltered.css
|
||
|
|
@@ -0,0 +1,9 @@
|
||
|
|
+/*
|
||
|
|
+Remove the "Filtered" tombstone from timelines.
|
||
|
|
+- WARNING: this breaks keyboard scrolling with j/k!
|
||
|
|
+
|
||
|
|
+author: trwnh
|
||
|
|
+license: Public Domain
|
||
|
|
+*/
|
||
|
|
+
|
||
|
|
+.status__wrapper--filtered {display: none}
|
||
|
|
diff --git a/app/javascript/styles/mods/layout_mobile_bottombar.css b/app/javascript/styles/mods/layout_mobile_bottombar.css
|
||
|
|
new file mode 100644
|
||
|
|
index 000000000..e5ddaf4e7
|
||
|
|
--- /dev/null
|
||
|
|
+++ b/app/javascript/styles/mods/layout_mobile_bottombar.css
|
||
|
|
@@ -0,0 +1,29 @@
|
||
|
|
+/*
|
||
|
|
+Bottom tabs on mobile:
|
||
|
|
+- Places the tab bar at the bottom instead of the top.
|
||
|
|
+- Fixes layout errors that are a result of this change.
|
||
|
|
+
|
||
|
|
+author: trwnh
|
||
|
|
+license: Public Domain
|
||
|
|
+*/
|
||
|
|
+@media (max-width: 630px) {
|
||
|
|
+
|
||
|
|
+.tabs-bar {
|
||
|
|
+position: fixed;
|
||
|
|
+bottom: 0;
|
||
|
|
+z-index: 1;
|
||
|
|
+width: 100%;
|
||
|
|
+margin: 0 !important;
|
||
|
|
+}
|
||
|
|
+
|
||
|
|
+.getting-started {overflow: auto} /* can be removed after PR #10075 is merged */
|
||
|
|
+
|
||
|
|
+.columns-area {padding: 0}
|
||
|
|
+.getting-started__trends, .getting-started__wrapper, .search {margin: 0}
|
||
|
|
+.columns-area__panels__main, .tabs-bar__wrapper {padding: 0}
|
||
|
|
+
|
||
|
|
+.floating-action-button, .column .scrollable > div:last-child {margin-bottom: 50px}
|
||
|
|
+.react-swipeable-view-container {height: calc(100% - 50px)}
|
||
|
|
+.react-swipeable-view-container .columns-area {height: 100% !important}
|
||
|
|
+
|
||
|
|
+}
|
||
|
|
diff --git a/app/javascript/styles/mods/layout_singlecolumn.css b/app/javascript/styles/mods/layout_singlecolumn.css
|
||
|
|
new file mode 100644
|
||
|
|
index 000000000..88bf19ee4
|
||
|
|
--- /dev/null
|
||
|
|
+++ b/app/javascript/styles/mods/layout_singlecolumn.css
|
||
|
|
@@ -0,0 +1,25 @@
|
||
|
|
+/*
|
||
|
|
+Single column layout:
|
||
|
|
+- re-uses tab bar from mobile layout
|
||
|
|
+- hides search from drawer (redundant with search tab)
|
||
|
|
+
|
||
|
|
+author: trwnh
|
||
|
|
+license: Public Domain
|
||
|
|
+*/
|
||
|
|
+
|
||
|
|
+@media (min-width: 1024px) {
|
||
|
|
+ /* place constraints on app layout */
|
||
|
|
+ .ui {max-width: 960px; max-height: 100vh;}
|
||
|
|
+ .drawer {width: 300px}
|
||
|
|
+ .column:last-child, .drawer:last-child
|
||
|
|
+ {display: flex; flex: 1 1 100%;}
|
||
|
|
+ /* show tabs bar (from mobile layout) as header */
|
||
|
|
+ .tabs-bar {display: flex;}
|
||
|
|
+ /* hide redundant ui elements */
|
||
|
|
+ .column,
|
||
|
|
+ .drawer__header,
|
||
|
|
+ .drawer:first-child .search,
|
||
|
|
+ .drawer:first-child .search-results
|
||
|
|
+ {display: none;}
|
||
|
|
+ .drawer:first-child .drawer__inner.darker {z-index: -1}
|
||
|
|
+}
|
||
|
|
\ No newline at end of file
|
||
|
|
diff --git a/app/javascript/styles/mods/layout_widercolumns.css b/app/javascript/styles/mods/layout_widercolumns.css
|
||
|
|
new file mode 100644
|
||
|
|
index 000000000..557297cf6
|
||
|
|
--- /dev/null
|
||
|
|
+++ b/app/javascript/styles/mods/layout_widercolumns.css
|
||
|
|
@@ -0,0 +1,10 @@
|
||
|
|
+/*
|
||
|
|
+* Wider columns:
|
||
|
|
+* - Make the multi-column layout use wider columns by default.
|
||
|
|
+*
|
||
|
|
+* author: trwnh
|
||
|
|
+* license: Public Domain
|
||
|
|
+*/
|
||
|
|
+@media (min-width: 580px) {
|
||
|
|
+ .column, #mastodon-timeline {min-width: 55ch;}
|
||
|
|
+}
|
||
|
|
diff --git a/app/javascript/styles/mods/test_colorizedlogo.css b/app/javascript/styles/mods/test_colorizedlogo.css
|
||
|
|
new file mode 100644
|
||
|
|
index 000000000..634ae5f0c
|
||
|
|
--- /dev/null
|
||
|
|
+++ b/app/javascript/styles/mods/test_colorizedlogo.css
|
||
|
|
@@ -0,0 +1,12 @@
|
||
|
|
+/*
|
||
|
|
+Colorize logo on landing page:
|
||
|
|
+- DO NOT IMPORT. It works as standalone CSS, but it makes Sass choke.
|
||
|
|
+
|
||
|
|
+author: trwnh
|
||
|
|
+license: Public Domain
|
||
|
|
+*/
|
||
|
|
+
|
||
|
|
+.landing-page__logo img {
|
||
|
|
+ filter: sepia(100%) hue-rotate(160deg) saturate(400%) brightness(40%);
|
||
|
|
+ mix-blend-mode: normal
|
||
|
|
+}
|
||
|
|
\ No newline at end of file
|
||
|
|
diff --git a/app/javascript/styles/oe7drt-blue.scss b/app/javascript/styles/oe7drt-blue.scss
|
||
|
|
new file mode 100644
|
||
|
|
index 000000000..efde78635
|
||
|
|
--- /dev/null
|
||
|
|
+++ b/app/javascript/styles/oe7drt-blue.scss
|
||
|
|
@@ -0,0 +1,11 @@
|
||
|
|
+@import 'oe7drt-blue/variables';
|
||
|
|
+@import 'application';
|
||
|
|
+@import 'oe7drt-blue/diff';
|
||
|
|
+//@import 'boost';
|
||
|
|
+//@import 'mods/display_browserfont';
|
||
|
|
+@import 'mods/display_breakname';
|
||
|
|
+@import 'mods/display_fullname';
|
||
|
|
+@import 'mods/display_emojizoom';
|
||
|
|
+//@import 'mods/display_circleavatar';
|
||
|
|
+@import 'mods/layout_1600px';
|
||
|
|
+@import 'mods/layout_widercolumns';
|
||
|
|
diff --git a/app/javascript/styles/oe7drt-blue/diff.scss b/app/javascript/styles/oe7drt-blue/diff.scss
|
||
|
|
new file mode 100644
|
||
|
|
index 000000000..b612b87f4
|
||
|
|
--- /dev/null
|
||
|
|
+++ b/app/javascript/styles/oe7drt-blue/diff.scss
|
||
|
|
@@ -0,0 +1,77 @@
|
||
|
|
+// components.scss
|
||
|
|
+.compose-form {
|
||
|
|
+ .compose-form__modifiers {
|
||
|
|
+ .compose-form__upload {
|
||
|
|
+ &-description {
|
||
|
|
+ input {
|
||
|
|
+ &::placeholder {
|
||
|
|
+ opacity: 1;
|
||
|
|
+ }
|
||
|
|
+ }
|
||
|
|
+ }
|
||
|
|
+ }
|
||
|
|
+ }
|
||
|
|
+}
|
||
|
|
+
|
||
|
|
+.rich-formatting a,
|
||
|
|
+.rich-formatting p a,
|
||
|
|
+.rich-formatting li a,
|
||
|
|
+.landing-page__short-description p a,
|
||
|
|
+.status__content a,
|
||
|
|
+.reply-indicator__content a {
|
||
|
|
+ color: lighten($ui-highlight-color, 12%);
|
||
|
|
+ text-decoration: none;
|
||
|
|
+
|
||
|
|
+ &.mention {
|
||
|
|
+ text-decoration: none;
|
||
|
|
+ }
|
||
|
|
+
|
||
|
|
+ &.mention span {
|
||
|
|
+ text-decoration: none;
|
||
|
|
+
|
||
|
|
+ &:hover,
|
||
|
|
+ &:focus,
|
||
|
|
+ &:active {
|
||
|
|
+ text-decoration: none;
|
||
|
|
+ }
|
||
|
|
+ }
|
||
|
|
+
|
||
|
|
+ &:hover,
|
||
|
|
+ &:focus,
|
||
|
|
+ &:active {
|
||
|
|
+ text-decoration: none;
|
||
|
|
+ }
|
||
|
|
+
|
||
|
|
+ &.status__content__spoiler-link {
|
||
|
|
+ color: $secondary-text-color;
|
||
|
|
+ text-decoration: none;
|
||
|
|
+ }
|
||
|
|
+}
|
||
|
|
+
|
||
|
|
+.status__content__read-more-button {
|
||
|
|
+ text-decoration: none;
|
||
|
|
+
|
||
|
|
+ &:hover,
|
||
|
|
+ &:focus,
|
||
|
|
+ &:active {
|
||
|
|
+ text-decoration: none;
|
||
|
|
+ }
|
||
|
|
+}
|
||
|
|
+
|
||
|
|
+.getting-started__footer a {
|
||
|
|
+ text-decoration: none;
|
||
|
|
+
|
||
|
|
+ &:hover,
|
||
|
|
+ &:focus,
|
||
|
|
+ &:active {
|
||
|
|
+ text-decoration: none;
|
||
|
|
+ }
|
||
|
|
+}
|
||
|
|
+
|
||
|
|
+.nothing-here {
|
||
|
|
+ color: $darker-text-color;
|
||
|
|
+}
|
||
|
|
+
|
||
|
|
+.public-layout .public-account-header__tabs__tabs .counter.active::after {
|
||
|
|
+ border-bottom: 4px solid $ui-highlight-color;
|
||
|
|
+}
|
||
|
|
diff --git a/app/javascript/styles/oe7drt-blue/variables.scss b/app/javascript/styles/oe7drt-blue/variables.scss
|
||
|
|
new file mode 100644
|
||
|
|
index 000000000..d3f858a74
|
||
|
|
--- /dev/null
|
||
|
|
+++ b/app/javascript/styles/oe7drt-blue/variables.scss
|
||
|
|
@@ -0,0 +1,66 @@
|
||
|
|
+// Commonly used web colors
|
||
|
|
+$black: #000000; // Black
|
||
|
|
+$white: #ffffff; // White
|
||
|
|
+$success-green: #79bd9a !default; // Padua
|
||
|
|
+$error-red: #df405a !default; // Cerise
|
||
|
|
+$warning-red: #ff5050 !default; // Sunset Orange
|
||
|
|
+$gold-star: #ca8f04 !default; // Dark Goldenrod
|
||
|
|
+
|
||
|
|
+$red-bookmark: $warning-red;
|
||
|
|
+
|
||
|
|
+// Values from the classic Mastodon UI
|
||
|
|
+$classic-base-color: #282c37; // Midnight Express
|
||
|
|
+$classic-primary-color: #9baec8; // Echo Blue
|
||
|
|
+$classic-secondary-color: #d9e1e8; // Pattens Blue
|
||
|
|
+//$classic-highlight-color: #e7b01c; // Summer Sky
|
||
|
|
+//$classic-highlight-color: #4285f4; // OE7DRT (new) Blue
|
||
|
|
+//$classic-highlight-color: #1e57b6; // OE7DRT (new) Blue (darker) (this is a bit too dark)
|
||
|
|
+//$classic-highlight-color: #3a74d5; // OE7DRT (new) Blue (darker) (use this)
|
||
|
|
+//$classic-highlight-color: #7612cc; // OE7DRT violet (too dark)
|
||
|
|
+//$classic-highlight-color: #8737cc; // OE7DRT violet (still a bit too dark)
|
||
|
|
+//$classic-highlight-color: #9d59d8; // OE7DRT violet (damn white)
|
||
|
|
+
|
||
|
|
+//$classic-highlight-color: #4c7899; // OE7DRT /\rch (not bad) bit too high
|
||
|
|
+//$classic-highlight-color: #00bc8c; // OE7DRT /\rch (greenish like cloudlog)
|
||
|
|
+$classic-highlight-color: #1b83c8; // OE7DRT /\dark (blue like chaos.social)
|
||
|
|
+
|
||
|
|
+// Variables for defaults in UI
|
||
|
|
+$base-shadow-color: $black !default;
|
||
|
|
+$base-overlay-background: $black !default;
|
||
|
|
+$base-border-color: $white !default;
|
||
|
|
+$simple-background-color: $white !default;
|
||
|
|
+$valid-value-color: $success-green !default;
|
||
|
|
+$error-value-color: $error-red !default;
|
||
|
|
+
|
||
|
|
+// Tell UI to use selected colors
|
||
|
|
+$ui-base-color: $classic-base-color !default; // Darkest
|
||
|
|
+$ui-base-lighter-color: lighten($ui-base-color, 26%) !default; // Lighter darkest
|
||
|
|
+$ui-primary-color: $classic-primary-color !default; // Lighter
|
||
|
|
+$ui-secondary-color: $classic-secondary-color !default; // Lightest
|
||
|
|
+$ui-highlight-color: $classic-highlight-color !default;
|
||
|
|
+
|
||
|
|
+// Variables for texts
|
||
|
|
+$primary-text-color: $white !default;
|
||
|
|
+$darker-text-color: $ui-primary-color !default;
|
||
|
|
+$dark-text-color: $ui-base-lighter-color !default;
|
||
|
|
+$secondary-text-color: $ui-secondary-color !default;
|
||
|
|
+$highlight-text-color: $ui-highlight-color !default;
|
||
|
|
+$action-button-color: $ui-base-lighter-color !default;
|
||
|
|
+// For texts on inverted backgrounds
|
||
|
|
+$inverted-text-color: $ui-base-color !default;
|
||
|
|
+$lighter-text-color: $ui-base-lighter-color !default;
|
||
|
|
+$light-text-color: $ui-primary-color !default;
|
||
|
|
+
|
||
|
|
+// Language codes that uses CJK fonts
|
||
|
|
+$cjk-langs: ja, ko, zh-CN, zh-HK, zh-TW;
|
||
|
|
+
|
||
|
|
+// Variables for components
|
||
|
|
+$media-modal-media-max-width: 100%;
|
||
|
|
+// put margins on top and bottom of image to avoid the screen covered by image.
|
||
|
|
+$media-modal-media-max-height: 80%;
|
||
|
|
+
|
||
|
|
+$no-gap-breakpoint: 415px;
|
||
|
|
+
|
||
|
|
+$font-sans-serif: 'mastodon-font-sans-serif' !default;
|
||
|
|
+$font-display: 'mastodon-font-display' !default;
|
||
|
|
+$font-monospace: 'mastodon-font-monospace' !default;
|
||
|
|
diff --git a/app/javascript/styles/oe7drt-greeny.scss b/app/javascript/styles/oe7drt-greeny.scss
|
||
|
|
new file mode 100644
|
||
|
|
index 000000000..993c3bbbb
|
||
|
|
--- /dev/null
|
||
|
|
+++ b/app/javascript/styles/oe7drt-greeny.scss
|
||
|
|
@@ -0,0 +1,11 @@
|
||
|
|
+@import 'oe7drt-greeny/variables';
|
||
|
|
+@import 'application';
|
||
|
|
+@import 'oe7drt-greeny/diff';
|
||
|
|
+//@import 'boost';
|
||
|
|
+//@import 'mods/display_browserfont';
|
||
|
|
+@import 'mods/display_breakname';
|
||
|
|
+@import 'mods/display_fullname';
|
||
|
|
+@import 'mods/display_emojizoom';
|
||
|
|
+//@import 'mods/display_circleavatar';
|
||
|
|
+@import 'mods/layout_1600px';
|
||
|
|
+@import 'mods/layout_widercolumns';
|
||
|
|
diff --git a/app/javascript/styles/oe7drt-greeny/diff.scss b/app/javascript/styles/oe7drt-greeny/diff.scss
|
||
|
|
new file mode 100644
|
||
|
|
index 000000000..b612b87f4
|
||
|
|
--- /dev/null
|
||
|
|
+++ b/app/javascript/styles/oe7drt-greeny/diff.scss
|
||
|
|
@@ -0,0 +1,77 @@
|
||
|
|
+// components.scss
|
||
|
|
+.compose-form {
|
||
|
|
+ .compose-form__modifiers {
|
||
|
|
+ .compose-form__upload {
|
||
|
|
+ &-description {
|
||
|
|
+ input {
|
||
|
|
+ &::placeholder {
|
||
|
|
+ opacity: 1;
|
||
|
|
+ }
|
||
|
|
+ }
|
||
|
|
+ }
|
||
|
|
+ }
|
||
|
|
+ }
|
||
|
|
+}
|
||
|
|
+
|
||
|
|
+.rich-formatting a,
|
||
|
|
+.rich-formatting p a,
|
||
|
|
+.rich-formatting li a,
|
||
|
|
+.landing-page__short-description p a,
|
||
|
|
+.status__content a,
|
||
|
|
+.reply-indicator__content a {
|
||
|
|
+ color: lighten($ui-highlight-color, 12%);
|
||
|
|
+ text-decoration: none;
|
||
|
|
+
|
||
|
|
+ &.mention {
|
||
|
|
+ text-decoration: none;
|
||
|
|
+ }
|
||
|
|
+
|
||
|
|
+ &.mention span {
|
||
|
|
+ text-decoration: none;
|
||
|
|
+
|
||
|
|
+ &:hover,
|
||
|
|
+ &:focus,
|
||
|
|
+ &:active {
|
||
|
|
+ text-decoration: none;
|
||
|
|
+ }
|
||
|
|
+ }
|
||
|
|
+
|
||
|
|
+ &:hover,
|
||
|
|
+ &:focus,
|
||
|
|
+ &:active {
|
||
|
|
+ text-decoration: none;
|
||
|
|
+ }
|
||
|
|
+
|
||
|
|
+ &.status__content__spoiler-link {
|
||
|
|
+ color: $secondary-text-color;
|
||
|
|
+ text-decoration: none;
|
||
|
|
+ }
|
||
|
|
+}
|
||
|
|
+
|
||
|
|
+.status__content__read-more-button {
|
||
|
|
+ text-decoration: none;
|
||
|
|
+
|
||
|
|
+ &:hover,
|
||
|
|
+ &:focus,
|
||
|
|
+ &:active {
|
||
|
|
+ text-decoration: none;
|
||
|
|
+ }
|
||
|
|
+}
|
||
|
|
+
|
||
|
|
+.getting-started__footer a {
|
||
|
|
+ text-decoration: none;
|
||
|
|
+
|
||
|
|
+ &:hover,
|
||
|
|
+ &:focus,
|
||
|
|
+ &:active {
|
||
|
|
+ text-decoration: none;
|
||
|
|
+ }
|
||
|
|
+}
|
||
|
|
+
|
||
|
|
+.nothing-here {
|
||
|
|
+ color: $darker-text-color;
|
||
|
|
+}
|
||
|
|
+
|
||
|
|
+.public-layout .public-account-header__tabs__tabs .counter.active::after {
|
||
|
|
+ border-bottom: 4px solid $ui-highlight-color;
|
||
|
|
+}
|
||
|
|
diff --git a/app/javascript/styles/oe7drt-greeny/variables.scss b/app/javascript/styles/oe7drt-greeny/variables.scss
|
||
|
|
new file mode 100644
|
||
|
|
index 000000000..34db656a8
|
||
|
|
--- /dev/null
|
||
|
|
+++ b/app/javascript/styles/oe7drt-greeny/variables.scss
|
||
|
|
@@ -0,0 +1,66 @@
|
||
|
|
+// Commonly used web colors
|
||
|
|
+$black: #000000; // Black
|
||
|
|
+$white: #ffffff; // White
|
||
|
|
+$success-green: #79bd9a !default; // Padua
|
||
|
|
+$error-red: #df405a !default; // Cerise
|
||
|
|
+$warning-red: #ff5050 !default; // Sunset Orange
|
||
|
|
+$gold-star: #ca8f04 !default; // Dark Goldenrod
|
||
|
|
+
|
||
|
|
+$red-bookmark: $warning-red;
|
||
|
|
+
|
||
|
|
+// Values from the classic Mastodon UI
|
||
|
|
+$classic-base-color: #282c37; // Midnight Express
|
||
|
|
+$classic-primary-color: #9baec8; // Echo Blue
|
||
|
|
+$classic-secondary-color: #d9e1e8; // Pattens Blue
|
||
|
|
+//$classic-highlight-color: #e7b01c; // Summer Sky
|
||
|
|
+//$classic-highlight-color: #4285f4; // OE7DRT (new) Blue
|
||
|
|
+//$classic-highlight-color: #1e57b6; // OE7DRT (new) Blue (darker) (this is a bit too dark)
|
||
|
|
+//$classic-highlight-color: #3a74d5; // OE7DRT (new) Blue (darker) (use this)
|
||
|
|
+//$classic-highlight-color: #7612cc; // OE7DRT violet (too dark)
|
||
|
|
+//$classic-highlight-color: #8737cc; // OE7DRT violet (still a bit too dark)
|
||
|
|
+//$classic-highlight-color: #9d59d8; // OE7DRT violet (damn white)
|
||
|
|
+
|
||
|
|
+//$classic-highlight-color: #4c7899; // OE7DRT /\rch (not bad) bit too high
|
||
|
|
+$classic-highlight-color: #00bc8c; // OE7DRT /\rch (greenish like cloudlog)
|
||
|
|
+//$classic-highlight-color: #1b83c8; // OE7DRT /\dark (blue like chaos.social)
|
||
|
|
+
|
||
|
|
+// Variables for defaults in UI
|
||
|
|
+$base-shadow-color: $black !default;
|
||
|
|
+$base-overlay-background: $black !default;
|
||
|
|
+$base-border-color: $white !default;
|
||
|
|
+$simple-background-color: $white !default;
|
||
|
|
+$valid-value-color: $success-green !default;
|
||
|
|
+$error-value-color: $error-red !default;
|
||
|
|
+
|
||
|
|
+// Tell UI to use selected colors
|
||
|
|
+$ui-base-color: $classic-base-color !default; // Darkest
|
||
|
|
+$ui-base-lighter-color: lighten($ui-base-color, 26%) !default; // Lighter darkest
|
||
|
|
+$ui-primary-color: $classic-primary-color !default; // Lighter
|
||
|
|
+$ui-secondary-color: $classic-secondary-color !default; // Lightest
|
||
|
|
+$ui-highlight-color: $classic-highlight-color !default;
|
||
|
|
+
|
||
|
|
+// Variables for texts
|
||
|
|
+$primary-text-color: $white !default;
|
||
|
|
+$darker-text-color: $ui-primary-color !default;
|
||
|
|
+$dark-text-color: $ui-base-lighter-color !default;
|
||
|
|
+$secondary-text-color: $ui-secondary-color !default;
|
||
|
|
+$highlight-text-color: $ui-highlight-color !default;
|
||
|
|
+$action-button-color: $ui-base-lighter-color !default;
|
||
|
|
+// For texts on inverted backgrounds
|
||
|
|
+$inverted-text-color: $ui-base-color !default;
|
||
|
|
+$lighter-text-color: $ui-base-lighter-color !default;
|
||
|
|
+$light-text-color: $ui-primary-color !default;
|
||
|
|
+
|
||
|
|
+// Language codes that uses CJK fonts
|
||
|
|
+$cjk-langs: ja, ko, zh-CN, zh-HK, zh-TW;
|
||
|
|
+
|
||
|
|
+// Variables for components
|
||
|
|
+$media-modal-media-max-width: 100%;
|
||
|
|
+// put margins on top and bottom of image to avoid the screen covered by image.
|
||
|
|
+$media-modal-media-max-height: 80%;
|
||
|
|
+
|
||
|
|
+$no-gap-breakpoint: 415px;
|
||
|
|
+
|
||
|
|
+$font-sans-serif: 'mastodon-font-sans-serif' !default;
|
||
|
|
+$font-display: 'mastodon-font-display' !default;
|
||
|
|
+$font-monospace: 'mastodon-font-monospace' !default;
|
||
|
|
diff --git a/app/javascript/styles/oe7drt.scss b/app/javascript/styles/oe7drt.scss
|
||
|
|
new file mode 100644
|
||
|
|
index 000000000..8fbe5534b
|
||
|
|
--- /dev/null
|
||
|
|
+++ b/app/javascript/styles/oe7drt.scss
|
||
|
|
@@ -0,0 +1,2 @@
|
||
|
|
+@import 'application';
|
||
|
|
+@import 'mastodon-material/profiles/oe7drt/loader';
|