mirrors/gotosocial
1
0
Fork 0
mirror of https://github.com/superseriousbusiness/gotosocial.git synced 2025-10-28 13:52:25 -05:00
Code Issues Projects Releases Packages Wiki Activity Actions
gotosocial/web/assets/themes/ninety-eight.css
Jade Arson f301bd5abf [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>
2025-07-30 17:56:30 +02:00

336 lines
No EOL
10 KiB
CSS
Raw Blame History

/*
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;
}
Reference in a new issue View git blame Copy permalink