Actions

User

Difference between revisions of "Telepath70/foreground.css"

(Created page with "@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+Mono:wdth,[email protected],100..900&family=Noto+Sans+Symbols+2&family=Noto+Sans:ital,wdth,wght@0,62.5..100,100..9...")
 
 
(9 intermediate revisions by the same user not shown)
Line 1: Line 1:
 +
/* import and define fonts */
 +
 
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+Mono:wdth,[email protected],100..900&family=Noto+Sans+Symbols+2&family=Noto+Sans:ital,wdth,wght@0,62.5..100,100..900;1,62.5..100,100..900&display=swap');
 
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+Mono:wdth,[email protected],100..900&family=Noto+Sans+Symbols+2&family=Noto+Sans:ital,wdth,wght@0,62.5..100,100..900;1,62.5..100,100..900&display=swap');
 +
 +
@font-face {
 +
    font-family: "Miasm";
 +
    src: url(https://bocpages.org/assets/fonts/miasm.ttf) format(truetype);
 +
    font-display: swap;
 +
    unicode-range: U+20-7E, U+A0, U+A9, U+C5, U+E5;
 +
}
 +
 +
@font-face {
 +
    font-family: "Strasua";
 +
    src: url(https://bocpages.org/assets/fonts/strasua.ttf) format(truetype);
 +
    font-display: swap;
 +
    unicode-range: U+20-5A, U+5C, U+5F-7A, U+7C, U+A1, U+A3, U+A5, U+A8-A9, U+AB, U+AE, U+B4, U+B8, U+BB, U+BF-D6, U+D8-F6, U+F8-FF, U+131, U+141-142, U+152-153, U+160-161, U+178, U+17D-17E, U+2C6-2C7, U+2DA, U+2DC, U+2013-2014, U+2018-201A, U+201C-201E, U+2022, U+2026, U+2044, U+20AC, U+2122;
 +
}
 +
 +
html {
 +
    --sans: "Noto Sans", "Noto Sans Symbol 2", "Tahoma", sans-serif;
 +
    --mono: "Noto Sans Mono", "Andale Mono", monospace;
 +
 +
    /* define colour scheme */
 +
 +
    --white: oklch(sqrt(calc(71/72)) pow(calc(1/18), 2) 180deg);
 +
    --bg: oklch(sqrt(calc(23/24)) pow(calc(1/18), 2) 180deg);
 +
 +
    --llgrey: oklch(sqrt(calc(22/24)) pow(calc(1/18), 2) 210deg);
 +
    --lgrey: oklch(sqrt(calc(18/24)) pow(calc(1/18), 2) 225deg);
 +
    --grey: oklch(sqrt(calc(14/24)) pow(calc(1/18), 2) 240deg);
 +
    --dgrey: oklch(sqrt(calc(7/24)) pow(calc(3/18), 2) 225deg);
 +
    --ddgrey: oklch(sqrt(calc(4/24)) pow(calc(4/18), 2) 225deg);
 +
 +
    --head: oklch(sqrt(calc(3/24)) pow(calc(3/18), 2) 210deg);
 +
    --text: oklch(sqrt(calc(2/24)) pow(calc(3/18), 2) 240deg);
 +
    --black: oklch(sqrt(calc(1/24)) pow(calc(4/18), 2) 225deg);
 +
 +
    --selec: oklch(sqrt(calc(14/24)) pow(calc(5/18), 2) 220deg);
 +
    --light: oklch(sqrt(calc(14/24)) pow(calc(5/18), 2) 200deg);
 +
    --med: oklch(sqrt(calc(11/24)) pow(calc(6/18), 2) 205deg);
 +
    --accent: oklch(sqrt(calc(7/24)) pow(calc(6/18), 2) 210deg);
 +
    --dark: oklch(sqrt(calc(4/24)) pow(calc(6/18), 2) 220deg);
 +
 +
    --yellow: oklch(sqrt(calc(17/24)) pow(calc(6/18), 2) 80deg);
 +
    --orange: oklch(sqrt(calc(15/24)) pow(calc(7/18), 2) 75deg);
 +
    --red: oklch(sqrt(calc(7/24)) pow(calc(8/18), 2) 45deg);
 +
    --dred: oklch(sqrt(calc(4/24)) pow(calc(8/18), 2) 30deg);
 +
 +
    /* prevent overscroll */
 +
 +
    overscroll-behavior: none;
 +
}
  
 
body {
 
body {
−
     font-family: "Noto Sans", "sans-serif";
+
 
 +
     /* prevent overflowing lines and font synthesis */
 +
 
 +
    overflow-wrap: anywhere;
 +
    font-synthesis: none;
 +
 
 +
    /* make black background */
 +
 
 +
    background-color: var(--black);
 +
    background-blend-mode: screen;
 +
    background-attachment: fixed;
 +
}
 +
 
 +
/* fonts and text colours */
 +
 
 +
body, table tr th, table tr td {
 +
    color: var(--text);
 +
}
 +
 
 +
h1, h2, h3, h4, h5, h6 {
 +
    color: var(--head);
 +
}
 +
 
 +
.previewnote {
 +
    color: var(--dred);
 
}
 
}
  
−
textarea#wpTextbox1, .mw-editfont-monospace textarea#wpTextbox1 {
+
body, .subtitle, h1, h2, h3, h4, h5, h6, .fa {
−
     font-family: "Noto Sans Mono", "monospace";
+
    font-family: var(--sans);
 +
}
 +
 
 +
code, kbd, pre, samp, textarea#wpTextbox1, .diff-deletedline, .diff-addedline, .diff-context {
 +
     font-family: var(--mono) !important;
 
}
 
}
  
 
h2 {
 
h2 {
−
     font-family: "Miasm", "sans-serif";
+
     font-family: "Miasm", var(--sans);
 +
    font-size: 2em;
 +
   
 +
    & .mw-editsection {
 +
        font-family: var(--sans);
 +
    }
 
}
 
}
  
 
.title {
 
.title {
−
     font-family: "Strasua", "sans-serif";
+
     font-family: "Strasua", var(--sans);
−
     font-size: 4rem;
+
    font-size: 4em;
 +
    color: var(--ddgrey);
 +
}
 +
 
 +
h3, .ns-subject h3 {
 +
    text-decoration: none;
 +
    font-weight: 700;
 +
    color: var(--dark);
 +
    font-size: 1.5em;
 +
    padding-left: 0;
 +
}
 +
 
 +
h4 {
 +
    font-weight: 800;
 +
    color: var(--dark);
 +
    font-size: 1.25em;
 +
}
 +
 
 +
h5 {
 +
    font-weight: 900;
 +
    color: var(--dark);
 +
    font-size: 1em;
 +
}
 +
 
 +
h6 {
 +
    font-weight: 700;
 +
    color: var(--dark);
 +
    font-size: 1em;
 +
}
 +
 
 +
.mw-editsection {
 +
    margin-left: 1em;
 +
    font-size: small;
 +
}
 +
 
 +
strong, b {
 +
    color: var(--head);
 +
}
 +
 
 +
em, i {
 +
    color: var(--ddgrey);
 +
}
 +
 
 +
/* hide news from all pages except the home page */
 +
 
 +
body:not(.page-About) #latestnewsv2 {
 +
    display: none;
 +
}
 +
 
 +
