ok
This commit is contained in:
GZod01
commit
d938db0cdd
14 changed files with 835 additions and 0 deletions
207
api/css/style.css
Normal file
207
api/css/style.css
Normal file
|
|
@ -0,0 +1,207 @@
|
|||
: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);
|
||||
}
|
||||
Reference in a new issue