155 lines
3.1 KiB
CSS
155 lines
3.1 KiB
CSS
:root {
|
|
--stdfont: mono, monospace;
|
|
--windowcountx: 3;
|
|
--windowgap: 1.4rem;
|
|
--navbarheight: 2.8rem;
|
|
--uicolor: #000000bf;
|
|
--bgimage: url('https://i.redd.it/abhfagc5t4591.jpg');
|
|
--borderrounding: 1;
|
|
--txtcolor: #ffffff;
|
|
--navbarmargin: 0.25rem;
|
|
}
|
|
html, body {
|
|
height: 100%;
|
|
font-family: var(--stdfont);
|
|
padding: 0;
|
|
margin: 0;
|
|
}
|
|
body {
|
|
background-image: var(--bgimage);
|
|
background-size: cover;
|
|
background-position: center;
|
|
background-attachment: fixed;
|
|
}
|
|
|
|
header {
|
|
height: var(--navbarheight);
|
|
}
|
|
nav {
|
|
float: left;
|
|
box-sizing: border-box;
|
|
}
|
|
nav, .navbutton {
|
|
height: 100%;
|
|
font-size: 0;
|
|
}
|
|
.navbutton, nav a {
|
|
display: inline-block;
|
|
color: var(--txtcolor);
|
|
border: none;
|
|
border-radius: 0;
|
|
background: none;
|
|
padding: calc((var(--navbarheight) / 2) - 12px);
|
|
}
|
|
.navbutton:hover, nav a:hover {
|
|
cursor: pointer;
|
|
background-color: #ffffff44;
|
|
}
|
|
nav a {
|
|
border-radius: calc(50% * var(--borderrounding));
|
|
margin: var(--navbarmargin);
|
|
}
|
|
nav a img {
|
|
filter: drop-shadow(1px 1px 4px black);
|
|
}
|
|
#apps, .systray {
|
|
box-sizing: border-box;
|
|
display: inline-block;
|
|
overflow: clip;
|
|
border-radius: calc((var(--navbarheight) / 2) * var(--borderrounding));
|
|
background-color: var(--uicolor);
|
|
margin: var(--navbarmargin) 0;
|
|
padding: 0 0.5rem;
|
|
}
|
|
.systray {
|
|
color: var(--txtcolor);
|
|
float: right;
|
|
height: 100%;
|
|
margin-right: var(--navbarmargin);
|
|
margin-bottom: -1rem;
|
|
}
|
|
.sysleft {
|
|
float: left;
|
|
margin-left: var(--navbarmargin);
|
|
}
|
|
.systray p {
|
|
margin: 0;
|
|
padding: calc((var(--navbarheight) / 2) - 1.2ch);
|
|
}
|
|
#settingspanel {
|
|
display: none;
|
|
position: absolute;
|
|
right: var(--navbarmargin);
|
|
top: calc((var(--navbarmargin) * 2) + var(--navbarheight));
|
|
z-index: 5;
|
|
background-color: var(--uicolor);
|
|
border-radius: calc((var(--navbarheight) / 2) * var(--borderrounding));
|
|
padding: 1rem;
|
|
}
|
|
#settingsbutton:checked ~ #settingspanel {
|
|
display: block;
|
|
}
|
|
#settingspanel input, #settingspanel button {
|
|
border: none;
|
|
border-radius: calc(0.9rem * var(--borderrounding));
|
|
padding: 0.3rem 0.6rem;
|
|
}
|
|
#settingspanel td {
|
|
padding: 0.3rem;
|
|
}
|
|
|
|
main {
|
|
display: flex;
|
|
padding: calc(var(--windowgap) / 2);
|
|
flex-wrap: wrap;
|
|
height: calc(100vh - var(--navbarheight));
|
|
box-sizing: border-box;
|
|
padding-top: var(--navbarmargin);
|
|
}
|
|
|
|
.window {
|
|
margin: calc(var(--windowgap) / 2);
|
|
flex-grow: 1;
|
|
box-sizing: border-box;
|
|
flex: calc((100% / var(--windowcountx)) - var(--windowgap));
|
|
border-radius: calc(1.15rem * var(--borderrounding));
|
|
overflow: clip;
|
|
background-color: var(--uicolor);
|
|
z-index: 2;
|
|
}
|
|
.window iframe {
|
|
width: 100%;
|
|
height: calc(100% - 2.2rem);
|
|
border: none;
|
|
}
|
|
.windowdecoration {
|
|
display: block;
|
|
width: 100%;
|
|
height: 2.2rem;
|
|
}
|
|
.closewindow {
|
|
display: block;
|
|
float: right;
|
|
margin: 0.3rem;
|
|
height: 1.6rem;
|
|
width: 1.6rem;
|
|
padding: calc(.8rem - 12px);
|
|
border: none;
|
|
color: red;
|
|
background: none;
|
|
border-radius: calc(50% * var(--borderrounding));
|
|
z-index: 500000;
|
|
}
|
|
.closewindow:hover {
|
|
cursor: pointer;
|
|
color: black;
|
|
background-color: red;
|
|
}
|
|
|
|
.CboxOpenBtn img {
|
|
opacity: 0;
|
|
transition-duration: 0.2s;
|
|
}
|
|
.CboxOpenBtn:hover img {
|
|
opacity: 1;
|
|
} |