mirror/apaxy
1
0
Fork 0
mirror of https://github.com/oupala/apaxy.git synced 2025-08-08 12:26:34 +02:00
Code Issues Releases Wiki Activity

feat(theme): add a proper dark mode (and globally improve CSS styles)

Browse Source 
This patch globally improves Apaxy CSS theme, and adds a dark mode (media query: `prefers-color-scheme`).
It also fixes some indentation issues the style-sheet was reading.

Co-authored-by: NAERNON <naernon@icloud.com>
This commit is contained in:
Samuel FORESTIER
2019-08-09 14:14:47 +02:00
parent 31f0e3658c
commit 301c9329af
1 changed files with 152 additions and 100 deletions
Download Patch File Download Diff File Expand all files Collapse all files

252
apaxy/theme/style.css
View File

@@ -19,14 +19,18 @@ button,hr,input{overflow:visible}audio,canvas,progress,video{display:inline-bloc
html { html {
min-height: 100%; min-height: 100%;
border-top: 10px solid #ECEEF1;
border-bottom: 10px solid #ECEEF1;
color: #61666c; color: #61666c;
background-color: #fff;
font-weight: 400; font-weight: 400;
font-size: 1em; font-size: 1em;
font-family: sans-serif; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
line-height: 2em; line-height: 2em;
} }
@media (prefers-color-scheme: dark) {
html {
background-color: #232323;
}
}
body { body {
padding: 20px; padding: 20px;
@@ -38,17 +42,31 @@ code {
} }
a { a {
color: #61666c; color: #000;
text-decoration: none; text-decoration: none;
} }
@media (prefers-color-scheme: dark) {
a {
color: #e9e9e9;
}
}
a, img { a, img {
border: none; border: none;
outline: none; outline: none;
} }
a > img:hover {
opacity: 0.4;
}
a:hover { a:hover {
color: #2a2a2a; color: #bababa;
}
@media (prefers-color-scheme: dark) {
a:hover {
color: #696969;
}
} }
/*------------------------------------*\ /*------------------------------------*\
@@ -65,18 +83,27 @@ a:hover {
Filter (search box) Filter (search box)
\*------------------------------------*/ \*------------------------------------*/
#filter { #filter {
float: right; background-color: rgba(0, 0, 0, 0.04);
font-size:.75em; float: right;
padding: .5em; font-size:.75em;
margin-bottom: .5em; padding: .5em;
border: 1px solid #aaa; margin-bottom: .5em;
border-radius: .25em; border: 1px solid rgba(0, 0, 0, 0.15);
width: 10em; border-radius: .25em;
transition: width 0.25s ease; width: 10em;
transition: width 0.25s ease;
}
@media (prefers-color-scheme: dark) {
#filter {
background-color: rgba(255, 255, 255, 0.07);
border-color: rgba(255, 255, 255, 0.15);
color: white;
}
} }
#filter:focus { #filter:focus {
width: 14em; width: 14em;
} }
/*------------------------------------*\ /*------------------------------------*\
Demo block Demo block
\*------------------------------------*/ \*------------------------------------*/
@@ -96,6 +123,21 @@ table {
width: 100%; width: 100%;
border-collapse: collapse; border-collapse: collapse;
font-size: .875em; font-size: .875em;
color: rgb(143, 143, 143);
}
@media (prefers-color-scheme: dark) {
table {
color: rgb(111, 111, 111);
}
}
.odd {
background-color: rgb(244, 244, 244);
}
@media (prefers-color-scheme: dark) {
.odd {
background-color: rgb(50, 50, 50);
}
} }
tr { tr {
@@ -103,10 +145,6 @@ tr {
border: 0; border: 0;
} }
tr:hover td {
background: #f6f6f6;
}
th { th {
text-align: left; text-align: left;
font-size: .75em; font-size: .75em;
@@ -137,7 +175,6 @@ td {
padding: 5px 0; padding: 5px 0;
outline: 0; outline: 0;
border: 0; border: 0;
border-bottom: 1px solid #edf1f5;
vertical-align: middle; vertical-align: middle;
text-align: left; text-align: left;
transition: background 300ms ease; transition: background 300ms ease;
@@ -146,6 +183,11 @@ td {
-moz-transition: background 300ms ease; -moz-transition: background 300ms ease;
-webkit-transition: background 300ms ease; -webkit-transition: background 300ms ease;
} }
@media (prefers-color-scheme: dark) {
td {
border-color: #424242;
}
}
td a { td a {
display: block; display: block;
@@ -172,83 +214,83 @@ tr.parent a[href^="/"] {
Media query for small screens Media query for small screens
\*------------------------------------*/ \*------------------------------------*/
@media (max-width: 768px) { @media (max-width: 768px) {
body { body {
padding: 10px; padding: 10px;
} }
.indexcollastmod { display: none; } .indexcollastmod { display: none; }
.wrapper { max-width: 100%; } .wrapper { max-width: 100%; }
} }
/*------------------------------------*\ /*------------------------------------*\
Error pages Error pages
/*------------------------------------*/ /*------------------------------------*/
/* Animation */ /* Animation */
@-webkit-keyframes fadeDown { @-webkit-keyframes fadeDown {
0% { 0% {
opacity: 0; opacity: 0;
-webkit-transform: translateY(-20px); -webkit-transform: translateY(-20px);
} }
100% { 100% {
opacity: 1; opacity: 1;
-webkit-transform: translateY(0); -webkit-transform: translateY(0);
} }
} }
@-moz-keyframes fadeDown { @-moz-keyframes fadeDown {
0% { 0% {
opacity: 0; opacity: 0;
-moz-transform: translateY(-20px); -moz-transform: translateY(-20px);
} }
100% { 100% {
opacity: 1; opacity: 1;
-moz-transform: translateY(0); -moz-transform: translateY(0);
} }
} }
@-ms-keyframes fadeDown { @-ms-keyframes fadeDown {
0% { 0% {
opacity: 0; opacity: 0;
-ms-transform: translateY(-20px); -ms-transform: translateY(-20px);
} }
100% { 100% {
opacity: 1; opacity: 1;
-ms-transform: translateY(0); -ms-transform: translateY(0);
} }
} }
@-o-keyframes fadeDown { @-o-keyframes fadeDown {
0% { 0% {
opacity: 0; opacity: 0;
-o-transform: translateY(-20px); -o-transform: translateY(-20px);
} }
100% { 100% {
opacity: 1; opacity: 1;
-o-transform: translateY(0); -o-transform: translateY(0);
} }
} }
@keyframes fadeDown { @keyframes fadeDown {
0% { 0% {
opacity: 0; opacity: 0;
transform: translateY(-20px); transform: translateY(-20px);
} }
100% { 100% {
opacity: 1; opacity: 1;
transform: translateY(0); transform: translateY(0);
} }
} }
.fadeDown { .fadeDown {
-webkit-animation:fadeDown 1s ease; -webkit-animation:fadeDown 1s ease;
-moz-animation:fadeDown 1s ease; -moz-animation:fadeDown 1s ease;
-ms-animation:fadeDown 1s ease; -ms-animation:fadeDown 1s ease;
-o-animation:fadeDown 1s ease; -o-animation:fadeDown 1s ease;
animation:fadeDown 1s ease; animation:fadeDown 1s ease;
} }
/* Error code display */ /* Error code display */
.errorCode { .errorCode {
font-size: 80px; font-size: 80px;
} }
/*------------------------------------*\ /*------------------------------------*\
@@ -256,47 +298,57 @@ tr.parent a[href^="/"] {
\*------------------------------------*/ \*------------------------------------*/
.breadcrumb { .breadcrumb {
white-space: nowrap; white-space: nowrap;
padding: 0; padding: 0;
margin: 0; margin: 0;
} }
.breadcrumb li { .breadcrumb li {
display: inline-block; color: rgb(154, 154, 154);
line-height: 26px; display: inline-block;
margin: 0 9px 0 -10px; line-height: 10px;
padding: 0 15px; margin: 0 9px 20px -10px;
position: relative; padding: 0 15px;
position: relative;
} }
@media (prefers-color-scheme: dark) {
.breadcrumb li {
color: rgb(100, 100, 100);
}
}
.breadcrumb li::before, .breadcrumb li::before,
.breadcrumb li::after { .breadcrumb li::after {
border-right: 1px solid #666666; border-right: 1.5px solid #000;
content: ''; content: '';
display: block; display: block;
height: 50%; height: 50%;
position: absolute; position: absolute;
left: 0; left: 0;
right: 0; right: 0;
top: 0; top: 0;
z-index: -1; z-index: -1;
transform: skewX(45deg); transform: skewX(45deg);
} }
@media (prefers-color-scheme: dark) {
.breadcrumb li::before,
.breadcrumb li::after {
border-color: #fff;
}
}
.breadcrumb li::after { .breadcrumb li::after {
bottom: 0; bottom: 0;
top: auto; top: auto;
transform: skewX(-45deg); transform: skewX(-45deg);
} }
.breadcrumb li:last-of-type::before, .breadcrumb li:last-of-type::before,
.breadcrumb li:last-of-type::after { .breadcrumb li:last-of-type::after {
display: none; display: none;
} }
.breadcrumb li a { .breadcrumb li a {
letter-spacing: -1px; letter-spacing: -1px;
text-decoration: none; text-decoration: none;
} }
.breadcrumb li:nth-of-type(1) a { color: hsl(0, 0%, 70%); }
.breadcrumb li:nth-of-type(2) a { color: hsl(0, 0%, 65%); }
.breadcrumb li:nth-of-type(3) a { color: hsl(0, 0%, 50%); }
.breadcrumb li:nth-of-type(4) a { color: hsl(0, 0%, 45%); }