You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
2191 lines
38 KiB
2191 lines
38 KiB
@use 'sass:color'; |
|
@use 'sass:math'; |
|
@use 'functions' as *; |
|
@use 'variables' as *; |
|
|
|
$no-columns-breakpoint: 890px; |
|
$sidebar-width: 300px; |
|
$content-width: 840px; |
|
|
|
.admin-wrapper { |
|
display: flex; |
|
justify-content: center; |
|
box-sizing: border-box; |
|
width: 100%; |
|
min-height: 100vh; |
|
min-height: 100dvh; |
|
padding: env(safe-area-inset-top) env(safe-area-inset-right) |
|
env(safe-area-inset-bottom) env(safe-area-inset-left); |
|
|
|
.icon { |
|
width: 16px; |
|
height: 16px; |
|
vertical-align: top; |
|
margin: 0 2px; |
|
} |
|
|
|
.sidebar-wrapper { |
|
min-height: 100vh; |
|
min-height: 100dvh; |
|
overflow: hidden; |
|
pointer-events: none; |
|
flex: 1 1 auto; |
|
|
|
&__inner { |
|
display: flex; |
|
justify-content: flex-end; |
|
background: var(--background-color); |
|
height: 100%; |
|
} |
|
} |
|
|
|
.sidebar { |
|
width: $sidebar-width; |
|
padding: 0; |
|
pointer-events: auto; |
|
|
|
&__toggle { |
|
display: none; |
|
background: var(--background-color); |
|
border-bottom: 1px solid lighten($ui-base-color, 4%); |
|
align-items: center; |
|
|
|
&__logo { |
|
flex: 1 1 auto; |
|
|
|
a { |
|
display: block; |
|
padding: 15px; |
|
} |
|
} |
|
|
|
&__icon { |
|
display: block; |
|
color: $darker-text-color; |
|
text-decoration: none; |
|
flex: 0 0 auto; |
|
font-size: 18px; |
|
padding: 10px; |
|
margin: 5px 10px; |
|
border-radius: 4px; |
|
|
|
&:focus { |
|
background: $ui-base-color; |
|
} |
|
|
|
.material-close { |
|
display: none; |
|
} |
|
|
|
&.active { |
|
.material-close { |
|
display: block; |
|
} |
|
|
|
.material-menu { |
|
display: none; |
|
} |
|
} |
|
} |
|
} |
|
|
|
.logo { |
|
display: block; |
|
margin: 40px auto; |
|
width: 100px; |
|
height: 100px; |
|
} |
|
|
|
// Hometown edit to remove huge logo at top of admin page on mobile |
|
@media screen and (max-width: $no-gap-breakpoint - 285px - 1px) { |
|
.logo { |
|
display: none; |
|
} |
|
} |
|
|
|
.logo--wordmark { |
|
display: inherit; |
|
margin: inherit; |
|
width: inherit; |
|
height: 25px; |
|
} |
|
|
|
@media screen and (max-width: $no-columns-breakpoint) { |
|
& > a:first-child { |
|
display: none; |
|
} |
|
} |
|
|
|
ul { |
|
list-style: none; |
|
overflow: hidden; |
|
margin-bottom: 20px; |
|
|
|
@media screen and (max-width: $no-columns-breakpoint) { |
|
margin-bottom: 0; |
|
} |
|
|
|
a { |
|
font-size: 14px; |
|
display: flex; |
|
align-items: center; |
|
gap: 6px; |
|
padding: 15px; |
|
color: $darker-text-color; |
|
text-decoration: none; |
|
transition: all 200ms linear; |
|
transition-property: color, background-color; |
|
|
|
&:hover { |
|
color: $primary-text-color; |
|
transition: all 100ms linear; |
|
transition-property: color, background-color; |
|
} |
|
} |
|
|
|
ul { |
|
background: var(--background-color); |
|
margin: 0; |
|
|
|
a { |
|
border: 0; |
|
padding: 15px 35px; |
|
} |
|
} |
|
|
|
.warning a { |
|
color: $gold-star; |
|
font-weight: 700; |
|
} |
|
|
|
.simple-navigation-active-leaf a { |
|
color: $highlight-text-color; |
|
border-bottom: 0; |
|
} |
|
} |
|
} |
|
|
|
.content-wrapper { |
|
box-sizing: border-box; |
|
width: 100%; |
|
max-width: $content-width; |
|
flex: 1 1 auto; |
|
isolation: isolate; |
|
} |
|
|
|
@media screen and (max-width: ($content-width + $sidebar-width)) { |
|
.sidebar-wrapper--empty { |
|
display: none; |
|
} |
|
|
|
.sidebar-wrapper { |
|
width: $sidebar-width; |
|
flex: 0 0 auto; |
|
} |
|
} |
|
|
|
@media screen and (max-width: $no-columns-breakpoint) { |
|
.sidebar-wrapper { |
|
width: 100%; |
|
} |
|
} |
|
|
|
.content { |
|
padding-top: 55px; |
|
padding-bottom: 20px; |
|
padding-inline-start: 25px; |
|
padding-inline-end: 15px; |
|
|
|
@media screen and (max-width: $no-columns-breakpoint) { |
|
max-width: none; |
|
padding: 15px; |
|
padding-top: 30px; |
|
} |
|
|
|
&__heading { |
|
margin-bottom: 45px; |
|
|
|
&__row { |
|
display: flex; |
|
flex-wrap: wrap; |
|
align-items: center; |
|
justify-content: space-between; |
|
margin-top: -15px; |
|
margin-inline-end: -15px; |
|
|
|
& > * { |
|
margin-top: 15px; |
|
margin-inline-end: 15px; |
|
} |
|
} |
|
|
|
&__tabs { |
|
margin-top: 30px; |
|
width: 100%; |
|
|
|
& > div { |
|
display: flex; |
|
flex-wrap: wrap; |
|
gap: 5px; |
|
} |
|
|
|
a { |
|
font-size: 14px; |
|
display: inline-flex; |
|
align-items: center; |
|
padding: 7px 10px; |
|
border-radius: 4px; |
|
color: $darker-text-color; |
|
text-decoration: none; |
|
font-weight: 500; |
|
gap: 5px; |
|
white-space: nowrap; |
|
|
|
@media screen and (max-width: $mobile-breakpoint) { |
|
flex: 1 0 50%; |
|
} |
|
|
|
&:hover, |
|
&:focus, |
|
&:active { |
|
background: lighten($ui-base-color, 4%); |
|
} |
|
|
|
&.selected { |
|
font-weight: 700; |
|
color: $primary-text-color; |
|
background: $ui-highlight-color; |
|
} |
|
} |
|
} |
|
|
|
&__actions { |
|
display: inline-flex; |
|
flex-flow: wrap; |
|
gap: 5px; |
|
align-items: center; |
|
|
|
.time-period { |
|
padding: 0 10px; |
|
} |
|
|
|
.back-link { |
|
margin-bottom: 0; |
|
} |
|
} |
|
|
|
h2 small { |
|
font-size: 12px; |
|
display: block; |
|
font-weight: 500; |
|
color: $darker-text-color; |
|
line-height: 18px; |
|
} |
|
|
|
@media screen and (max-width: $no-columns-breakpoint) { |
|
border-bottom: 0; |
|
padding-bottom: 0; |
|
} |
|
} |
|
|
|
h2 { |
|
color: $secondary-text-color; |
|
font-size: 24px; |
|
line-height: 36px; |
|
font-weight: 700; |
|
} |
|
|
|
h3 { |
|
color: $secondary-text-color; |
|
font-size: 20px; |
|
line-height: 28px; |
|
font-weight: 400; |
|
margin-bottom: 30px; |
|
} |
|
|
|
h4 { |
|
text-transform: uppercase; |
|
font-size: 13px; |
|
font-weight: 700; |
|
color: $darker-text-color; |
|
padding-top: 24px; |
|
margin-bottom: 8px; |
|
border-top: 1px solid var(--background-border-color); |
|
} |
|
|
|
h6 { |
|
font-size: 16px; |
|
color: $secondary-text-color; |
|
line-height: 28px; |
|
font-weight: 500; |
|
} |
|
|
|
.fields-group h6 { |
|
color: $primary-text-color; |
|
font-weight: 500; |
|
} |
|
|
|
.directory__tag > a, |
|
.directory__tag > div { |
|
box-shadow: none; |
|
} |
|
|
|
.directory__tag h4 { |
|
font-size: 18px; |
|
font-weight: 700; |
|
color: $primary-text-color; |
|
text-transform: none; |
|
padding-bottom: 0; |
|
margin-bottom: 0; |
|
border-bottom: 0; |
|
|
|
.comment { |
|
display: block; |
|
overflow: hidden; |
|
text-overflow: ellipsis; |
|
margin-top: 4px; |
|
|
|
&.private-comment { |
|
display: block; |
|
color: $darker-text-color; |
|
} |
|
|
|
&.public-comment { |
|
display: block; |
|
color: $secondary-text-color; |
|
} |
|
} |
|
} |
|
|
|
& > p { |
|
font-size: 14px; |
|
line-height: 21px; |
|
color: $secondary-text-color; |
|
margin-bottom: 20px; |
|
|
|
strong { |
|
color: $primary-text-color; |
|
font-weight: 500; |
|
|
|
@each $lang in $cjk-langs { |
|
&:lang(#{$lang}) { |
|
font-weight: 700; |
|
} |
|
} |
|
} |
|
} |
|
|
|
hr { |
|
width: 100%; |
|
height: 0; |
|
border: 0; |
|
border-bottom: 1px solid var(--background-border-color); |
|
margin: 20px 0; |
|
|
|
&.spacer { |
|
height: 1px; |
|
border: 0; |
|
} |
|
} |
|
} |
|
|
|
@media screen and (max-width: $no-columns-breakpoint) { |
|
display: block; |
|
|
|
.sidebar-wrapper { |
|
min-height: 0; |
|
} |
|
|
|
.sidebar { |
|
width: 100%; |
|
padding: 0; |
|
height: auto; |
|
|
|
&__toggle { |
|
display: flex; |
|
} |
|
|
|
& > ul { |
|
display: none; |
|
|
|
&.visible { |
|
display: block; |
|
position: fixed; |
|
z-index: 10; |
|
width: 100%; |
|
height: calc(100% - 56px); |
|
inset-inline-start: 0; |
|
bottom: 0; |
|
overflow-y: auto; |
|
background: var(--background-color); |
|
} |
|
} |
|
|
|
ul a, |
|
ul ul a { |
|
font-size: 16px; |
|
border-radius: 0; |
|
transition: none; |
|
|
|
&:hover { |
|
transition: none; |
|
} |
|
} |
|
|
|
ul ul { |
|
border-radius: 0; |
|
} |
|
|
|
ul .simple-navigation-active-leaf a { |
|
border-bottom-color: $ui-highlight-color; |
|
} |
|
} |
|
} |
|
} |
|
|
|
hr.spacer { |
|
width: 100%; |
|
border: 0; |
|
margin: 20px 0; |
|
height: 1px; |
|
} |
|
|
|
body, |
|
.admin-wrapper .content { |
|
.muted-hint { |
|
color: $darker-text-color; |
|
|
|
a { |
|
color: $highlight-text-color; |
|
} |
|
} |
|
|
|
.positive-hint, |
|
.negative-hint, |
|
.neutral-hint { |
|
a { |
|
color: inherit; |
|
text-decoration: underline; |
|
|
|
&:focus, |
|
&:hover, |
|
&:active { |
|
text-decoration: none; |
|
} |
|
} |
|
} |
|
|
|
.positive-hint { |
|
color: $valid-value-color; |
|
font-weight: 500; |
|
} |
|
|
|
.negative-hint { |
|
color: $error-value-color; |
|
font-weight: 500; |
|
} |
|
|
|
.neutral-hint { |
|
color: $dark-text-color; |
|
font-weight: 500; |
|
} |
|
|
|
.warning-hint { |
|
color: $gold-star; |
|
font-weight: 500; |
|
} |
|
} |
|
|
|
kbd { |
|
font-family: Courier, monospace; |
|
background-color: color.change($ui-secondary-color, $alpha: 0.1); |
|
padding: 4px; |
|
padding-bottom: 2px; |
|
border-radius: 5px; |
|
} |
|
|
|
.filters { |
|
display: flex; |
|
flex-wrap: wrap; |
|
gap: 40px; |
|
|
|
.filter-subset { |
|
flex: 0 0 auto; |
|
margin-bottom: 20px; |
|
|
|
&:last-child { |
|
margin-bottom: 30px; |
|
} |
|
|
|
ul { |
|
margin-top: 5px; |
|
list-style: none; |
|
|
|
li { |
|
display: inline-block; |
|
margin-inline-end: 5px; |
|
} |
|
} |
|
|
|
& > div { |
|
display: flex; |
|
gap: 5px; |
|
} |
|
|
|
strong { |
|
font-weight: 500; |
|
text-transform: uppercase; |
|
font-size: 12px; |
|
|
|
@each $lang in $cjk-langs { |
|
&:lang(#{$lang}) { |
|
font-weight: 700; |
|
} |
|
} |
|
} |
|
|
|
&--with-select strong { |
|
display: block; |
|
margin-bottom: 10px; |
|
} |
|
|
|
a { |
|
display: inline-block; |
|
color: $darker-text-color; |
|
text-decoration: none; |
|
text-transform: uppercase; |
|
font-size: 12px; |
|
font-weight: 500; |
|
border-bottom: 2px solid $ui-base-color; |
|
|
|
&:hover { |
|
color: $primary-text-color; |
|
border-bottom: 2px solid lighten($ui-base-color, 5%); |
|
} |
|
|
|
&.selected { |
|
color: $highlight-text-color; |
|
border-bottom: 2px solid $ui-highlight-color; |
|
} |
|
} |
|
} |
|
} |
|
|
|
.report-accounts { |
|
display: flex; |
|
flex-wrap: wrap; |
|
margin-bottom: 20px; |
|
} |
|
|
|
.report-accounts__item { |
|
display: flex; |
|
flex: 250px; |
|
flex-direction: column; |
|
margin: 0 5px; |
|
|
|
& > strong { |
|
display: block; |
|
margin: 0 0 10px -5px; |
|
font-weight: 500; |
|
font-size: 14px; |
|
line-height: 18px; |
|
color: $secondary-text-color; |
|
|
|
@each $lang in $cjk-langs { |
|
&:lang(#{$lang}) { |
|
font-weight: 700; |
|
} |
|
} |
|
} |
|
|
|
.account-card { |
|
flex: 1 1 auto; |
|
} |
|
} |
|
|
|
.report-status, |
|
.account-status { |
|
display: flex; |
|
margin-bottom: 10px; |
|
} |
|
|
|
.report-status__actions, |
|
.account-status__actions { |
|
flex: 0 0 auto; |
|
display: flex; |
|
flex-direction: column; |
|
|
|
.icon-button { |
|
font-size: 24px; |
|
width: 24px; |
|
text-align: center; |
|
margin-bottom: 10px; |
|
} |
|
} |
|
|
|
.simple_form.new_report_note, |
|
.simple_form.new_account_moderation_note { |
|
max-width: 100%; |
|
} |
|
|
|
.batch-form-box { |
|
display: flex; |
|
flex-wrap: wrap; |
|
margin-bottom: 5px; |
|
|
|
#form_status_batch_action { |
|
margin: 0 5px 5px 0; |
|
font-size: 14px; |
|
} |
|
|
|
input.button { |
|
margin: 0 5px 5px 0; |
|
} |
|
} |
|
|
|
.back-link { |
|
margin-bottom: 10px; |
|
font-size: 14px; |
|
|
|
a { |
|
color: $highlight-text-color; |
|
text-decoration: none; |
|
|
|
&:hover { |
|
text-decoration: underline; |
|
} |
|
} |
|
} |
|
|
|
.special-action-button, |
|
.back-link { |
|
text-align: end; |
|
flex: 1 1 auto; |
|
} |
|
|
|
.action-buttons { |
|
display: flex; |
|
overflow: hidden; |
|
justify-content: space-between; |
|
} |
|
|
|
.spacer { |
|
flex: 1 1 auto; |
|
} |
|
|
|
.log-entry { |
|
display: block; |
|
line-height: 20px; |
|
padding: 15px; |
|
padding-inline-start: 15px * 2 + 40px; |
|
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; |
|
font-size: 14px; |
|
|
|
&: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: 1px solid var(--background-border-color); |
|
} |
|
|
|
&__avatar { |
|
position: absolute; |
|
inset-inline-start: 15px; |
|
top: 15px; |
|
|
|
.avatar { |
|
border-radius: var(--avatar-border-radius); |
|
width: 40px; |
|
height: 40px; |
|
} |
|
} |
|
|
|
&__title { |
|
overflow-wrap: break-word; |
|
} |
|
|
|
&__timestamp { |
|
color: $dark-text-color; |
|
} |
|
|
|
a, |
|
.username, |
|
.target { |
|
color: $secondary-text-color; |
|
text-decoration: none; |
|
font-weight: 500; |
|
} |
|
|
|
a { |
|
&:hover, |
|
&:focus, |
|
&:active { |
|
text-decoration: underline; |
|
} |
|
} |
|
} |
|
|
|
.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: var(--avatar-border-radius); |
|
width: 40px; |
|
height: 40px; |
|
} |
|
} |
|
|
|
&__title { |
|
overflow-wrap: break-word; |
|
} |
|
|
|
&__timestamp { |
|
color: $dark-text-color; |
|
} |
|
|
|
&:hover, |
|
&:focus, |
|
&:active { |
|
background: $ui-base-color; |
|
} |
|
} |
|
|
|
a.name-tag, |
|
.name-tag, |
|
a.inline-name-tag, |
|
.inline-name-tag { |
|
text-decoration: none; |
|
color: $secondary-text-color; |
|
|
|
&:hover { |
|
color: $highlight-text-color; |
|
} |
|
|
|
.username { |
|
font-weight: 500; |
|
} |
|
|
|
&.suspended { |
|
.username { |
|
text-decoration: line-through; |
|
color: lighten($error-red, 12%); |
|
} |
|
|
|
.avatar { |
|
filter: grayscale(100%); |
|
opacity: 0.8; |
|
} |
|
} |
|
} |
|
|
|
a.name-tag, |
|
.name-tag { |
|
display: inline-flex; |
|
align-items: center; |
|
vertical-align: top; |
|
|
|
.avatar { |
|
display: block; |
|
margin: 0; |
|
margin-inline-end: 5px; |
|
border-radius: 50%; |
|
} |
|
|
|
&.suspended { |
|
.avatar { |
|
filter: grayscale(100%); |
|
opacity: 0.8; |
|
} |
|
} |
|
} |
|
|
|
.speech-bubble { |
|
margin-bottom: 20px; |
|
border-inline-start: 4px solid $ui-highlight-color; |
|
|
|
&.positive { |
|
border-left-color: $success-green; |
|
} |
|
|
|
&.negative { |
|
border-left-color: lighten($error-red, 12%); |
|
} |
|
|
|
&.warning { |
|
border-left-color: $gold-star; |
|
} |
|
|
|
&__bubble { |
|
padding: 16px; |
|
padding-inline-start: 14px; |
|
font-size: 15px; |
|
line-height: 20px; |
|
border-radius: 4px 4px 4px 0; |
|
position: relative; |
|
font-weight: 500; |
|
|
|
a { |
|
color: $darker-text-color; |
|
} |
|
} |
|
|
|
&__owner { |
|
padding: 8px; |
|
padding-inline-start: 12px; |
|
} |
|
|
|
time { |
|
color: $dark-text-color; |
|
} |
|
} |
|
|
|
.report-card { |
|
background: var(--background-color); |
|
border: 1px solid var(--background-border-color); |
|
border-radius: 4px; |
|
margin-bottom: 20px; |
|
|
|
&__profile { |
|
display: flex; |
|
justify-content: space-between; |
|
align-items: center; |
|
padding: 15px; |
|
|
|
.account { |
|
padding: 0; |
|
border: none; |
|
|
|
&__avatar-wrapper { |
|
margin-inline-start: 0; |
|
} |
|
} |
|
|
|
&__stats { |
|
flex: 0 0 auto; |
|
font-weight: 500; |
|
color: $darker-text-color; |
|
text-transform: uppercase; |
|
text-align: end; |
|
|
|
a { |
|
color: inherit; |
|
text-decoration: none; |
|
|
|
&:focus, |
|
&:hover, |
|
&:active { |
|
color: $highlight-text-color; |
|
} |
|
} |
|
|
|
.red { |
|
color: $error-value-color; |
|
} |
|
} |
|
} |
|
|
|
&__summary { |
|
&__item { |
|
display: flex; |
|
justify-content: flex-start; |
|
border-top: 1px solid var(--background-border-color); |
|
|
|
&__reported-by, |
|
&__assigned { |
|
padding: 15px; |
|
flex: 0 0 auto; |
|
box-sizing: border-box; |
|
width: 150px; |
|
color: $darker-text-color; |
|
|
|
&, |
|
.username { |
|
white-space: nowrap; |
|
overflow: hidden; |
|
text-overflow: ellipsis; |
|
} |
|
} |
|
|
|
&__content { |
|
flex: 1 1 auto; |
|
max-width: calc(100% - 300px); |
|
|
|
&__icon { |
|
margin-inline-end: 4px; |
|
font-weight: 500; |
|
} |
|
} |
|
|
|
&__content a { |
|
display: block; |
|
box-sizing: border-box; |
|
width: 100%; |
|
padding: 15px; |
|
text-decoration: none; |
|
color: $darker-text-color; |
|
|
|
&:hover { |
|
color: $highlight-text-color; |
|
} |
|
} |
|
} |
|
} |
|
} |
|
|
|
.one-line { |
|
white-space: nowrap; |
|
overflow: hidden; |
|
text-overflow: ellipsis; |
|
} |
|
|
|
.ellipsized-ip { |
|
display: inline-block; |
|
max-width: 120px; |
|
overflow: hidden; |
|
text-overflow: ellipsis; |
|
vertical-align: middle; |
|
} |
|
|
|
.admin-account-bio { |
|
display: flex; |
|
flex-wrap: wrap; |
|
margin: 0 -5px; |
|
margin-top: 20px; |
|
|
|
> div { |
|
box-sizing: border-box; |
|
padding: 0 5px; |
|
margin-bottom: 10px; |
|
flex: 1 0 50%; |
|
max-width: 100%; |
|
} |
|
|
|
.account__header__fields, |
|
.account__header__content { |
|
background: var(--background-color); |
|
border: 1px solid var(--background-border-color); |
|
border-radius: 4px; |
|
height: 100%; |
|
} |
|
|
|
.account__header__fields { |
|
margin: 0; |
|
border: 1px solid var(--background-border-color); |
|
|
|
a { |
|
color: $highlight-text-color; |
|
} |
|
|
|
dl:first-child .verified { |
|
border-radius: 0 4px 0 0; |
|
} |
|
|
|
.verified a { |
|
color: $valid-value-color; |
|
} |
|
} |
|
|
|
.account__header__content { |
|
box-sizing: border-box; |
|
padding: 20px; |
|
color: $primary-text-color; |
|
} |
|
} |
|
|
|
.center-text { |
|
text-align: center; |
|
} |
|
|
|
.applications-list__item, |
|
.filters-list__item { |
|
padding: 15px 0; |
|
background: var(--background-color); |
|
border: 1px solid var(--background-border-color); |
|
border-radius: 4px; |
|
margin-top: 15px; |
|
} |
|
|
|
.user-role { |
|
color: var(--user-role-accent); |
|
} |
|
|
|
.applications-list { |
|
.icon { |
|
vertical-align: middle; |
|
} |
|
} |
|
|
|
.announcements-list, |
|
.filters-list { |
|
border: 1px solid var(--background-border-color); |
|
border-radius: 4px; |
|
border-bottom: none; |
|
|
|
&__item { |
|
padding: 15px 0; |
|
border-bottom: 1px solid var(--background-border-color); |
|
|
|
&__title { |
|
padding: 0 15px; |
|
display: block; |
|
font-weight: 500; |
|
font-size: 18px; |
|
line-height: 1.5; |
|
color: $secondary-text-color; |
|
text-decoration: none; |
|
margin-bottom: 10px; |
|
|
|
&:hover { |
|
color: $highlight-text-color; |
|
} |
|
|
|
.account-role { |
|
vertical-align: middle; |
|
} |
|
} |
|
|
|
.icon { |
|
vertical-align: middle; |
|
} |
|
|
|
a.announcements-list__item__title { |
|
&:hover, |
|
&:focus, |
|
&:active { |
|
color: $primary-text-color; |
|
} |
|
} |
|
|
|
&__action-bar { |
|
display: flex; |
|
justify-content: space-between; |
|
align-items: center; |
|
gap: 8px; |
|
|
|
&:not(.no-wrap) { |
|
flex-wrap: wrap; |
|
} |
|
} |
|
|
|
&__meta { |
|
padding: 0 15px; |
|
color: $dark-text-color; |
|
|
|
a { |
|
color: inherit; |
|
text-decoration: underline; |
|
|
|
&:hover, |
|
&:focus, |
|
&:active { |
|
text-decoration: none; |
|
} |
|
} |
|
} |
|
|
|
&__actions { |
|
margin-inline-start: auto; |
|
} |
|
|
|
&__permissions { |
|
margin-top: 10px; |
|
} |
|
} |
|
} |
|
|
|
.filters-list__item { |
|
&__title { |
|
display: flex; |
|
justify-content: space-between; |
|
margin-bottom: 0; |
|
overflow-wrap: anywhere; |
|
} |
|
|
|
&__permissions { |
|
margin-top: 0; |
|
margin-bottom: 10px; |
|
} |
|
|
|
.expiration { |
|
font-size: 13px; |
|
} |
|
|
|
&.expired { |
|
.expiration { |
|
color: lighten($error-red, 12%); |
|
} |
|
|
|
.permissions-list__item__icon { |
|
color: $dark-text-color; |
|
} |
|
} |
|
} |
|
|
|
.rule-actions { |
|
display: flex; |
|
flex-direction: column; |
|
|
|
a.table-action-link { |
|
padding-inline-start: 0; |
|
} |
|
} |
|
|
|
.dashboard__counters.admin-account-counters { |
|
margin-top: 10px; |
|
} |
|
|
|
.account-badges { |
|
margin: -2px 0; |
|
} |
|
|
|
.retention { |
|
overflow: auto; |
|
|
|
> h4 { |
|
position: sticky; |
|
inset-inline-start: 0; |
|
} |
|
|
|
&__table { |
|
&__number { |
|
color: var(--background-color); |
|
padding: 10px; |
|
} |
|
|
|
&__date { |
|
white-space: nowrap; |
|
padding: 10px 0; |
|
text-align: start; |
|
min-width: 120px; |
|
|
|
&.retention__table__average { |
|
font-weight: 700; |
|
} |
|
} |
|
|
|
&__size { |
|
text-align: center; |
|
padding: 10px; |
|
} |
|
|
|
&__label { |
|
font-weight: 700; |
|
color: $darker-text-color; |
|
} |
|
|
|
&__box { |
|
box-sizing: border-box; |
|
background: var(--background-color); |
|
padding: 10px; |
|
font-weight: 500; |
|
color: $primary-text-color; |
|
width: 52px; |
|
margin: 1px; |
|
|
|
@for $i from 0 through 10 { |
|
&--#{10 * $i} { |
|
background-color: rgba( |
|
$ui-highlight-color, |
|
1 * (math.div(max(1, $i), 10)) |
|
); |
|
} |
|
} |
|
} |
|
} |
|
} |
|
|
|
.sparkline { |
|
display: block; |
|
text-decoration: none; |
|
background: var(--background-color); |
|
border-radius: 4px; |
|
border: 1px solid var(--background-border-color); |
|
padding: 0; |
|
position: relative; |
|
padding-bottom: 55px + 20px; |
|
overflow: hidden; |
|
|
|
&__value { |
|
display: flex; |
|
line-height: 33px; |
|
align-items: flex-end; |
|
padding: 20px; |
|
padding-bottom: 10px; |
|
|
|
&__total { |
|
display: block; |
|
margin-inline-end: 10px; |
|
font-weight: 500; |
|
font-size: 28px; |
|
color: $primary-text-color; |
|
} |
|
|
|
&__change { |
|
display: block; |
|
font-weight: 500; |
|
font-size: 18px; |
|
color: $darker-text-color; |
|
margin-bottom: -3px; |
|
|
|
&.positive { |
|
color: $valid-value-color; |
|
} |
|
|
|
&.negative { |
|
color: $error-value-color; |
|
} |
|
} |
|
} |
|
|
|
&__label { |
|
padding: 0 20px; |
|
padding-bottom: 10px; |
|
text-transform: uppercase; |
|
color: $darker-text-color; |
|
font-weight: 500; |
|
} |
|
|
|
&__graph { |
|
position: absolute; |
|
bottom: 0; |
|
width: 100%; |
|
|
|
svg { |
|
display: block; |
|
margin: 0; |
|
} |
|
|
|
path:first-child { |
|
fill: color.change($highlight-text-color, $alpha: 0.25) !important; |
|
fill-opacity: 1 !important; |
|
} |
|
|
|
path:last-child { |
|
stroke: lighten($highlight-text-color, 6%) !important; |
|
fill: none !important; |
|
} |
|
} |
|
} |
|
|
|
a.sparkline { |
|
&:hover, |
|
&:focus, |
|
&:active { |
|
background: $ui-base-color; |
|
} |
|
} |
|
|
|
.skeleton { |
|
background-color: var(--background-color); |
|
background-image: linear-gradient( |
|
90deg, |
|
lighten($ui-base-color, 8%), |
|
lighten($ui-base-color, 12%), |
|
lighten($ui-base-color, 8%) |
|
); |
|
background-size: 200px 100%; |
|
background-repeat: no-repeat; |
|
border-radius: 4px; |
|
display: inline-block; |
|
line-height: 1; |
|
width: 100%; |
|
animation: skeleton 1.2s ease-in-out infinite; |
|
|
|
.reduce-motion & { |
|
animation: none; |
|
} |
|
} |
|
|
|
@keyframes skeleton { |
|
0% { |
|
background-position: -200px 0; |
|
} |
|
|
|
100% { |
|
background-position: calc(200px + 100%) 0; |
|
} |
|
} |
|
|
|
.dimension { |
|
table { |
|
width: 100%; |
|
} |
|
|
|
&__item { |
|
border-bottom: 1px solid lighten($ui-base-color, 4%); |
|
|
|
&__key { |
|
font-weight: 500; |
|
padding: 11px 10px; |
|
} |
|
|
|
&__value { |
|
text-align: end; |
|
color: $darker-text-color; |
|
padding: 11px 10px; |
|
} |
|
|
|
&__indicator { |
|
display: inline-block; |
|
width: 8px; |
|
height: 8px; |
|
border-radius: 50%; |
|
background: $ui-highlight-color; |
|
margin-inline-end: 10px; |
|
|
|
@for $i from 0 through 10 { |
|
&--#{10 * $i} { |
|
background-color: rgba( |
|
$ui-highlight-color, |
|
1 * (math.div(max(1, $i), 10)) |
|
); |
|
} |
|
} |
|
} |
|
|
|
&:last-child { |
|
border-bottom: 0; |
|
} |
|
|
|
&.negative { |
|
color: $error-value-color; |
|
font-weight: 700; |
|
|
|
.dimension__item__value { |
|
color: $error-value-color; |
|
} |
|
} |
|
} |
|
} |
|
|
|
.report-reason-selector { |
|
border-radius: 4px; |
|
background: var(--background-color); |
|
margin-bottom: 20px; |
|
|
|
&__category { |
|
cursor: pointer; |
|
border-bottom: 1px solid darken($ui-base-color, 8%); |
|
|
|
&__label { |
|
padding: 15px; |
|
display: flex; |
|
gap: 8px; |
|
align-items: center; |
|
} |
|
|
|
&__rules { |
|
margin-inline-start: 30px; |
|
} |
|
} |
|
|
|
&__rule { |
|
cursor: pointer; |
|
padding: 15px; |
|
display: flex; |
|
gap: 8px; |
|
align-items: center; |
|
} |
|
} |
|
|
|
.report-header { |
|
display: grid; |
|
gap: 15px; |
|
grid-template-columns: minmax(0, 1fr) 300px; |
|
|
|
&__details { |
|
&__item { |
|
border-bottom: 1px solid var(--background-border-color); |
|
padding: 15px 0; |
|
|
|
&:last-child { |
|
border-bottom: 0; |
|
} |
|
|
|
&__header { |
|
font-weight: 600; |
|
padding: 4px 0; |
|
} |
|
} |
|
|
|
&--horizontal { |
|
display: grid; |
|
grid-auto-columns: minmax(0, 1fr); |
|
grid-auto-flow: column; |
|
|
|
.report-header__details__item { |
|
border-bottom: 0; |
|
} |
|
} |
|
} |
|
|
|
@media screen and (width <= 930px) { |
|
grid-template-columns: minmax(0, 1fr); |
|
} |
|
} |
|
|
|
.account-card { |
|
border-radius: 4px; |
|
border: 1px solid var(--background-border-color); |
|
position: relative; |
|
|
|
&__warning-badge { |
|
position: absolute; |
|
padding: 4px 10px; |
|
top: 10px; |
|
inset-inline-start: 10px; |
|
border-radius: 4px; |
|
background: |
|
url('@/images/warning-stripes.svg') repeat-y left, |
|
url('@/images/warning-stripes.svg') repeat-y right, |
|
var(--background-color); |
|
} |
|
|
|
&__permalink { |
|
color: inherit; |
|
text-decoration: none; |
|
} |
|
|
|
&__header { |
|
padding: 4px; |
|
border-radius: 4px; |
|
height: 128px; |
|
|
|
img { |
|
display: block; |
|
margin: 0; |
|
width: 100%; |
|
height: 100%; |
|
object-fit: cover; |
|
background: darken($ui-base-color, 8%); |
|
} |
|
} |
|
|
|
&__title { |
|
margin-top: -(15px + 8px); |
|
display: flex; |
|
align-items: flex-end; |
|
|
|
&__avatar { |
|
padding: 14px; |
|
|
|
img, |
|
.account__avatar { |
|
display: block; |
|
margin: 0; |
|
width: 56px; |
|
height: 56px; |
|
background-color: darken($ui-base-color, 8%); |
|
border-radius: 8px; |
|
border: 1px solid $ui-base-color; |
|
} |
|
} |
|
|
|
.display-name { |
|
color: $darker-text-color; |
|
padding-bottom: 15px; |
|
font-size: 15px; |
|
line-height: 20px; |
|
|
|
bdi { |
|
display: block; |
|
color: $primary-text-color; |
|
font-weight: 700; |
|
} |
|
} |
|
} |
|
|
|
&__bio { |
|
padding: 0 15px; |
|
margin: 8px 0; |
|
overflow: hidden; |
|
text-overflow: ellipsis; |
|
overflow-wrap: break-word; |
|
max-height: 21px * 2; |
|
position: relative; |
|
font-size: 15px; |
|
line-height: 21px; |
|
|
|
&::after { |
|
display: block; |
|
content: ''; |
|
width: 50px; |
|
height: 21px; |
|
position: absolute; |
|
bottom: 0; |
|
inset-inline-end: 15px; |
|
pointer-events: none; |
|
} |
|
|
|
a { |
|
color: $secondary-text-color; |
|
text-decoration: none; |
|
unicode-bidi: isolate; |
|
|
|
&:hover { |
|
text-decoration: underline; |
|
} |
|
|
|
&.mention { |
|
&:hover { |
|
text-decoration: none; |
|
|
|
span { |
|
text-decoration: underline; |
|
} |
|
} |
|
} |
|
} |
|
} |
|
|
|
&__actions { |
|
display: flex; |
|
justify-content: space-between; |
|
align-items: center; |
|
|
|
&__button { |
|
flex-shrink: 1; |
|
padding: 0 15px; |
|
overflow: hidden; |
|
|
|
.button { |
|
min-width: 0; |
|
white-space: nowrap; |
|
text-overflow: ellipsis; |
|
overflow: hidden; |
|
max-width: 100%; |
|
} |
|
} |
|
} |
|
|
|
&__counters { |
|
flex: 1 1 auto; |
|
display: grid; |
|
grid-auto-columns: minmax(0, 1fr); |
|
grid-auto-flow: column; |
|
max-width: 340px; |
|
min-width: 65px * 3; |
|
|
|
&__item { |
|
padding: 15px 0; |
|
text-align: center; |
|
color: $primary-text-color; |
|
font-weight: 600; |
|
font-size: 15px; |
|
line-height: 21px; |
|
|
|
small { |
|
display: block; |
|
color: $darker-text-color; |
|
font-weight: 400; |
|
font-size: 13px; |
|
line-height: 18px; |
|
} |
|
} |
|
} |
|
} |
|
|
|
.report-notes { |
|
margin-bottom: 20px; |
|
|
|
&__item { |
|
background: var(--background-color); |
|
position: relative; |
|
padding: 15px; |
|
padding-inline-start: 15px * 2 + 40px; |
|
border: 1px solid var(--background-border-color); |
|
|
|
&:first-child { |
|
border-top-left-radius: 4px; |
|
border-top-right-radius: 4px; |
|
} |
|
|
|
&:last-child { |
|
border-bottom-left-radius: 4px; |
|
border-bottom-right-radius: 4px; |
|
} |
|
|
|
&__avatar { |
|
position: absolute; |
|
inset-inline-start: 15px; |
|
top: 15px; |
|
border-radius: var(--avatar-border-radius); |
|
width: 40px; |
|
height: 40px; |
|
} |
|
|
|
&__header { |
|
color: $darker-text-color; |
|
font-size: 15px; |
|
line-height: 20px; |
|
margin-bottom: 4px; |
|
|
|
.username { |
|
color: $primary-text-color; |
|
font-weight: 500; |
|
margin-inline-end: 5px; |
|
|
|
a { |
|
color: inherit; |
|
text-decoration: none; |
|
|
|
&:hover, |
|
&:focus, |
|
&:active { |
|
text-decoration: underline; |
|
} |
|
} |
|
} |
|
|
|
a.timestamp { |
|
color: $darker-text-color; |
|
text-decoration: none; |
|
|
|
&:hover, |
|
&:focus, |
|
&:active { |
|
text-decoration: underline; |
|
} |
|
} |
|
|
|
time { |
|
margin-inline-start: 5px; |
|
vertical-align: baseline; |
|
} |
|
} |
|
|
|
&__content { |
|
font-size: 15px; |
|
line-height: 20px; |
|
overflow-wrap: break-word; |
|
font-weight: 400; |
|
color: $primary-text-color; |
|
|
|
p { |
|
margin-bottom: 20px; |
|
white-space: pre-wrap; |
|
unicode-bidi: plaintext; |
|
|
|
&:last-child { |
|
margin-bottom: 0; |
|
} |
|
} |
|
|
|
a { |
|
color: $highlight-text-color; |
|
text-decoration: none; |
|
|
|
&:hover { |
|
text-decoration: underline; |
|
} |
|
} |
|
} |
|
|
|
&__actions { |
|
position: absolute; |
|
top: 15px; |
|
inset-inline-end: 15px; |
|
text-align: end; |
|
} |
|
} |
|
} |
|
|
|
.report-actions { |
|
&__item { |
|
display: flex; |
|
align-items: center; |
|
line-height: 18px; |
|
|
|
&:last-child { |
|
border-bottom: 0; |
|
} |
|
|
|
&__button { |
|
box-sizing: border-box; |
|
flex: 0 0 auto; |
|
width: 200px; |
|
padding: 15px; |
|
padding-inline-end: 0; |
|
|
|
.button { |
|
display: block; |
|
width: 100%; |
|
} |
|
} |
|
|
|
&__description { |
|
padding: 15px; |
|
font-size: 14px; |
|
color: $dark-text-color; |
|
} |
|
} |
|
|
|
@media screen and (width <= 800px) { |
|
border: 0; |
|
|
|
&__item { |
|
flex-direction: column; |
|
border: 0; |
|
|
|
&__button { |
|
width: 100%; |
|
padding: 15px 0; |
|
} |
|
|
|
&__description { |
|
padding: 0; |
|
padding-bottom: 15px; |
|
} |
|
} |
|
} |
|
} |
|
|
|
.section-skip-link { |
|
float: right; |
|
|
|
a { |
|
color: $ui-highlight-color; |
|
text-decoration: none; |
|
|
|
&:hover, |
|
&:focus, |
|
&:active { |
|
text-decoration: underline; |
|
} |
|
} |
|
} |
|
|
|
.strike-card { |
|
padding: 15px; |
|
font-size: 15px; |
|
line-height: 20px; |
|
overflow-wrap: break-word; |
|
font-weight: 400; |
|
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; |
|
text-decoration: none; |
|
|
|
&:hover { |
|
text-decoration: underline; |
|
} |
|
} |
|
|
|
p { |
|
margin-bottom: 20px; |
|
unicode-bidi: plaintext; |
|
|
|
&:last-child { |
|
margin-bottom: 0; |
|
} |
|
|
|
strong { |
|
font-weight: 700; |
|
} |
|
} |
|
|
|
&__rules { |
|
list-style: disc; |
|
padding-inline-start: 15px; |
|
margin-bottom: 20px; |
|
color: $darker-text-color; |
|
|
|
&:last-child { |
|
margin-bottom: 0; |
|
} |
|
|
|
&__text { |
|
color: $primary-text-color; |
|
} |
|
} |
|
|
|
&__statuses-list { |
|
border-radius: 4px; |
|
border: 1px solid var(--background-border-color); |
|
font-size: 13px; |
|
line-height: 18px; |
|
overflow: hidden; |
|
|
|
&__item { |
|
padding: 16px; |
|
border-bottom: 1px solid var(--background-border-color); |
|
|
|
&:last-child { |
|
border-bottom: 0; |
|
} |
|
|
|
&__meta { |
|
color: $darker-text-color; |
|
} |
|
|
|
a { |
|
color: inherit; |
|
text-decoration: none; |
|
|
|
&:hover, |
|
&:focus, |
|
&:active { |
|
text-decoration: underline; |
|
} |
|
} |
|
} |
|
} |
|
} |
|
|
|
.availability-indicator { |
|
display: flex; |
|
align-items: center; |
|
margin-bottom: 30px; |
|
font-size: 14px; |
|
line-height: 21px; |
|
|
|
&__hint { |
|
padding: 0 15px; |
|
} |
|
|
|
&__graphic { |
|
display: flex; |
|
margin: 0 -2px; |
|
|
|
&__item { |
|
display: block; |
|
flex: 0 0 auto; |
|
width: 4px; |
|
height: 21px; |
|
background: lighten($ui-base-color, 8%); |
|
margin: 0 2px; |
|
border-radius: 2px; |
|
|
|
&.positive { |
|
background: $valid-value-color; |
|
} |
|
|
|
&.negative { |
|
background: $error-value-color; |
|
} |
|
} |
|
} |
|
} |
|
|
|
.history { |
|
counter-reset: step 0; |
|
font-size: 15px; |
|
line-height: 22px; |
|
|
|
> li { |
|
counter-increment: step 1; |
|
padding-inline-start: 2.5rem; |
|
padding-bottom: 8px; |
|
position: relative; |
|
margin-bottom: 8px; |
|
|
|
&::before { |
|
position: absolute; |
|
content: counter(step); |
|
font-size: 0.625rem; |
|
font-weight: 500; |
|
inset-inline-start: 0; |
|
display: flex; |
|
justify-content: center; |
|
align-items: center; |
|
width: calc(1.375rem + 1px); |
|
height: calc(1.375rem + 1px); |
|
background: $ui-base-color; |
|
border: 1px solid $highlight-text-color; |
|
color: $highlight-text-color; |
|
border-radius: 8px; |
|
} |
|
|
|
&::after { |
|
position: absolute; |
|
content: ''; |
|
width: 1px; |
|
background: $highlight-text-color; |
|
bottom: 0; |
|
top: calc(1.875rem + 1px); |
|
inset-inline-start: 0.6875rem; |
|
} |
|
|
|
&:last-child { |
|
margin-bottom: 0; |
|
|
|
&::after { |
|
display: none; |
|
} |
|
} |
|
} |
|
|
|
&__entry { |
|
h5 { |
|
font-weight: 500; |
|
color: $primary-text-color; |
|
line-height: 25px; |
|
margin-bottom: 16px; |
|
} |
|
|
|
.status { |
|
border: 1px solid lighten($ui-base-color, 4%); |
|
background: $ui-base-color; |
|
border-radius: 4px; |
|
} |
|
} |
|
} |
|
|
|
.status__card { |
|
padding: 15px; |
|
border-radius: 4px; |
|
font-size: 15px; |
|
line-height: 20px; |
|
overflow-wrap: break-word; |
|
font-weight: 400; |
|
border: 1px solid lighten($ui-base-color, 4%); |
|
color: $primary-text-color; |
|
box-sizing: border-box; |
|
min-height: 100%; |
|
|
|
&.status--has-quote { |
|
.quote-inline { |
|
display: none; |
|
} |
|
} |
|
|
|
.status__quote & { |
|
// Remove the border from the .status__card within .status__quote |
|
border: none; |
|
|
|
.display-name__account { |
|
line-height: inherit; |
|
} |
|
|
|
.status__avatar, |
|
.status__avatar .account__avatar { |
|
width: 32px; |
|
height: 32px; |
|
} |
|
} |
|
|
|
.status__prepend { |
|
padding: 0 0 15px; |
|
gap: 4px; |
|
align-items: center; |
|
} |
|
|
|
> details { |
|
summary { |
|
display: block; |
|
box-sizing: border-box; |
|
background: var(--nested-card-background); |
|
color: var(--nested-card-text); |
|
border: var(--nested-card-border); |
|
border-radius: 8px; |
|
padding: 8px 13px; |
|
position: relative; |
|
font-size: 15px; |
|
line-height: 22px; |
|
cursor: pointer; |
|
|
|
&::after { |
|
content: attr(data-show, 'Show more'); |
|
margin-top: 8px; |
|
display: block; |
|
font-size: 15px; |
|
line-height: 20px; |
|
color: $highlight-text-color; |
|
cursor: pointer; |
|
border: 0; |
|
background: transparent; |
|
padding: 0; |
|
text-decoration: none; |
|
font-weight: 500; |
|
} |
|
|
|
&:hover, |
|
&:focus-visible { |
|
&::after { |
|
text-decoration: underline !important; |
|
} |
|
} |
|
} |
|
|
|
&[open] summary { |
|
margin-bottom: 16px; |
|
|
|
&::after { |
|
content: attr(data-hide, 'Hide post'); |
|
} |
|
} |
|
} |
|
|
|
.preview-card { |
|
position: relative; |
|
max-width: 566px; |
|
|
|
.status-card__image { |
|
&--video { |
|
aspect-ratio: 16 / 9; |
|
} |
|
|
|
&--large { |
|
aspect-ratio: 1.91 / 1; |
|
} |
|
|
|
aspect-ratio: 1; |
|
} |
|
|
|
.spoiler-button__overlay__label { |
|
outline: 1px solid var(--media-outline-color); |
|
} |
|
|
|
.hide-button { |
|
// Toggled to appear when the preview-card is unblurred: |
|
display: none; |
|
position: absolute; |
|
top: 5px; |
|
right: 5px; |
|
color: $white; |
|
border: 0; |
|
outline: 1px solid var(--media-outline-color); |
|
background-color: color.change($black, $alpha: 0.45); |
|
backdrop-filter: $backdrop-blur-filter; |
|
padding: 3px 12px; |
|
border-radius: 99px; |
|
font-size: 14px; |
|
font-weight: 700; |
|
line-height: 20px; |
|
|
|
&:hover, |
|
&:focus { |
|
background-color: color.change($black, $alpha: 0.9); |
|
} |
|
} |
|
|
|
&.preview-card--image-visible { |
|
.hide-button { |
|
display: block; |
|
} |
|
|
|
.spoiler-button__overlay, |
|
.status-card__image-preview { |
|
display: none; |
|
} |
|
} |
|
} |
|
|
|
.detailed-status__meta { |
|
.detailed-status__application, |
|
.detailed-status__datetime, |
|
.detailed-status__link { |
|
color: inherit; |
|
} |
|
} |
|
} |
|
|
|
.admin { |
|
&__terms-of-service { |
|
&__container { |
|
background: var(--surface-background-color); |
|
border-radius: 8px; |
|
border: 1px solid var(--background-border-color); |
|
overflow: hidden; |
|
|
|
&__header { |
|
padding: 16px; |
|
font-size: 14px; |
|
line-height: 20px; |
|
color: $secondary-text-color; |
|
display: flex; |
|
align-items: center; |
|
gap: 12px; |
|
} |
|
|
|
&__body { |
|
background: var(--background-color); |
|
padding: 16px; |
|
overflow-y: scroll; |
|
height: 30vh; |
|
} |
|
} |
|
|
|
&__history { |
|
& > li { |
|
border-bottom: 1px solid var(--background-border-color); |
|
|
|
&:last-child { |
|
border-bottom: 0; |
|
} |
|
} |
|
|
|
&__item { |
|
padding: 16px 0; |
|
padding-bottom: 8px; |
|
|
|
h5 { |
|
font-size: 14px; |
|
line-height: 20px; |
|
font-weight: 600; |
|
margin-bottom: 16px; |
|
|
|
a { |
|
color: inherit; |
|
text-decoration: none; |
|
} |
|
} |
|
} |
|
} |
|
} |
|
} |
|
|
|
.dot-indicator { |
|
display: inline-flex; |
|
align-items: center; |
|
gap: 8px; |
|
font-weight: 500; |
|
|
|
&__indicator { |
|
display: inline-block; |
|
width: 8px; |
|
height: 8px; |
|
border-radius: 50%; |
|
background: $dark-text-color; |
|
} |
|
|
|
&.success { |
|
color: $valid-value-color; |
|
|
|
.dot-indicator__indicator { |
|
background-color: $valid-value-color; |
|
} |
|
} |
|
}
|
|
|