Mentions légales du service

Skip to content
Snippets Groups Projects
Commit b296cbff authored by Alexandre DENIS's avatar Alexandre DENIS
Browse files

www: add support for dark mode

parent c7f23ce5
No related branches found
No related tags found
No related merge requests found
Pipeline #1181809 passed
Stage: deploy
Hide whitespace changes
Inline Side-by-side
public/common/style.css
+ 110
− 44
View file @ b296cbff
:root
{
/* default light theme */
--body-color: #ffffff;
--header-color: #ffffff;
--background-color: #f5f5f5;
--text-color: #2c2c2c;
--border-color: #d8d8d8;
--title-color: #e33729;
--visited-color: #c02010;
--table-color: #000000;
--th-color: #ffffff;
--div-color: #0c0c0c;
}
@media (prefers-color-scheme: dark) {
/* dark blue theme */
:root
{
--body-color: linear-gradient(225deg, #405bad 0%, #302050 40%, #0c0c0c 100%);
--header-color: linear-gradient(135deg, #1b1b1b 0%, #302050 50%, #8888cc 100%);
--background-color: #1b1b1b;
--text-color: #d8d8d8;
--border-color: #444477;
--title-color: #a5b9f0;
--visited-color: #6e8de1;
--table-color: #ffffff;
--th-color: #000000;
--div-color: #2f3444;
}
/* dark green theme */
/* :root */
/* { */
/* --body-color: #0c0c0c; */
/* --background-color: #161616; */
/* --text-color: #d8d8d8; */
/* --border-color: #2e4d28; */
/* --title-color: #68c05e; */
/* --visited-color: #3f9537; */
/* --table-color: #ffffff; */
/* --th-color: #000000; */
/* --div-color: #32442f; */
/* } */
img
{
filter: brightness(0.85) contrast(1.1);
}
}
body body
{ {
max-width: 1280px; max-width: 1280px;
margin-left: auto; margin-left: auto;
margin-right: auto; margin-right: auto;
border-left: 1px solid #d8d8d8; background: var(--body-color);
border-right: 1px solid #d8d8d8; color: var(--text-color);
font-family: arial, sans-serif;
padding-right: min(50px, 5%);
padding-left: min(50px, 5%);
} }
div.header div.header
{ {
border-top: 1px solid #d8d8d8; border-left: 1px solid var(--border-color);
border-bottom: 1px solid #d8d8d8; border-right: 1px solid var(--border-color);
border-top: 1px solid var(--border-color);
border-bottom: 1px solid var(--border-color);
font-family: arial, sans-serif; font-family: arial, sans-serif;
font-weight: bold; font-weight: bold;
letter-spacing: 2px; letter-spacing: 2px;
color: #e33729; color: var(--title-color);
background: var(--header-color);
margin-top: 10px; margin-top: 10px;
margin-left: 0px; margin-left: 0px;
margin-right: 0px; margin-right: 0px;
...@@ -46,23 +99,25 @@ div.sec, div.contents ...@@ -46,23 +99,25 @@ div.sec, div.contents
padding-bottom: 8px; padding-bottom: 8px;
padding-left: 20px; padding-left: 20px;
padding-right: 20px; padding-right: 20px;
color: #2c2c2b; color: var(--text-color);
background: #f5f5f5; background: var(--background-color);
border-top: 1px solid #0c0c0c; border-left: 1px solid var(--border-color);
border-bottom: 1px solid #0c0c0c; border-right: 1px solid var(--border-color);
border-top: 1px solid var(--div-color);
border-bottom: 1px solid var(--div-color);
font-family: arial, sans-serif; font-family: arial, sans-serif;
font-size: 14px; font-size: 14px;
letter-spacing: 0.5px; letter-spacing: 0.5px;
} }
h1 h1
{ {
color: #e33729; color: var(--title-color);
font-family: 'Pontano Sans', 'Arial', sans-serif; font-family: 'Arial', sans-serif;
font-size: 24px; font-size: 24px;
} }
h2 h2
{ {
color: #e33729; color: var(--title-color);
padding-left: 16px; padding-left: 16px;
} }
p p
...@@ -71,36 +126,44 @@ p ...@@ -71,36 +126,44 @@ p
padding-right: 16px; padding-right: 16px;
text-align: justify; text-align: justify;
} }
pre
{
background: var(--th-color);
color: var(--text-color);
font-family: monospace;
font-size: 120%;
padding: 3px;
overflow: auto;
}
/* benchmark pages */
img.graph img.graph
{ {
margin: 30px; margin: 20px;
padding: 0px; padding: 8px;
border: 1px solid #0c0c0c; border: 1px solid var(--border-color);
} }
table.tests, th.tests, td.tests
table, th, td
{ {
border: 1px solid black; border: 1px solid var(--table-color);
border-collapse: collapse; border-collapse: collapse;
} }
th th.tests
{ {
background: #ffffff; background: #var(--th-color);
} }
table table.tests
{ {
align: center; align: center;
} }
/* doxygen */ /* doxygen */
.headertitle .headertitle
{ {
font-size: 24px; font-size: 24px;
margin: 10px; margin: 10px;
} }
pre, .memItemRight, .memItemLeft, div.memproto, div.ttdeci .memItemRight, .memItemLeft, div.memproto, div.ttdeci
{ {
background: #ffffff; background: var(--background-color)
font-family: monospace; font-family: monospace;
font-size: 110%; font-size: 110%;
padding: 1px; padding: 1px;
...@@ -108,10 +171,10 @@ pre, .memItemRight, .memItemLeft, div.memproto, div.ttdeci ...@@ -108,10 +171,10 @@ pre, .memItemRight, .memItemLeft, div.memproto, div.ttdeci
} }
div.tabs div.tabs
{ {
color: #2c2c2b; color: var(--text-color);
background: #f5f5f5; background: var(--background-color);
border-top: 1px solid #0c0c0c; border-top: 1px solid var(--div-color);
border-bottom: 1px solid #0c0c0c; border-bottom: 1px solid var(--div-color);
font-family: arial, sans-serif; font-family: arial, sans-serif;
font-size: 11px; font-size: 11px;
letter-spacing: 0.5px; letter-spacing: 0.5px;
...@@ -121,10 +184,10 @@ div.tabs ...@@ -121,10 +184,10 @@ div.tabs
} }
div.summary div.summary
{ {
color: #2c2c2b; color: var(--text-color);
background: #ffffff; background: var(--background-color);
border-top: 1px solid #0c0c0c; border-top: 1px solid var(--div-color);
border-bottom: 1px solid #0c0c0c; border-bottom: 1px solid var(--div-color);
font-family: arial, sans-serif; font-family: arial, sans-serif;
font-size: 14px; font-size: 14px;
letter-spacing: 3px; letter-spacing: 3px;
...@@ -136,7 +199,7 @@ div.summary ...@@ -136,7 +199,7 @@ div.summary
div.line div.line
{ {
font-family: monospace; font-family: monospace;
border-top: 1px solid #d8d8d8; border-top: 1px solid var(--border-color);
padding: 1px; padding: 1px;
} }
SPAN.keyword { color: #008000 } SPAN.keyword { color: #008000 }
...@@ -166,15 +229,18 @@ a ...@@ -166,15 +229,18 @@ a
} }
a:link, a:visited a:link, a:visited
{ {
font-weight: bold; font-weight: bold;
text-decoration: none; text-decoration: none;
color: #c02010; color: var(--visited-color);
} }
a:hover, a:active a:hover, a:active
{ {
background: #d8d8d8; background: var(--border-color);
text-decoration: underline; text-decoration: underline;
color: #e33729; color: var(--title-color);
} }
a.code { color: inherit; } a.code
{
color: inherit;
}
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment