Improve scss color variables (#2912)
- Updates scss variables file to use better-named variables for black/white/etc - Arranges the "mastodon classic" colors into variables - Remove all references to `$color-*` naming, replacing with new This does not in itself introduce "theme" support, but: - It would probably be easier to start working on theme support after this change and others - Even without the goal of themes, these changes make it more clear how the colors are being used. There is almost definitely some edge case in here where I've guessed the intent/context of some color usage incorrectly, but it still seems like a net improvement.
This commit is contained in:
Matt Jankowski
Eugen Rochko
parent
cbd673601c
commit
b85dec2b97
@ -2,7 +2,7 @@
|
||||
.wrapper {
|
||||
max-width: 600px;
|
||||
margin: 0 auto;
|
||||
color: $color3;
|
||||
color: $ui-primary-color;
|
||||
padding-top: 50px;
|
||||
padding-bottom: 50px;
|
||||
|
||||
@ -15,7 +15,7 @@
|
||||
font: 46px/52px 'mastodon-font-sans-serif', sans-serif;
|
||||
font-weight: 600;
|
||||
margin-bottom: 20px;
|
||||
color: $color4;
|
||||
color: $ui-highlight-color;
|
||||
padding: 20px 0;
|
||||
|
||||
img {
|
||||
@ -32,7 +32,7 @@
|
||||
line-height: 28px;
|
||||
font-weight: 400;
|
||||
margin-bottom: 20px;
|
||||
color: $color5;
|
||||
color: $primary-text-color;
|
||||
}
|
||||
|
||||
h3 {
|
||||
@ -41,7 +41,7 @@
|
||||
line-height: 28px;
|
||||
font-weight: 400;
|
||||
margin-bottom: 20px;
|
||||
color: $color2;
|
||||
color: $ui-secondary-color;
|
||||
}
|
||||
|
||||
ul,
|
||||
@ -70,7 +70,7 @@
|
||||
margin-bottom: 12px;
|
||||
|
||||
a {
|
||||
color: $color4;
|
||||
color: $ui-highlight-color;
|
||||
text-decoration: underline;
|
||||
}
|
||||
}
|
||||
@ -79,14 +79,14 @@
|
||||
display: inline-block;
|
||||
padding: 7px 7px 5px;
|
||||
margin: 0 2px;
|
||||
background: $color3;
|
||||
color: $color1;
|
||||
background: $ui-primary-color;
|
||||
color: $ui-base-color;
|
||||
font: 16px/16px 'mastodon-font-sans-serif', sans-serif;
|
||||
font-weight: 300;
|
||||
}
|
||||
|
||||
.screenshot {
|
||||
box-shadow: 0 0 15px rgba($color8, 0.4);
|
||||
box-shadow: 0 0 15px rgba($base-shadow-color, 0.4);
|
||||
margin-bottom: 26px;
|
||||
|
||||
img {
|
||||
@ -106,7 +106,7 @@
|
||||
line-height: 36px;
|
||||
|
||||
a {
|
||||
color: $color3;
|
||||
color: $ui-primary-color;
|
||||
text-decoration: underline;
|
||||
}
|
||||
}
|
||||
@ -127,8 +127,8 @@
|
||||
margin: 20px 0;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
border-top: 1px solid lighten($color1, 10%);
|
||||
border-bottom: 1px solid lighten($color1, 10%);
|
||||
border-top: 1px solid lighten($ui-base-color, 10%);
|
||||
border-bottom: 1px solid lighten($ui-base-color, 10%);
|
||||
padding-right: 14px;
|
||||
|
||||
.section {
|
||||
@ -146,7 +146,7 @@
|
||||
font-size: 16px;
|
||||
|
||||
&:last-child {
|
||||
color: $color2;
|
||||
color: $ui-secondary-color;
|
||||
font-size: 14px;
|
||||
}
|
||||
}
|
||||
@ -155,7 +155,7 @@
|
||||
font-weight: 500;
|
||||
font-size: 32px;
|
||||
line-height: 48px;
|
||||
color: $color5;
|
||||
color: $primary-text-color;
|
||||
}
|
||||
}
|
||||
|
||||
@ -190,7 +190,7 @@
|
||||
|
||||
a {
|
||||
display: block;
|
||||
color: $color5;
|
||||
color: $primary-text-color;
|
||||
text-decoration: none;
|
||||
|
||||
&:hover {
|
||||
@ -202,7 +202,7 @@
|
||||
|
||||
.username {
|
||||
display: block;
|
||||
color: $color3;
|
||||
color: $ui-primary-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -213,7 +213,7 @@
|
||||
|
||||
strong {
|
||||
display: block;
|
||||
color: $color5;
|
||||
color: $primary-text-color;
|
||||
word-break: break-word;
|
||||
}
|
||||
}
|
||||
@ -231,14 +231,14 @@
|
||||
}
|
||||
|
||||
.sidebar {
|
||||
border-left: 1px solid lighten($color1, 10%);
|
||||
border-left: 1px solid lighten($ui-base-color, 10%);
|
||||
width: 200px;
|
||||
flex: 0 0 auto;
|
||||
}
|
||||
|
||||
.panel {
|
||||
.panel-header {
|
||||
background: lighten($color1, 10%);
|
||||
background: lighten($ui-base-color, 10%);
|
||||
padding: 7px 14px;
|
||||
text-transform: uppercase;
|
||||
font-size: 12px;
|
||||
@ -263,7 +263,7 @@
|
||||
a {
|
||||
display: block;
|
||||
padding: 7px 14px;
|
||||
color: rgba($color5, 0.7);
|
||||
color: rgba($primary-text-color, 0.7);
|
||||
text-decoration: none;
|
||||
transition: all 200ms linear;
|
||||
|
||||
@ -272,17 +272,17 @@
|
||||
}
|
||||
|
||||
&:hover {
|
||||
color: $color5;
|
||||
background-color: darken($color1, 5%);
|
||||
color: $primary-text-color;
|
||||
background-color: darken($ui-base-color, 5%);
|
||||
transition: all 100ms linear;
|
||||
}
|
||||
|
||||
&.selected {
|
||||
color: $color5;
|
||||
background-color: $color4;
|
||||
color: $primary-text-color;
|
||||
background-color: $ui-highlight-color;
|
||||
|
||||
&:hover {
|
||||
background-color: lighten($color4, 5%);
|
||||
background-color: lighten($ui-highlight-color, 5%);
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -295,7 +295,7 @@
|
||||
flex-direction: column;
|
||||
|
||||
.sidebar {
|
||||
border: 1px solid lighten($color1, 10%);
|
||||
border: 1px solid lighten($ui-base-color, 10%);
|
||||
width: auto;
|
||||
}
|
||||
}
|
||||
@ -341,10 +341,10 @@
|
||||
.closed-registrations-message {
|
||||
width: 300px;
|
||||
flex: 0 0 auto;
|
||||
background: rgba(darken($color1, 7%), 0.5);
|
||||
background: rgba(darken($ui-base-color, 7%), 0.5);
|
||||
padding: 14px;
|
||||
border-radius: 4px;
|
||||
box-shadow: 0 0 15px rgba($color8, 0.4);
|
||||
box-shadow: 0 0 15px rgba($base-shadow-color, 0.4);
|
||||
|
||||
.actions {
|
||||
margin-bottom: 0;
|
||||
@ -354,7 +354,7 @@
|
||||
text-align: center;
|
||||
|
||||
a {
|
||||
color: $color2;
|
||||
color: $ui-secondary-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,10 +1,10 @@
|
||||
.card {
|
||||
background: $color1;
|
||||
background: $ui-base-color;
|
||||
background-size: cover;
|
||||
padding: 60px 0;
|
||||
padding-bottom: 0;
|
||||
border-radius: 4px 4px 0 0;
|
||||
box-shadow: 0 0 15px rgba($color8, 0.2);
|
||||
box-shadow: 0 0 15px rgba($base-shadow-color, 0.2);
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
|
||||
@ -14,7 +14,7 @@
|
||||
}
|
||||
|
||||
&::after {
|
||||
background: linear-gradient(rgba($color8, 0.5), rgba($color8, 0.8));
|
||||
background: linear-gradient(rgba($base-shadow-color, 0.5), rgba($base-shadow-color, 0.8));
|
||||
display: block;
|
||||
content: "";
|
||||
position: absolute;
|
||||
@ -29,17 +29,17 @@
|
||||
display: block;
|
||||
font-size: 20px;
|
||||
line-height: 18px * 1.5;
|
||||
color: $color5;
|
||||
color: $primary-text-color;
|
||||
font-weight: 500;
|
||||
text-align: center;
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
text-shadow: 0 0 2px $color8;
|
||||
text-shadow: 0 0 2px $base-shadow-color;
|
||||
|
||||
small {
|
||||
display: block;
|
||||
font-size: 14px;
|
||||
color: $color4;
|
||||
color: $ui-highlight-color;
|
||||
font-weight: 400;
|
||||
}
|
||||
}
|
||||
@ -82,10 +82,10 @@
|
||||
|
||||
.counter {
|
||||
width: 80px;
|
||||
color: $color3;
|
||||
color: $ui-primary-color;
|
||||
padding: 5px 10px 0;
|
||||
margin-bottom: 10px;
|
||||
border-right: 1px solid $color3;
|
||||
border-right: 1px solid $ui-primary-color;
|
||||
cursor: default;
|
||||
position: relative;
|
||||
|
||||
@ -100,14 +100,14 @@
|
||||
bottom: -10px;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
border-bottom: 4px solid $color3;
|
||||
border-bottom: 4px solid $ui-primary-color;
|
||||
opacity: 0.5;
|
||||
transition: all 0.8s ease;
|
||||
}
|
||||
|
||||
&.active {
|
||||
&::after {
|
||||
border-bottom: 4px solid $color4;
|
||||
border-bottom: 4px solid $ui-highlight-color;
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
@ -129,13 +129,13 @@
|
||||
text-transform: uppercase;
|
||||
display: block;
|
||||
margin-bottom: 5px;
|
||||
text-shadow: 0 0 2px $color8;
|
||||
text-shadow: 0 0 2px $base-shadow-color;
|
||||
}
|
||||
|
||||
.counter-number {
|
||||
font-weight: 500;
|
||||
font-size: 18px;
|
||||
color: $color5;
|
||||
color: $primary-text-color;
|
||||
}
|
||||
}
|
||||
|
||||
@ -144,7 +144,7 @@
|
||||
font-size: 14px;
|
||||
line-height: 18px;
|
||||
padding: 5px 10px;
|
||||
color: $color2;
|
||||
color: $ui-secondary-color;
|
||||
order: 1;
|
||||
}
|
||||
|
||||
@ -180,7 +180,7 @@
|
||||
.page,
|
||||
.gap {
|
||||
font-size: 14px;
|
||||
color: $color5;
|
||||
color: $primary-text-color;
|
||||
font-weight: 500;
|
||||
display: inline-block;
|
||||
padding: 6px 10px;
|
||||
@ -188,9 +188,9 @@
|
||||
}
|
||||
|
||||
.current {
|
||||
background: $color5;
|
||||
background: $simple-background-color;
|
||||
border-radius: 100px;
|
||||
color: $color1;
|
||||
color: $ui-base-color;
|
||||
cursor: default;
|
||||
margin: 0 10px;
|
||||
}
|
||||
@ -202,7 +202,7 @@
|
||||
.prev,
|
||||
.next {
|
||||
text-transform: uppercase;
|
||||
color: $color2;
|
||||
color: $ui-secondary-color;
|
||||
}
|
||||
|
||||
.prev {
|
||||
@ -227,7 +227,7 @@
|
||||
|
||||
.disabled {
|
||||
cursor: default;
|
||||
color: lighten($color1, 10%);
|
||||
color: lighten($ui-base-color, 10%);
|
||||
}
|
||||
|
||||
@media screen and (max-width: 360px) {
|
||||
@ -249,8 +249,8 @@
|
||||
}
|
||||
|
||||
.accounts-grid {
|
||||
box-shadow: 0 0 15px rgba($color8, 0.2);
|
||||
background: $color5;
|
||||
box-shadow: 0 0 15px rgba($base-shadow-color, 0.2);
|
||||
background: $simple-background-color;
|
||||
border-radius: 0 0 4px 4px;
|
||||
padding: 20px 10px;
|
||||
padding-bottom: 10px;
|
||||
@ -266,9 +266,9 @@
|
||||
.account-grid-card {
|
||||
box-sizing: border-box;
|
||||
width: 335px;
|
||||
border: 1px solid $color2;
|
||||
border: 1px solid $ui-secondary-color;
|
||||
border-radius: 4px;
|
||||
color: $color1;
|
||||
color: $ui-base-color;
|
||||
margin-bottom: 10px;
|
||||
|
||||
&:nth-child(odd) {
|
||||
@ -278,7 +278,7 @@
|
||||
.account-grid-card__header {
|
||||
overflow: hidden;
|
||||
padding: 10px;
|
||||
border-bottom: 1px solid $color2;
|
||||
border-bottom: 1px solid $ui-secondary-color;
|
||||
}
|
||||
|
||||
.avatar {
|
||||
@ -300,7 +300,7 @@
|
||||
|
||||
a {
|
||||
display: block;
|
||||
color: $color1;
|
||||
color: $ui-base-color;
|
||||
text-decoration: none;
|
||||
|
||||
&:hover {
|
||||
@ -317,20 +317,20 @@
|
||||
}
|
||||
|
||||
.username {
|
||||
color: $color4;
|
||||
color: $ui-highlight-color;
|
||||
}
|
||||
|
||||
.note {
|
||||
padding: 10px;
|
||||
padding-top: 15px;
|
||||
color: $color3;
|
||||
color: $ui-primary-color;
|
||||
word-wrap: break-word;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.nothing-here {
|
||||
color: $color3;
|
||||
color: $ui-primary-color;
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
text-align: center;
|
||||
@ -341,10 +341,10 @@
|
||||
|
||||
.account-card {
|
||||
padding: 14px 10px;
|
||||
background: $color5;
|
||||
background: $simple-background-color;
|
||||
border-radius: 4px;
|
||||
text-align: left;
|
||||
box-shadow: 0 0 15px rgba($color8, 0.2);
|
||||
box-shadow: 0 0 15px rgba($base-shadow-color, 0.2);
|
||||
|
||||
.detailed-status__display-name {
|
||||
display: block;
|
||||
@ -377,12 +377,12 @@
|
||||
|
||||
strong {
|
||||
font-weight: 500;
|
||||
color: $color1;
|
||||
color: $ui-base-color;
|
||||
}
|
||||
|
||||
span {
|
||||
font-size: 14px;
|
||||
color: $color3;
|
||||
color: $ui-primary-color;
|
||||
}
|
||||
}
|
||||
|
||||
@ -397,6 +397,6 @@
|
||||
|
||||
.account__header__content {
|
||||
font-size: 14px;
|
||||
color: $color1;
|
||||
color: $ui-base-color;
|
||||
}
|
||||
}
|
||||
|
||||
@ -6,7 +6,7 @@
|
||||
.sidebar-wrapper {
|
||||
flex: 1;
|
||||
height: 100%;
|
||||
background: $color1;
|
||||
background: $ui-base-color;
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
}
|
||||
@ -33,7 +33,7 @@
|
||||
a {
|
||||
display: block;
|
||||
padding: 15px 25px;
|
||||
color: rgba($color5, 0.7);
|
||||
color: rgba($primary-text-color, 0.7);
|
||||
text-decoration: none;
|
||||
transition: all 200ms linear;
|
||||
border-radius: 4px 0 0 4px;
|
||||
@ -43,19 +43,19 @@
|
||||
}
|
||||
|
||||
&:hover {
|
||||
color: $color5;
|
||||
background-color: darken($color1, 5%);
|
||||
color: $primary-text-color;
|
||||
background-color: darken($ui-base-color, 5%);
|
||||
transition: all 100ms linear;
|
||||
}
|
||||
|
||||
&.selected {
|
||||
background: darken($color1, 2%);
|
||||
background: darken($ui-base-color, 2%);
|
||||
border-radius: 4px 0 0;
|
||||
}
|
||||
}
|
||||
|
||||
ul {
|
||||
background: darken($color1, 4%);
|
||||
background: darken($ui-base-color, 4%);
|
||||
border-radius: 0 0 0 4px;
|
||||
margin: 0;
|
||||
|
||||
@ -63,13 +63,13 @@
|
||||
border: 0;
|
||||
|
||||
&.selected {
|
||||
color: $color5;
|
||||
background-color: $color4;
|
||||
color: $primary-text-color;
|
||||
background-color: $ui-highlight-color;
|
||||
border-bottom: 0;
|
||||
border-radius: 0;
|
||||
|
||||
&:hover {
|
||||
background-color: lighten($color4, 5%);
|
||||
background-color: lighten($ui-highlight-color, 5%);
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -89,7 +89,7 @@
|
||||
padding-left: 25px;
|
||||
|
||||
h2 {
|
||||
color: $color2;
|
||||
color: $ui-secondary-color;
|
||||
font-size: 24px;
|
||||
line-height: 28px;
|
||||
font-weight: 400;
|
||||
@ -99,11 +99,11 @@
|
||||
& > p {
|
||||
font-size: 14px;
|
||||
line-height: 18px;
|
||||
color: $color2;
|
||||
color: $ui-secondary-color;
|
||||
margin-bottom: 20px;
|
||||
|
||||
strong {
|
||||
color: $color5;
|
||||
color: $primary-text-color;
|
||||
font-weight: 500;
|
||||
}
|
||||
}
|
||||
@ -112,7 +112,7 @@
|
||||
margin: 20px 0;
|
||||
border: 0;
|
||||
background: transparent;
|
||||
border-bottom: 1px solid $color1;
|
||||
border-bottom: 1px solid $ui-base-color;
|
||||
}
|
||||
}
|
||||
|
||||
@ -185,21 +185,21 @@
|
||||
|
||||
a {
|
||||
display: inline-block;
|
||||
color: rgba($color5, 0.7);
|
||||
color: rgba($primary-text-color, 0.7);
|
||||
text-decoration: none;
|
||||
text-transform: uppercase;
|
||||
font-size: 12px;
|
||||
font-weight: 500;
|
||||
border-bottom: 2px solid $color1;
|
||||
border-bottom: 2px solid $ui-base-color;
|
||||
|
||||
&:hover {
|
||||
color: $color5;
|
||||
border-bottom: 2px solid lighten($color1, 5%);
|
||||
color: $primary-text-color;
|
||||
border-bottom: 2px solid lighten($ui-base-color, 5%);
|
||||
}
|
||||
|
||||
&.selected {
|
||||
color: $color4;
|
||||
border-bottom: 2px solid $color4;
|
||||
color: $ui-highlight-color;
|
||||
border-bottom: 2px solid $ui-highlight-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -221,7 +221,7 @@
|
||||
font-weight: 500;
|
||||
font-size: 14px;
|
||||
line-height: 18px;
|
||||
color: $color2;
|
||||
color: $ui-secondary-color;
|
||||
}
|
||||
|
||||
&:first-child {
|
||||
|
||||
@ -1,12 +1,12 @@
|
||||
body {
|
||||
font-family: 'mastodon-font-sans-serif', sans-serif;
|
||||
background: $color1 url('../images/background-photo.jpg');
|
||||
background: $ui-base-color url('../images/background-photo.jpg');
|
||||
background-size: cover;
|
||||
background-attachment: fixed;
|
||||
font-size: 13px;
|
||||
line-height: 18px;
|
||||
font-weight: 400;
|
||||
color: $color5;
|
||||
color: $primary-text-color;
|
||||
padding-bottom: 140px;
|
||||
text-rendering: optimizelegibility;
|
||||
font-feature-settings: "kern";
|
||||
@ -17,7 +17,7 @@ body {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
padding: 0;
|
||||
background: $color1;
|
||||
background: $ui-base-color;
|
||||
}
|
||||
|
||||
&.embed {
|
||||
@ -33,7 +33,7 @@ body {
|
||||
}
|
||||
|
||||
&.admin {
|
||||
background: darken($color1, 4%);
|
||||
background: darken($ui-base-color, 4%);
|
||||
position: fixed;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
|
||||
@ -3,9 +3,9 @@
|
||||
}
|
||||
|
||||
button.icon-button i.fa-retweet {
|
||||
background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='22' height='209'><path d='M4.97 3.16c-.1.03-.17.1-.22.18L.8 8.24c-.2.3.03.78.4.8H3.6v2.68c0 4.26-.55 3.62 3.66 3.62h7.66l-2.3-2.84c-.03-.02-.03-.04-.05-.06H7.27c-.44 0-.72-.3-.72-.72v-2.7h2.5c.37.03.63-.48.4-.77L5.5 3.35c-.12-.17-.34-.25-.53-.2zm12.16.43c-.55-.02-1.32.02-2.4.02H7.1l2.32 2.85.03.06h5.25c.42 0 .72.28.72.72v2.7h-2.5c-.36.02-.56.54-.3.8l3.92 4.9c.18.25.6.25.78 0l3.94-4.9c.26-.28 0-.83-.37-.8H18.4v-2.7c0-3.15.4-3.62-1.25-3.66z' fill='#{url-friendly-colour(lighten($color1, 26%))}' stroke-width='0'/><path d='M7.78 19.66c-.24.02-.44.25-.44.5v2.46h-.06c-1.08 0-1.86-.03-2.4-.03-1.64 0-1.25.43-1.25 3.65v4.47c0 4.26-.56 3.62 3.65 3.62H8.5l-1.3-1.06c-.1-.08-.18-.2-.2-.3-.02-.17.06-.35.2-.45l1.33-1.1H7.28c-.44 0-.72-.3-.72-.7v-4.48c0-.44.28-.72.72-.72h.06v2.5c0 .38.54.63.82.38l4.9-3.93c.25-.18.25-.6 0-.78l-4.9-3.92c-.1-.1-.24-.14-.38-.12zm9.34 2.93c-.54-.02-1.3.02-2.4.02h-1.25l1.3 1.07c.1.07.18.2.2.33.02.16-.06.3-.2.4l-1.33 1.1h1.28c.42 0 .72.28.72.72v4.47c0 .42-.3.72-.72.72h-.1v-2.47c0-.3-.3-.53-.6-.47-.07 0-.14.05-.2.1l-4.9 3.93c-.26.18-.26.6 0 .78l4.9 3.92c.27.25.82 0 .8-.38v-2.5h.1c4.27 0 3.65.67 3.65-3.62v-4.47c0-3.15.4-3.62-1.25-3.66zM10.34 38.66c-.24.02-.44.25-.43.5v2.47H7.3c-1.08 0-1.86-.04-2.4-.04-1.64 0-1.25.43-1.25 3.65v4.47c0 3.66-.23 3.7 2.34 3.66l-1.34-1.1c-.1-.08-.18-.2-.2-.3 0-.17.07-.35.2-.45l1.96-1.6c-.03-.06-.04-.13-.04-.2v-4.48c0-.44.28-.72.72-.72H9.9v2.5c0 .36.5.6.8.38l4.93-3.93c.24-.18.24-.6 0-.78l-4.94-3.92c-.1-.08-.23-.13-.36-.12zm5.63 2.93l1.34 1.1c.1.07.18.2.2.33.02.16-.03.3-.16.4l-1.96 1.6c.02.07.06.13.06.22v4.47c0 .42-.3.72-.72.72h-2.66v-2.47c0-.3-.3-.53-.6-.47-.06.02-.12.05-.18.1l-4.94 3.93c-.24.18-.24.6 0 .78l4.94 3.92c.28.22.78-.02.78-.38v-2.5h2.66c4.27 0 3.65.67 3.65-3.62v-4.47c0-3.66.34-3.7-2.4-3.66zM13.06 57.66c-.23.03-.4.26-.4.5v2.47H7.28c-1.08 0-1.86-.04-2.4-.04-1.64 0-1.25.43-1.25 3.65v4.87l2.93-2.37v-2.5c0-.44.28-.72.72-.72h5.38v2.5c0 .36.5.6.78.38l4.94-3.93c.24-.18.24-.6 0-.78l-4.94-3.92c-.1-.1-.24-.14-.38-.12zm5.3 6.15l-2.92 2.4v2.52c0 .42-.3.72-.72.72h-5.4v-2.47c0-.3-.32-.53-.6-.47-.07.02-.13.05-.2.1L3.6 70.52c-.25.18-.25.6 0 .78l4.93 3.92c.28.22.78-.02.78-.38v-2.5h5.42c4.27 0 3.65.67 3.65-3.62v-4.47-.44zM19.25 78.8c-.1.03-.2.1-.28.17l-.9.9c-.44-.3-1.36-.25-3.35-.25H7.28c-1.08 0-1.86-.03-2.4-.03-1.64 0-1.25.43-1.25 3.65v.7l2.93.3v-1c0-.44.28-.72.72-.72h7.44c.2 0 .37.08.5.2l-1.8 1.8c-.25.26-.08.76.27.8l6.27.7c.28.03.56-.25.53-.53l-.7-6.25c0-.27-.3-.48-.55-.44zm-17.2 6.1c-.2.07-.36.3-.33.54l.7 6.25c.02.36.58.55.83.27l.8-.8c.02 0 .04-.02.04 0 .46.24 1.37.17 3.18.17h7.44c4.27 0 3.65.67 3.65-3.62v-.75l-2.93-.3v1.05c0 .42-.3.72-.72.72H7.28c-.15 0-.3-.03-.4-.1L8.8 86.4c.3-.24.1-.8-.27-.84l-6.28-.65h-.2zM4.88 98.6c-1.33 0-1.34.48-1.3 2.3l1.14-1.37c.08-.1.22-.17.34-.2.16 0 .34.08.44.2l1.66 2.03c.04 0 .07-.03.12-.03h7.44c.34 0 .57.2.65.5h-2.43c-.34.05-.53.52-.3.78l3.92 4.95c.18.24.6.24.78 0l3.94-4.94c.22-.27-.02-.76-.37-.77H18.4c.02-3.9.6-3.4-3.66-3.4H7.28c-1.08 0-1.86-.04-2.4-.04zm.15 2.46c-.1.03-.2.1-.28.2l-3.94 4.9c-.2.28.03.77.4.78H3.6c-.02 3.94-.45 3.4 3.66 3.4h7.44c3.65 0 3.74.3 3.7-2.25l-1.1 1.34c-.1.1-.2.17-.32.2-.16 0-.34-.08-.44-.2l-1.65-2.03c-.06.02-.1.04-.18.04H7.28c-.35 0-.57-.2-.66-.5h2.44c.37 0 .63-.5.4-.78l-3.96-4.9c-.1-.15-.3-.23-.47-.2zM4.88 117.6c-1.16 0-1.3.3-1.3 1.56l1.14-1.38c.08-.1.22-.14.34-.16.16 0 .34.04.44.16l2.22 2.75h7c.42 0 .72.28.72.72v.53h-2.6c-.3.1-.43.54-.2.78l3.92 4.9c.18.25.6.25.78 0l3.94-4.9c.22-.28-.02-.77-.37-.78H18.4v-.53c0-4.2.72-3.63-3.66-3.63H7.28c-1.08 0-1.86-.03-2.4-.03zm.1 1.74c-.1.03-.17.1-.23.16L.8 124.44c-.2.28.03.77.4.78H3.6v.5c0 4.26-.55 3.62 3.66 3.62h7.44c1.03 0 1.74.02 2.28 0-.16.02-.34-.03-.44-.15l-2.22-2.76H7.28c-.44 0-.72-.3-.72-.72v-.5h2.5c.37.02.63-.5.4-.78L5.5 119.5c-.12-.15-.34-.22-.53-.16zm12.02 10c1.2-.02 1.4-.25 1.4-1.53l-1.1 1.36c-.07.1-.17.17-.3.18zM5.94 136.6l2.37 2.93h6.42c.42 0 .72.28.72.72v1.25h-2.6c-.3.1-.43.54-.2.78l3.92 4.9c.18.25.6.25.78 0l3.94-4.9c.22-.28-.02-.77-.37-.78H18.4v-1.25c0-4.2.72-3.63-3.66-3.63H7.28c-.6 0-.92-.02-1.34-.03zm-1.72.06c-.4.08-.54.3-.6.75l.6-.74zm.84.93c-.12 0-.24.08-.3.18l-3.95 4.9c-.24.3 0 .83.4.82H3.6v1.22c0 4.26-.55 3.62 3.66 3.62h7.44c.63 0 .97.02 1.4.03l-2.37-2.93H7.28c-.44 0-.72-.3-.72-.72v-1.22h2.5c.4.04.67-.53.4-.8l-3.96-4.92c-.1-.13-.27-.2-.44-.2zm13.28 10.03l-.56.7c.36-.07.5-.3.56-.7zM17.13 155.6c-.55-.02-1.32.03-2.4.03h-8.2l2.38 2.9h5.82c.42 0 .72.28.72.72v1.97H12.9c-.32.06-.48.52-.28.78l3.94 4.94c.2.23.6.22.78-.03l3.94-4.9c.22-.28-.02-.77-.37-.78H18.4v-1.97c0-3.15.4-3.62-1.25-3.66zm-12.1.28c-.1.02-.2.1-.28.18l-3.94 4.9c-.2.3.03.78.4.8H3.6v1.96c0 4.26-.55 3.62 3.66 3.62h8.24l-2.36-2.9H7.28c-.44 0-.72-.3-.72-.72v-1.97h2.5c.37.02.63-.5.4-.78l-3.96-4.9c-.1-.15-.3-.22-.47-.2zM5.13 174.5c-.15 0-.3.07-.38.2L.8 179.6c-.24.27 0 .82.4.8H3.6v2.32c0 4.26-.55 3.62 3.66 3.62h7.94l-2.35-2.9h-5.6c-.43 0-.7-.3-.7-.72v-2.3h2.5c.38.03.66-.54.4-.83l-3.97-4.9c-.1-.13-.23-.2-.38-.2zm12 .1c-.55-.02-1.32.03-2.4.03H6.83l2.35 2.9h5.52c.42 0 .72.28.72.72v2.34h-2.6c-.3.1-.43.53-.2.78l3.92 4.9c.18.24.6.24.78 0l3.94-4.9c.22-.3-.02-.78-.37-.8H18.4v-2.33c0-3.15.4-3.62-1.25-3.66zM4.97 193.16c-.1.03-.17.1-.22.18l-3.94 4.9c-.2.3.03.78.4.8H3.6v2.68c0 4.26-.55 3.62 3.66 3.62h7.66l-2.3-2.84c-.03-.02-.03-.04-.05-.06H7.27c-.44 0-.72-.3-.72-.72v-2.7h2.5c.37.03.63-.48.4-.77l-3.96-4.9c-.12-.17-.34-.25-.53-.2zm12.16.43c-.55-.02-1.32.03-2.4.03H7.1l2.32 2.84.03.06h5.25c.42 0 .72.28.72.72v2.7h-2.5c-.36.02-.56.54-.3.8l3.92 4.9c.18.25.6.25.78 0l3.94-4.9c.26-.28 0-.83-.37-.8H18.4v-2.7c0-3.15.4-3.62-1.25-3.66z' fill='#{url-friendly-colour($color4)}' stroke-width='0'/></svg>");
|
||||
background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='22' height='209'><path d='M4.97 3.16c-.1.03-.17.1-.22.18L.8 8.24c-.2.3.03.78.4.8H3.6v2.68c0 4.26-.55 3.62 3.66 3.62h7.66l-2.3-2.84c-.03-.02-.03-.04-.05-.06H7.27c-.44 0-.72-.3-.72-.72v-2.7h2.5c.37.03.63-.48.4-.77L5.5 3.35c-.12-.17-.34-.25-.53-.2zm12.16.43c-.55-.02-1.32.02-2.4.02H7.1l2.32 2.85.03.06h5.25c.42 0 .72.28.72.72v2.7h-2.5c-.36.02-.56.54-.3.8l3.92 4.9c.18.25.6.25.78 0l3.94-4.9c.26-.28 0-.83-.37-.8H18.4v-2.7c0-3.15.4-3.62-1.25-3.66z' fill='#{url-friendly-colour(lighten($ui-base-color, 26%))}' stroke-width='0'/><path d='M7.78 19.66c-.24.02-.44.25-.44.5v2.46h-.06c-1.08 0-1.86-.03-2.4-.03-1.64 0-1.25.43-1.25 3.65v4.47c0 4.26-.56 3.62 3.65 3.62H8.5l-1.3-1.06c-.1-.08-.18-.2-.2-.3-.02-.17.06-.35.2-.45l1.33-1.1H7.28c-.44 0-.72-.3-.72-.7v-4.48c0-.44.28-.72.72-.72h.06v2.5c0 .38.54.63.82.38l4.9-3.93c.25-.18.25-.6 0-.78l-4.9-3.92c-.1-.1-.24-.14-.38-.12zm9.34 2.93c-.54-.02-1.3.02-2.4.02h-1.25l1.3 1.07c.1.07.18.2.2.33.02.16-.06.3-.2.4l-1.33 1.1h1.28c.42 0 .72.28.72.72v4.47c0 .42-.3.72-.72.72h-.1v-2.47c0-.3-.3-.53-.6-.47-.07 0-.14.05-.2.1l-4.9 3.93c-.26.18-.26.6 0 .78l4.9 3.92c.27.25.82 0 .8-.38v-2.5h.1c4.27 0 3.65.67 3.65-3.62v-4.47c0-3.15.4-3.62-1.25-3.66zM10.34 38.66c-.24.02-.44.25-.43.5v2.47H7.3c-1.08 0-1.86-.04-2.4-.04-1.64 0-1.25.43-1.25 3.65v4.47c0 3.66-.23 3.7 2.34 3.66l-1.34-1.1c-.1-.08-.18-.2-.2-.3 0-.17.07-.35.2-.45l1.96-1.6c-.03-.06-.04-.13-.04-.2v-4.48c0-.44.28-.72.72-.72H9.9v2.5c0 .36.5.6.8.38l4.93-3.93c.24-.18.24-.6 0-.78l-4.94-3.92c-.1-.08-.23-.13-.36-.12zm5.63 2.93l1.34 1.1c.1.07.18.2.2.33.02.16-.03.3-.16.4l-1.96 1.6c.02.07.06.13.06.22v4.47c0 .42-.3.72-.72.72h-2.66v-2.47c0-.3-.3-.53-.6-.47-.06.02-.12.05-.18.1l-4.94 3.93c-.24.18-.24.6 0 .78l4.94 3.92c.28.22.78-.02.78-.38v-2.5h2.66c4.27 0 3.65.67 3.65-3.62v-4.47c0-3.66.34-3.7-2.4-3.66zM13.06 57.66c-.23.03-.4.26-.4.5v2.47H7.28c-1.08 0-1.86-.04-2.4-.04-1.64 0-1.25.43-1.25 3.65v4.87l2.93-2.37v-2.5c0-.44.28-.72.72-.72h5.38v2.5c0 .36.5.6.78.38l4.94-3.93c.24-.18.24-.6 0-.78l-4.94-3.92c-.1-.1-.24-.14-.38-.12zm5.3 6.15l-2.92 2.4v2.52c0 .42-.3.72-.72.72h-5.4v-2.47c0-.3-.32-.53-.6-.47-.07.02-.13.05-.2.1L3.6 70.52c-.25.18-.25.6 0 .78l4.93 3.92c.28.22.78-.02.78-.38v-2.5h5.42c4.27 0 3.65.67 3.65-3.62v-4.47-.44zM19.25 78.8c-.1.03-.2.1-.28.17l-.9.9c-.44-.3-1.36-.25-3.35-.25H7.28c-1.08 0-1.86-.03-2.4-.03-1.64 0-1.25.43-1.25 3.65v.7l2.93.3v-1c0-.44.28-.72.72-.72h7.44c.2 0 .37.08.5.2l-1.8 1.8c-.25.26-.08.76.27.8l6.27.7c.28.03.56-.25.53-.53l-.7-6.25c0-.27-.3-.48-.55-.44zm-17.2 6.1c-.2.07-.36.3-.33.54l.7 6.25c.02.36.58.55.83.27l.8-.8c.02 0 .04-.02.04 0 .46.24 1.37.17 3.18.17h7.44c4.27 0 3.65.67 3.65-3.62v-.75l-2.93-.3v1.05c0 .42-.3.72-.72.72H7.28c-.15 0-.3-.03-.4-.1L8.8 86.4c.3-.24.1-.8-.27-.84l-6.28-.65h-.2zM4.88 98.6c-1.33 0-1.34.48-1.3 2.3l1.14-1.37c.08-.1.22-.17.34-.2.16 0 .34.08.44.2l1.66 2.03c.04 0 .07-.03.12-.03h7.44c.34 0 .57.2.65.5h-2.43c-.34.05-.53.52-.3.78l3.92 4.95c.18.24.6.24.78 0l3.94-4.94c.22-.27-.02-.76-.37-.77H18.4c.02-3.9.6-3.4-3.66-3.4H7.28c-1.08 0-1.86-.04-2.4-.04zm.15 2.46c-.1.03-.2.1-.28.2l-3.94 4.9c-.2.28.03.77.4.78H3.6c-.02 3.94-.45 3.4 3.66 3.4h7.44c3.65 0 3.74.3 3.7-2.25l-1.1 1.34c-.1.1-.2.17-.32.2-.16 0-.34-.08-.44-.2l-1.65-2.03c-.06.02-.1.04-.18.04H7.28c-.35 0-.57-.2-.66-.5h2.44c.37 0 .63-.5.4-.78l-3.96-4.9c-.1-.15-.3-.23-.47-.2zM4.88 117.6c-1.16 0-1.3.3-1.3 1.56l1.14-1.38c.08-.1.22-.14.34-.16.16 0 .34.04.44.16l2.22 2.75h7c.42 0 .72.28.72.72v.53h-2.6c-.3.1-.43.54-.2.78l3.92 4.9c.18.25.6.25.78 0l3.94-4.9c.22-.28-.02-.77-.37-.78H18.4v-.53c0-4.2.72-3.63-3.66-3.63H7.28c-1.08 0-1.86-.03-2.4-.03zm.1 1.74c-.1.03-.17.1-.23.16L.8 124.44c-.2.28.03.77.4.78H3.6v.5c0 4.26-.55 3.62 3.66 3.62h7.44c1.03 0 1.74.02 2.28 0-.16.02-.34-.03-.44-.15l-2.22-2.76H7.28c-.44 0-.72-.3-.72-.72v-.5h2.5c.37.02.63-.5.4-.78L5.5 119.5c-.12-.15-.34-.22-.53-.16zm12.02 10c1.2-.02 1.4-.25 1.4-1.53l-1.1 1.36c-.07.1-.17.17-.3.18zM5.94 136.6l2.37 2.93h6.42c.42 0 .72.28.72.72v1.25h-2.6c-.3.1-.43.54-.2.78l3.92 4.9c.18.25.6.25.78 0l3.94-4.9c.22-.28-.02-.77-.37-.78H18.4v-1.25c0-4.2.72-3.63-3.66-3.63H7.28c-.6 0-.92-.02-1.34-.03zm-1.72.06c-.4.08-.54.3-.6.75l.6-.74zm.84.93c-.12 0-.24.08-.3.18l-3.95 4.9c-.24.3 0 .83.4.82H3.6v1.22c0 4.26-.55 3.62 3.66 3.62h7.44c.63 0 .97.02 1.4.03l-2.37-2.93H7.28c-.44 0-.72-.3-.72-.72v-1.22h2.5c.4.04.67-.53.4-.8l-3.96-4.92c-.1-.13-.27-.2-.44-.2zm13.28 10.03l-.56.7c.36-.07.5-.3.56-.7zM17.13 155.6c-.55-.02-1.32.03-2.4.03h-8.2l2.38 2.9h5.82c.42 0 .72.28.72.72v1.97H12.9c-.32.06-.48.52-.28.78l3.94 4.94c.2.23.6.22.78-.03l3.94-4.9c.22-.28-.02-.77-.37-.78H18.4v-1.97c0-3.15.4-3.62-1.25-3.66zm-12.1.28c-.1.02-.2.1-.28.18l-3.94 4.9c-.2.3.03.78.4.8H3.6v1.96c0 4.26-.55 3.62 3.66 3.62h8.24l-2.36-2.9H7.28c-.44 0-.72-.3-.72-.72v-1.97h2.5c.37.02.63-.5.4-.78l-3.96-4.9c-.1-.15-.3-.22-.47-.2zM5.13 174.5c-.15 0-.3.07-.38.2L.8 179.6c-.24.27 0 .82.4.8H3.6v2.32c0 4.26-.55 3.62 3.66 3.62h7.94l-2.35-2.9h-5.6c-.43 0-.7-.3-.7-.72v-2.3h2.5c.38.03.66-.54.4-.83l-3.97-4.9c-.1-.13-.23-.2-.38-.2zm12 .1c-.55-.02-1.32.03-2.4.03H6.83l2.35 2.9h5.52c.42 0 .72.28.72.72v2.34h-2.6c-.3.1-.43.53-.2.78l3.92 4.9c.18.24.6.24.78 0l3.94-4.9c.22-.3-.02-.78-.37-.8H18.4v-2.33c0-3.15.4-3.62-1.25-3.66zM4.97 193.16c-.1.03-.17.1-.22.18l-3.94 4.9c-.2.3.03.78.4.8H3.6v2.68c0 4.26-.55 3.62 3.66 3.62h7.66l-2.3-2.84c-.03-.02-.03-.04-.05-.06H7.27c-.44 0-.72-.3-.72-.72v-2.7h2.5c.37.03.63-.48.4-.77l-3.96-4.9c-.12-.17-.34-.25-.53-.2zm12.16.43c-.55-.02-1.32.03-2.4.03H7.1l2.32 2.84.03.06h5.25c.42 0 .72.28.72.72v2.7h-2.5c-.36.02-.56.54-.3.8l3.92 4.9c.18.25.6.25.78 0l3.94-4.9c.26-.28 0-.83-.37-.8H18.4v-2.7c0-3.15.4-3.62-1.25-3.66z' fill='#{url-friendly-colour($ui-highlight-color)}' stroke-width='0'/></svg>");
|
||||
|
||||
&:hover {
|
||||
background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='22' height='209'><path d='M4.97 3.16c-.1.03-.17.1-.22.18L.8 8.24c-.2.3.03.78.4.8H3.6v2.68c0 4.26-.55 3.62 3.66 3.62h7.66l-2.3-2.84c-.03-.02-.03-.04-.05-.06H7.27c-.44 0-.72-.3-.72-.72v-2.7h2.5c.37.03.63-.48.4-.77L5.5 3.35c-.12-.17-.34-.25-.53-.2zm12.16.43c-.55-.02-1.32.02-2.4.02H7.1l2.32 2.85.03.06h5.25c.42 0 .72.28.72.72v2.7h-2.5c-.36.02-.56.54-.3.8l3.92 4.9c.18.25.6.25.78 0l3.94-4.9c.26-.28 0-.83-.37-.8H18.4v-2.7c0-3.15.4-3.62-1.25-3.66z' fill='#{url-friendly-colour(lighten($color1, 33%))}' stroke-width='0'/><path d='M7.78 19.66c-.24.02-.44.25-.44.5v2.46h-.06c-1.08 0-1.86-.03-2.4-.03-1.64 0-1.25.43-1.25 3.65v4.47c0 4.26-.56 3.62 3.65 3.62H8.5l-1.3-1.06c-.1-.08-.18-.2-.2-.3-.02-.17.06-.35.2-.45l1.33-1.1H7.28c-.44 0-.72-.3-.72-.7v-4.48c0-.44.28-.72.72-.72h.06v2.5c0 .38.54.63.82.38l4.9-3.93c.25-.18.25-.6 0-.78l-4.9-3.92c-.1-.1-.24-.14-.38-.12zm9.34 2.93c-.54-.02-1.3.02-2.4.02h-1.25l1.3 1.07c.1.07.18.2.2.33.02.16-.06.3-.2.4l-1.33 1.1h1.28c.42 0 .72.28.72.72v4.47c0 .42-.3.72-.72.72h-.1v-2.47c0-.3-.3-.53-.6-.47-.07 0-.14.05-.2.1l-4.9 3.93c-.26.18-.26.6 0 .78l4.9 3.92c.27.25.82 0 .8-.38v-2.5h.1c4.27 0 3.65.67 3.65-3.62v-4.47c0-3.15.4-3.62-1.25-3.66zM10.34 38.66c-.24.02-.44.25-.43.5v2.47H7.3c-1.08 0-1.86-.04-2.4-.04-1.64 0-1.25.43-1.25 3.65v4.47c0 3.66-.23 3.7 2.34 3.66l-1.34-1.1c-.1-.08-.18-.2-.2-.3 0-.17.07-.35.2-.45l1.96-1.6c-.03-.06-.04-.13-.04-.2v-4.48c0-.44.28-.72.72-.72H9.9v2.5c0 .36.5.6.8.38l4.93-3.93c.24-.18.24-.6 0-.78l-4.94-3.92c-.1-.08-.23-.13-.36-.12zm5.63 2.93l1.34 1.1c.1.07.18.2.2.33.02.16-.03.3-.16.4l-1.96 1.6c.02.07.06.13.06.22v4.47c0 .42-.3.72-.72.72h-2.66v-2.47c0-.3-.3-.53-.6-.47-.06.02-.12.05-.18.1l-4.94 3.93c-.24.18-.24.6 0 .78l4.94 3.92c.28.22.78-.02.78-.38v-2.5h2.66c4.27 0 3.65.67 3.65-3.62v-4.47c0-3.66.34-3.7-2.4-3.66zM13.06 57.66c-.23.03-.4.26-.4.5v2.47H7.28c-1.08 0-1.86-.04-2.4-.04-1.64 0-1.25.43-1.25 3.65v4.87l2.93-2.37v-2.5c0-.44.28-.72.72-.72h5.38v2.5c0 .36.5.6.78.38l4.94-3.93c.24-.18.24-.6 0-.78l-4.94-3.92c-.1-.1-.24-.14-.38-.12zm5.3 6.15l-2.92 2.4v2.52c0 .42-.3.72-.72.72h-5.4v-2.47c0-.3-.32-.53-.6-.47-.07.02-.13.05-.2.1L3.6 70.52c-.25.18-.25.6 0 .78l4.93 3.92c.28.22.78-.02.78-.38v-2.5h5.42c4.27 0 3.65.67 3.65-3.62v-4.47-.44zM19.25 78.8c-.1.03-.2.1-.28.17l-.9.9c-.44-.3-1.36-.25-3.35-.25H7.28c-1.08 0-1.86-.03-2.4-.03-1.64 0-1.25.43-1.25 3.65v.7l2.93.3v-1c0-.44.28-.72.72-.72h7.44c.2 0 .37.08.5.2l-1.8 1.8c-.25.26-.08.76.27.8l6.27.7c.28.03.56-.25.53-.53l-.7-6.25c0-.27-.3-.48-.55-.44zm-17.2 6.1c-.2.07-.36.3-.33.54l.7 6.25c.02.36.58.55.83.27l.8-.8c.02 0 .04-.02.04 0 .46.24 1.37.17 3.18.17h7.44c4.27 0 3.65.67 3.65-3.62v-.75l-2.93-.3v1.05c0 .42-.3.72-.72.72H7.28c-.15 0-.3-.03-.4-.1L8.8 86.4c.3-.24.1-.8-.27-.84l-6.28-.65h-.2zM4.88 98.6c-1.33 0-1.34.48-1.3 2.3l1.14-1.37c.08-.1.22-.17.34-.2.16 0 .34.08.44.2l1.66 2.03c.04 0 .07-.03.12-.03h7.44c.34 0 .57.2.65.5h-2.43c-.34.05-.53.52-.3.78l3.92 4.95c.18.24.6.24.78 0l3.94-4.94c.22-.27-.02-.76-.37-.77H18.4c.02-3.9.6-3.4-3.66-3.4H7.28c-1.08 0-1.86-.04-2.4-.04zm.15 2.46c-.1.03-.2.1-.28.2l-3.94 4.9c-.2.28.03.77.4.78H3.6c-.02 3.94-.45 3.4 3.66 3.4h7.44c3.65 0 3.74.3 3.7-2.25l-1.1 1.34c-.1.1-.2.17-.32.2-.16 0-.34-.08-.44-.2l-1.65-2.03c-.06.02-.1.04-.18.04H7.28c-.35 0-.57-.2-.66-.5h2.44c.37 0 .63-.5.4-.78l-3.96-4.9c-.1-.15-.3-.23-.47-.2zM4.88 117.6c-1.16 0-1.3.3-1.3 1.56l1.14-1.38c.08-.1.22-.14.34-.16.16 0 .34.04.44.16l2.22 2.75h7c.42 0 .72.28.72.72v.53h-2.6c-.3.1-.43.54-.2.78l3.92 4.9c.18.25.6.25.78 0l3.94-4.9c.22-.28-.02-.77-.37-.78H18.4v-.53c0-4.2.72-3.63-3.66-3.63H7.28c-1.08 0-1.86-.03-2.4-.03zm.1 1.74c-.1.03-.17.1-.23.16L.8 124.44c-.2.28.03.77.4.78H3.6v.5c0 4.26-.55 3.62 3.66 3.62h7.44c1.03 0 1.74.02 2.28 0-.16.02-.34-.03-.44-.15l-2.22-2.76H7.28c-.44 0-.72-.3-.72-.72v-.5h2.5c.37.02.63-.5.4-.78L5.5 119.5c-.12-.15-.34-.22-.53-.16zm12.02 10c1.2-.02 1.4-.25 1.4-1.53l-1.1 1.36c-.07.1-.17.17-.3.18zM5.94 136.6l2.37 2.93h6.42c.42 0 .72.28.72.72v1.25h-2.6c-.3.1-.43.54-.2.78l3.92 4.9c.18.25.6.25.78 0l3.94-4.9c.22-.28-.02-.77-.37-.78H18.4v-1.25c0-4.2.72-3.63-3.66-3.63H7.28c-.6 0-.92-.02-1.34-.03zm-1.72.06c-.4.08-.54.3-.6.75l.6-.74zm.84.93c-.12 0-.24.08-.3.18l-3.95 4.9c-.24.3 0 .83.4.82H3.6v1.22c0 4.26-.55 3.62 3.66 3.62h7.44c.63 0 .97.02 1.4.03l-2.37-2.93H7.28c-.44 0-.72-.3-.72-.72v-1.22h2.5c.4.04.67-.53.4-.8l-3.96-4.92c-.1-.13-.27-.2-.44-.2zm13.28 10.03l-.56.7c.36-.07.5-.3.56-.7zM17.13 155.6c-.55-.02-1.32.03-2.4.03h-8.2l2.38 2.9h5.82c.42 0 .72.28.72.72v1.97H12.9c-.32.06-.48.52-.28.78l3.94 4.94c.2.23.6.22.78-.03l3.94-4.9c.22-.28-.02-.77-.37-.78H18.4v-1.97c0-3.15.4-3.62-1.25-3.66zm-12.1.28c-.1.02-.2.1-.28.18l-3.94 4.9c-.2.3.03.78.4.8H3.6v1.96c0 4.26-.55 3.62 3.66 3.62h8.24l-2.36-2.9H7.28c-.44 0-.72-.3-.72-.72v-1.97h2.5c.37.02.63-.5.4-.78l-3.96-4.9c-.1-.15-.3-.22-.47-.2zM5.13 174.5c-.15 0-.3.07-.38.2L.8 179.6c-.24.27 0 .82.4.8H3.6v2.32c0 4.26-.55 3.62 3.66 3.62h7.94l-2.35-2.9h-5.6c-.43 0-.7-.3-.7-.72v-2.3h2.5c.38.03.66-.54.4-.83l-3.97-4.9c-.1-.13-.23-.2-.38-.2zm12 .1c-.55-.02-1.32.03-2.4.03H6.83l2.35 2.9h5.52c.42 0 .72.28.72.72v2.34h-2.6c-.3.1-.43.53-.2.78l3.92 4.9c.18.24.6.24.78 0l3.94-4.9c.22-.3-.02-.78-.37-.8H18.4v-2.33c0-3.15.4-3.62-1.25-3.66zM4.97 193.16c-.1.03-.17.1-.22.18l-3.94 4.9c-.2.3.03.78.4.8H3.6v2.68c0 4.26-.55 3.62 3.66 3.62h7.66l-2.3-2.84c-.03-.02-.03-.04-.05-.06H7.27c-.44 0-.72-.3-.72-.72v-2.7h2.5c.37.03.63-.48.4-.77l-3.96-4.9c-.12-.17-.34-.25-.53-.2zm12.16.43c-.55-.02-1.32.03-2.4.03H7.1l2.32 2.84.03.06h5.25c.42 0 .72.28.72.72v2.7h-2.5c-.36.02-.56.54-.3.8l3.92 4.9c.18.25.6.25.78 0l3.94-4.9c.26-.28 0-.83-.37-.8H18.4v-2.7c0-3.15.4-3.62-1.25-3.66z' fill='#{url-friendly-colour($color4)}' stroke-width='0'/></svg>");
|
||||
background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='22' height='209'><path d='M4.97 3.16c-.1.03-.17.1-.22.18L.8 8.24c-.2.3.03.78.4.8H3.6v2.68c0 4.26-.55 3.62 3.66 3.62h7.66l-2.3-2.84c-.03-.02-.03-.04-.05-.06H7.27c-.44 0-.72-.3-.72-.72v-2.7h2.5c.37.03.63-.48.4-.77L5.5 3.35c-.12-.17-.34-.25-.53-.2zm12.16.43c-.55-.02-1.32.02-2.4.02H7.1l2.32 2.85.03.06h5.25c.42 0 .72.28.72.72v2.7h-2.5c-.36.02-.56.54-.3.8l3.92 4.9c.18.25.6.25.78 0l3.94-4.9c.26-.28 0-.83-.37-.8H18.4v-2.7c0-3.15.4-3.62-1.25-3.66z' fill='#{url-friendly-colour(lighten($ui-base-color, 33%))}' stroke-width='0'/><path d='M7.78 19.66c-.24.02-.44.25-.44.5v2.46h-.06c-1.08 0-1.86-.03-2.4-.03-1.64 0-1.25.43-1.25 3.65v4.47c0 4.26-.56 3.62 3.65 3.62H8.5l-1.3-1.06c-.1-.08-.18-.2-.2-.3-.02-.17.06-.35.2-.45l1.33-1.1H7.28c-.44 0-.72-.3-.72-.7v-4.48c0-.44.28-.72.72-.72h.06v2.5c0 .38.54.63.82.38l4.9-3.93c.25-.18.25-.6 0-.78l-4.9-3.92c-.1-.1-.24-.14-.38-.12zm9.34 2.93c-.54-.02-1.3.02-2.4.02h-1.25l1.3 1.07c.1.07.18.2.2.33.02.16-.06.3-.2.4l-1.33 1.1h1.28c.42 0 .72.28.72.72v4.47c0 .42-.3.72-.72.72h-.1v-2.47c0-.3-.3-.53-.6-.47-.07 0-.14.05-.2.1l-4.9 3.93c-.26.18-.26.6 0 .78l4.9 3.92c.27.25.82 0 .8-.38v-2.5h.1c4.27 0 3.65.67 3.65-3.62v-4.47c0-3.15.4-3.62-1.25-3.66zM10.34 38.66c-.24.02-.44.25-.43.5v2.47H7.3c-1.08 0-1.86-.04-2.4-.04-1.64 0-1.25.43-1.25 3.65v4.47c0 3.66-.23 3.7 2.34 3.66l-1.34-1.1c-.1-.08-.18-.2-.2-.3 0-.17.07-.35.2-.45l1.96-1.6c-.03-.06-.04-.13-.04-.2v-4.48c0-.44.28-.72.72-.72H9.9v2.5c0 .36.5.6.8.38l4.93-3.93c.24-.18.24-.6 0-.78l-4.94-3.92c-.1-.08-.23-.13-.36-.12zm5.63 2.93l1.34 1.1c.1.07.18.2.2.33.02.16-.03.3-.16.4l-1.96 1.6c.02.07.06.13.06.22v4.47c0 .42-.3.72-.72.72h-2.66v-2.47c0-.3-.3-.53-.6-.47-.06.02-.12.05-.18.1l-4.94 3.93c-.24.18-.24.6 0 .78l4.94 3.92c.28.22.78-.02.78-.38v-2.5h2.66c4.27 0 3.65.67 3.65-3.62v-4.47c0-3.66.34-3.7-2.4-3.66zM13.06 57.66c-.23.03-.4.26-.4.5v2.47H7.28c-1.08 0-1.86-.04-2.4-.04-1.64 0-1.25.43-1.25 3.65v4.87l2.93-2.37v-2.5c0-.44.28-.72.72-.72h5.38v2.5c0 .36.5.6.78.38l4.94-3.93c.24-.18.24-.6 0-.78l-4.94-3.92c-.1-.1-.24-.14-.38-.12zm5.3 6.15l-2.92 2.4v2.52c0 .42-.3.72-.72.72h-5.4v-2.47c0-.3-.32-.53-.6-.47-.07.02-.13.05-.2.1L3.6 70.52c-.25.18-.25.6 0 .78l4.93 3.92c.28.22.78-.02.78-.38v-2.5h5.42c4.27 0 3.65.67 3.65-3.62v-4.47-.44zM19.25 78.8c-.1.03-.2.1-.28.17l-.9.9c-.44-.3-1.36-.25-3.35-.25H7.28c-1.08 0-1.86-.03-2.4-.03-1.64 0-1.25.43-1.25 3.65v.7l2.93.3v-1c0-.44.28-.72.72-.72h7.44c.2 0 .37.08.5.2l-1.8 1.8c-.25.26-.08.76.27.8l6.27.7c.28.03.56-.25.53-.53l-.7-6.25c0-.27-.3-.48-.55-.44zm-17.2 6.1c-.2.07-.36.3-.33.54l.7 6.25c.02.36.58.55.83.27l.8-.8c.02 0 .04-.02.04 0 .46.24 1.37.17 3.18.17h7.44c4.27 0 3.65.67 3.65-3.62v-.75l-2.93-.3v1.05c0 .42-.3.72-.72.72H7.28c-.15 0-.3-.03-.4-.1L8.8 86.4c.3-.24.1-.8-.27-.84l-6.28-.65h-.2zM4.88 98.6c-1.33 0-1.34.48-1.3 2.3l1.14-1.37c.08-.1.22-.17.34-.2.16 0 .34.08.44.2l1.66 2.03c.04 0 .07-.03.12-.03h7.44c.34 0 .57.2.65.5h-2.43c-.34.05-.53.52-.3.78l3.92 4.95c.18.24.6.24.78 0l3.94-4.94c.22-.27-.02-.76-.37-.77H18.4c.02-3.9.6-3.4-3.66-3.4H7.28c-1.08 0-1.86-.04-2.4-.04zm.15 2.46c-.1.03-.2.1-.28.2l-3.94 4.9c-.2.28.03.77.4.78H3.6c-.02 3.94-.45 3.4 3.66 3.4h7.44c3.65 0 3.74.3 3.7-2.25l-1.1 1.34c-.1.1-.2.17-.32.2-.16 0-.34-.08-.44-.2l-1.65-2.03c-.06.02-.1.04-.18.04H7.28c-.35 0-.57-.2-.66-.5h2.44c.37 0 .63-.5.4-.78l-3.96-4.9c-.1-.15-.3-.23-.47-.2zM4.88 117.6c-1.16 0-1.3.3-1.3 1.56l1.14-1.38c.08-.1.22-.14.34-.16.16 0 .34.04.44.16l2.22 2.75h7c.42 0 .72.28.72.72v.53h-2.6c-.3.1-.43.54-.2.78l3.92 4.9c.18.25.6.25.78 0l3.94-4.9c.22-.28-.02-.77-.37-.78H18.4v-.53c0-4.2.72-3.63-3.66-3.63H7.28c-1.08 0-1.86-.03-2.4-.03zm.1 1.74c-.1.03-.17.1-.23.16L.8 124.44c-.2.28.03.77.4.78H3.6v.5c0 4.26-.55 3.62 3.66 3.62h7.44c1.03 0 1.74.02 2.28 0-.16.02-.34-.03-.44-.15l-2.22-2.76H7.28c-.44 0-.72-.3-.72-.72v-.5h2.5c.37.02.63-.5.4-.78L5.5 119.5c-.12-.15-.34-.22-.53-.16zm12.02 10c1.2-.02 1.4-.25 1.4-1.53l-1.1 1.36c-.07.1-.17.17-.3.18zM5.94 136.6l2.37 2.93h6.42c.42 0 .72.28.72.72v1.25h-2.6c-.3.1-.43.54-.2.78l3.92 4.9c.18.25.6.25.78 0l3.94-4.9c.22-.28-.02-.77-.37-.78H18.4v-1.25c0-4.2.72-3.63-3.66-3.63H7.28c-.6 0-.92-.02-1.34-.03zm-1.72.06c-.4.08-.54.3-.6.75l.6-.74zm.84.93c-.12 0-.24.08-.3.18l-3.95 4.9c-.24.3 0 .83.4.82H3.6v1.22c0 4.26-.55 3.62 3.66 3.62h7.44c.63 0 .97.02 1.4.03l-2.37-2.93H7.28c-.44 0-.72-.3-.72-.72v-1.22h2.5c.4.04.67-.53.4-.8l-3.96-4.92c-.1-.13-.27-.2-.44-.2zm13.28 10.03l-.56.7c.36-.07.5-.3.56-.7zM17.13 155.6c-.55-.02-1.32.03-2.4.03h-8.2l2.38 2.9h5.82c.42 0 .72.28.72.72v1.97H12.9c-.32.06-.48.52-.28.78l3.94 4.94c.2.23.6.22.78-.03l3.94-4.9c.22-.28-.02-.77-.37-.78H18.4v-1.97c0-3.15.4-3.62-1.25-3.66zm-12.1.28c-.1.02-.2.1-.28.18l-3.94 4.9c-.2.3.03.78.4.8H3.6v1.96c0 4.26-.55 3.62 3.66 3.62h8.24l-2.36-2.9H7.28c-.44 0-.72-.3-.72-.72v-1.97h2.5c.37.02.63-.5.4-.78l-3.96-4.9c-.1-.15-.3-.22-.47-.2zM5.13 174.5c-.15 0-.3.07-.38.2L.8 179.6c-.24.27 0 .82.4.8H3.6v2.32c0 4.26-.55 3.62 3.66 3.62h7.94l-2.35-2.9h-5.6c-.43 0-.7-.3-.7-.72v-2.3h2.5c.38.03.66-.54.4-.83l-3.97-4.9c-.1-.13-.23-.2-.38-.2zm12 .1c-.55-.02-1.32.03-2.4.03H6.83l2.35 2.9h5.52c.42 0 .72.28.72.72v2.34h-2.6c-.3.1-.43.53-.2.78l3.92 4.9c.18.24.6.24.78 0l3.94-4.9c.22-.3-.02-.78-.37-.8H18.4v-2.33c0-3.15.4-3.62-1.25-3.66zM4.97 193.16c-.1.03-.17.1-.22.18l-3.94 4.9c-.2.3.03.78.4.8H3.6v2.68c0 4.26-.55 3.62 3.66 3.62h7.66l-2.3-2.84c-.03-.02-.03-.04-.05-.06H7.27c-.44 0-.72-.3-.72-.72v-2.7h2.5c.37.03.63-.48.4-.77l-3.96-4.9c-.12-.17-.34-.25-.53-.2zm12.16.43c-.55-.02-1.32.03-2.4.03H7.1l2.32 2.84.03.06h5.25c.42 0 .72.28.72.72v2.7h-2.5c-.36.02-.56.54-.3.8l3.92 4.9c.18.25.6.25.78 0l3.94-4.9c.26-.28 0-.83-.37-.8H18.4v-2.7c0-3.15.4-3.62-1.25-3.66z' fill='#{url-friendly-colour($ui-highlight-color)}' stroke-width='0'/></svg>");
|
||||
}
|
||||
}
|
||||
|
||||
@ -2,7 +2,7 @@
|
||||
h1 {
|
||||
font-size: 24px;
|
||||
line-height: 28px;
|
||||
color: $color3;
|
||||
color: $ui-primary-color;
|
||||
overflow: hidden;
|
||||
font-weight: 500;
|
||||
margin-bottom: 20px;
|
||||
@ -14,7 +14,7 @@
|
||||
|
||||
small {
|
||||
font-weight: 400;
|
||||
color: $color2;
|
||||
color: $ui-secondary-color;
|
||||
}
|
||||
|
||||
img {
|
||||
|
||||
@ -6,11 +6,11 @@
|
||||
}
|
||||
|
||||
.button {
|
||||
background-color: darken($color4, 3%);
|
||||
background-color: darken($ui-highlight-color, 3%);
|
||||
border: 10px none;
|
||||
border-radius: 4px;
|
||||
box-sizing: border-box;
|
||||
color: $color5;
|
||||
color: $primary-text-color;
|
||||
cursor: pointer;
|
||||
display: inline-block;
|
||||
font-family: inherit;
|
||||
@ -32,12 +32,12 @@
|
||||
&:active,
|
||||
&:focus,
|
||||
&:hover {
|
||||
background-color: lighten($color4, 7%);
|
||||
background-color: lighten($ui-highlight-color, 7%);
|
||||
transition: all 200ms ease-out;
|
||||
}
|
||||
|
||||
&:disabled {
|
||||
background-color: $color3;
|
||||
background-color: $ui-primary-color;
|
||||
cursor: default;
|
||||
}
|
||||
|
||||
@ -51,8 +51,8 @@
|
||||
}
|
||||
|
||||
.column-icon {
|
||||
background: lighten($color1, 4%);
|
||||
color: $color3;
|
||||
background: lighten($ui-base-color, 4%);
|
||||
color: $ui-primary-color;
|
||||
cursor: pointer;
|
||||
font-size: 16px;
|
||||
padding: 15px;
|
||||
@ -62,7 +62,7 @@
|
||||
z-index: 3;
|
||||
|
||||
&:hover {
|
||||
color: lighten($color3, 7%);
|
||||
color: lighten($ui-primary-color, 7%);
|
||||
}
|
||||
}
|
||||
|
||||
@ -85,7 +85,7 @@
|
||||
.icon-button {
|
||||
display: inline-block;
|
||||
padding: 0;
|
||||
color: lighten($color1, 26%);
|
||||
color: lighten($ui-base-color, 26%);
|
||||
border: none;
|
||||
background: transparent;
|
||||
cursor: pointer;
|
||||
@ -94,17 +94,17 @@
|
||||
&:hover,
|
||||
&:active,
|
||||
&:focus {
|
||||
color: lighten($color1, 33%);
|
||||
color: lighten($ui-base-color, 33%);
|
||||
transition: color 200ms ease-out;
|
||||
}
|
||||
|
||||
&.disabled {
|
||||
color: lighten($color1, 13%);
|
||||
color: lighten($ui-base-color, 13%);
|
||||
cursor: default;
|
||||
}
|
||||
|
||||
&.active {
|
||||
color: $color4;
|
||||
color: $ui-highlight-color;
|
||||
}
|
||||
|
||||
&::-moz-focus-inner {
|
||||
@ -118,38 +118,38 @@
|
||||
}
|
||||
|
||||
&.inverted {
|
||||
color: lighten($color1, 33%);
|
||||
color: lighten($ui-base-color, 33%);
|
||||
|
||||
&:hover,
|
||||
&:active,
|
||||
&:focus {
|
||||
color: lighten($color1, 26%);
|
||||
color: lighten($ui-base-color, 26%);
|
||||
}
|
||||
|
||||
&.active {
|
||||
color: $color4;
|
||||
color: $ui-highlight-color;
|
||||
}
|
||||
|
||||
&.disabled {
|
||||
color: $color3;
|
||||
color: $ui-primary-color;
|
||||
}
|
||||
}
|
||||
|
||||
&.overlayed {
|
||||
box-sizing: content-box;
|
||||
background: rgba($color8, 0.6);
|
||||
color: rgba($color5, 0.7);
|
||||
background: rgba($base-overlay-background, 0.6);
|
||||
color: rgba($primary-text-color, 0.7);
|
||||
border-radius: 4px;
|
||||
padding: 2px;
|
||||
|
||||
&:hover {
|
||||
background: rgba($color8, 0.9);
|
||||
background: rgba($base-overlay-background, 0.9);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.text-icon-button {
|
||||
color: lighten($color1, 33%);
|
||||
color: lighten($ui-base-color, 33%);
|
||||
border: none;
|
||||
background: transparent;
|
||||
cursor: pointer;
|
||||
@ -163,17 +163,17 @@
|
||||
&:hover,
|
||||
&:active,
|
||||
&:focus {
|
||||
color: lighten($color1, 26%);
|
||||
color: lighten($ui-base-color, 26%);
|
||||
transition: color 200ms ease-out;
|
||||
}
|
||||
|
||||
&.disabled {
|
||||
color: lighten($color1, 13%);
|
||||
color: lighten($ui-base-color, 13%);
|
||||
cursor: default;
|
||||
}
|
||||
|
||||
&.active {
|
||||
color: $color4;
|
||||
color: $ui-highlight-color;
|
||||
}
|
||||
|
||||
&::-moz-focus-inner {
|
||||
@ -188,7 +188,7 @@
|
||||
}
|
||||
|
||||
.dropdown--active .icon-button {
|
||||
color: $color4;
|
||||
color: $ui-highlight-color;
|
||||
}
|
||||
|
||||
.dropdown--active::after {
|
||||
@ -199,7 +199,7 @@
|
||||
height: 0;
|
||||
border-style: solid;
|
||||
border-width: 0 4.5px 7.8px;
|
||||
border-color: transparent transparent $color2;
|
||||
border-color: transparent transparent $ui-secondary-color;
|
||||
bottom: 8px;
|
||||
right: 104px;
|
||||
}
|
||||
@ -218,7 +218,7 @@
|
||||
}
|
||||
|
||||
.lightbox .icon-button {
|
||||
color: $color1;
|
||||
color: $ui-base-color;
|
||||
}
|
||||
|
||||
.compose-form {
|
||||
@ -226,22 +226,22 @@
|
||||
}
|
||||
|
||||
.compose-form__warning {
|
||||
color: darken($color3, 33%);
|
||||
color: darken($ui-secondary-color, 33%);
|
||||
margin-bottom: 15px;
|
||||
background: $color3;
|
||||
box-shadow: 0 2px 6px rgba($color8, 0.3);
|
||||
background: $ui-primary-color;
|
||||
box-shadow: 0 2px 6px rgba($base-shadow-color, 0.3);
|
||||
padding: 8px 10px;
|
||||
border-radius: 4px;
|
||||
font-size: 13px;
|
||||
font-weight: 400;
|
||||
|
||||
strong {
|
||||
color: darken($color3, 33%);
|
||||
color: darken($primary-text-color, 33%);
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
a {
|
||||
color: darken($color3, 33%);
|
||||
color: darken($ui-primary-color, 33%);
|
||||
font-weight: 500;
|
||||
text-decoration: underline;
|
||||
|
||||
@ -254,10 +254,10 @@
|
||||
}
|
||||
|
||||
.compose-form__modifiers {
|
||||
color: $color1;
|
||||
color: $ui-base-color;
|
||||
font-family: inherit;
|
||||
font-size: 14px;
|
||||
background: $color5;
|
||||
background: $simple-background-color;
|
||||
border-radius: 0 0 4px;
|
||||
}
|
||||
|
||||
@ -268,8 +268,8 @@
|
||||
|
||||
.compose-form__buttons {
|
||||
padding: 10px;
|
||||
background: darken($color5, 8%);
|
||||
box-shadow: inset 0 5px 5px rgba($color8, 0.05);
|
||||
background: darken($simple-background-color, 8%);
|
||||
box-shadow: inset 0 5px 5px rgba($base-shadow-color, 0.05);
|
||||
border-radius: 0 0 4px 4px;
|
||||
display: flex;
|
||||
|
||||
@ -319,7 +319,7 @@
|
||||
vertical-align: middle;
|
||||
|
||||
&.with-border {
|
||||
border-top: 1px solid $color1;
|
||||
border-top: 1px solid $ui-base-color;
|
||||
padding-top: 10px;
|
||||
}
|
||||
|
||||
@ -328,16 +328,16 @@
|
||||
vertical-align: middle;
|
||||
margin-bottom: 14px;
|
||||
margin-left: 8px;
|
||||
color: $color3;
|
||||
color: $ui-primary-color;
|
||||
}
|
||||
}
|
||||
|
||||
.compose-form__textarea,
|
||||
.follow-form__input {
|
||||
background: $color5;
|
||||
background: $simple-background-color;
|
||||
|
||||
&:disabled {
|
||||
background: $color2;
|
||||
background: $ui-secondary-color;
|
||||
}
|
||||
}
|
||||
|
||||
@ -345,7 +345,7 @@
|
||||
position: relative;
|
||||
|
||||
.dropdown--active::after {
|
||||
border-color: transparent transparent $color5;
|
||||
border-color: transparent transparent $base-border-color;
|
||||
bottom: -1px;
|
||||
right: 8px;
|
||||
}
|
||||
@ -378,7 +378,7 @@
|
||||
border-radius: 4px 4px 0 0;
|
||||
position: relative;
|
||||
bottom: -2px;
|
||||
background: $color3;
|
||||
background: $ui-primary-color;
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
@ -393,7 +393,7 @@
|
||||
}
|
||||
|
||||
.reply-indicator__display-name {
|
||||
color: $color1;
|
||||
color: $ui-base-color;
|
||||
display: block;
|
||||
max-width: 100%;
|
||||
line-height: 24px;
|
||||
@ -438,14 +438,14 @@
|
||||
}
|
||||
|
||||
a {
|
||||
color: $color2;
|
||||
color: $ui-secondary-color;
|
||||
text-decoration: none;
|
||||
|
||||
&:hover {
|
||||
text-decoration: underline;
|
||||
|
||||
.fa {
|
||||
color: lighten($color1, 40%);
|
||||
color: lighten($ui-base-color, 40%);
|
||||
}
|
||||
}
|
||||
|
||||
@ -460,15 +460,15 @@
|
||||
}
|
||||
|
||||
.fa {
|
||||
color: lighten($color1, 30%);
|
||||
color: lighten($ui-base-color, 30%);
|
||||
}
|
||||
}
|
||||
|
||||
.status__content__spoiler-link {
|
||||
background: lighten($color1, 30%);
|
||||
background: lighten($ui-base-color, 30%);
|
||||
|
||||
&:hover {
|
||||
background: lighten($color1, 33%);
|
||||
background: lighten($ui-base-color, 33%);
|
||||
text-decoration: none;
|
||||
}
|
||||
}
|
||||
@ -477,7 +477,7 @@
|
||||
a.status__content__spoiler-link {
|
||||
display: inline-block;
|
||||
border-radius: 2px;
|
||||
color: lighten($color1, 8%);
|
||||
color: lighten($ui-base-color, 8%);
|
||||
font-weight: 500;
|
||||
font-size: 11px;
|
||||
padding: 0 6px;
|
||||
@ -495,41 +495,41 @@ a.status__content__spoiler-link {
|
||||
padding-left: 68px;
|
||||
position: relative;
|
||||
min-height: 48px;
|
||||
border-bottom: 1px solid lighten($color1, 8%);
|
||||
border-bottom: 1px solid lighten($ui-base-color, 8%);
|
||||
cursor: default;
|
||||
|
||||
&.light {
|
||||
.status__relative-time {
|
||||
color: $color3;
|
||||
color: $ui-primary-color;
|
||||
}
|
||||
|
||||
.status__display-name {
|
||||
color: $color1;
|
||||
color: $ui-base-color;
|
||||
}
|
||||
|
||||
.display-name {
|
||||
strong {
|
||||
color: $color1;
|
||||
color: $ui-base-color;
|
||||
}
|
||||
|
||||
span {
|
||||
color: $color3;
|
||||
color: $ui-primary-color;
|
||||
}
|
||||
}
|
||||
|
||||
.status__content {
|
||||
color: $color1;
|
||||
color: $ui-base-color;
|
||||
|
||||
a {
|
||||
color: $color4;
|
||||
color: $ui-highlight-color;
|
||||
}
|
||||
|
||||
a.status__content__spoiler-link {
|
||||
color: $color5;
|
||||
background: $color3;
|
||||
color: $primary-text-color;
|
||||
background: $ui-primary-color;
|
||||
|
||||
&:hover {
|
||||
background: lighten($color3, 8%);
|
||||
background: lighten($ui-primary-color, 8%);
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -537,11 +537,11 @@ a.status__content__spoiler-link {
|
||||
}
|
||||
|
||||
.status__relative-time {
|
||||
color: lighten($color1, 26%);
|
||||
color: lighten($ui-base-color, 26%);
|
||||
}
|
||||
|
||||
.status__display-name {
|
||||
color: lighten($color1, 26%);
|
||||
color: lighten($ui-base-color, 26%);
|
||||
}
|
||||
|
||||
.status__info .status__display-name {
|
||||
@ -560,11 +560,11 @@ a.status__content__spoiler-link {
|
||||
}
|
||||
|
||||
.status-check-box {
|
||||
border-bottom: 1px solid lighten($color1, 8%);
|
||||
border-bottom: 1px solid lighten($ui-base-color, 8%);
|
||||
display: flex;
|
||||
|
||||
.status__content {
|
||||
background: lighten($color1, 4%);
|
||||
background: lighten($ui-base-color, 4%);
|
||||
flex: 1 1 auto;
|
||||
padding: 10px;
|
||||
}
|
||||
@ -580,14 +580,14 @@ a.status__content__spoiler-link {
|
||||
|
||||
.status__prepend {
|
||||
margin-left: 68px;
|
||||
color: lighten($color1, 26%);
|
||||
color: lighten($ui-base-color, 26%);
|
||||
padding: 8px 0;
|
||||
padding-bottom: 2px;
|
||||
font-size: 14px;
|
||||
position: relative;
|
||||
|
||||
.status__display-name strong {
|
||||
color: lighten($color1, 26%);
|
||||
color: lighten($ui-base-color, 26%);
|
||||
}
|
||||
}
|
||||
|
||||
@ -609,7 +609,7 @@ a.status__content__spoiler-link {
|
||||
}
|
||||
|
||||
.detailed-status {
|
||||
background: lighten($color1, 4%);
|
||||
background: lighten($ui-base-color, 4%);
|
||||
padding: 14px 10px;
|
||||
|
||||
.status__content {
|
||||
@ -625,15 +625,15 @@ a.status__content__spoiler-link {
|
||||
|
||||
.detailed-status__meta {
|
||||
margin-top: 15px;
|
||||
color: lighten($color1, 26%);
|
||||
color: lighten($ui-base-color, 26%);
|
||||
font-size: 14px;
|
||||
line-height: 18px;
|
||||
}
|
||||
|
||||
.detailed-status__action-bar {
|
||||
background: lighten($color1, 4%);
|
||||
border-top: 1px solid lighten($color1, 8%);
|
||||
border-bottom: 1px solid lighten($color1, 8%);
|
||||
background: lighten($ui-base-color, 4%);
|
||||
border-top: 1px solid lighten($ui-base-color, 8%);
|
||||
border-bottom: 1px solid lighten($ui-base-color, 8%);
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
padding: 10px 0;
|
||||
@ -653,22 +653,22 @@ a.status__content__spoiler-link {
|
||||
}
|
||||
|
||||
.reply-indicator__content {
|
||||
color: $color1;
|
||||
color: $ui-base-color;
|
||||
font-size: 14px;
|
||||
|
||||
a {
|
||||
color: lighten($color1, 20%);
|
||||
color: lighten($ui-base-color, 20%);
|
||||
}
|
||||
}
|
||||
|
||||
.account {
|
||||
padding: 10px;
|
||||
border-bottom: 1px solid lighten($color1, 8%);
|
||||
border-bottom: 1px solid lighten($ui-base-color, 8%);
|
||||
|
||||
.account__display-name {
|
||||
flex: 1 1 auto;
|
||||
display: block;
|
||||
color: $color3;
|
||||
color: $ui-primary-color;
|
||||
overflow: hidden;
|
||||
text-decoration: none;
|
||||
font-size: 14px;
|
||||
@ -722,31 +722,31 @@ a.status__content__spoiler-link {
|
||||
|
||||
.account__header {
|
||||
flex: 0 0 auto;
|
||||
background: lighten($color1, 4%);
|
||||
background: lighten($ui-base-color, 4%);
|
||||
text-align: center;
|
||||
background-size: cover;
|
||||
background-position: center;
|
||||
position: relative;
|
||||
|
||||
& > div {
|
||||
background: rgba(lighten($color1, 4%), 0.9);
|
||||
background: rgba(lighten($ui-base-color, 4%), 0.9);
|
||||
}
|
||||
|
||||
.account__header__content {
|
||||
color: $color2;
|
||||
color: $ui-secondary-color;
|
||||
}
|
||||
|
||||
.account__header__display-name {
|
||||
color: $color5;
|
||||
color: $primary-text-color;
|
||||
}
|
||||
|
||||
.account__header__username {
|
||||
color: $color4;
|
||||
color: $ui-highlight-color;
|
||||
}
|
||||
}
|
||||
|
||||
.account__header__content {
|
||||
color: $color3;
|
||||
color: $ui-primary-color;
|
||||
font-size: 14px;
|
||||
font-weight: 400;
|
||||
overflow: hidden;
|
||||
@ -779,8 +779,8 @@ a.status__content__spoiler-link {
|
||||
}
|
||||
|
||||
.account__action-bar {
|
||||
border-top: 1px solid lighten($color1, 8%);
|
||||
border-bottom: 1px solid lighten($color1, 8%);
|
||||
border-top: 1px solid lighten($ui-base-color, 8%);
|
||||
border-bottom: 1px solid lighten($ui-base-color, 8%);
|
||||
line-height: 36px;
|
||||
overflow: hidden;
|
||||
flex: 0 0 auto;
|
||||
@ -816,25 +816,25 @@ a.status__content__spoiler-link {
|
||||
text-decoration: none;
|
||||
overflow: hidden;
|
||||
width: 80px;
|
||||
border-left: 1px solid lighten($color1, 8%);
|
||||
border-left: 1px solid lighten($ui-base-color, 8%);
|
||||
padding: 10px 5px;
|
||||
|
||||
& > span {
|
||||
display: block;
|
||||
text-transform: uppercase;
|
||||
font-size: 11px;
|
||||
color: $color3;
|
||||
color: $ui-primary-color;
|
||||
}
|
||||
|
||||
strong {
|
||||
display: block;
|
||||
font-size: 15px;
|
||||
font-weight: 500;
|
||||
color: $color5;
|
||||
color: $primary-text-color;
|
||||
}
|
||||
|
||||
abbr {
|
||||
color: lighten($color1, 26%);
|
||||
color: lighten($ui-base-color, 26%);
|
||||
}
|
||||
}
|
||||
|
||||
@ -874,7 +874,7 @@ a.status__content__spoiler-link {
|
||||
.status__display-name,
|
||||
.account__display-name {
|
||||
strong {
|
||||
color: $color5;
|
||||
color: $primary-text-color;
|
||||
}
|
||||
|
||||
&.muted {
|
||||
@ -903,7 +903,7 @@ a.status__content__spoiler-link {
|
||||
}
|
||||
|
||||
.detailed-status__display-name {
|
||||
color: $color2;
|
||||
color: $ui-secondary-color;
|
||||
display: block;
|
||||
line-height: 24px;
|
||||
margin-bottom: 15px;
|
||||
@ -916,7 +916,7 @@ a.status__content__spoiler-link {
|
||||
|
||||
strong {
|
||||
font-size: 16px;
|
||||
color: $color5;
|
||||
color: $primary-text-color;
|
||||
}
|
||||
}
|
||||
|
||||
@ -936,11 +936,11 @@ a.status__content__spoiler-link {
|
||||
.muted {
|
||||
.status__content p,
|
||||
.status__content a {
|
||||
color: lighten($color1, 26%);
|
||||
color: lighten($ui-base-color, 26%);
|
||||
}
|
||||
|
||||
.status__display-name strong {
|
||||
color: lighten($color1, 26%);
|
||||
color: lighten($ui-base-color, 26%);
|
||||
}
|
||||
|
||||
.status__avatar {
|
||||
@ -948,11 +948,11 @@ a.status__content__spoiler-link {
|
||||
}
|
||||
|
||||
a.status__content__spoiler-link {
|
||||
background: lighten($color1, 26%);
|
||||
color: lighten($color1, 4%);
|
||||
background: lighten($ui-base-color, 26%);
|
||||
color: lighten($ui-base-color, 4%);
|
||||
|
||||
&:hover {
|
||||
background: lighten($color1, 29%);
|
||||
background: lighten($ui-base-color, 29%);
|
||||
text-decoration: none;
|
||||
}
|
||||
}
|
||||
@ -963,12 +963,12 @@ a.status__content__spoiler-link {
|
||||
padding: 8px 0;
|
||||
padding-bottom: 0;
|
||||
cursor: default;
|
||||
color: $color3;
|
||||
color: $ui-primary-color;
|
||||
font-size: 15px;
|
||||
position: relative;
|
||||
|
||||
.fa {
|
||||
color: $color4;
|
||||
color: $ui-highlight-color;
|
||||
}
|
||||
}
|
||||
|
||||
@ -977,12 +977,12 @@ a.status__content__spoiler-link {
|
||||
position: absolute;
|
||||
|
||||
.star-icon {
|
||||
color: $color10;
|
||||
color: $gold-star;
|
||||
}
|
||||
}
|
||||
|
||||
.star-icon.active {
|
||||
color: $color10;
|
||||
color: $gold-star;
|
||||
}
|
||||
|
||||
.notification__display-name {
|
||||
@ -991,7 +991,7 @@ a.status__content__spoiler-link {
|
||||
text-decoration: none;
|
||||
|
||||
&:hover {
|
||||
color: $color5;
|
||||
color: $primary-text-color;
|
||||
text-decoration: underline;
|
||||
}
|
||||
}
|
||||
@ -1033,10 +1033,10 @@ a.status__content__spoiler-link {
|
||||
display: flex;
|
||||
flex-shrink: 0;
|
||||
cursor: default;
|
||||
color: $color3;
|
||||
color: $ui-primary-color;
|
||||
|
||||
strong {
|
||||
color: $color5;
|
||||
color: $primary-text-color;
|
||||
}
|
||||
|
||||
.permalink {
|
||||
@ -1069,7 +1069,7 @@ a.status__content__spoiler-link {
|
||||
}
|
||||
|
||||
.dropdown__sep {
|
||||
border-bottom: 1px solid darken($color2, 8%);
|
||||
border-bottom: 1px solid darken($ui-secondary-color, 8%);
|
||||
margin: 5px 7px 6px;
|
||||
padding-top: 1px;
|
||||
}
|
||||
@ -1084,10 +1084,10 @@ a.status__content__spoiler-link {
|
||||
|
||||
& > ul {
|
||||
list-style: none;
|
||||
background: $color2;
|
||||
background: $ui-secondary-color;
|
||||
padding: 4px 0;
|
||||
border-radius: 4px;
|
||||
box-shadow: 0 0 15px rgba($color8, 0.4);
|
||||
box-shadow: 0 0 15px rgba($base-shadow-color, 0.4);
|
||||
min-width: 140px;
|
||||
position: relative;
|
||||
}
|
||||
@ -1109,8 +1109,8 @@ a.status__content__spoiler-link {
|
||||
padding: 4px 14px;
|
||||
box-sizing: border-box;
|
||||
text-decoration: none;
|
||||
background: $color2;
|
||||
color: $color1;
|
||||
background: $ui-secondary-color;
|
||||
color: $ui-base-color;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
@ -1120,8 +1120,8 @@ a.status__content__spoiler-link {
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background: $color4;
|
||||
color: $color2;
|
||||
background: $ui-highlight-color;
|
||||
color: $ui-secondary-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -1133,7 +1133,7 @@ a.status__content__spoiler-link {
|
||||
.static-content {
|
||||
padding: 10px;
|
||||
padding-top: 20px;
|
||||
color: lighten($color1, 26%);
|
||||
color: lighten($ui-base-color, 26%);
|
||||
|
||||
h1 {
|
||||
font-size: 16px;
|
||||
@ -1171,7 +1171,7 @@ a.status__content__spoiler-link {
|
||||
flex-direction: column;
|
||||
|
||||
> .scrollable {
|
||||
background: $color1;
|
||||
background: $ui-base-color;
|
||||
}
|
||||
}
|
||||
|
||||
@ -1181,7 +1181,7 @@ a.status__content__spoiler-link {
|
||||
flex-direction: column;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: darken($color1, 7%);
|
||||
background: darken($ui-base-color, 7%);
|
||||
}
|
||||
|
||||
.drawer {
|
||||
@ -1197,7 +1197,7 @@ a.status__content__spoiler-link {
|
||||
flex: 1 1 auto;
|
||||
padding: 15px;
|
||||
padding-bottom: 13px;
|
||||
color: $color3;
|
||||
color: $ui-primary-color;
|
||||
text-decoration: none;
|
||||
text-align: center;
|
||||
font-size: 16px;
|
||||
@ -1298,7 +1298,7 @@ a.status__content__spoiler-link {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
background: lighten($color1, 13%);
|
||||
background: lighten($ui-base-color, 13%);
|
||||
box-sizing: border-box;
|
||||
padding: 0;
|
||||
display: flex;
|
||||
@ -1309,12 +1309,12 @@ a.status__content__spoiler-link {
|
||||
height: 100%;
|
||||
|
||||
&.darker {
|
||||
background: $color1;
|
||||
background: $ui-base-color;
|
||||
}
|
||||
}
|
||||
|
||||
.pseudo-drawer {
|
||||
background: lighten($color1, 13%);
|
||||
background: lighten($ui-base-color, 13%);
|
||||
font-size: 13px;
|
||||
text-align: left;
|
||||
}
|
||||
@ -1322,7 +1322,7 @@ a.status__content__spoiler-link {
|
||||
.drawer__header {
|
||||
flex: 0 0 auto;
|
||||
font-size: 16px;
|
||||
background: lighten($color1, 8%);
|
||||
background: lighten($ui-base-color, 8%);
|
||||
margin-bottom: 10px;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
@ -1331,7 +1331,7 @@ a.status__content__spoiler-link {
|
||||
transition: background 100ms ease-in;
|
||||
|
||||
&:hover {
|
||||
background: lighten($color1, 3%);
|
||||
background: lighten($ui-base-color, 3%);
|
||||
transition: background 200ms ease-out;
|
||||
}
|
||||
}
|
||||
@ -1339,7 +1339,7 @@ a.status__content__spoiler-link {
|
||||
|
||||
.tabs-bar {
|
||||
display: flex;
|
||||
background: lighten($color1, 8%);
|
||||
background: lighten($ui-base-color, 8%);
|
||||
flex: 0 0 auto;
|
||||
overflow-y: auto;
|
||||
}
|
||||
@ -1348,12 +1348,12 @@ a.status__content__spoiler-link {
|
||||
display: block;
|
||||
flex: 1 1 auto;
|
||||
padding: 15px 10px;
|
||||
color: $color5;
|
||||
color: $primary-text-color;
|
||||
text-decoration: none;
|
||||
text-align: center;
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
border-bottom: 2px solid lighten($color1, 8%);
|
||||
border-bottom: 2px solid lighten($ui-base-color, 8%);
|
||||
transition: all 200ms linear;
|
||||
|
||||
.fa {
|
||||
@ -1362,14 +1362,14 @@ a.status__content__spoiler-link {
|
||||
}
|
||||
|
||||
&.active {
|
||||
border-bottom: 2px solid $color4;
|
||||
color: $color4;
|
||||
border-bottom: 2px solid $ui-highlight-color;
|
||||
color: $ui-highlight-color;
|
||||
}
|
||||
|
||||
&:hover,
|
||||
&:focus,
|
||||
&:active {
|
||||
background: lighten($color1, 14%);
|
||||
background: lighten($ui-base-color, 14%);
|
||||
transition: all 100ms linear;
|
||||
}
|
||||
|
||||
@ -1402,22 +1402,22 @@ a.status__content__spoiler-link {
|
||||
top: 100%;
|
||||
width: 100%;
|
||||
z-index: 99;
|
||||
box-shadow: 0 0 15px rgba($color8, 0.4);
|
||||
box-shadow: 0 0 15px rgba($base-shadow-color, 0.4);
|
||||
}
|
||||
|
||||
.react-autosuggest__section-title {
|
||||
background: $color3;
|
||||
background: $ui-primary-color;
|
||||
padding: 4px 10px;
|
||||
font-weight: 500;
|
||||
cursor: default;
|
||||
color: $color1;
|
||||
color: $ui-base-color;
|
||||
text-transform: uppercase;
|
||||
font-size: 11px;
|
||||
}
|
||||
|
||||
.react-autosuggest__suggestions-list {
|
||||
background: $color2;
|
||||
color: $color1;
|
||||
background: $ui-secondary-color;
|
||||
color: $ui-base-color;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
@ -1427,8 +1427,8 @@ a.status__content__spoiler-link {
|
||||
}
|
||||
|
||||
.react-autosuggest__suggestion--focused {
|
||||
background: $color4;
|
||||
color: $color5;
|
||||
background: $ui-highlight-color;
|
||||
color: $primary-text-color;
|
||||
}
|
||||
|
||||
.scrollable {
|
||||
@ -1444,8 +1444,8 @@ a.status__content__spoiler-link {
|
||||
}
|
||||
|
||||
.column-back-button {
|
||||
background: lighten($color1, 4%);
|
||||
color: $color4;
|
||||
background: lighten($ui-base-color, 4%);
|
||||
color: $ui-highlight-color;
|
||||
cursor: pointer;
|
||||
flex: 0 0 auto;
|
||||
font-size: 16px;
|
||||
@ -1484,7 +1484,7 @@ a.status__content__spoiler-link {
|
||||
border: 0;
|
||||
padding: 0;
|
||||
user-select: none;
|
||||
-webkit-tap-highlight-color: rgba($color8, 0);
|
||||
-webkit-tap-highlight-color: rgba($base-overlay-background, 0);
|
||||
-webkit-tap-highlight-color: transparent;
|
||||
}
|
||||
|
||||
@ -1510,20 +1510,20 @@ a.status__content__spoiler-link {
|
||||
height: 24px;
|
||||
padding: 0;
|
||||
border-radius: 30px;
|
||||
background-color: $color1;
|
||||
background-color: $ui-base-color;
|
||||
transition: all 0.2s ease;
|
||||
}
|
||||
|
||||
.react-toggle:hover:not(.react-toggle--disabled) .react-toggle-track {
|
||||
background-color: darken($color1, 10%);
|
||||
background-color: darken($ui-base-color, 10%);
|
||||
}
|
||||
|
||||
.react-toggle--checked .react-toggle-track {
|
||||
background-color: $color4;
|
||||
background-color: $ui-highlight-color;
|
||||
}
|
||||
|
||||
.react-toggle--checked:hover:not(.react-toggle--disabled) .react-toggle-track {
|
||||
background-color: lighten($color4, 10%);
|
||||
background-color: lighten($ui-highlight-color, 10%);
|
||||
}
|
||||
|
||||
.react-toggle-track-check {
|
||||
@ -1570,28 +1570,28 @@ a.status__content__spoiler-link {
|
||||
left: 1px;
|
||||
width: 22px;
|
||||
height: 22px;
|
||||
border: 1px solid $color1;
|
||||
border: 1px solid $ui-base-color;
|
||||
border-radius: 50%;
|
||||
background-color: darken($color5, 2%);
|
||||
background-color: darken($simple-background-color, 2%);
|
||||
box-sizing: border-box;
|
||||
transition: all 0.25s ease;
|
||||
}
|
||||
|
||||
.react-toggle--checked .react-toggle-thumb {
|
||||
left: 27px;
|
||||
border-color: $color4;
|
||||
border-color: $ui-highlight-color;
|
||||
}
|
||||
|
||||
.column-link {
|
||||
background: lighten($color1, 8%);
|
||||
color: $color5;
|
||||
background: lighten($ui-base-color, 8%);
|
||||
color: $primary-text-color;
|
||||
display: block;
|
||||
font-size: 16px;
|
||||
padding: 15px;
|
||||
text-decoration: none;
|
||||
|
||||
&:hover {
|
||||
background: lighten($color1, 11%);
|
||||
background: lighten($ui-base-color, 11%);
|
||||
}
|
||||
|
||||
&.hidden-on-mobile {
|
||||
@ -1607,8 +1607,8 @@ a.status__content__spoiler-link {
|
||||
}
|
||||
|
||||
.column-subheading {
|
||||
background: $color1;
|
||||
color: lighten($color1, 26%);
|
||||
background: $ui-base-color;
|
||||
color: lighten($ui-base-color, 26%);
|
||||
padding: 8px 20px;
|
||||
font-size: 12px;
|
||||
font-weight: 500;
|
||||
@ -1627,7 +1627,7 @@ a.status__content__spoiler-link {
|
||||
box-sizing: border-box;
|
||||
width: 100%;
|
||||
margin: 0;
|
||||
color: $color1;
|
||||
color: $ui-base-color;
|
||||
padding: 10px;
|
||||
font-family: inherit;
|
||||
font-size: 14px;
|
||||
@ -1650,7 +1650,7 @@ a.status__content__spoiler-link {
|
||||
|
||||
.autosuggest-textarea__textarea {
|
||||
min-height: 100px;
|
||||
background: $color5;
|
||||
background: $simple-background-color;
|
||||
border-radius: 4px 4px 0 0;
|
||||
padding-bottom: 0;
|
||||
padding-right: 10px + 22px;
|
||||
@ -1667,9 +1667,9 @@ a.status__content__spoiler-link {
|
||||
top: 100%;
|
||||
width: 100%;
|
||||
z-index: 99;
|
||||
box-shadow: 0 0 15px rgba($color8, 0.4);
|
||||
background: $color2;
|
||||
color: $color1;
|
||||
box-shadow: 0 0 15px rgba($base-shadow-color, 0.4);
|
||||
background: $ui-secondary-color;
|
||||
color: $ui-base-color;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
@ -1678,12 +1678,12 @@ a.status__content__spoiler-link {
|
||||
cursor: pointer;
|
||||
|
||||
&:hover {
|
||||
background: darken($color2, 10%);
|
||||
background: darken($ui-secondary-color, 10%);
|
||||
}
|
||||
|
||||
&.selected {
|
||||
background: $color4;
|
||||
color: $color5;
|
||||
background: $ui-highlight-color;
|
||||
color: $base-border-color;
|
||||
}
|
||||
}
|
||||
|
||||
@ -1718,7 +1718,7 @@ a.status__content__spoiler-link {
|
||||
}
|
||||
|
||||
.character-counter--over {
|
||||
color: $color9;
|
||||
color: $warning-red;
|
||||
}
|
||||
|
||||
.getting-started__wrapper {
|
||||
@ -1732,19 +1732,19 @@ a.status__content__spoiler-link {
|
||||
flex: 1 0 auto;
|
||||
|
||||
p {
|
||||
color: $color2;
|
||||
color: $ui-secondary-color;
|
||||
}
|
||||
|
||||
a {
|
||||
color: lighten($color1, 26%);
|
||||
color: lighten($ui-base-color, 26%);
|
||||
}
|
||||
}
|
||||
|
||||
.setting-text {
|
||||
color: $color3;
|
||||
color: $ui-primary-color;
|
||||
background: transparent;
|
||||
border: none;
|
||||
border-bottom: 2px solid $color3;
|
||||
border-bottom: 2px solid $ui-primary-color;
|
||||
box-sizing: border-box;
|
||||
display: block;
|
||||
font-family: inherit;
|
||||
@ -1754,8 +1754,8 @@ a.status__content__spoiler-link {
|
||||
|
||||
&:focus,
|
||||
&:active {
|
||||
color: $color5;
|
||||
border-bottom-color: $color4;
|
||||
color: $primary-text-color;
|
||||
border-bottom-color: $ui-highlight-color;
|
||||
}
|
||||
|
||||
@media screen and (max-width: 600px) {
|
||||
@ -1787,15 +1787,15 @@ button.icon-button.active i.fa-retweet {
|
||||
display: flex;
|
||||
cursor: pointer;
|
||||
font-size: 14px;
|
||||
border: 1px solid lighten($color1, 8%);
|
||||
border: 1px solid lighten($ui-base-color, 8%);
|
||||
border-radius: 4px;
|
||||
color: lighten($color1, 26%);
|
||||
color: lighten($ui-base-color, 26%);
|
||||
margin-top: 14px;
|
||||
text-decoration: none;
|
||||
overflow: hidden;
|
||||
|
||||
&:hover {
|
||||
background: lighten($color1, 8%);
|
||||
background: lighten($ui-base-color, 8%);
|
||||
}
|
||||
}
|
||||
|
||||
@ -1847,7 +1847,7 @@ button.icon-button.active i.fa-retweet {
|
||||
display: block;
|
||||
font-weight: 500;
|
||||
margin-bottom: 5px;
|
||||
color: $color3;
|
||||
color: $ui-primary-color;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
@ -1860,7 +1860,7 @@ button.icon-button.active i.fa-retweet {
|
||||
}
|
||||
|
||||
.status-card__description {
|
||||
color: $color3;
|
||||
color: $ui-primary-color;
|
||||
}
|
||||
|
||||
.status-card__host {
|
||||
@ -1871,7 +1871,7 @@ button.icon-button.active i.fa-retweet {
|
||||
|
||||
.status-card__image {
|
||||
flex: 0 0 100px;
|
||||
background: lighten($color1, 8%);
|
||||
background: lighten($ui-base-color, 8%);
|
||||
}
|
||||
|
||||
.status-card__image-image {
|
||||
@ -1884,13 +1884,13 @@ button.icon-button.active i.fa-retweet {
|
||||
|
||||
.load-more {
|
||||
display: block;
|
||||
color: lighten($color1, 26%);
|
||||
color: lighten($ui-base-color, 26%);
|
||||
text-align: center;
|
||||
padding: 15px;
|
||||
text-decoration: none;
|
||||
|
||||
&:hover {
|
||||
background: lighten($color1, 2%);
|
||||
background: lighten($ui-base-color, 2%);
|
||||
}
|
||||
}
|
||||
|
||||
@ -1898,8 +1898,8 @@ button.icon-button.active i.fa-retweet {
|
||||
text-align: center;
|
||||
font-size: 16px;
|
||||
font-weight: 500;
|
||||
color: lighten($color1, 16%);
|
||||
background: $color1;
|
||||
color: lighten($ui-base-color, 16%);
|
||||
background: $ui-base-color;
|
||||
cursor: default;
|
||||
display: flex;
|
||||
flex: 1 1 auto;
|
||||
@ -1916,7 +1916,7 @@ button.icon-button.active i.fa-retweet {
|
||||
.column-header {
|
||||
padding: 15px;
|
||||
font-size: 16px;
|
||||
background: lighten($color1, 4%);
|
||||
background: lighten($ui-base-color, 4%);
|
||||
flex: 0 0 auto;
|
||||
cursor: pointer;
|
||||
position: relative;
|
||||
@ -1924,12 +1924,12 @@ button.icon-button.active i.fa-retweet {
|
||||
outline: 0;
|
||||
|
||||
&.active {
|
||||
box-shadow: 0 1px 0 rgba($color4, 0.3);
|
||||
box-shadow: 0 1px 0 rgba($ui-highlight-color, 0.3);
|
||||
}
|
||||
|
||||
&.active .fa {
|
||||
color: $color4;
|
||||
text-shadow: 0 0 10px rgba($color4, 0.4);
|
||||
color: $ui-highlight-color;
|
||||
text-shadow: 0 0 10px rgba($ui-highlight-color, 0.4);
|
||||
}
|
||||
|
||||
&.hidden-on-mobile {
|
||||
@ -1950,7 +1950,7 @@ button.icon-button.active i.fa-retweet {
|
||||
}
|
||||
|
||||
.loading-indicator {
|
||||
color: $color2;
|
||||
color: $ui-secondary-color;
|
||||
font-size: 16px;
|
||||
font-weight: 500;
|
||||
padding-top: 120px;
|
||||
@ -1958,24 +1958,24 @@ button.icon-button.active i.fa-retweet {
|
||||
}
|
||||
|
||||
.collapsable-collapsed {
|
||||
color: $color3;
|
||||
background: lighten($color1, 4%);
|
||||
color: $ui-primary-color;
|
||||
background: lighten($ui-base-color, 4%);
|
||||
}
|
||||
|
||||
.collapsable {
|
||||
color: $color5;
|
||||
background: lighten($color1, 8%);
|
||||
color: $primary-text-color;
|
||||
background: lighten($ui-base-color, 8%);
|
||||
|
||||
&:hover {
|
||||
color: $color5;
|
||||
background: lighten($color1, 8%);
|
||||
color: $primary-text-color;
|
||||
background: lighten($ui-base-color, 8%);
|
||||
}
|
||||
}
|
||||
|
||||
.video-error-cover {
|
||||
align-items: center;
|
||||
background: $color8;
|
||||
color: $color5;
|
||||
background: $base-overlay-background;
|
||||
color: $primary-text-color;
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
@ -1989,8 +1989,8 @@ button.icon-button.active i.fa-retweet {
|
||||
|
||||
.media-spoiler {
|
||||
align-items: center;
|
||||
background: $color8;
|
||||
color: $color5;
|
||||
background: $base-overlay-background;
|
||||
color: $primary-text-color;
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
@ -2015,19 +2015,19 @@ button.icon-button.active i.fa-retweet {
|
||||
.spoiler-button {
|
||||
left: 4px;
|
||||
position: absolute;
|
||||
text-shadow: 0 1px 1px $color8, 1px 0 1px $color8;
|
||||
text-shadow: 0 1px 1px $base-shadow-color, 1px 0 1px $base-shadow-color;
|
||||
top: 4px;
|
||||
z-index: 100;
|
||||
}
|
||||
|
||||
.modal-container--preloader {
|
||||
background: lighten($color1, 8%);
|
||||
background: lighten($ui-base-color, 8%);
|
||||
}
|
||||
|
||||
.account--panel {
|
||||
background: lighten($color1, 4%);
|
||||
border-top: 1px solid lighten($color1, 8%);
|
||||
border-bottom: 1px solid lighten($color1, 8%);
|
||||
background: lighten($ui-base-color, 4%);
|
||||
border-top: 1px solid lighten($ui-base-color, 8%);
|
||||
border-bottom: 1px solid lighten($ui-base-color, 8%);
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
padding: 10px 0;
|
||||
@ -2040,12 +2040,12 @@ button.icon-button.active i.fa-retweet {
|
||||
}
|
||||
|
||||
.column-settings__outer {
|
||||
background: lighten($color1, 8%);
|
||||
background: lighten($ui-base-color, 8%);
|
||||
padding: 15px;
|
||||
}
|
||||
|
||||
.column-settings__section {
|
||||
color: $color3;
|
||||
color: $ui-primary-color;
|
||||
cursor: default;
|
||||
display: block;
|
||||
font-weight: 500;
|
||||
@ -2054,9 +2054,9 @@ button.icon-button.active i.fa-retweet {
|
||||
|
||||
.modal-container__nav {
|
||||
align-items: center;
|
||||
background: rgba($color8, 0.5);
|
||||
background: rgba($base-overlay-background, 0.5);
|
||||
box-sizing: border-box;
|
||||
color: $color5;
|
||||
color: $primary-text-color;
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
font-size: 24px;
|
||||
@ -2075,7 +2075,7 @@ button.icon-button.active i.fa-retweet {
|
||||
}
|
||||
|
||||
.account--follows-info {
|
||||
color: $color5;
|
||||
color: $primary-text-color;
|
||||
}
|
||||
|
||||
.setting-toggle__label {
|
||||
@ -2085,7 +2085,7 @@ button.icon-button.active i.fa-retweet {
|
||||
}
|
||||
|
||||
.setting-toggle {
|
||||
color: $color3;
|
||||
color: $ui-primary-color;
|
||||
display: inline-block;
|
||||
margin-bottom: 14px;
|
||||
margin-left: 8px;
|
||||
@ -2100,14 +2100,14 @@ button.icon-button.active i.fa-retweet {
|
||||
}
|
||||
|
||||
.report__target {
|
||||
border-bottom: 1px solid lighten($color1, 4%);
|
||||
color: $color2;
|
||||
border-bottom: 1px solid lighten($ui-base-color, 4%);
|
||||
color: $ui-secondary-color;
|
||||
flex: 0 0 auto;
|
||||
padding: 10px;
|
||||
|
||||
strong {
|
||||
display: block;
|
||||
color: $color5;
|
||||
color: $primary-text-color;
|
||||
font-weight: 500;
|
||||
}
|
||||
}
|
||||
@ -2125,9 +2125,9 @@ button.icon-button.active i.fa-retweet {
|
||||
background: transparent;
|
||||
box-sizing: border-box;
|
||||
border: 0;
|
||||
border-bottom: 2px solid $color3;
|
||||
border-bottom: 2px solid $ui-primary-color;
|
||||
border-radius: 2px 2px 0 0;
|
||||
color: $color5;
|
||||
color: $primary-text-color;
|
||||
display: block;
|
||||
font-family: inherit;
|
||||
font-size: 14px;
|
||||
@ -2139,8 +2139,8 @@ button.icon-button.active i.fa-retweet {
|
||||
|
||||
&:active,
|
||||
&:focus {
|
||||
border-bottom-color: $color4;
|
||||
background: rgba($color8, 0.1);
|
||||
border-bottom-color: $ui-highlight-color;
|
||||
background: rgba($base-overlay-background, 0.1);
|
||||
}
|
||||
}
|
||||
|
||||
@ -2154,8 +2154,8 @@ button.icon-button.active i.fa-retweet {
|
||||
}
|
||||
|
||||
.empty-column-indicator {
|
||||
color: lighten($color1, 20%);
|
||||
background: $color1;
|
||||
color: lighten($ui-base-color, 20%);
|
||||
background: $ui-base-color;
|
||||
text-align: center;
|
||||
padding: 20px;
|
||||
font-size: 15px;
|
||||
@ -2166,7 +2166,7 @@ button.icon-button.active i.fa-retweet {
|
||||
align-items: center;
|
||||
|
||||
a {
|
||||
color: $color4;
|
||||
color: $ui-highlight-color;
|
||||
text-decoration: none;
|
||||
|
||||
&:hover {
|
||||
@ -2186,7 +2186,7 @@ button.icon-button.active i.fa-retweet {
|
||||
pointer-events: none;
|
||||
height: 28px;
|
||||
z-index: 1;
|
||||
background: radial-gradient(ellipse, rgba($color4, 0.23) 0%, rgba($color4, 0) 60%);
|
||||
background: radial-gradient(ellipse, rgba($ui-highlight-color, 0.23) 0%, rgba($ui-highlight-color, 0) 60%);
|
||||
}
|
||||
|
||||
@keyframes pulse {
|
||||
@ -2207,12 +2207,12 @@ button.icon-button.active i.fa-retweet {
|
||||
.emoji-dialog {
|
||||
width: 245px;
|
||||
height: 270px;
|
||||
background: $color5;
|
||||
background: $simple-background-color;
|
||||
box-sizing: border-box;
|
||||
border-radius: 4px;
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
box-shadow: 0 0 8px rgba($color8, 0.2);
|
||||
box-shadow: 0 0 8px rgba($base-shadow-color, 0.2);
|
||||
|
||||
.emojione {
|
||||
margin: 0;
|
||||
@ -2256,7 +2256,7 @@ button.icon-button.active i.fa-retweet {
|
||||
}
|
||||
|
||||
&.active {
|
||||
border-bottom-color: $color4;
|
||||
border-bottom-color: $ui-highlight-color;
|
||||
|
||||
img,
|
||||
svg {
|
||||
@ -2294,7 +2294,7 @@ button.icon-button.active i.fa-retweet {
|
||||
font-size: 12px;
|
||||
text-transform: uppercase;
|
||||
font-weight: 500;
|
||||
color: darken($color2, 18%);
|
||||
color: darken($ui-secondary-color, 18%);
|
||||
cursor: default;
|
||||
}
|
||||
|
||||
@ -2334,7 +2334,7 @@ button.icon-button.active i.fa-retweet {
|
||||
width: 7px;
|
||||
height: 7px;
|
||||
border-radius: 10px;
|
||||
border: 2px solid $color5;
|
||||
border: 2px solid $base-border-color;
|
||||
top: 2px;
|
||||
left: 2px;
|
||||
}
|
||||
@ -2343,7 +2343,7 @@ button.icon-button.active i.fa-retweet {
|
||||
|
||||
.emoji-search-wrapper {
|
||||
padding: 10px;
|
||||
border-bottom: 1px solid lighten($color2, 4%);
|
||||
border-bottom: 1px solid lighten($ui-secondary-color, 4%);
|
||||
}
|
||||
|
||||
.emoji-search {
|
||||
@ -2353,9 +2353,9 @@ button.icon-button.active i.fa-retweet {
|
||||
font-family: inherit;
|
||||
display: block;
|
||||
width: 100%;
|
||||
background: rgba($color2, 0.3);
|
||||
color: darken($color2, 18%);
|
||||
border: 1px solid $color2;
|
||||
background: rgba($ui-secondary-color, 0.3);
|
||||
color: darken($ui-secondary-color, 18%);
|
||||
border: 1px solid $ui-secondary-color;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
@ -2378,7 +2378,7 @@ button.icon-button.active i.fa-retweet {
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background: lighten($color2, 3%);
|
||||
background: lighten($ui-secondary-color, 3%);
|
||||
|
||||
img,
|
||||
svg {
|
||||
@ -2400,7 +2400,7 @@ button.icon-button.active i.fa-retweet {
|
||||
|
||||
.upload-area {
|
||||
align-items: center;
|
||||
background: rgba($color8, 0.8);
|
||||
background: rgba($base-overlay-background, 0.8);
|
||||
display: flex;
|
||||
height: 100%;
|
||||
justify-content: center;
|
||||
@ -2434,8 +2434,8 @@ button.icon-button.active i.fa-retweet {
|
||||
left: 0;
|
||||
z-index: -1;
|
||||
border-radius: 4px;
|
||||
background: $color1;
|
||||
box-shadow: 0 0 5px rgba($color8, 0.2);
|
||||
background: $ui-base-color;
|
||||
box-shadow: 0 0 5px rgba($base-shadow-color, 0.2);
|
||||
}
|
||||
|
||||
.upload-area__content {
|
||||
@ -2443,16 +2443,16 @@ button.icon-button.active i.fa-retweet {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
color: $color2;
|
||||
color: $ui-secondary-color;
|
||||
font-size: 18px;
|
||||
font-weight: 500;
|
||||
border: 2px dashed lighten($color1, 26%);
|
||||
border: 2px dashed lighten($ui-base-color, 26%);
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
.upload-progress {
|
||||
padding: 10px;
|
||||
color: lighten($color1, 26%);
|
||||
color: lighten($ui-base-color, 26%);
|
||||
overflow: hidden;
|
||||
display: flex;
|
||||
|
||||
@ -2477,7 +2477,7 @@ button.icon-button.active i.fa-retweet {
|
||||
width: 100%;
|
||||
height: 6px;
|
||||
border-radius: 6px;
|
||||
background: lighten($color1, 26%);
|
||||
background: lighten($ui-base-color, 26%);
|
||||
position: relative;
|
||||
margin-top: 5px;
|
||||
}
|
||||
@ -2487,7 +2487,7 @@ button.icon-button.active i.fa-retweet {
|
||||
left: 0;
|
||||
top: 0;
|
||||
height: 6px;
|
||||
background: $color4;
|
||||
background: $ui-highlight-color;
|
||||
border-radius: 6px;
|
||||
}
|
||||
|
||||
@ -2534,34 +2534,34 @@ button.icon-button.active i.fa-retweet {
|
||||
left: 0;
|
||||
top: 27px;
|
||||
width: 230px;
|
||||
background: $color5;
|
||||
background: $simple-background-color;
|
||||
border-radius: 0 4px 4px;
|
||||
z-index: 2;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.privacy-dropdown__option {
|
||||
color: $color1;
|
||||
color: $ui-base-color;
|
||||
padding: 10px;
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
|
||||
&:hover,
|
||||
&.active {
|
||||
background: $color4;
|
||||
color: $color5;
|
||||
background: $ui-highlight-color;
|
||||
color: $primary-text-color;
|
||||
|
||||
.privacy-dropdown__option__content {
|
||||
color: $color5;
|
||||
color: $primary-text-color;
|
||||
|
||||
strong {
|
||||
color: $color5;
|
||||
color: $primary-text-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.active:hover {
|
||||
background: lighten($color4, 4%);
|
||||
background: lighten($ui-highlight-color, 4%);
|
||||
}
|
||||
}
|
||||
|
||||
@ -2574,25 +2574,25 @@ button.icon-button.active i.fa-retweet {
|
||||
|
||||
.privacy-dropdown__option__content {
|
||||
flex: 1 1 auto;
|
||||
color: darken($color3, 24%);
|
||||
color: darken($ui-primary-color, 24%);
|
||||
|
||||
strong {
|
||||
font-weight: 500;
|
||||
display: block;
|
||||
color: $color1;
|
||||
color: $ui-base-color;
|
||||
}
|
||||
}
|
||||
|
||||
.privacy-dropdown.active {
|
||||
.privacy-dropdown__value {
|
||||
background: $color5;
|
||||
background: $simple-background-color;
|
||||
border-radius: 4px 4px 0 0;
|
||||
box-shadow: 0 -4px 4px rgba($color8, 0.1);
|
||||
box-shadow: 0 -4px 4px rgba($base-shadow-color, 0.1);
|
||||
}
|
||||
|
||||
.privacy-dropdown__dropdown {
|
||||
display: block;
|
||||
box-shadow: 2px 4px 6px rgba($color8, 0.1);
|
||||
box-shadow: 2px 4px 6px rgba($base-shadow-color, 0.1);
|
||||
}
|
||||
}
|
||||
|
||||
@ -2602,7 +2602,7 @@ button.icon-button.active i.fa-retweet {
|
||||
|
||||
.search__input {
|
||||
padding-right: 30px;
|
||||
color: $color2;
|
||||
color: $ui-secondary-color;
|
||||
outline: 0;
|
||||
box-sizing: border-box;
|
||||
display: block;
|
||||
@ -2611,8 +2611,8 @@ button.icon-button.active i.fa-retweet {
|
||||
padding: 10px;
|
||||
padding-right: 30px;
|
||||
font-family: inherit;
|
||||
background: $color1;
|
||||
color: $color3;
|
||||
background: $ui-base-color;
|
||||
color: $ui-primary-color;
|
||||
font-size: 14px;
|
||||
margin: 0;
|
||||
|
||||
@ -2627,7 +2627,7 @@ button.icon-button.active i.fa-retweet {
|
||||
}
|
||||
|
||||
&:focus {
|
||||
background: lighten($color1, 4%);
|
||||
background: lighten($ui-base-color, 4%);
|
||||
}
|
||||
|
||||
@media screen and (max-width: 600px) {
|
||||
@ -2647,7 +2647,7 @@ button.icon-button.active i.fa-retweet {
|
||||
font-size: 18px;
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
color: $color2;
|
||||
color: $ui-secondary-color;
|
||||
cursor: default;
|
||||
pointer-events: none;
|
||||
|
||||
@ -2676,15 +2676,15 @@ button.icon-button.active i.fa-retweet {
|
||||
}
|
||||
|
||||
&:hover {
|
||||
color: $color5;
|
||||
color: $primary-text-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.search-results__header {
|
||||
color: lighten($color1, 26%);
|
||||
background: lighten($color1, 2%);
|
||||
border-bottom: 1px solid darken($color1, 4%);
|
||||
color: lighten($ui-base-color, 26%);
|
||||
background: lighten($ui-base-color, 2%);
|
||||
border-bottom: 1px solid darken($ui-base-color, 4%);
|
||||
padding: 15px 10px;
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
@ -2693,13 +2693,13 @@ button.icon-button.active i.fa-retweet {
|
||||
.search-results__hashtag {
|
||||
display: block;
|
||||
padding: 10px;
|
||||
color: $color2;
|
||||
color: $ui-secondary-color;
|
||||
text-decoration: none;
|
||||
|
||||
&:hover,
|
||||
&:active,
|
||||
&:focus {
|
||||
color: lighten($color2, 4%);
|
||||
color: lighten($ui-secondary-color, 4%);
|
||||
text-decoration: underline;
|
||||
}
|
||||
}
|
||||
@ -2712,7 +2712,7 @@ button.icon-button.active i.fa-retweet {
|
||||
bottom: 0;
|
||||
z-index: 9999;
|
||||
opacity: 0;
|
||||
background: rgba($color8, 0.7);
|
||||
background: rgba($base-overlay-background, 0.7);
|
||||
transform: translateZ(0);
|
||||
}
|
||||
|
||||
@ -2759,8 +2759,8 @@ button.icon-button.active i.fa-retweet {
|
||||
}
|
||||
|
||||
.onboarding-modal {
|
||||
background: $color2;
|
||||
color: $color1;
|
||||
background: $ui-secondary-color;
|
||||
color: $ui-base-color;
|
||||
border-radius: 8px;
|
||||
overflow: hidden;
|
||||
display: flex;
|
||||
@ -2810,7 +2810,7 @@ button.icon-button.active i.fa-retweet {
|
||||
|
||||
.onboarding-modal__paginator {
|
||||
flex: 0 0 auto;
|
||||
background: darken($color2, 8%);
|
||||
background: darken($ui-secondary-color, 8%);
|
||||
display: flex;
|
||||
padding: 25px;
|
||||
|
||||
@ -2819,7 +2819,7 @@ button.icon-button.active i.fa-retweet {
|
||||
}
|
||||
|
||||
a {
|
||||
color: darken($color2, 34%);
|
||||
color: darken($ui-secondary-color, 34%);
|
||||
text-decoration: none;
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
@ -2827,12 +2827,12 @@ button.icon-button.active i.fa-retweet {
|
||||
&:hover,
|
||||
&:focus,
|
||||
&:active {
|
||||
color: darken($color2, 38%);
|
||||
color: darken($ui-secondary-color, 38%);
|
||||
}
|
||||
|
||||
&.onboarding-modal__done,
|
||||
&.onboarding-modal__next {
|
||||
color: $color4;
|
||||
color: $ui-highlight-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -2848,17 +2848,17 @@ button.icon-button.active i.fa-retweet {
|
||||
width: 14px;
|
||||
height: 14px;
|
||||
border-radius: 14px;
|
||||
background: darken($color2, 16%);
|
||||
background: darken($ui-secondary-color, 16%);
|
||||
margin: 0 3px;
|
||||
cursor: pointer;
|
||||
|
||||
&:hover {
|
||||
background: darken($color2, 18%);
|
||||
background: darken($ui-secondary-color, 18%);
|
||||
}
|
||||
|
||||
&.active {
|
||||
cursor: default;
|
||||
background: darken($color2, 24%);
|
||||
background: darken($ui-secondary-color, 24%);
|
||||
}
|
||||
}
|
||||
|
||||
@ -2869,23 +2869,23 @@ button.icon-button.active i.fa-retweet {
|
||||
h1 {
|
||||
font-size: 18px;
|
||||
font-weight: 500;
|
||||
color: $color1;
|
||||
color: $ui-base-color;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
a {
|
||||
color: $color4;
|
||||
color: $ui-highlight-color;
|
||||
|
||||
&:hover,
|
||||
&:focus,
|
||||
&:active {
|
||||
color: lighten($color4, 4%);
|
||||
color: lighten($ui-highlight-color, 4%);
|
||||
}
|
||||
}
|
||||
|
||||
p {
|
||||
font-size: 16px;
|
||||
color: lighten($color1, 8%);
|
||||
color: lighten($ui-base-color, 8%);
|
||||
margin-top: 10px;
|
||||
margin-bottom: 10px;
|
||||
|
||||
@ -2895,8 +2895,8 @@ button.icon-button.active i.fa-retweet {
|
||||
|
||||
strong {
|
||||
font-weight: 500;
|
||||
background: $color1;
|
||||
color: $color2;
|
||||
background: $ui-base-color;
|
||||
color: $ui-secondary-color;
|
||||
border-radius: 4px;
|
||||
font-size: 14px;
|
||||
padding: 3px 6px;
|
||||
@ -2937,14 +2937,14 @@ button.icon-button.active i.fa-retweet {
|
||||
}
|
||||
|
||||
.figure {
|
||||
background: darken($color1, 8%);
|
||||
color: $color2;
|
||||
background: darken($ui-base-color, 8%);
|
||||
color: $ui-secondary-color;
|
||||
margin-bottom: 20px;
|
||||
border-radius: 4px;
|
||||
padding: 10px;
|
||||
text-align: center;
|
||||
font-size: 14px;
|
||||
box-shadow: 1px 2px 6px rgba($color8, 0.3);
|
||||
box-shadow: 1px 2px 6px rgba($base-shadow-color, 0.3);
|
||||
|
||||
.onboarding-modal__image {
|
||||
border-radius: 4px;
|
||||
@ -2986,7 +2986,7 @@ button.icon-button.active i.fa-retweet {
|
||||
}
|
||||
|
||||
.column-header {
|
||||
color: $color5;
|
||||
color: $primary-text-color;
|
||||
}
|
||||
}
|
||||
|
||||
@ -3033,8 +3033,8 @@ button.icon-button.active i.fa-retweet {
|
||||
|
||||
.boost-modal,
|
||||
.confirmation-modal {
|
||||
background: lighten($color2, 8%);
|
||||
color: $color1;
|
||||
background: lighten($ui-secondary-color, 8%);
|
||||
color: $ui-base-color;
|
||||
border-radius: 8px;
|
||||
overflow: hidden;
|
||||
max-width: 90vw;
|
||||
@ -3070,14 +3070,14 @@ button.icon-button.active i.fa-retweet {
|
||||
.boost-modal__action-bar,
|
||||
.confirmation-modal__action-bar {
|
||||
display: flex;
|
||||
background: $color2;
|
||||
background: $ui-secondary-color;
|
||||
padding: 10px;
|
||||
line-height: 36px;
|
||||
|
||||
& > div {
|
||||
flex: 1 1 auto;
|
||||
text-align: right;
|
||||
color: lighten($color1, 33%);
|
||||
color: lighten($ui-base-color, 33%);
|
||||
padding-right: 10px;
|
||||
}
|
||||
|
||||
@ -3110,7 +3110,7 @@ button.icon-button.active i.fa-retweet {
|
||||
}
|
||||
|
||||
a {
|
||||
color: darken($color2, 34%);
|
||||
color: darken($ui-secondary-color, 34%);
|
||||
text-decoration: none;
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
@ -3118,7 +3118,7 @@ button.icon-button.active i.fa-retweet {
|
||||
&:hover,
|
||||
&:focus,
|
||||
&:active {
|
||||
color: darken($color2, 38%);
|
||||
color: darken($ui-secondary-color, 38%);
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -3134,7 +3134,7 @@ button.icon-button.active i.fa-retweet {
|
||||
}
|
||||
|
||||
.loading-bar {
|
||||
background-color: $color4;
|
||||
background-color: $ui-highlight-color;
|
||||
height: 3px;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
@ -3144,8 +3144,8 @@ button.icon-button.active i.fa-retweet {
|
||||
.media-gallery__gifv__label {
|
||||
display: block;
|
||||
position: absolute;
|
||||
color: $color5;
|
||||
background: rgba($color8, 0.5);
|
||||
color: $primary-text-color;
|
||||
background: rgba($base-overlay-background, 0.5);
|
||||
bottom: 6px;
|
||||
left: 6px;
|
||||
padding: 2px 6px;
|
||||
@ -3175,7 +3175,7 @@ button.icon-button.active i.fa-retweet {
|
||||
.attachment-list {
|
||||
display: flex;
|
||||
font-size: 14px;
|
||||
border: 1px solid lighten($color1, 8%);
|
||||
border: 1px solid lighten($ui-base-color, 8%);
|
||||
border-radius: 4px;
|
||||
margin-top: 14px;
|
||||
overflow: hidden;
|
||||
@ -3183,10 +3183,10 @@ button.icon-button.active i.fa-retweet {
|
||||
|
||||
.attachment-list__icon {
|
||||
flex: 0 0 auto;
|
||||
color: lighten($color1, 26%);
|
||||
color: lighten($ui-base-color, 26%);
|
||||
padding: 8px 18px;
|
||||
cursor: default;
|
||||
border-right: 1px solid lighten($color1, 8%);
|
||||
border-right: 1px solid lighten($ui-base-color, 8%);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
@ -3213,7 +3213,7 @@ button.icon-button.active i.fa-retweet {
|
||||
|
||||
a {
|
||||
text-decoration: none;
|
||||
color: lighten($color1, 26%);
|
||||
color: lighten($ui-base-color, 26%);
|
||||
font-weight: 500;
|
||||
|
||||
&:hover {
|
||||
@ -3278,7 +3278,7 @@ button.icon-button.active i.fa-retweet {
|
||||
|
||||
/* Status Video Player */
|
||||
.status__video-player {
|
||||
background: $color8;
|
||||
background: $base-overlay-background;
|
||||
box-sizing: border-box;
|
||||
cursor: default; /* May not be needed */
|
||||
margin-top: 8px;
|
||||
@ -3298,18 +3298,18 @@ button.icon-button.active i.fa-retweet {
|
||||
|
||||
.status__video-player-expand,
|
||||
.status__video-player-mute {
|
||||
color: $color5;
|
||||
color: $primary-text-color;
|
||||
opacity: 0.8;
|
||||
position: absolute;
|
||||
right: 4px;
|
||||
text-shadow: 0 1px 1px $color8, 1px 0 1px $color8;
|
||||
text-shadow: 0 1px 1px $base-shadow-color, 1px 0 1px $base-shadow-color;
|
||||
}
|
||||
|
||||
.status__video-player-spoiler {
|
||||
color: $color5;
|
||||
color: $primary-text-color;
|
||||
left: 4px;
|
||||
position: absolute;
|
||||
text-shadow: 0 1px 1px $color8, 1px 0 1px $color8;
|
||||
text-shadow: 0 1px 1px $base-shadow-color, 1px 0 1px $base-shadow-color;
|
||||
top: 4px;
|
||||
z-index: 100;
|
||||
}
|
||||
@ -3333,7 +3333,7 @@ button.icon-button.active i.fa-retweet {
|
||||
|
||||
.media-spoiler-video-play-icon {
|
||||
border-radius: 100px;
|
||||
color: rgba($color5, 0.8);
|
||||
color: rgba($primary-text-color, 0.8);
|
||||
font-size: 36px;
|
||||
left: 50%;
|
||||
padding: 5px;
|
||||
|
||||
@ -32,7 +32,7 @@
|
||||
h1 {
|
||||
display: block;
|
||||
text-align: center;
|
||||
color: $color5;
|
||||
color: $primary-text-color;
|
||||
font-size: 48px;
|
||||
font-weight: 500;
|
||||
|
||||
|
||||
@ -2,7 +2,7 @@
|
||||
text-align: center;
|
||||
margin-top: 30px;
|
||||
font-size: 12px;
|
||||
color: darken($color2, 25%);
|
||||
color: darken($ui-secondary-color, 25%);
|
||||
|
||||
.domain {
|
||||
font-weight: 500;
|
||||
|
||||
@ -16,7 +16,7 @@ code {
|
||||
|
||||
span.hint {
|
||||
display: block;
|
||||
color: $color3;
|
||||
color: $ui-primary-color;
|
||||
font-size: 12px;
|
||||
margin-top: 4px;
|
||||
}
|
||||
@ -51,7 +51,7 @@ code {
|
||||
label {
|
||||
font-family: inherit;
|
||||
font-size: 16px;
|
||||
color: $color5;
|
||||
color: $primary-text-color;
|
||||
display: block;
|
||||
padding-top: 5px;
|
||||
}
|
||||
@ -65,7 +65,7 @@ code {
|
||||
margin-bottom: 5px;
|
||||
font-family: inherit;
|
||||
font-size: 14px;
|
||||
color: $color5;
|
||||
color: $primary-text-color;
|
||||
display: block;
|
||||
width: auto;
|
||||
}
|
||||
@ -76,7 +76,7 @@ code {
|
||||
label {
|
||||
font-family: inherit;
|
||||
font-size: 14px;
|
||||
color: $color5;
|
||||
color: $primary-text-color;
|
||||
display: block;
|
||||
width: auto;
|
||||
}
|
||||
@ -108,11 +108,11 @@ code {
|
||||
background: transparent;
|
||||
box-sizing: border-box;
|
||||
border: 0;
|
||||
border-bottom: 2px solid $color3;
|
||||
border-bottom: 2px solid $ui-primary-color;
|
||||
border-radius: 2px 2px 0 0;
|
||||
padding: 7px 4px;
|
||||
font-size: 16px;
|
||||
color: $color5;
|
||||
color: $primary-text-color;
|
||||
display: block;
|
||||
width: 100%;
|
||||
outline: 0;
|
||||
@ -124,35 +124,35 @@ code {
|
||||
}
|
||||
|
||||
&:focus:invalid {
|
||||
border-bottom-color: $color6;
|
||||
border-bottom-color: $error-value-color;
|
||||
}
|
||||
|
||||
&:required:valid {
|
||||
border-bottom-color: $color7;
|
||||
border-bottom-color: $valid-value-color;
|
||||
}
|
||||
|
||||
&:active,
|
||||
&:focus {
|
||||
border-bottom-color: $color4;
|
||||
background: rgba($color8, 0.1);
|
||||
border-bottom-color: $ui-highlight-color;
|
||||
background: rgba($base-overlay-background, 0.1);
|
||||
}
|
||||
}
|
||||
|
||||
.input.field_with_errors {
|
||||
label {
|
||||
color: $color6;
|
||||
color: $error-value-color;
|
||||
}
|
||||
|
||||
input[type=text],
|
||||
input[type=email],
|
||||
input[type=password] {
|
||||
border-bottom-color: $color6;
|
||||
border-bottom-color: $error-value-color;
|
||||
}
|
||||
|
||||
.error {
|
||||
display: block;
|
||||
font-weight: 500;
|
||||
color: $color6;
|
||||
color: $error-value-color;
|
||||
margin-top: 4px;
|
||||
}
|
||||
}
|
||||
@ -167,8 +167,8 @@ code {
|
||||
width: 100%;
|
||||
border: 0;
|
||||
border-radius: 4px;
|
||||
background: $color4;
|
||||
color: $color5;
|
||||
background: $ui-highlight-color;
|
||||
color: $primary-text-color;
|
||||
font-size: 18px;
|
||||
padding: 10px;
|
||||
text-transform: uppercase;
|
||||
@ -181,26 +181,26 @@ code {
|
||||
margin-bottom: 10px;
|
||||
|
||||
&:hover {
|
||||
background-color: lighten($color4, 5%);
|
||||
background-color: lighten($ui-highlight-color, 5%);
|
||||
}
|
||||
|
||||
&:active,
|
||||
&:focus {
|
||||
position: relative;
|
||||
top: 1px;
|
||||
background-color: darken($color4, 5%);
|
||||
background-color: darken($ui-highlight-color, 5%);
|
||||
}
|
||||
|
||||
&.negative {
|
||||
background: $color6;
|
||||
background: $error-value-color;
|
||||
|
||||
&:hover {
|
||||
background-color: lighten($color6, 5%);
|
||||
background-color: lighten($error-value-color, 5%);
|
||||
}
|
||||
|
||||
&:active,
|
||||
&:focus {
|
||||
background-color: darken($color6, 5%);
|
||||
background-color: darken($error-value-color, 5%);
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -211,12 +211,12 @@ code {
|
||||
}
|
||||
|
||||
.flash-message {
|
||||
background: $color1;
|
||||
color: $color3;
|
||||
background: $ui-base-color;
|
||||
color: $ui-primary-color;
|
||||
border-radius: 4px;
|
||||
padding: 15px 10px;
|
||||
margin-bottom: 30px;
|
||||
box-shadow: 0 0 5px rgba($color8, 0.2);
|
||||
box-shadow: 0 0 5px rgba($base-shadow-color, 0.2);
|
||||
text-align: center;
|
||||
|
||||
strong {
|
||||
@ -229,7 +229,7 @@ code {
|
||||
text-align: center;
|
||||
|
||||
a {
|
||||
color: $color5;
|
||||
color: $primary-text-color;
|
||||
text-decoration: none;
|
||||
|
||||
&:hover {
|
||||
@ -242,7 +242,7 @@ code {
|
||||
.follow-prompt {
|
||||
margin-bottom: 30px;
|
||||
text-align: center;
|
||||
color: $color3;
|
||||
color: $ui-primary-color;
|
||||
|
||||
h2 {
|
||||
font-size: 16px;
|
||||
@ -250,7 +250,7 @@ code {
|
||||
}
|
||||
|
||||
strong {
|
||||
color: $color2;
|
||||
color: $ui-secondary-color;
|
||||
font-weight: 500;
|
||||
}
|
||||
}
|
||||
@ -261,10 +261,10 @@ code {
|
||||
|
||||
.qr-code {
|
||||
flex: 0 0 auto;
|
||||
background: $color5;
|
||||
background: $simple-background-color;
|
||||
padding: 4px;
|
||||
margin-bottom: 20px;
|
||||
box-shadow: 0 0 15px rgba($color8, 0.2);
|
||||
box-shadow: 0 0 15px rgba($base-shadow-color, 0.2);
|
||||
display: inline-block;
|
||||
|
||||
svg {
|
||||
@ -275,7 +275,7 @@ code {
|
||||
|
||||
.qr-alternative {
|
||||
margin-left: 10px;
|
||||
color: $color3;
|
||||
color: $ui-primary-color;
|
||||
|
||||
samp {
|
||||
display: block;
|
||||
@ -296,16 +296,16 @@ code {
|
||||
.warning {
|
||||
max-width: 400px;
|
||||
box-sizing: border-box;
|
||||
background: rgba($color6, 0.5);
|
||||
color: $color5;
|
||||
text-shadow: 1px 1px 0 rgba($color8, 0.3);
|
||||
box-shadow: 0 2px 6px rgba($color8, 0.4);
|
||||
background: rgba($error-value-color, 0.5);
|
||||
color: $primary-text-color;
|
||||
text-shadow: 1px 1px 0 rgba($base-shadow-color, 0.3);
|
||||
box-shadow: 0 2px 6px rgba($base-shadow-color, 0.4);
|
||||
border-radius: 4px;
|
||||
padding: 10px;
|
||||
margin-bottom: 15px;
|
||||
|
||||
a {
|
||||
color: $color5;
|
||||
color: $primary-text-color;
|
||||
text-decoration: underline;
|
||||
|
||||
&:hover,
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
.landing-strip {
|
||||
background: rgba(darken($color1, 7%), 0.8);
|
||||
color: $color3;
|
||||
background: rgba(darken($ui-base-color, 7%), 0.8);
|
||||
color: $ui-primary-color;
|
||||
font-weight: 400;
|
||||
padding: 14px;
|
||||
border-radius: 4px;
|
||||
|
||||
@ -59,31 +59,31 @@ table {
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb {
|
||||
background: lighten($color1, 4%);
|
||||
border: 0px none $color5;
|
||||
background: lighten($ui-base-color, 4%);
|
||||
border: 0px none $base-border-color;
|
||||
border-radius: 50px;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb:hover {
|
||||
background: lighten($color1, 6%);
|
||||
background: lighten($ui-base-color, 6%);
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb:active {
|
||||
background: lighten($color1, 4%);
|
||||
background: lighten($ui-base-color, 4%);
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-track {
|
||||
border: 0px none $color5;
|
||||
border: 0px none $base-border-color;
|
||||
border-radius: 0;
|
||||
background: rgba($color8, 0.1);
|
||||
background: rgba($base-overlay-background, 0.1);
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-track:hover {
|
||||
background: $color1;
|
||||
background: $ui-base-color;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-track:active {
|
||||
background: $color1;
|
||||
background: $ui-base-color;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-corner {
|
||||
|
||||
@ -1,13 +1,13 @@
|
||||
.activity-stream {
|
||||
clear: both;
|
||||
box-shadow: 0 0 15px rgba($color8, 0.2);
|
||||
box-shadow: 0 0 15px rgba($base-shadow-color, 0.2);
|
||||
|
||||
.entry {
|
||||
background: $color5;
|
||||
background: $simple-background-color;
|
||||
|
||||
.detailed-status.light,
|
||||
.status.light {
|
||||
border-bottom: 1px solid $color2;
|
||||
border-bottom: 1px solid $ui-secondary-color;
|
||||
}
|
||||
|
||||
&:last-child {
|
||||
@ -50,7 +50,7 @@
|
||||
font-size: 14px;
|
||||
|
||||
.status__relative-time {
|
||||
color: $color4;
|
||||
color: $ui-primary-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -59,7 +59,7 @@
|
||||
display: block;
|
||||
max-width: 100%;
|
||||
padding-right: 25px;
|
||||
color: $color1;
|
||||
color: $ui-base-color;
|
||||
}
|
||||
|
||||
.status__avatar {
|
||||
@ -89,28 +89,28 @@
|
||||
|
||||
strong {
|
||||
font-weight: 500;
|
||||
color: $color1;
|
||||
color: $ui-base-color;
|
||||
}
|
||||
|
||||
span {
|
||||
font-size: 14px;
|
||||
color: $color4;
|
||||
color: $ui-primary-color;
|
||||
}
|
||||
}
|
||||
|
||||
.status__content {
|
||||
color: $color1;
|
||||
color: $ui-base-color;
|
||||
|
||||
a {
|
||||
color: $color4;
|
||||
color: $ui-highlight-color;
|
||||
}
|
||||
|
||||
a.status__content__spoiler-link {
|
||||
color: $color5;
|
||||
background: $color3;
|
||||
color: $primary-text-color;
|
||||
background: $ui-primary-color;
|
||||
|
||||
&:hover {
|
||||
background: lighten($color3, 8%);
|
||||
background: lighten($ui-primary-color, 8%);
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -131,7 +131,7 @@
|
||||
|
||||
.detailed-status.light {
|
||||
padding: 14px;
|
||||
background: $color5;
|
||||
background: $simple-background-color;
|
||||
cursor: default;
|
||||
|
||||
.detailed-status__display-name {
|
||||
@ -153,12 +153,12 @@
|
||||
|
||||
strong {
|
||||
font-weight: 500;
|
||||
color: $color1;
|
||||
color: $ui-base-color;
|
||||
}
|
||||
|
||||
span {
|
||||
font-size: 14px;
|
||||
color: $color3;
|
||||
color: $ui-primary-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -174,25 +174,25 @@
|
||||
}
|
||||
|
||||
.status__content {
|
||||
color: $color1;
|
||||
color: $ui-base-color;
|
||||
|
||||
a {
|
||||
color: $color4;
|
||||
color: $ui-highlight-color;
|
||||
}
|
||||
|
||||
a.status__content__spoiler-link {
|
||||
color: $color5;
|
||||
background: $color3;
|
||||
color: $primary-text-color;
|
||||
background: $ui-primary-color;
|
||||
|
||||
&:hover {
|
||||
background: lighten($color3, 8%);
|
||||
background: lighten($ui-primary-color, 8%);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.detailed-status__meta {
|
||||
margin-top: 15px;
|
||||
color: $color3;
|
||||
color: $ui-primary-color;
|
||||
font-size: 14px;
|
||||
line-height: 18px;
|
||||
|
||||
@ -291,13 +291,13 @@
|
||||
transform: translate(-50%, -50%);
|
||||
padding: 5px;
|
||||
border-radius: 100px;
|
||||
color: rgba($color5, 0.8);
|
||||
color: rgba($primary-text-color, 0.8);
|
||||
z-index: 1;
|
||||
}
|
||||
}
|
||||
|
||||
.media-spoiler {
|
||||
background: $color3;
|
||||
background: $ui-primary-color;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
cursor: pointer;
|
||||
@ -313,7 +313,7 @@
|
||||
z-index: 2;
|
||||
|
||||
&:hover {
|
||||
background: darken($color3, 5%);
|
||||
background: darken($ui-primary-color, 5%);
|
||||
}
|
||||
|
||||
span {
|
||||
@ -335,7 +335,7 @@
|
||||
padding-left: (48px + 14px * 2);
|
||||
padding-bottom: 0;
|
||||
margin-bottom: -4px;
|
||||
color: $color3;
|
||||
color: $ui-primary-color;
|
||||
font-size: 14px;
|
||||
position: relative;
|
||||
|
||||
@ -345,7 +345,7 @@
|
||||
}
|
||||
|
||||
.status__display-name.muted strong {
|
||||
color: $color3;
|
||||
color: $ui-primary-color;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@ -10,13 +10,13 @@
|
||||
padding: 8px;
|
||||
line-height: 18px;
|
||||
vertical-align: top;
|
||||
border-top: 1px solid $color1;
|
||||
border-top: 1px solid $ui-base-color;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
& > thead > tr > th {
|
||||
vertical-align: bottom;
|
||||
border-bottom: 2px solid $color1;
|
||||
border-bottom: 2px solid $ui-base-color;
|
||||
border-top: 0;
|
||||
font-weight: 500;
|
||||
}
|
||||
@ -27,11 +27,11 @@
|
||||
|
||||
& > tbody > tr:nth-child(odd) > td,
|
||||
& > tbody > tr:nth-child(odd) > th {
|
||||
background: $color1;
|
||||
background: $ui-base-color;
|
||||
}
|
||||
|
||||
a {
|
||||
color: $color4;
|
||||
color: $ui-highlight-color;
|
||||
text-decoration: underline;
|
||||
|
||||
&:hover {
|
||||
@ -53,11 +53,11 @@ a.table-action-link {
|
||||
display: inline-block;
|
||||
margin-right: 5px;
|
||||
padding: 0 10px;
|
||||
color: rgba($color5, 0.7);
|
||||
color: rgba($primary-text-color, 0.7);
|
||||
font-weight: 500;
|
||||
|
||||
&:hover {
|
||||
color: $color5;
|
||||
color: $primary-text-color;
|
||||
}
|
||||
|
||||
i.fa {
|
||||
|
||||
@ -1,10 +1,28 @@
|
||||
$color1: #282c37 !default; // darkest
|
||||
$color2: #d9e1e8 !default; // lightest
|
||||
$color3: #9baec8 !default; // lighter
|
||||
$color4: #2b90d9 !default; // vibrant
|
||||
$color5: #ffffff !default; // white
|
||||
$color6: #df405a !default; // error red
|
||||
$color7: #79bd9a !default; // succ green
|
||||
$color8: #000000 !default; // black
|
||||
$color9: #ff5050 !default; // red
|
||||
$color10: #ca8f04 !default; // dark goldenrod
|
||||
// Commonly used web colors
|
||||
$black: #000000; // Black
|
||||
$white: #ffffff; // White
|
||||
$success-green: #79bd9a; // Padua
|
||||
$error-red: #df405a; // Cerise
|
||||
$warning-red: #ff5050; // Sunset Orange
|
||||
$gold-star: #ca8f04; // Dark Goldenrod
|
||||
|
||||
// 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: #2b90d9; // Summer Sky
|
||||
|
||||
// Variables for defaults in UI
|
||||
$base-shadow-color: $black;
|
||||
$base-overlay-background: $black;
|
||||
$base-border-color: $white;
|
||||
$simple-background-color: $white;
|
||||
$primary-text-color: $white;
|
||||
$valid-value-color: $success-green;
|
||||
$error-value-color: $error-red;
|
||||
|
||||
// Tell UI to use selected colors
|
||||
$ui-base-color: $classic-base-color !default; // Darkest
|
||||
$ui-primary-color: $classic-primary-color !default; // Lighter
|
||||
$ui-secondary-color: $classic-secondary-color !default; // Lightest
|
||||
$ui-highlight-color: $classic-highlight-color !default; // Vibrant
|
||||
|
||||
Loading…
Reference in New Issue
Block a user