mirror of
https://github.com/superseriousbusiness/gotosocial.git
synced 2025-10-28 06:22:26 -05:00
6c1b674278
This pull request adds four new themes with auto light/dark switching options too! Tested for color contrast etc in firefox with all three local test rig accounts. Reviewed-on: https://codeberg.org/superseriousbusiness/gotosocial/pulls/4199 Co-authored-by: tobi <tobi.smethurst@protonmail.com> Co-committed-by: tobi <tobi.smethurst@protonmail.com>
136 lines
3 KiB
CSS
136 lines
3 KiB
CSS
/*
|
|
theme-title: Hacker dark
|
|
theme-description: Dark gray and green monospace theme
|
|
*/
|
|
|
|
:root {
|
|
/* Define our cool hacker color palette, I'm in. */
|
|
--dark-gray: #1b1b1b;
|
|
--medium-gray: #282828;
|
|
--light-gray: #8a8a94;
|
|
--whiteish: #f8f8f8;
|
|
--terminal-darker: #398224;
|
|
--terminal: #419629;
|
|
--terminal-lighter: #5cc93d;
|
|
|
|
/* Overwrite orange trim */
|
|
--orange2: var(--terminal);
|
|
|
|
/* Restyle basic colors to use terminal */
|
|
--blue1: var(--terminal-darker);
|
|
--blue2: var(--terminal-lighter);
|
|
--blue3: var(--terminal-lighter);
|
|
|
|
/* Basic page styling (background + foreground) */
|
|
--bg: var(--dark-gray);
|
|
--bg-accent: var(--medium-gray);
|
|
--fg: var(--whiteish);
|
|
--fg-reduced: var(--light-gray);
|
|
|
|
/* Profile page styling */
|
|
--profile-bg: var(--medium-gray);
|
|
|
|
/* Hackerize buttons */
|
|
--button-bg: var(--terminal-darker);
|
|
--button-fg: var(--whiteish);
|
|
|
|
/* Hackerize statuses */
|
|
--status-bg: var(--medium-gray);
|
|
--status-focus-bg: var(--medium-gray);
|
|
--status-info-bg: var(--dark-gray);
|
|
--status-focus-info-bg: var(--dark-gray);
|
|
|
|
/* Used around statuses + other items */
|
|
--boxshadow-border: 0.15rem solid black;
|
|
|
|
/* Straighten borders */
|
|
--br: 0;
|
|
--br-inner: 0;
|
|
}
|
|
|
|
/* Scroll bar + main font */
|
|
html, body {
|
|
font-family: 'Noto Sans Mono', monospace;
|
|
scrollbar-color: var(--terminal-lighter) var(--medium-gray);
|
|
}
|
|
|
|
/* Buttons font */
|
|
button, .button,
|
|
.status .text-spoiler > summary .button {
|
|
font-family: 'Noto Sans Mono', monospace;
|
|
}
|
|
|
|
/* Column headers */
|
|
.col-header {
|
|
border: var(--boxshadow-border);
|
|
}
|
|
.profile .about-user .col-header {
|
|
border-bottom: none;
|
|
margin-bottom: 0;
|
|
}
|
|
|
|
.profile .profile-header {
|
|
border: var(--boxshadow-border);
|
|
}
|
|
|
|
/* Fiddle around with borders on about sections */
|
|
.profile .about-user .fields,
|
|
.profile .about-user .bio,
|
|
.profile .about-user .accountstats {
|
|
border-left: var(--boxshadow-border);
|
|
border-right: var(--boxshadow-border);
|
|
}
|
|
.profile .about-user .accountstats {
|
|
border-bottom: var(--boxshadow-border);
|
|
}
|
|
|
|
.profile .about-user .fields {
|
|
padding-top: 0;
|
|
}
|
|
|
|
/* Profile fields */
|
|
.profile .about-user .fields .field {
|
|
border-bottom: var(--boxshadow-border);
|
|
}
|
|
.profile .about-user .fields .field:first-child {
|
|
border-top: var(--boxshadow-border);
|
|
}
|
|
|
|
/* Profile fields */
|
|
.profile .about-user .fields .field {
|
|
border-bottom: var(--boxshadow-border);
|
|
}
|
|
.profile .about-user .fields .field:first-child {
|
|
border-top: var(--boxshadow-border);
|
|
}
|
|
|
|
/* Status media */
|
|
.status .media .media-wrapper {
|
|
border: var(--boxshadow-border);
|
|
background: var(--dark-gray);
|
|
}
|
|
.status .media .media-wrapper details .unknown-attachment .placeholder {
|
|
color: var(--whiteish);
|
|
}
|
|
|
|
/* Status polls */
|
|
.status .text .poll {
|
|
background-color: var(--dark-gray);
|
|
border: var(--boxshadow-border);
|
|
}
|
|
.status .text .poll .poll-info {
|
|
background-color: var(--medium-gray);
|
|
}
|
|
|
|
/* Code snippets */
|
|
pre, pre[class*="language-"],
|
|
code, code[class*="language-"] {
|
|
background: var(--dark-gray);
|
|
color: var(--whiteish);
|
|
}
|
|
|
|
/* Block quotes */
|
|
blockquote {
|
|
background-color: var(--dark-gray);
|
|
color: var(--whiteish);
|
|
}
|