sforkowany z mirror/soapbox
More CSS fixes
Alex Gleason
rodzic
f40fe82c4e
commit
f563f6234b
|
|
@ -625,7 +625,7 @@ $small-breakpoint: 960px;
|
|||
}
|
||||
|
||||
.static-icon-button {
|
||||
color: #0482d8;
|
||||
color: var(--brand-color);
|
||||
font-size: 18px;
|
||||
|
||||
& > span {
|
||||
|
|
@ -1367,6 +1367,7 @@ $small-breakpoint: 960px;
|
|||
&:hover,
|
||||
&:focus,
|
||||
&:active {
|
||||
color: #fff;
|
||||
opacity: 0.9;
|
||||
}
|
||||
}
|
||||
|
|
@ -1703,6 +1704,7 @@ $small-breakpoint: 960px;
|
|||
|
||||
.public-layout__top {
|
||||
position: relative;
|
||||
flex: 1;
|
||||
|
||||
.header,
|
||||
.container {
|
||||
|
|
|
|||
|
|
@ -118,7 +118,7 @@
|
|||
.current {
|
||||
background: var(--foreground-color);
|
||||
border-radius: 100px;
|
||||
color: var(--inverted-text-color);
|
||||
color: var(--primary-text-color);
|
||||
cursor: default;
|
||||
margin: 0 10px;
|
||||
}
|
||||
|
|
@ -155,7 +155,7 @@
|
|||
|
||||
.disabled {
|
||||
cursor: default;
|
||||
color: var(--inverted-text-color);
|
||||
color: var(--primary-text-color);
|
||||
}
|
||||
|
||||
@media screen and (max-width: 700px) {
|
||||
|
|
|
|||
|
|
@ -68,7 +68,7 @@
|
|||
}
|
||||
|
||||
&.button-alternative {
|
||||
color: var(--inverted-text-color);
|
||||
color: var(--primary-text-color);
|
||||
background: var(--brand-color);
|
||||
|
||||
&:active,
|
||||
|
|
@ -575,7 +575,7 @@
|
|||
|
||||
.display-name {
|
||||
strong {
|
||||
color: var(--inverted-text-color);
|
||||
color: var(--primary-text-color);
|
||||
}
|
||||
|
||||
span {
|
||||
|
|
@ -584,7 +584,7 @@
|
|||
}
|
||||
|
||||
.status__content {
|
||||
color: var(--inverted-text-color);
|
||||
color: var(--primary-text-color);
|
||||
|
||||
a {
|
||||
color: var(--highlight-text-color);
|
||||
|
|
@ -622,7 +622,7 @@
|
|||
background: transparent;
|
||||
|
||||
.icon-button.disabled {
|
||||
color: lighten(#0482d8, 13%);
|
||||
color: rgba(var(--brand-color-rgb), 0.2);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -724,7 +724,7 @@
|
|||
width: 14px;
|
||||
font-size: 12px;
|
||||
font-weight: 500;
|
||||
color: #0482d8;
|
||||
color: var(--brand-color);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -1090,7 +1090,7 @@ a.account__display-name {
|
|||
|
||||
a.status__content__spoiler-link {
|
||||
background: var(--brand-color-med);
|
||||
color: var(--inverted-text-color);
|
||||
color: var(--primary-text-color);
|
||||
|
||||
&:hover {
|
||||
background: var(--brand-color-faint);
|
||||
|
|
@ -1562,6 +1562,7 @@ a.account__display-name {
|
|||
font-size: 30px;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
transition: 0.2s;
|
||||
|
||||
@media screen and (max-width: 895px) {
|
||||
display: flex;
|
||||
|
|
@ -2820,7 +2821,7 @@ a.status-card.compact:hover {
|
|||
}
|
||||
|
||||
&__option {
|
||||
color: var(--inverted-text-color);
|
||||
color: var(--primary-text-color);
|
||||
border-radius: 4px;
|
||||
font-size: 14px;
|
||||
|
||||
|
|
@ -3166,6 +3167,7 @@ a.status-card.compact:hover {
|
|||
}
|
||||
|
||||
.privacy-dropdown__dropdown {
|
||||
font-size: 14px;
|
||||
position: absolute;
|
||||
background: var(--foreground-color);
|
||||
box-shadow: 2px 4px 15px rgba($base-shadow-color, 0.4);
|
||||
|
|
@ -3184,14 +3186,14 @@ a.status-card.compact:hover {
|
|||
}
|
||||
|
||||
.privacy-dropdown__option {
|
||||
color: var(--inverted-text-color);
|
||||
color: var(--primary-text-color);
|
||||
padding: 10px;
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
|
||||
&:hover,
|
||||
&.active {
|
||||
background: var(--brand-color);
|
||||
background: var(--brand-color-med);
|
||||
color: var(--primary-text-color);
|
||||
outline: 0;
|
||||
|
||||
|
|
@ -3205,7 +3207,7 @@ a.status-card.compact: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 {
|
||||
font-weight: 500;
|
||||
display: block;
|
||||
color: var(--inverted-text-color);
|
||||
color: var(--primary-text-color);
|
||||
|
||||
@each $lang in $cjk-langs {
|
||||
&:lang(#{$lang}) {
|
||||
|
|
@ -3996,14 +3998,12 @@ a.status-card.compact:hover {
|
|||
|
||||
.notification__filter-bar,
|
||||
.account__section-headline {
|
||||
background: var(--brand-color-faint);
|
||||
border-bottom: 1px solid var(--brand-color-faint);
|
||||
cursor: default;
|
||||
display: flex;
|
||||
flex-shrink: 0;
|
||||
|
||||
button {
|
||||
background: var(--brand-color-med);
|
||||
border: 0;
|
||||
margin: 0;
|
||||
}
|
||||
|
|
@ -4019,6 +4019,7 @@ a.status-card.compact:hover {
|
|||
text-align: center;
|
||||
text-decoration: none;
|
||||
position: relative;
|
||||
background: transparent;
|
||||
|
||||
&.active {
|
||||
color: var(--primary-text-color);
|
||||
|
|
@ -4035,24 +4036,32 @@ a.status-card.compact:hover {
|
|||
transform: translateX(-50%);
|
||||
border-style: solid;
|
||||
border-width: 0 10px 10px;
|
||||
border-color: transparent transparent var(--foreground-color);
|
||||
border-color: transparent transparent var(--brand-color-faint);
|
||||
}
|
||||
|
||||
&::after {
|
||||
bottom: -1px;
|
||||
border-color: transparent transparent var(--foreground-color);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.account__section-headline {
|
||||
background: var(--brand-color-faint);
|
||||
|
||||
button,
|
||||
a {
|
||||
flex: none;
|
||||
padding: 18px 15px;
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
|
||||
&.active {
|
||||
&::before,
|
||||
&::after {
|
||||
border-color: transparent transparent var(--foreground-color);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -39,7 +39,7 @@
|
|||
font-weight: 400;
|
||||
|
||||
strong {
|
||||
color: var(--inverted-text-color);
|
||||
color: var(--primary-text-color);
|
||||
font-weight: 500;
|
||||
@each $lang in $cjk-langs {
|
||||
&:lang(#{$lang}) {
|
||||
|
|
@ -194,10 +194,10 @@
|
|||
}
|
||||
|
||||
.compose-form__modifiers {
|
||||
color: var(--inverted-text-color);
|
||||
color: var(--primary-text-color);
|
||||
font-family: inherit;
|
||||
font-size: 14px;
|
||||
background: var(--foreground-color);
|
||||
background: var(--background-color);
|
||||
.compose-form__upload-wrapper {overflow: hidden;}
|
||||
|
||||
.compose-form__uploads-wrapper {
|
||||
|
|
|
|||
|
|
@ -135,7 +135,7 @@
|
|||
box-sizing: border-box;
|
||||
text-decoration: none;
|
||||
background: var(--background-color);
|
||||
color: var(--inverted-text-color);
|
||||
color: var(--primary-text-color);
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
|
|
|
|||
|
|
@ -183,7 +183,7 @@
|
|||
.error-modal,
|
||||
.embed-modal {
|
||||
background: var(--background-color);
|
||||
color: var(--inverted-text-color);
|
||||
color: var(--primary-text-color);
|
||||
border-radius: 8px;
|
||||
overflow: hidden;
|
||||
display: flex;
|
||||
|
|
@ -260,12 +260,12 @@
|
|||
|
||||
&.onboarding-modal__done,
|
||||
&.onboarding-modal__next {
|
||||
color: var(--inverted-text-color);
|
||||
color: var(--primary-text-color);
|
||||
|
||||
&:hover,
|
||||
&:focus,
|
||||
&:active {
|
||||
color: var(--inverted-text-color);
|
||||
color: var(--primary-text-color);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -282,7 +282,7 @@
|
|||
|
||||
&__label {
|
||||
font-weight: 500;
|
||||
color: var(--inverted-text-color);
|
||||
color: var(--primary-text-color);
|
||||
margin-bottom: 5px;
|
||||
text-transform: uppercase;
|
||||
font-size: 12px;
|
||||
|
|
@ -464,7 +464,7 @@
|
|||
box-sizing: border-box;
|
||||
width: 100%;
|
||||
margin: 0;
|
||||
color: var(--inverted-text-color);
|
||||
color: var(--primary-text-color);
|
||||
background: #ffffff;
|
||||
padding: 10px;
|
||||
font-family: inherit;
|
||||
|
|
@ -486,7 +486,7 @@
|
|||
margin-bottom: 24px;
|
||||
|
||||
&__label {
|
||||
color: var(--inverted-text-color);
|
||||
color: var(--primary-text-color);
|
||||
font-size: 14px;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -118,14 +118,17 @@
|
|||
height: 34px;
|
||||
margin-left: 20px;
|
||||
border-radius: 6px;
|
||||
background-color: var(--accent-color) !important;
|
||||
transition: background-color 0.2s;
|
||||
background-color: var(--accent-color);
|
||||
font-weight: bold;
|
||||
font-size: 16px;
|
||||
transition: 0.2s;
|
||||
|
||||
&: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)
|
||||
);
|
||||
}
|
||||
|
||||
}
|
||||
|
|
|
|||
|
|
@ -426,21 +426,21 @@ code {
|
|||
}
|
||||
|
||||
select {
|
||||
appearance: none;
|
||||
box-sizing: border-box;
|
||||
font-size: 16px;
|
||||
color: var(--primary-text-color);
|
||||
background: var(--background-color);
|
||||
display: block;
|
||||
width: 100%;
|
||||
outline: 0;
|
||||
font-family: inherit;
|
||||
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(--brand-color-faint);
|
||||
border: 1px solid var(--highlight-text-color);
|
||||
border-radius: 4px;
|
||||
padding-left: 10px;
|
||||
padding-right: 30px;
|
||||
height: 41px;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.label_input {
|
||||
|
|
|
|||
|
|
@ -47,7 +47,7 @@
|
|||
box-sizing: border-box;
|
||||
width: 100%;
|
||||
font-size: 14px;
|
||||
color: var(--inverted-text-color);
|
||||
color: var(--primary-text-color);
|
||||
display: block;
|
||||
outline: 0;
|
||||
font-family: inherit;
|
||||
|
|
@ -166,8 +166,8 @@
|
|||
padding: 6px 10px;
|
||||
height: auto;
|
||||
line-height: inherit;
|
||||
color: #0482d8;
|
||||
border-color: #0482d8;
|
||||
color: var(--brand-color);
|
||||
border-color: var(--brand-color);
|
||||
}
|
||||
|
||||
li {
|
||||
|
|
@ -182,20 +182,18 @@
|
|||
}
|
||||
|
||||
select {
|
||||
appearance: none;
|
||||
box-sizing: border-box;
|
||||
font-size: 14px;
|
||||
color: #0482d8;
|
||||
color: var(--brand-color);
|
||||
display: inline-block;
|
||||
width: auto;
|
||||
outline: 0;
|
||||
font-family: inherit;
|
||||
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-position: right 8px center;
|
||||
background-size: auto 16px;
|
||||
border: 1px solid #0482d8;
|
||||
border: 1px solid var(--brand-color);
|
||||
border-radius: 4px;
|
||||
padding: 6px 10px;
|
||||
padding-right: 30px;
|
||||
|
|
|
|||
|
|
@ -3,11 +3,11 @@ body {
|
|||
--brand-color: rgb(var(--brand-color-rgb));
|
||||
--brand-color-faint: rgba(var(--brand-color-rgb), 0.1);
|
||||
--brand-color-med: rgba(var(--brand-color-rgb), 0.2);
|
||||
--accent-color: rgb(
|
||||
calc(var(--brand-color-r) + 25),
|
||||
calc(var(--brand-color-g) + 25),
|
||||
calc(var(--brand-color-b) + 25)
|
||||
);
|
||||
--accent-color-r: calc(var(--brand-color-r) + 25);
|
||||
--accent-color-g: calc(var(--brand-color-g) + 25);
|
||||
--accent-color-b: 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-rgb));
|
||||
--primary-text-color-faint: rgba(var(--primary-text-color-rgb), 0.6);
|
||||
|
|
@ -49,9 +49,9 @@ body.theme-mode-dark {
|
|||
--background-color-b: 51;
|
||||
--foreground-color: #222222;
|
||||
--highlight-text-color: rgb(
|
||||
calc(var(--brand-color-r) + 25),
|
||||
calc(var(--brand-color-g) + 25),
|
||||
calc(var(--brand-color-b) + 25)
|
||||
calc(var(--brand-color-r) + 40),
|
||||
calc(var(--brand-color-g) + 40),
|
||||
calc(var(--brand-color-b) + 40)
|
||||
);
|
||||
--brand-color-hicontrast: rgb(
|
||||
calc(var(--brand-color-r) + 50),
|
||||
|
|
|
|||
Ładowanie…
Reference in New Issue