tw.css

@tailwind base;
@tailwind components;
@tailwind utilities;
html,
body {
  margin: 0 !important;
  padding: 0;
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
html,
body {
  @apply overflow-y-clip;
}

.desktop {
  @apply p-1;
}

container {
  @apply h-[100svh] w-full overflow-y-clip;
}
window {
  @apply absolute min-w-[200px] min-h-[72px] w-fit h-fit  bg-black shadow-md shadow-black/50 border border-white/20 overflow-y-clip;
}
window .minbtn {
  @apply hover:bg-[#1A1A1A] duration-[250ms] h-[28px] relative top-[1px] w-[45px] flex items-center justify-center cursor-default;
}
window .maxbtn {
  @apply hover:bg-[#1A1A1A] duration-[250ms] h-[28px] relative top-[1px] w-[45px] flex items-center justify-center cursor-default;
}
window name {
  @apply text-sm cursor-default;
}
window actions {
  @apply ml-auto h-[29px] flex;
}
window .closebtn {
  @apply hover:bg-[#E81123] duration-[250ms] h-[28px] relative top-[1px] w-[45px] flex items-center justify-center cursor-default;
}
window .maxico,
.mexico {
  @apply w-[10px] h-[10px] border;
} /* mexico */
window button {
  @apply text-[13px] px-[18px] py-[2px] bg-[#E1E1E1] text-black  border border-[#ADADAD] hover:border-[#0078D7] hover:bg-[#E5F1FB] active:border-[#005499] active:bg-[#CCE4F7];
}
window checkbox {
  @apply hover:border-[#0078D7] w-[12px] h-[12px] border inline-block border-[#333] bg-white;
}
window radio {
  @apply hover:border-[#0078D7] w-[12px] h-[12px] border border-[#333] bg-white rounded-full inline-flex p-[2px];
}
window progressbar {
  @apply inline-block bg-[#E6E6E6] border border-[#BCBCBC];
}
progressbar fill {
  @apply h-full bg-[#06B025] block;
}
.marquee {
  @apply overflow-hidden;
}
window input,
window textarea {
  @apply resize-none border border-[#7A7A7A] bg-white rounded-none text-black focus:outline-none text-[14px] hover:border-black duration-500 focus:border-[#005499];
}
window content {
  @apply w-full h-[94%] block relative py-1;
}
window nav {
  @apply border-b border-white/20 h-[29px] flex items-center m-0;
}
window icon {
  @apply w-[28px] h-[28px] flex p-[6px] py-[7px];
}
* {
  color-scheme: dark;
  font-family: "Segoe UI", "SegoeUI", "Roboto", sans-serif;
} /* If webfont.css is imported, the fallback Segoe UI font can be used. */
.checked {
  background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAsAAAALCAMAAACecocUAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAASUExUReLi4khISLi4uGtra/b29gAAALQ13yIAAAAGdFJOU///////ALO/pL8AAAAJcEhZcwAADsMAAA7DAcdvqGQAAAA1SURBVBhXbcw5EgAwCAJAUPn/l+ORTBqplgKgn9WgPYMe10XBmLUphBPD3GYZ1k/4cP+XdACBmQH2GM7PVAAAAABJRU5ErkJggg==);
  background-size: 10px;
}
.dot {
  background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAsAAAALCAMAAACecocUAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAeUExURbq6ulVVVTg4OLy8vDMzM7u7u7m5uVRUVDc3NwAAACteRvUAAAAKdFJOU////////////wCyzCzPAAAACXBIWXMAAA7DAAAOwwHHb6hkAAAANUlEQVQYV2XIAQoAIAhDUWdl7f4XzgYh1GfgQ2P12uDQJVs/JXKQIbvs33/IITPmmkn5ViY31SoDTdFQWT8AAAAASUVORK5CYII=);
  background-size: 10px;
}
.marquee fill {
  animation: marquee 3s linear infinite;
}
@keyframes marquee {
  0% {
    position: relative;
    width: 33%;
    left: -50%;
  }
  100% {
    position: relative;
    width: 33%;
    left: 100%;
  }
}
.closing {
  animation: closing 0.36s;
}
@keyframes closing {
  0% {
    transform: scale(1);
    opacity: 1;
  }
  100% {
    transform: scale(0.976);
    opacity: 0;
  }
}
@keyframes opening {
  0% {
    transform: scale(0.976);
    opacity: 0;
  }
  100% {
    transform: scale(1);
    opacity: 1;
  }
}
window {
  animation: opening 0.36s;
}
.meta {
  @apply w-[48px] bg-[#293357]/30 hover:bg-[#293357]/80 duration-200;
  background-image: url("webwin-logo-s.png");
  background-size: cover;
  background-repeat: none;
  background-position: center;
  padding: 6px;
}
search,
.search-bar {
  @apply w-[344px] ring-1 hover:ring-2 hover:ring-[#777]  bg-[#333] hover:bg-[#3f3f3f] text-[#DCDCDC] ring-[#5C5C5C] flex text-center text-[15px] align-middle items-center overflow-clip pl-[38px] font-[400];
  background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACcAAAAmCAMAAABwIXKiAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAA/UExURUxMTKmpqeTk5Pn5+WlpafDw8KGhoV1dXT09PWdnZ/j4+Nzc3Kenp0RERGZmZu7u7qioqGVlZe3t7djY2AAAAFQELxsAAAAVdFJOU///////////////////////////ACvZfeoAAAAJcEhZcwAADsMAAA7DAcdvqGQAAACKSURBVDhP7ZE5EoUgEAUBZXFDUe5/Vi18gTDy/2Qa2AlN0UWxiMjj6+55USekapQsFmjXamOdNbrF/IR0Qndp7HS2RDppIEZCEqRTFmIVJEG63kFcA0mQbmDuNzLPNzHv62fW+/nZT8vQ//uPI4MV5F2oZXkX1gAjXLsfWdZt9ay8R5Wvu+eZLsYd4y1v5g7fUAYAAAAASUVORK5CYII=);
  background-repeat: no-repeat !important;
}
taskbar action-center {
  background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAMAAAAoLQ9TAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAYUExURf////Ly8khJS0ZHSaqqrKqqq6urrAAAAAfn9wkAAAAIdFJOU/////////8A3oO9WQAAAAlwSFlzAAAOwwAADsMBx2+oZAAAADFJREFUKFNjwATsKGBICYAAIxM7OzMjhA0WZ2FkZmZkBTOhOlgYoXyYADsrG5hiZwcAyaEFbxn9NMoAAAAASUVORK5CYII=);
  background-repeat: no-repeat !important;
  width: 40px;
  height: 40px;
  max-width: 40px;
  max-height: 40px;
  min-width: 40px;
  min-height: 40px;
  background-position: center;
}
taskbar action-center:active {
  background-color: rgba(255, 255, 255, 0.2);
}
start-menu.slideIn + taskbar {
  backdrop-filter: none !important;
  background: red !important;
}
.removeFilters {
  backdrop-filter: none !important;
}
taskbar actions {
  @apply ml-auto float-right mr-1 border-r border-r-[#78797A];
}
taskbar action-center {
  @apply mr-2 block hover:bg-white/10;
}
taskbar clock {
  line-height: 18px;
  font-size: 12px;
  @apply hover:bg-white/10 text-[#E6E6E6] text-center;
}
taskbar {
  @apply fixed bottom-0 w-[100svw]  left-0 h-[40px] bg-gray-900/70 z-[999999999] flex-row flex;
  backdrop-filter: blur(24px);
}
.slideIn {
  animation: 0.22s slideIn forwards;
}
.slideOut {
  animation: 0.22s slideOut forwards;
}
.reset {
  animation: none none none none none none !important;
  animation-play-state: paused !important;
}
@keyframes slideIn {
  0% {
    display: none;
    min-height: 0px;
    opacity: 0;
    position: absolute;
    bottom: -9999px;
    left: 0;
    max-height: 0px;
  }
  0.01% {
    display: flex;
    min-height: 0svh;
    opacity: 0;
    position: absolute;
    bottom: 0px;
    left: 0;
    max-height: fit-content;
  }
  1% {
    display: flex;
    min-height: 14svh;
    opacity: 0;
    position: absolute;
    bottom: 18px;
    left: 0;
    max-height: fit-content;
  }
  to {
    display: flex;
    min-height: 50svh;
    opacity: 1;
    position: absolute;
    bottom: 40px;
    left: 0;
    max-height: fit-content;
  }
}
@keyframes slideOut {
  from {
    min-height: 50svh;
    opacity: 1;
    position: absolute;
    bottom: 40px;
    left: 0;
    display: flex;
  }
  66% {
    min-height: 9svh;
    opacity: 0;
    position: absolute;
    bottom: 18px;
    left: 0;
    display: flex;
  }
  99% {
    min-height: 9svh;
    opacity: 0;
    position: absolute;
    bottom: 18px;
    left: 0;
    display: flex;
  }
  to {
    min-height: 0px;
    opacity: 0;
    position: absolute;
    bottom: -9999px;
    left: 0;
    max-height: 0px;
    display: none;
  }
}
javascript {
  display: none !important;
}
start-menu div {
  max-height: 76svh;
  overflow-y: auto;
}
.icon_menu {
  background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABIAAAAPCAMAAADeWG8gAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAGUExURf///wAAAFXC034AAAACdFJOU/8A5bcwSgAAAAlwSFlzAAAOwwAADsMBx2+oZAAAABlJREFUKFNjYMQAxAoxoAGiNWKAwWkWIyMAfLAA3x94/RYAAAAASUVORK5CYII=);
  background-repeat: no-repeat;
  background-position: center;
  background-size: 20px;
}
start-menu {
  cursor: default !important;
  @apply hidden bg-gray-900/80  min-h-[10svh] w-[320px] px-4 pl-0;
  backdrop-filter: blur(24px) brightness(0.6) !important;
  --tw-background-blur: 0 !important;
  padding-bottom: 12px;
}
taskbar item {
  @apply hover:bg-white/10 active:bg-white/5 active:duration-75 duration-200 w-[48px] h-[40px] inline-flex justify-center items-center align-middle p-[11px] aspect-square;
}
taskbar item img {
  @apply aspect-square;
}
notification icon {
  @apply mr-2 w-[16px] h-[16px] inline-flex bg-[#5F6368];
  background-image: url(webwin-logo-xs.png);
  background-size: cover;
}
@keyframes notifSlideIn {
  from {
    position: relative;
    right: -360px;
    opacity: 0;
  }
  to {
    position: relative;
    right: 0px;
    opacity: 1;
  }
}
notification {
  animation: 0.67s notifSlideIn;
  transition: opacity 0.33s;
  @apply mb-1 z-[999] bg-[#292929]/60 backdrop-blur-md w-[364px] min-h-[132px] block py-5 px-4;
}
notification .notifrow {
  @apply inline-flex flex-row items-center align-middle pb-4 w-full;
}
notification author {
  @apply text-xs inline-flex;
}
notification .notifclosebtn {
  @apply text-xs text-[#9F9F9F] inline-block justify-end ml-auto float-right font-bold;
}
notification h1 {
  @apply font-semibold text-[16px] leading-5;
}
notification p {
  @apply text-[#A7A7A7] text-[16px] leading-5 mb-3;
}
notification footer {
  @apply text-[#A7A7A7] text-xs;
}
start-menu item {
  padding-left: 3px !important;
}
.startmenuico {
  background-size: 24px;
  background-repeat: none;
  background-position: center;
  width: 24px;
  height: 24px;
}
itemcat {
  @apply text-xs w-full h-[36px] flex flex-row align-middle ml-0 pl-1 justify-start items-center float-left mr-auto;
}
start-menu item {
  @apply text-sm w-full h-[36px] hover:bg-gray-400/20 duration-75 flex flex-row align-middle ml-0 pl-1 justify-start float-left mr-auto;
}
.break {
  @apply h-[60px] w-full block;
}
.notificationContainer {
  @apply overflow-x-clip absolute bottom-11 right-1 float-right ml-auto h-[80svh] min-h-[80svh] min-w-[120px] flex flex-col-reverse;
}
desktop-icon {
  text-shadow: 1px 1px 3px black;
  @apply cursor-pointer px-2 duration-75 border border-transparent text-xs  hover:border-[#585F66]/65 hover:bg-[#202A33]/40 min-h-[40px] max-h-[90px] max-w-[80px] !h-fit py-1 flex flex-col justify-center align-middle items-center;
}

clock {
  @apply px-2;
}

.settingsItem:active div.c {
  transform: scale(0.97);
  transition: all 200ms;
}
.settingsItem div.c {
  transform: scale(1);
  transition: all 200ms;
}

.settingsBtn {
  @apply active:bg-[#4A4A4A] active:duration-75 text-sm align-middle items-center flex flex-row py-3 hover:bg-[#303030] hover:duration-150 duration-200 px-2 w-full;
}
.settingsBtn.active {
  transition: background-position 0;
  background-image: url("icons/settings/border_piece.png");
  background-position-y: center;
  background-repeat: no-repeat;
}

metro-slider {
  @apply flex flex-row items-center rounded-full w-[44px] border-[2px] h-5 border-[#EEE] duration-300;
  background-image: url("icons/metro-slider_dot.png");
  background-size: 10px;
  background-position-y: center;
  background-position-x: 10%;
  display: inline-block;
  background-repeat: no-repeat;
  transition: background-position 200ms;
}
metro-slider.active {
  @apply flex flex-row items-center rounded-full w-[44px] border-[2px] h-5  bg-[#0078D7] border-[#0078D7];
  transition: background-position 200ms;
  background-image: url("icons/metro-slider_dot.png");
  background-size: 10px;
  background-position-y: center;
  background-position-x: 90%;
  display: inline-block;
  background-repeat: no-repeat;
}
metro-slider::after {
  content: "Off";
}
metro-slider.active::after {
  content: "On";
}
metro-slider::after {
  margin-left: 48px;
  position: relative;
  bottom: 2px;
  display: inline-block;
}