mirror of
https://github.com/ganelson/inform.git
synced 2024-06-29 05:24:57 +03:00
dark mode colours added to macos-platform.css
This commit is contained in:
parent
f97d737419
commit
83c687832a
|
@ -1,5 +1,28 @@
|
|||
:root {
|
||||
color-scheme: light dark;
|
||||
--element-banner-background-colour: #eeeeee;
|
||||
--heading-panel-background-colour: #eeeeee;
|
||||
--heading-panel-text-colour: #222222;
|
||||
--index-dull-red-colour: #800000;
|
||||
--periodic-table-sidebar-colour: #888;
|
||||
--periodic-table-sidebar-hover-colour: #222;
|
||||
--leaders-background-colour: white;
|
||||
--library-card-title-colour: #803030;
|
||||
--library-card-other-colour: #303030;
|
||||
}
|
||||
|
||||
@media (prefers-color-scheme: dark) {
|
||||
:root {
|
||||
--element-banner-background-colour: #444444;
|
||||
--heading-panel-background-colour: #444444;
|
||||
--heading-panel-text-colour: #ffffff;
|
||||
--index-dull-red-colour: #b00000;
|
||||
--periodic-table-sidebar-colour: #555;
|
||||
--periodic-table-sidebar-hover-colour: #222;
|
||||
--leaders-background-colour: black;
|
||||
--library-card-title-colour: #a05050;
|
||||
--library-card-other-colour: #505050;
|
||||
}
|
||||
}
|
||||
|
||||
/* The default font (family) and size */
|
||||
|
@ -32,7 +55,7 @@ look to make the extensions index pages have some visual contrast with the other
|
|||
by default they are a darker grey. */
|
||||
|
||||
.headingpanel {
|
||||
background: #eeeeee;
|
||||
background: var(--heading-panel-background-colour);
|
||||
}
|
||||
.headingpanelsucceeded {
|
||||
background: #E6FFE6;
|
||||
|
@ -56,7 +79,7 @@ lower one in a smaller. Again, the alt versions are meant to contrast.
|
|||
*/
|
||||
|
||||
span.headingpaneltext {
|
||||
color: #222222;
|
||||
color: var(--heading-panel-text-colour);
|
||||
font-family: "Lucida Grande", "Lucida Sans Unicode", Helvetica, Arial, Verdana, sans-serif;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
font-size: 20px;
|
||||
|
@ -71,7 +94,7 @@ span.headingpaneltextalt {
|
|||
}
|
||||
|
||||
span.headingpanelrubric {
|
||||
color: #222222;
|
||||
color: var(--heading-panel-text-colour);
|
||||
font-family: "Lucida Grande", "Lucida Sans Unicode", Helvetica, Arial, Verdana, sans-serif;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
font-size: 11px;
|
||||
|
@ -152,10 +175,10 @@ span.phrasetokenvaluetext {
|
|||
are wide; they contain no text. */
|
||||
|
||||
div.periodictablesidebarcolour {
|
||||
background: #888;
|
||||
background: var(--periodic-table-sidebar-colour);
|
||||
}
|
||||
div.periodictablesidebar:hover {
|
||||
background: #222;
|
||||
background: var(--periodic-table-sidebar-hover-colour);
|
||||
}
|
||||
|
||||
/* The text of the element-abbreviation, such as "Lx" or "Ph", uses: */
|
||||
|
@ -185,17 +208,17 @@ span.elementtitletext {
|
|||
/* The banner at the top of each element: */
|
||||
|
||||
table.elementbanner {
|
||||
background: #eeeeee;
|
||||
background: var(--element-banner-background-colour);
|
||||
}
|
||||
|
||||
/* For the typewriting on the Library Card: */
|
||||
|
||||
span.librarycardtitle {
|
||||
color: #803030;
|
||||
color: var(--library-card-title-colour);
|
||||
}
|
||||
|
||||
span.librarycardother {
|
||||
color: #303030;
|
||||
color: var(--library-card-other-colour);
|
||||
}
|
||||
|
||||
/* For responses in index entries about rules: */
|
||||
|
@ -217,7 +240,7 @@ span.indexgrey {
|
|||
}
|
||||
|
||||
span.indexdullred {
|
||||
color: #800000;
|
||||
color: var(--index-dull-red-colour);
|
||||
}
|
||||
|
||||
span.indexdullgreen {
|
||||
|
@ -233,8 +256,8 @@ span.indexdullblue {
|
|||
the page, whatever that is: */
|
||||
|
||||
ul.leaders li.leaded span:first-child {
|
||||
background: white;
|
||||
background: var(--leaders-background-colour);
|
||||
}
|
||||
ul.leaders li.leaded span + span {
|
||||
background: white;
|
||||
background: var(--leaders-background-colour);
|
||||
}
|
Loading…
Reference in a new issue