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.
537 lines
9.0 KiB
537 lines
9.0 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/>. |
|
*/ |
|
|
|
@import "modern-normalize/modern-normalize.css"; |
|
|
|
/* noto-sans-regular - latin */ |
|
@font-face { |
|
font-family: "Noto Sans"; |
|
font-weight: 400; |
|
font-display: swap; |
|
font-style: normal; |
|
src: url('../fonts/noto-sans-v27-latin-regular.woff2') format('woff2'), |
|
url('../fonts/noto-sans-v27-latin-regular.woff') format('woff'); |
|
} |
|
|
|
/* noto-sans-700 - latin */ |
|
@font-face { |
|
font-family: "Noto Sans"; |
|
font-weight: 700; |
|
font-display: swap; |
|
font-style: normal; |
|
src: url('../fonts/noto-sans-v27-latin-700.woff2') format('woff2'), |
|
url('../fonts/noto-sans-v27-latin-700.woff') format('woff'); |
|
} |
|
|
|
/************************************* |
|
***** SECTION 1: HANDY VARIABLES ***** |
|
**************************************/ |
|
|
|
/* |
|
Standard border radius |
|
for nice squircles. |
|
*/ |
|
$br: 0.4rem; |
|
|
|
/* |
|
Border radius for items that |
|
are framed/bordered inside |
|
something with $br, eg avatar, |
|
header img, etc. |
|
*/ |
|
$br-inner: 0.2rem; |
|
|
|
/* |
|
Fork-Awesome 'fa-fw' fixed icon width; |
|
keep in sync with https://github.com/ForkAwesome/Fork-Awesome/blob/a99579ae3e735ee70e51ed62dfcee3172b5b2db7/css/fork-awesome.css#L50 |
|
*/ |
|
$fa-fw: 1.28571429em; |
|
|
|
/****************************************** |
|
***** SECTION 2: BASIC GLOBAL STYLING ***** |
|
*******************************************/ |
|
|
|
html, body { |
|
padding: 0; |
|
margin: 0; |
|
background: $bg; |
|
color: $fg; |
|
font-family: "Noto Sans", sans-serif; |
|
scrollbar-color: $orange1 $gray3; |
|
} |
|
|
|
body { |
|
line-height: 1.5em; |
|
position: relative; |
|
} |
|
|
|
a { |
|
color: $link-fg; |
|
} |
|
|
|
/* |
|
Normalize margins of first and last children. |
|
We generally don't want to open a paragraph or |
|
paragraph-like element with a top margin or |
|
close it with a bottom margin. |
|
*/ |
|
main { |
|
p:first-child, ol:first-child, ul:first-child { |
|
margin-top: 0; |
|
} |
|
|
|
p:last-child, ol:last-child, ul:last-child { |
|
margin-bottom: 0; |
|
} |
|
} |
|
|
|
.button, button { |
|
border-radius: $br-inner; |
|
color: $button-fg; |
|
background: $button-bg; |
|
box-shadow: $boxshadow; |
|
border: $button-border; |
|
text-decoration: none; |
|
font-size: 1.2rem; |
|
font-weight: bold; |
|
padding: 0.5rem; |
|
border: none; |
|
cursor: pointer; |
|
text-align: center; |
|
font-family: 'Noto Sans', sans-serif; |
|
|
|
&.danger { |
|
color: $button-danger-fg; |
|
background: $button-danger-bg; |
|
|
|
&:hover { |
|
background: $button-danger-hover-bg; |
|
} |
|
} |
|
|
|
&:disabled { |
|
color: $white2; |
|
background: $gray2; |
|
cursor: auto; |
|
|
|
&:hover { |
|
background: $gray3; |
|
} |
|
} |
|
|
|
&:hover { |
|
background: $button-hover-bg; |
|
} |
|
} |
|
|
|
/* |
|
Form styling - used in settings frontend as well. |
|
*/ |
|
input, select, textarea, .input { |
|
box-sizing: border-box; |
|
border: 0.15rem solid $input-border; |
|
border-radius: 0.1rem; |
|
color: $fg; |
|
background: $input-bg; |
|
width: 100%; |
|
font-family: 'Noto Sans', sans-serif; |
|
font-size: 1rem; |
|
padding: 0.3rem; |
|
|
|
&:focus, &:active { |
|
border-color: $input-focus-border; |
|
} |
|
|
|
&:invalid, .invalid & { |
|
border-color: $input-error-border; |
|
} |
|
|
|
&:disabled { |
|
background: transparent; |
|
} |
|
|
|
&::placeholder { |
|
opacity: 1; |
|
color: $fg-reduced |
|
} |
|
} |
|
|
|
/* |
|
Squeeze emojis so they fit inline in text. |
|
*/ |
|
.emoji { |
|
width: 1.45em; |
|
height: 1.45em; |
|
margin: -0.2em 0.02em 0; |
|
object-fit: contain; |
|
vertical-align: middle; |
|
transition: 0.1s; |
|
|
|
/* |
|
Enlarge emojis on hover to give |
|
viewer a good look at them. |
|
*/ |
|
&:hover, &:active { |
|
transform: scale(2); |
|
background-color: $bg; |
|
box-shadow: $boxshadow; |
|
border: $boxshadow-border; |
|
border-radius: $br-inner; |
|
} |
|
} |
|
|
|
/* |
|
Restyle unordered lists; outdent |
|
and replace dot with orange dot. |
|
*/ |
|
ul { |
|
padding-left: 2.5rem; |
|
list-style: none; |
|
|
|
li::before { |
|
content: "\2022"; |
|
color: $border-accent; |
|
font-weight: bold; |
|
display: inline-block; |
|
width: 1.5rem; |
|
margin-left: -1.5rem; |
|
} |
|
} |
|
|
|
/* |
|
Mirror the same styling a little bit |
|
for ordered lists by making marker bold. |
|
*/ |
|
ol { |
|
padding-left: 2.5rem; |
|
|
|
li::marker { |
|
font-weight: bold; |
|
} |
|
} |
|
|
|
/* |
|
Outdent block quotes a bit; use |
|
orange stripe for left border. |
|
*/ |
|
blockquote { |
|
padding: 0.5rem 0 0.5rem 0.5rem; |
|
border-left: 0.2rem solid $border-accent; |
|
margin: 0; |
|
font-style: italic; |
|
} |
|
|
|
/* |
|
Nice dashed orange line |
|
for horizontal rules. |
|
*/ |
|
hr { |
|
border: 0; |
|
border-top: 1px dashed $border-accent; |
|
} |
|
|
|
/* |
|
Don't indent definition |
|
lists and definitions. |
|
*/ |
|
dl { |
|
margin: 0; |
|
|
|
dd { |
|
margin-left: 0; |
|
} |
|
} |
|
|
|
label { |
|
cursor: pointer; |
|
} |
|
|
|
/************************************* |
|
***** SECTION 3: UTILITY CLASSES ***** |
|
**************************************/ |
|
|
|
/* |
|
Column header that appears at the top |
|
of threads, at the top of sections of |
|
profiles (About, Pinned Posts, etc). |
|
*/ |
|
.col-header { |
|
display: grid; |
|
grid-template-columns: auto 1fr; |
|
gap: 1rem; |
|
|
|
justify-content: start; |
|
align-items: center; |
|
|
|
margin: 0; |
|
background: $profile-bg; |
|
border-top-left-radius: $br; |
|
border-top-right-radius: $br; |
|
padding: 0.75rem; |
|
|
|
a { |
|
justify-self: end; |
|
} |
|
|
|
h1, h2, h3, h4 { |
|
font-size: 1.2rem; |
|
line-height: 1.3rem; |
|
margin: 0; |
|
} |
|
} |
|
|
|
.hidden { |
|
display: none; |
|
} |
|
|
|
.nounderline { |
|
text-decoration: none; |
|
} |
|
|
|
.accent { |
|
color: $acc1; |
|
} |
|
|
|
.text-cutoff { |
|
text-overflow: ellipsis; |
|
overflow: hidden; |
|
white-space: nowrap; |
|
} |
|
|
|
/* |
|
Class for lists that don't |
|
want the orange dot. |
|
*/ |
|
.nodot { |
|
li::before { |
|
content: initial; |
|
} |
|
} |
|
|
|
/*********************************** |
|
***** SECTION 4: SHAMEFUL MESS ***** |
|
************************************/ |
|
|
|
/* |
|
EVERYTHING BELOW THIS POINT: |
|
Should be moved somewhere else |
|
to avoid cluttering up this file. |
|
*/ |
|
|
|
/* |
|
Below section stylings are used |
|
in transient/error templates. |
|
*/ |
|
section.sign-in { |
|
form { |
|
display: flex; |
|
flex-direction: column; |
|
gap: 1rem; |
|
|
|
|
|
padding-bottom: 1rem; |
|
padding-top: 1rem; |
|
|
|
label, input { |
|
padding-left: 0.2rem; |
|
} |
|
|
|
.labelinput { |
|
display: flex; |
|
flex-direction: column; |
|
gap: 0.4rem; |
|
} |
|
|
|
.btn { |
|
margin-top: 1rem; |
|
} |
|
} |
|
} |
|
|
|
section.error { |
|
word-break: break-word; |
|
margin-bottom: 0.5rem; |
|
|
|
pre { |
|
border: 1px solid #ff000080; |
|
padding: 0.5rem; |
|
border-radius: 0.5em; |
|
background-color: #ff000010; |
|
font-size: 1.3em; |
|
white-space: pre-wrap; |
|
} |
|
} |
|
|
|
section.oob-token { |
|
code { |
|
background: $gray1; |
|
padding: 0.5rem; |
|
margin: 0; |
|
border-radius: 0.3rem; |
|
} |
|
} |
|
|
|
/* |
|
TODO: This is only used in the "finalize" |
|
template for new signups; move this elsewhere |
|
when that stuff is finished up. |
|
*/ |
|
.callout { |
|
margin: 1.5rem 0; |
|
border: .05rem solid $border-accent; |
|
border-radius: .2rem; |
|
padding: 0 .6rem .6rem; |
|
.callout-title { |
|
margin: 0 -.6rem; |
|
padding: .6rem; |
|
font-weight: bold; |
|
background-color: $border-accent; |
|
color: $gray1; |
|
} |
|
} |
|
|
|
/* |
|
TODO: list and blocklist are only used |
|
in settings panel and on blocklist page; |
|
consider moving them somewhere else. |
|
*/ |
|
.list { |
|
display: flex; |
|
flex-direction: column; |
|
|
|
.header, .entry { |
|
padding: 0.5rem; |
|
} |
|
|
|
.header { |
|
border: 0.1rem solid transparent !important; /* for alignment with .entry border padding */ |
|
background: $gray1 !important; |
|
display: flex; |
|
font-weight: bold; |
|
} |
|
|
|
.entries { |
|
display: flex; |
|
flex-direction: column; |
|
|
|
&.scrolling { |
|
height: 20rem; |
|
max-height: 20rem; |
|
overflow: auto; |
|
} |
|
} |
|
|
|
input[type=checkbox] { |
|
margin-left: 0.5rem; |
|
} |
|
|
|
.entry { |
|
display: flex; |
|
flex-wrap: wrap; |
|
background: $list-entry-bg; |
|
border: 0.1rem solid transparent; |
|
|
|
&:nth-child(even) { |
|
background: $list-entry-alternate-bg; |
|
} |
|
|
|
&:hover { |
|
background: $list-entry-hover-bg; |
|
} |
|
|
|
&:active, &:focus, &:hover, &:target { |
|
border-color: $fg-accent; |
|
} |
|
} |
|
} |
|
|
|
.domain-blocklist { |
|
box-shadow: $boxshadow; |
|
|
|
.entry { |
|
display: grid; |
|
grid-template-columns: max(30%, 10rem) 1fr; |
|
gap: 0.5rem; |
|
align-items: start; |
|
border: $boxshadow-border; |
|
border-top-color: transparent; |
|
|
|
& > div { |
|
display: flex; |
|
align-items: center |
|
} |
|
|
|
.domain a { |
|
font-weight: bold; |
|
text-decoration: none; |
|
display: inline-block; /* so it wraps properly */ |
|
} |
|
|
|
.public_comment p { |
|
margin: 0; |
|
} |
|
} |
|
|
|
.header .domain { |
|
color: $fg; |
|
} |
|
} |
|
|
|
@media screen and (max-width: 30rem) { |
|
.domain-blocklist .entry { |
|
grid-template-columns: 1fr; |
|
gap: 0; |
|
} |
|
} |
|
|
|
/* |
|
TODO: this is only used on About |
|
page and in settings application; |
|
consider moving it somewhere else. |
|
*/ |
|
.account-card { |
|
display: inline-grid; |
|
grid-template-columns: auto 1fr; |
|
grid-template-rows: auto auto; |
|
text-decoration: none; |
|
gap: 0.5rem 1rem; |
|
border-radius: $br; |
|
padding: 0.5rem; |
|
min-width: 40%; |
|
margin-bottom: 0.3rem; |
|
|
|
background: $list-entry-bg; |
|
|
|
&:hover { |
|
background: $list-entry-alternate-bg; |
|
} |
|
|
|
h3 { |
|
align-self: end; |
|
margin: 0; |
|
color: $fg; |
|
} |
|
|
|
img.avatar { |
|
border-radius: 0.5rem; |
|
width: 5rem; |
|
height: 5rem; |
|
object-fit: cover; |
|
grid-row: 1 / span 2; |
|
} |
|
}
|
|
|