Fix some color scheme bugs in manual CSS

This commit is contained in:
Alex Cabal 2021-01-10 19:03:44 -06:00
parent 9d8ee504e2
commit 4b4e2b7e84
3 changed files with 36 additions and 18 deletions

View file

@ -36,6 +36,9 @@ print("\n");
<? } ?> <? } ?>
<? if($manual){ ?> <? if($manual){ ?>
<link href="/css/manual.css?version=<?= crc32(file_get_contents(WEB_ROOT . '/css/manual.css')) ?>" media="screen" rel="stylesheet" type="text/css"/> <link href="/css/manual.css?version=<?= crc32(file_get_contents(WEB_ROOT . '/css/manual.css')) ?>" media="screen" rel="stylesheet" type="text/css"/>
<? if($colorScheme == 'auto' || $colorScheme == 'dark'){ ?>
<link href="/css/manual-dark.css?version=<?= crc32(file_get_contents(WEB_ROOT . '/css/manual-dark.css')) ?>" media="screen<? if($colorScheme == 'auto'){ ?> and (prefers-color-scheme: dark)<? } ?>" rel="stylesheet" type="text/css"/>
<? } ?>
<? } ?> <? } ?>
<link href="/apple-touch-icon-120x120.png" rel="apple-touch-icon" sizes="120x120"/> <link href="/apple-touch-icon-120x120.png" rel="apple-touch-icon" sizes="120x120"/>
<link href="/apple-touch-icon-152x152.png" rel="apple-touch-icon" sizes="152x152"/> <link href="/apple-touch-icon-152x152.png" rel="apple-touch-icon" sizes="152x152"/>

17
www/css/manual-dark.css Normal file
View file

@ -0,0 +1,17 @@
@media(prefers-color-scheme: dark){
blockquote,
figure.text{
background: rgba(0,0,0,.25);
}
code.terminal{
background-color: var(--light-body-text);
}
.manual > article > section > section[id] > ol ol > li aside.number::after,
.manual > article > section > section[id] section > ol > li aside.number::after,
.manual > article > section > section[id] section > aside.number::after{
border-color: rgba(255, 255, 255, .5);
}
}

View file

@ -420,6 +420,14 @@ figure.corrected code{
margin-left: -14.5rem margin-left: -14.5rem
} }
.manual > article > section > section[id] > section > section > section > aside.number{
margin-left: -16.5rem
}
.manual > article > section > section[id] > section > section > section > section > aside.number{
margin-left: -18.5rem
}
.manual > article > section > section[id] > ol ol > li aside.number::after, .manual > article > section > section[id] > ol ol > li aside.number::after,
.manual > article > section > section[id] section > ol > li aside.number::after, .manual > article > section > section[id] section > ol > li aside.number::after,
.manual > article > section > section[id] section > aside.number::after{ .manual > article > section > section[id] section > aside.number::after{
@ -438,6 +446,14 @@ figure.corrected code{
width: 4rem; width: 4rem;
} }
.manual > article > section > section[id] > section > section > section > aside.number::after{
width: 6rem;
}
.manual > article > section > section[id] > section > section > section > section > aside.number::after{
width: 8rem;
}
.manual > article > section > section[id] section > ol > li aside.number, .manual > article > section > section[id] section > ol > li aside.number,
.manual > article > section > section[id] section > aside.number{ .manual > article > section > section[id] section > aside.number{
margin-left: -12.5rem margin-left: -12.5rem
@ -750,21 +766,3 @@ main.manual aside.alert p{
margin-left: 2rem; margin-left: 2rem;
} }
} }
@media(prefers-color-scheme: dark){
blockquote,
figure.text{
background: rgba(0,0,0,.25);
}
code.terminal{
background-color: var(--light-body-text);
}
.manual > article > section > section[id] > ol ol > li aside.number::after,
.manual > article > section > section[id] section > ol > li aside.number::after,
.manual > article > section > section[id] section > aside.number::after{
border-color: rgba(255, 255, 255, .5);
}
}