mirror of
https://git.shipoclu.com/moon/plspace.git
synced 2026-08-14 03:02:31 +00:00
138 lines
4.5 KiB
CSS
138 lines
4.5 KiB
CSS
/*
|
|
* Design tokens.
|
|
*
|
|
* Every colour, border, font and metric the app uses is declared here as a
|
|
* custom property. Nothing further down the cascade hard-codes a hex value, so
|
|
* a complete retheme is possible by overriding this block alone:
|
|
*
|
|
* .profile-page { --ms-module-header-bg: #2d0b3a; --ms-link: #ff77cc; }
|
|
*
|
|
* Palette is the classic 2003-2007 MySpace default: navy chrome, cornflower
|
|
* module headers, peach blurb bars, and Verdana at a size that would horrify a
|
|
* modern accessibility audit.
|
|
*/
|
|
|
|
:root {
|
|
/* ----------------------------------------------------------- typography */
|
|
--ms-font-family: Verdana, Geneva, Tahoma, Arial, Helvetica, sans-serif;
|
|
--ms-font-family-heading: Verdana, Geneva, Tahoma, Arial, Helvetica, sans-serif;
|
|
--ms-font-family-mono: 'Courier New', Courier, monospace;
|
|
|
|
/** Chrome text: nav bars, table labels, captions. */
|
|
--ms-font-size: 11px;
|
|
/** Prose: bios, blog entries, comments. */
|
|
--ms-font-size-content: 12px;
|
|
--ms-font-size-small: 10px;
|
|
--ms-font-size-heading: 14px;
|
|
--ms-font-size-title: 20px;
|
|
--ms-line-height: 1.4;
|
|
|
|
/* --------------------------------------------------------------- colour */
|
|
--ms-page-bg: #ffffff;
|
|
--ms-page-fg: #000000;
|
|
--ms-canvas-bg: #e5e5e5;
|
|
|
|
--ms-link: #003399;
|
|
--ms-link-visited: #003399;
|
|
--ms-link-hover: #0055cc;
|
|
--ms-link-decoration: none;
|
|
--ms-link-decoration-hover: underline;
|
|
|
|
/** The navy band across the top and the primary nav strip. */
|
|
--ms-chrome-bg: #003399;
|
|
--ms-chrome-fg: #ffffff;
|
|
--ms-chrome-link: #ffffff;
|
|
--ms-chrome-border: #000000;
|
|
|
|
/** The secondary (lighter) nav row. */
|
|
--ms-nav-bg: #6699cc;
|
|
--ms-nav-fg: #ffffff;
|
|
--ms-nav-link: #ffffff;
|
|
--ms-nav-active-bg: #ff9900;
|
|
--ms-nav-active-fg: #ffffff;
|
|
--ms-nav-separator: rgba(255, 255, 255, 0.55);
|
|
|
|
/* ------------------------------------------------------------- modules */
|
|
/* The bordered boxes: "Contacting Tom", "Tom's Interests", "My Mail". */
|
|
--ms-module-bg: #ffffff;
|
|
--ms-module-border: #6699cc;
|
|
--ms-module-border-width: 1px;
|
|
--ms-module-radius: 0;
|
|
--ms-module-header-bg: #6699cc;
|
|
--ms-module-header-fg: #ffffff;
|
|
--ms-module-header-font-size: 11px;
|
|
--ms-module-header-weight: 700;
|
|
--ms-module-header-padding: 3px 6px;
|
|
--ms-module-body-padding: 6px;
|
|
--ms-module-gap: 10px;
|
|
|
|
/* The peach "…'s Blurbs" / "…'s Friend Space" bars in the main column. */
|
|
--ms-band-bg: #ffcc99;
|
|
--ms-band-fg: #ff6600;
|
|
--ms-band-border: #ff9933;
|
|
--ms-band-padding: 3px 8px;
|
|
|
|
/** Section headings inside blurbs: "About me:", "Who I'd like to meet:". */
|
|
--ms-heading-fg: #ff6600;
|
|
|
|
/* --------------------------------------------------------------- tables */
|
|
--ms-table-border: #6699cc;
|
|
--ms-table-label-bg: #b3c7e6;
|
|
--ms-table-label-fg: #000000;
|
|
--ms-table-value-bg: #ffffff;
|
|
--ms-table-value-fg: #000000;
|
|
--ms-table-cell-padding: 4px 6px;
|
|
--ms-table-stripe-bg: #f2f5fa;
|
|
|
|
/* --------------------------------------------------------------- forms */
|
|
--ms-input-bg: #ffffff;
|
|
--ms-input-fg: #000000;
|
|
--ms-input-border: #7f9db9;
|
|
--ms-button-bg: linear-gradient(#ffffff, #e3e3e3);
|
|
--ms-button-fg: #000000;
|
|
--ms-button-border: #999999;
|
|
--ms-button-active-bg: #d4d4d4;
|
|
--ms-focus-ring: #ff6600;
|
|
|
|
/* -------------------------------------------------------------- status */
|
|
--ms-muted-fg: #666666;
|
|
--ms-online-fg: #cc6600;
|
|
--ms-error-bg: #ffeeee;
|
|
--ms-error-border: #cc0000;
|
|
--ms-error-fg: #990000;
|
|
--ms-notice-bg: #ffffcc;
|
|
--ms-notice-border: #e6c200;
|
|
--ms-highlight-bg: #ffffcc;
|
|
/** 4chan's traditional quote colour, used by opt-in Greentexting. */
|
|
--ms-greentext: #789922;
|
|
|
|
/* -------------------------------------------------------------- layout */
|
|
--ms-page-width: 800px;
|
|
--ms-page-width-wide: 990px;
|
|
--ms-column-left-width: 300px;
|
|
--ms-column-gap: 10px;
|
|
--ms-page-padding: 8px;
|
|
|
|
/* Height of the mark in the header lockup; width follows its 3100:2120 ratio. */
|
|
--ms-logo-height: 34px;
|
|
|
|
/*
|
|
* The mark ships as solid navy on transparent, so it is knocked out to white
|
|
* to sit on the chrome band. Set this to `none` if you theme the band to a
|
|
* light colour and want the artwork's own navy back.
|
|
*/
|
|
--ms-logo-filter: brightness(0) invert(1);
|
|
|
|
/* -------------------------------------------------------------- avatars */
|
|
--ms-avatar-size: 42px;
|
|
--ms-avatar-size-large: 190px;
|
|
--ms-avatar-size-friend: 74px;
|
|
--ms-avatar-border: #999999;
|
|
--ms-avatar-radius: 0;
|
|
|
|
/* --------------------------------------------------------------- misc */
|
|
--ms-hr-color: #cccccc;
|
|
--ms-emoji-size: 1.1em;
|
|
--ms-transition: none;
|
|
}
|