Merge pull request #2794 from ClearlyClaire/glitch-soc/merge-upstream
Merge upstream changes up to e507d17520
This commit is contained in:
Claire
GitHub
commit
0adf31c007
@ -10,7 +10,7 @@
|
||||
&:active,
|
||||
&:focus {
|
||||
.card__bar {
|
||||
background: lighten($ui-base-color, 8%);
|
||||
background: $ui-base-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -18,7 +18,9 @@
|
||||
&__img {
|
||||
height: 130px;
|
||||
position: relative;
|
||||
background: darken($ui-base-color, 12%);
|
||||
background: $ui-base-color;
|
||||
border: 1px solid var(--background-border-color);
|
||||
border-bottom: none;
|
||||
|
||||
img {
|
||||
display: block;
|
||||
@ -39,7 +41,9 @@
|
||||
display: flex;
|
||||
justify-content: flex-start;
|
||||
align-items: center;
|
||||
background: lighten($ui-base-color, 4%);
|
||||
background: var(--background-color);
|
||||
border: 1px solid var(--background-border-color);
|
||||
border-top: none;
|
||||
|
||||
.avatar {
|
||||
flex: 0 0 auto;
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
@use 'sass:math';
|
||||
|
||||
$no-columns-breakpoint: 600px;
|
||||
$sidebar-width: 240px;
|
||||
$sidebar-width: 300px;
|
||||
$content-width: 840px;
|
||||
|
||||
.admin-wrapper {
|
||||
@ -19,7 +19,7 @@ $content-width: 840px;
|
||||
&__inner {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
background: $ui-base-color;
|
||||
background: var(--background-color);
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
@ -31,7 +31,7 @@ $content-width: 840px;
|
||||
|
||||
&__toggle {
|
||||
display: none;
|
||||
background: darken($ui-base-color, 4%);
|
||||
background: var(--background-color);
|
||||
border-bottom: 1px solid lighten($ui-base-color, 4%);
|
||||
align-items: center;
|
||||
|
||||
@ -96,7 +96,6 @@ $content-width: 840px;
|
||||
|
||||
ul {
|
||||
list-style: none;
|
||||
border-radius: 4px 0 0 4px;
|
||||
overflow: hidden;
|
||||
margin-bottom: 20px;
|
||||
|
||||
@ -105,13 +104,13 @@ $content-width: 840px;
|
||||
}
|
||||
|
||||
a {
|
||||
font-size: 14px;
|
||||
display: block;
|
||||
padding: 15px;
|
||||
color: $darker-text-color;
|
||||
text-decoration: none;
|
||||
transition: all 200ms linear;
|
||||
transition-property: color, background-color;
|
||||
border-radius: 4px 0 0 4px;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
@ -122,19 +121,13 @@ $content-width: 840px;
|
||||
|
||||
&:hover {
|
||||
color: $primary-text-color;
|
||||
background-color: darken($ui-base-color, 5%);
|
||||
transition: all 100ms linear;
|
||||
transition-property: color, background-color;
|
||||
}
|
||||
|
||||
&.selected {
|
||||
border-radius: 4px 0 0;
|
||||
}
|
||||
}
|
||||
|
||||
ul {
|
||||
background: darken($ui-base-color, 4%);
|
||||
border-radius: 0 0 0 4px;
|
||||
background: var(--background-color);
|
||||
margin: 0;
|
||||
|
||||
a {
|
||||
@ -149,16 +142,10 @@ $content-width: 840px;
|
||||
}
|
||||
|
||||
.simple-navigation-active-leaf a {
|
||||
color: $primary-text-color;
|
||||
background-color: $ui-highlight-color;
|
||||
color: $highlight-text-color;
|
||||
border-bottom: 0;
|
||||
border-radius: 0;
|
||||
}
|
||||
}
|
||||
|
||||
& > ul > .simple-navigation-active-leaf a {
|
||||
border-radius: 4px 0 0 4px;
|
||||
}
|
||||
}
|
||||
|
||||
.content-wrapper {
|
||||
@ -292,7 +279,7 @@ $content-width: 840px;
|
||||
color: $darker-text-color;
|
||||
padding-bottom: 8px;
|
||||
margin-bottom: 8px;
|
||||
border-bottom: 1px solid lighten($ui-base-color, 8%);
|
||||
border-bottom: 1px solid var(--background-border-color);
|
||||
}
|
||||
|
||||
h6 {
|
||||
@ -365,7 +352,7 @@ $content-width: 840px;
|
||||
width: 100%;
|
||||
height: 0;
|
||||
border: 0;
|
||||
border-bottom: 1px solid rgba($ui-base-lighter-color, 0.6);
|
||||
border-bottom: 1px solid var(--background-border-color);
|
||||
margin: 20px 0;
|
||||
|
||||
&.spacer {
|
||||
@ -403,14 +390,14 @@ $content-width: 840px;
|
||||
inset-inline-start: 0;
|
||||
bottom: 0;
|
||||
overflow-y: auto;
|
||||
background: $ui-base-color;
|
||||
background: var(--background-color);
|
||||
}
|
||||
}
|
||||
|
||||
ul a,
|
||||
ul ul a {
|
||||
font-size: 16px;
|
||||
border-radius: 0;
|
||||
border-bottom: 1px solid lighten($ui-base-color, 4%);
|
||||
transition: none;
|
||||
|
||||
&:hover {
|
||||
@ -697,8 +684,10 @@ body,
|
||||
line-height: 20px;
|
||||
padding: 15px;
|
||||
padding-inline-start: 15px * 2 + 40px;
|
||||
background: $ui-base-color;
|
||||
border-bottom: 1px solid darken($ui-base-color, 8%);
|
||||
background: var(--background-color);
|
||||
border-right: 1px solid var(--background-border-color);
|
||||
border-left: 1px solid var(--background-border-color);
|
||||
border-bottom: 1px solid var(--background-border-color);
|
||||
position: relative;
|
||||
text-decoration: none;
|
||||
color: $darker-text-color;
|
||||
@ -707,18 +696,13 @@ body,
|
||||
&:first-child {
|
||||
border-top-left-radius: 4px;
|
||||
border-top-right-radius: 4px;
|
||||
border-top: 1px solid var(--background-border-color);
|
||||
}
|
||||
|
||||
&:last-child {
|
||||
border-bottom-left-radius: 4px;
|
||||
border-bottom-right-radius: 4px;
|
||||
border-bottom: 0;
|
||||
}
|
||||
|
||||
&:hover,
|
||||
&:focus,
|
||||
&:active {
|
||||
background: lighten($ui-base-color, 4%);
|
||||
border-bottom: 1px solid var(--background-border-color);
|
||||
}
|
||||
|
||||
&__avatar {
|
||||
@ -758,6 +742,47 @@ body,
|
||||
}
|
||||
}
|
||||
|
||||
.strike-entry {
|
||||
display: block;
|
||||
line-height: 20px;
|
||||
padding: 15px;
|
||||
padding-inline-start: 15px * 2 + 40px;
|
||||
background: var(--background-color);
|
||||
border: 1px solid var(--background-border-color);
|
||||
border-radius: 4px;
|
||||
position: relative;
|
||||
text-decoration: none;
|
||||
color: $darker-text-color;
|
||||
font-size: 14px;
|
||||
margin-bottom: 15px;
|
||||
|
||||
&__avatar {
|
||||
position: absolute;
|
||||
inset-inline-start: 15px;
|
||||
top: 15px;
|
||||
|
||||
.avatar {
|
||||
border-radius: 4px;
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
}
|
||||
}
|
||||
|
||||
&__title {
|
||||
word-wrap: break-word;
|
||||
}
|
||||
|
||||
&__timestamp {
|
||||
color: $dark-text-color;
|
||||
}
|
||||
|
||||
&:hover,
|
||||
&:focus,
|
||||
&:active {
|
||||
background: $ui-base-color;
|
||||
}
|
||||
}
|
||||
|
||||
a.name-tag,
|
||||
.name-tag,
|
||||
a.inline-name-tag,
|
||||
@ -765,6 +790,10 @@ a.inline-name-tag,
|
||||
text-decoration: none;
|
||||
color: $secondary-text-color;
|
||||
|
||||
&:hover {
|
||||
color: $highlight-text-color;
|
||||
}
|
||||
|
||||
.username {
|
||||
font-weight: 500;
|
||||
}
|
||||
@ -844,7 +873,8 @@ a.name-tag,
|
||||
}
|
||||
|
||||
.report-card {
|
||||
background: $ui-base-color;
|
||||
background: var(--background-color);
|
||||
border: 1px solid var(--background-border-color);
|
||||
border-radius: 4px;
|
||||
margin-bottom: 20px;
|
||||
|
||||
@ -856,7 +886,6 @@ a.name-tag,
|
||||
|
||||
.account {
|
||||
padding: 0;
|
||||
border: 0;
|
||||
|
||||
&__avatar-wrapper {
|
||||
margin-inline-start: 0;
|
||||
@ -877,7 +906,7 @@ a.name-tag,
|
||||
&:focus,
|
||||
&:hover,
|
||||
&:active {
|
||||
color: lighten($darker-text-color, 8%);
|
||||
color: $highlight-text-color;
|
||||
}
|
||||
}
|
||||
|
||||
@ -891,11 +920,7 @@ a.name-tag,
|
||||
&__item {
|
||||
display: flex;
|
||||
justify-content: flex-start;
|
||||
border-top: 1px solid darken($ui-base-color, 4%);
|
||||
|
||||
&:hover {
|
||||
background: lighten($ui-base-color, 2%);
|
||||
}
|
||||
border-top: 1px solid var(--background-border-color);
|
||||
|
||||
&__reported-by,
|
||||
&__assigned {
|
||||
@ -918,7 +943,6 @@ a.name-tag,
|
||||
max-width: calc(100% - 300px);
|
||||
|
||||
&__icon {
|
||||
color: $dark-text-color;
|
||||
margin-inline-end: 4px;
|
||||
font-weight: 500;
|
||||
}
|
||||
@ -931,6 +955,10 @@ a.name-tag,
|
||||
padding: 15px;
|
||||
text-decoration: none;
|
||||
color: $darker-text-color;
|
||||
|
||||
&:hover {
|
||||
color: $highlight-text-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -966,14 +994,15 @@ a.name-tag,
|
||||
|
||||
.account__header__fields,
|
||||
.account__header__content {
|
||||
background: lighten($ui-base-color, 8%);
|
||||
background: var(--background-color);
|
||||
border: 1px solid var(--background-border-color);
|
||||
border-radius: 4px;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.account__header__fields {
|
||||
margin: 0;
|
||||
border: 0;
|
||||
border: 1px solid var(--background-border-color);
|
||||
|
||||
a {
|
||||
color: $highlight-text-color;
|
||||
@ -1002,8 +1031,8 @@ a.name-tag,
|
||||
.applications-list__item,
|
||||
.filters-list__item {
|
||||
padding: 15px 0;
|
||||
background: $ui-base-color;
|
||||
border: 1px solid lighten($ui-base-color, 4%);
|
||||
background: var(--background-color);
|
||||
border: 1px solid var(--background-border-color);
|
||||
border-radius: 4px;
|
||||
margin-top: 15px;
|
||||
}
|
||||
@ -1014,13 +1043,13 @@ a.name-tag,
|
||||
|
||||
.announcements-list,
|
||||
.filters-list {
|
||||
border: 1px solid lighten($ui-base-color, 4%);
|
||||
border: 1px solid var(--background-border-color);
|
||||
border-radius: 4px;
|
||||
border-bottom: none;
|
||||
|
||||
&__item {
|
||||
padding: 15px 0;
|
||||
background: $ui-base-color;
|
||||
border-bottom: 1px solid lighten($ui-base-color, 4%);
|
||||
border-bottom: 1px solid var(--background-border-color);
|
||||
|
||||
&__title {
|
||||
padding: 0 15px;
|
||||
@ -1032,6 +1061,10 @@ a.name-tag,
|
||||
text-decoration: none;
|
||||
margin-bottom: 10px;
|
||||
|
||||
&:hover {
|
||||
color: $highlight-text-color;
|
||||
}
|
||||
|
||||
.account-role {
|
||||
vertical-align: middle;
|
||||
}
|
||||
@ -1070,10 +1103,6 @@ a.name-tag,
|
||||
&__permissions {
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
&:last-child {
|
||||
border-bottom: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -1123,7 +1152,7 @@ a.name-tag,
|
||||
|
||||
&__table {
|
||||
&__number {
|
||||
color: $secondary-text-color;
|
||||
color: var(--background-color);
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
@ -1150,7 +1179,7 @@ a.name-tag,
|
||||
|
||||
&__box {
|
||||
box-sizing: border-box;
|
||||
background: $ui-highlight-color;
|
||||
background: var(--background-color);
|
||||
padding: 10px;
|
||||
font-weight: 500;
|
||||
color: $primary-text-color;
|
||||
@ -1172,8 +1201,9 @@ a.name-tag,
|
||||
.sparkline {
|
||||
display: block;
|
||||
text-decoration: none;
|
||||
background: lighten($ui-base-color, 4%);
|
||||
background: var(--background-color);
|
||||
border-radius: 4px;
|
||||
border: 1px solid var(--background-border-color);
|
||||
padding: 0;
|
||||
position: relative;
|
||||
padding-bottom: 55px + 20px;
|
||||
@ -1245,12 +1275,12 @@ a.sparkline {
|
||||
&:hover,
|
||||
&:focus,
|
||||
&:active {
|
||||
background: lighten($ui-base-color, 6%);
|
||||
background: $ui-base-color;
|
||||
}
|
||||
}
|
||||
|
||||
.skeleton {
|
||||
background-color: lighten($ui-base-color, 8%);
|
||||
background-color: var(--background-color);
|
||||
background-image: linear-gradient(
|
||||
90deg,
|
||||
lighten($ui-base-color, 8%),
|
||||
@ -1330,17 +1360,13 @@ a.sparkline {
|
||||
|
||||
.report-reason-selector {
|
||||
border-radius: 4px;
|
||||
background: $ui-base-color;
|
||||
background: var(--background-color);
|
||||
margin-bottom: 20px;
|
||||
|
||||
&__category {
|
||||
cursor: pointer;
|
||||
border-bottom: 1px solid darken($ui-base-color, 8%);
|
||||
|
||||
&:last-child {
|
||||
border-bottom: 0;
|
||||
}
|
||||
|
||||
&__label {
|
||||
padding: 15px;
|
||||
display: flex;
|
||||
@ -1369,7 +1395,7 @@ a.sparkline {
|
||||
|
||||
&__details {
|
||||
&__item {
|
||||
border-bottom: 1px solid lighten($ui-base-color, 8%);
|
||||
border-bottom: 1px solid var(--background-border-color);
|
||||
padding: 15px 0;
|
||||
|
||||
&:last-child {
|
||||
@ -1400,7 +1426,7 @@ a.sparkline {
|
||||
|
||||
.account-card {
|
||||
border-radius: 4px;
|
||||
border: 1px solid lighten($ui-base-color, 8%);
|
||||
border: 1px solid var(--background-border-color);
|
||||
position: relative;
|
||||
|
||||
&__warning-badge {
|
||||
@ -1488,7 +1514,6 @@ a.sparkline {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
inset-inline-end: 15px;
|
||||
background: linear-gradient(to left, $ui-base-color, transparent);
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
@ -1564,11 +1589,11 @@ a.sparkline {
|
||||
margin-bottom: 20px;
|
||||
|
||||
&__item {
|
||||
background: $ui-base-color;
|
||||
background: var(--background-color);
|
||||
position: relative;
|
||||
padding: 15px;
|
||||
padding-inline-start: 15px * 2 + 40px;
|
||||
border-bottom: 1px solid darken($ui-base-color, 8%);
|
||||
border: 1px solid var(--background-border-color);
|
||||
|
||||
&:first-child {
|
||||
border-top-left-radius: 4px;
|
||||
@ -1578,11 +1603,6 @@ a.sparkline {
|
||||
&:last-child {
|
||||
border-bottom-left-radius: 4px;
|
||||
border-bottom-right-radius: 4px;
|
||||
border-bottom: 0;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background-color: lighten($ui-base-color, 4%);
|
||||
}
|
||||
|
||||
&__avatar {
|
||||
@ -1660,13 +1680,10 @@ a.sparkline {
|
||||
}
|
||||
|
||||
.report-actions {
|
||||
border: 1px solid darken($ui-base-color, 8%);
|
||||
|
||||
&__item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
line-height: 18px;
|
||||
border-bottom: 1px solid darken($ui-base-color, 8%);
|
||||
|
||||
&:last-child {
|
||||
border-bottom: 0;
|
||||
@ -1729,8 +1746,6 @@ a.sparkline {
|
||||
|
||||
.strike-card {
|
||||
padding: 15px;
|
||||
border-radius: 4px;
|
||||
background: $ui-base-color;
|
||||
font-size: 15px;
|
||||
line-height: 20px;
|
||||
word-wrap: break-word;
|
||||
@ -1738,6 +1753,8 @@ a.sparkline {
|
||||
color: $primary-text-color;
|
||||
box-sizing: border-box;
|
||||
min-height: 100%;
|
||||
border: 1px solid var(--background-border-color);
|
||||
border-radius: 4px;
|
||||
|
||||
a {
|
||||
color: $highlight-text-color;
|
||||
@ -1778,15 +1795,14 @@ a.sparkline {
|
||||
|
||||
&__statuses-list {
|
||||
border-radius: 4px;
|
||||
border: 1px solid darken($ui-base-color, 8%);
|
||||
border: 1px solid var(--background-border-color);
|
||||
font-size: 13px;
|
||||
line-height: 18px;
|
||||
overflow: hidden;
|
||||
|
||||
&__item {
|
||||
padding: 16px;
|
||||
background: lighten($ui-base-color, 2%);
|
||||
border-bottom: 1px solid darken($ui-base-color, 8%);
|
||||
border-bottom: 1px solid var(--background-border-color);
|
||||
|
||||
&:last-child {
|
||||
border-bottom: 0;
|
||||
|
||||
@ -122,7 +122,7 @@ body {
|
||||
}
|
||||
|
||||
&.admin {
|
||||
background: darken($ui-base-color, 4%);
|
||||
background: var(--background-color);
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
|
||||
@ -521,7 +521,7 @@ body > [data-popper-placement] {
|
||||
gap: 16px;
|
||||
flex: 0 1 auto;
|
||||
border-radius: 4px;
|
||||
border: 1px solid lighten($ui-base-color, 8%);
|
||||
border: 1px solid var(--background-border-color);
|
||||
transition: border-color 300ms linear;
|
||||
min-height: 0;
|
||||
position: relative;
|
||||
@ -587,7 +587,7 @@ body > [data-popper-placement] {
|
||||
|
||||
.autosuggest-input {
|
||||
flex: 1 1 auto;
|
||||
border-bottom: 1px solid lighten($ui-base-color, 8%);
|
||||
border-bottom: 1px solid var(--background-border-color);
|
||||
}
|
||||
}
|
||||
|
||||
@ -1504,7 +1504,7 @@ body > [data-popper-placement] {
|
||||
}
|
||||
|
||||
&--first-in-thread {
|
||||
border-top: 1px solid lighten($ui-base-color, 8%);
|
||||
border-top: 1px solid var(--background-border-color);
|
||||
}
|
||||
|
||||
&__line {
|
||||
@ -1976,7 +1976,6 @@ body > [data-popper-placement] {
|
||||
|
||||
.account {
|
||||
padding: 10px; // glitch: reduced padding
|
||||
border-bottom: 1px solid var(--background-border-color);
|
||||
|
||||
.account__display-name {
|
||||
flex: 1 1 auto;
|
||||
@ -3509,7 +3508,7 @@ $ui-header-logo-wordmark-width: 99px;
|
||||
.copy-paste-text {
|
||||
background: lighten($ui-base-color, 4%);
|
||||
border-radius: 8px;
|
||||
border: 1px solid lighten($ui-base-color, 8%);
|
||||
border: 1px solid var(--background-border-color);
|
||||
padding: 16px;
|
||||
color: $primary-text-color;
|
||||
font-size: 15px;
|
||||
@ -5080,7 +5079,7 @@ a.status-card {
|
||||
|
||||
section {
|
||||
padding: 16px;
|
||||
border-bottom: 1px solid lighten($ui-base-color, 8%);
|
||||
border-bottom: 1px solid var(--background-border-color);
|
||||
|
||||
&:last-child {
|
||||
border-bottom: 0;
|
||||
@ -5784,7 +5783,7 @@ a.status-card {
|
||||
input {
|
||||
padding: 8px 12px;
|
||||
background: $ui-base-color;
|
||||
border: 1px solid lighten($ui-base-color, 8%);
|
||||
border: 1px solid var(--background-border-color);
|
||||
color: $darker-text-color;
|
||||
|
||||
@media screen and (width <= 600px) {
|
||||
@ -5870,7 +5869,7 @@ a.status-card {
|
||||
margin-top: -2px;
|
||||
width: 100%;
|
||||
background: $ui-base-color;
|
||||
border: 1px solid lighten($ui-base-color, 8%);
|
||||
border: 1px solid var(--background-border-color);
|
||||
border-radius: 0 0 4px 4px;
|
||||
box-shadow: var(--dropdown-shadow);
|
||||
z-index: 99;
|
||||
@ -9347,13 +9346,13 @@ noscript {
|
||||
}
|
||||
|
||||
.search__input {
|
||||
border: 1px solid lighten($ui-base-color, 8%);
|
||||
border: 1px solid var(--background-border-color);
|
||||
padding: 10px;
|
||||
padding-inline-end: 30px;
|
||||
}
|
||||
|
||||
.search__popout {
|
||||
border: 1px solid lighten($ui-base-color, 8%);
|
||||
border: 1px solid var(--background-border-color);
|
||||
}
|
||||
|
||||
.search .icon {
|
||||
@ -9672,7 +9671,7 @@ noscript {
|
||||
&__input {
|
||||
@include search-input;
|
||||
|
||||
border: 1px solid lighten($ui-base-color, 8%);
|
||||
border: 1px solid var(--background-border-color);
|
||||
padding: 4px 6px;
|
||||
color: $primary-text-color;
|
||||
font-size: 16px;
|
||||
@ -9707,7 +9706,7 @@ noscript {
|
||||
margin-top: -1px;
|
||||
padding-top: 5px;
|
||||
padding-bottom: 5px;
|
||||
border: 1px solid lighten($ui-base-color, 8%);
|
||||
border: 1px solid var(--background-border-color);
|
||||
}
|
||||
|
||||
&.focused &__input {
|
||||
|
||||
@ -63,7 +63,7 @@
|
||||
padding: 20px 0;
|
||||
margin-top: 40px;
|
||||
margin-bottom: 10px;
|
||||
border-bottom: 1px solid lighten($ui-base-color, 8%);
|
||||
border-bottom: 1px solid var(--background-border-color);
|
||||
|
||||
@media screen and (width <= 440px) {
|
||||
width: 100%;
|
||||
|
||||
@ -13,8 +13,9 @@
|
||||
& > div,
|
||||
& > a {
|
||||
padding: 20px;
|
||||
background: lighten($ui-base-color, 4%);
|
||||
background: var(--background-color);
|
||||
border-radius: 4px;
|
||||
border: 1px solid var(--background-border-color);
|
||||
box-sizing: border-box;
|
||||
height: 100%;
|
||||
}
|
||||
@ -27,7 +28,7 @@
|
||||
&:hover,
|
||||
&:focus,
|
||||
&:active {
|
||||
background: lighten($ui-base-color, 8%);
|
||||
background: $ui-base-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -105,7 +105,7 @@
|
||||
width: 100%;
|
||||
background: $ui-base-color;
|
||||
color: $darker-text-color;
|
||||
border: 1px solid lighten($ui-base-color, 8%);
|
||||
border: 1px solid var(--background-border-color);
|
||||
border-radius: 4px;
|
||||
|
||||
&::-moz-focus-inner {
|
||||
|
||||
@ -415,7 +415,7 @@ code {
|
||||
}
|
||||
|
||||
.input.static .label_input__wrapper {
|
||||
font-size: 16px;
|
||||
font-size: 14px;
|
||||
padding: 10px;
|
||||
border: 1px solid $dark-text-color;
|
||||
border-radius: 4px;
|
||||
@ -437,13 +437,14 @@ code {
|
||||
outline: 0;
|
||||
font-family: inherit;
|
||||
resize: vertical;
|
||||
background: darken($ui-base-color, 10%);
|
||||
border: 1px solid darken($ui-base-color, 10%);
|
||||
border-radius: 8px;
|
||||
background: $ui-base-color;
|
||||
border: 1px solid var(--background-border-color);
|
||||
border-radius: 4px;
|
||||
padding: 10px 16px;
|
||||
|
||||
&::placeholder {
|
||||
color: lighten($darker-text-color, 4%);
|
||||
color: $dark-text-color;
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
&:invalid {
|
||||
@ -454,11 +455,6 @@ code {
|
||||
border-color: $valid-value-color;
|
||||
}
|
||||
|
||||
&:active,
|
||||
&:focus {
|
||||
border-color: $highlight-text-color;
|
||||
}
|
||||
|
||||
@media screen and (width <= 600px) {
|
||||
font-size: 16px;
|
||||
}
|
||||
@ -577,21 +573,25 @@ code {
|
||||
select {
|
||||
appearance: none;
|
||||
box-sizing: border-box;
|
||||
font-size: 16px;
|
||||
font-size: 14px;
|
||||
color: $primary-text-color;
|
||||
display: block;
|
||||
width: 100%;
|
||||
outline: 0;
|
||||
font-family: inherit;
|
||||
resize: vertical;
|
||||
background: darken($ui-base-color, 10%)
|
||||
background: $ui-base-color
|
||||
url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14.933 18.467' height='19.698' width='15.929'><path d='M3.467 14.967l-3.393-3.5H14.86l-3.392 3.5c-1.866 1.925-3.666 3.5-4 3.5-.335 0-2.135-1.575-4-3.5zm.266-11.234L7.467 0 11.2 3.733l3.733 3.734H0l3.733-3.734z' fill='#{hex-color(lighten($ui-base-color, 12%))}'/></svg>")
|
||||
no-repeat right 8px center / auto 16px;
|
||||
border: 1px solid darken($ui-base-color, 14%);
|
||||
no-repeat right 8px center / auto 14px;
|
||||
border: 1px solid var(--background-border-color);
|
||||
border-radius: 4px;
|
||||
padding-inline-start: 10px;
|
||||
padding-inline-end: 30px;
|
||||
height: 41px;
|
||||
|
||||
@media screen and (width <= 600px) {
|
||||
font-size: 16px;
|
||||
}
|
||||
}
|
||||
|
||||
h4 {
|
||||
@ -644,8 +644,9 @@ code {
|
||||
}
|
||||
|
||||
.flash-message {
|
||||
background: lighten($ui-base-color, 8%);
|
||||
color: $darker-text-color;
|
||||
background: var(--background-color);
|
||||
color: $highlight-text-color;
|
||||
border: 1px solid $highlight-text-color;
|
||||
border-radius: 4px;
|
||||
padding: 15px 10px;
|
||||
margin-bottom: 30px;
|
||||
@ -1336,7 +1337,7 @@ code {
|
||||
|
||||
&__toggle > div {
|
||||
display: flex;
|
||||
border-inline-start: 1px solid lighten($ui-base-color, 8%);
|
||||
border-inline-start: 1px solid var(--background-border-color);
|
||||
padding-inline-start: 16px;
|
||||
}
|
||||
}
|
||||
|
||||
@ -23,7 +23,7 @@ html {
|
||||
// Change default background colors of columns
|
||||
.interaction-modal {
|
||||
background: $white;
|
||||
border: 1px solid lighten($ui-base-color, 8%);
|
||||
border: 1px solid var(--background-border-color);
|
||||
}
|
||||
|
||||
.rules-list li::before {
|
||||
@ -75,8 +75,8 @@ html {
|
||||
}
|
||||
|
||||
.getting-started .navigation-bar {
|
||||
border-top: 1px solid lighten($ui-base-color, 8%);
|
||||
border-bottom: 1px solid lighten($ui-base-color, 8%);
|
||||
border-top: 1px solid var(--background-border-color);
|
||||
border-bottom: 1px solid var(--background-border-color);
|
||||
|
||||
@media screen and (max-width: $no-gap-breakpoint) {
|
||||
border-top: 0;
|
||||
@ -88,7 +88,7 @@ html {
|
||||
.setting-text,
|
||||
.report-dialog-modal__textarea,
|
||||
.audio-player {
|
||||
border: 1px solid lighten($ui-base-color, 8%);
|
||||
border: 1px solid var(--background-border-color);
|
||||
}
|
||||
|
||||
.report-dialog-modal .dialog-option .poll__input {
|
||||
@ -140,7 +140,6 @@ html {
|
||||
.actions-modal ul li:not(:empty) a:focus button,
|
||||
.actions-modal ul li:not(:empty) a:hover,
|
||||
.actions-modal ul li:not(:empty) a:hover button,
|
||||
.admin-wrapper .sidebar ul .simple-navigation-active-leaf a,
|
||||
.simple_form .block-button,
|
||||
.simple_form .button,
|
||||
.simple_form button {
|
||||
@ -175,7 +174,7 @@ html {
|
||||
.picture-in-picture__footer,
|
||||
.reactions-bar__item {
|
||||
background: $white;
|
||||
border: 1px solid lighten($ui-base-color, 8%);
|
||||
border: 1px solid var(--background-border-color);
|
||||
}
|
||||
|
||||
.reactions-bar__item:hover,
|
||||
@ -217,7 +216,7 @@ html {
|
||||
|
||||
.column-header__collapsible-inner {
|
||||
background: darken($ui-base-color, 4%);
|
||||
border: 1px solid lighten($ui-base-color, 8%);
|
||||
border: 1px solid var(--background-border-color);
|
||||
border-bottom: 0;
|
||||
}
|
||||
|
||||
@ -259,7 +258,7 @@ html {
|
||||
|
||||
.embed-modal .embed-modal__container .embed-modal__html {
|
||||
background: $white;
|
||||
border: 1px solid lighten($ui-base-color, 8%);
|
||||
border: 1px solid var(--background-border-color);
|
||||
|
||||
&:focus {
|
||||
border-color: lighten($ui-base-color, 12%);
|
||||
@ -298,7 +297,7 @@ html {
|
||||
.directory__tag > a,
|
||||
.directory__tag > div {
|
||||
background: $white;
|
||||
border: 1px solid lighten($ui-base-color, 8%);
|
||||
border: 1px solid var(--background-border-color);
|
||||
|
||||
@media screen and (max-width: $no-gap-breakpoint) {
|
||||
border-left: 0;
|
||||
@ -307,18 +306,6 @@ html {
|
||||
}
|
||||
}
|
||||
|
||||
.simple_form {
|
||||
input[type='text'],
|
||||
input[type='number'],
|
||||
input[type='email'],
|
||||
input[type='password'],
|
||||
textarea {
|
||||
&:hover {
|
||||
border-color: lighten($ui-base-color, 12%);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.picture-in-picture-placeholder {
|
||||
background: $white;
|
||||
border-color: lighten($ui-base-color, 8%);
|
||||
@ -346,7 +333,7 @@ html {
|
||||
}
|
||||
|
||||
.activity-stream {
|
||||
border: 1px solid lighten($ui-base-color, 8%);
|
||||
border: 1px solid var(--background-border-color);
|
||||
|
||||
&--under-tabs {
|
||||
border-top: 0;
|
||||
@ -411,6 +398,22 @@ html {
|
||||
color: $ui-highlight-color;
|
||||
background-color: rgba($ui-highlight-color, 0.1);
|
||||
}
|
||||
|
||||
input[type='text'],
|
||||
input[type='number'],
|
||||
input[type='email'],
|
||||
input[type='password'],
|
||||
input[type='url'],
|
||||
input[type='datetime-local'],
|
||||
textarea {
|
||||
background: darken($ui-base-color, 10%);
|
||||
}
|
||||
|
||||
select {
|
||||
background: darken($ui-base-color, 10%)
|
||||
url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14.933 18.467' height='19.698' width='15.929'><path d='M3.467 14.967l-3.393-3.5H14.86l-3.392 3.5c-1.866 1.925-3.666 3.5-4 3.5-.335 0-2.135-1.575-4-3.5zm.266-11.234L7.467 0 11.2 3.733l3.733 3.734H0l3.733-3.734z' fill='#{hex-color(lighten($ui-base-color, 12%))}'/></svg>")
|
||||
no-repeat right 8px center / auto 14px;
|
||||
}
|
||||
}
|
||||
|
||||
.compose-form .compose-form__warning {
|
||||
@ -449,8 +452,24 @@ html {
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
.card {
|
||||
&__img {
|
||||
background: darken($ui-base-color, 10%);
|
||||
}
|
||||
|
||||
& > a {
|
||||
&:hover,
|
||||
&:active,
|
||||
&:focus {
|
||||
.card__bar {
|
||||
background: darken($ui-base-color, 10%);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.mute-modal select {
|
||||
border: 1px solid lighten($ui-base-color, 8%);
|
||||
border: 1px solid var(--background-border-color);
|
||||
background: $simple-background-color
|
||||
url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14.933 18.467' height='19.698' width='15.929'><path d='M3.467 14.967l-3.393-3.5H14.86l-3.392 3.5c-1.866 1.925-3.666 3.5-4 3.5-.335 0-2.135-1.575-4-3.5zm.266-11.234L7.467 0 11.2 3.733l3.733 3.734H0l3.733-3.734z' fill='#{hex-color(lighten($ui-base-color, 8%))}'/></svg>")
|
||||
no-repeat right 8px center / auto 16px;
|
||||
@ -554,6 +573,7 @@ html {
|
||||
.search__popout,
|
||||
.emoji-mart-search input,
|
||||
.language-dropdown__dropdown .emoji-mart-search input,
|
||||
// .strike-card,
|
||||
.poll__option input[type='text'] {
|
||||
background: darken($ui-base-color, 10%);
|
||||
}
|
||||
@ -570,3 +590,43 @@ html {
|
||||
.inline-follow-suggestions__body__scroll-button__icon {
|
||||
color: $white;
|
||||
}
|
||||
|
||||
a.sparkline {
|
||||
&:hover,
|
||||
&:focus,
|
||||
&:active {
|
||||
background: darken($ui-base-color, 10%);
|
||||
}
|
||||
}
|
||||
|
||||
.dashboard__counters {
|
||||
& > div {
|
||||
& > a {
|
||||
&:hover,
|
||||
&:focus,
|
||||
&:active {
|
||||
background: darken($ui-base-color, 10%);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.directory {
|
||||
&__tag {
|
||||
& > a {
|
||||
&:hover,
|
||||
&:focus,
|
||||
&:active {
|
||||
background: darken($ui-base-color, 10%);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.strike-entry {
|
||||
&:hover,
|
||||
&:focus,
|
||||
&:active {
|
||||
background: darken($ui-base-color, 10%);
|
||||
}
|
||||
}
|
||||
|
||||
@ -101,7 +101,7 @@ body.rtl {
|
||||
}
|
||||
|
||||
.simple_form select {
|
||||
background: darken($ui-base-color, 10%)
|
||||
background: $ui-base-color
|
||||
url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14.933 18.467' height='19.698' width='15.929'><path d='M3.467 14.967l-3.393-3.5H14.86l-3.392 3.5c-1.866 1.925-3.666 3.5-4 3.5-.335 0-2.135-1.575-4-3.5zm.266-11.234L7.467 0 11.2 3.733l3.733 3.734H0l3.733-3.734z' fill='#{hex-color(lighten($ui-base-color, 12%))}'/></svg>")
|
||||
no-repeat left 8px center / auto 16px;
|
||||
}
|
||||
|
||||
@ -9,9 +9,9 @@
|
||||
padding: 8px;
|
||||
line-height: 18px;
|
||||
vertical-align: top;
|
||||
border-top: 1px solid $ui-base-color;
|
||||
border-bottom: 1px solid var(--background-border-color);
|
||||
text-align: start;
|
||||
background: darken($ui-base-color, 4%);
|
||||
background: var(--background-color);
|
||||
|
||||
&.critical {
|
||||
font-weight: 700;
|
||||
@ -21,8 +21,6 @@
|
||||
|
||||
& > thead > tr > th {
|
||||
vertical-align: bottom;
|
||||
border-bottom: 2px solid $ui-base-color;
|
||||
border-top: 0;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
@ -32,15 +30,20 @@
|
||||
|
||||
& > tbody > tr:nth-child(odd) > td,
|
||||
& > tbody > tr:nth-child(odd) > th {
|
||||
background: $ui-base-color;
|
||||
background: var(--background-color);
|
||||
}
|
||||
|
||||
& > tbody > tr:last-child > td,
|
||||
& > tbody > tr:last-child > th {
|
||||
border-bottom: 0;
|
||||
}
|
||||
|
||||
a {
|
||||
color: $highlight-text-color;
|
||||
text-decoration: underline;
|
||||
color: $darker-text-color;
|
||||
text-decoration: none;
|
||||
|
||||
&:hover {
|
||||
text-decoration: none;
|
||||
color: $highlight-text-color;
|
||||
}
|
||||
}
|
||||
|
||||
@ -78,7 +81,7 @@
|
||||
& > tbody > tr > td {
|
||||
padding: 11px 10px;
|
||||
background: transparent;
|
||||
border: 1px solid lighten($ui-base-color, 8%);
|
||||
border: 1px solid var(--background-border-color);
|
||||
color: $secondary-text-color;
|
||||
}
|
||||
|
||||
@ -90,18 +93,18 @@
|
||||
|
||||
&.batch-table {
|
||||
& > thead > tr > th {
|
||||
background: $ui-base-color;
|
||||
border-top: 1px solid darken($ui-base-color, 8%);
|
||||
border-bottom: 1px solid darken($ui-base-color, 8%);
|
||||
background: var(--background-color);
|
||||
border-top: 1px solid var(--background-border-color);
|
||||
border-bottom: 1px solid var(--background-border-color);
|
||||
|
||||
&:first-child {
|
||||
border-radius: 4px 0 0;
|
||||
border-inline-start: 1px solid darken($ui-base-color, 8%);
|
||||
border-inline-start: 1px solid var(--background-border-color);
|
||||
}
|
||||
|
||||
&:last-child {
|
||||
border-radius: 0 4px 0 0;
|
||||
border-inline-end: 1px solid darken($ui-base-color, 8%);
|
||||
border-inline-end: 1px solid var(--background-border-color);
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -136,7 +139,7 @@ a.table-action-link {
|
||||
font-weight: 500;
|
||||
|
||||
&:hover {
|
||||
color: $primary-text-color;
|
||||
color: $highlight-text-color;
|
||||
}
|
||||
|
||||
i.fa {
|
||||
@ -186,9 +189,9 @@ a.table-action-link {
|
||||
position: sticky;
|
||||
top: 0;
|
||||
z-index: 1;
|
||||
border: 1px solid darken($ui-base-color, 8%);
|
||||
background: $ui-base-color;
|
||||
border-radius: 4px 0 0;
|
||||
border: 1px solid var(--background-border-color);
|
||||
background: var(--background-color);
|
||||
border-radius: 4px 4px 0 0;
|
||||
height: 47px;
|
||||
align-items: center;
|
||||
|
||||
@ -199,11 +202,11 @@ a.table-action-link {
|
||||
}
|
||||
|
||||
&__select-all {
|
||||
background: $ui-base-color;
|
||||
background: var(--background-color);
|
||||
height: 47px;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
border: 1px solid darken($ui-base-color, 8%);
|
||||
border: 1px solid var(--background-border-color);
|
||||
border-top: 0;
|
||||
color: $secondary-text-color;
|
||||
display: none;
|
||||
@ -249,9 +252,9 @@ a.table-action-link {
|
||||
|
||||
&__form {
|
||||
padding: 16px;
|
||||
border: 1px solid darken($ui-base-color, 8%);
|
||||
border: 1px solid var(--background-border-color);
|
||||
border-top: 0;
|
||||
background: $ui-base-color;
|
||||
background: var(--background-color);
|
||||
|
||||
.fields-row {
|
||||
padding-top: 0;
|
||||
@ -260,26 +263,18 @@ a.table-action-link {
|
||||
}
|
||||
|
||||
&__row {
|
||||
border: 1px solid darken($ui-base-color, 8%);
|
||||
border: 1px solid var(--background-border-color);
|
||||
border-top: 0;
|
||||
background: darken($ui-base-color, 4%);
|
||||
background: var(--background-color);
|
||||
|
||||
@media screen and (max-width: $no-gap-breakpoint) {
|
||||
.optional &:first-child {
|
||||
border-top: 1px solid darken($ui-base-color, 8%);
|
||||
border-top: 1px solid var(--background-border-color);
|
||||
}
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background: darken($ui-base-color, 2%);
|
||||
}
|
||||
|
||||
&:nth-child(even) {
|
||||
background: $ui-base-color;
|
||||
|
||||
&:hover {
|
||||
background: lighten($ui-base-color, 2%);
|
||||
}
|
||||
background: var(--background-color);
|
||||
}
|
||||
|
||||
&__content {
|
||||
@ -353,12 +348,13 @@ a.table-action-link {
|
||||
}
|
||||
|
||||
.nothing-here {
|
||||
border: 1px solid darken($ui-base-color, 8%);
|
||||
border: 1px solid var(--background-border-color);
|
||||
border-top: 0;
|
||||
box-shadow: none;
|
||||
background: var(--background-color);
|
||||
|
||||
@media screen and (max-width: $no-gap-breakpoint) {
|
||||
border-top: 1px solid darken($ui-base-color, 8%);
|
||||
border-top: 1px solid var(--background-border-color);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@ -198,7 +198,7 @@
|
||||
}
|
||||
|
||||
.directory {
|
||||
background: $ui-base-color;
|
||||
background: var(--background-color);
|
||||
border-radius: 4px;
|
||||
box-shadow: 0 0 15px rgba($base-shadow-color, 0.2);
|
||||
|
||||
@ -211,7 +211,7 @@
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
background: $ui-base-color;
|
||||
border: 1px solid lighten($ui-base-color, 8%);
|
||||
border-radius: 4px;
|
||||
padding: 15px;
|
||||
text-decoration: none;
|
||||
@ -223,7 +223,7 @@
|
||||
&:hover,
|
||||
&:active,
|
||||
&:focus {
|
||||
background: lighten($ui-base-color, 8%);
|
||||
background: $ui-base-color;
|
||||
}
|
||||
}
|
||||
|
||||
@ -340,7 +340,7 @@
|
||||
&:focus,
|
||||
&:hover,
|
||||
&:active {
|
||||
text-decoration: underline;
|
||||
color: $highlight-text-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -23,7 +23,7 @@ html {
|
||||
// Change default background colors of columns
|
||||
.interaction-modal {
|
||||
background: $white;
|
||||
border: 1px solid lighten($ui-base-color, 8%);
|
||||
border: 1px solid var(--background-border-color);
|
||||
}
|
||||
|
||||
.rules-list li::before {
|
||||
@ -75,8 +75,8 @@ html {
|
||||
}
|
||||
|
||||
.getting-started .navigation-bar {
|
||||
border-top: 1px solid lighten($ui-base-color, 8%);
|
||||
border-bottom: 1px solid lighten($ui-base-color, 8%);
|
||||
border-top: 1px solid var(--background-border-color);
|
||||
border-bottom: 1px solid var(--background-border-color);
|
||||
|
||||
@media screen and (max-width: $no-gap-breakpoint) {
|
||||
border-top: 0;
|
||||
@ -88,7 +88,7 @@ html {
|
||||
.setting-text,
|
||||
.report-dialog-modal__textarea,
|
||||
.audio-player {
|
||||
border: 1px solid lighten($ui-base-color, 8%);
|
||||
border: 1px solid var(--background-border-color);
|
||||
}
|
||||
|
||||
.report-dialog-modal .dialog-option .poll__input {
|
||||
@ -140,7 +140,6 @@ html {
|
||||
.actions-modal ul li:not(:empty) a:focus button,
|
||||
.actions-modal ul li:not(:empty) a:hover,
|
||||
.actions-modal ul li:not(:empty) a:hover button,
|
||||
.admin-wrapper .sidebar ul .simple-navigation-active-leaf a,
|
||||
.simple_form .block-button,
|
||||
.simple_form .button,
|
||||
.simple_form button {
|
||||
@ -175,7 +174,7 @@ html {
|
||||
.picture-in-picture__footer,
|
||||
.reactions-bar__item {
|
||||
background: $white;
|
||||
border: 1px solid lighten($ui-base-color, 8%);
|
||||
border: 1px solid var(--background-border-color);
|
||||
}
|
||||
|
||||
.reactions-bar__item:hover,
|
||||
@ -217,7 +216,7 @@ html {
|
||||
|
||||
.column-header__collapsible-inner {
|
||||
background: darken($ui-base-color, 4%);
|
||||
border: 1px solid lighten($ui-base-color, 8%);
|
||||
border: 1px solid var(--background-border-color);
|
||||
border-bottom: 0;
|
||||
}
|
||||
|
||||
@ -259,7 +258,7 @@ html {
|
||||
|
||||
.embed-modal .embed-modal__container .embed-modal__html {
|
||||
background: $white;
|
||||
border: 1px solid lighten($ui-base-color, 8%);
|
||||
border: 1px solid var(--background-border-color);
|
||||
|
||||
&:focus {
|
||||
border-color: lighten($ui-base-color, 12%);
|
||||
@ -298,7 +297,7 @@ html {
|
||||
.directory__tag > a,
|
||||
.directory__tag > div {
|
||||
background: $white;
|
||||
border: 1px solid lighten($ui-base-color, 8%);
|
||||
border: 1px solid var(--background-border-color);
|
||||
|
||||
@media screen and (max-width: $no-gap-breakpoint) {
|
||||
border-left: 0;
|
||||
@ -307,18 +306,6 @@ html {
|
||||
}
|
||||
}
|
||||
|
||||
.simple_form {
|
||||
input[type='text'],
|
||||
input[type='number'],
|
||||
input[type='email'],
|
||||
input[type='password'],
|
||||
textarea {
|
||||
&:hover {
|
||||
border-color: lighten($ui-base-color, 12%);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.picture-in-picture-placeholder {
|
||||
background: $white;
|
||||
border-color: lighten($ui-base-color, 8%);
|
||||
@ -346,7 +333,7 @@ html {
|
||||
}
|
||||
|
||||
.activity-stream {
|
||||
border: 1px solid lighten($ui-base-color, 8%);
|
||||
border: 1px solid var(--background-border-color);
|
||||
|
||||
&--under-tabs {
|
||||
border-top: 0;
|
||||
@ -411,6 +398,22 @@ html {
|
||||
color: $ui-highlight-color;
|
||||
background-color: rgba($ui-highlight-color, 0.1);
|
||||
}
|
||||
|
||||
input[type='text'],
|
||||
input[type='number'],
|
||||
input[type='email'],
|
||||
input[type='password'],
|
||||
input[type='url'],
|
||||
input[type='datetime-local'],
|
||||
textarea {
|
||||
background: darken($ui-base-color, 10%);
|
||||
}
|
||||
|
||||
select {
|
||||
background: darken($ui-base-color, 10%)
|
||||
url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14.933 18.467' height='19.698' width='15.929'><path d='M3.467 14.967l-3.393-3.5H14.86l-3.392 3.5c-1.866 1.925-3.666 3.5-4 3.5-.335 0-2.135-1.575-4-3.5zm.266-11.234L7.467 0 11.2 3.733l3.733 3.734H0l3.733-3.734z' fill='#{hex-color(lighten($ui-base-color, 12%))}'/></svg>")
|
||||
no-repeat right 8px center / auto 14px;
|
||||
}
|
||||
}
|
||||
|
||||
.compose-form .compose-form__warning {
|
||||
@ -449,8 +452,24 @@ html {
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
.card {
|
||||
&__img {
|
||||
background: darken($ui-base-color, 10%);
|
||||
}
|
||||
|
||||
& > a {
|
||||
&:hover,
|
||||
&:active,
|
||||
&:focus {
|
||||
.card__bar {
|
||||
background: darken($ui-base-color, 10%);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.mute-modal select {
|
||||
border: 1px solid lighten($ui-base-color, 8%);
|
||||
border: 1px solid var(--background-border-color);
|
||||
background: $simple-background-color
|
||||
url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14.933 18.467' height='19.698' width='15.929'><path d='M3.467 14.967l-3.393-3.5H14.86l-3.392 3.5c-1.866 1.925-3.666 3.5-4 3.5-.335 0-2.135-1.575-4-3.5zm.266-11.234L7.467 0 11.2 3.733l3.733 3.734H0l3.733-3.734z' fill='#{hex-color(lighten($ui-base-color, 8%))}'/></svg>")
|
||||
no-repeat right 8px center / auto 16px;
|
||||
@ -491,6 +510,7 @@ html {
|
||||
.search__popout,
|
||||
.emoji-mart-search input,
|
||||
.language-dropdown__dropdown .emoji-mart-search input,
|
||||
// .strike-card,
|
||||
.poll__option input[type='text'] {
|
||||
background: darken($ui-base-color, 10%);
|
||||
}
|
||||
@ -507,3 +527,43 @@ html {
|
||||
.inline-follow-suggestions__body__scroll-button__icon {
|
||||
color: $white;
|
||||
}
|
||||
|
||||
a.sparkline {
|
||||
&:hover,
|
||||
&:focus,
|
||||
&:active {
|
||||
background: darken($ui-base-color, 10%);
|
||||
}
|
||||
}
|
||||
|
||||
.dashboard__counters {
|
||||
& > div {
|
||||
& > a {
|
||||
&:hover,
|
||||
&:focus,
|
||||
&:active {
|
||||
background: darken($ui-base-color, 10%);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.directory {
|
||||
&__tag {
|
||||
& > a {
|
||||
&:hover,
|
||||
&:focus,
|
||||
&:active {
|
||||
background: darken($ui-base-color, 10%);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.strike-entry {
|
||||
&:hover,
|
||||
&:focus,
|
||||
&:active {
|
||||
background: darken($ui-base-color, 10%);
|
||||
}
|
||||
}
|
||||
|
||||
@ -10,7 +10,7 @@
|
||||
&:active,
|
||||
&:focus {
|
||||
.card__bar {
|
||||
background: lighten($ui-base-color, 8%);
|
||||
background: $ui-base-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -18,7 +18,9 @@
|
||||
&__img {
|
||||
height: 130px;
|
||||
position: relative;
|
||||
background: darken($ui-base-color, 12%);
|
||||
background: $ui-base-color;
|
||||
border: 1px solid var(--background-border-color);
|
||||
border-bottom: none;
|
||||
|
||||
img {
|
||||
display: block;
|
||||
@ -39,7 +41,9 @@
|
||||
display: flex;
|
||||
justify-content: flex-start;
|
||||
align-items: center;
|
||||
background: lighten($ui-base-color, 4%);
|
||||
background: var(--background-color);
|
||||
border: 1px solid var(--background-border-color);
|
||||
border-top: none;
|
||||
|
||||
.avatar {
|
||||
flex: 0 0 auto;
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
@use 'sass:math';
|
||||
|
||||
$no-columns-breakpoint: 600px;
|
||||
$sidebar-width: 240px;
|
||||
$sidebar-width: 300px;
|
||||
$content-width: 840px;
|
||||
|
||||
.admin-wrapper {
|
||||
@ -26,7 +26,7 @@ $content-width: 840px;
|
||||
&__inner {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
background: $ui-base-color;
|
||||
background: var(--background-color);
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
@ -38,7 +38,7 @@ $content-width: 840px;
|
||||
|
||||
&__toggle {
|
||||
display: none;
|
||||
background: darken($ui-base-color, 4%);
|
||||
background: var(--background-color);
|
||||
border-bottom: 1px solid lighten($ui-base-color, 4%);
|
||||
align-items: center;
|
||||
|
||||
@ -103,7 +103,6 @@ $content-width: 840px;
|
||||
|
||||
ul {
|
||||
list-style: none;
|
||||
border-radius: 4px 0 0 4px;
|
||||
overflow: hidden;
|
||||
margin-bottom: 20px;
|
||||
|
||||
@ -112,13 +111,13 @@ $content-width: 840px;
|
||||
}
|
||||
|
||||
a {
|
||||
font-size: 14px;
|
||||
display: block;
|
||||
padding: 15px;
|
||||
color: $darker-text-color;
|
||||
text-decoration: none;
|
||||
transition: all 200ms linear;
|
||||
transition-property: color, background-color;
|
||||
border-radius: 4px 0 0 4px;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
@ -129,19 +128,13 @@ $content-width: 840px;
|
||||
|
||||
&:hover {
|
||||
color: $primary-text-color;
|
||||
background-color: darken($ui-base-color, 5%);
|
||||
transition: all 100ms linear;
|
||||
transition-property: color, background-color;
|
||||
}
|
||||
|
||||
&.selected {
|
||||
border-radius: 4px 0 0;
|
||||
}
|
||||
}
|
||||
|
||||
ul {
|
||||
background: darken($ui-base-color, 4%);
|
||||
border-radius: 0 0 0 4px;
|
||||
background: var(--background-color);
|
||||
margin: 0;
|
||||
|
||||
a {
|
||||
@ -156,16 +149,10 @@ $content-width: 840px;
|
||||
}
|
||||
|
||||
.simple-navigation-active-leaf a {
|
||||
color: $primary-text-color;
|
||||
background-color: $ui-highlight-color;
|
||||
color: $highlight-text-color;
|
||||
border-bottom: 0;
|
||||
border-radius: 0;
|
||||
}
|
||||
}
|
||||
|
||||
& > ul > .simple-navigation-active-leaf a {
|
||||
border-radius: 4px 0 0 4px;
|
||||
}
|
||||
}
|
||||
|
||||
.content-wrapper {
|
||||
@ -299,7 +286,7 @@ $content-width: 840px;
|
||||
color: $darker-text-color;
|
||||
padding-bottom: 8px;
|
||||
margin-bottom: 8px;
|
||||
border-bottom: 1px solid lighten($ui-base-color, 8%);
|
||||
border-bottom: 1px solid var(--background-border-color);
|
||||
}
|
||||
|
||||
h6 {
|
||||
@ -372,7 +359,7 @@ $content-width: 840px;
|
||||
width: 100%;
|
||||
height: 0;
|
||||
border: 0;
|
||||
border-bottom: 1px solid rgba($ui-base-lighter-color, 0.6);
|
||||
border-bottom: 1px solid var(--background-border-color);
|
||||
margin: 20px 0;
|
||||
|
||||
&.spacer {
|
||||
@ -410,14 +397,14 @@ $content-width: 840px;
|
||||
inset-inline-start: 0;
|
||||
bottom: 0;
|
||||
overflow-y: auto;
|
||||
background: $ui-base-color;
|
||||
background: var(--background-color);
|
||||
}
|
||||
}
|
||||
|
||||
ul a,
|
||||
ul ul a {
|
||||
font-size: 16px;
|
||||
border-radius: 0;
|
||||
border-bottom: 1px solid lighten($ui-base-color, 4%);
|
||||
transition: none;
|
||||
|
||||
&:hover {
|
||||
@ -699,8 +686,10 @@ body,
|
||||
line-height: 20px;
|
||||
padding: 15px;
|
||||
padding-inline-start: 15px * 2 + 40px;
|
||||
background: $ui-base-color;
|
||||
border-bottom: 1px solid darken($ui-base-color, 8%);
|
||||
background: var(--background-color);
|
||||
border-right: 1px solid var(--background-border-color);
|
||||
border-left: 1px solid var(--background-border-color);
|
||||
border-bottom: 1px solid var(--background-border-color);
|
||||
position: relative;
|
||||
text-decoration: none;
|
||||
color: $darker-text-color;
|
||||
@ -709,18 +698,13 @@ body,
|
||||
&:first-child {
|
||||
border-top-left-radius: 4px;
|
||||
border-top-right-radius: 4px;
|
||||
border-top: 1px solid var(--background-border-color);
|
||||
}
|
||||
|
||||
&:last-child {
|
||||
border-bottom-left-radius: 4px;
|
||||
border-bottom-right-radius: 4px;
|
||||
border-bottom: 0;
|
||||
}
|
||||
|
||||
&:hover,
|
||||
&:focus,
|
||||
&:active {
|
||||
background: lighten($ui-base-color, 4%);
|
||||
border-bottom: 1px solid var(--background-border-color);
|
||||
}
|
||||
|
||||
&__avatar {
|
||||
@ -760,6 +744,47 @@ body,
|
||||
}
|
||||
}
|
||||
|
||||
.strike-entry {
|
||||
display: block;
|
||||
line-height: 20px;
|
||||
padding: 15px;
|
||||
padding-inline-start: 15px * 2 + 40px;
|
||||
background: var(--background-color);
|
||||
border: 1px solid var(--background-border-color);
|
||||
border-radius: 4px;
|
||||
position: relative;
|
||||
text-decoration: none;
|
||||
color: $darker-text-color;
|
||||
font-size: 14px;
|
||||
margin-bottom: 15px;
|
||||
|
||||
&__avatar {
|
||||
position: absolute;
|
||||
inset-inline-start: 15px;
|
||||
top: 15px;
|
||||
|
||||
.avatar {
|
||||
border-radius: 4px;
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
}
|
||||
}
|
||||
|
||||
&__title {
|
||||
word-wrap: break-word;
|
||||
}
|
||||
|
||||
&__timestamp {
|
||||
color: $dark-text-color;
|
||||
}
|
||||
|
||||
&:hover,
|
||||
&:focus,
|
||||
&:active {
|
||||
background: $ui-base-color;
|
||||
}
|
||||
}
|
||||
|
||||
a.name-tag,
|
||||
.name-tag,
|
||||
a.inline-name-tag,
|
||||
@ -767,6 +792,10 @@ a.inline-name-tag,
|
||||
text-decoration: none;
|
||||
color: $secondary-text-color;
|
||||
|
||||
&:hover {
|
||||
color: $highlight-text-color;
|
||||
}
|
||||
|
||||
.username {
|
||||
font-weight: 500;
|
||||
}
|
||||
@ -846,7 +875,8 @@ a.name-tag,
|
||||
}
|
||||
|
||||
.report-card {
|
||||
background: $ui-base-color;
|
||||
background: var(--background-color);
|
||||
border: 1px solid var(--background-border-color);
|
||||
border-radius: 4px;
|
||||
margin-bottom: 20px;
|
||||
|
||||
@ -858,7 +888,6 @@ a.name-tag,
|
||||
|
||||
.account {
|
||||
padding: 0;
|
||||
border: 0;
|
||||
|
||||
&__avatar-wrapper {
|
||||
margin-inline-start: 0;
|
||||
@ -879,7 +908,7 @@ a.name-tag,
|
||||
&:focus,
|
||||
&:hover,
|
||||
&:active {
|
||||
color: lighten($darker-text-color, 8%);
|
||||
color: $highlight-text-color;
|
||||
}
|
||||
}
|
||||
|
||||
@ -893,11 +922,7 @@ a.name-tag,
|
||||
&__item {
|
||||
display: flex;
|
||||
justify-content: flex-start;
|
||||
border-top: 1px solid darken($ui-base-color, 4%);
|
||||
|
||||
&:hover {
|
||||
background: lighten($ui-base-color, 2%);
|
||||
}
|
||||
border-top: 1px solid var(--background-border-color);
|
||||
|
||||
&__reported-by,
|
||||
&__assigned {
|
||||
@ -920,7 +945,6 @@ a.name-tag,
|
||||
max-width: calc(100% - 300px);
|
||||
|
||||
&__icon {
|
||||
color: $dark-text-color;
|
||||
margin-inline-end: 4px;
|
||||
font-weight: 500;
|
||||
}
|
||||
@ -933,6 +957,10 @@ a.name-tag,
|
||||
padding: 15px;
|
||||
text-decoration: none;
|
||||
color: $darker-text-color;
|
||||
|
||||
&:hover {
|
||||
color: $highlight-text-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -968,14 +996,15 @@ a.name-tag,
|
||||
|
||||
.account__header__fields,
|
||||
.account__header__content {
|
||||
background: lighten($ui-base-color, 8%);
|
||||
background: var(--background-color);
|
||||
border: 1px solid var(--background-border-color);
|
||||
border-radius: 4px;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.account__header__fields {
|
||||
margin: 0;
|
||||
border: 0;
|
||||
border: 1px solid var(--background-border-color);
|
||||
|
||||
a {
|
||||
color: $highlight-text-color;
|
||||
@ -1004,8 +1033,8 @@ a.name-tag,
|
||||
.applications-list__item,
|
||||
.filters-list__item {
|
||||
padding: 15px 0;
|
||||
background: $ui-base-color;
|
||||
border: 1px solid lighten($ui-base-color, 4%);
|
||||
background: var(--background-color);
|
||||
border: 1px solid var(--background-border-color);
|
||||
border-radius: 4px;
|
||||
margin-top: 15px;
|
||||
}
|
||||
@ -1016,13 +1045,13 @@ a.name-tag,
|
||||
|
||||
.announcements-list,
|
||||
.filters-list {
|
||||
border: 1px solid lighten($ui-base-color, 4%);
|
||||
border: 1px solid var(--background-border-color);
|
||||
border-radius: 4px;
|
||||
border-bottom: none;
|
||||
|
||||
&__item {
|
||||
padding: 15px 0;
|
||||
background: $ui-base-color;
|
||||
border-bottom: 1px solid lighten($ui-base-color, 4%);
|
||||
border-bottom: 1px solid var(--background-border-color);
|
||||
|
||||
&__title {
|
||||
padding: 0 15px;
|
||||
@ -1034,6 +1063,10 @@ a.name-tag,
|
||||
text-decoration: none;
|
||||
margin-bottom: 10px;
|
||||
|
||||
&:hover {
|
||||
color: $highlight-text-color;
|
||||
}
|
||||
|
||||
.account-role {
|
||||
vertical-align: middle;
|
||||
}
|
||||
@ -1072,10 +1105,6 @@ a.name-tag,
|
||||
&__permissions {
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
&:last-child {
|
||||
border-bottom: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -1125,7 +1154,7 @@ a.name-tag,
|
||||
|
||||
&__table {
|
||||
&__number {
|
||||
color: $secondary-text-color;
|
||||
color: var(--background-color);
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
@ -1152,7 +1181,7 @@ a.name-tag,
|
||||
|
||||
&__box {
|
||||
box-sizing: border-box;
|
||||
background: $ui-highlight-color;
|
||||
background: var(--background-color);
|
||||
padding: 10px;
|
||||
font-weight: 500;
|
||||
color: $primary-text-color;
|
||||
@ -1174,8 +1203,9 @@ a.name-tag,
|
||||
.sparkline {
|
||||
display: block;
|
||||
text-decoration: none;
|
||||
background: lighten($ui-base-color, 4%);
|
||||
background: var(--background-color);
|
||||
border-radius: 4px;
|
||||
border: 1px solid var(--background-border-color);
|
||||
padding: 0;
|
||||
position: relative;
|
||||
padding-bottom: 55px + 20px;
|
||||
@ -1247,12 +1277,12 @@ a.sparkline {
|
||||
&:hover,
|
||||
&:focus,
|
||||
&:active {
|
||||
background: lighten($ui-base-color, 6%);
|
||||
background: $ui-base-color;
|
||||
}
|
||||
}
|
||||
|
||||
.skeleton {
|
||||
background-color: lighten($ui-base-color, 8%);
|
||||
background-color: var(--background-color);
|
||||
background-image: linear-gradient(
|
||||
90deg,
|
||||
lighten($ui-base-color, 8%),
|
||||
@ -1332,17 +1362,13 @@ a.sparkline {
|
||||
|
||||
.report-reason-selector {
|
||||
border-radius: 4px;
|
||||
background: $ui-base-color;
|
||||
background: var(--background-color);
|
||||
margin-bottom: 20px;
|
||||
|
||||
&__category {
|
||||
cursor: pointer;
|
||||
border-bottom: 1px solid darken($ui-base-color, 8%);
|
||||
|
||||
&:last-child {
|
||||
border-bottom: 0;
|
||||
}
|
||||
|
||||
&__label {
|
||||
padding: 15px;
|
||||
display: flex;
|
||||
@ -1371,7 +1397,7 @@ a.sparkline {
|
||||
|
||||
&__details {
|
||||
&__item {
|
||||
border-bottom: 1px solid lighten($ui-base-color, 8%);
|
||||
border-bottom: 1px solid var(--background-border-color);
|
||||
padding: 15px 0;
|
||||
|
||||
&:last-child {
|
||||
@ -1402,7 +1428,7 @@ a.sparkline {
|
||||
|
||||
.account-card {
|
||||
border-radius: 4px;
|
||||
border: 1px solid lighten($ui-base-color, 8%);
|
||||
border: 1px solid var(--background-border-color);
|
||||
position: relative;
|
||||
|
||||
&__warning-badge {
|
||||
@ -1490,7 +1516,6 @@ a.sparkline {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
inset-inline-end: 15px;
|
||||
background: linear-gradient(to left, $ui-base-color, transparent);
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
@ -1566,11 +1591,11 @@ a.sparkline {
|
||||
margin-bottom: 20px;
|
||||
|
||||
&__item {
|
||||
background: $ui-base-color;
|
||||
background: var(--background-color);
|
||||
position: relative;
|
||||
padding: 15px;
|
||||
padding-inline-start: 15px * 2 + 40px;
|
||||
border-bottom: 1px solid darken($ui-base-color, 8%);
|
||||
border: 1px solid var(--background-border-color);
|
||||
|
||||
&:first-child {
|
||||
border-top-left-radius: 4px;
|
||||
@ -1580,11 +1605,6 @@ a.sparkline {
|
||||
&:last-child {
|
||||
border-bottom-left-radius: 4px;
|
||||
border-bottom-right-radius: 4px;
|
||||
border-bottom: 0;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background-color: lighten($ui-base-color, 4%);
|
||||
}
|
||||
|
||||
&__avatar {
|
||||
@ -1662,13 +1682,10 @@ a.sparkline {
|
||||
}
|
||||
|
||||
.report-actions {
|
||||
border: 1px solid darken($ui-base-color, 8%);
|
||||
|
||||
&__item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
line-height: 18px;
|
||||
border-bottom: 1px solid darken($ui-base-color, 8%);
|
||||
|
||||
&:last-child {
|
||||
border-bottom: 0;
|
||||
@ -1731,8 +1748,6 @@ a.sparkline {
|
||||
|
||||
.strike-card {
|
||||
padding: 15px;
|
||||
border-radius: 4px;
|
||||
background: $ui-base-color;
|
||||
font-size: 15px;
|
||||
line-height: 20px;
|
||||
word-wrap: break-word;
|
||||
@ -1740,6 +1755,8 @@ a.sparkline {
|
||||
color: $primary-text-color;
|
||||
box-sizing: border-box;
|
||||
min-height: 100%;
|
||||
border: 1px solid var(--background-border-color);
|
||||
border-radius: 4px;
|
||||
|
||||
a {
|
||||
color: $highlight-text-color;
|
||||
@ -1780,15 +1797,14 @@ a.sparkline {
|
||||
|
||||
&__statuses-list {
|
||||
border-radius: 4px;
|
||||
border: 1px solid darken($ui-base-color, 8%);
|
||||
border: 1px solid var(--background-border-color);
|
||||
font-size: 13px;
|
||||
line-height: 18px;
|
||||
overflow: hidden;
|
||||
|
||||
&__item {
|
||||
padding: 16px;
|
||||
background: lighten($ui-base-color, 2%);
|
||||
border-bottom: 1px solid darken($ui-base-color, 8%);
|
||||
border-bottom: 1px solid var(--background-border-color);
|
||||
|
||||
&:last-child {
|
||||
border-bottom: 0;
|
||||
|
||||
@ -122,7 +122,7 @@ body {
|
||||
}
|
||||
|
||||
&.admin {
|
||||
background: darken($ui-base-color, 4%);
|
||||
background: var(--background-color);
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
|
||||
@ -521,7 +521,7 @@ body > [data-popper-placement] {
|
||||
gap: 16px;
|
||||
flex: 0 1 auto;
|
||||
border-radius: 4px;
|
||||
border: 1px solid lighten($ui-base-color, 8%);
|
||||
border: 1px solid var(--background-border-color);
|
||||
transition: border-color 300ms linear;
|
||||
min-height: 0;
|
||||
position: relative;
|
||||
@ -587,7 +587,7 @@ body > [data-popper-placement] {
|
||||
|
||||
.autosuggest-input {
|
||||
flex: 1 1 auto;
|
||||
border-bottom: 1px solid lighten($ui-base-color, 8%);
|
||||
border-bottom: 1px solid var(--background-border-color);
|
||||
}
|
||||
}
|
||||
|
||||
@ -1452,7 +1452,7 @@ body > [data-popper-placement] {
|
||||
}
|
||||
|
||||
&--first-in-thread {
|
||||
border-top: 1px solid lighten($ui-base-color, 8%);
|
||||
border-top: 1px solid var(--background-border-color);
|
||||
}
|
||||
|
||||
&__line {
|
||||
@ -1794,7 +1794,6 @@ body > [data-popper-placement] {
|
||||
|
||||
.account {
|
||||
padding: 16px;
|
||||
border-bottom: 1px solid var(--background-border-color);
|
||||
|
||||
.account__display-name {
|
||||
flex: 1 1 auto;
|
||||
@ -3325,7 +3324,7 @@ $ui-header-logo-wordmark-width: 99px;
|
||||
.copy-paste-text {
|
||||
background: lighten($ui-base-color, 4%);
|
||||
border-radius: 8px;
|
||||
border: 1px solid lighten($ui-base-color, 8%);
|
||||
border: 1px solid var(--background-border-color);
|
||||
padding: 16px;
|
||||
color: $primary-text-color;
|
||||
font-size: 15px;
|
||||
@ -4728,7 +4727,7 @@ a.status-card {
|
||||
|
||||
section {
|
||||
padding: 16px;
|
||||
border-bottom: 1px solid lighten($ui-base-color, 8%);
|
||||
border-bottom: 1px solid var(--background-border-color);
|
||||
|
||||
&:last-child {
|
||||
border-bottom: 0;
|
||||
@ -5316,7 +5315,7 @@ a.status-card {
|
||||
input {
|
||||
padding: 8px 12px;
|
||||
background: $ui-base-color;
|
||||
border: 1px solid lighten($ui-base-color, 8%);
|
||||
border: 1px solid var(--background-border-color);
|
||||
color: $darker-text-color;
|
||||
|
||||
@media screen and (width <= 600px) {
|
||||
@ -5402,7 +5401,7 @@ a.status-card {
|
||||
margin-top: -2px;
|
||||
width: 100%;
|
||||
background: $ui-base-color;
|
||||
border: 1px solid lighten($ui-base-color, 8%);
|
||||
border: 1px solid var(--background-border-color);
|
||||
border-radius: 0 0 4px 4px;
|
||||
box-shadow: var(--dropdown-shadow);
|
||||
z-index: 99;
|
||||
@ -8789,13 +8788,13 @@ noscript {
|
||||
}
|
||||
|
||||
.search__input {
|
||||
border: 1px solid lighten($ui-base-color, 8%);
|
||||
border: 1px solid var(--background-border-color);
|
||||
padding: 10px;
|
||||
padding-inline-end: 30px;
|
||||
}
|
||||
|
||||
.search__popout {
|
||||
border: 1px solid lighten($ui-base-color, 8%);
|
||||
border: 1px solid var(--background-border-color);
|
||||
}
|
||||
|
||||
.search .icon {
|
||||
@ -9114,7 +9113,7 @@ noscript {
|
||||
&__input {
|
||||
@include search-input;
|
||||
|
||||
border: 1px solid lighten($ui-base-color, 8%);
|
||||
border: 1px solid var(--background-border-color);
|
||||
padding: 4px 6px;
|
||||
color: $primary-text-color;
|
||||
font-size: 16px;
|
||||
@ -9149,7 +9148,7 @@ noscript {
|
||||
margin-top: -1px;
|
||||
padding-top: 5px;
|
||||
padding-bottom: 5px;
|
||||
border: 1px solid lighten($ui-base-color, 8%);
|
||||
border: 1px solid var(--background-border-color);
|
||||
}
|
||||
|
||||
&.focused &__input {
|
||||
|
||||
@ -63,7 +63,7 @@
|
||||
padding: 20px 0;
|
||||
margin-top: 40px;
|
||||
margin-bottom: 10px;
|
||||
border-bottom: 1px solid lighten($ui-base-color, 8%);
|
||||
border-bottom: 1px solid var(--background-border-color);
|
||||
|
||||
@media screen and (width <= 440px) {
|
||||
width: 100%;
|
||||
|
||||
@ -13,8 +13,9 @@
|
||||
& > div,
|
||||
& > a {
|
||||
padding: 20px;
|
||||
background: lighten($ui-base-color, 4%);
|
||||
background: var(--background-color);
|
||||
border-radius: 4px;
|
||||
border: 1px solid var(--background-border-color);
|
||||
box-sizing: border-box;
|
||||
height: 100%;
|
||||
}
|
||||
@ -27,7 +28,7 @@
|
||||
&:hover,
|
||||
&:focus,
|
||||
&:active {
|
||||
background: lighten($ui-base-color, 8%);
|
||||
background: $ui-base-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -105,7 +105,7 @@
|
||||
width: 100%;
|
||||
background: $ui-base-color;
|
||||
color: $darker-text-color;
|
||||
border: 1px solid lighten($ui-base-color, 8%);
|
||||
border: 1px solid var(--background-border-color);
|
||||
border-radius: 4px;
|
||||
|
||||
&::-moz-focus-inner {
|
||||
|
||||
@ -414,7 +414,7 @@ code {
|
||||
}
|
||||
|
||||
.input.static .label_input__wrapper {
|
||||
font-size: 16px;
|
||||
font-size: 14px;
|
||||
padding: 10px;
|
||||
border: 1px solid $dark-text-color;
|
||||
border-radius: 4px;
|
||||
@ -436,13 +436,14 @@ code {
|
||||
outline: 0;
|
||||
font-family: inherit;
|
||||
resize: vertical;
|
||||
background: darken($ui-base-color, 10%);
|
||||
border: 1px solid darken($ui-base-color, 10%);
|
||||
border-radius: 8px;
|
||||
background: $ui-base-color;
|
||||
border: 1px solid var(--background-border-color);
|
||||
border-radius: 4px;
|
||||
padding: 10px 16px;
|
||||
|
||||
&::placeholder {
|
||||
color: lighten($darker-text-color, 4%);
|
||||
color: $dark-text-color;
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
&:invalid {
|
||||
@ -453,11 +454,6 @@ code {
|
||||
border-color: $valid-value-color;
|
||||
}
|
||||
|
||||
&:active,
|
||||
&:focus {
|
||||
border-color: $highlight-text-color;
|
||||
}
|
||||
|
||||
@media screen and (width <= 600px) {
|
||||
font-size: 16px;
|
||||
}
|
||||
@ -576,21 +572,25 @@ code {
|
||||
select {
|
||||
appearance: none;
|
||||
box-sizing: border-box;
|
||||
font-size: 16px;
|
||||
font-size: 14px;
|
||||
color: $primary-text-color;
|
||||
display: block;
|
||||
width: 100%;
|
||||
outline: 0;
|
||||
font-family: inherit;
|
||||
resize: vertical;
|
||||
background: darken($ui-base-color, 10%)
|
||||
background: $ui-base-color
|
||||
url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14.933 18.467' height='19.698' width='15.929'><path d='M3.467 14.967l-3.393-3.5H14.86l-3.392 3.5c-1.866 1.925-3.666 3.5-4 3.5-.335 0-2.135-1.575-4-3.5zm.266-11.234L7.467 0 11.2 3.733l3.733 3.734H0l3.733-3.734z' fill='#{hex-color(lighten($ui-base-color, 12%))}'/></svg>")
|
||||
no-repeat right 8px center / auto 16px;
|
||||
border: 1px solid darken($ui-base-color, 14%);
|
||||
no-repeat right 8px center / auto 14px;
|
||||
border: 1px solid var(--background-border-color);
|
||||
border-radius: 4px;
|
||||
padding-inline-start: 10px;
|
||||
padding-inline-end: 30px;
|
||||
height: 41px;
|
||||
|
||||
@media screen and (width <= 600px) {
|
||||
font-size: 16px;
|
||||
}
|
||||
}
|
||||
|
||||
h4 {
|
||||
@ -644,8 +644,9 @@ code {
|
||||
}
|
||||
|
||||
.flash-message {
|
||||
background: lighten($ui-base-color, 8%);
|
||||
color: $darker-text-color;
|
||||
background: var(--background-color);
|
||||
color: $highlight-text-color;
|
||||
border: 1px solid $highlight-text-color;
|
||||
border-radius: 4px;
|
||||
padding: 15px 10px;
|
||||
margin-bottom: 30px;
|
||||
@ -1335,7 +1336,7 @@ code {
|
||||
|
||||
&__toggle > div {
|
||||
display: flex;
|
||||
border-inline-start: 1px solid lighten($ui-base-color, 8%);
|
||||
border-inline-start: 1px solid var(--background-border-color);
|
||||
padding-inline-start: 16px;
|
||||
}
|
||||
}
|
||||
|
||||
@ -46,7 +46,7 @@ body.rtl {
|
||||
}
|
||||
|
||||
.simple_form select {
|
||||
background: darken($ui-base-color, 10%)
|
||||
background: $ui-base-color
|
||||
url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14.933 18.467' height='19.698' width='15.929'><path d='M3.467 14.967l-3.393-3.5H14.86l-3.392 3.5c-1.866 1.925-3.666 3.5-4 3.5-.335 0-2.135-1.575-4-3.5zm.266-11.234L7.467 0 11.2 3.733l3.733 3.734H0l3.733-3.734z' fill='#{hex-color(lighten($ui-base-color, 12%))}'/></svg>")
|
||||
no-repeat left 8px center / auto 16px;
|
||||
}
|
||||
|
||||
@ -9,9 +9,9 @@
|
||||
padding: 8px;
|
||||
line-height: 18px;
|
||||
vertical-align: top;
|
||||
border-top: 1px solid $ui-base-color;
|
||||
border-bottom: 1px solid var(--background-border-color);
|
||||
text-align: start;
|
||||
background: darken($ui-base-color, 4%);
|
||||
background: var(--background-color);
|
||||
|
||||
&.critical {
|
||||
font-weight: 700;
|
||||
@ -21,8 +21,6 @@
|
||||
|
||||
& > thead > tr > th {
|
||||
vertical-align: bottom;
|
||||
border-bottom: 2px solid $ui-base-color;
|
||||
border-top: 0;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
@ -32,15 +30,20 @@
|
||||
|
||||
& > tbody > tr:nth-child(odd) > td,
|
||||
& > tbody > tr:nth-child(odd) > th {
|
||||
background: $ui-base-color;
|
||||
background: var(--background-color);
|
||||
}
|
||||
|
||||
& > tbody > tr:last-child > td,
|
||||
& > tbody > tr:last-child > th {
|
||||
border-bottom: 0;
|
||||
}
|
||||
|
||||
a {
|
||||
color: $highlight-text-color;
|
||||
text-decoration: underline;
|
||||
color: $darker-text-color;
|
||||
text-decoration: none;
|
||||
|
||||
&:hover {
|
||||
text-decoration: none;
|
||||
color: $highlight-text-color;
|
||||
}
|
||||
}
|
||||
|
||||
@ -78,7 +81,7 @@
|
||||
& > tbody > tr > td {
|
||||
padding: 11px 10px;
|
||||
background: transparent;
|
||||
border: 1px solid lighten($ui-base-color, 8%);
|
||||
border: 1px solid var(--background-border-color);
|
||||
color: $secondary-text-color;
|
||||
}
|
||||
|
||||
@ -90,18 +93,18 @@
|
||||
|
||||
&.batch-table {
|
||||
& > thead > tr > th {
|
||||
background: $ui-base-color;
|
||||
border-top: 1px solid darken($ui-base-color, 8%);
|
||||
border-bottom: 1px solid darken($ui-base-color, 8%);
|
||||
background: var(--background-color);
|
||||
border-top: 1px solid var(--background-border-color);
|
||||
border-bottom: 1px solid var(--background-border-color);
|
||||
|
||||
&:first-child {
|
||||
border-radius: 4px 0 0;
|
||||
border-inline-start: 1px solid darken($ui-base-color, 8%);
|
||||
border-inline-start: 1px solid var(--background-border-color);
|
||||
}
|
||||
|
||||
&:last-child {
|
||||
border-radius: 0 4px 0 0;
|
||||
border-inline-end: 1px solid darken($ui-base-color, 8%);
|
||||
border-inline-end: 1px solid var(--background-border-color);
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -136,7 +139,7 @@ a.table-action-link {
|
||||
font-weight: 500;
|
||||
|
||||
&:hover {
|
||||
color: $primary-text-color;
|
||||
color: $highlight-text-color;
|
||||
}
|
||||
|
||||
i.fa {
|
||||
@ -186,9 +189,9 @@ a.table-action-link {
|
||||
position: sticky;
|
||||
top: 0;
|
||||
z-index: 1;
|
||||
border: 1px solid darken($ui-base-color, 8%);
|
||||
background: $ui-base-color;
|
||||
border-radius: 4px 0 0;
|
||||
border: 1px solid var(--background-border-color);
|
||||
background: var(--background-color);
|
||||
border-radius: 4px 4px 0 0;
|
||||
height: 47px;
|
||||
align-items: center;
|
||||
|
||||
@ -199,11 +202,11 @@ a.table-action-link {
|
||||
}
|
||||
|
||||
&__select-all {
|
||||
background: $ui-base-color;
|
||||
background: var(--background-color);
|
||||
height: 47px;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
border: 1px solid darken($ui-base-color, 8%);
|
||||
border: 1px solid var(--background-border-color);
|
||||
border-top: 0;
|
||||
color: $secondary-text-color;
|
||||
display: none;
|
||||
@ -249,9 +252,9 @@ a.table-action-link {
|
||||
|
||||
&__form {
|
||||
padding: 16px;
|
||||
border: 1px solid darken($ui-base-color, 8%);
|
||||
border: 1px solid var(--background-border-color);
|
||||
border-top: 0;
|
||||
background: $ui-base-color;
|
||||
background: var(--background-color);
|
||||
|
||||
.fields-row {
|
||||
padding-top: 0;
|
||||
@ -260,26 +263,18 @@ a.table-action-link {
|
||||
}
|
||||
|
||||
&__row {
|
||||
border: 1px solid darken($ui-base-color, 8%);
|
||||
border: 1px solid var(--background-border-color);
|
||||
border-top: 0;
|
||||
background: darken($ui-base-color, 4%);
|
||||
background: var(--background-color);
|
||||
|
||||
@media screen and (max-width: $no-gap-breakpoint) {
|
||||
.optional &:first-child {
|
||||
border-top: 1px solid darken($ui-base-color, 8%);
|
||||
border-top: 1px solid var(--background-border-color);
|
||||
}
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background: darken($ui-base-color, 2%);
|
||||
}
|
||||
|
||||
&:nth-child(even) {
|
||||
background: $ui-base-color;
|
||||
|
||||
&:hover {
|
||||
background: lighten($ui-base-color, 2%);
|
||||
}
|
||||
background: var(--background-color);
|
||||
}
|
||||
|
||||
&__content {
|
||||
@ -357,12 +352,13 @@ a.table-action-link {
|
||||
}
|
||||
|
||||
.nothing-here {
|
||||
border: 1px solid darken($ui-base-color, 8%);
|
||||
border: 1px solid var(--background-border-color);
|
||||
border-top: 0;
|
||||
box-shadow: none;
|
||||
background: var(--background-color);
|
||||
|
||||
@media screen and (max-width: $no-gap-breakpoint) {
|
||||
border-top: 1px solid darken($ui-base-color, 8%);
|
||||
border-top: 1px solid var(--background-border-color);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@ -204,7 +204,7 @@
|
||||
}
|
||||
|
||||
.directory {
|
||||
background: $ui-base-color;
|
||||
background: var(--background-color);
|
||||
border-radius: 4px;
|
||||
box-shadow: 0 0 15px rgba($base-shadow-color, 0.2);
|
||||
|
||||
@ -217,7 +217,7 @@
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
background: $ui-base-color;
|
||||
border: 1px solid lighten($ui-base-color, 8%);
|
||||
border-radius: 4px;
|
||||
padding: 15px;
|
||||
text-decoration: none;
|
||||
@ -229,7 +229,7 @@
|
||||
&:hover,
|
||||
&:active,
|
||||
&:focus {
|
||||
background: lighten($ui-base-color, 8%);
|
||||
background: $ui-base-color;
|
||||
}
|
||||
}
|
||||
|
||||
@ -351,7 +351,7 @@
|
||||
&:focus,
|
||||
&:hover,
|
||||
&:active {
|
||||
text-decoration: underline;
|
||||
color: $highlight-text-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -8,10 +8,10 @@
|
||||
|
||||
%hr.spacer/
|
||||
|
||||
.applications-list
|
||||
.announcements-list
|
||||
= render partial: 'role', collection: @roles.select(&:everyone?)
|
||||
|
||||
%hr.spacer/
|
||||
|
||||
.applications-list
|
||||
.announcements-list
|
||||
= render partial: 'role', collection: @roles.reject(&:everyone?)
|
||||
|
||||
@ -1,14 +1,14 @@
|
||||
= link_to disputes_strike_path(account_warning), class: 'log-entry' do
|
||||
.log-entry__header
|
||||
.log-entry__avatar
|
||||
= link_to disputes_strike_path(account_warning), class: 'strike-entry' do
|
||||
.strike-entry__header
|
||||
.strike-entry__avatar
|
||||
.indicator-icon{ class: account_warning.overruled? ? 'success' : 'failure' }
|
||||
= fa_icon 'warning'
|
||||
.log-entry__content
|
||||
.log-entry__title
|
||||
.strike-entry__content
|
||||
.strike-entry__title
|
||||
= t 'disputes.strikes.title',
|
||||
action: t(account_warning.action, scope: 'disputes.strikes.title_actions'),
|
||||
date: l(account_warning.created_at.to_date)
|
||||
.log-entry__timestamp
|
||||
.strike-entry__timestamp
|
||||
%time.formatted{ datetime: account_warning.created_at.iso8601 }= l(account_warning.created_at)
|
||||
|
||||
- if account_warning.overruled?
|
||||
|
||||
@ -68,7 +68,7 @@ module.exports = (api) => {
|
||||
plugins,
|
||||
overrides: [
|
||||
{
|
||||
test: /tesseract\.js/,
|
||||
test: [/tesseract\.js/, /fuzzysort\.js/],
|
||||
presets: [
|
||||
['@babel/env', { ...envOptions, modules: 'commonjs' }],
|
||||
],
|
||||
|
||||
@ -2,19 +2,19 @@ const { join, resolve } = require('path');
|
||||
|
||||
const { env, settings } = require('../configuration');
|
||||
|
||||
// Those modules contain modern ES code that need to be transpiled for Webpack to process it
|
||||
const nodeModulesToProcess = [
|
||||
'@reduxjs', 'fuzzysort'
|
||||
];
|
||||
|
||||
module.exports = {
|
||||
test: /\.(js|jsx|mjs|ts|tsx)$/,
|
||||
include: [
|
||||
settings.source_path,
|
||||
...settings.resolved_paths,
|
||||
'node_modules/@reduxjs'
|
||||
...nodeModulesToProcess.map(p => resolve(`node_modules/${p}`)),
|
||||
].map(p => resolve(p)),
|
||||
exclude: function(modulePath) {
|
||||
return (
|
||||
/node_modules/.test(modulePath) &&
|
||||
!/@reduxjs/.test(modulePath)
|
||||
);
|
||||
},
|
||||
exclude: new RegExp('node_modules\\/(?!(' + nodeModulesToProcess.join('|')+')\\/).*'),
|
||||
use: [
|
||||
{
|
||||
loader: 'babel-loader',
|
||||
|
||||
@ -75,7 +75,7 @@
|
||||
"favico.js": "^0.3.10",
|
||||
"file-loader": "^6.2.0",
|
||||
"font-awesome": "^4.7.0",
|
||||
"fuzzysort": "^2.0.4",
|
||||
"fuzzysort": "^3.0.0",
|
||||
"glob": "^10.2.6",
|
||||
"history": "^4.10.1",
|
||||
"hoist-non-react-statics": "^3.3.2",
|
||||
|
||||
10
yarn.lock
10
yarn.lock
@ -2853,7 +2853,7 @@ __metadata:
|
||||
favico.js: "npm:^0.3.10"
|
||||
file-loader: "npm:^6.2.0"
|
||||
font-awesome: "npm:^4.7.0"
|
||||
fuzzysort: "npm:^2.0.4"
|
||||
fuzzysort: "npm:^3.0.0"
|
||||
glob: "npm:^10.2.6"
|
||||
history: "npm:^4.10.1"
|
||||
hoist-non-react-statics: "npm:^3.3.2"
|
||||
@ -8900,10 +8900,10 @@ __metadata:
|
||||
languageName: node
|
||||
linkType: hard
|
||||
|
||||
"fuzzysort@npm:^2.0.4":
|
||||
version: 2.0.4
|
||||
resolution: "fuzzysort@npm:2.0.4"
|
||||
checksum: 10c0/3170d16fccc0f4ac5e31323dbab7d0da7b1a4024878ed4d6b4ec86c0df94e12dc335f8d4181e38d97ca7919ac51bc5de4a9c2ec94914a4e51f9e9c05208c9ea9
|
||||
"fuzzysort@npm:^3.0.0":
|
||||
version: 3.0.2
|
||||
resolution: "fuzzysort@npm:3.0.2"
|
||||
checksum: 10c0/c6cdbd092a8e91ed822aeac6d4fb95559759c10602cb29f27307c1cabd01fdd384fa399f7757722435b595244efb000cd63f144104c41b8551b2faff123279cb
|
||||
languageName: node
|
||||
linkType: hard
|
||||
|
||||
|
||||
Loading…
Reference in New Issue
Block a user