/* backgrounds for content */
 +
 
 +
#page-content .row {
 +
    background-color: var(--bg);
 +
}
 +
 
 +
.smw-editpage-help, input#wpPreview {
 +
    background-color: var(--llgrey);
 +
    border-color: var(--lgrey);
 +
}
 +
 
 +
table tr:nth-of-type(odd), table.wikitable tr > th {
 +
    background-color: var(--llgrey);
 +
}
 +
 
 +
table.wikitable tr > th {
 +
    background-color: var(--lgrey);
 +
}
 +
 
 +
textarea, input:not([type]), input[type="search"], table tr:nth-of-type(even), li.gallerybox div.thumb {
 +
    background-color: var(--white);
 +
}
 +
 
 +
/* line styles */
 +
 
 +
table, table * {
 +
    border-color: var(--white);
 +
}
 +
 
 +
tbody, textarea, hr {
 +
    border-color: var(--lgrey);
 +
    border-style: solid;
 +
    border-width: 1px;
 +
}
 +
 
 +
/* table title size */
 +
 
 +
th[style] {
 +
    font-size: 1em !important;
 +
}
 +
 
 +
/* link styles */
 +
 
 +
a, a *, .wikiEditor-ui-tabs div a, .wikiEditor-ui-toolbar .tabs span.tab a {
 +
    color: var(--accent);
 +
}
 +
 
 +
