208 lines
4.1 KiB
CSS
208 lines
4.1 KiB
CSS
|
:root{
|
||
|
|
/*the color that will be switch */
|
||
|
|
--main-bg-color: white;
|
||
|
|
--main-txt-color: black;
|
||
|
|
--scdr-bg-color: lightgray;
|
||
|
|
--scdr-txt-color: var(--main-txt-color);
|
||
|
|
}
|
||
|
|
@media (prefers-color-scheme:dark){
|
||
|
|
body::after{
|
||
|
|
content: 'dark';
|
||
|
|
display: none;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
@media (prefers-color-scheme:light){
|
||
|
|
body::after{
|
||
|
|
content: 'light';
|
||
|
|
display: none;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
@media screen and (max-width: 890px) {
|
||
|
|
header.nav a:not(:first-child) {display: none;}
|
||
|
|
header.nav a.icon {
|
||
|
|
float: right;
|
||
|
|
display: block;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
@media screen and (max-width: 890px) {
|
||
|
|
header.nav.responsive {position: relative;}
|
||
|
|
header.nav.responsive a.icon {
|
||
|
|
position: absolute;
|
||
|
|
right: 0;
|
||
|
|
top: 0;
|
||
|
|
}
|
||
|
|
header.nav.responsive a {
|
||
|
|
float: none;
|
||
|
|
display: block;
|
||
|
|
text-align: left;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
body {
|
||
|
|
min-height: 100vh;
|
||
|
|
margin: 0;
|
||
|
|
word-break: break-word;
|
||
|
|
display: flex;
|
||
|
|
flex-direction: column;
|
||
|
|
background-color: var(--main-bg-color);
|
||
|
|
color: var(--main-txt-color);
|
||
|
|
}
|
||
|
|
.content{
|
||
|
|
position:relative;
|
||
|
|
min-height:80vh;
|
||
|
|
width:100%
|
||
|
|
}
|
||
|
|
.parent{
|
||
|
|
position:relative;
|
||
|
|
}
|
||
|
|
.fullcentered{
|
||
|
|
text-align:center;
|
||
|
|
margin: 0;
|
||
|
|
position: absolute;
|
||
|
|
top: 50%;
|
||
|
|
left: 50%;
|
||
|
|
-ms-transform: translate(-50%, -50%);
|
||
|
|
transform: translate(-50%, -50%);
|
||
|
|
}
|
||
|
|
.reallycentered{
|
||
|
|
text-align:center;
|
||
|
|
margin:0;
|
||
|
|
position:fixed;
|
||
|
|
top:50%;
|
||
|
|
left:50%;
|
||
|
|
-ms-transform:translate(-50%,-50%);
|
||
|
|
transform:translate(-50%,-50%);
|
||
|
|
}
|
||
|
|
header.nav{
|
||
|
|
margin:0;
|
||
|
|
background-color: var(--scdr-bg-color);
|
||
|
|
color: var(--scdr-txt-color);
|
||
|
|
padding-bottom: 2px;
|
||
|
|
overflow:hidden;
|
||
|
|
}
|
||
|
|
footer a{
|
||
|
|
color: var(--scdr-txt-color);
|
||
|
|
text-decoration:none;
|
||
|
|
}
|
||
|
|
header.nav a{
|
||
|
|
color: var(--scdr-txt-color);
|
||
|
|
text-decoration: none;
|
||
|
|
float:left;
|
||
|
|
display:block;
|
||
|
|
text-align:center;
|
||
|
|
padding:14px 16px;
|
||
|
|
font-size: 17px
|
||
|
|
}
|
||
|
|
header.nav a:hover{
|
||
|
|
color:var(--main-bg-color);
|
||
|
|
}
|
||
|
|
header.nav a.active{
|
||
|
|
background-color: var(--main-bg-color);
|
||
|
|
color: var(--scdr-txt-color)
|
||
|
|
}
|
||
|
|
header.nav .icon{
|
||
|
|
display:none
|
||
|
|
}
|
||
|
|
a{
|
||
|
|
color:var(--main-txt-color);
|
||
|
|
}
|
||
|
|
a:hover{
|
||
|
|
background-color:var(--main-txt-color);
|
||
|
|
color:var(--main-bg-color);
|
||
|
|
}
|
||
|
|
footer{
|
||
|
|
margin-top: auto;
|
||
|
|
border-top:solid var(--scdr-txt-color);
|
||
|
|
/*display: flex ;*/
|
||
|
|
text-align: center;
|
||
|
|
width: 100%;
|
||
|
|
left: 0;
|
||
|
|
background-color:var(--scdr-bg-color) ;
|
||
|
|
color: var(--scdr-txt-color);
|
||
|
|
}
|
||
|
|
.footerleft{
|
||
|
|
border-right: solid var(--scdr-txt-color);
|
||
|
|
height: 100%;
|
||
|
|
left:0;
|
||
|
|
width:50%;
|
||
|
|
}
|
||
|
|
.footerright{
|
||
|
|
border-left: solid var(--scdr-txt-color);
|
||
|
|
height: 100%;
|
||
|
|
right:0;
|
||
|
|
width:50%
|
||
|
|
}
|
||
|
|
.themebutton{
|
||
|
|
right:0;
|
||
|
|
top:50%;
|
||
|
|
position: fixed;
|
||
|
|
cursor: pointer;
|
||
|
|
text-align:center;
|
||
|
|
border-radius:100%;
|
||
|
|
z-index:3;
|
||
|
|
background-color: var(--scdr-bg-color);
|
||
|
|
color: var(--scdr-txt-color);
|
||
|
|
}
|
||
|
|
.themebutton:hover{
|
||
|
|
background-color: var(--scdr-txt-color);
|
||
|
|
color:var(--scdr-bg-color);
|
||
|
|
}
|
||
|
|
button{
|
||
|
|
border:solid var(--scdr-txt-color);
|
||
|
|
background-color: var(--scdr-bg-color);
|
||
|
|
color: var(--scdr-txt-color);
|
||
|
|
}
|
||
|
|
button:hover{
|
||
|
|
background-color:var(--scdr-txt-color);
|
||
|
|
color:var(--scdr-bg-color);
|
||
|
|
}
|
||
|
|
select{
|
||
|
|
border:solid var(--scdr-txt-color);
|
||
|
|
background-color: var(--scdr-bg-color);
|
||
|
|
color: var(--scdr-txt-color);
|
||
|
|
}
|
||
|
|
select:hover{
|
||
|
|
background-color:var(--scdr-txt-color);
|
||
|
|
color:var(--scdr-bg-color);
|
||
|
|
}
|
||
|
|
form {
|
||
|
|
border: solid var(--scdr-txt-color);
|
||
|
|
background-color: var(--scdr-bg-color);
|
||
|
|
color: var(--scdr-txt-color)
|
||
|
|
}
|
||
|
|
fieldset{
|
||
|
|
border:solid var(--main-txt-color);
|
||
|
|
background-color: var(--main-bg-color);
|
||
|
|
color: var(--main-txt-color);
|
||
|
|
}
|
||
|
|
#switchmodeicon{
|
||
|
|
font-size:200%;
|
||
|
|
}
|
||
|
|
/*** Works on common browsers ***/
|
||
|
|
::selection {
|
||
|
|
background-color:var(--main-txt-color);
|
||
|
|
color:var(--main-bg-color);
|
||
|
|
}
|
||
|
|
|
||
|
|
/*** Mozilla based browsers ***/
|
||
|
|
::-moz-selection {
|
||
|
|
background-color:var(--main-txt-color);
|
||
|
|
color:var(--main-bg-color);
|
||
|
|
}
|
||
|
|
|
||
|
|
/***For Other Browsers ***/
|
||
|
|
::-o-selection {
|
||
|
|
background-color:var(--main-txt-color);
|
||
|
|
color:var(--main-bg-color);
|
||
|
|
}
|
||
|
|
|
||
|
|
::-ms-selection {
|
||
|
|
background-color:var(--main-txt-color);
|
||
|
|
color:var(--main-bg-color);
|
||
|
|
}
|
||
|
|
|
||
|
|
/*** For Webkit ***/
|
||
|
|
::-webkit-selection {
|
||
|
|
background-color:var(--main-txt-color);
|
||
|
|
color:var(--main-bg-color);
|
||
|
|
}
|