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="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="preload" href="/assets/dist/_colors.css" as="style">
|
||||
<link rel="preload" href="/assets/dist/base.css" as="style">
|
||||
<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">
|
||||
<link rel="stylesheet" href="/assets/dist/themes/default.css">
|
||||
<link rel="stylesheet" href="/assets/dist/style.css">
|
||||
<title>GoToSocial Testrig Instance - GoToSocial</title>
|
||||
</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;
|
||||
$gray7: #5d5e67;
|
||||
$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)*/
|
||||
$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 */
|
||||
|
||||
$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;
|
||||
|
||||
|
|
@ -62,23 +67,16 @@ $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;
|
||||
|
||||
|
|
@ -90,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;
|
||||
|
|
@ -111,6 +105,16 @@ $settings-nav-bg-active: $blue3;
|
|||
$settings-nav-border-active: $info-bg;
|
||||
$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-bg: $blue4;
|
||||
$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 fs = require("fs");
|
||||
const path = require("path");
|
||||
const { globSync } = require("glob");
|
||||
|
||||
// let cssEntryFiles = fs.readdirSync(path.join(__dirname, "./css")).map((file) => {
|
||||
// return path.join(__dirname, "./css", file);
|
||||
// });
|
||||
|
||||
let cssEntryFiles = globSync(path.join(__dirname, "./css/**/*.css"));
|
||||
const cssDir = path.join(__dirname, "./css");
|
||||
const cssThemes = globSync(cssDir + "/themes/**/*.css");
|
||||
|
||||
const prodCfg = {
|
||||
transform: [
|
||||
|
|
@ -91,12 +87,19 @@ skulk({
|
|||
}]
|
||||
]
|
||||
},
|
||||
css: {
|
||||
entryFiles: cssEntryFiles,
|
||||
cssThemes: {
|
||||
entryFiles: cssThemes,
|
||||
outputFile: "_discard",
|
||||
presets: [["postcss", {
|
||||
output: "_split"
|
||||
}]]
|
||||
},
|
||||
css: {
|
||||
entryFiles: cssDir + "/main.css",
|
||||
outputFile: "_discard",
|
||||
presets: [["postcss", {
|
||||
output: "style.css"
|
||||
}]]
|
||||
}
|
||||
}
|
||||
});
|
||||
|
|
|
|||
Loading…
Reference in New Issue