body a:hover, body a:hover *, .wikiEditor-ui-toolbar .tabs span.tab a:hover {
 +
    color: var(--dark);
 +
    text-decoration: underline;
 +
}
 +
 
 +
/* red links */
 +
 
 +
a.new, a.new * {
 +
    color: var(--red);
 +
}
 +
 
 +
a.new:hover, a.new:hover * {
 +
    color: var(--dred);
 +
}
 +
 
 +
/* external links */
 +
 
 +
a.external, a.external * {
 +
    color: var(--med);
 +
}
 +
 
 +
a.external:hover, a.external:hover * {
 +
    color: var(--accent);
 +
}
 +
 
 +
/* self links */
 +
 
 +
.selflink {
 +
    color: var(--ddgrey);
 +
}
 +
 
 +
/* link font weights */
 +
 
 +
p a, li a, dl a, table a {
 +
    font-weight: 450;
 +
}
 +
 
 +
p a.external, li a.external {
 +
    font-weight: 500;
 +
}
 +
 
 +
strong a, b a {
 +
    font-weight: inherit;
 +
}
 +
 
 +
#latestnewsv2 a {
 +
    font-weight: inherit;
 +
}
 +
 
 +
/* navbar colours */
 +
 
 +
#navwrapper .top-bar {
 +
    background: var(--accent);
 +
}
 +
 
 +
ul.dropdown li {
 +
    background-color: var(--dark);
 +
}
 +
 
 +
.top-bar-section ul li ul.dropdown li > a, .top-bar, .top-bar-section ul, .top-bar-section ul li.active > a, .top-bar-section li a:not(.button) {
 +
    color: var(--white);
 +
}
 +
 
 +
.top-bar-section ul li.hover > a, .top-bar-section ul li ul.dropdown li.hover > a, top-bar-section ul li ul.dropdown li.hover > a {
 +
    color: var(--orange);
 +
}
 +
 
 +
/* button colours */
 +
 
 +
button, .button, input[type="submit"], .label {
 +
    background-color: var(--accent);
 +
    border-color: oklch(from var(--accent) sqrt(calc(2/24)) c h);
 +
}
 +
 
 +
button:hover, .button:hover, input[type="submit"]:hover, .label:hover {
 +
    background-color: var(--dark);
 +
}
 +
 
 +
a.label.new {
 +
    background-color: var(--lgrey);
 +
}
 +
 
 +
a.label.new:hover {
 +
    background-color: var(--grey);
 +
}
 +
 
 +
.wikiEditor-ui .label {
 +
    background: none;
 +
}
 +
 
 +
input#wpPreview:hover {
 +
    background-color: var(--lgrey);
 +
}
 +
 
 +
button, .button, input[type="submit"], input#wpPreview {
 +
    transition: none;
 +
}
 +
 
 +
/* quote colours */
 +
 
 +
blockquote {
 +
    color: var(--lgrey);
 +
    border-left-color: var(--orange);
 +
}
 +
 
 +
blockquote cite {
 +
    color: var(--dgrey);
 +
}
 +
 
 +
blockquote p, footer.row {
 +
    color: var(--ddgrey);
 +
}
 +
 
 +
/* style lists */
 +
 
 +
html #toc ul, .toc ul, ul {
 +
    list-style-type: "\2B22\2003";
 +
}
 +
 
 +
html #toc ul ul, .toc ul ul, ul ul {
 +
    list-style-type: "\2B21\2003";
 +
}
 +
 
 +
ul li::marker {
 +
    color: var(--dark);
 +
     font-size: 0.75em;
 +
}
 +
 
 +
ol li::marker {
 +
    color: var(--head);
 +
    font-weight: 450;
 +
}
 +
 
 +
/* style toc */
 +
 
 +
