Skip to content

Instantly share code, notes, and snippets.

@marclave

marclave/windows98.css

Created October 1, 2024 16:30
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save marclave/46fa068e797a22bc9fedc6d4010d3c9e to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save marclave/46fa068e797a22bc9fedc6d4010d3c9e to your computer and use it in GitHub Desktop.
Download ZIP
Raw
windows98.css
@font-face {
font-family: 'Pixelated MS Sans Serif';
font-style: normal;
font-weight: 400;
src: url('https://unpkg.com/[email protected]/dist/ms_sans_serif.woff') format('woff');
src: url('https://unpkg.com/[email protected]/dist/ms_sans_serif.woff2') format('woff2');
}
@font-face {
font-family: 'Pixelated MS Sans Serif';
font-style: normal;
font-weight: 700;
src: url('https://unpkg.com/[email protected]/dist/ms_sans_serif_bold.woff') format('woff');
src: url('https://unpkg.com/[email protected]/dist/ms_sans_serif_bold.woff2') format('woff2');
}
:root {
--theme-font: Arial, 'Inter', cursive, var(--system-fonts);
--button-highlight: #ffffff;
--button-face: #dfdfdf;
--button-shadow: #808080;
--window-frame: #0a0a0a;
--border-raised-outer: inset -1px -1px var(--window-frame),
inset 1px 1px var(--button-highlight);
--border-raised-inner: inset -2px -2px var(--button-shadow),
inset 2px 2px var(--button-face);
--border-sunken-outer: inset -1px -1px var(--button-highlight),
inset 1px 1px var(--window-frame);
--border-sunken-inner: inset -2px -2px var(--button-face),
inset 2px 2px var(--button-shadow);
}
.scalar-card *:not(.cm-scroller *),
.sidebar * {
font-family: 'Pixelated MS Sans Serif', cursive, var(--system-fonts);
}
/* basic theme */
.light-mode,
.dark-mode {
--theme-color-1: #000;
--theme-color-2: #000;
--theme-color-3: #000;
--theme-color-accent: #00f;
--theme-background-1: #c0c0c0;
--theme-background-2: #c0c0c0;
--theme-background-3: #c0c0c0;
--theme-background-accent: #8ab4f81f;
--theme-border-color: grey;
--theme-code-languages-background-supersede: silver;
--theme-code-language-color-supersede: #000;
}
.sidebar-search-key,
.sidebar-search,
.code-languages__active .code-languages-background .code-languages-icon {
border-radius: 0;
box-shadow:
inset -1px -1px #0a0a0a,
inset 1px 1px #fff,
inset -2px -2px grey,
inset 2px 2px #dfdfdf !important;
border: none;
}
.download-cta a,
.light-mode .markdown a,
.dark-mode .markdown a {
text-decoration: underline !important;
}
/* Document header */
.light-mode .t-doc__header,
.dark-mode .t-doc__header {
--header-background-1: var(--theme-background-1);
--header-border-color: var(--theme-border-color);
--header-color-1: var(--theme-color-1);
--header-color-2: var(--theme-color-2);
--header-background-toggle: var(--theme-color-3);
--header-call-to-action-color: var(--theme-color-accent);
}
/* Document Sidebar */
.light-mode .t-doc__sidebar,
.dark-mode .t-doc__sidebar {
--sidebar-background-1: white;
--sidebar-item-hover-color: currentColor;
--sidebar-item-hover-background: transparent;
--sidebar-item-active-background: navy;
--sidebar-border-color: var(--theme-border-color);
--sidebar-color-1: var(--theme-color-1);
--sidebar-color-2: var(--theme-color-2);
--sidebar-color-active: white;
--sidebar-search-background: transparent;
--sidebar-search-border-color: var(--theme-border-color);
--sidebar-search--color: var(--theme-color-3);
box-shadow:
inset -1px -1px #fff,
inset 1px 1px grey,
inset -2px -2px #dfdfdf,
inset 2px 2px #0a0a0a;
}
/* advanced */
.light-mode,
.dark-mode {
--theme-button-1: rgb(49 53 56);
--theme-button-1-color: #fff;
--theme-button-1-hover: rgb(28 31 33);
--theme-color-green: #069061;
--theme-color-red: #ef0006;
--theme-color-yellow: #edbe20;
--theme-color-blue: #0082d0;
--theme-color-orange: #d05e00;
--theme-color-purple: #5203d1;
--theme-scrollbar-color: rgba(0, 0, 0, 0.18);
--theme-scrollbar-color-active: rgba(0, 0, 0, 0.36);
}
:root {
--theme-radius: 0px;
--theme-radius-lg: 0px;
--theme-radius-xl: 0px;
--theme-header-height: 50px;
}
.scalar-card {
box-shadow:
inset -1px -1px #0a0a0a,
inset 1px 1px #fff,
inset -2px -2px grey,
inset 2px 2px #dfdfdf !important;
border: none !important;
--theme-background-1: transparent !important;
--theme-background-2: transparent !important;
--theme-background-3: transparent !important;
}
.badge {
box-shadow:
inset -1px -1px #0a0a0a,
inset 1px 1px #fff,
inset -2px -2px grey,
inset 2px 2px #dfdfdf !important;
border-radius: 0 !important;
margin-right: 6px;
}
.server-item {
box-shadow:
inset -1px -1px #fff,
inset 1px 1px grey,
inset -2px -2px #dfdfdf,
inset 2px 2px #0a0a0a;
background: transparent;
border: none;
}
.card-form-button,
.card-form-input {
box-shadow:
inset -1px -1px #fff,
inset 1px 1px grey,
inset -2px -2px #dfdfdf,
inset 2px 2px #0a0a0a;
background: white;
border: none;
}
.scalar-card:first-of-type:last-of-type .scalar-card-header:before {
content: '';
position: absolute;
top: 3px;
left: 3px;
width: calc(100% - 7px);
height: 29px;
background: linear-gradient(90deg, navy, #1084d0);
z-index: -1;
}
.scalar-card:first-of-type:last-of-type .scalar-card-header {
--theme-color-3: white !important;
--theme-border-color: transparent;
margin-bottom: -3px;
font-weight: bolder;
}
.darklight {
position: relative;
}
.darklight a {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: linear-gradient(90deg, navy, #1084d0);
color: white;
font-weight: 900;
padding: 16px;
}
.tab {
margin-right: 6px;
text-decoration: none !important;
}
.tab:before {
box-shadow:
inset -1px -1px #0a0a0a,
inset 1px 1px #fff,
inset -2px -2px grey,
inset 2px 2px #dfdfdf !important;
background: silver;
opacity: 1;
border-radius: 3px;
}
.code-languages__active:after {
display: none;
}
.tab-selected:before {
opacity: 1 !important;
}
.custom-scroll .cm-scroller::-webkit-scrollbar:vertical,
.custom-scroll::-webkit-scrollbar:vertical {
width: 16px;
}
.custom-scroll::-webkit-scrollbar:horizontal {
height: 17px;
}
.cm-scroller::-webkit-scrollbar-corner:horizontal,
.custom-scroll .cm-scroller::-webkit-scrollbar-corner:vertical,
.custom-scroll::-webkit-scrollbar-corner:vertical {
background: var(--button-face);
}
.custom-scroll::-webkit-scrollbar-track:horizontal,
.custom-scroll .cm-scroller::-webkit-scrollbar-track:vertical,
.custom-scroll::-webkit-scrollbar-track:vertical {
background-image: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMiIgaGVpZ2h0PSIyIiB2aWV3Qm94PSIwIDAgMiAyIiBmaWxsPSJub25lIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPgo8cGF0aCBmaWxsLXJ1bGU9ImV2ZW5vZGQiIGNsaXAtcnVsZT0iZXZlbm9kZCIgZD0iTTEgMEgwVjFIMVYySDJWMUgxVjBaIiBmaWxsPSIjQzBDMEMwIi8+CjxwYXRoIGZpbGwtcnVsZT0iZXZlbm9kZCIgY2xpcC1ydWxlPSJldmVub2RkIiBkPSJNMiAwSDFWMUgwVjJIMVYxSDJWMFoiIGZpbGw9IndoaXRlIi8+Cjwvc3ZnPgo=);
}
.custom-scroll::-webkit-scrollbar-thumb:horizontal,
.custom-scroll .cm-scroller::-webkit-scrollbar-thumb:vertical,
.custom-scroll::-webkit-scrollbar-thumb:vertical {
background-color: var(--button-face);
box-shadow: var(--border-raised-outer), var(--border-raised-inner);
border-radius: 0 !important;
}
.custom-scroll::-webkit-scrollbar-button:horizontal:start:decrement,
.custom-scroll::-webkit-scrollbar-button:horizontal:end:increment,
.custom-scroll .cm-scroller::-webkit-scrollbar-button:vertical:start:decrement,
.custom-scroll .cm-scroller::-webkit-scrollbar-button:vertical:end:increment,
.custom-scroll::-webkit-scrollbar-button:vertical:start:decrement,
.custom-scroll::-webkit-scrollbar-button:vertical:end:increment {
display: block;
}
.custom-scroll .cm-scroller::-webkit-scrollbar-button:vertical:start:increment,
.custom-scroll .cm-scroller::-webkit-scrollbar-button:vertical:end:decrement,
.custom-scroll::-webkit-scrollbar-button:horizontal:start:increment,
.custom-scroll::-webkit-scrollbar-button:horizontal:end:decrement,
.custom-scroll::-webkit-scrollbar-button:vertical:start:increment,
.custom-scroll::-webkit-scrollbar-button:vertical:end:decrement,
.custom-scroll::-webkit-scrollbar-button:horizontal:start:increment,
.custom-scroll::-webkit-scrollbar-button:horizontal:end:decrement {
display: none;
}
.custom-scroll .cm-scroller::-webkit-scrollbar-button:vertical:start,
.custom-scroll::-webkit-scrollbar-button:vertical:start {
height: 17px;
background-image: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTciIHZpZXdCb3g9IjAgMCAxNiAxNyIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZmlsbC1ydWxlPSJldmVub2RkIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik0xNSAwSDBWMVYxNkgxVjFIMTVWMFoiIGZpbGw9IiNERkRGREYiLz4KPHBhdGggZmlsbC1ydWxlPSJldmVub2RkIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik0yIDFIMVYxNUgyVjJIMTRWMUgyWiIgZmlsbD0id2hpdGUiLz4KPHBhdGggZmlsbC1ydWxlPSJldmVub2RkIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik0xNiAxN0gxNUgwVjE2SDE1VjBIMTZWMTdaIiBmaWxsPSJibGFjayIvPgo8cGF0aCBmaWxsLXJ1bGU9ImV2ZW5vZGQiIGNsaXAtcnVsZT0iZXZlbm9kZCIgZD0iTTE1IDFIMTRWMTVIMVYxNkgxNEgxNVYxWiIgZmlsbD0iIzgwODA4MCIvPgo8cmVjdCB4PSIyIiB5PSIyIiB3aWR0aD0iMTIiIGhlaWdodD0iMTMiIGZpbGw9IiNDMEMwQzAiLz4KPHBhdGggZmlsbC1ydWxlPSJldmVub2RkIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik04IDZIN1Y3SDZWOEg1VjlINFYxMEgxMVY5SDEwVjhIOVY3SDhWNloiIGZpbGw9ImJsYWNrIi8+Cjwvc3ZnPgo=);
}
.custom-scroll .cm-scroller::-webkit-scrollbar-button:vertical:end,
.custom-scroll::-webkit-scrollbar-button:vertical:end {
height: 17px;
background-image: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTciIHZpZXdCb3g9IjAgMCAxNiAxNyIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZmlsbC1ydWxlPSJldmVub2RkIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik0xNSAwSDBWMVYxNkgxVjFIMTVWMFoiIGZpbGw9IiNERkRGREYiLz4KPHBhdGggZmlsbC1ydWxlPSJldmVub2RkIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik0yIDFIMVYxNUgyVjJIMTRWMUgyWiIgZmlsbD0id2hpdGUiLz4KPHBhdGggZmlsbC1ydWxlPSJldmVub2RkIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik0xNiAxN0gxNUgwVjE2SDE1VjBIMTZWMTdaIiBmaWxsPSJibGFjayIvPgo8cGF0aCBmaWxsLXJ1bGU9ImV2ZW5vZGQiIGNsaXAtcnVsZT0iZXZlbm9kZCIgZD0iTTE1IDFIMTRWMTVIMVYxNkgxNEgxNVYxWiIgZmlsbD0iIzgwODA4MCIvPgo8cmVjdCB4PSIyIiB5PSIyIiB3aWR0aD0iMTIiIGhlaWdodD0iMTMiIGZpbGw9IiNDMEMwQzAiLz4KPHBhdGggZmlsbC1ydWxlPSJldmVub2RkIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik0xMSA2SDRWN0g1VjhINlY5SDdWMTBIOFY5SDlWOEgxMFY3SDExVjZaIiBmaWxsPSJibGFjayIvPgo8L3N2Zz4K);
}
.custom-scroll::-webkit-scrollbar-button:horizontal:start {
width: 16px;
background-image: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTciIHZpZXdCb3g9IjAgMCAxNiAxNyIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZmlsbC1ydWxlPSJldmVub2RkIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik0xNSAwSDBWMVYxNkgxVjFIMTVWMFoiIGZpbGw9IiNERkRGREYiLz4KPHBhdGggZmlsbC1ydWxlPSJldmVub2RkIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik0yIDFIMVYxNUgyVjJIMTRWMUgyWiIgZmlsbD0id2hpdGUiLz4KPHBhdGggZmlsbC1ydWxlPSJldmVub2RkIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik0xNiAxN0gxNUgwVjE2SDE1VjBIMTZWMTdaIiBmaWxsPSJibGFjayIvPgo8cGF0aCBmaWxsLXJ1bGU9ImV2ZW5vZGQiIGNsaXAtcnVsZT0iZXZlbm9kZCIgZD0iTTE1IDFIMTRWMTVIMVYxNkgxNEgxNVYxWiIgZmlsbD0iIzgwODA4MCIvPgo8cmVjdCB4PSIyIiB5PSIyIiB3aWR0aD0iMTIiIGhlaWdodD0iMTMiIGZpbGw9IiNDMEMwQzAiLz4KPHBhdGggZmlsbC1ydWxlPSJldmVub2RkIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik05IDRIOFY1SDdWNkg2VjdINVY4SDZWOUg3VjEwSDhWMTFIOVY0WiIgZmlsbD0iYmxhY2siLz4KPC9zdmc+Cg==);
}
.custom-scroll::-webkit-scrollbar-button:horizontal:end {
width: 16px;
background-image: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTciIHZpZXdCb3g9IjAgMCAxNiAxNyIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZmlsbC1ydWxlPSJldmVub2RkIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik0xNSAwSDBWMVYxNkgxVjFIMTVWMFoiIGZpbGw9IiNERkRGREYiLz4KPHBhdGggZmlsbC1ydWxlPSJldmVub2RkIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik0yIDFIMVYxNUgyVjJIMTRWMUgyWiIgZmlsbD0id2hpdGUiLz4KPHBhdGggZmlsbC1ydWxlPSJldmVub2RkIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik0xNiAxN0gxNUgwVjE2SDE1VjBIMTZWMTdaIiBmaWxsPSJibGFjayIvPgo8cGF0aCBmaWxsLXJ1bGU9ImV2ZW5vZGQiIGNsaXAtcnVsZT0iZXZlbm9kZCIgZD0iTTE1IDFIMTRWMTVIMVYxNkgxNEgxNVYxWiIgZmlsbD0iIzgwODA4MCIvPgo8cmVjdCB4PSIyIiB5PSIyIiB3aWR0aD0iMTIiIGhlaWdodD0iMTMiIGZpbGw9IiNDMEMwQzAiLz4KPHBhdGggZmlsbC1ydWxlPSJldmVub2RkIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik03IDRINlYxMUg3VjEwSDhWOUg5VjhIMTBWN0g5VjZIOFY1SDdWNFoiIGZpbGw9ImJsYWNrIi8+Cjwvc3ZnPgo=);
}
.scalar-api-client__codemirror__wrapper {
background: white;
padding-top: 0px;
}
.show-more,
.scalar-api-client__history-toggle,
.scalar-api-client__send-request-button:before,
.parameter-schema .properties,
.show-api-client-button:before,
.properties .properties {
background: silver !important;
border-radius: 0px !important;
border: none !important;
opacity: 1;
box-shadow:
inset -1px -1px #0a0a0a,
inset 1px 1px #fff,
inset -2px -2px grey,
inset 2px 2px #dfdfdf !important;
}
.show-more:active,
.scalar-api-client__history-toggle:active,
.scalar-api-client__send-request-button:active:before,
.parameter-schema .properties:active,
.show-api-client-button:active:before,
.properties .properties:active {
box-shadow: inset -1px -1px #fff, inset 1px 1px #0a0a0a, inset -2px -2px #dfdfdf, inset 2px 2px grey !important;
}
.scalar-api-client .scalar-api-client__send-request-button {
margin-left: 12px;
}
.scalar-api-client .scalar-api-client__send-request-button:before {
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.scalar-api-client__send-request-button,
.show-api-client-button span,
.show-api-client-button svg {
color: var(--theme-color-1) !important;
}
.sidebar-heading-type {
box-shadow:
inset -1px -1px #0a0a0a,
inset 1px 1px #fff,
inset -2px -2px grey,
inset 2px 2px #dfdfdf !important;
border-radius: 0px !important;
}
.item-entry--active {
box-shadow:
inset -1px -1px #0a0a0a,
inset 1px 1px #fff,
inset -2px -2px grey,
inset 2px 2px #dfdfdf !important;
border-radius: 0px !important;
background: white;
}
.table-row:first-of-type > div {
box-shadow:
inset -1px -1px #0a0a0a,
inset 1px 1px #fff,
inset -2px -2px grey,
inset 2px 2px #dfdfdf;
}
.scalar-api-client__item {
--theme-background-2: #dfdfdf;
}
.scalar-api-client__codemirror {
box-shadow:
inset -1px -1px #fff,
inset 1px 1px grey,
inset -2px -2px #dfdfdf,
inset 2px 2px #0a0a0a;
}
.t-doc__header .header-item-logo {
height: 32px;
}
.toast-layout {
box-shadow: inset -1px -1px #0a0a0a, inset 1px 1px #fff, inset -2px -2px grey, inset 2px 2px #dfdfdf !important;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment