ifhub/inform7
1
0
Fork 0
mirror of https://github.com/ganelson/inform.git synced 2024-07-01 06:24:58 +03:00
Code Issues Projects Releases Wiki Activity

dark mode colours added to macos-platform.css

Browse source
This commit is contained in:
Toby Nelson 2022-06-15 09:15:28 +01:00
parent f97d737419
commit 83c687832a
1 changed files with 97 additions and 74 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

45
inform7/Internal/HTML/macos-platform.css
View file

@ -1,5 +1,28 @@
:root { :root {
color-scheme: light dark; 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 */ /* 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. */ by default they are a darker grey. */
.headingpanel { .headingpanel {
background: #eeeeee; background: var(--heading-panel-background-colour);
} }
.headingpanelsucceeded { .headingpanelsucceeded {
background: #E6FFE6; background: #E6FFE6;
@ -56,7 +79,7 @@ lower one in a smaller. Again, the alt versions are meant to contrast.
*/ */
span.headingpaneltext { span.headingpaneltext {
color: #222222; color: var(--heading-panel-text-colour);
font-family: "Lucida Grande", "Lucida Sans Unicode", Helvetica, Arial, Verdana, sans-serif; font-family: "Lucida Grande", "Lucida Sans Unicode", Helvetica, Arial, Verdana, sans-serif;
-webkit-font-smoothing: antialiased; -webkit-font-smoothing: antialiased;
font-size: 20px; font-size: 20px;
@ -71,7 +94,7 @@ span.headingpaneltextalt {
} }
span.headingpanelrubric { span.headingpanelrubric {
color: #222222; color: var(--heading-panel-text-colour);
font-family: "Lucida Grande", "Lucida Sans Unicode", Helvetica, Arial, Verdana, sans-serif; font-family: "Lucida Grande", "Lucida Sans Unicode", Helvetica, Arial, Verdana, sans-serif;
-webkit-font-smoothing: antialiased; -webkit-font-smoothing: antialiased;
font-size: 11px; font-size: 11px;
@ -152,10 +175,10 @@ span.phrasetokenvaluetext {
are wide; they contain no text. */ are wide; they contain no text. */
div.periodictablesidebarcolour { div.periodictablesidebarcolour {
background: #888; background: var(--periodic-table-sidebar-colour);
} }
div.periodictablesidebar:hover { div.periodictablesidebar:hover {
background: #222; background: var(--periodic-table-sidebar-hover-colour);
} }
/* The text of the element-abbreviation, such as "Lx" or "Ph", uses: */ /* 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: */ /* The banner at the top of each element: */
table.elementbanner { table.elementbanner {
background: #eeeeee; background: var(--element-banner-background-colour);
} }
/* For the typewriting on the Library Card: */ /* For the typewriting on the Library Card: */
span.librarycardtitle { span.librarycardtitle {
color: #803030; color: var(--library-card-title-colour);
} }
span.librarycardother { span.librarycardother {
color: #303030; color: var(--library-card-other-colour);
} }
/* For responses in index entries about rules: */ /* For responses in index entries about rules: */
@ -217,7 +240,7 @@ span.indexgrey {
} }
span.indexdullred { span.indexdullred {
color: #800000; color: var(--index-dull-red-colour);
} }
span.indexdullgreen { span.indexdullgreen {
@ -233,8 +256,8 @@ span.indexdullblue {
the page, whatever that is: */ the page, whatever that is: */
ul.leaders li.leaded span:first-child { ul.leaders li.leaded span:first-child {
background: white; background: var(--leaders-background-colour);
} }
ul.leaders li.leaded span + span { ul.leaders li.leaded span + span {
background: white; background: var(--leaders-background-colour);
} }