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.
1841 lines
26 KiB
1841 lines
26 KiB
/* |
|
GoToSocial |
|
Copyright (C) 2021-2023 GoToSocial Authors admin@gotosocial.org |
|
|
|
This program is free software: you can redistribute it and/or modify |
|
it under the terms of the GNU Affero General Public License as published by |
|
the Free Software Foundation, either version 3 of the License, or |
|
(at your option) any later version. |
|
|
|
This program is distributed in the hope that it will be useful, |
|
but WITHOUT ANY WARRANTY; without even the implied warranty of |
|
MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the |
|
GNU Affero General Public License for more details. |
|
|
|
You should have received a copy of the GNU Affero General Public License |
|
along with this program. If not, see <http://www.gnu.org/licenses/>. |
|
*/ |
|
|
|
/* |
|
This source file uses PostCSS syntax. |
|
See: https://postcss.org/ |
|
*/ |
|
|
|
body { |
|
grid-template-rows: auto 1fr; |
|
} |
|
|
|
.page-content { |
|
grid-column: 1 / span 3; /* stretch entire width, to fit panel + sidebar nav */ |
|
width: 100%; |
|
} |
|
|
|
/* Don't inherit orange dot from base.css. */ |
|
ul li::before { |
|
content: initial; |
|
} |
|
|
|
#root { |
|
box-sizing: border-box; |
|
display: flex; |
|
justify-content: center; |
|
flex-wrap: wrap; |
|
margin: 0 1rem; |
|
gap: 1rem; |
|
|
|
section.oauth { |
|
max-width: 92%; |
|
width: 60rem; |
|
} |
|
|
|
section.with-sidebar { |
|
flex-grow: 100; |
|
flex-basis: 40rem; |
|
background: $bg-accent; |
|
padding: 2rem; |
|
border-radius: $br; |
|
max-width: 100%; |
|
|
|
& > div, |
|
& > form { |
|
display: flex; |
|
flex-direction: column; |
|
margin: 1rem 0; |
|
|
|
h1, h2, h3, h4, h5 { |
|
margin: 0; |
|
} |
|
|
|
&:first-child { |
|
margin-top: 0; |
|
} |
|
|
|
&:last-child { |
|
margin-bottom: 0; |
|
} |
|
} |
|
|
|
& > .error { |
|
display: grid; /* prevents error overflowing */ |
|
} |
|
} |
|
|
|
.sidebar { |
|
flex-grow: 1; |
|
flex-basis: 20rem; |
|
align-self: start; |
|
justify-self: end; |
|
background: $bg; |
|
display: flex; |
|
flex-direction: column; |
|
|
|
.account-card { |
|
grid-template-columns: auto 1fr auto; |
|
|
|
img.avatar { |
|
width: 4rem; |
|
height: 4rem; |
|
} |
|
|
|
span { |
|
grid-row: 2; |
|
} |
|
|
|
.logout { |
|
font-size: 1.5rem; |
|
align-self: center; |
|
grid-row: 1 / span 2; |
|
} |
|
|
|
&:hover { |
|
background: $list-entry-bg; |
|
} |
|
} |
|
} |
|
} |
|
|
|
nav.menu-tree { |
|
ul { |
|
display: flex; |
|
flex-direction: column; |
|
list-style-type: none; |
|
margin: 0; |
|
padding: 0; |
|
} |
|
|
|
.icon { |
|
margin-right: 0.5rem; |
|
} |
|
|
|
/* top-level ul */ |
|
& > ul { |
|
gap: 0.3rem; |
|
padding: 0.2rem; |
|
} |
|
|
|
li.top-level { /* top-level categories, orange all-caps titles */ |
|
border-top: 0.1rem solid $gray3; |
|
display: flex; |
|
flex-direction: column; |
|
gap: 0.3rem; |
|
margin: 0; |
|
|
|
& > a.title { |
|
text-decoration: none; |
|
color: $settings-nav-header-fg; |
|
padding: 0.5rem; |
|
padding-bottom: 0; |
|
margin: 0; |
|
font-size: 0.8rem; |
|
font-weight: bold; |
|
text-transform: uppercase; |
|
} |
|
|
|
& > ul { |
|
gap: 0.2rem; |
|
} |
|
} |
|
|
|
li.expanding { /* second-level categories, expanding box, active shows nested */ |
|
a { |
|
display: block; |
|
color: $fg; |
|
text-decoration: none; |
|
|
|
border: 0.1rem solid transparent; |
|
border-radius: $br; |
|
padding: 0.5rem; |
|
transition: background 0.1s; |
|
|
|
&:hover { |
|
color: $settings-nav-fg-hover; |
|
background: $settings-nav-bg-hover; |
|
} |
|
|
|
&:focus, &:active { |
|
border-color: $settings-nav-border-active; |
|
outline: none; |
|
} |
|
} |
|
|
|
&.active { |
|
border: 0.1rem solid $settings-nav-border-active; |
|
border-radius: $br; |
|
overflow: hidden; |
|
|
|
a { |
|
transition: background 0s; |
|
border: none; |
|
color: $settings-nav-fg-active; |
|
background: $settings-nav-bg-active; |
|
font-weight: bold; |
|
border-radius: 0; |
|
} |
|
} |
|
} |
|
|
|
/* Deeper nesting. */ |
|
li.nested { |
|
a.title { |
|
padding-left: 1rem; |
|
font-weight: normal; |
|
color: $fg; |
|
background: $gray4; |
|
|
|
&:focus { |
|
color: $fg-accent; |
|
outline: none; |
|
} |
|
|
|
&:hover { |
|
background: $settings-nav-bg-hover; |
|
} |
|
} |
|
|
|
&.active > a.title { |
|
color: $fg-accent; |
|
font-weight: bold; |
|
} |
|
|
|
&.category { |
|
& > a.title { |
|
&::after { |
|
content: "▶"; |
|
left: 0.8rem; |
|
bottom: 0.1rem; |
|
position: relative; |
|
} |
|
} |
|
|
|
&.active { |
|
& > a.title { |
|
&::after { |
|
content: "▼"; |
|
bottom: 0; |
|
} |
|
|
|
border-bottom: 0.15rem dotted $gray1; |
|
} |
|
} |
|
|
|
li.nested > a.title { |
|
padding-left: 2rem; |
|
} |
|
} |
|
} |
|
} |
|
|
|
.capitalize { |
|
text-transform: capitalize; |
|
} |
|
|
|
input, select, textarea { |
|
box-sizing: border-box; |
|
} |
|
|
|
.error { |
|
color: $error-fg; |
|
background: $error-bg; |
|
border: 0.02rem solid $error-fg; |
|
border-radius: $br; |
|
font-weight: bold; |
|
padding: 0.5rem; |
|
white-space: pre-wrap; |
|
position: relative; |
|
|
|
a { |
|
color: $error-link; |
|
} |
|
|
|
.details { |
|
max-width: 100%; |
|
overflow: hidden; |
|
display: flex; |
|
flex-direction: column; |
|
gap: 0.5rem; |
|
} |
|
|
|
pre { |
|
background: $bg; |
|
color: $fg; |
|
padding: 1rem; |
|
overflow: auto; |
|
margin: 0; |
|
} |
|
|
|
&.with-dismiss { |
|
display: flex; |
|
gap: 1rem; |
|
justify-content: space-between; |
|
align-items: center; |
|
align-items: center; |
|
flex-wrap: wrap; |
|
align-items: center; |
|
flex-wrap: wrap; |
|
|
|
.dismiss { |
|
display: flex; |
|
flex-shrink: 0; |
|
align-items: center; |
|
align-self: stretch; |
|
gap: 0.25rem; |
|
} |
|
} |
|
} |
|
|
|
|
|
|
|
.hidden { |
|
display: none; |
|
} |
|
|
|
.notImplemented { |
|
border: 2px solid rgb(70, 79, 88); |
|
background: repeating-linear-gradient( |
|
-45deg, |
|
#525c66, |
|
#525c66 10px, |
|
rgb(70, 79, 88) 10px, |
|
rgb(70, 79, 88) 20px |
|
) !important; |
|
} |
|
|
|
section.with-sidebar > div, |
|
section.with-sidebar > form { |
|
display: flex; |
|
flex-direction: column; |
|
gap: 1rem; |
|
|
|
input, textarea { |
|
width: 100%; |
|
line-height: 1.5rem; |
|
} |
|
|
|
button { |
|
width: auto; |
|
align-self: flex-start; |
|
line-height: 1.5rem; |
|
} |
|
|
|
input[type=checkbox] { |
|
justify-self: start; |
|
width: initial; |
|
} |
|
|
|
textarea { |
|
width: 100%; |
|
} |
|
|
|
h1 { |
|
margin-bottom: 0.5rem; |
|
} |
|
|
|
.docslink { |
|
font-size: 0.9em; |
|
} |
|
|
|
.form-section-docs { |
|
margin-top: 1rem; |
|
margin-bottom: 0.5rem; |
|
|
|
border-left: 0.2rem solid $border-accent; |
|
padding-left: 0.4rem; |
|
|
|
display: flex; |
|
flex-direction: column; |
|
gap: 0.2rem; |
|
} |
|
|
|
.labelinput .border { |
|
border-radius: 0.2rem; |
|
border: 0.15rem solid $border-accent; |
|
padding: 0.3rem; |
|
display: flex; |
|
flex-direction: column; |
|
} |
|
|
|
.file-input.button { |
|
display: inline-block; |
|
font-size: 1rem; |
|
font-weight: normal; |
|
padding: 0.3rem 0.3rem; |
|
align-self: flex-start; |
|
margin-right: 0.2rem; |
|
} |
|
|
|
.labelinput, .labelselect { |
|
display: flex; |
|
flex-direction: column; |
|
gap: 0.4rem; |
|
} |
|
|
|
.labelcheckbox { |
|
display: flex; |
|
gap: 0.4rem; |
|
} |
|
|
|
.titlesave { |
|
display: flex; |
|
flex-wrap: wrap; |
|
gap: 0.4rem; |
|
} |
|
|
|
.select-wrapper { |
|
/* |
|
Selects are normalized in base.css to not have a down arrow on the side. |
|
Overcome this on settings panel forms by replacing the down arrow. |
|
*/ |
|
position: relative; |
|
&::after { |
|
content: "▼"; |
|
font-size: 0.8rem; |
|
top: 0.3rem; |
|
right: 1rem; |
|
position: absolute; |
|
} |
|
} |
|
} |
|
|
|
.form-flex { |
|
display: flex; |
|
flex-direction: column; |
|
gap: 1rem; |
|
} |
|
|
|
.file-upload { |
|
.file-upload-with-preview { |
|
display: flex; |
|
gap: 1rem; |
|
|
|
img { |
|
height: 8rem; |
|
border: 0.2rem solid $border-accent; |
|
} |
|
|
|
img.avatar { |
|
width: 8rem; |
|
} |
|
|
|
img.header { |
|
width: 24rem; |
|
} |
|
} |
|
} |
|
|
|
.file-input-with-image-description { |
|
display: flex; |
|
flex-direction: column; |
|
justify-content: space-around; |
|
gap: 0.5rem; |
|
|
|
.delete-header-button, |
|
.delete-avatar-button { |
|
margin-top: 0.5rem; |
|
font-size: 1rem; |
|
} |
|
} |
|
|
|
/* |
|
Normalize mock profile and make profile |
|
header preview pop a bit nicer. |
|
*/ |
|
.profile { |
|
padding: 0; |
|
|
|
& > .profile-header { |
|
margin-bottom: 0; |
|
border: 0.1rem solid $gray1; |
|
} |
|
} |
|
|
|
.user-profile { |
|
.profile { |
|
max-width: 42rem; |
|
} |
|
|
|
.file-input-with-image-description { |
|
max-width: 100%; |
|
width: 100%; |
|
} |
|
|
|
.overview { |
|
display: flex; |
|
flex-direction: column; |
|
gap: 1rem; |
|
|
|
.files { |
|
width: 100%; |
|
display: flex; |
|
flex-direction: column; |
|
justify-content: center; |
|
gap: 1rem; |
|
|
|
span { |
|
font-style: italic; |
|
} |
|
} |
|
} |
|
|
|
.theme, .form-field.radio { |
|
display: flex; |
|
flex-direction: column; |
|
gap: 0.5rem; |
|
} |
|
|
|
fieldset { |
|
margin: 0; |
|
padding: 0.5rem 1rem 1rem 1rem; |
|
max-width: fit-content; |
|
border: 0.1rem solid var(--gray1); |
|
border-radius: 0.1rem; |
|
|
|
>legend { |
|
font-weight: bold; |
|
} |
|
|
|
.fields { |
|
display: flex; |
|
flex-direction: column; |
|
gap: 0.5rem; |
|
|
|
.entry { |
|
display: flex; |
|
gap: 0.5rem; |
|
} |
|
} |
|
} |
|
} |
|
|
|
.migration-details { |
|
display: flex; |
|
flex-direction: column; |
|
gap: 1rem; |
|
|
|
background-color: $gray2; |
|
padding: 1rem; |
|
max-width: fit-content; |
|
border-radius: $br; |
|
|
|
& > div { |
|
display: flex; |
|
flex-direction: column; |
|
gap: 0.25rem; |
|
|
|
& > dd { |
|
font-weight: bold; |
|
word-wrap: anywhere; |
|
} |
|
} |
|
} |
|
|
|
.user-migration-alias { |
|
.aliases { |
|
display: flex; |
|
flex-direction: column; |
|
gap: 0.5rem; |
|
} |
|
} |
|
|
|
form { |
|
display: flex; |
|
flex-direction: column; |
|
gap: 0.5rem; |
|
} |
|
|
|
.form-field label { |
|
font-weight: bold; |
|
} |
|
|
|
.form-field.file { |
|
display: flex; |
|
position: relative; |
|
overflow: hidden; |
|
|
|
.label-wrapper { |
|
width: fit-content; |
|
display: flex; |
|
flex-direction: column; |
|
&:focus-visible { |
|
outline: 0.15rem dashed $button-focus-border; |
|
outline-offset: -0.15rem; |
|
} |
|
} |
|
|
|
.form-info { |
|
position: absolute; |
|
font-weight: initial; |
|
align-self: end; |
|
margin-left: 4.25rem; |
|
margin-bottom: 0.3rem; |
|
|
|
.error { |
|
padding: 0.1rem; |
|
line-height: 1.4rem; |
|
} |
|
} |
|
} |
|
|
|
.checkbox-list { |
|
.header, .entry { |
|
display: grid; |
|
gap: 0 1rem; |
|
} |
|
} |
|
|
|
.pageable-list { |
|
display: flex; |
|
flex-direction: column; |
|
gap: 0.5rem; |
|
|
|
.entries { |
|
color: $fg; |
|
border: 0.1rem solid var(--gray1); |
|
} |
|
|
|
.prev-next { |
|
display: flex; |
|
justify-content: space-between; |
|
} |
|
} |
|
|
|
section > div.domain-block, |
|
section > div.domain-allow { |
|
height: 100%; |
|
|
|
> a { |
|
margin-top: auto; |
|
} |
|
} |
|
|
|
.domain-permissions-list { |
|
p { |
|
margin-top: 0; |
|
} |
|
|
|
.filter { |
|
display: flex; |
|
gap: 0.5rem; |
|
|
|
button { |
|
width: 100%; |
|
} |
|
} |
|
|
|
.entry { |
|
padding: 0.5rem; |
|
margin: 0.2rem 0; |
|
|
|
#domain { |
|
flex: 1 1 auto; |
|
overflow: hidden; |
|
white-space: nowrap; |
|
text-overflow: ellipsis; |
|
} |
|
} |
|
} |
|
|
|
.bulk h2 { |
|
display: flex; |
|
justify-content: space-between; |
|
} |
|
|
|
.emoji-list { |
|
background: $list-entry-bg; |
|
|
|
.header .form-field { |
|
flex: 1 1 auto; |
|
} |
|
|
|
.entry { |
|
flex-direction: column; |
|
|
|
b { |
|
padding-left: 0.4rem; |
|
} |
|
|
|
.emoji-group { |
|
display: flex; |
|
flex-wrap: wrap; |
|
|
|
a { |
|
border-radius: $br; |
|
padding: 0.4rem; |
|
line-height: 0; |
|
|
|
img { |
|
height: 2rem; |
|
width: 2rem; |
|
object-fit: contain; |
|
vertical-align: middle; |
|
} |
|
|
|
&:hover { |
|
background: $list-entry-hover-bg; |
|
} |
|
} |
|
} |
|
|
|
&:hover { |
|
background: inherit; |
|
} |
|
} |
|
} |
|
|
|
.toot { |
|
padding-top: 0.5rem; |
|
.contentgrid { |
|
padding: 0 0.5rem; |
|
} |
|
} |
|
|
|
@media screen and (max-width: 60rem) { |
|
/* vertical layout */ |
|
#root { |
|
padding: 0.5rem; |
|
margin: 0; |
|
grid-template-columns: 100%; |
|
grid-template-rows: auto auto; |
|
|
|
div.sidebar { |
|
justify-self: auto; |
|
margin-bottom: 0; |
|
} |
|
|
|
div.sidebar, section.with-sidebar { |
|
border-top-left-radius: $br; |
|
border-top-right-radius: $br; |
|
border-bottom-left-radius: $br; |
|
border-bottom-right-radius: $br; |
|
} |
|
|
|
section.with-sidebar { |
|
grid-column: 1; |
|
padding: 1rem; |
|
} |
|
|
|
div.sidebar a:first-child h2 { |
|
border-top-right-radius: $br; |
|
} |
|
} |
|
|
|
.user-profile .overview { |
|
grid-template-columns: auto; |
|
grid-template-rows: auto 1fr; |
|
} |
|
|
|
main section { |
|
padding: 0.75rem; |
|
} |
|
|
|
.domain-permissions-list .filter { |
|
flex-direction: column; |
|
} |
|
} |
|
|
|
.combobox-wrapper { |
|
display: flex; |
|
flex-direction: column; |
|
|
|
input[aria-expanded="true"] { |
|
border-bottom: none; |
|
} |
|
} |
|
|
|
.combobox { |
|
height: 2.5rem; |
|
font-size: 1rem; |
|
line-height: 1.5rem; |
|
} |
|
|
|
.popover { |
|
position: relative; |
|
z-index: 50; |
|
display: flex; |
|
max-height: min(var(--popover-available-height,300px),300px); |
|
flex-direction: column; |
|
overflow: auto; |
|
overscroll-behavior: contain; |
|
border: 0.15rem solid $orange2; |
|
background: $bg-accent; |
|
} |
|
|
|
.combobox-item { |
|
display: flex; |
|
cursor: pointer; |
|
scroll-margin: 0.5rem; |
|
align-items: center; |
|
gap: 0.5rem; |
|
padding: 0.5rem; |
|
line-height: 1.5rem; |
|
border-bottom: 0.15rem solid $gray3; |
|
|
|
&:last-child { |
|
border: none; |
|
} |
|
|
|
img { |
|
height: 1.5rem; |
|
width: 1.5rem; |
|
object-fit: contain; |
|
} |
|
} |
|
|
|
.combobox-item:hover { |
|
background: $button-hover-bg; |
|
color: $button-fg; |
|
} |
|
|
|
.combobox-item[data-active-item] { |
|
background: $button-hover-bg; |
|
color: hsl(204 20% 100%); |
|
} |
|
|
|
.row { |
|
display: flex; |
|
gap: 0.5rem; |
|
} |
|
|
|
.emoji-detail { |
|
display: flex; |
|
flex-direction: column; |
|
gap: 1rem !important; |
|
|
|
& > a { |
|
align-self: flex-start; |
|
} |
|
|
|
.emoji-header { |
|
display: flex; |
|
align-items: center; |
|
gap: 0.5rem; |
|
|
|
div { |
|
display: flex; |
|
flex-direction: column; |
|
gap: 0.5rem; |
|
} |
|
|
|
img { |
|
height: 8.5rem; |
|
width: 8.5rem; |
|
border: 0.2rem solid $border-accent; |
|
object-fit: contain; |
|
padding: 0.5rem; |
|
} |
|
} |
|
|
|
.update-category { |
|
.combobox-wrapper button { |
|
font-size: 1rem; |
|
margin: 0.15rem 0; |
|
} |
|
|
|
.row { |
|
margin-top: 0.1rem; |
|
} |
|
} |
|
|
|
.update-image { |
|
display: flex; |
|
flex-direction: column; |
|
gap: 0.5rem; |
|
} |
|
} |
|
|
|
.left-border { |
|
border-left: 0.2rem solid $border-accent; |
|
padding-left: 0.4rem; |
|
} |
|
|
|
.parse-emoji { |
|
.parsed { |
|
margin-top: 0.5rem; |
|
display: flex; |
|
flex-direction: column; |
|
gap: 1rem; |
|
|
|
span { |
|
margin-bottom: -0.5rem; |
|
} |
|
|
|
.action-buttons { |
|
gap: 1rem; |
|
} |
|
|
|
.checkbox-list { |
|
.entry { |
|
grid-template-columns: auto auto 1fr; |
|
} |
|
|
|
.emoji { |
|
height: 2rem; |
|
width: 2rem; |
|
margin: 0; |
|
} |
|
} |
|
} |
|
} |
|
|
|
.info { |
|
color: $info-fg; |
|
background: $info-bg; |
|
padding: 0.25rem; |
|
border-radius: $br; |
|
|
|
display: flex; |
|
gap: 0.5rem; |
|
align-items: center; |
|
|
|
a { |
|
color: $info-link; |
|
} |
|
|
|
p { |
|
margin-top: 0; |
|
} |
|
} |
|
|
|
.mutation-button { |
|
width: fit-content; |
|
display: flex; |
|
flex-direction: column; |
|
gap: 1rem; |
|
} |
|
|
|
button.with-icon, |
|
.button.with-icon { |
|
display: flex; |
|
align-content: center; |
|
padding-right: calc(0.5rem + $fa-fw); |
|
|
|
.fa { |
|
align-self: center; |
|
} |
|
} |
|
|
|
button.with-padding { |
|
padding: 0.5rem calc(0.5rem + $fa-fw); |
|
} |
|
|
|
.tab-buttons { |
|
display: flex; |
|
max-width: fit-content; |
|
justify-content: space-between; |
|
gap: 0.15rem; |
|
} |
|
|
|
button.tab-button { |
|
border-top-left-radius: $br; |
|
border-top-right-radius: $br; |
|
border-bottom-left-radius: 0; |
|
border-bottom-right-radius: 0; |
|
box-shadow: none; |
|
background: $blue1; |
|
|
|
&:hover { |
|
background: $button-hover-bg; |
|
} |
|
|
|
text-overflow: ellipsis; |
|
overflow: hidden; |
|
white-space: nowrap; |
|
|
|
font-size: 1rem; |
|
|
|
@media screen and (max-width: 20rem) { |
|
font-size: 0.75rem; |
|
} |
|
|
|
&.active { |
|
background: $button-bg; |
|
cursor: default; |
|
} |
|
} |
|
|
|
.loading-icon { |
|
align-self: flex-start; |
|
} |
|
|
|
.fadeout { |
|
animation-name: fadeout; |
|
animation-duration: 0.5s; |
|
animation-delay: 2s; |
|
animation-fill-mode: forwards; |
|
} |
|
|
|
.domain-perm-import-list { |
|
.checkbox-list-wrapper { |
|
display: grid; |
|
gap: 1rem; |
|
} |
|
|
|
.checkbox-list { |
|
overflow-x: auto; |
|
|
|
.header { |
|
align-items: center; |
|
input[type="checkbox"] { |
|
height: 1.5rem; |
|
} |
|
} |
|
|
|
.entry { |
|
grid-template-columns: auto max(50%, 14rem) 1fr; |
|
column-gap: 1rem; |
|
align-items: center; |
|
|
|
.domain-input { |
|
display: grid; |
|
grid-template-columns: 1fr $fa-fw; |
|
gap: 0.5rem; |
|
|
|
#icon { |
|
align-self: center; |
|
|
|
.permission-already-exists { |
|
color: $green1; |
|
} |
|
|
|
.suggest-changes { |
|
color: $orange2; |
|
} |
|
} |
|
} |
|
|
|
p { |
|
margin: 0; |
|
} |
|
} |
|
} |
|
|
|
.set-comment-checkbox { |
|
display: flex; |
|
flex-direction: column; |
|
gap: 0.25rem; |
|
|
|
padding: 0.5rem 1rem 1rem 1rem; |
|
width: 100%; |
|
border: 0.1rem solid var(--gray1); |
|
border-radius: 0.1rem; |
|
} |
|
} |
|
|
|
.import-export { |
|
p { |
|
margin: 0; |
|
} |
|
|
|
.export-file { |
|
display: flex; |
|
gap: 0.7rem; |
|
align-items: center; |
|
} |
|
|
|
.form-field.radio { |
|
display: flex; |
|
flex-direction: column; |
|
margin-left: 0.5rem; |
|
} |
|
|
|
.button-grid { |
|
display: inline-grid; |
|
grid-template-columns: auto auto auto; |
|
align-self: start; |
|
gap: 0.5rem; |
|
|
|
button { |
|
width: 100%; |
|
} |
|
} |
|
} |
|
|
|
@media screen and (max-width: 35rem) { |
|
.import-export { |
|
.button-grid { |
|
grid-template-columns: auto auto; |
|
|
|
b { /* filler item */ |
|
display: none; |
|
} |
|
|
|
& > * { |
|
grid-column: 1 / span 2; |
|
justify-self: start; |
|
} |
|
|
|
.export-file-button, .export-file { |
|
grid-column: span 1; |
|
} |
|
} |
|
} |
|
} |
|
|
|
.update-hints { |
|
background: $list-entry-alternate-bg; |
|
border: 0.1rem solid $border-accent; |
|
/* border-radius: $br; */ |
|
padding: 0.5rem; |
|
display: flex; |
|
flex-direction: column; |
|
|
|
.hints { |
|
max-width: 100%; |
|
align-self: start; |
|
align-items: center; |
|
margin: 1rem 0; |
|
display: inline-grid; |
|
grid-template-columns: auto auto auto auto; |
|
gap: 1rem; |
|
} |
|
} |
|
|
|
.export-format-table-wrapper { |
|
overflow-x: auto; |
|
|
|
&, th, td { |
|
border: 0.1rem solid $gray1 !important; |
|
} |
|
|
|
.export-format-table { |
|
background: $list-entry-alternate-bg; |
|
border-style: hidden; |
|
border-collapse: collapse; |
|
|
|
th, td { |
|
padding: 0.3rem; |
|
} |
|
|
|
th { |
|
background: $list-entry-bg; |
|
} |
|
|
|
td { |
|
text-align: center; |
|
|
|
.fa-check { |
|
color: $green1; |
|
} |
|
|
|
.fa-times { |
|
color: $error3; |
|
} |
|
} |
|
} |
|
} |
|
|
|
.form-field.radio { |
|
&, label { |
|
display: flex; |
|
gap: 0.5rem; |
|
} |
|
|
|
input { |
|
width: auto; |
|
place-self: center; |
|
} |
|
} |
|
|
|
.reports-view { |
|
.report { |
|
display: flex; |
|
flex-direction: column; |
|
flex-wrap: nowrap; |
|
gap: 0.5rem; |
|
color: $fg; |
|
border-left: 0.3rem solid $border-accent; |
|
|
|
.username-lozenge { |
|
display: flex; |
|
flex-wrap: nowrap; |
|
height: 100%; |
|
align-items: center; |
|
padding-top: 0; |
|
padding-bottom: 0; |
|
|
|
.fa { |
|
flex-shrink: 0; |
|
} |
|
} |
|
|
|
.report-byline { |
|
max-width: fit-content; |
|
} |
|
|
|
.info-list { |
|
border: none; |
|
|
|
.info-list-entry { |
|
background: none; |
|
padding: 0; |
|
|
|
.report-target .username-lozenge { |
|
color: $bg; |
|
} |
|
|
|
.reported-by .username-lozenge { |
|
color: $fg; |
|
font-weight: initial; |
|
border-radius: 0; |
|
background: none; |
|
} |
|
} |
|
} |
|
|
|
&.resolved { |
|
border-left: 0.3rem solid $list-entry-bg; |
|
|
|
.info-list, |
|
.info-list .info-list-entry .reported-by .username-lozenge { |
|
color: $fg-reduced; |
|
} |
|
|
|
&:hover { |
|
border-color: $fg-accent; |
|
} |
|
} |
|
|
|
&.detail { |
|
border: none; |
|
padding: 0; |
|
} |
|
} |
|
} |
|
|
|
.report-detail { |
|
.info-list { |
|
|
|
&.overview { |
|
margin-top: 1rem; |
|
} |
|
|
|
.username-lozenge { |
|
display: flex; |
|
flex-wrap: nowrap; |
|
height: 100%; |
|
align-items: center; |
|
padding-top: 0; |
|
padding-bottom: 0; |
|
max-width: fit-content; |
|
|
|
.fa { |
|
flex-shrink: 0; |
|
} |
|
} |
|
} |
|
|
|
.report-statuses { |
|
width: min(100%, 50rem); |
|
|
|
.thread { |
|
display: flex; |
|
flex-direction: column; |
|
gap: 2rem; |
|
padding: 0; |
|
} |
|
} |
|
} |
|
|
|
.accounts-view { |
|
.pageable-list { |
|
.username-lozenge { |
|
line-height: inherit; |
|
color: $fg; |
|
font-weight: initial; |
|
width: 100%; |
|
border-radius: 0; |
|
background: $list-entry-bg; |
|
|
|
.fa { |
|
align-self: center; |
|
} |
|
|
|
&:nth-child(even) { |
|
background: $list-entry-alternate-bg; |
|
} |
|
|
|
.acct { |
|
color: var(--link-fg); |
|
} |
|
} |
|
} |
|
} |
|
|
|
.account-detail { |
|
display: flex; |
|
flex-direction: column; |
|
gap: 1rem; |
|
|
|
.profile { |
|
overflow: hidden; |
|
max-width: 60rem; |
|
margin-top: 1rem; |
|
} |
|
|
|
h4, h3, h2 { |
|
margin-top: 0; |
|
margin-bottom: 0; |
|
} |
|
|
|
.action-buttons { |
|
display: flex; |
|
gap: 0.5rem; |
|
align-items: center; |
|
} |
|
} |
|
|
|
.username-lozenge { |
|
line-height: 1.3rem; |
|
display: inline-block; |
|
background: $fg-accent; |
|
color: $bg; |
|
border-radius: $br; |
|
padding: 0.15rem; |
|
font-weight: bold; |
|
text-decoration: none; |
|
|
|
.acct { |
|
word-break: break-all; |
|
} |
|
|
|
&.suspended { |
|
background: $bg-accent; |
|
color: $fg; |
|
text-decoration: line-through; |
|
} |
|
|
|
&.local { |
|
background: $green1; |
|
} |
|
} |
|
|
|
.pseudolink { |
|
cursor: pointer; |
|
text-decoration: none; |
|
&:focus-visible { |
|
outline: 0.15rem dotted $button-focus-border; |
|
} |
|
} |
|
|
|
.info-list { |
|
border: 0.1rem solid $gray1; |
|
display: flex; |
|
flex-direction: column; |
|
|
|
.info-list-entry { |
|
background: $list-entry-bg; |
|
border: 0.1rem solid transparent; |
|
padding: 0.25rem; |
|
|
|
&:nth-child(even) { |
|
background: $list-entry-alternate-bg; |
|
} |
|
|
|
display: grid; |
|
grid-template-columns: max(20%, 10rem) 1fr; |
|
|
|
dt { |
|
font-weight: bold; |
|
} |
|
|
|
dd { |
|
word-break: break-word; |
|
} |
|
|
|
dt, dd, span { |
|
/* |
|
Make sure any fa icons used in keys |
|
or values etc. are properly aligned. |
|
*/ |
|
.fa { |
|
vertical-align: middle; |
|
} |
|
} |
|
} |
|
} |
|
|
|
.domain-permission-drafts-view, |
|
.domain-permission-excludes-view, |
|
.domain-permission-subscriptions-view, |
|
.domain-permission-subscriptions-preview { |
|
.domain-permission-draft, |
|
.domain-permission-exclude, |
|
.domain-permission-subscription { |
|
display: flex; |
|
flex-direction: column; |
|
flex-wrap: nowrap; |
|
gap: 0.5rem; |
|
|
|
&.block { |
|
border-left: 0.3rem solid $error3; |
|
} |
|
|
|
&.allow { |
|
border-left: 0.3rem solid $green1; |
|
} |
|
|
|
&:hover { |
|
border-color: $fg-accent; |
|
} |
|
|
|
.info-list { |
|
border: none; |
|
|
|
.info-list-entry { |
|
background: none; |
|
padding: 0; |
|
} |
|
} |
|
|
|
.action-buttons { |
|
display: flex; |
|
gap: 0.5rem; |
|
align-items: center; |
|
|
|
> .mutation-button |
|
> button { |
|
font-size: 1rem; |
|
line-height: 1rem; |
|
} |
|
} |
|
} |
|
} |
|
|
|
.domain-permission-details, |
|
.domain-permission-draft-details, |
|
.domain-permission-exclude-details, |
|
.domain-permission-subscription-details { |
|
.info-list { |
|
margin-top: 1rem; |
|
} |
|
} |
|
|
|
.domain-permission-details, |
|
.domain-permission-drafts-view, |
|
.domain-permission-draft-details, |
|
.domain-permission-subscriptions-view, |
|
.domain-permission-subscription-details, |
|
.domain-permission-subscriptions-preview { |
|
dd.permission-type { |
|
display: flex; |
|
gap: 0.35rem; |
|
align-items: center; |
|
} |
|
} |
|
|
|
.domain-permission-subscription-details { |
|
> .list > .entries > .perm-preview { |
|
gap: 0.5rem; |
|
} |
|
|
|
> .perm-issue > b > code { |
|
background: $info-bg; |
|
padding: 0; |
|
} |
|
} |
|
|
|
|
|
.domain-permission-subscription-title { |
|
font-size: 1.2rem; |
|
font-weight: bold; |
|
} |
|
|
|
.domain-permission-subscription-create, |
|
.domain-permission-subscription-update { |
|
gap: 1rem; |
|
|
|
.password-show-hide { |
|
display: flex; |
|
gap: 0.5rem; |
|
|
|
.form-field.text { |
|
flex: 1; |
|
} |
|
|
|
.password-show-hide-toggle { |
|
font-size: 1rem; |
|
line-height: 1.4rem; |
|
align-self: flex-end; |
|
} |
|
} |
|
} |
|
|
|
.domain-permission-subscription-remove, |
|
.domain-permission-subscription-test { |
|
gap: 1rem; |
|
} |
|
|
|
.tokens-view { |
|
.token-info { |
|
.info-list { |
|
border: none; |
|
width: 100%; |
|
|
|
.info-list-entry { |
|
background: none; |
|
padding: 0; |
|
} |
|
|
|
> .info-list-entry > .monospace { |
|
font-size: large; |
|
} |
|
} |
|
|
|
.action-buttons { |
|
margin-top: 0.5rem; |
|
> .mutation-button |
|
> button { |
|
font-size: 1rem; |
|
line-height: 1rem; |
|
} |
|
} |
|
} |
|
} |
|
|
|
.access-token-receive-form { |
|
> .access-token-frame { |
|
background-color: $gray2; |
|
width: 100%; |
|
padding: 0.25rem; |
|
border-radius: $br-inner; |
|
white-space: pre; |
|
overflow-x: auto; |
|
-webkit-overflow-scrolling: touch; |
|
font-family: monospace; |
|
font-size: large; |
|
} |
|
|
|
.closed { |
|
text-align: center; |
|
} |
|
} |
|
|
|
.applications-view { |
|
.application { |
|
.info-list { |
|
border: none; |
|
width: 100%; |
|
|
|
.info-list-entry { |
|
background: none; |
|
padding: 0; |
|
} |
|
|
|
> .info-list-entry > .monospace { |
|
font-size: large; |
|
} |
|
} |
|
} |
|
} |
|
|
|
.application-details { |
|
.info-list { |
|
margin-top: 1rem; |
|
|
|
> .info-list-entry .monospace { |
|
font-size: large; |
|
} |
|
|
|
> .info-list-entry > dd > button { |
|
font-size: medium; |
|
padding-top: 0; |
|
padding-bottom: 0; |
|
} |
|
} |
|
} |
|
|
|
.application-new > .form-section-docs > p > .monospace { |
|
font-size: large; |
|
} |
|
|
|
.instance-rules { |
|
list-style-position: inside; |
|
margin: 0; |
|
padding: 0; |
|
|
|
a.rule { |
|
display: grid; |
|
grid-template-columns: 1fr auto; |
|
align-items: center; |
|
color: $fg; |
|
text-decoration: none; |
|
background: $status-bg; |
|
padding: 1rem; |
|
margin: 0.5rem 0; |
|
border-radius: $br; |
|
line-height: 2rem; |
|
position: relative; |
|
|
|
&:hover { |
|
color: $fg-accent; |
|
|
|
.edit-icon { |
|
display: inline; |
|
} |
|
} |
|
|
|
.edit-icon { |
|
display: none; |
|
font-size: 1rem; |
|
line-height: 1.5rem; |
|
} |
|
|
|
li { |
|
font-size: 1.75rem; |
|
padding: 0; |
|
margin: 0; |
|
|
|
h2 { |
|
margin: 0; |
|
margin-top: 0 !important; |
|
display: inline-block; |
|
font-size: 1.5rem; |
|
} |
|
} |
|
|
|
span { |
|
color: $fg-reduced; |
|
} |
|
} |
|
} |
|
|
|
.http-header-permissions { |
|
.list { |
|
/* |
|
Space this page out a bit, it |
|
looks too tight otherwise. |
|
*/ |
|
margin: 1rem 0; |
|
|
|
/* |
|
Visually separate the key + value for |
|
each entry, and show the value in |
|
reasonably-sized monospace font. |
|
*/ |
|
.entries > .entry { |
|
display: grid; |
|
grid-template-columns: max(20%, 10rem) 1fr; |
|
|
|
dt { |
|
font-weight: bold; |
|
} |
|
|
|
dd { |
|
font-family: monospace; |
|
font-size: large; |
|
} |
|
} |
|
} |
|
} |
|
|
|
.http-header-permission-details { |
|
.info-list { |
|
margin-top: 1rem; |
|
|
|
> .info-list-entry > .monospace { |
|
font-size: large; |
|
} |
|
} |
|
} |
|
|
|
.admin-debug-apurl { |
|
width: 100%; |
|
|
|
.prism-highlighted { |
|
max-width: 40rem; |
|
|
|
/* |
|
Normally we'd want to use a scrollbar for pre |
|
and code, but it actually looks a bit better |
|
to wrap here because there are many long lines. |
|
*/ |
|
pre, code { |
|
white-space: pre-wrap; |
|
} |
|
} |
|
} |
|
|
|
.interaction-default-settings { |
|
.interaction-policy-section { |
|
padding: 1rem; |
|
display: none; |
|
|
|
&.active { |
|
display: flex; |
|
} |
|
|
|
flex-direction: column; |
|
gap: 1rem; |
|
border: 0.15rem solid $input-border; |
|
|
|
fieldset { |
|
display: flex; |
|
flex-direction: column; |
|
gap: 0.5rem; |
|
|
|
margin: 0; |
|
padding: 0.5rem 1rem 1rem 1rem; |
|
|
|
border: $boxshadow-border; |
|
border-radius: 0.1rem; |
|
box-shadow: $boxshadow; |
|
|
|
>legend { |
|
display: flex; |
|
gap: 0.5rem; |
|
align-items: center; |
|
font-weight: bold; |
|
font-size: large; |
|
} |
|
|
|
hr { |
|
width: 100%; |
|
} |
|
|
|
.something-else { |
|
display: flex; |
|
flex-direction: column; |
|
gap: 0.5rem; |
|
margin-top: -0.3rem; |
|
} |
|
} |
|
} |
|
} |
|
|
|
.export-data { |
|
.export-buttons-wrapper { |
|
display: grid; |
|
max-width: fit-content; |
|
gap: 0.5rem; |
|
|
|
.stats-and-button { |
|
display: grid; |
|
grid-template-columns: 13rem 1fr; |
|
align-items: center; |
|
gap: 0.25rem; |
|
|
|
.mutation-button { |
|
width: 100%; |
|
|
|
button { |
|
font-size: 1rem; |
|
width: 100%; |
|
} |
|
} |
|
} |
|
|
|
@media screen and (max-width: 35rem) { |
|
gap: 1rem; |
|
|
|
.stats-and-button { |
|
grid-template-columns: auto; |
|
} |
|
} |
|
} |
|
} |
|
|
|
|
|
.interaction-requests-view { |
|
.interaction-request { |
|
display: flex; |
|
flex-direction: column; |
|
flex-wrap: nowrap; |
|
gap: 0.5rem; |
|
color: $fg; |
|
|
|
.info-list { |
|
border: none; |
|
|
|
.info-list-entry { |
|
grid-template-columns: max(20%, 8rem) 1fr; |
|
background: none; |
|
padding: 0; |
|
} |
|
} |
|
|
|
.action-buttons { |
|
display: flex; |
|
gap: 0.5rem; |
|
align-items: center; |
|
|
|
> .mutation-button |
|
> button { |
|
font-size: 1rem; |
|
line-height: 1rem; |
|
} |
|
} |
|
} |
|
} |
|
|
|
.interaction-request-detail { |
|
.overview { |
|
margin-top: 1rem; |
|
} |
|
|
|
h2 { |
|
font-size: 1rem; |
|
} |
|
|
|
.thread .status .status-info { |
|
border-bottom-left-radius: $br; |
|
border-bottom-right-radius: $br; |
|
} |
|
|
|
.action-buttons { |
|
display: flex; |
|
gap: 0.5rem; |
|
align-items: center; |
|
} |
|
} |
|
|
|
@media screen and (orientation: portrait) { |
|
.reports .report .byline { |
|
grid-template-columns: 1fr; |
|
|
|
.report-status { |
|
grid-row: 1; |
|
} |
|
} |
|
} |
|
|
|
[role="button"] { |
|
cursor: pointer; |
|
} |
|
|
|
@keyframes fadeout { |
|
from { |
|
opacity: 1; |
|
} |
|
to { |
|
opacity: 0; |
|
} |
|
} |
|
|
|
@media (prefers-reduced-motion) { |
|
.fa-spin { |
|
animation: none; |
|
} |
|
} |
|
|
|
.monospace { |
|
font-family: monospace; |
|
}
|
|
|