#toc, .toc {
 +
    background-color: var(--white);
 +
    border-color: var(--lgrey);
 +
    border-style: solid;
 +
    border-width: 1px;
 +
    padding: 8px;
 +
    max-width: fit-content;
 +
}
 +
 
 +
/* style diff */
 +
 
 +
.diffchange {
 +
    --opacity: calc(1 / 2);
 +
}
 +
 
 +
td.diff-deletedline {
 +
    border-color: var(--orange);
 +
}
 +
 
 +
td.diff-deletedline .diffchange {
 +
    background-color: oklch(from var(--yellow) l c h / calc(alpha * var(--opacity)));
 +
}
 +
 
 +
td.diff-addedline {
 +
    border-color: var(--accent);
 +
}
 +
 
 +
td.diff-addedline .diffchange {
 +
    background-color: oklch(from var(--light) l c h / calc(alpha * var(--opacity)));
 +
}
 +
 
 +
/* selection colour */
 +
 
 +
::selection {
 +
    --opacity: calc(1 / 3);
 +
    background-color: oklch(from var(--selec) l c h / calc(alpha * var(--opacity)));
 +
}
 +
 
 +
/* actions button */
 +
 
 +
.fa {
 +
    font-weight: unset;
 +
}
 +
 
 +
.fa::before {
 +
    font-family: "FontAwesome";
 +
}
 +
 
 +
.f-dropdown {
 +
    background-color: var(--white);
 +
}
 +
 
 +
.f-dropdown li:hover, .f-dropdown li:focus {
 +
    background-color: var(--llgrey);
 +
}
 +
 
 +
button.secondary, .button.secondary {
 +
    background-color: var(--llgrey);
 +
}
 +
 
 +
button.secondary *, .button.secondary * {
 +
    color: var(--ddgrey);
 +
    font-weight: 600;
 +
}
 +
 
 +
button.secondary:hover, .button.secondary:hover, button.secondary:focus, .button.secondary:focus {
 +
    background-color: var(--lgrey);
 +
}
 +
 
 +
.f-dropdown li a {
 +
    color: var(--dgrey);
 +
}
 +
 
 +
.f-dropdown li a:hover {
 +
    color: var(--dark);
 
}
 
}

Latest revision as of 11:38, 5 July 2026

/* import and define fonts */

@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+Mono:wdth,[email protected],100..900&family=Noto+Sans+Symbols+2&family=Noto+Sans:ital,wdth,wght@0,62.5..100,100..900;1,62.5..100,100..900&display=swap');

