mirror of
https://github.com/oupala/apaxy.git
synced 2025-08-08 04:56:57 +02:00
feat(theme): add a proper dark mode (and globally improve CSS styles)
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
@@ -19,14 +19,18 @@ button,hr,input{overflow:visible}audio,canvas,progress,video{display:inline-bloc
|
||||
|
||||
html {
|
||||
min-height: 100%;
|
||||
border-top: 10px solid #ECEEF1;
|
||||
border-bottom: 10px solid #ECEEF1;
|
||||
color: #61666c;
|
||||
background-color: #fff;
|
||||
font-weight: 400;
|
||||
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;
|
||||
}
|
||||
@media (prefers-color-scheme: dark) {
|
||||
html {
|
||||
background-color: #232323;
|
||||
}
|
||||
}
|
||||
|
||||
body {
|
||||
padding: 20px;
|
||||
@@ -38,17 +42,31 @@ code {
|
||||
}
|
||||
|
||||
a {
|
||||
color: #61666c;
|
||||
color: #000;
|
||||
text-decoration: none;
|
||||
}
|
||||
@media (prefers-color-scheme: dark) {
|
||||
a {
|
||||
color: #e9e9e9;
|
||||
}
|
||||
}
|
||||
|
||||
a, img {
|
||||
border: none;
|
||||
outline: none;
|
||||
}
|
||||
|
||||
a > img:hover {
|
||||
opacity: 0.4;
|
||||
}
|
||||
|
||||
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 {
|
||||
float: right;
|
||||
font-size:.75em;
|
||||
padding: .5em;
|
||||
margin-bottom: .5em;
|
||||
border: 1px solid #aaa;
|
||||
border-radius: .25em;
|
||||
width: 10em;
|
||||
transition: width 0.25s ease;
|
||||
background-color: rgba(0, 0, 0, 0.04);
|
||||
float: right;
|
||||
font-size:.75em;
|
||||
padding: .5em;
|
||||
margin-bottom: .5em;
|
||||
border: 1px solid rgba(0, 0, 0, 0.15);
|
||||
border-radius: .25em;
|
||||
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 {
|
||||
width: 14em;
|
||||
width: 14em;
|
||||
}
|
||||
|
||||
/*------------------------------------*\
|
||||
Demo block
|
||||
\*------------------------------------*/
|
||||
@@ -96,6 +123,21 @@ table {
|
||||
width: 100%;
|
||||
border-collapse: collapse;
|
||||
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 {
|
||||
@@ -103,10 +145,6 @@ tr {
|
||||
border: 0;
|
||||
}
|
||||
|
||||
tr:hover td {
|
||||
background: #f6f6f6;
|
||||
}
|
||||
|
||||
th {
|
||||
text-align: left;
|
||||
font-size: .75em;
|
||||
@@ -137,7 +175,6 @@ td {
|
||||
padding: 5px 0;
|
||||
outline: 0;
|
||||
border: 0;
|
||||
border-bottom: 1px solid #edf1f5;
|
||||
vertical-align: middle;
|
||||
text-align: left;
|
||||
transition: background 300ms ease;
|
||||
@@ -146,6 +183,11 @@ td {
|
||||
-moz-transition: background 300ms ease;
|
||||
-webkit-transition: background 300ms ease;
|
||||
}
|
||||
@media (prefers-color-scheme: dark) {
|
||||
td {
|
||||
border-color: #424242;
|
||||
}
|
||||
}
|
||||
|
||||
td a {
|
||||
display: block;
|
||||
@@ -172,83 +214,83 @@ tr.parent a[href^="/"] {
|
||||
Media query for small screens
|
||||
\*------------------------------------*/
|
||||
@media (max-width: 768px) {
|
||||
body {
|
||||
padding: 10px;
|
||||
}
|
||||
.indexcollastmod { display: none; }
|
||||
.wrapper { max-width: 100%; }
|
||||
body {
|
||||
padding: 10px;
|
||||
}
|
||||
.indexcollastmod { display: none; }
|
||||
.wrapper { max-width: 100%; }
|
||||
}
|
||||
|
||||
/*------------------------------------*\
|
||||
Error pages
|
||||
Error pages
|
||||
/*------------------------------------*/
|
||||
/* Animation */
|
||||
@-webkit-keyframes fadeDown {
|
||||
0% {
|
||||
opacity: 0;
|
||||
-webkit-transform: translateY(-20px);
|
||||
}
|
||||
100% {
|
||||
opacity: 1;
|
||||
-webkit-transform: translateY(0);
|
||||
}
|
||||
0% {
|
||||
opacity: 0;
|
||||
-webkit-transform: translateY(-20px);
|
||||
}
|
||||
100% {
|
||||
opacity: 1;
|
||||
-webkit-transform: translateY(0);
|
||||
}
|
||||
}
|
||||
|
||||
@-moz-keyframes fadeDown {
|
||||
0% {
|
||||
opacity: 0;
|
||||
-moz-transform: translateY(-20px);
|
||||
}
|
||||
100% {
|
||||
opacity: 1;
|
||||
-moz-transform: translateY(0);
|
||||
}
|
||||
0% {
|
||||
opacity: 0;
|
||||
-moz-transform: translateY(-20px);
|
||||
}
|
||||
100% {
|
||||
opacity: 1;
|
||||
-moz-transform: translateY(0);
|
||||
}
|
||||
}
|
||||
|
||||
@-ms-keyframes fadeDown {
|
||||
0% {
|
||||
opacity: 0;
|
||||
-ms-transform: translateY(-20px);
|
||||
}
|
||||
100% {
|
||||
opacity: 1;
|
||||
-ms-transform: translateY(0);
|
||||
}
|
||||
0% {
|
||||
opacity: 0;
|
||||
-ms-transform: translateY(-20px);
|
||||
}
|
||||
100% {
|
||||
opacity: 1;
|
||||
-ms-transform: translateY(0);
|
||||
}
|
||||
}
|
||||
|
||||
@-o-keyframes fadeDown {
|
||||
0% {
|
||||
opacity: 0;
|
||||
-o-transform: translateY(-20px);
|
||||
}
|
||||
100% {
|
||||
opacity: 1;
|
||||
-o-transform: translateY(0);
|
||||
}
|
||||
0% {
|
||||
opacity: 0;
|
||||
-o-transform: translateY(-20px);
|
||||
}
|
||||
100% {
|
||||
opacity: 1;
|
||||
-o-transform: translateY(0);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes fadeDown {
|
||||
0% {
|
||||
opacity: 0;
|
||||
transform: translateY(-20px);
|
||||
}
|
||||
100% {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
0% {
|
||||
opacity: 0;
|
||||
transform: translateY(-20px);
|
||||
}
|
||||
100% {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
|
||||
.fadeDown {
|
||||
-webkit-animation:fadeDown 1s ease;
|
||||
-moz-animation:fadeDown 1s ease;
|
||||
-ms-animation:fadeDown 1s ease;
|
||||
-o-animation:fadeDown 1s ease;
|
||||
animation:fadeDown 1s ease;
|
||||
-webkit-animation:fadeDown 1s ease;
|
||||
-moz-animation:fadeDown 1s ease;
|
||||
-ms-animation:fadeDown 1s ease;
|
||||
-o-animation:fadeDown 1s ease;
|
||||
animation:fadeDown 1s ease;
|
||||
}
|
||||
|
||||
/* Error code display */
|
||||
.errorCode {
|
||||
font-size: 80px;
|
||||
font-size: 80px;
|
||||
}
|
||||
|
||||
/*------------------------------------*\
|
||||
@@ -256,47 +298,57 @@ tr.parent a[href^="/"] {
|
||||
\*------------------------------------*/
|
||||
|
||||
.breadcrumb {
|
||||
white-space: nowrap;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
white-space: nowrap;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.breadcrumb li {
|
||||
display: inline-block;
|
||||
line-height: 26px;
|
||||
margin: 0 9px 0 -10px;
|
||||
padding: 0 15px;
|
||||
position: relative;
|
||||
color: rgb(154, 154, 154);
|
||||
display: inline-block;
|
||||
line-height: 10px;
|
||||
margin: 0 9px 20px -10px;
|
||||
padding: 0 15px;
|
||||
position: relative;
|
||||
}
|
||||
@media (prefers-color-scheme: dark) {
|
||||
.breadcrumb li {
|
||||
color: rgb(100, 100, 100);
|
||||
}
|
||||
}
|
||||
|
||||
.breadcrumb li::before,
|
||||
.breadcrumb li::after {
|
||||
border-right: 1px solid #666666;
|
||||
content: '';
|
||||
display: block;
|
||||
height: 50%;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
right: 0;
|
||||
top: 0;
|
||||
z-index: -1;
|
||||
transform: skewX(45deg);
|
||||
border-right: 1.5px solid #000;
|
||||
content: '';
|
||||
display: block;
|
||||
height: 50%;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
right: 0;
|
||||
top: 0;
|
||||
z-index: -1;
|
||||
transform: skewX(45deg);
|
||||
}
|
||||
@media (prefers-color-scheme: dark) {
|
||||
.breadcrumb li::before,
|
||||
.breadcrumb li::after {
|
||||
border-color: #fff;
|
||||
}
|
||||
}
|
||||
|
||||
.breadcrumb li::after {
|
||||
bottom: 0;
|
||||
top: auto;
|
||||
transform: skewX(-45deg);
|
||||
bottom: 0;
|
||||
top: auto;
|
||||
transform: skewX(-45deg);
|
||||
}
|
||||
|
||||
.breadcrumb li:last-of-type::before,
|
||||
.breadcrumb li:last-of-type::after {
|
||||
display: none;
|
||||
display: none;
|
||||
}
|
||||
|
||||
.breadcrumb li a {
|
||||
letter-spacing: -1px;
|
||||
text-decoration: none;
|
||||
letter-spacing: -1px;
|
||||
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%); }
|
||||
|
||||
Reference in New Issue
Block a user