miklo
/
soapbox
sforkowany z mirror/soapbox
1
0
Forkuj 0
Kod Zgłoszenia Oczekujące zmiany Packages Projekty Wydania Wiki Aktywność

More CSS fixes

stable/1.0.x
Alex Gleason 2020-06-02 20:12:36 -05:00
rodzic f40fe82c4e
commit f563f6234b
Nie znaleziono w bazie danych klucza dla tego podpisu
ID klucza GPG: 7211D1F99744FBB7
10 zmienionych plików z 61 dodań i 49 usunięć
Pokaż statystyki Ściągnij plik aktualizacji Ściągnij plik porównania Expand all files Collapse all files

4
app/styles/about.scss
Wyświetl plik

@ -625,7 +625,7 @@ $small-breakpoint: 960px;
} }
.static-icon-button { .static-icon-button {
color: #0482d8; color: var(--brand-color);
font-size: 18px; font-size: 18px;
& > span { & > span {
@ -1367,6 +1367,7 @@ $small-breakpoint: 960px;
&:hover, &:hover,
&:focus, &:focus,
&:active { &:active {
color: #fff;
opacity: 0.9; opacity: 0.9;
} }
} }
@ -1703,6 +1704,7 @@ $small-breakpoint: 960px;
.public-layout__top { .public-layout__top {
position: relative; position: relative;
flex: 1;
.header, .header,
.container { .container {

4
app/styles/accounts.scss
Wyświetl plik

@ -118,7 +118,7 @@
.current { .current {
background: var(--foreground-color); background: var(--foreground-color);
border-radius: 100px; border-radius: 100px;
color: var(--inverted-text-color); color: var(--primary-text-color);
cursor: default; cursor: default;
margin: 0 10px; margin: 0 10px;
} }
@ -155,7 +155,7 @@
.disabled { .disabled {
cursor: default; cursor: default;
color: var(--inverted-text-color); color: var(--primary-text-color);
} }
@media screen and (max-width: 700px) { @media screen and (max-width: 700px) {

39
app/styles/components.scss
Wyświetl plik

@ -68,7 +68,7 @@
} }
&.button-alternative { &.button-alternative {
color: var(--inverted-text-color); color: var(--primary-text-color);
background: var(--brand-color); background: var(--brand-color);
&:active, &:active,
@ -575,7 +575,7 @@
.display-name { .display-name {
strong { strong {
color: var(--inverted-text-color); color: var(--primary-text-color);
} }
span { span {
@ -584,7 +584,7 @@
} }
.status__content { .status__content {
color: var(--inverted-text-color); color: var(--primary-text-color);
a { a {
color: var(--highlight-text-color); color: var(--highlight-text-color);
@ -622,7 +622,7 @@
background: transparent; background: transparent;
.icon-button.disabled { .icon-button.disabled {
color: lighten(#0482d8, 13%); color: rgba(var(--brand-color-rgb), 0.2);
} }
} }
} }
@ -724,7 +724,7 @@
width: 14px; width: 14px;
font-size: 12px; font-size: 12px;
font-weight: 500; font-weight: 500;
color: #0482d8; color: var(--brand-color);
} }
} }
} }
@ -1090,7 +1090,7 @@ a.account__display-name {
a.status__content__spoiler-link { a.status__content__spoiler-link {
background: var(--brand-color-med); background: var(--brand-color-med);
color: var(--inverted-text-color); color: var(--primary-text-color);
&:hover { &:hover {
background: var(--brand-color-faint); background: var(--brand-color-faint);
@ -1562,6 +1562,7 @@ a.account__display-name {
font-size: 30px; font-size: 30px;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
transition: 0.2s;
@media screen and (max-width: 895px) { @media screen and (max-width: 895px) {
display: flex; display: flex;
@ -2820,7 +2821,7 @@ a.status-card.compact:hover {
} }
&__option { &__option {
color: var(--inverted-text-color); color: var(--primary-text-color);
border-radius: 4px; border-radius: 4px;
font-size: 14px; font-size: 14px;
@ -3166,6 +3167,7 @@ a.status-card.compact:hover {
} }
.privacy-dropdown__dropdown { .privacy-dropdown__dropdown {
font-size: 14px;
position: absolute; position: absolute;
background: var(--foreground-color); background: var(--foreground-color);
box-shadow: 2px 4px 15px rgba($base-shadow-color, 0.4); box-shadow: 2px 4px 15px rgba($base-shadow-color, 0.4);
@ -3184,14 +3186,14 @@ a.status-card.compact:hover {
} }
.privacy-dropdown__option { .privacy-dropdown__option {
color: var(--inverted-text-color); color: var(--primary-text-color);
padding: 10px; padding: 10px;
cursor: pointer; cursor: pointer;
display: flex; display: flex;
&:hover, &:hover,
&.active { &.active {
background: var(--brand-color); background: var(--brand-color-med);
color: var(--primary-text-color); color: var(--primary-text-color);
outline: 0; outline: 0;
@ -3205,7 +3207,7 @@ a.status-card.compact:hover {
} }
&.active:hover { &.active:hover {
background: var(--brand-color); background: rgba(var(--brand-color-rgb), 0.5);
} }
} }
@ -3223,7 +3225,7 @@ a.status-card.compact:hover {
strong { strong {
font-weight: 500; font-weight: 500;
display: block; display: block;
color: var(--inverted-text-color); color: var(--primary-text-color);
@each $lang in $cjk-langs { @each $lang in $cjk-langs {
&:lang(#{$lang}) { &:lang(#{$lang}) {
@ -3996,14 +3998,12 @@ a.status-card.compact:hover {
.notification__filter-bar, .notification__filter-bar,
.account__section-headline { .account__section-headline {
background: var(--brand-color-faint);
border-bottom: 1px solid var(--brand-color-faint); border-bottom: 1px solid var(--brand-color-faint);
cursor: default; cursor: default;
display: flex; display: flex;
flex-shrink: 0; flex-shrink: 0;
button { button {
background: var(--brand-color-med);
border: 0; border: 0;
margin: 0; margin: 0;
} }
@ -4019,6 +4019,7 @@ a.status-card.compact:hover {
text-align: center; text-align: center;
text-decoration: none; text-decoration: none;
position: relative; position: relative;
background: transparent;
&.active { &.active {
color: var(--primary-text-color); color: var(--primary-text-color);
@ -4035,24 +4036,32 @@ a.status-card.compact:hover {
transform: translateX(-50%); transform: translateX(-50%);
border-style: solid; border-style: solid;
border-width: 0 10px 10px; border-width: 0 10px 10px;
border-color: transparent transparent var(--foreground-color); border-color: transparent transparent var(--brand-color-faint);
} }
&::after { &::after {
bottom: -1px; bottom: -1px;
border-color: transparent transparent var(--foreground-color);
} }
} }
} }
} }
.account__section-headline { .account__section-headline {
background: var(--brand-color-faint);
button, button,
a { a {
flex: none; flex: none;
padding: 18px 15px; padding: 18px 15px;
font-size: 16px; font-size: 16px;
font-weight: 600; font-weight: 600;
&.active {
&::before,
&::after {
border-color: transparent transparent var(--foreground-color);
}
}
} }
} }

6
app/styles/components/compose-form.scss
Wyświetl plik

@ -39,7 +39,7 @@
font-weight: 400; font-weight: 400;
strong { strong {
color: var(--inverted-text-color); color: var(--primary-text-color);
font-weight: 500; font-weight: 500;
@each $lang in $cjk-langs { @each $lang in $cjk-langs {
&:lang(#{$lang}) { &:lang(#{$lang}) {
@ -194,10 +194,10 @@
} }
.compose-form__modifiers { .compose-form__modifiers {
color: var(--inverted-text-color); color: var(--primary-text-color);
font-family: inherit; font-family: inherit;
font-size: 14px; font-size: 14px;
background: var(--foreground-color); background: var(--background-color);
.compose-form__upload-wrapper {overflow: hidden;} .compose-form__upload-wrapper {overflow: hidden;}
.compose-form__uploads-wrapper { .compose-form__uploads-wrapper {

2
app/styles/components/dropdown-menu.scss
Wyświetl plik

@ -135,7 +135,7 @@
box-sizing: border-box; box-sizing: border-box;
text-decoration: none; text-decoration: none;
background: var(--background-color); background: var(--background-color);
color: var(--inverted-text-color); color: var(--primary-text-color);
overflow: hidden; overflow: hidden;
text-overflow: ellipsis; text-overflow: ellipsis;
white-space: nowrap; white-space: nowrap;

12
app/styles/components/modal.scss
Wyświetl plik

@ -183,7 +183,7 @@
.error-modal, .error-modal,
.embed-modal { .embed-modal {
background: var(--background-color); background: var(--background-color);
color: var(--inverted-text-color); color: var(--primary-text-color);
border-radius: 8px; border-radius: 8px;
overflow: hidden; overflow: hidden;
display: flex; display: flex;
@ -260,12 +260,12 @@
&.onboarding-modal__done, &.onboarding-modal__done,
&.onboarding-modal__next { &.onboarding-modal__next {
color: var(--inverted-text-color); color: var(--primary-text-color);
&:hover, &:hover,
&:focus, &:focus,
&:active { &:active {
color: var(--inverted-text-color); color: var(--primary-text-color);
} }
} }
} }
@ -282,7 +282,7 @@
&__label { &__label {
font-weight: 500; font-weight: 500;
color: var(--inverted-text-color); color: var(--primary-text-color);
margin-bottom: 5px; margin-bottom: 5px;
text-transform: uppercase; text-transform: uppercase;
font-size: 12px; font-size: 12px;
@ -464,7 +464,7 @@
box-sizing: border-box; box-sizing: border-box;
width: 100%; width: 100%;
margin: 0; margin: 0;
color: var(--inverted-text-color); color: var(--primary-text-color);
background: #ffffff; background: #ffffff;
padding: 10px; padding: 10px;
font-family: inherit; font-family: inherit;
@ -486,7 +486,7 @@
margin-bottom: 24px; margin-bottom: 24px;
&__label { &__label {
color: var(--inverted-text-color); color: var(--primary-text-color);
font-size: 14px; font-size: 14px;
} }
} }

9
app/styles/components/tabs-bar.scss
Wyświetl plik

@ -118,14 +118,17 @@
height: 34px; height: 34px;
margin-left: 20px; margin-left: 20px;
border-radius: 6px; border-radius: 6px;
background-color: var(--accent-color) !important; background-color: var(--accent-color);
transition: background-color 0.2s;
font-weight: bold; font-weight: bold;
font-size: 16px; font-size: 16px;
transition: 0.2s; transition: 0.2s;
&:hover { &:hover {
box-shadow: inset 0 0 4px rgba(0, 0, 0, 0.2); background-color: rgb(
calc(var(--accent-color-r) + 10),
calc(var(--accent-color-g) + 10),
calc(var(--accent-color-b) + 10)
);
} }
} }

6
app/styles/forms.scss
Wyświetl plik

@ -426,21 +426,21 @@ code {
} }
select { select {
appearance: none;
box-sizing: border-box; box-sizing: border-box;
font-size: 16px; font-size: 16px;
color: var(--primary-text-color); color: var(--primary-text-color);
background: var(--background-color);
display: block; display: block;
width: 100%; width: 100%;
outline: 0; outline: 0;
font-family: inherit; font-family: inherit;
resize: vertical; resize: vertical;
background: var(--foreground-color) url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14.933 18.467' height='19.698' width='15.929'><path d='M3.467 14.967l-3.393-3.5H14.86l-3.392 3.5c-1.866 1.925-3.666 3.5-4 3.5-.335 0-2.135-1.575-4-3.5zm.266-11.234L7.467 0 11.2 3.733l3.733 3.734H0l3.733-3.734z' fill='#{hex-color(var(--brand-color-med))}'/></svg>") no-repeat right 8px center / auto 16px; border: 1px solid var(--highlight-text-color);
border: 1px solid var(--brand-color-faint);
border-radius: 4px; border-radius: 4px;
padding-left: 10px; padding-left: 10px;
padding-right: 30px; padding-right: 30px;
height: 41px; height: 41px;
position: relative;
} }
.label_input { .label_input {

12
app/styles/polls.scss
Wyświetl plik

@ -47,7 +47,7 @@
box-sizing: border-box; box-sizing: border-box;
width: 100%; width: 100%;
font-size: 14px; font-size: 14px;
color: var(--inverted-text-color); color: var(--primary-text-color);
display: block; display: block;
outline: 0; outline: 0;
font-family: inherit; font-family: inherit;
@ -166,8 +166,8 @@
padding: 6px 10px; padding: 6px 10px;
height: auto; height: auto;
line-height: inherit; line-height: inherit;
color: #0482d8; color: var(--brand-color);
border-color: #0482d8; border-color: var(--brand-color);
} }
li { li {
@ -182,20 +182,18 @@
} }
select { select {
appearance: none;
box-sizing: border-box; box-sizing: border-box;
font-size: 14px; font-size: 14px;
color: #0482d8; color: var(--brand-color);
display: inline-block; display: inline-block;
width: auto; width: auto;
outline: 0; outline: 0;
font-family: inherit; font-family: inherit;
background-color: var(--foreground-color); background-color: var(--foreground-color);
background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14.933 18.467' height='19.698' width='15.929'><path d='M3.467 14.967l-3.393-3.5H14.86l-3.392 3.5c-1.866 1.925-3.666 3.5-4 3.5-.335 0-2.135-1.575-4-3.5zm.266-11.234L7.467 0 11.2 3.733l3.733 3.734H0l3.733-3.734z' fill='#{rgba(#0482d8, 0.999)}'/></svg>");
background-repeat: no-repeat; background-repeat: no-repeat;
background-position: right 8px center; background-position: right 8px center;
background-size: auto 16px; background-size: auto 16px;
border: 1px solid #0482d8; border: 1px solid var(--brand-color);
border-radius: 4px; border-radius: 4px;
padding: 6px 10px; padding: 6px 10px;
padding-right: 30px; padding-right: 30px;

16
app/styles/themes.scss
Wyświetl plik

@ -3,11 +3,11 @@ body {
--brand-color: rgb(var(--brand-color-rgb)); --brand-color: rgb(var(--brand-color-rgb));
--brand-color-faint: rgba(var(--brand-color-rgb), 0.1); --brand-color-faint: rgba(var(--brand-color-rgb), 0.1);
--brand-color-med: rgba(var(--brand-color-rgb), 0.2); --brand-color-med: rgba(var(--brand-color-rgb), 0.2);
--accent-color: rgb( --accent-color-r: calc(var(--brand-color-r) + 25);
calc(var(--brand-color-r) + 25), --accent-color-g: calc(var(--brand-color-g) + 25);
calc(var(--brand-color-g) + 25), --accent-color-b: calc(var(--brand-color-b) + 25);
calc(var(--brand-color-b) + 25) --accent-color-rgb: var(--accent-color-r), var(--accent-color-g), var(--accent-color-b);
); --accent-color: rgb(var(--accent-color-rgb));
--primary-text-color-rgb: var(--primary-text-color-r), var(--primary-text-color-g), var(--primary-text-color-b); --primary-text-color-rgb: var(--primary-text-color-r), var(--primary-text-color-g), var(--primary-text-color-b);
--primary-text-color: rgb(var(--primary-text-color-rgb)); --primary-text-color: rgb(var(--primary-text-color-rgb));
--primary-text-color-faint: rgba(var(--primary-text-color-rgb), 0.6); --primary-text-color-faint: rgba(var(--primary-text-color-rgb), 0.6);
@ -49,9 +49,9 @@ body.theme-mode-dark {
--background-color-b: 51; --background-color-b: 51;
--foreground-color: #222222; --foreground-color: #222222;
--highlight-text-color: rgb( --highlight-text-color: rgb(
calc(var(--brand-color-r) + 25), calc(var(--brand-color-r) + 40),
calc(var(--brand-color-g) + 25), calc(var(--brand-color-g) + 40),
calc(var(--brand-color-b) + 25) calc(var(--brand-color-b) + 40)
); );
--brand-color-hicontrast: rgb( --brand-color-hicontrast: rgb(
calc(var(--brand-color-r) + 50), calc(var(--brand-color-r) + 50),