@font-face {
    font-family: "Miasm";
    src: url(https://bocpages.org/assets/fonts/miasm.ttf) format(truetype);
    font-display: swap;
    unicode-range: U+20-7E, U+A0, U+A9, U+C5, U+E5;
}

@font-face {
    font-family: "Strasua";
    src: url(https://bocpages.org/assets/fonts/strasua.ttf) format(truetype);
    font-display: swap;
    unicode-range: U+20-5A, U+5C, U+5F-7A, U+7C, U+A1, U+A3, U+A5, U+A8-A9, U+AB, U+AE, U+B4, U+B8, U+BB, U+BF-D6, U+D8-F6, U+F8-FF, U+131, U+141-142, U+152-153, U+160-161, U+178, U+17D-17E, U+2C6-2C7, U+2DA, U+2DC, U+2013-2014, U+2018-201A, U+201C-201E, U+2022, U+2026, U+2044, U+20AC, U+2122;
}

html {
    --sans: "Noto Sans", "Noto Sans Symbol 2", "Tahoma", sans-serif;
    --mono: "Noto Sans Mono", "Andale Mono", monospace;

    /* define colour scheme */

    --white: oklch(sqrt(calc(71/72)) pow(calc(1/18), 2) 180deg);
    --bg: oklch(sqrt(calc(23/24)) pow(calc(1/18), 2) 180deg);

    --llgrey: oklch(sqrt(calc(22/24)) pow(calc(1/18), 2) 210deg);
    --lgrey: oklch(sqrt(calc(18/24)) pow(calc(1/18), 2) 225deg);
    --grey: oklch(sqrt(calc(14/24)) pow(calc(1/18), 2) 240deg);
    --dgrey: oklch(sqrt(calc(7/24)) pow(calc(3/18), 2) 225deg);
    --ddgrey: oklch(sqrt(calc(4/24)) pow(calc(4/18), 2) 225deg);

    --head: oklch(sqrt(calc(3/24)) pow(calc(3/18), 2) 210deg);
    --text: oklch(sqrt(calc(2/24)) pow(calc(3/18), 2) 240deg);
    --black: oklch(sqrt(calc(1/24)) pow(calc(4/18), 2) 225deg);

    --selec: oklch(sqrt(calc(14/24)) pow(calc(5/18), 2) 220deg);
    --light: oklch(sqrt(calc(14/24)) pow(calc(5/18), 2) 200deg);
    --med: oklch(sqrt(calc(11/24)) pow(calc(6/18), 2) 205deg);
    --accent: oklch(sqrt(calc(7/24)) pow(calc(6/18), 2) 210deg);
    --dark: oklch(sqrt(calc(4/24)) pow(calc(6/18), 2) 220deg);

    --yellow: oklch(sqrt(calc(17/24)) pow(calc(6/18), 2) 80deg);
    --orange: oklch(sqrt(calc(15/24)) pow(calc(7/18), 2) 75deg);
    --red: oklch(sqrt(calc(7/24)) pow(calc(8/18), 2) 45deg);
    --dred: oklch(sqrt(calc(4/24)) pow(calc(8/18), 2) 30deg);

    /* prevent overscroll */

    overscroll-behavior: none;
}

body {

    /* prevent overflowing lines and font synthesis */

    overflow-wrap: anywhere;
    font-synthesis: none;

    /* make black background */

    background-color: var(--black);
    background-blend-mode: screen;
    background-attachment: fixed;
}

/* fonts and text colours */

body, table tr th, table tr td {
    color: var(--text);
}

h1, h2, h3, h4, h5, h6 {
    color: var(--head);
}

.previewnote {
    color: var(--dred);
}

body, .subtitle, h1, h2, h3, h4, h5, h6, .fa {
    font-family: var(--sans);
}

code, kbd, pre, samp, textarea#wpTextbox1, .diff-deletedline, .diff-addedline, .diff-context {
    font-family: var(--mono) !important;
}

h2 {
    font-family: "Miasm", var(--sans);
    font-size: 2em;
    
    & .mw-editsection {
        font-family: var(--sans);
    }
}

.title {
    font-family: "Strasua", var(--sans);
    font-size: 4em;
    color: var(--ddgrey);
}

h3, .ns-subject h3 {
    text-decoration: none;
    font-weight: 700;
    color: var(--dark);
    font-size: 1.5em;
    padding-left: 0;
}

h4 {
    font-weight: 800;
    color: var(--dark);
    font-size: 1.25em;
}

h5 {
    font-weight: 900;
    color: var(--dark);
    font-size: 1em;
}

h6 {
    font-weight: 700;
    color: var(--dark);
    font-size: 1em;
}

.mw-editsection {
    margin-left: 1em;
    font-size: small;
}

strong, b {
    color: var(--head);
}

em, i {
    color: var(--ddgrey);
}

/* hide news from all pages except the home page */

body:not(.page-About) #latestnewsv2 {
    display: none;
}

/* backgrounds for content */

#page-content .row {
    background-color: var(--bg);
}

.smw-editpage-help, input#wpPreview {
    background-color: var(--llgrey);
    border-color: var(--lgrey);
}

table tr:nth-of-type(odd), table.wikitable tr > th {
    background-color: var(--llgrey);
}

table.wikitable tr > th {
    background-color: var(--lgrey);
}

textarea, input:not([type]), input[type="search"], table tr:nth-of-type(even), li.gallerybox div.thumb {
    background-color: var(--white);
}

/* line styles */

table, table * {
    border-color: var(--white);
}

tbody, textarea, hr {
    border-color: var(--lgrey);
    border-style: solid;
    border-width: 1px;
}

/* table title size */

th[style] {
    font-size: 1em !important;
}

/* link styles */

a, a *, .wikiEditor-ui-tabs div a, .wikiEditor-ui-toolbar .tabs span.tab a {
    color: var(--accent);
}

