mirror of
https://github.com/superseriousbusiness/gotosocial.git
synced 2025-10-28 13:52:25 -05:00
[feature/frontend] Add Ninety Eight theme (#4348)
This pull request adds a new theme that I've just put together after procrastinating for 7 or 8 months lol I made this pull request mainly because tobi already considered adding it to GtS upstream 5 minutes after [I made a fedi post about it](https://gts.apicrim.es/@awoo/statuses/01K18MJ1SD56581TANEKAKA6GV) ^^" (does this technically count as "discussing the proposed change"? probably not-) (though to be fair, this shows a slightly older revision of the theme -- you can see the most current one on [one of my fedi accounts](https://gts.apicrim.es/@128293). (…also I think it's quite obvious that I took the Ecks Pee theme as a basis ><) Co-authored-by: Jade Arson <awoo@wolfyja.de> Reviewed-on: https://codeberg.org/superseriousbusiness/gotosocial/pulls/4348 Co-authored-by: Jade Arson <codeberg@wolfyja.de> Co-committed-by: Jade Arson <codeberg@wolfyja.de>
This commit is contained in:
Jade Arson
kim
parent
7e45168d33
commit
f301bd5abf
1 changed files with 336 additions and 0 deletions
336
web/assets/themes/ninety-eight.css
Normal file
336
web/assets/themes/ninety-eight.css
Normal file
|
|
@ -0,0 +1,336 @@
|
||||||
|
/*
|
||||||
|
theme-title: Ninety Eight
|
||||||
|
theme-description: huh, that theme seems oddly familiar…
|
||||||
|
*/
|
||||||
|
|
||||||
|
/* Use dark code highlights. */
|
||||||
|
@import url("../dist/_prism-dark.css");
|
||||||
|
|
||||||
|
:root {
|
||||||
|
/* remove the border radius */
|
||||||
|
--br: 0;
|
||||||
|
--br-inner: 0;
|
||||||
|
|
||||||
|
/* Define our color palette */
|
||||||
|
--ninety-eight-grey: #c0c0c0;
|
||||||
|
--ninety-eight-dark-blue: #000080;
|
||||||
|
--ninety-eight-light-blue: #1084d0;
|
||||||
|
--ninety-eight-textbox: #ffffff;
|
||||||
|
--ninety-eight-green: #008080;
|
||||||
|
--ninety-eight-light-grey: #dfdfdf;
|
||||||
|
--ninety-eight-dark-grey: #808080;
|
||||||
|
|
||||||
|
--ninety-eight-title-bar: linear-gradient(
|
||||||
|
90deg,
|
||||||
|
var(--ninety-eight-dark-blue) 0%,
|
||||||
|
var(--ninety-eight-light-blue) 100%
|
||||||
|
);
|
||||||
|
|
||||||
|
/* border gradient used by individual windows and items such */
|
||||||
|
--ninety-eight-border-top: #ffffff;
|
||||||
|
--ninety-eight-border-left: #ffffff;
|
||||||
|
--ninety-eight-border-bottom: #000000;
|
||||||
|
--ninety-eight-border-right: #000000;
|
||||||
|
|
||||||
|
/* Restyle basic colors to use black instead */
|
||||||
|
--blue1: var(--fg);
|
||||||
|
--blue2: var(--fg);
|
||||||
|
--blue3: var(--fg);
|
||||||
|
|
||||||
|
/* Basic page styling (background + foreground) */
|
||||||
|
--bg: var(--ninety-eight-grey);
|
||||||
|
--bg-accent: var(--ninety-eight-grey);
|
||||||
|
--fg: #000000;
|
||||||
|
--fg-alt: #ffffff;
|
||||||
|
--fg-reduced: var(--ninety-eight-dark-grey);
|
||||||
|
--link-fg-alt: var(--fg-alt);
|
||||||
|
|
||||||
|
/* Profile page styling */
|
||||||
|
--profile-bg: var(--ninety-eight-grey);
|
||||||
|
|
||||||
|
/* Start buttons */
|
||||||
|
--button-bg: var(--ninety-eight-grey);
|
||||||
|
--button-fg: var(--fg);
|
||||||
|
|
||||||
|
/* ninety-eight-ize statuses */
|
||||||
|
--status-bg: var(--ninety-eight-grey);
|
||||||
|
--status-focus-bg: var(--ninety-eight-grey);
|
||||||
|
--status-info-bg: var(--ninety-eight-grey);
|
||||||
|
--status-info-border: var(--ninety-eight-dark-grey);
|
||||||
|
--status-focus-info-bg: var(--ninety-eight-grey);
|
||||||
|
|
||||||
|
/* Used around statuses + other items */
|
||||||
|
--boxshadow-border: 1px solid var(--ninety-eight-border-bottom);
|
||||||
|
--border-accent: var(--ninety-eight-border-bottom);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Main page background */
|
||||||
|
body {
|
||||||
|
background: var(--ninety-eight-green);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Scroll bar */
|
||||||
|
html, body {
|
||||||
|
font-family: "Noto Sans", sans-serif;
|
||||||
|
font-size: medium;
|
||||||
|
scrollbar-color: var(--ninety-eight-grey) var(--ninety-eight-light-grey);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Make this more like a ninety eight top bar */
|
||||||
|
.col-header, .thread .col-header {
|
||||||
|
background: var(--ninety-eight-title-bar);
|
||||||
|
border-top: 2px solid var(--ninety-eight-border-top);
|
||||||
|
border-left: 2px solid var(--ninety-eight-border-left);
|
||||||
|
border-right: 2px solid var(--ninety-eight-border-right);
|
||||||
|
border-bottom: 2px solid var(--ninety-eight-border-bottom);
|
||||||
|
border-radius: 0;
|
||||||
|
color: var(--fg-alt);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Role and bot badge backgrounds */
|
||||||
|
.profile .profile-header .basic-info .avatar-image-wrapper,
|
||||||
|
.profile .profile-header .basic-info .namerole .role,
|
||||||
|
.profile .profile-header .basic-info .namerole .bot-username-wrapper .bot-legend-wrapper {
|
||||||
|
background: var(--ninety-eight-grey);
|
||||||
|
border-top: 2px solid var(--ninety-eight-border-top) !important;
|
||||||
|
border-left: 2px solid var(--ninety-eight-border-left) !important;
|
||||||
|
border-right: 2px solid var(--ninety-eight-border-right) !important;
|
||||||
|
border-bottom: 2px solid var(--ninety-eight-border-bottom) !important;
|
||||||
|
color: var(--fg) !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Profile fields */
|
||||||
|
.profile .about-user .fields {
|
||||||
|
padding-left: 0.28rem;
|
||||||
|
padding-right: 0.28rem;
|
||||||
|
padding-top: 0;
|
||||||
|
}
|
||||||
|
.profile .about-user .fields dt {
|
||||||
|
padding-bottom: 0.5rem;
|
||||||
|
}
|
||||||
|
.profile .about-user .fields .field {
|
||||||
|
background: var(--ninety-eight-grey);
|
||||||
|
border-bottom: var(--ninety-eight-textbox);
|
||||||
|
}
|
||||||
|
.profile .about-user .fields .field:first-child {
|
||||||
|
border-top: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Profile info */
|
||||||
|
.profile .about-user {
|
||||||
|
background: var(--ninety-eight-grey);
|
||||||
|
border-top: 2px solid var(--ninety-eight-border-top);
|
||||||
|
border-left: 2px solid var(--ninety-eight-border-left);
|
||||||
|
border-right: 2px solid var(--ninety-eight-border-right);
|
||||||
|
border-bottom: 2px solid var(--ninety-eight-border-bottom);
|
||||||
|
height: fit-content;
|
||||||
|
}
|
||||||
|
|
||||||
|
.profile .about-user .col-header {
|
||||||
|
border: none;
|
||||||
|
margin-bottom: 0rem;
|
||||||
|
}
|
||||||
|
.profile .about-user .bio {
|
||||||
|
background: var(--ninety-eight-textbox);
|
||||||
|
border-bottom: 2px solid var(--ninety-eight-border-top);
|
||||||
|
border-right: 2px solid var(--ninety-eight-border-left);
|
||||||
|
border-left: 2px solid var(--ninety-eight-border-right);
|
||||||
|
border-top: 2px solid var(--ninety-eight-border-bottom);
|
||||||
|
padding: 0 0.5rem !important;
|
||||||
|
margin: 0.5rem;
|
||||||
|
}
|
||||||
|
.profile .about-user .bio > p:last-child,
|
||||||
|
.profile .about-user .bio > ol:last-child,
|
||||||
|
.profile .about-user .bio > ul:last-child {
|
||||||
|
margin-bottom: 0.5rem !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Profile header and avatar */
|
||||||
|
.profile .profile-header {
|
||||||
|
border-top: 2px solid var(--ninety-eight-border-top);
|
||||||
|
border-left: 2px solid var(--ninety-eight-border-left);
|
||||||
|
border-right: 2px solid var(--ninety-eight-border-right);
|
||||||
|
border-bottom: 2px solid var(--ninety-eight-border-bottom);
|
||||||
|
}
|
||||||
|
|
||||||
|
.status .status-header > address > a {
|
||||||
|
padding: 0 0.5rem;
|
||||||
|
.avatar {
|
||||||
|
border-top: 2px solid var(--ninety-eight-border-top);
|
||||||
|
border-left: 2px solid var(--ninety-eight-border-left);
|
||||||
|
border-right: 2px solid var(--ninety-eight-border-right);
|
||||||
|
border-bottom: 2px solid var(--ninety-eight-border-bottom);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.profile .profile-header .header-image-wrapper img {
|
||||||
|
margin: 4px;
|
||||||
|
width: calc(100% - 8px);
|
||||||
|
height: calc(100% - 8px);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Profile stats */
|
||||||
|
.accountstats {
|
||||||
|
border-top: var(--ninety-eight-border-top);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Statuses deserve a border, as a treat :3 */
|
||||||
|
.status {
|
||||||
|
border-top: 2px solid var(--ninety-eight-border-top);
|
||||||
|
border-left: 2px solid var(--ninety-eight-border-left);
|
||||||
|
border-right: 2px solid var(--ninety-eight-border-right);
|
||||||
|
border-bottom: 2px solid var(--ninety-eight-border-bottom);
|
||||||
|
}
|
||||||
|
|
||||||
|
.status .status-body {
|
||||||
|
padding: 0.5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Status text and profile fields with the inputted things™ */
|
||||||
|
.status .text,
|
||||||
|
.profile .about-user .fields dd {
|
||||||
|
padding: 0.5rem;
|
||||||
|
background: var(--ninety-eight-textbox);
|
||||||
|
border-bottom: 2px solid var(--ninety-eight-border-top);
|
||||||
|
border-right: 2px solid var(--ninety-eight-border-left);
|
||||||
|
border-left: 2px solid var(--ninety-eight-border-right);
|
||||||
|
border-top: 2px solid var(--ninety-eight-border-bottom);
|
||||||
|
|
||||||
|
color: var(--fg);
|
||||||
|
text-shadow: none;
|
||||||
|
--link-fg: var(--fg);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Status media */
|
||||||
|
.status .media .media-wrapper,
|
||||||
|
.profile .media-galleries-wrapper .media-gallery .media-wrapper {
|
||||||
|
border-bottom: 2px solid var(--ninety-eight-border-top);
|
||||||
|
border-right: 2px solid var(--ninety-eight-border-left);
|
||||||
|
border-left: 2px solid var(--ninety-eight-border-right);
|
||||||
|
border-top: 2px solid var(--ninety-eight-border-bottom);
|
||||||
|
}
|
||||||
|
.status .media .media-wrapper details .unknown-attachment .placeholder {
|
||||||
|
color: var(--blue2);
|
||||||
|
}
|
||||||
|
.status .media .media-wrapper details video.plyr-video {
|
||||||
|
background: black;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Status polls */
|
||||||
|
.status .text .poll {
|
||||||
|
background-color: var(--ninety-eight-grey);
|
||||||
|
border-bottom: 2px solid var(--ninety-eight-border-top);
|
||||||
|
border-right: 2px solid var(--ninety-eight-border-left);
|
||||||
|
border-left: 2px solid var(--ninety-eight-border-right);
|
||||||
|
border-top: 2px solid var(--ninety-eight-border-bottom);
|
||||||
|
border-radius: 0;
|
||||||
|
}
|
||||||
|
.status .text .poll .poll-info {
|
||||||
|
background: var(--ninety-eight-grey);
|
||||||
|
border-top: 2px solid var(--ninety-eight-border-top);
|
||||||
|
border-left: 2px solid var(--ninety-eight-border-left);
|
||||||
|
border-right: 2px solid var(--ninety-eight-border-right);
|
||||||
|
border-bottom: 2px solid var(--ninety-eight-border-bottom);
|
||||||
|
border-radius: 0;
|
||||||
|
}
|
||||||
|
/* Code snippets */
|
||||||
|
pre, pre[class*="language-"],
|
||||||
|
code, code[class*="language-"] {
|
||||||
|
font-family: "Atkinson Hyperlegible Mono", "Noto Sans Mono", monospace;
|
||||||
|
background: black;
|
||||||
|
color: var(--ninety-eight-light-grey);
|
||||||
|
border-radius: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Block quotes */
|
||||||
|
blockquote {
|
||||||
|
padding: 0.5rem;
|
||||||
|
background: var(--ninety-eight-grey);
|
||||||
|
border-bottom: 2px solid var(--ninety-eight-border-top);
|
||||||
|
border-right: 2px solid var(--ninety-eight-border-left);
|
||||||
|
border-left: 2px solid var(--ninety-eight-border-right);
|
||||||
|
border-top: 2px solid var(--ninety-eight-border-bottom);
|
||||||
|
border-radius: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Cheeky little border */
|
||||||
|
.status-info {
|
||||||
|
background: 2px solid var(--ninety-eight-grey);
|
||||||
|
margin: 0.25rem 0.5rem 0.5rem 0.5rem;
|
||||||
|
color: var(--fg) !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Status info dropdown button */
|
||||||
|
.status .status-info .status-stats details.stats-more-info > summary {
|
||||||
|
color: var(--fg);
|
||||||
|
background: var(--ninety-eight-grey);
|
||||||
|
border-top: 2px solid var(--ninety-eight-border-top);
|
||||||
|
border-left: 2px solid var(--ninety-eight-border-left);
|
||||||
|
border-right: 2px solid var(--ninety-eight-border-right);
|
||||||
|
border-bottom: 2px solid var(--ninety-eight-border-bottom);
|
||||||
|
}
|
||||||
|
.status .status-info .status-stats details.stats-more-info > summary:hover {
|
||||||
|
background: var(--ninety-eight-light-grey);
|
||||||
|
}
|
||||||
|
.status .status-info .status-stats details.stats-more-info[open] > summary {
|
||||||
|
background: var(--ninety-eight-dark-blue);
|
||||||
|
color: var(--ninety-eight-light-grey);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Status info dropdown content */
|
||||||
|
.status .status-info .status-stats .stats-more-info-content,
|
||||||
|
.status.expanded .status-info .status-stats .stats-more-info-content {
|
||||||
|
color: var(--fg);
|
||||||
|
text-shadow: none;
|
||||||
|
background: var(--ninety-eight-grey);
|
||||||
|
border-top: 2px solid var(--ninety-eight-border-top);
|
||||||
|
border-left: 2px solid var(--ninety-eight-border-left);
|
||||||
|
border-right: 2px solid var(--ninety-eight-border-right);
|
||||||
|
border-bottom: 2px solid var(--ninety-eight-border-bottom);
|
||||||
|
border-radius: 0;
|
||||||
|
}
|
||||||
|
.status .status-info .status-stats .stats-item.edit-timeline {
|
||||||
|
border-top: var(--border-accent);
|
||||||
|
}
|
||||||
|
.status .status-info {
|
||||||
|
border-bottom: 2px solid var(--ninety-eight-border-top);
|
||||||
|
border-right: 2px solid var(--ninety-eight-border-left);
|
||||||
|
border-left: 2px solid var(--ninety-eight-border-right);
|
||||||
|
border-top: 2px solid var(--ninety-eight-border-bottom);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Button stuff */
|
||||||
|
button, .button, .pswp__button {
|
||||||
|
background: var(--ninety-eight-grey);
|
||||||
|
border-top: 2px solid var(--ninety-eight-border-top);
|
||||||
|
border-left: 2px solid var(--ninety-eight-border-left);
|
||||||
|
border-right: 2px solid var(--ninety-eight-border-right);
|
||||||
|
border-bottom: 2px solid var(--ninety-eight-border-bottom);
|
||||||
|
}
|
||||||
|
button:hover, .button:hover, .pswp__button:hover {
|
||||||
|
background: var(--ninety-eight-light-grey);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Make these bold or they don't contrast enough */
|
||||||
|
.backnextlinks {
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
|
||||||
|
button, .button,
|
||||||
|
.status .text-spoiler > summary .button {
|
||||||
|
font-family: 'Noto Sans', sans-serif;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* fix contrast issues */
|
||||||
|
nav.backnextlinks > a {
|
||||||
|
color: var(--fg-alt) !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
footer > nav > ul > li > a {
|
||||||
|
color: var(--fg-alt) !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.col-header a {
|
||||||
|
color: var(--fg-alt);
|
||||||
|
font-weight: 700;
|
||||||
|
}
|
||||||
Loading…
Add table
Add a link
Reference in a new issue