mirror of
https://github.com/superseriousbusiness/gotosocial.git
synced 2025-11-02 13:02:26 -06:00
refactor/split css, templates
This commit is contained in:
f0x
parent
6aa580a470
commit
70342681c1
54 changed files with 1371 additions and 1600 deletions
|
|
@ -1,36 +0,0 @@
|
|||
/*
|
||||
GoToSocial
|
||||
Copyright (C) GoToSocial Authors admin@gotosocial.org
|
||||
SPDX-License-Identifier: AGPL-3.0-or-later
|
||||
|
||||
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/>.
|
||||
*/
|
||||
|
||||
.about {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 2rem;
|
||||
padding: 2rem;
|
||||
|
||||
background: $bg-accent;
|
||||
box-shadow: $boxshadow;
|
||||
border: $boxshadow-border;
|
||||
border-radius: $br;
|
||||
|
||||
.about-section {
|
||||
h1, h2, h3, h4, h5 {
|
||||
margin-top: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -1,641 +0,0 @@
|
|||
/*
|
||||
GoToSocial
|
||||
Copyright (C) GoToSocial Authors admin@gotosocial.org
|
||||
SPDX-License-Identifier: AGPL-3.0-or-later
|
||||
|
||||
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/>.
|
||||
*/
|
||||
|
||||
/***************************************
|
||||
***** SECTION 0: IMPORTS AND FONTS *****
|
||||
****************************************/
|
||||
|
||||
@import "modern-normalize/modern-normalize.css";
|
||||
@import "./prism.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,
|
||||
&.disabled {
|
||||
color: $white2;
|
||||
background: $gray2;
|
||||
cursor: not-allowed;
|
||||
|
||||
&: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
|
||||
}
|
||||
}
|
||||
|
||||
select {
|
||||
/*
|
||||
By default this looks awful on Gnome
|
||||
Web so restyle a bit to try to make
|
||||
it consistent with firefox + chrome.
|
||||
*/
|
||||
appearance: none;
|
||||
line-height: 1.5rem;
|
||||
}
|
||||
|
||||
/*
|
||||
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;
|
||||
|
||||
@media (prefers-reduced-motion: no-preference) {
|
||||
/*
|
||||
Enlarge emojis on hover to give
|
||||
viewer a good look at them.
|
||||
*/
|
||||
transition: 0.1s;
|
||||
&: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 strip for left border.
|
||||
*/
|
||||
blockquote {
|
||||
padding: 0.5rem;
|
||||
border-left: 0.2rem solid $border-accent;
|
||||
margin: 0;
|
||||
font-style: normal;
|
||||
|
||||
/*
|
||||
Same background color we
|
||||
use for code blocks
|
||||
*/
|
||||
background-color: $gray2;
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
/*
|
||||
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;
|
||||
}
|
||||
|
||||
/*
|
||||
Set our own nice background for
|
||||
monospace code and pre blocks.
|
||||
*/
|
||||
pre, pre[class*="language-"],
|
||||
code, code[class*="language-"] {
|
||||
background-color: $gray2;
|
||||
}
|
||||
|
||||
/*
|
||||
Just code on its own inside status
|
||||
content, ie, `here is some code`.
|
||||
*/
|
||||
code {
|
||||
padding: 0.25rem;
|
||||
border-radius: $br-inner;
|
||||
white-space: pre-wrap;
|
||||
}
|
||||
|
||||
/*
|
||||
Restyle Prism code highlighting toolbar
|
||||
plugin buttons to our own button style.
|
||||
|
||||
We have to use really specific selectors
|
||||
because of how specific prism.css is.
|
||||
*/
|
||||
div.code-toolbar > div.toolbar {
|
||||
margin-right: 0.5rem;
|
||||
display: flex;
|
||||
gap: 0.25rem;
|
||||
|
||||
> div.toolbar-item {
|
||||
> span, > button {
|
||||
color: $button-fg;
|
||||
background: $button-bg;
|
||||
font-weight: bold;
|
||||
box-shadow: $boxshadow;
|
||||
|
||||
&:hover, &:focus {
|
||||
color: $button-fg;
|
||||
}
|
||||
}
|
||||
|
||||
.copy-to-clipboard-button:hover {
|
||||
background: $button-hover-bg;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
pre, pre[class*="language-"] {
|
||||
border-radius: $br;
|
||||
padding: 0.5rem;
|
||||
white-space: pre;
|
||||
overflow-x: auto;
|
||||
|
||||
/*
|
||||
Code inside a pre block, ie.,
|
||||
|
||||
```
|
||||
here is some code
|
||||
```
|
||||
*/
|
||||
code {
|
||||
width: 100%;
|
||||
padding: 0;
|
||||
white-space: pre;
|
||||
overflow-x: auto;
|
||||
-webkit-overflow-scrolling: touch;
|
||||
}
|
||||
}
|
||||
|
||||
/*************************************
|
||||
***** 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;
|
||||
}
|
||||
}
|
||||
|
||||
/*
|
||||
Forms and sign-in / sign-up / confirm pages.
|
||||
*/
|
||||
section.with-form {
|
||||
form {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 1rem;
|
||||
|
||||
padding-bottom: 1rem;
|
||||
padding-top: 1rem;
|
||||
|
||||
p {
|
||||
/*
|
||||
We use gap so we don't
|
||||
need top + bottom margins.
|
||||
*/
|
||||
margin-top: 0;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
label, input {
|
||||
padding-left: 0.2rem;
|
||||
}
|
||||
|
||||
.labelinput {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.4rem;
|
||||
}
|
||||
|
||||
.checkbox {
|
||||
display: flex;
|
||||
flex-direction: row-reverse;
|
||||
gap: 0.4rem;
|
||||
|
||||
& > input {
|
||||
height: 100%;
|
||||
width: 5%;
|
||||
min-width: 1.2rem;
|
||||
align-self: center;
|
||||
}
|
||||
}
|
||||
|
||||
.btn {
|
||||
/* Visually separate buttons a bit */
|
||||
margin-top: 1rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/***********************************
|
||||
***** 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 pages + error templates.
|
||||
*/
|
||||
|
||||
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: 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;
|
||||
}
|
||||
}
|
||||
|
|
@ -15,11 +15,4 @@
|
|||
|
||||
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/>.
|
||||
*/
|
||||
|
||||
.thread {
|
||||
#tag-name {
|
||||
/* Ensure ridiculous length tags get wrapped */
|
||||
word-wrap: anywhere;
|
||||
}
|
||||
}
|
||||
*/
|
||||
1
web/source/css/base/_normalize.css
Normal file
1
web/source/css/base/_normalize.css
Normal file
|
|
@ -0,0 +1 @@
|
|||
@import "modern-normalize/modern-normalize.css";
|
||||
19
web/source/css/base/fonts.css
Normal file
19
web/source/css/base/fonts.css
Normal file
|
|
@ -0,0 +1,19 @@
|
|||
/* noto-sans-regular - latin */
|
||||
@font-face {
|
||||
font-family: "Noto Sans";
|
||||
font-weight: 400;
|
||||
font-display: swap;
|
||||
font-style: normal;
|
||||
src: url('/assets/fonts/noto-sans-v27-latin-regular.woff2') format('woff2'),
|
||||
url('/assets/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('/assets/fonts/noto-sans-v27-latin-700.woff2') format('woff2'),
|
||||
url('/assets/fonts/noto-sans-v27-latin-700.woff') format('woff');
|
||||
}
|
||||
69
web/source/css/base/main.css
Normal file
69
web/source/css/base/main.css
Normal file
|
|
@ -0,0 +1,69 @@
|
|||
/*
|
||||
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;
|
||||
|
||||
html, body {
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
background: $bg;
|
||||
color: $fg;
|
||||
font-family: "Noto Sans", sans-serif;
|
||||
scrollbar-color: $orange1 $gray3;
|
||||
}
|
||||
|
||||
@media (prefers-reduced-motion: no-preference) {
|
||||
html {
|
||||
scroll-behavior: smooth;
|
||||
}
|
||||
}
|
||||
|
||||
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 {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
padding: 0;
|
||||
|
||||
h1, h2, h3, h4, h5 {
|
||||
& ~ p {
|
||||
margin-top: 0;
|
||||
}
|
||||
}
|
||||
|
||||
p:first-child, ol:first-child, ul:first-child {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
p:last-child, ol:last-child, ul:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
33
web/source/css/components/account-card.css
Normal file
33
web/source/css/components/account-card.css
Normal file
|
|
@ -0,0 +1,33 @@
|
|||
/* Displays account with displayname, username and avatar */
|
||||
.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;
|
||||
}
|
||||
|
||||
b {
|
||||
font-size: 1.25rem;
|
||||
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;
|
||||
}
|
||||
}
|
||||
44
web/source/css/components/column-header.css
Normal file
44
web/source/css/components/column-header.css
Normal file
|
|
@ -0,0 +1,44 @@
|
|||
/*
|
||||
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;
|
||||
}
|
||||
|
||||
&.wrap { /* for headers that can have a lot more text, like thread summary/reply info */
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
flex-wrap: wrap;
|
||||
column-gap: 1rem;
|
||||
row-gap: 0.5rem;
|
||||
|
||||
box-shadow: $boxshadow;
|
||||
border: $boxshadow-border;
|
||||
|
||||
h2 {
|
||||
margin-right: auto;
|
||||
}
|
||||
}
|
||||
}
|
||||
23
web/source/css/components/emoji.css
Normal file
23
web/source/css/components/emoji.css
Normal file
|
|
@ -0,0 +1,23 @@
|
|||
/* Style emoji to fit in-line with text */
|
||||
.emoji {
|
||||
width: 1.45em;
|
||||
height: 1.45em;
|
||||
margin: -0.2em 0.02em 0;
|
||||
object-fit: contain;
|
||||
vertical-align: middle;
|
||||
|
||||
@media (prefers-reduced-motion: no-preference) {
|
||||
/*
|
||||
Enlarge emojis on hover to give
|
||||
viewer a good look at them.
|
||||
*/
|
||||
transition: 0.1s;
|
||||
&:hover, &:active {
|
||||
transform: scale(2);
|
||||
background-color: $bg;
|
||||
box-shadow: $boxshadow;
|
||||
border: $boxshadow-border;
|
||||
border-radius: $br-inner;
|
||||
}
|
||||
}
|
||||
}
|
||||
68
web/source/css/components/forms.css
Normal file
68
web/source/css/components/forms.css
Normal file
|
|
@ -0,0 +1,68 @@
|
|||
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
|
||||
}
|
||||
}
|
||||
|
||||
.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,
|
||||
&.disabled {
|
||||
color: $white2;
|
||||
background: $gray2;
|
||||
cursor: not-allowed;
|
||||
|
||||
&:hover {
|
||||
background: $gray3;
|
||||
}
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background: $button-hover-bg;
|
||||
}
|
||||
}
|
||||
71
web/source/css/components/html-elements.css
Normal file
71
web/source/css/components/html-elements.css
Normal file
|
|
@ -0,0 +1,71 @@
|
|||
/*
|
||||
Outdent block quotes a bit; use
|
||||
orange strip for left border.
|
||||
*/
|
||||
blockquote {
|
||||
padding: 0.5rem;
|
||||
border-left: 0.2rem solid $border-accent;
|
||||
margin: 0;
|
||||
font-style: normal;
|
||||
|
||||
/*
|
||||
Same background color we
|
||||
use for code blocks
|
||||
*/
|
||||
background-color: $gray2;
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
/*
|
||||
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;
|
||||
}
|
||||
|
||||
/*
|
||||
Set our own nice background for
|
||||
monospace code and pre blocks.
|
||||
*/
|
||||
pre, pre[class*="language-"],
|
||||
code, code[class*="language-"] {
|
||||
background-color: $gray2;
|
||||
}
|
||||
|
||||
/*
|
||||
Just code on its own inside status
|
||||
content, ie, `here is some code`.
|
||||
*/
|
||||
code {
|
||||
padding: 0.25rem;
|
||||
border-radius: $br-inner;
|
||||
white-space: pre-wrap;
|
||||
}
|
||||
|
||||
select {
|
||||
/*
|
||||
By default this looks awful on Gnome
|
||||
Web so restyle a bit to try to make
|
||||
it consistent with firefox + chrome.
|
||||
*/
|
||||
appearance: none;
|
||||
line-height: 1.5rem;
|
||||
}
|
||||
128
web/source/css/components/lists.css
Normal file
128
web/source/css/components/lists.css
Normal file
|
|
@ -0,0 +1,128 @@
|
|||
/*
|
||||
Restyle unordered lists; outdent
|
||||
and replace dot with orange dot (unless .nodot class applied).
|
||||
*/
|
||||
|
||||
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;
|
||||
}
|
||||
|
||||
&.nodot {
|
||||
li::before {
|
||||
content: initial;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/*
|
||||
Mirror the same styling a little bit
|
||||
for ordered lists by making marker bold.
|
||||
*/
|
||||
|
||||
ol {
|
||||
padding-left: 2.5rem;
|
||||
|
||||
li::marker {
|
||||
font-weight: bold;
|
||||
}
|
||||
}
|
||||
|
||||
/* Tabulated list */
|
||||
.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;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* Extends .list styling for domain-blocklist.tmpl */
|
||||
.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;
|
||||
}
|
||||
}
|
||||
51
web/source/css/components/prism.css
Normal file
51
web/source/css/components/prism.css
Normal file
|
|
@ -0,0 +1,51 @@
|
|||
/*
|
||||
Restyle Prism code highlighting toolbar
|
||||
plugin buttons to our own button style.
|
||||
|
||||
We have to use really specific selectors
|
||||
because of how specific prism.css is.
|
||||
*/
|
||||
div.code-toolbar > div.toolbar {
|
||||
margin-right: 0.5rem;
|
||||
display: flex;
|
||||
gap: 0.25rem;
|
||||
|
||||
> div.toolbar-item {
|
||||
> span, > button {
|
||||
color: $button-fg;
|
||||
background: $button-bg;
|
||||
font-weight: bold;
|
||||
box-shadow: $boxshadow;
|
||||
|
||||
&:hover, &:focus {
|
||||
color: $button-fg;
|
||||
}
|
||||
}
|
||||
|
||||
.copy-to-clipboard-button:hover {
|
||||
background: $button-hover-bg;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
pre, pre[class*="language-"] {
|
||||
border-radius: $br;
|
||||
padding: 0.5rem;
|
||||
white-space: pre;
|
||||
overflow-x: auto;
|
||||
|
||||
/*
|
||||
Code inside a pre block, ie.,
|
||||
|
||||
```
|
||||
here is some code
|
||||
```
|
||||
*/
|
||||
code {
|
||||
width: 100%;
|
||||
padding: 0;
|
||||
white-space: pre;
|
||||
overflow-x: auto;
|
||||
-webkit-overflow-scrolling: touch;
|
||||
}
|
||||
}
|
||||
67
web/source/css/components/status/header.css
Normal file
67
web/source/css/components/status/header.css
Normal file
|
|
@ -0,0 +1,67 @@
|
|||
.status .status-header > address {
|
||||
/*
|
||||
Avoid stretching so wide that user
|
||||
can't click on open thread link that's
|
||||
behind the status header link.
|
||||
*/
|
||||
width: fit-content;
|
||||
|
||||
> a {
|
||||
padding: 0 0.75rem;
|
||||
display: grid;
|
||||
grid-template-columns: 3.5rem 1fr auto;
|
||||
grid-template-rows: auto auto;
|
||||
grid-template-areas:
|
||||
"avatar author-strapline author-strapline"
|
||||
"avatar author-strapline author-strapline";
|
||||
gap: 0 0.5rem;
|
||||
font-style: normal;
|
||||
|
||||
.avatar {
|
||||
grid-area: avatar;
|
||||
height: 3.5rem;
|
||||
width: 3.5rem;
|
||||
object-fit: cover;
|
||||
|
||||
border: 0.15rem solid $avatar-border;
|
||||
border-radius: $br;
|
||||
overflow: hidden; /* hides corners from img overflowing */
|
||||
|
||||
img {
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
object-fit: cover;
|
||||
background: $bg;
|
||||
}
|
||||
}
|
||||
|
||||
.author-strapline {
|
||||
grid-area: author-strapline;
|
||||
display: grid;
|
||||
grid-template-columns: 1fr auto;
|
||||
grid-template-rows: auto;
|
||||
grid-template-areas:
|
||||
"display display"
|
||||
"user user";
|
||||
gap: 0 0.5rem;
|
||||
|
||||
.displayname, .username {
|
||||
justify-self: start;
|
||||
align-self: start;
|
||||
max-width: 100%;
|
||||
font-size: 1rem;
|
||||
line-height: 1.3rem;
|
||||
}
|
||||
|
||||
.displayname {
|
||||
grid-area: display;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.username {
|
||||
grid-area: user;
|
||||
color: $link-fg;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
43
web/source/css/components/status/indent.css
Normal file
43
web/source/css/components/status/indent.css
Normal file
|
|
@ -0,0 +1,43 @@
|
|||
.status {
|
||||
&.indent-1 {
|
||||
margin-left: 0.5rem;
|
||||
}
|
||||
|
||||
&.indent-2 {
|
||||
margin-left: 1rem;
|
||||
}
|
||||
|
||||
&.indent-3 {
|
||||
margin-left: 1.5rem;
|
||||
}
|
||||
|
||||
&.indent-4 {
|
||||
margin-left: 2rem;
|
||||
}
|
||||
|
||||
&.indent-5 {
|
||||
margin-left: 2.5rem;
|
||||
}
|
||||
|
||||
&.indent-1,
|
||||
&.indent-2,
|
||||
&.indent-3,
|
||||
&.indent-4,
|
||||
&.indent-5 {
|
||||
.status-link {
|
||||
margin-left: -0.5rem;
|
||||
border-left: 0.15rem dashed $border-accent;
|
||||
}
|
||||
}
|
||||
|
||||
border-radius: 0;
|
||||
&:last-child {
|
||||
border-bottom-left-radius: $br;
|
||||
border-bottom-right-radius: $br;
|
||||
|
||||
.status-info {
|
||||
border-bottom-left-radius: $br;
|
||||
border-bottom-right-radius: $br;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -1,31 +1,7 @@
|
|||
/*
|
||||
GoToSocial
|
||||
Copyright (C) GoToSocial Authors admin@gotosocial.org
|
||||
SPDX-License-Identifier: AGPL-3.0-or-later
|
||||
|
||||
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 "photoswipe/dist/photoswipe.css";
|
||||
@import "photoswipe-dynamic-caption-plugin/photoswipe-dynamic-caption-plugin.css";
|
||||
@import "plyr/dist/plyr.css";
|
||||
|
||||
main {
|
||||
background: transparent;
|
||||
grid-auto-rows: auto;
|
||||
}
|
||||
|
||||
.status {
|
||||
background: $status-bg;
|
||||
box-shadow: $boxshadow;
|
||||
|
|
@ -41,74 +17,6 @@ main {
|
|||
text-decoration: none;
|
||||
}
|
||||
|
||||
.status-header > address {
|
||||
/*
|
||||
Avoid stretching so wide that user
|
||||
can't click on open thread link that's
|
||||
behind the status header link.
|
||||
*/
|
||||
width: fit-content;
|
||||
|
||||
> a {
|
||||
padding: 0 0.75rem;
|
||||
display: grid;
|
||||
grid-template-columns: 3.5rem 1fr auto;
|
||||
grid-template-rows: auto auto;
|
||||
grid-template-areas:
|
||||
"avatar author-strap author-strap"
|
||||
"avatar author-strap author-strap";
|
||||
gap: 0 0.5rem;
|
||||
font-style: normal;
|
||||
|
||||
.avatar {
|
||||
grid-area: avatar;
|
||||
height: 3.5rem;
|
||||
width: 3.5rem;
|
||||
object-fit: cover;
|
||||
|
||||
border: 0.15rem solid $avatar-border;
|
||||
border-radius: $br;
|
||||
overflow: hidden; /* hides corners from img overflowing */
|
||||
|
||||
img {
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
object-fit: cover;
|
||||
background: $bg;
|
||||
}
|
||||
}
|
||||
|
||||
.author-strap {
|
||||
grid-area: author-strap;
|
||||
display: grid;
|
||||
grid-template-columns: 1fr auto;
|
||||
grid-template-rows: auto;
|
||||
grid-template-areas:
|
||||
"display display"
|
||||
"user user";
|
||||
gap: 0 0.5rem;
|
||||
|
||||
.displayname, .username {
|
||||
justify-self: start;
|
||||
align-self: start;
|
||||
max-width: 100%;
|
||||
font-size: 1rem;
|
||||
line-height: 1.3rem;
|
||||
}
|
||||
|
||||
.displayname {
|
||||
grid-area: display;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.username {
|
||||
grid-area: user;
|
||||
color: $link-fg;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.status-body {
|
||||
padding: 0.5rem 0.75rem;
|
||||
display: flex;
|
||||
21
web/source/css/components/utility.css
Normal file
21
web/source/css/components/utility.css
Normal file
|
|
@ -0,0 +1,21 @@
|
|||
.hidden {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.nounderline {
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.accent {
|
||||
color: $acc1;
|
||||
}
|
||||
|
||||
.text-cutoff {
|
||||
text-overflow: ellipsis;
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.wrap-text {
|
||||
word-wrap: anywhere;
|
||||
}
|
||||
|
|
@ -1,127 +0,0 @@
|
|||
/*
|
||||
GoToSocial
|
||||
Copyright (C) GoToSocial Authors admin@gotosocial.org
|
||||
SPDX-License-Identifier: AGPL-3.0-or-later
|
||||
|
||||
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/>.
|
||||
*/
|
||||
|
||||
/*
|
||||
Render instance title + image
|
||||
a bit bigger on index page.
|
||||
|
||||
Overrides the css from page.css.
|
||||
*/
|
||||
.page-header {
|
||||
& > a {
|
||||
& > h1 {
|
||||
font-size: 2rem;
|
||||
line-height: 2rem;
|
||||
}
|
||||
|
||||
img,
|
||||
picture {
|
||||
align-self: center;
|
||||
max-height: 6rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/*
|
||||
Reuse about styling, but rework it
|
||||
to separate sections a bit more.
|
||||
*/
|
||||
.about {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 2rem;
|
||||
padding: 0;
|
||||
|
||||
background: initial;
|
||||
box-shadow: initial;
|
||||
border: initial;
|
||||
border-radius: initial;
|
||||
|
||||
.about-section {
|
||||
padding: 2rem;
|
||||
background: $bg-accent;
|
||||
box-shadow: $boxshadow;
|
||||
border: $boxshadow-border;
|
||||
border-radius: $br;
|
||||
}
|
||||
}
|
||||
|
||||
.what-is-this .about-section-contents .activitypub-logo-wrapper {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
max-width: fit-content;
|
||||
gap: 0.5rem;
|
||||
|
||||
.activitypub-logo {
|
||||
background: $fg;
|
||||
box-shadow: $boxshadow;
|
||||
border-radius: $br;
|
||||
max-width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.apps {
|
||||
align-self: start;
|
||||
|
||||
.applist {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
grid-gap: 0.5rem;
|
||||
align-content: start;
|
||||
|
||||
.applist-entry {
|
||||
display: grid;
|
||||
grid-template-columns: 25% 1fr;
|
||||
grid-template-areas: "logo text";
|
||||
gap: 1.5rem;
|
||||
padding: 0.5rem;
|
||||
|
||||
.applist-logo {
|
||||
grid-area: logo;
|
||||
align-self: center;
|
||||
justify-self: center;
|
||||
width: 100%;
|
||||
object-fit: contain;
|
||||
flex: 1 1 auto;
|
||||
}
|
||||
|
||||
.applist-logo.redraw {
|
||||
fill: $fg;
|
||||
stroke: $fg;
|
||||
}
|
||||
|
||||
.applist-text {
|
||||
grid-area: text;
|
||||
|
||||
a {
|
||||
font-weight: bold;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 600px) {
|
||||
.apps .applist {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
}
|
||||
|
|
@ -1,22 +1,3 @@
|
|||
/*
|
||||
GoToSocial
|
||||
Copyright (C) GoToSocial Authors admin@gotosocial.org
|
||||
SPDX-License-Identifier: AGPL-3.0-or-later
|
||||
|
||||
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/>.
|
||||
*/
|
||||
|
||||
.page {
|
||||
display: grid;
|
||||
min-height: 100vh;
|
||||
|
|
@ -24,23 +5,24 @@
|
|||
grid-template-columns: 1fr minmax(auto, 50rem) 1fr;
|
||||
grid-template-columns: 1fr min(92%, 50rem) 1fr;
|
||||
grid-template-rows: auto 1fr auto;
|
||||
|
||||
&.wider { /* used on profile.tmpl, giving more space for it's own 2 column layout */
|
||||
grid-template-columns: 1fr minmax(auto, 60rem) 1fr;
|
||||
grid-template-columns: 1fr min(92%, 65rem) 1fr;
|
||||
}
|
||||
}
|
||||
|
||||
.page-header, .page-footer {
|
||||
grid-column: 1 / span 3;
|
||||
}
|
||||
|
||||
.page-content {
|
||||
grid-column: 2;
|
||||
align-self: start;
|
||||
}
|
||||
|
||||
.page-header {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
padding: 1.5rem;
|
||||
gap: 1rem;
|
||||
margin: 0.5rem 0;
|
||||
|
||||
a {
|
||||
display: flex;
|
||||
|
|
@ -87,8 +69,75 @@
|
|||
}
|
||||
}
|
||||
|
||||
.page-header.large {
|
||||
margin: 2rem 0;
|
||||
a {
|
||||
img, picture {
|
||||
max-height: 6rem;
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: 2rem;
|
||||
line-height: 2rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.page-content {
|
||||
grid-column: 2;
|
||||
align-self: start;
|
||||
}
|
||||
|
||||
.page.with-sidebar .page-content {
|
||||
grid-column: 1 / span 2;
|
||||
display: grid;
|
||||
grid-template-columns: 1fr minmax(auto, 50rem);
|
||||
grid-template-columns: 1fr min(92%, 50rem);
|
||||
|
||||
.sidebar {
|
||||
display: inline-block;
|
||||
align-self: start;
|
||||
justify-self: end;
|
||||
position: sticky;
|
||||
top: 0;
|
||||
padding: 0 1.5rem;
|
||||
|
||||
ol {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
h2 {
|
||||
margin-top: 1.5rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 80rem) {
|
||||
.page.with-sidebar .page-content {
|
||||
grid-column: 2;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
background: $bg-accent;
|
||||
box-shadow: $boxshadow;
|
||||
border: $boxshadow-border;
|
||||
border-radius: $br;
|
||||
|
||||
.sidebar {
|
||||
position: static;
|
||||
}
|
||||
|
||||
main.single-page {
|
||||
background: initial;
|
||||
box-shadow: initial;
|
||||
border: initial;
|
||||
border-radius: initial;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.page-footer {
|
||||
align-self: end;
|
||||
margin-top: 3rem;
|
||||
|
||||
nav ul {
|
||||
display: flex;
|
||||
|
|
@ -115,4 +164,4 @@
|
|||
.page-header {
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
}
|
||||
16
web/source/css/layout/sectioned.css
Normal file
16
web/source/css/layout/sectioned.css
Normal file
|
|
@ -0,0 +1,16 @@
|
|||
main.sectioned {
|
||||
gap: 2rem;
|
||||
|
||||
section {
|
||||
padding: 1.5rem;
|
||||
background: $bg-accent;
|
||||
box-shadow: $boxshadow;
|
||||
border: $boxshadow-border;
|
||||
border-radius: $br;
|
||||
}
|
||||
|
||||
h1, h2, h3, h4, h5 {
|
||||
margin-top: 0;
|
||||
margin-bottom: 0.75rem;
|
||||
}
|
||||
}
|
||||
14
web/source/css/layout/single-page.css
Normal file
14
web/source/css/layout/single-page.css
Normal file
|
|
@ -0,0 +1,14 @@
|
|||
main.single-page {
|
||||
gap: 2rem;
|
||||
|
||||
padding: 1.5rem;
|
||||
|
||||
background: $bg-accent;
|
||||
box-shadow: $boxshadow;
|
||||
border: $boxshadow-border;
|
||||
border-radius: $br;
|
||||
|
||||
h2:first-child {
|
||||
margin-top: 0;
|
||||
}
|
||||
}
|
||||
15
web/source/css/layout/thread.css
Normal file
15
web/source/css/layout/thread.css
Normal file
|
|
@ -0,0 +1,15 @@
|
|||
.thread,
|
||||
.thread-wrapper {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.4rem;
|
||||
|
||||
.col-header.replies.hidden-only {
|
||||
/*
|
||||
No visible replies below this column
|
||||
header, so round off the bottom.
|
||||
*/
|
||||
border-bottom-left-radius: $br;
|
||||
border-bottom-right-radius: $br;
|
||||
}
|
||||
}
|
||||
17
web/source/css/pages/error.css
Normal file
17
web/source/css/pages/error.css
Normal file
|
|
@ -0,0 +1,17 @@
|
|||
/*
|
||||
Error-only page, used by error.tmpl
|
||||
TODO: unify colors with theming
|
||||
*/
|
||||
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;
|
||||
}
|
||||
}
|
||||
50
web/source/css/pages/form.css
Normal file
50
web/source/css/pages/form.css
Normal file
|
|
@ -0,0 +1,50 @@
|
|||
/*
|
||||
Page with form, used for sign-in/sign-up/authorization flows
|
||||
*/
|
||||
section.with-form {
|
||||
form {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 1rem;
|
||||
|
||||
padding-bottom: 1rem;
|
||||
padding-top: 1rem;
|
||||
|
||||
p {
|
||||
/*
|
||||
We use gap so we don't
|
||||
need top + bottom margins.
|
||||
*/
|
||||
margin-top: 0;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
label, input {
|
||||
padding-left: 0.2rem;
|
||||
}
|
||||
|
||||
.labelinput {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.4rem;
|
||||
}
|
||||
|
||||
.checkbox {
|
||||
display: flex;
|
||||
flex-direction: row-reverse;
|
||||
gap: 0.4rem;
|
||||
|
||||
& > input {
|
||||
height: 100%;
|
||||
width: 5%;
|
||||
min-width: 1.2rem;
|
||||
align-self: center;
|
||||
}
|
||||
}
|
||||
|
||||
.btn {
|
||||
/* Visually separate buttons a bit */
|
||||
margin-top: 1rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
65
web/source/css/pages/index.css
Normal file
65
web/source/css/pages/index.css
Normal file
|
|
@ -0,0 +1,65 @@
|
|||
.index-page {
|
||||
.activitypub-logo-wrapper {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
max-width: fit-content;
|
||||
gap: 0.5rem;
|
||||
|
||||
.activitypub-logo {
|
||||
background: $fg;
|
||||
box-shadow: $boxshadow;
|
||||
border-radius: $br;
|
||||
max-width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.apps {
|
||||
align-self: start;
|
||||
|
||||
.applist {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
grid-gap: 0.5rem;
|
||||
align-content: start;
|
||||
|
||||
.applist-entry {
|
||||
display: grid;
|
||||
grid-template-columns: 25% 1fr;
|
||||
grid-template-areas: "logo text";
|
||||
gap: 1.5rem;
|
||||
padding: 0.5rem;
|
||||
|
||||
.applist-logo {
|
||||
grid-area: logo;
|
||||
align-self: center;
|
||||
justify-self: center;
|
||||
width: 100%;
|
||||
object-fit: contain;
|
||||
flex: 1 1 auto;
|
||||
}
|
||||
|
||||
.applist-logo.redraw {
|
||||
fill: $fg;
|
||||
stroke: $fg;
|
||||
}
|
||||
|
||||
.applist-text {
|
||||
grid-area: text;
|
||||
|
||||
a {
|
||||
font-weight: bold;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 600px) {
|
||||
.apps .applist {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
}
|
||||
}
|
||||
8
web/source/css/pages/oob-token.css
Normal file
8
web/source/css/pages/oob-token.css
Normal file
|
|
@ -0,0 +1,8 @@
|
|||
section.oob-token {
|
||||
code {
|
||||
background: $gray1;
|
||||
padding: 0.5rem;
|
||||
margin: 0;
|
||||
border-radius: 0.3rem;
|
||||
}
|
||||
}
|
||||
|
|
@ -1,35 +1,102 @@
|
|||
/*
|
||||
GoToSocial
|
||||
Copyright (C) GoToSocial Authors admin@gotosocial.org
|
||||
SPDX-License-Identifier: AGPL-3.0-or-later
|
||||
.profile {
|
||||
.column-split {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 1rem;
|
||||
}
|
||||
|
||||
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.
|
||||
.statuses-wrapper {
|
||||
flex: 65 25rem;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.4rem;
|
||||
min-width: 0%;
|
||||
}
|
||||
|
||||
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.
|
||||
.statuses {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.4rem;
|
||||
|
||||
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/>.
|
||||
*/
|
||||
.rss-icon {
|
||||
display: block;
|
||||
margin: -0.25rem 0;
|
||||
|
||||
.fa {
|
||||
font-size: 2rem;
|
||||
object-fit: contain;
|
||||
vertical-align: middle;
|
||||
color: $orange2;
|
||||
/*
|
||||
Can't size a single-color background, so we use
|
||||
a linear-gradient that's effectively white.
|
||||
*/
|
||||
background: linear-gradient(to right, $white1 100%, transparent 0) no-repeat center center;
|
||||
background-size: 1.2rem 1.4rem;
|
||||
}
|
||||
}
|
||||
|
||||
.page {
|
||||
/*
|
||||
Profile page can be a little wider than default
|
||||
page, since we're using a side-by-side column view.
|
||||
*/
|
||||
grid-template-columns: 1fr minmax(auto, 60rem) 1fr;
|
||||
grid-template-columns: 1fr min(92%, 65rem) 1fr;
|
||||
}
|
||||
.backnextlinks {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
|
||||
.profile .column-split {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 1rem;
|
||||
.next {
|
||||
margin-left: auto;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.about-user {
|
||||
flex: 35 14rem;
|
||||
border-radius: $br;
|
||||
overflow: hidden;
|
||||
|
||||
.col-header {
|
||||
margin-bottom: -0.25rem;
|
||||
}
|
||||
|
||||
dt {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.fields {
|
||||
background: $profile-bg;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
padding: 0 0.5rem;
|
||||
padding-top: 0.25rem;
|
||||
|
||||
.field {
|
||||
padding: 0.25rem;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
border-bottom: 0.1rem solid $gray2;
|
||||
|
||||
> dt, > dd {
|
||||
word-break: break-word;
|
||||
}
|
||||
|
||||
&:first-child {
|
||||
border-top: 0.1rem solid $gray2;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.bio {
|
||||
background: $profile-bg;
|
||||
padding: 1rem 0.75rem;
|
||||
padding-bottom: 1.25rem;
|
||||
}
|
||||
|
||||
.accountstats {
|
||||
background: $bg-accent;
|
||||
padding: 0.75rem;
|
||||
|
||||
display: grid;
|
||||
grid-template-columns: auto 1fr;
|
||||
gap: 0.25rem 1rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.profile .profile-header {
|
||||
|
|
@ -361,4 +428,4 @@
|
|||
grid-template-columns: auto 1fr;
|
||||
gap: 0.25rem 1rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -41,48 +41,42 @@ $gray8: #696a75;
|
|||
$orange1: #fd6a00; /* Used for non-text accent colors, can be used as background: $gray1 for text color (contrast 4.6)*/
|
||||
$orange2: #ff853e; /* hover/selected accent to $orange1, can be used with $gray1 (5.7), $gray2 (4.6) */
|
||||
|
||||
$blue0: #00336B; /* darkest blue, can be used for links in error alerts, on $error2 (6.00) */
|
||||
$blue1: #3a9fde; /* darker blue for smaller elements (borders), can only be used with $gray1 (4.7) */
|
||||
$blue2: #66befe; /* all-round accent color, can be used with $gray1 (6.8), $gray2 (5.5), $gray3 (4.9), $gray4 (4.5) */
|
||||
$blue3: #89caff; /* hover/selected accent to $blue2, can be used with $gray1 (7.9), $gray2 (6.3), $gray3 (5.6), $gray4 (5.2), $gray5 (4.7) */
|
||||
$blue4: #b3ddff; /* used as background for info alerts */
|
||||
|
||||
$error1: #860000; /* Error border/foreground text, can be used with $error2 (5.0), $white1 (10), $white2 (5.1) */
|
||||
$error2: #ff9796; /* Error background text, can be used with $error1 (5.0), $gray1 (6.6), $gray2 (5.3), $gray3 (4.8) */
|
||||
$error3: #dd2c2c; /* Error button background text, can be used with $white1 (4.51) */
|
||||
$error-link: #01318C; /* Error link text, can be used with $error2 (5.56) */
|
||||
$red1: #860000; /* Error border/foreground text, can be used with $error2 (5.0), $white1 (10), $white2 (5.1) */
|
||||
$red2: #dd2c2c; /* Error button background text, can be used with $white1 (4.51) */
|
||||
$red3: #ff9796; /* Error background text, can be used with $error1 (5.0), $gray1 (6.6), $gray2 (5.3), $gray3 (4.8) */
|
||||
|
||||
$green1: #94E749; /* Green for positive/confirmation, similar contrast (luminance) as $blue2 */
|
||||
|
||||
$info-fg: $gray1;
|
||||
$info-bg: #b3ddff;
|
||||
$info-link: $error-link;
|
||||
$boxshadow: 0 0.4rem 1rem -0.1rem rgba(0,0,0,0.15);
|
||||
$boxshadow-border: 0.08rem solid $gray1;
|
||||
|
||||
/* Color variables as used in a specific location */
|
||||
|
||||
/* Base */
|
||||
$fg: $white1;
|
||||
$bg: $gray1;
|
||||
|
||||
$bg-trans: rgba(77, 78, 86, 0.62);
|
||||
|
||||
$bg-accent: $gray5;
|
||||
$fg-accent: $blue3;
|
||||
$fg-reduced: $white2;
|
||||
$border-accent: $orange2;
|
||||
|
||||
/* Color variables as used in a specific location */
|
||||
|
||||
$link-fg: $fg-accent;
|
||||
|
||||
/* Profile */
|
||||
$profile-bg: $gray4;
|
||||
$avatar-border: $orange2;
|
||||
|
||||
$role-admin: $orange2;
|
||||
$role-mod: $blue2;
|
||||
|
||||
$profile-bg: $gray4;
|
||||
|
||||
$button-bg: $blue2;
|
||||
$button-fg: $gray1;
|
||||
$button-hover-bg: $blue3;
|
||||
|
||||
$button-danger-bg: $error3;
|
||||
$button-danger-fg: $white1;
|
||||
$button-danger-hover-bg: $error2;
|
||||
|
||||
/* Status */
|
||||
$status-bg: $gray3;
|
||||
$status-info-bg: $gray2;
|
||||
|
||||
|
|
@ -94,11 +88,7 @@ $no-img-desc-fg: $gray1;
|
|||
|
||||
$bg-sensitive: $gray1;
|
||||
|
||||
$boxshadow: 0 0.4rem 1rem -0.1rem rgba(0,0,0,0.15);
|
||||
$boxshadow-border: 0.08rem solid $gray1;
|
||||
|
||||
$avatar-border: $orange2;
|
||||
|
||||
/* Form inputs */
|
||||
$input-bg: $gray4;
|
||||
$input-disabled-bg: $gray2;
|
||||
$input-border: $blue1;
|
||||
|
|
@ -115,8 +105,23 @@ $settings-nav-bg-active: $blue3;
|
|||
$settings-nav-border-active: $info-bg;
|
||||
$settings-nav-fg-active: $gray2;
|
||||
|
||||
$error-fg: $error1;
|
||||
$error-bg: $error2;
|
||||
/* Buttons */
|
||||
$button-bg: $blue2;
|
||||
$button-fg: $gray1;
|
||||
$button-hover-bg: $blue3;
|
||||
|
||||
$button-danger-bg: $error3;
|
||||
$button-danger-fg: $white1;
|
||||
$button-danger-hover-bg: $error2;
|
||||
|
||||
/* Alerts */
|
||||
$info-fg: $gray1;
|
||||
$info-bg: $blue4;
|
||||
$info-link: $blue0;
|
||||
|
||||
$error-fg: $red1;
|
||||
$error-bg: $red3;
|
||||
$error-link: $blue0;
|
||||
|
||||
$list-entry-bg: $gray2;
|
||||
$list-entry-alternate-bg: $gray3;
|
||||
|
|
@ -1,99 +0,0 @@
|
|||
/*
|
||||
GoToSocial
|
||||
Copyright (C) GoToSocial Authors admin@gotosocial.org
|
||||
SPDX-License-Identifier: AGPL-3.0-or-later
|
||||
|
||||
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/>.
|
||||
*/
|
||||
|
||||
.thread,
|
||||
.thread-wrapper {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.4rem;
|
||||
}
|
||||
|
||||
.thread {
|
||||
/*
|
||||
This column header might contain
|
||||
quite some info, so let it wrap.
|
||||
*/
|
||||
.col-header {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
flex-wrap: wrap;
|
||||
column-gap: 1rem;
|
||||
row-gap: 0.5rem;
|
||||
|
||||
box-shadow: $boxshadow;
|
||||
border: $boxshadow-border;
|
||||
|
||||
h2 {
|
||||
margin-right: auto;
|
||||
}
|
||||
|
||||
&.replies.hidden-only {
|
||||
/*
|
||||
No visible replies below this column
|
||||
header, so round off the bottom.
|
||||
*/
|
||||
border-bottom-left-radius: $br;
|
||||
border-bottom-right-radius: $br;
|
||||
}
|
||||
}
|
||||
|
||||
.status {
|
||||
&.indent-1 {
|
||||
margin-left: 0.5rem;
|
||||
}
|
||||
|
||||
&.indent-2 {
|
||||
margin-left: 1rem;
|
||||
}
|
||||
|
||||
&.indent-3 {
|
||||
margin-left: 1.5rem;
|
||||
}
|
||||
|
||||
&.indent-4 {
|
||||
margin-left: 2rem;
|
||||
}
|
||||
|
||||
&.indent-5 {
|
||||
margin-left: 2.5rem;
|
||||
}
|
||||
|
||||
&.indent-1,
|
||||
&.indent-2,
|
||||
&.indent-3,
|
||||
&.indent-4,
|
||||
&.indent-5 {
|
||||
.status-link {
|
||||
margin-left: -0.5rem;
|
||||
border-left: 0.15rem dashed $border-accent;
|
||||
}
|
||||
}
|
||||
|
||||
border-radius: 0;
|
||||
&:last-child {
|
||||
border-bottom-left-radius: $br;
|
||||
border-bottom-right-radius: $br;
|
||||
|
||||
.status-info {
|
||||
border-bottom-left-radius: $br;
|
||||
border-bottom-right-radius: $br;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
Loading…
Add table
Add a link
Reference in a new issue