body a:hover, body a:hover *, .wikiEditor-ui-toolbar .tabs span.tab a:hover {
    color: var(--dark);
    text-decoration: underline;
}

/* red links */

a.new, a.new * {
    color: var(--red);
}

a.new:hover, a.new:hover * {
    color: var(--dred);
}

/* external links */

a.external, a.external * {
    color: var(--med);
}

a.external:hover, a.external:hover * {
    color: var(--accent);
}

/* self links */

.selflink {
    color: var(--ddgrey);
}

/* link font weights */

p a, li a, dl a, table a {
    font-weight: 450;
}

p a.external, li a.external {
    font-weight: 500;
}

strong a, b a {
    font-weight: inherit;
}

#latestnewsv2 a {
    font-weight: inherit;
}

/* navbar colours */

#navwrapper .top-bar {
    background: var(--accent);
}

ul.dropdown li {
    background-color: var(--dark);
}

.top-bar-section ul li ul.dropdown li > a, .top-bar, .top-bar-section ul, .top-bar-section ul li.active > a, .top-bar-section li a:not(.button) {
    color: var(--white);
}

.top-bar-section ul li.hover > a, .top-bar-section ul li ul.dropdown li.hover > a, top-bar-section ul li ul.dropdown li.hover > a {
    color: var(--orange);
}

/* button colours */

button, .button, input[type="submit"], .label {
    background-color: var(--accent);
    border-color: oklch(from var(--accent) sqrt(calc(2/24)) c h);
}

button:hover, .button:hover, input[type="submit"]:hover, .label:hover {
    background-color: var(--dark);
}

a.label.new {
    background-color: var(--lgrey);
}

a.label.new:hover {
    background-color: var(--grey);
}

.wikiEditor-ui .label {
    background: none;
}

input#wpPreview:hover {
    background-color: var(--lgrey);
}

button, .button, input[type="submit"], input#wpPreview {
    transition: none;
}

/* quote colours */

blockquote {
    color: var(--lgrey);
    border-left-color: var(--orange);
}

blockquote cite {
    color: var(--dgrey);
}

blockquote p, footer.row {
    color: var(--ddgrey);
}

/* style lists */

html #toc ul, .toc ul, ul {
    list-style-type: "\2B22\2003";
}

html #toc ul ul, .toc ul ul, ul ul {
    list-style-type: "\2B21\2003";
}

ul li::marker {
    color: var(--dark);
    font-size: 0.75em;
}

ol li::marker {
    color: var(--head);
    font-weight: 450;
}

/* style toc */

#toc, .toc {
    background-color: var(--white);
    border-color: var(--lgrey);
    border-style: solid;
    border-width: 1px;
    padding: 8px;
    max-width: fit-content;
}

/* style diff */

.diffchange {
    --opacity: calc(1 / 2);
}

td.diff-deletedline {
    border-color: var(--orange);
}

td.diff-deletedline .diffchange {
    background-color: oklch(from var(--yellow) l c h / calc(alpha * var(--opacity)));
}

td.diff-addedline {
    border-color: var(--accent);
}

td.diff-addedline .diffchange {
    background-color: oklch(from var(--light) l c h / calc(alpha * var(--opacity)));
}

/* selection colour */

::selection {
    --opacity: calc(1 / 3);
    background-color: oklch(from var(--selec) l c h / calc(alpha * var(--opacity)));
}

/* actions button */

.fa {
    font-weight: unset;
}

.fa::before {
    font-family: "FontAwesome";
}

.f-dropdown {
    background-color: var(--white);
}

.f-dropdown li:hover, .f-dropdown li:focus {
    background-color: var(--llgrey);
}

button.secondary, .button.secondary {
    background-color: var(--llgrey);
}

button.secondary *, .button.secondary * {
    color: var(--ddgrey);
    font-weight: 600;
}

button.secondary:hover, .button.secondary:hover, button.secondary:focus, .button.secondary:focus {
    background-color: var(--lgrey);
}

.f-dropdown li a {
    color: var(--dgrey);
}

.f-dropdown li a:hover {
    color: var(--dark);
}
Retrieved from "https://bocpages.org/w/index.php?title=User:Telepath70/foreground.css&oldid=22122"