style.scss
@import "helper.min.css";
html,
body {
margin: 0;
background-color: #853;
overflow: hidden !important;
position: relative;
top: 0;
left: 0;
height: 100%;
width: 100%;
}
* {
box-sizing: border-box;
font-family: var(--font);
}
.content {
position: absolute;
display: flex;
flex-direction: column;
top: 0;
left: 0;
height: 100%;
width: 100%;
.programs {
display: inline-block;
// allow click-through but still allow interaction with child elements, so we can interact with the desktop
pointer-events: none;
position: relative;
top: 0;
left: 0;
height: 100%;
width: 100%;
* {
pointer-events: auto;
}
&.peek {
>div {
backdrop-filter: blur(1px);
outline: 1px solid var(--themecolor);
>* {
opacity: .05 !important;
&.headbar {
opacity: 1 !important;
background-color: transparent;
* {
opacity: 0;
}
.progicon, .progtitle {
opacity: 1;
background-color: var(--themecolor);
}
}
}
}
}
}
}
.speak {
display: inline;
border: 0;
width: 0;
height: 0;
opacity: 0;
}
.autostart {
display: none !important;
}
.program.noborder {
border-radius: 0 !important;
iframe {
top: 0 !important;
border: 0 !important;
background-color: transparent !important;
border-radius: 0 !important;
height: 100%;
}
.headbar,
.resizers {
display: none;
}
}
#background {
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
background-size: cover;
background-position: center;
display: flex;
justify-content: center;
align-items: center;
overflow: hidden;
pointer-events: none;
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
body.big_buttons { // Big Buttons
.headbar .max,
.headbar .close,
.headbar .devreload {
height: 2rem;
width: 2rem;
}
.headbar .max {
right:calc(2rem - 1px);
}
.resizer2 {
height:20px;
width:20px;
bottom:-11px;
right:-11px;
}
}
#emergencytools, #emergencytoolsloading { // Emergency Tools
display: none;
height: 0;
z-index: 99999999 !important;
background: #000000;
color: #ffffff;
position: fixed;
top: 0;
left: 0;
height: calc(100vh - var(--taskbarheight));
padding: 10px;
overflow:auto;
max-height: 100vh;
max-width: 100vw;
width: 100vw;
&:target {
display: block;
+#emergencytoolsloading {
display: none !important;
}
}
img {
position: fixed;
margin: 10px;
top: 0;
right: 0;
height: 6vmin;
width: auto;
}
h2 {
top: 0;
position: sticky;
background: #000000;
border-bottom: 1px solid #aaccff;
}
* {
font-family: monospace, system-ui, -apple-system, sans-serif;
}
textarea {
background: #ffffaa;
color: #000000;
display: block;
width: 90%;
height: 500px;
resize: none;
}
details {
a {
color: reset;
}
input {
display: block;
width: 80%;
}
#emergencyframe {
resize: both;
height: 600px;
max-height: 80vh;
width: 80%
}
}
}
#emergencytoolsloading {
height: auto;
width: 100%;
background: transparent;
position: absolute;
bottom: 0px;
top: unset;
padding: 0;
left: 0;
progress {
width: 100%;
background: rgba(255,255,255,.15);
border: 0;
height: 44px;
}
}
.program {
position: absolute;
display: none;
min-width: 100px;
min-height: 50px;
top: 0;
left: 0;
transform: scale(1) translate(1);
transform-origin: bottom left;
background-color: transparent;
border-radius: var(--border-radius);
&,* {
transition: opacity .2s, backdrop-filter .3s, transform .3s, margin .3s;
}
&.peeking:not(.active) {
// &:not(.maximized:not(.minimized)) {
&,* {
z-index:99999 !important;
transform: scale(1);
opacity: 1;
visibility: visible;
transition: 0s;
}
iframe {
transform: scaleY(1) !important;
border-radius: var(--border-radius) !important;
overflow: hidden;
}
transform: scale(.25) !important;
transform-origin: bottom left !important;
margin: 0 !important;
top: unset !important;
bottom: 20px !important;
left: 20px !important;
outline: 40px solid rgba(0,0,0,.6);
border-radius: var(--border-radius);
}
// &.maximized {
// &,* {
// z-index:99999 !important;
// }
// transform: scale(.95);
// border-radius: var(--border-radius);
// outline: 40px solid rgba(0,0,0,.6);
// left:40px !important;
// top:unset;
// bottom:20px !important;
// }
// }
&:not(.active) {
.close {
filter: grayscale(.4) brightness(1.1);
}
}
&.closing {
transition: .3s !important;
transform: scale(0) !important;
transform-origin: bottom left;
opacity: .5 !important;
}
&.alwaysontop {
z-index: 999999 !important;
.controls {
.pin {
&::after {
content: "📍";
background: #000000;
}
&:hover {
&::after {
opacity: 0;
}
}
}
}
}
&.fullscreen {
z-index: 100000 !important;
top: 0 !important;
left: 0 !important;
height: 100vh !important;
width: 100vw !important;
iframe {
top: 0;
left: 0;
height: calc(100%);
border: 0;
border-radius: 0;
}
.headbar {
&:hover {
z-index: 2;
border-bottom: 1px solid #000;
.close {
display: inline-block;
}
.fullscreen {
transform: scale(1);
}
}
.controls {
button {
display: none;
&.fullscreen {
transform: scale(.8);
right: 1.65em;
position: absolute;
display: inline-block;
}
}
}
}
}
&.minimized {
user-select: none;
opacity: 0;
z-index: -100;
// visibility: hidden;
margin-left: -70vw;
margin-top: 100vh;
transform: scale(0);
&,* {
pointer-events: none;
}
iframe {
transform: scaleY(0);
pointer-events: none;
user-select: none;
// visibility: hidden;
}
}
&.maximized {
height: 100%;
width: 100%;
max-height: 100vh;
max-width: 100vw;
border-radius: 0;
iframe {
border-left: none;
border-right: none;
border-bottom: none;
border-radius: 0;
}
.resizers {
display: none;
}
.headbar {
border-radius: 0;
}
}
&.notmaximized {
height: 50%;
width: 50%;
.headbar {
.drag {
cursor: grab;
}
}
}
* {
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-o-user-select: none;
user-select: none;
}
iframe {
position: absolute;
border: 0;
top: 30px;
left: 0;
height: calc(100% - 30px);
width: 100%;
// background-color: #fff;
overflow: hidden;
border: 1px solid var(--themecolor);
border-top: 0;
border-bottom-left-radius: var(--border-radius);
border-bottom-right-radius: var(--border-radius);
color-scheme: initial !important;
}
.headbar {
position: relative;
top: 0;
background-color: var(--themecolor);
height: 30px;
width: 100%;
padding-right: 2px;
border: none;
overflow: hidden;
border-top-left-radius: var(--border-radius);
border-top-right-radius: var(--border-radius);
* {
display: inline;
transition: .5s;
}
.drag {
height: 100%;
width: 100%;
top: 0;
left: 0;
display: inline-block !important;
position: absolute;
z-index: 0;
}
.controls {
position: absolute;
right: 0;
top: 0;
display: flex;
height: 100%;
button {
height: 100%;
aspect-ratio: 1.2/1;
@supports not (aspect-ratio: 1/1) {
width: 30px;
}
top: 0;
border: 0;
margin: 0 0 0 2px;
padding: 0;
position: relative;
// border-left: 1px solid #fff;
// border-bottom: 1px solid #fff;
z-index: 1;
font-size: 1.2rem;
line-height: 0;
text-align: center;
justify-content: center;
object-fit: contain;
border-radius: 0;
background:transparent;
img {
height: 100%;
// width: 100%;
max-width: 100%;
padding: 15%;
font-size: 0;
aspect-ratio: 1/1;
}
&[disabled],
&[disabled="disabled"] {
display: none;
pointer-events: none;
}
&.close {
order: 10000;
&:hover {
background-color: #f00 !important;
}
}
&.max {
order: 9500;
// background-color: var(--themecolor2);
}
&.minimize {
order: 9000;
// background-color: var(--themecolor2);
}
&.fullscreen {
order: 8500;
// background-color: var(--themecolor2);
}
&.pin {
// background-color: var(--themecolor2);
}
&.reload {
// background-color: #ff0;
color: #000;
}
}
}
}
.resizers {
* {
height: 10px;
width: 10px;
position: absolute;
transform:scale(1);
&:active {
z-index: 9999;
transition: 0s;
cursor: se-resize;
}
&:hover {
// if not active
&:not(:active) {
border-radius: 50%;
backdrop-filter: blur(10px);
transform: scale(1.5);
outline: 1px solid var(--themecolor);
}
}
}
.resizer2 {
bottom: -5px;
right: -5px;
cursor: se-resize;
z-index: 20;
}
}
}
.start_menu {
&, iframe {
background-color: transparent !important;
}
}
.box2 {
position: absolute;
height: 200px;
width: 200px;
top: 400px;
left: 400px;
}
.progtitle {
position: relative;
left: 0;
top: 5px;
margin: 5px;
font-size: 16px;
height: 16px;
color:#fff;
}
.progicon {
position: relative;
float: left;
left: 0;
height: 24px;
margin: 4px 4px 4px 6px;
pointer-events: none;
}
#taskbar {
background-color: var(--glassyElementBackground);
position: relative;
order: 200;
display: flex;
justify-content: space-between;
bottom: 0;
left: 0;
width: 100%;
height: var(--taskbarheight);
max-height: 40vh;
overflow: visible;
z-index: 99999;
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
flex-grow: 0;
flex-shrink: 0;
// box-shadow: 0 -1px 0 0px #00000088;
backdrop-filter: blur(var(--glassyElementBlur));
#start {
background-color: transparent;
position: relative;
float: left;
height: 100%;
width: auto;
border: none;
display: flex;
top: 0;
left: 0;
z-index: 999;
font-size: 1.5em;
padding: 2px 5px;
justify-content: left;
min-width: 36px;
img {
position: relative;
display: inline-block;
height: 100%;
width: 100%;
filter: drop-shadow(0 0 1px #000);
object-fit: contain;
}
p {
position: absolute;
display: inline;
bottom: -2px;
margin: 0;
padding: 0;
right: 35px;
z-index: 999;
color: #fff;
}
}
#tasklist {
height: 100%;
width: auto;
position: relative;
display: flex;
flex-grow: 99;
&.showprogramtitle {
span {
display: unset;
}
}
button {
height: 100%;
border-radius: var(--border-radius);
display: inline-flex;
border: 0;
background: #77777711;
padding: 2px 5px;
margin: 0 2px;
box-sizing: border-box;
&.active {
background: #7777774f;
border: 2px solid var(--themecolor2);
}
img {
height: 100%;
margin-right: 0;
aspect-ratio: 1/1;
object-fit: scale-down;
}
span {
margin: auto;
line-height: 1;
display: none;
}
}
}
#taskbarright {
position: relative;
display: flex;
flex-direction: row;
right: 0;
top: 0;
height: 100%;
width: auto;
// background-color: #00000033;
// border-left: 2px solid #420;
max-width: 60%;
color: #fff;
min-width: 50px;
// background-color: var(--glassyElementBackground);
a {
display: inline-block;
position: relative;
padding: 5px;
border-radius: var(--border-radius);
margin: 0 2px;
}
#taskbarrighticons {
height: 100%;
width: auto;
}
img {
height: 100%;
margin: 3px;
width: auto;
aspect-ratio: 1/1;
}
#taskbartime,
.taskbarlanguage {
height: auto;
background: transparent;
display: table-cell;
padding: 5px;
vertical-align: middle;
}
.show-desktop {
width: 6px;
padding: 0;
background: var(--themecolor);
opacity:.9;
height: 100%;
position: relative;
display: inline-block;
order: 9999;
right: 0;
top: 0;
border-radius: 0;
margin-right: 0;
}
}
}
#startmenu {
display: none;
z-index: 99999;
}
#icons {
padding: 15px;
position: absolute;
display: flex;
overflow: visible;
top: 0;
left: 0;
width: auto;
height: calc(100% - 65px);
justify-content: flex-start;
flex-direction: column;
flex-wrap: wrap;
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
button {
transition: .2s;
position: relative;
margin: 3px;
overflow: hidden;
width: 70px;
height: 100px;
display: flex;
justify-content: start;
background-color: transparent;
flex-flow:column;
border: 0;
padding: 0;
p {
color:#fff;
margin-bottom:0;
margin-top:3px;
}
&:hover,
&:focus-visible {
background-color: var(--hovercolor);
overflow: visible;
}
}
img {
position: relative;
left: 0;
top: 0;
margin: 0;
padding:4px;
box-sizing: border-box;
display: block;
height: auto;
width: inherit;
object-fit: contain;
min-height:70%;
}
p {
left: 0;
top: 70px;
text-align: center;
font-size: 0.85em;
word-wrap: break-word;
position: absolute;
display: block;
width: 100%;
}
}
.aboutthisversion {
position: absolute;
bottom: 40px;
right: 20px;
text-align: right;
font-size: 1.05em;
line-height:1.4;
a {
color:#ffffffcc;
}
}
.start_menu {
overflow: visible !important;
z-index: 99999999 !important;
* {
border: none;
border-radius: 0;
overflow: hidden !important;
z-index: 999999999 !important;
}
.headbar {
display: none;
}
iframe {
top: auto;
position: absolute;
bottom: -35px;
height: calc(100% + 35px);
background-color: transparent;
}
}
@media (max-width:350px) {
#icons {
padding: 5px;
position: absolute;
display: flex;
overflow: visible;
top: 0;
left: 0;
width: 90%;
justify-content: flex-start;
flex-direction: column;
flex-wrap: wrap;
button {
position: relative;
margin: 2px;
overflow: hidden;
width: 30px;
height: 30px;
display: inline-block;
}
img {
height: 30px;
width: 30px;
}
p {
display: none;
}
}
.program {
position: absolute;
display: none;
min-width: 100px;
min-height: 40px;
background-color: transparent;
border-top-left-radius: 10px;
border-top-right-radius: 10px;
&.maximized {
height: calc(100% - 17.5px);
width: 100%;
}
iframe {
transform: scale(.5, .5) translate(-50%, -50%);
height: calc(200% - 30px);
width: calc(200%);
top: 15px;
}
.headbar {
position: relative;
top: 0;
background-color: var(--themecolor);
height: 15px;
width: 100%;
padding-right: 1px;
border: none;
.max,
.close {
height: 12px;
width: 12px;
padding: 0;
top: 0;
position: absolute;
font-size: 0;
}
.close {
right: 0;
}
.max {
right: 12px;
}
}
}
.start_menu {
iframe {
height: calc(200% + 36px);
background-color: transparent;
}
}
#taskbar {
transform: scale(.5, .5) translate(-50%, 50%);
width: calc(200%);
}
.progtitle {
top: -6px;
margin: 0;
font-size: 8px;
height: 8px;
}
.progicon {
height: 13px;
margin: 1px;
}
.aboutthisversion {
font-size:.7em;
margin:0;
}
#background img {
width:25px;
height:25px;
bottom:25px;
left:10px;
}
}
@media (prefers-color-scheme:dark) {
.program {
iframe {
// background-color: var(--black);
}
}
}