split out base.css, new css bundler config
This commit is contained in:
f0x
parent
93725e4c69
commit
caccfd2898
|
|
@ -17,16 +17,8 @@
|
||||||
<link rel="icon" href="http://localhost:8080/assets/logo.webp" type="image/webp">
|
<link rel="icon" href="http://localhost:8080/assets/logo.webp" type="image/webp">
|
||||||
<link rel="apple-touch-icon" href="http://localhost:8080/assets/logo.webp" type="image/webp">
|
<link rel="apple-touch-icon" href="http://localhost:8080/assets/logo.webp" type="image/webp">
|
||||||
<link rel="apple-touch-startup-image" href="http://localhost:8080/assets/logo.webp" type="image/webp">
|
<link rel="apple-touch-startup-image" href="http://localhost:8080/assets/logo.webp" type="image/webp">
|
||||||
<link rel="preload" href="/assets/dist/_colors.css" as="style">
|
<link rel="stylesheet" href="/assets/dist/themes/default.css">
|
||||||
<link rel="preload" href="/assets/dist/base.css" as="style">
|
<link rel="stylesheet" href="/assets/dist/style.css">
|
||||||
<link rel="preload" href="/assets/dist/page.css" as="style">
|
|
||||||
<link rel="preload" href="/assets/dist/about.css" as="style">
|
|
||||||
<link rel="preload" href="/assets/dist/index.css" as="style">
|
|
||||||
<link rel="stylesheet" href="/assets/dist/_colors.css">
|
|
||||||
<link rel="stylesheet" href="/assets/dist/base.css">
|
|
||||||
<link rel="stylesheet" href="/assets/dist/page.css">
|
|
||||||
<link rel="stylesheet" href="/assets/dist/about.css">
|
|
||||||
<link rel="stylesheet" href="/assets/dist/index.css">
|
|
||||||
<title>GoToSocial Testrig Instance - GoToSocial</title>
|
<title>GoToSocial Testrig Instance - GoToSocial</title>
|
||||||
</head>
|
</head>
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -0,0 +1,20 @@
|
||||||
|
/* 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');
|
||||||
|
}
|
||||||
|
|
||||||
|
// TODO: do we really need to include the bold variant?
|
||||||
|
/* 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');
|
||||||
|
} */
|
||||||
|
|
@ -0,0 +1,53 @@
|
||||||
|
/*
|
||||||
|
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;
|
||||||
|
}
|
||||||
|
|
||||||
|
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;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,32 @@
|
||||||
|
/* 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;
|
||||||
|
}
|
||||||
|
|
||||||
|
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;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,29 @@
|
||||||
|
/*
|
||||||
|
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;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
@ -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;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
@ -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;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,61 @@
|
||||||
|
/*
|
||||||
|
Outdent block quotes a bit; use
|
||||||
|
orange strip for left border.
|
||||||
|
*/
|
||||||
|
blockquote {
|
||||||
|
padding: 0.5rem 0 0.5rem 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: $br;
|
||||||
|
}
|
||||||
|
|
||||||
|
/*
|
||||||
|
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;
|
||||||
|
}
|
||||||
|
|
@ -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;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
@ -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;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,17 @@
|
||||||
|
.hidden {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.nounderline {
|
||||||
|
text-decoration: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.accent {
|
||||||
|
color: $acc1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.text-cutoff {
|
||||||
|
text-overflow: ellipsis;
|
||||||
|
overflow: hidden;
|
||||||
|
white-space: nowrap;
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,31 @@
|
||||||
|
/*
|
||||||
|
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 "modern-normalize/modern-normalize.css"; /* needs to be the first import */
|
||||||
|
|
||||||
|
@import "./base/fonts.css";
|
||||||
|
@import "./base/main.css";
|
||||||
|
|
||||||
|
@import "./components/account-card.css";
|
||||||
|
@import "./components/emoji.css";
|
||||||
|
@import "./components/forms.css";
|
||||||
|
@import "./components/lists.css";
|
||||||
|
@import "./components/utility.css";
|
||||||
|
|
||||||
|
@import "./vendor/prism.css";
|
||||||
|
|
@ -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;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
@ -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;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,8 @@
|
||||||
|
section.oob-token {
|
||||||
|
code {
|
||||||
|
background: $gray1;
|
||||||
|
padding: 0.5rem;
|
||||||
|
margin: 0;
|
||||||
|
border-radius: 0.3rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
@ -37,7 +37,6 @@ $gray5: #4d4e56;
|
||||||
$gray6: #575861;
|
$gray6: #575861;
|
||||||
$gray7: #5d5e67;
|
$gray7: #5d5e67;
|
||||||
$gray8: #696a75;
|
$gray8: #696a75;
|
||||||
$gray5-trans: rgba(77, 78, 86, 0.62);
|
|
||||||
|
|
||||||
$orange1: #fd6a00; /* Used for non-text accent colors, can be used as background: $gray1 for text color (contrast 4.6)*/
|
$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) */
|
$orange2: #ff853e; /* hover/selected accent to $orange1, can be used with $gray1 (5.7), $gray2 (4.6) */
|
||||||
|
|
@ -54,6 +53,12 @@ $red3: #ff9796; /* Error background text, can be used with $error1 (5.0), $gray1
|
||||||
|
|
||||||
$green1: #94E749; /* Green for positive/confirmation, similar contrast (luminance) as $blue2 */
|
$green1: #94E749; /* Green for positive/confirmation, similar contrast (luminance) as $blue2 */
|
||||||
|
|
||||||
|
$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;
|
$fg: $white1;
|
||||||
$bg: $gray1;
|
$bg: $gray1;
|
||||||
|
|
||||||
|
|
@ -62,23 +67,16 @@ $fg-accent: $blue3;
|
||||||
$fg-reduced: $white2;
|
$fg-reduced: $white2;
|
||||||
$border-accent: $orange2;
|
$border-accent: $orange2;
|
||||||
|
|
||||||
/* Color variables as used in a specific location */
|
|
||||||
|
|
||||||
$link-fg: $fg-accent;
|
$link-fg: $fg-accent;
|
||||||
|
|
||||||
|
/* Profile */
|
||||||
|
$profile-bg: $gray4;
|
||||||
|
$avatar-border: $orange2;
|
||||||
|
|
||||||
$role-admin: $orange2;
|
$role-admin: $orange2;
|
||||||
$role-mod: $blue2;
|
$role-mod: $blue2;
|
||||||
|
|
||||||
$profile-bg: $gray4;
|
/* Status */
|
||||||
|
|
||||||
$button-bg: $blue2;
|
|
||||||
$button-fg: $gray1;
|
|
||||||
$button-hover-bg: $blue3;
|
|
||||||
|
|
||||||
$button-danger-bg: $error3;
|
|
||||||
$button-danger-fg: $white1;
|
|
||||||
$button-danger-hover-bg: $error2;
|
|
||||||
|
|
||||||
$status-bg: $gray3;
|
$status-bg: $gray3;
|
||||||
$status-info-bg: $gray2;
|
$status-info-bg: $gray2;
|
||||||
|
|
||||||
|
|
@ -90,11 +88,7 @@ $no-img-desc-fg: $gray1;
|
||||||
|
|
||||||
$bg-sensitive: $gray1;
|
$bg-sensitive: $gray1;
|
||||||
|
|
||||||
$boxshadow: 0 0.4rem 1rem -0.1rem rgba(0,0,0,0.15);
|
/* Form inputs */
|
||||||
$boxshadow-border: 0.08rem solid $gray1;
|
|
||||||
|
|
||||||
$avatar-border: $orange2;
|
|
||||||
|
|
||||||
$input-bg: $gray4;
|
$input-bg: $gray4;
|
||||||
$input-disabled-bg: $gray2;
|
$input-disabled-bg: $gray2;
|
||||||
$input-border: $blue1;
|
$input-border: $blue1;
|
||||||
|
|
@ -111,6 +105,16 @@ $settings-nav-bg-active: $blue3;
|
||||||
$settings-nav-border-active: $info-bg;
|
$settings-nav-border-active: $info-bg;
|
||||||
$settings-nav-fg-active: $gray2;
|
$settings-nav-fg-active: $gray2;
|
||||||
|
|
||||||
|
/* 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-fg: $gray1;
|
||||||
$info-bg: $blue4;
|
$info-bg: $blue4;
|
||||||
$info-link: $blue0;
|
$info-link: $blue0;
|
||||||
|
|
|
||||||
|
|
@ -1,631 +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
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
/*
|
|
||||||
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 0 0.5rem 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: $br;
|
|
||||||
}
|
|
||||||
|
|
||||||
/*
|
|
||||||
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;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
@ -18,15 +18,11 @@
|
||||||
*/
|
*/
|
||||||
|
|
||||||
const skulk = require("skulk");
|
const skulk = require("skulk");
|
||||||
const fs = require("fs");
|
|
||||||
const path = require("path");
|
const path = require("path");
|
||||||
const { globSync } = require("glob");
|
const { globSync } = require("glob");
|
||||||
|
|
||||||
// let cssEntryFiles = fs.readdirSync(path.join(__dirname, "./css")).map((file) => {
|
const cssDir = path.join(__dirname, "./css");
|
||||||
// return path.join(__dirname, "./css", file);
|
const cssThemes = globSync(cssDir + "/themes/**/*.css");
|
||||||
// });
|
|
||||||
|
|
||||||
let cssEntryFiles = globSync(path.join(__dirname, "./css/**/*.css"));
|
|
||||||
|
|
||||||
const prodCfg = {
|
const prodCfg = {
|
||||||
transform: [
|
transform: [
|
||||||
|
|
@ -91,12 +87,19 @@ skulk({
|
||||||
}]
|
}]
|
||||||
]
|
]
|
||||||
},
|
},
|
||||||
css: {
|
cssThemes: {
|
||||||
entryFiles: cssEntryFiles,
|
entryFiles: cssThemes,
|
||||||
outputFile: "_discard",
|
outputFile: "_discard",
|
||||||
presets: [["postcss", {
|
presets: [["postcss", {
|
||||||
output: "_split"
|
output: "_split"
|
||||||
}]]
|
}]]
|
||||||
|
},
|
||||||
|
css: {
|
||||||
|
entryFiles: cssDir + "/main.css",
|
||||||
|
outputFile: "_discard",
|
||||||
|
presets: [["postcss", {
|
||||||
|
output: "style.css"
|
||||||
|
}]]
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue