Skip to content

Instantly share code, notes, and snippets.

@GwyndolynMarchant

GwyndolynMarchant/cohost97.user.css

Last active April 24, 2023 01:27
Show Gist options
  • Save GwyndolynMarchant/1bf1ec7885e193231f3e59d01b689b06 to your computer and use it in GitHub Desktop.
Save GwyndolynMarchant/1bf1ec7885e193231f3e59d01b689b06 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
cohost97.user.css
@charset "UTF-8";
/* ==UserStyle==
@name Cohost97
@namespace shadenexus.com/cohost
@version 0.9.2
@description Style that makes cohost look like Microsoft Windows 95/98
@author Gwyndolyn Marchant
@updateURL https://github.com/GwyndolynMarchant/cohost97/raw/main/cohost97.user.css
@preprocessor default
@advanced text wallpaper "Wallpaper (no max height)" "url(https://shadenexus.com/img/nightlinez%20-%20billie%20420.jpg)"
@advanced text wallpaper1500 "Wallpaper at max-height 1500" "url(https://shadenexus.com/img/nightlinez%20-%20billie%20420.1500.jpg)"
@advanced text wallpaper1080 "Wallpaper at max-height 1080" "url(https://shadenexus.com/img/nightlinez%20-%20billie%20420.1080.jpg)"
@advanced text wallpaper720 "Wallpaper at max-height 720" "url(https://shadenexus.com/img/nightlinez%20-%20billie%20420.720.jpg)"
@advanced text wallpaper480 "Wallpaper at max-height 480" "url(https://shadenexus.com/img/nightlinez%20-%20billie%20420.480.jpg)"
@advanced number taskbar-item-width "The width of items on the taskbar" [148, 128, 256, 2, "px"]
@advanced range shadowOpacity "Drop shadow opacity" [60, 0, 100, 10, "%"]
==/UserStyle== */
/*┌─────────────────────────────────────────────────────┐
│ MIXINS │
└─────────────────────────────────────────────────────┘*/
@-moz-document domain("cohost.org") {
/*┌─────────────────────────────────────────────────────┐
│ PALETTE │
└─────────────────────────────────────────────────────┘*/
:root {
--win9x-black-raw: 10, 10, 10;
--win9x-black: rgb(var(--win9x-black-raw));
--win9x-black-shadow: rgba(var(--win9x-black-raw), var(--shadowOpacity));
--win9x-darkgray: #808080;
--win9x-gray: #a0a0a4;
--win9x-lightgray: #c0c0c0;
--win9x-darkwhite: #dfdfdf;
--win9x-offwhite: #fffbf0;
--win9x-white: #ffffff;
--win9x-blue: #0000ff;
--win9x-darkblue: #000080;
--win9x-teal: #007b7b;
--win9x-vivid-cerulean: #02A5FF;
--win9x-electric-orange: rgb(var(--win9x-electric-orange-raw));
--win9x-electric-orange-raw: 255, 51, 0;
--win9x-ryb-green: #66CC33;
--win9x-tangerine-yellow: #FFCC00;
--win9x-office-comment: #fdffcd;
--cohost-purple: rgb(var(--color-foreground));
--win9x-border-outset:
inset -1px -1px var(--win9x-black),
inset 1px 1px var(--win9x-white),
inset -2px -2px var(--win9x-gray),
inset 2px 2px var(--win9x-darkwhite);
--font-primary: "Segoe UI","Helvetica Neue",Helvetica,Arial,sans-serif;
--font-code: "Courier New","Courier Prime",Courier,monospace;
--filter-outline:
drop-shadow( 1px 1px 0px var(--win9x-black))
drop-shadow(-1px 1px 0px var(--win9x-black))
drop-shadow( 1px -1px 0px var(--win9x-black))
drop-shadow(-1px -1px 0px var(--win9x-black));
/* Cohost Overrides */
--color-sidebar-text: var(--win9x-black-raw);
--color-sidebar-accent: var(--win9x-electric-orange-raw);
}
/*┌─────────────────────────────────────────────────────┐
│ CURSORS │
└─────────────────────────────────────────────────────┘*/
body, select {
cursor: url("data:application/octet-stream;base64,AAACAAEAICAAAAAAAAAwAQAAFgAAACgAAAAgAAAAQAAAAAEAAQAAAAAAAAEAAAAAAAAAAAAAAgAAAAIAAAAAAAAA////AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAYAAAAGAAAADAAAAAwAAAAYAAABGAAAAbAAAAHwAAAB/gAAAfwAAAH4AAAB8AAAAeAAAAHAAAABgAAAAQAAAAAAAAAAAAAAA//////////////////////////////////////////////////////////////////////5////8P////D////h///94f///MP///xD///8B////AB///wA///8Af///AP///wH///8D////B////w////8f////P////3////8="), auto;
}
a, button, .cursor-pointer {
cursor: url("data:application/octet-stream;base64,AAACAAEAICAAAAoACgAwAQAAFgAAACgAAAAgAAAAQAAAAAEAAQAAAAAAgAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA////AAAAAAAAAAAAAB/gAAAf4AAAP/AAAD/wAAB/8AAAf/gAAP/4AAC/+AABv/gAA7/4AAM/2AAANtgAADbQAAA2wAAANgAAADAAAAAwAAAAMAAAADAAAAAwAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA///////AD///wA///8AP//+AB///gAf//wAH//8AA//+AAP//gAD//wAA//4AAP/+AAD//iAA///gAf//4AP//+AP///gf///4f///+H////h////4f////P//////////////////////////////////////////////////8="), auto;
}
::selection {
background-color: var(--win9x-tangerine-yellow);
}
/*┌─────────────────────────────────────────────────────┐
│ CUSTOM BACKGROUND │
└─────────────────────────────────────────────────────┘*/
main {
background: var(--wallpaper480) fixed center;
background-size: cover;
}
@media (max-height: 720px) {
main {
background-image: var(--wallpaper720);
}
}
@media (min-height: 721px) and (max-height: 1080px) {
main {
background-image: var(--wallpaper1080);
}
}
@media (min-height: 1081px) and (max-height: 1500px) {
main {
background-image: var(--wallpaper1500);
}
}
@media (min-height: 1501px) {
main {
background-image: var(--wallpaperMax);
}
}
/*┌─────────────────────────────────────────────────────┐
│ AVATARS │
└─────────────────────────────────────────────────────┘*/
a.mask.aspect-square.h-16.w-16 {
grid-column: 1/span 1;
grid-row: 2/span 1;
filter: var(--filter-outline);
}
a.mask.aspect-square.h-16.w-16 > img {
margin: 6px;
width: 58px;
height: 58px;
}
/*┌─────────────────────────────────────────────────────┐
│ TIMELINES │
└─────────────────────────────────────────────────────┘*/
#app main section:not(.text-sidebarText) > div.flex-row:first-child {
position: fixed;
top: 0;
z-index: 10;
left: -6px;
}
#app main section:not(.text-sidebarText) > div.flex-row:first-child > ul {
background: none;
border-radius: 0;
}
#app main section:not(.text-sidebarText) > div.flex-row:first-child > ul > li {
width: var(--taskbar-item-width);
height: 28px;
margin-top: 1px;
border-radius: 0;
text-align: left;
font: normal 10pt var(--font-primary);
color: var(--win9x-black);
letter-spacing: 0rem;
line-height: 12px;
text-transform: capitalize;
}
#app main section:not(.text-sidebarText) > div.flex-row:first-child > ul > li.bg-foreground {
box-shadow: inset -1px -1px var(--win9x-darkwhite), inset 1px 1px var(--win9x-black);
border-top: 1px solid var(--win9x-darkgray);
border-left: 1px solid var(--win9x-darkgray);
border-right: 1px inset var(--win9x-white);
border-bottom: 1px inset var(--win9x-white);
background-color: var(--win9x-darkwhite);
}
#app main section:not(.text-sidebarText) > div.flex-row:first-child > ul > li.bg-foreground-800 {
margin-left: 2px;
box-shadow: var(--win9x-border-outset);
background: none;
}
#app main section:not(.text-sidebarText) > div.flex-row:first-child > ul > li:first-child {
padding-left: 28px;
}
#app main section:not(.text-sidebarText) > div.flex-row:first-child > ul > li:first-child:before {
content: " ";
position: absolute;
background-image: url("http://shadenexus.com/img/win9x-users.png");
width: 16px;
height: 16px;
margin-left: -20px;
margin-top: -2px;
margin-right: 8px;
}
#app main section:not(.text-sidebarText) > div.flex-row:first-child > ul > li:last-child {
padding-left: 28px;
}
#app main section:not(.text-sidebarText) > div.flex-row:first-child > ul > li:last-child:before {
content: " ";
position: absolute;
background-image: url("http://shadenexus.com/img/win9x-usercal.png");
width: 16px;
height: 16px;
margin-left: -20px;
margin-top: -2px;
margin-right: 8px;
}
/*┌─────────────────────────────────────────────────────┐
│ MAIN COLUMN │
└─────────────────────────────────────────────────────┘*/
/* --- Window dressings --- */
#app main section:not(.text-sidebarText) div.renderIfVisible:not(:last-child):not(.flex-row),
#app main section:not(.text-sidebarText) > div:not(:last-child):not(.flex-row) {
box-shadow: 6px 6px var(--win9x-black-shadow), var(--win9x-border-outset);
}
#app main > div {
position: relative;
}
#app main > div:before {
content: " ";
}
#app div[data-view=post-preview] {
background: var(--win9x-lightgray);
padding: 4px;
grid-template-rows: 48px 1fr;
box-shadow: var(--win9x-border-outset);
column-gap: 6px;
row-gap: 0px;
}
#app div[data-view=post-preview] > article > *,
#app div[data-view=post-preview] > article ~ div {
grid-column: 1/span 2;
}
#app div[data-view=post-preview] > a + article > div {
grid-column: 2/span 1;
}
#app div[data-view=post-preview] > article {
display: contents;
position: relative;
box-shadow: none;
background: none;
}
#app div[data-view=post-preview] > article:hover > header {
background: linear-gradient(90deg, var(--cohost-purple), rgb(181, 87, 129));
}
#app div[data-view=post-preview] > article > header {
background: linear-gradient(90deg, var(--win9x-darkgray), var(--win9x-gray));
}
#app div[data-view=post-preview] > article > header, #app div[data-view=post-preview] > article > footer, #app div[data-view=post-preview] > article {
border-radius: 0;
}
#app div[data-view=post-preview] > article > header a {
color: var(--win9x-white);
font: 0.9em var(--font-primary);
}
#app div[data-view=post-preview] > article > header a[rel=author] {
max-width: 400px;
font-weight: bold;
}
#app div[data-view=post-preview] > article > div {
box-shadow: inset -1px 0px var(--win9x-darkwhite), inset 1px 0px var(--win9x-black);
border-left: 1px solid var(--win9x-darkgray);
border-right: 1px inset var(--win9x-white);
margin-right: 2px;
background: var(--win9x-white);
/* --- POST CONTENT WARNINGS --- */
}
#app div[data-view=post-preview] > article > div:first-of-type {
margin-top: 4px;
border-top: 1px solid var(--win9x-darkgray);
box-shadow: inset -1px 0px var(--win9x-darkwhite), inset 1px 1px var(--win9x-black);
}
#app div[data-view=post-preview] > article > div:last-of-type {
border-bottom: 1px inset var(--win9x-white);
box-shadow: inset -1px -1px var(--win9x-darkwhite), inset 1px 0px var(--win9x-black);
}
#app div[data-view=post-preview] > article > div:only-of-type {
box-shadow: inset -1px -1px var(--win9x-darkwhite), inset 1px 1px var(--win9x-black);
}
#app div[data-view=post-preview] > article > div div.text-cherry {
position: relative;
background-color: var(--win9x-office-comment);
border-color: var(--win9x-black);
font: normal 10pt var(--font-primary);
color: var(--win9x-black);
letter-spacing: 0rem;
}
#app div[data-view=post-preview] > article > div div.text-cherry.border-gray-300:before {
content: " ";
position: absolute;
width: 32px;
height: 32px;
background: url("http://shadenexus.com/img/win9x-restrict.png");
background-repeat: no-repeat;
}
#app div[data-view=post-preview] > article > div div.text-cherry.border-gray-300 > svg > * {
display: none;
}
#app div[data-view=post-preview] > article > div div.text-cherry.border-cherry-300:before {
content: " ";
position: absolute;
width: 32px;
height: 32px;
background: url("http://shadenexus.com/img/win9x-warn.png");
background-repeat: no-repeat;
}
#app div[data-view=post-preview] > article > div div.text-cherry.border-cherry-300 > svg > * {
display: none;
}
#app div[data-view=post-preview] > article > div div.break-words {
overflow-wrap: anywhere;
}
#app div[data-view=post-preview] > article > hr {
display: none;
}
#app div[data-view=post-preview] > article img.w-full {
padding-left: 2px;
}
#app div[data-view=post-preview] > article > footer, #app div[data-view=post-preview] > article > footer > div > div {
background: none;
}
#app div[data-view=post-preview] > article > footer a {
color: var(--win9x-black);
}
#app div[data-view=post-preview] > article > footer a[title^=share], #app div[data-view=post-preview] > article > footer a[title^=edit], #app div[data-view=post-preview] > article > footer button {
box-shadow: var(--win9x-border-outset);
}
#app div[data-view=post-preview] > article > footer a[title^=share] {
padding: 2px 16px;
}
#app div[data-view=post-preview] > article > footer a[title^=edit] {
width: 56px;
height: 1.7em;
}
#app div[data-view=post-preview] > article > footer a[title^=edit] svg {
width: 24px;
margin-left: 16px;
margin-top: 2px;
}
#app div[data-view=post-preview] > article > footer button {
position: relative;
width: 56px;
height: 1.7em;
}
#app div[data-view=post-preview] > article > footer button[title^=unlike]:before {
content: " ";
position: absolute;
width: 32px;
height: 32px;
background: url("https://shadenexus.com/img/win9x-mshearts.png");
background-repeat: no-repeat;
}
#app div[data-view=post-preview] > article > footer button[title^=unlike] > svg > * {
display: none;
}
#app div[data-view=post-preview] > article > footer button[title^=unlike]:before {
top: 2px;
margin-left: -12px;
background-size: 24px 24px;
}
#app div[data-view=post-preview] > article > footer button > svg {
margin: 1px 16px;
}
#app main section > div {
border-radius: 0;
}
#app div[data-view=post-preview] > article > header time,
#app div[data-view=post-preview] > article > header svg,
[id^=headlessui-menu-button] > svg {
color: var(--win9x-white);
font: 0.9em var(--font-primary) !important;
}
/*┌─────────────────────────────────────────────────────┐
│ TIME TRAVEL BUTTONS │
└─────────────────────────────────────────────────────┘*/
#app main section:not(.text-sidebarText) > div > div:last-child > span.hidden:first-child {
display: none;
}
#app main section:not(.text-sidebarText) > div > div:last-child > a:last-child {
position: relative;
margin-bottom: 16px;
display: flex;
flex-direction: column;
max-width: 64px;
align-items: center;
}
#app main section:not(.text-sidebarText) > div > div:last-child > a:last-child > svg {
filter: var(--filter-outline);
margin-bottom: 4px;
padding: 0 0 0 0;
width: 32px;
height: 32px;
}
#app main section:not(.text-sidebarText) > div > div:last-child > a:last-child:after {
content: "Older Posts";
text-align: center;
background-color: var(--win9x-gray);
border: 1px dotted var(--win9x-black);
font: normal 10pt var(--font-primary);
color: var(--win9x-black);
letter-spacing: 0rem;
text-transform: capitalize;
}
#app main section:not(.text-sidebarText) > div > div:last-child > a:nth-child(2) {
position: relative;
margin-bottom: 16px;
display: flex;
flex-direction: column;
max-width: 64px;
align-items: center;
}
#app main section:not(.text-sidebarText) > div > div:last-child > a:nth-child(2) > svg {
filter: var(--filter-outline);
margin-bottom: 4px;
padding: 0 0 0 0;
width: 32px;
height: 32px;
}
#app main section:not(.text-sidebarText) > div > div:last-child > a:nth-child(2):after {
content: "Newer Posts";
text-align: center;
background-color: var(--win9x-gray);
border: 1px dotted var(--win9x-black);
font: normal 10pt var(--font-primary);
color: var(--win9x-black);
letter-spacing: 0rem;
text-transform: capitalize;
}
/*┌─────────────────────────────────────────────────────┐
│ SIDEBAR │
└─────────────────────────────────────────────────────┘*/
section.text-sidebarText {
position: relative;
border: 1px solid var(--win9x-black);
background-color: var(--win9x-office-comment);
}
section.text-sidebarText > div:first-child {
display: none;
}
section.text-sidebarText a, section.text-sidebarText h1 + time, section.text-sidebarText strong {
color: var(--cohost-purple);
}
section.text-sidebarText code {
color: var(--win9x-blue);
}
section.text-sidebarText h2 {
font-size: 1em;
}
section.text-sidebarText, section.text-sidebarText p, section.text-sidebarText ul {
font: normal 10pt var(--font-primary);
color: var(--win9x-black);
letter-spacing: 0rem;
}
section.text-sidebarText > *:last-child:after {
content: "↓ clippybug by @lifning";
font-size: 8pt;
color: var(--win9x-darkgray);
float: right;
}
section.text-sidebarText:after {
content: " ";
position: absolute;
top: auto;
right: auto;
bottom: -9px;
left: 50%;
transform: rotate(45deg);
width: 16px;
height: 16px;
background-color: var(--win9x-office-comment);
border: 0px solid var(--win9x-black);
border-right-width: 1px;
border-bottom-width: 1px;
}
#app > div > header nav > form > select, #app > div > header nav > form > button, #app > div > header nav > a, #app > div > header nav > a:hover {
font: normal 10pt var(--font-primary);
color: var(--win9x-black);
letter-spacing: 0rem;
}
#app main > div > ul, #app main > div > ul select, #app main > div:last-child > div::after {
font: normal 10pt var(--font-primary);
color: var(--win9x-black);
letter-spacing: 0rem;
}
section.text-sidebarText:before {
content: " ";
position: absolute;
width: 128px;
height: 128px;
top: auto;
right: auto;
bottom: -134px;
left: 30%;
background-image: url("https://staging.cohostcdn.org/attachment/e4623dff-6c49-4f46-b2ac-3369a24393fe/cohost-clippy.png");
background-repeat: no-repeat;
background-size: 128px, 128px;
}
/*┌─────────────────────────────────────────────────────┐
│ TOP BAR │
└─────────────────────────────────────────────────────┘*/
#app > div > header {
box-shadow: var(--win9x-border-outset);
height: 32px;
background-color: var(--win9x-lightgray);
}
#app > div > header > div {
max-width: 100%;
}
#app > div > header > div > a {
margin: 2px 0px 2px 4px;
box-shadow: var(--win9x-border-outset);
}
#app > div > header > div > a, #app > div > header > div > a > svg {
height: 24px;
}
#app > div > header > div > a > svg {
padding: 4px;
color: var(--win9x-black);
}
#app > div > header > div > a > svg > path:first-child {
fill: var(--cohost-purple);
}
#app > div > header ~ div {
margin-top: 32px;
}
#app > div > header > div > a:active, #app > div > header nav > form > button:active, #app > div > header nav > a:active {
box-shadow: inset -1px -1px var(--win9x-darkwhite), inset 1px 1px var(--win9x-black);
border-top: 1px solid var(--win9x-darkgray);
border-left: 1px solid var(--win9x-darkgray);
border-right: 1px inset var(--win9x-white);
border-bottom: 1px inset var(--win9x-white);
background-color: var(--win9x-darkwhite);
}
#app > div > header nav > div:first-child > button {
width: var(--taskbar-item-width);
height: 28px;
font: normal 10pt var(--font-primary);
color: var(--win9x-black);
letter-spacing: 0rem;
box-shadow: inset -1px -1px var(--win9x-darkwhite), inset 1px 1px var(--win9x-black);
border-top: 1px solid var(--win9x-darkgray);
border-left: 1px solid var(--win9x-darkgray);
border-right: 1px inset var(--win9x-white);
border-bottom: 1px inset var(--win9x-white);
}
#app > div > header nav > div:first-child > button > div {
padding: 0;
background: none;
}
#app > div > header nav > div:first-child > button img {
width: 20px;
height: 20px;
margin-top: 7px;
margin-left: 4px;
}
#app > div > header nav > div:first-child > button svg {
fill: var(--win9x-black);
}
#app > div > header nav > div:first-child > ul {
top: 8px;
right: 4px;
bottom: auto;
left: auto;
z-index: 10;
background: var(--win9x-lightgray);
border-radius: 0px;
box-shadow: var(--win9x-border-outset);
}
#app > div > header nav > div:first-child > ul > li {
border-radius: 0px;
padding: 0px 4px;
margin: 3px 4px;
}
#app > div > header nav > div:first-child > ul > li:hover {
background-color: var(--cohost-purple);
}
/*┌─────────────────────────────────────────────────────┐
│ LEFT MENU |
└─────────────────────────────────────────────────────┘*/
@media (min-width: 1024px) {
#app main > div > ul {
position: fixed;
background: linear-gradient(185deg, var(--win9x-darkgray), var(--win9x-gray)), var(--win9x-lightgray);
border-radius: 0;
box-shadow: var(--win9x-border-outset);
color: var(--win9x-black);
padding: 2px 4px 12px 48px;
row-gap: 0px;
top: 32px;
right: auto;
bottom: auto;
left: 0px;
}
#app main > div > ul:hover {
background: linear-gradient(185deg, var(--cohost-purple), rgb(181, 87, 129)), var(--win9x-lightgray);
}
#app main > div > ul, #app main > div > ul:hover {
background-size: 48px calc(100% - 3px), 100% 100%;
background-repeat: no-repeat, repeat;
}
#app main > div > ul:before {
content: "𝗖𝗼𝗵𝗼𝘀𝘁 97";
position: absolute;
writing-mode: vertical-lr;
font-size: 2.5em;
top: 8px;
right: auto;
bottom: auto;
left: 0;
color: var(--win9x-white);
}
#app main > div > ul li:hover, #app main > div > ul li {
padding: 8px 16px 8px 6px;
height: 32px;
margin: 0;
border: none;
}
#app main > div > ul > a {
margin: 1px 0;
height: 32px;
}
#app main > div > ul > a:nth-child(2) ~ ul {
margin-top: 0px;
}
#app main > div > ul li:hover {
color: var(--win9x-white);
background-color: var(--cohost-purple);
border-radius: 0;
}
#app main > div > ul > a[href="https://cohost.org/rc/project/notifications"] svg ~ svg > path {
fill: var(--win9x-office-comment);
stroke: var(--win9x-black);
}
#app main > div > ul > a[href="https://cohost.org/rc/project/notifications"] svg ~ svg > text {
fill: var(--win9x-black);
}
}
/*┌─────────────────────────────────────────────────────┐
│ NEW POST BUTTON │
└─────────────────────────────────────────────────────┘*/
#app > div > header nav > div:nth-child(2) {
position: fixed;
top: 40px;
right: 78px;
bottom: auto;
left: auto;
}
#app > div > header nav > div:nth-child(2) > a {
position: relative;
display: flex;
flex-direction: column;
background: none;
}
#app > div > header nav > div:nth-child(2) > a:before {
content: " ";
position: absolute;
width: 32px;
height: 32px;
background: url("https://shadenexus.com/img/win9x-post.png");
background-repeat: no-repeat;
}
#app > div > header nav > div:nth-child(2) > a > svg > * {
display: none;
}
#app > div > header nav > div:nth-child(2) > a > span {
margin-top: 28px;
text-align: center;
background-color: var(--win9x-gray);
border: 1px dotted var(--win9x-black);
font: normal 10pt var(--font-primary);
color: var(--win9x-black);
letter-spacing: 0rem;
text-transform: capitalize;
}
/*┌─────────────────────────────────────────────────────┐
│ QUICK POST BUTTON │
└─────────────────────────────────────────────────────┘*/
#app main > div:last-child div.fixed {
position: relative;
margin-bottom: 16px;
display: flex;
flex-direction: column;
max-width: 64px;
align-items: center;
position: fixed;
top: auto;
right: 8px;
bottom: 8px;
left: auto;
}
#app main > div:last-child div.fixed:before {
content: " ";
position: absolute;
width: 32px;
height: 32px;
background: url("https://shadenexus.com/img/win9x-wordpad.png");
background-repeat: no-repeat;
}
#app main > div:last-child div.fixed > svg > * {
display: none;
}
#app main > div:last-child div.fixed > svg {
filter: var(--filter-outline);
margin-bottom: 4px;
padding: 0 0 0 0;
width: 32px;
height: 32px;
}
#app main > div:last-child div.fixed:after {
content: "Quick Post";
text-align: center;
background-color: var(--win9x-gray);
border: 1px dotted var(--win9x-black);
font: normal 10pt var(--font-primary);
color: var(--win9x-black);
letter-spacing: 0rem;
text-transform: capitalize;
}
/*┌─────────────────────────────────────────────────────┐
│ LOGOUT BUTTON │
└─────────────────────────────────────────────────────┘*/
form[action="https://cohost.org/rc/logout"] {
position: fixed;
top: 40px;
right: 8px;
bottom: auto;
left: auto;
}
form[action="https://cohost.org/rc/logout"] > button {
display: flex;
flex-direction: column;
}
form[action="https://cohost.org/rc/logout"] > button:before {
content: " ";
position: absolute;
width: 32px;
height: 32px;
background: url("http://shadenexus.com/img/win9x-shutdown.png");
background-repeat: no-repeat;
}
form[action="https://cohost.org/rc/logout"] > button > svg > * {
display: none;
}
form[action="https://cohost.org/rc/logout"] > button, form[action="https://cohost.org/rc/logout"] > button:hover {
background: none;
border: none;
}
form[action="https://cohost.org/rc/logout"] > button > span {
margin-top: 28px;
text-align: center;
background-color: var(--win9x-gray);
border: 1px dotted var(--win9x-black);
font: normal 10pt var(--font-primary);
color: var(--win9x-black);
letter-spacing: 0rem;
text-transform: capitalize;
}
/*┌─────────────────────────────────────────────────────┐
│ ADDON - DEDUP │
└─────────────────────────────────────────────────────┘*/
#app article > div.-cohost-dedup-hidden-chost {
opacity: 25%;
filter: grayscale(100%);
max-height: 128px;
margin-bottom: 0;
}
#app article > div.-cohost-dedup-hidden-chost div[data-post-body=true] {
max-height: 32px;
overflow-y: hidden;
}
#app article > a.-cohost-dedup-link {
position: absolute;
padding-top: 0;
margin-bottom: 0;
margin-top: 52px;
background: url("https://shadenexus.com/img/win9x-recycle.png");
background-repeat: no-repeat;
background-size: auto auto;
background-position: center center;
width: calc(100% - 32px);
height: 128px;
color: rgba(255, 255, 255, 0);
margin-left: 32px;
}
}
@-moz-document regexp("https?://cohost.org/rc/project/notifications") {
/*┌─────────────────────────────────────────────────────┐
│ NOTIFICATIONS │
└─────────────────────────────────────────────────────┘*/
#app main section > div {
background: var(--win9x-lightgray);
padding: 4px;
}
#app main section > div > div {
border-radius: 0;
}
#app main section > div > div:first-child {
justify-content: flex-start;
}
#app main section > div > div:first-child:before {
content: "Notifications -";
padding-right: 0.2em;
}
#app main section > div > div:first-child:before, #app main section > div > div:first-child > time, #app main section > div > div:first-child {
color: var(--win9x-white);
font: bold 0.9em var(--font-primary);
text-transform: capitalize;
}
#app main section > div > div:nth-child(n+2) {
font: normal 10pt var(--font-primary);
color: var(--win9x-black);
letter-spacing: 0rem;
font-size: 10pt;
}
#app main section > div > div:nth-child(n+2):hover {
background: var(--win9x-white);
padding: 6px;
border: 1px dotted var(--win9x-gray);
margin: 6px 5px 5px 5px;
outline: 5px solid var(--win9x-white);
}
#app main section > div:hover > div:first-child {
background: linear-gradient(90deg, var(--cohost-purple), rgb(181, 87, 129));
}
#app main section > div > div:first-child {
background: linear-gradient(90deg, var(--win9x-darkgray), var(--win9x-gray));
}
}
@-moz-document regexp("https?://cohost.org/rc/search(\\?q=.*)?") {
/*┌─────────────────────────────────────────────────────┐
│ SEARCH PAGE │
└─────────────────────────────────────────────────────┘*/
#app main section > div {
background: var(--win9x-lightgray);
box-shadow: var(--win9x-border-outset);
margin-bottom: 16em;
}
#app main section > div:hover h1 {
background: linear-gradient(90deg, var(--cohost-purple), rgb(181, 87, 129));
}
#app main section > div h1 {
background: linear-gradient(90deg, var(--win9x-darkgray), var(--win9x-gray));
}
#app main section > div h1 {
justify-content: flex-start;
font: bold 12pt var(--font-primary);
text-transform: capitalize;
color: var(--win9x-white);
letter-spacing: inherit;
padding: 6px;
border-radius: 0;
}
#app main section > div input {
height: 24px;
box-shadow: inset -1px -1px var(--win9x-darkwhite), inset 1px 1px var(--win9x-black);
border-top: 1px solid var(--win9x-darkgray);
border-left: 1px solid var(--win9x-darkgray);
border-right: 1px inset var(--win9x-white);
border-bottom: 1px inset var(--win9x-white);
font-family: var(--font-primary);
font-size: 13px;
}
#app main section > div, #app main section > div input {
padding: 4px;
}
}
@-moz-document regexp("https?://cohost.org/.+") {
/*┌─────────────────────────────────────────────────────┐
│ PROFILE PAGES │
└─────────────────────────────────────────────────────┘*/
#app > div > div > div > img.object-cover {
position: fixed;
object-fit: cover;
width: 100%;
height: 100%;
z-index: 0;
top: 0;
right: auto;
bottom: auto;
left: 0;
}
#app img.object-cover ~ div > div {
z-index: 2;
}
#app img.object-cover ~ div > div:first-child {
background: var(--win9x-lightgray);
box-shadow: var(--win9x-border-outset);
margin-top: 4em;
padding-top: 9em;
grid-column: 1/1;
}
#app img.object-cover ~ div > div:first-child, #app img.object-cover ~ div > div:first-child h1, #app img.object-cover ~ div > div:first-child h2, #app img.object-cover ~ div > div:first-child h3 {
font: normal 10pt var(--font-primary);
color: var(--win9x-black);
letter-spacing: 0rem;
}
#app img.object-cover ~ div > div:first-child button[id^=headlessui-menu-button] {
top: -12px;
right: -4px;
bottom: auto;
left: auto;
}
#app img.object-cover ~ div > div:first-child:hover h1 {
background: linear-gradient(90deg, var(--cohost-purple), rgb(181, 87, 129));
}
#app img.object-cover ~ div > div:first-child h1 {
background: linear-gradient(90deg, var(--win9x-darkgray), var(--win9x-gray));
}
#app img.object-cover ~ div > div:first-child h1 {
position: absolute;
top: 0px;
right: 0px;
bottom: auto;
left: 0px;
margin: 4px;
height: 24px;
font-size: 12pt;
text-align: left;
padding-left: 0.5em;
z-index: -1;
}
#app img.object-cover ~ div > div:first-child h1 a {
color: var(--win9x-white);
}
#app img.object-cover ~ div > div:first-child a, #app img.object-cover ~ div > div:first-child ul svg {
color: var(--win9x-darkblue);
}
#app img.object-cover ~ div > div:first-child .cohost-shadow-light {
filter: var(--filter-outline);
}
#app img.object-cover ~ div > div:first-child a[href="https://cohost.org/rc/project/edit"],
#app img.object-cover ~ div > div:first-child button.align-middle {
margin: 2px 0px 2px 4px;
height: 32px;
box-shadow: var(--win9x-border-outset);
border-radius: 0;
font-size: 10pt;
font-weight: normal;
color: var(--win9x-black);
background: none;
border: none;
}
#app img.object-cover ~ div > div:first-child a[href="https://cohost.org/rc/project/edit"]:active,
#app img.object-cover ~ div > div:first-child button.align-middle:active {
box-shadow: inset -1px -1px var(--win9x-darkwhite), inset 1px 1px var(--win9x-black);
border-top: 1px solid var(--win9x-darkgray);
border-left: 1px solid var(--win9x-darkgray);
border-right: 1px inset var(--win9x-white);
border-bottom: 1px inset var(--win9x-white);
background-color: var(--win9x-darkwhite);
}
#app img.object-cover ~ div:before {
content: " ";
}
}
@-moz-document regexp("https?://cohost.org/.+/post/.*") {
/*┌─────────────────────────────────────────────────────┐
│ COMMENTS SECTIONS │
└─────────────────────────────────────────────────────┘*/
#app article + div, #app article ~ div > div {
background: none;
border-radius: 0;
box-shadow: none;
}
#app article + div textarea {
box-shadow: inset -1px -1px var(--win9x-darkwhite), inset 1px 1px var(--win9x-black);
border-top: 1px solid var(--win9x-darkgray);
border-left: 1px solid var(--win9x-darkgray);
border-right: 1px inset var(--win9x-white);
border-bottom: 1px inset var(--win9x-white);
padding: 4px 8px;
}
#app article ~ div > div a.mask {
filter: var(--filter-outline);
}
#app article ~ div div > button {
background: none;
font: normal 10pt var(--font-primary);
color: var(--win9x-black);
letter-spacing: 0rem;
text-transform: capitalize;
font-weight: normal;
margin: 2px 0px 2px 4px;
height: 32px;
box-shadow: var(--win9x-border-outset);
border-radius: 0;
font-size: 10pt;
min-width: 48px;
}
#app article ~ div div > button:active {
box-shadow: inset -1px -1px var(--win9x-darkwhite), inset 1px 1px var(--win9x-black);
border-top: 1px solid var(--win9x-darkgray);
border-left: 1px solid var(--win9x-darkgray);
border-right: 1px inset var(--win9x-white);
border-bottom: 1px inset var(--win9x-white);
background-color: var(--win9x-darkwhite);
}
#app article ~ div > h4 {
text-align: center;
text-decoration: underline;
color: var(--win9x-black);
}
#app article ~ div > h4 > a {
color: var(--cohost-purple);
}
#app article ~ div > h4:first-letter {
text-transform: capitalize;
}
article[data-comment-id] {
border-bottom: 1px solid var(--win9x-darkwhite);
box-shadow: 0px -1px inset var(--win9x-darkgray);
padding-bottom: 1.2em;
}
article[data-comment-id] > div:first-of-type {
background-color: var(--cohost-purple);
margin: -16px 0px -18px -16px;
}
}
@-moz-document regexp("https?://cohost.org/rc/tagged/.*") {
/*┌─────────────────────────────────────────────────────┐
│ BOOKMARKED TAGS │
└─────────────────────────────────────────────────────┘*/
h6.h6 {
width: var(--taskbar-item-width);
height: 28px;
margin-top: 1px;
border-radius: 0;
text-align: left;
font: normal 10pt var(--font-primary);
color: var(--win9x-black);
letter-spacing: 0rem;
line-height: 12px;
position: fixed;
top: 1px;
right: auto;
bottom: auto;
left: 76px;
box-shadow: var(--win9x-border-outset);
box-shadow: inset -1px -1px var(--win9x-darkwhite), inset 1px 1px var(--win9x-black);
border-top: 1px solid var(--win9x-darkgray);
border-left: 1px solid var(--win9x-darkgray);
border-right: 1px inset var(--win9x-white);
border-bottom: 1px inset var(--win9x-white);
padding-top: 8px;
background-color: var(--win9x-darkwhite);
padding-left: 28px;
}
h6.h6:before {
content: " ";
position: absolute;
background-image: url("https://shadenexus.com/img/win9x-folder.png");
width: 16px;
height: 16px;
margin-left: -20px;
margin-top: -2px;
margin-right: 8px;
}
h6.h6 + button {
position: fixed;
top: 38px;
right: auto;
bottom: auto;
left: calc(76px + var(--taskbar-item-width));
border: 1px solid var(--win9x-black);
background-color: var(--win9x-office-comment);
}
h6.h6 + button:first-letter {
text-transform: capitalize;
}
h6.h6 + button:after {
content: " ";
position: absolute;
top: -9px;
right: auto;
bottom: auto;
left: 10%;
transform: rotate(225deg);
width: 16px;
height: 16px;
background-color: var(--win9x-office-comment);
border: 0px solid var(--win9x-black);
border-right-width: 1px;
border-bottom-width: 1px;
}
h6.h6 + button:hover, h6.h6 + button:hover:after {
background-color: var(--win9x-tangerine-yellow);
}
}
@-moz-document regexp("https?://cohost.org/\\w+/post/compose.*"),
regexp("https?://cohost.org/\\w+/post/.*/edit") {
/*┌─────────────────────────────────────────────────────┐
│ SHARING A POST │
└─────────────────────────────────────────────────────┘*/
#app div[data-view=post-preview] {
margin-top: 44pt;
}
#app > div > div {
background: linear-gradient(180deg, var(--win9x-blue), var(--win9x-darkblue));
background-size: 100% 100%;
}
/* Your post compose box when sharing! */
#app .container h1 + div + div {
background: var(--win9x-lightgray);
padding: 4px;
box-shadow: var(--win9x-border-outset);
margin-bottom: 15px;
}
#app .container h1 + div + div article, #app .container h1 + div + div footer, #app .container h1 + div + div header, #app .container h1 + div + div header ~ hr {
box-shadow: none;
background: none;
border: none;
}
#app .container h1 + div + div article + p {
position: relative;
background-color: var(--win9x-office-comment);
font: normal 10pt var(--font-primary);
color: var(--win9x-black);
letter-spacing: 0rem;
padding: 4px;
border-radius: 4px;
border: 1px solid var(--win9x-black);
margin-top: -15px;
margin-bottom: 10px;
}
#app .container h1 + div + div article + p:before {
content: " ";
position: absolute;
top: -9px;
right: auto;
bottom: auto;
left: 15px;
transform: rotate(225deg);
width: 16px;
height: 16px;
background-color: var(--win9x-office-comment);
border: 0px solid var(--win9x-black);
border-right-width: 1px;
border-bottom-width: 1px;
}
#app div[data-view=post-preview] + div article > div > div[role=tabpanel] > div > div:last-child > div {
box-shadow: inset -1px -1px var(--win9x-darkwhite), inset 1px 1px var(--win9x-black);
border-top: 1px solid var(--win9x-darkgray);
border-left: 1px solid var(--win9x-darkgray);
border-right: 1px inset var(--win9x-white);
border-bottom: 1px inset var(--win9x-white);
background: var(--win9x-white);
}
#app div[data-view=post-preview] + div article > div > div[role=tabpanel] > div > div:last-child > div * {
background: none;
font: normal 10pt var(--font-primary);
color: var(--win9x-black);
letter-spacing: 0rem;
}
#app .container h1 + div + div > div > div:nth-child(1) {
filter: var(--filter-outline);
margin: 8px -8px 0 8px;
}
#app > div h1.text-xl {
font: italic bold 32pt Arial, sans-serif;
text-shadow: 4px 4px 0 var(--win9x-black);
color: var(--win9x-white);
position: absolute;
left: 2vh;
}
}
/*# sourceMappingURL=cohost97.user.css.map */
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment