* {
box-sizing: border-box;
}
html,
body {
margin: 0;
width: 100%;
height: 100%;
font-family: "Tahoma", "Arial", sans-serif;
overflow: hidden;
}
button {
font: inherit;
}
.hidden,
[hidden] {
display: none !important;
}
/* ==================================================
CUSTOM CURSORS
================================================== */
body {
cursor:
url("assets/cursors/arrow.png") 0 0,
auto;
}
button,
a,
.desktop-icon {
cursor:
url("assets/cursors/pointer.png") 8 2,
pointer;
}
/* ==================================================
BOOT
================================================== */
#boot-screen {
position: fixed;
inset: 0;
z-index: 9999;
display: flex;
align-items: center;
justify-content: center;
background: #000;
color: #00ff57;
padding: 25px;
}
.boot-terminal {
width: min(700px, 90%);
font-family: "Courier New", monospace;
}
.boot-title {
color: #fff;
font-size: 24px;
font-weight: bold;
letter-spacing: 2px;
}
.boot-subtitle {
color: #777;
font-size: 12px;
margin-top: 5px;
}
.boot-divider {
color: #444;
margin: 18px 0;
white-space: nowrap;
overflow: hidden;
}
.boot-line {
margin: 9px 0;
font-size: 14px;
}
.boot-ok {
color: #00ff57;
font-weight: bold;
}
#skip-boot {
margin-top: 30px;
padding: 8px 14px;
background: transparent;
color: #888;
border: 1px solid #444;
font-family: "Courier New", monospace;
cursor: pointer;
}
#skip-boot:hover {
color: #fff;
border-color: #999;
}
/* ==================================================
DESKTOP
================================================== */
#desktop {
position: relative;
width: 100%;
height: 100vh;
overflow: hidden;
background-color: #3278c8;
background-image:
linear-gradient(
rgba(35, 90, 180, 0.08),
rgba(35, 90, 180, 0.08)
),
url("assets/wallpapers/webcore-wallpaper.jpg");
background-size: cover;
background-position: center;
background-repeat: no-repeat;
}
#desktop::before {
content: "";
position: absolute;
inset: 0;
z-index: 1;
pointer-events: none;
background:
repeating-linear-gradient(
to bottom,
rgba(255,255,255,.025) 0,
rgba(255,255,255,.025) 1px,
rgba(0,0,0,.025) 2px,
rgba(0,0,0,.025) 3px
);
}
/* ==================================================
DESKTOP ICONS
================================================== */
.desktop-icons {
position: absolute;
top: 24px;
left: 18px;
z-index: 5;
display: grid;
gap: 13px;
}
.desktop-icon {
width: 100px;
padding: 5px 3px;
color: #fff;
background: transparent;
border: 1px solid transparent;
font-size: 12px;
text-shadow: 1px 1px 2px #000;
cursor: pointer;
}
.desktop-icon:hover,
.desktop-icon:focus {
background: rgba(0,40,180,.35);
border: 1px dotted #fff;
outline: none;
}
/* ==================================================
PIXEL ICONS
================================================== */
.desktop-icon-image {
display: block;
width: 48px;
height: 48px;
margin: 0 auto 5px;
object-fit: contain;
image-rendering: pixelated;
filter:
drop-shadow(
1px 1px 0 rgba(0, 0, 0, 0.75)
);
}
/* ==================================================
WINDOWS
================================================== */
.window {
position: absolute;
top: 100px;
left: 220px;
z-index: 10;
display: none;
width: min(580px, calc(100vw - 40px));
background: #c0c0c0;
border-top: 2px solid #fff;
border-left: 2px solid #fff;
border-right: 2px solid #333;
border-bottom: 2px solid #333;
box-shadow:
3px 3px 0 rgba(0,0,0,.35);
}
.window.active {
display: block;
}
.browser-window {
width: min(690px, calc(100vw - 40px));
}
.window-titlebar {
height: 29px;
display: flex;
align-items: center;
justify-content: space-between;
padding-left: 7px;
color: #fff;
background:
linear-gradient(
90deg,
#001f80,
#1084d0
);
font-size: 13px;
font-weight: bold;
cursor:
url("assets/cursors/arrow.png") 0 0,
move;
user-select: none;
}
.window.inactive .window-titlebar {
background:
linear-gradient(
90deg,
#7f7f7f,
#b4b4b4
);
}
.window-buttons {
display: flex;
}
.window-buttons button {
width: 28px;
height: 24px;
margin-right: 3px;
background: #c0c0c0;
border-top: 2px solid #fff;
border-left: 2px solid #fff;
border-right: 2px solid #333;
border-bottom: 2px solid #333;
color: #000;
font-weight: bold;
cursor: pointer;
}
.window-buttons button:active {
border-top: 2px solid #333;
border-left: 2px solid #333;
border-right: 2px solid #fff;
border-bottom: 2px solid #fff;
}
/* ==================================================
WINDOW MENUS
================================================== */
.window-menu {
display: flex;
gap: 16px;
padding: 5px 8px;
background: #c0c0c0;
border-bottom: 1px solid #777;
color: #111;
font-size: 11px;
}
/* ==================================================
BROWSER
================================================== */
.browser-toolbar {
display: flex;
align-items: center;
gap: 5px;
padding: 5px;
background: #c0c0c0;
border-bottom: 2px groove #ddd;
}
.fake-browser-button {
min-width: 31px;
height: 27px;
background: #c0c0c0;
border: 2px outset #ddd;
cursor: default;
}
.browser-address {
flex: 1;
display: flex;
align-items: center;
gap: 5px;
font-size: 10px;
}
.address-field {
flex: 1;
padding: 4px 5px;
background: #fff;
border: 2px inset #ddd;
font-family: Arial, sans-serif;
font-size: 11px;
overflow: hidden;
white-space: nowrap;
}
/* ==================================================
WINDOW CONTENT
================================================== */
.window-content {
min-height: 240px;
max-height: 62vh;
padding: 18px;
overflow: auto;
background: #efefef;
color: #111;
}
.window h1,
.window h2 {
margin-top: 0;
color: #000080;
font-family: "Times New Roman", serif;
}
.small-text {
color: #555;
font-size: 12px;
}
.window-statusbar {
display: flex;
justify-content: space-between;
padding: 4px 7px;
background: #c0c0c0;
border-top: 2px groove #ddd;
color: #222;
font-size: 10px;
}
/* ==================================================
WELCOME PAGE
================================================== */
.welcome-content {
background: #fff;
}
.homepage-header {
display: flex;
align-items: center;
justify-content: center;
gap: 14px;
text-align: center;
}
.homepage-header h1 {
margin-bottom: 3px;
font-size: 30px;
color: #000080;
text-shadow:
2px 2px #8ad7ff;
}
.homepage-subtitle {
margin-top: 0;
color: #555;
font-size: 11px;
}
.homepage-star {
color: #ff00cc;
font-size: 27px;
animation:
homepageStarBlink
.8s
steps(2)
infinite;
}
.welcome-columns {
display: grid;
grid-template-columns:
1fr 160px;
gap: 17px;
margin-top: 15px;
}
.welcome-main {
border-right: 1px dotted #999;
padding-right: 15px;
}
.welcome-navigation {
display: grid;
grid-template-columns:
repeat(2, 1fr);
gap: 7px;
margin: 16px 0;
}
.welcome-navigation button {
padding: 7px;
color: #000080;
background: #c0c0c0;
border: 2px outset #eee;
font-weight: bold;
cursor: pointer;
}
.welcome-navigation button:active {
border: 2px inset #eee;
}
.homepage-divider {
overflow: hidden;
color: #ff00cc;
white-space: nowrap;
}
.homepage-message {
font-family: "Comic Sans MS", cursive;
font-size: 12px;
}
.welcome-sidebar {
display: flex;
flex-direction: column;
gap: 8px;
}
.sidebar-card {
padding: 8px;
background: #ffffcc;
border: 1px solid #999;
font-size: 10px;
text-align: center;
}
.sidebar-online {
margin-top: 5px;
color: green;
font-weight: bold;
}
.tiny-card {
background: #000080;
color: #fff;
font-family: "Times New Roman", serif;
}
/* ==================================================
MARQUEE
================================================== */
marquee {
padding: 6px;
color: #ffff00;
background: #000080;
border: 1px solid #fff;
font-family: "Courier New", monospace;
font-size: 12px;
}
/* ==================================================
ABOUT
================================================== */
.status-box {
display: inline-block;
margin-top: 8px;
padding: 8px;
background: #fff;
border: 2px inset #ddd;
}
.online {
color: green;
font-weight: bold;
}
.about-footer {
margin-top: 18px;
padding-top: 10px;
border-top: 1px dotted #888;
font-size: 11px;
}
/* ==================================================
FILE GRID
================================================== */
.file-grid {
display: grid;
grid-template-columns:
repeat(4, 1fr);
gap: 15px;
}
.file {
padding: 8px;
text-align: center;
}
.file:hover {
color: #fff;
background: #000080;
}
.mini-file-icon {
display: block;
margin-bottom: 5px;
font-size: 32px;
}
.file p {
margin: 4px 0 0;
font-size: 11px;
}
/* ==================================================
PROJECTS
================================================== */
.project-card {
margin-bottom: 10px;
padding: 12px;
background: #fff;
border: 2px inset #ddd;
}
.project-card-header {
display: flex;
align-items: center;
gap: 8px;
}
.project-card h3 {
margin: 0;
}
.project-card.disabled {
opacity: .55;
}
.tag {
display: inline-block;
padding: 3px 6px;
color: #fff;
background: #000080;
font-size: 10px;
}
/* ==================================================
GALLERY
================================================== */
.gallery-grid {
display: grid;
grid-template-columns:
repeat(2, 1fr);
gap: 10px;
}
.gallery-placeholder {
height: 120px;
display: flex;
align-items: center;
justify-content: center;
background:
repeating-linear-gradient(
45deg,
#ddd,
#ddd 10px,
#eee 10px,
#eee 20px
);
border: 2px inset #ddd;
color: #555;
font-family: "Courier New", monospace;
font-size: 10px;
}
/* ==================================================
LINKS
================================================== */
.old-links {
padding-left: 25px;
}
.old-links li {
margin-bottom: 12px;
}
.old-links a {
color: #0000ee;
text-decoration: underline;
}
.old-links a:visited {
color: #551a8b;
}
.old-links a:hover {
color: red;
background: yellow;
}
.under-construction {
margin-top: 30px;
padding: 9px;
background: #000;
color: #ffff00;
border: 2px dashed #ffff00;
text-align: center;
font-family: monospace;
}
/* ==================================================
SYSTEM INFO
================================================== */
.system-info {
background: #000;
color: #00ff57;
font-family: "Courier New", monospace;
}
.system-info pre {
margin: 0;
white-space: pre-wrap;
line-height: 1.5;
}
/* ==================================================
CLUTTER
================================================== */
.webcore-clutter {
position: absolute;
inset: 0;
z-index: 2;
pointer-events: none;
}
.visitor-box {
position: absolute;
right: 35px;
top: 28px;
padding: 7px;
background: #efefef;
border: 2px outset #fff;
box-shadow:
3px 3px 0 rgba(0,0,0,.25);
text-align: center;
font-family: "Courier New", monospace;
}
.visitor-label {
margin-bottom: 4px;
color: #111;
font-size: 9px;
}
.visitor-counter {
padding: 4px 7px;
background: #000;
color: #00ff55;
letter-spacing: 2px;
font-size: 12px;
}
.best-viewed {
position: absolute;
right: 42px;
bottom: 82px;
padding: 5px 8px;
background: #000080;
color: #fff;
border: 2px outset #ddd;
text-align: center;
font-family: "Times New Roman", serif;
font-size: 10px;
}
.web-badge {
position: absolute;
width: 88px;
height: 31px;
display: flex;
align-items: center;
justify-content: center;
border: 2px outset #fff;
font-family: Arial, sans-serif;
font-size: 9px;
font-weight: bold;
line-height: 10px;
text-align: center;
}
.badge-html {
right: 150px;
bottom: 83px;
background:
linear-gradient(
#ff9900,
#ff4400
);
color: #fff;
}
.fake-banner {
position: absolute;
top: 18px;
left: 50%;
transform: translateX(-50%);
padding: 4px 15px;
background:
linear-gradient(
90deg,
#ff00cc,
#ffff00,
#00ffff
);
border: 3px outset #fff;
color: #000080;
font-family: "Comic Sans MS", cursive;
font-size: 12px;
font-weight: bold;
white-space: nowrap;
animation:
webBannerFlash
1.2s
steps(2)
infinite;
}
/* ==================================================
NOTE
================================================== */
.desktop-note {
position: absolute;
right: 55px;
bottom: 145px;
z-index: 3;
width: 180px;
padding: 15px;
background: #fff88f;
box-shadow:
4px 4px rgba(0,0,0,.25);
color: #222;
transform: rotate(3deg);
font-family: "Comic Sans MS", cursive;
font-size: 11px;
}
/* ==================================================
PLAYER
================================================== */
#player {
position: absolute;
right: 25px;
top: 255px;
z-index: 4;
width: 190px;
padding: 5px;
background: #202020;
color: #7fff00;
border: 3px ridge #999;
box-shadow:
3px 3px rgba(0,0,0,.25);
font-family: monospace;
}
.player-title {
padding: 4px;
background: #444;
color: #fff;
font-size: 10px;
}
.player-screen {
margin-top: 5px;
padding: 10px;
background: #071000;
color: #72ff35;
font-size: 10px;
}
.player-number {
color: #ffff00;
}
.player-progress {
height: 7px;
margin: 6px 0;
background: #111;
border: 1px inset #555;
}
.player-progress-fill {
width: 47%;
height: 100%;
background: #79ff23;
}
.player-controls {
color: #fff;
text-align: center;
}
/* ==================================================
START MENU
================================================== */
#start-menu {
position: absolute;
left: 3px;
bottom: 42px;
z-index: 2000;
display: flex;
width: 245px;
min-height: 310px;
background: #c0c0c0;
border-top: 2px solid #fff;
border-left: 2px solid #fff;
border-right: 2px solid #222;
border-bottom: 2px solid #222;
box-shadow:
3px 3px 0 rgba(0,0,0,.35);
}
.start-menu-sidebar {
width: 34px;
display: flex;
align-items: flex-end;
justify-content: center;
padding-bottom: 10px;
background:
linear-gradient(
#7a7a7a,
#222
);
color: #fff;
writing-mode: vertical-rl;
transform: rotate(180deg);
font-weight: bold;
letter-spacing: 2px;
}
.start-menu-items {
flex: 1;
padding: 5px 0;
}
.start-menu-items button {
width: 100%;
display: flex;
align-items: center;
gap: 10px;
padding: 8px 10px;
border: none;
background: transparent;
text-align: left;
cursor: pointer;
}
.start-menu-items button:hover {
background: #000080;
color: #fff;
}
.start-menu-items button span {
width: 25px;
text-align: center;
font-size: 18px;
}
.start-menu-divider {
height: 2px;
margin: 5px 4px;
border-top: 1px solid #777;
border-bottom: 1px solid #fff;
}
/* ==================================================
TASKBAR
================================================== */
#taskbar {
position: absolute;
left: 0;
right: 0;
bottom: 0;
z-index: 999;
height: 42px;
display: flex;
align-items: center;
background: #c0c0c0;
border-top: 2px solid #fff;
box-shadow:
0 -1px #777;
}
#start-button {
height: 34px;
margin-left: 4px;
padding: 0 12px;
background: #c0c0c0;
border-top: 2px solid #fff;
border-left: 2px solid #fff;
border-right: 2px solid #333;
border-bottom: 2px solid #333;
color: #111;
font-weight: bold;
cursor: pointer;
}
#start-button.active,
#start-button:active {
border-top: 2px solid #333;
border-left: 2px solid #333;
border-right: 2px solid #fff;
border-bottom: 2px solid #fff;
}
.start-logo {
margin-right: 5px;
color: #000080;
}
#taskbar-apps {
flex: 1;
display: flex;
gap: 3px;
padding: 0 6px;
overflow: hidden;
}
.taskbar-button {
width: 150px;
max-width: 190px;
height: 31px;
padding: 0 8px;
background: #c0c0c0;
border-top: 2px solid #fff;
border-left: 2px solid #fff;
border-right: 2px solid #333;
border-bottom: 2px solid #333;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
text-align: left;
font-size: 11px;
cursor: pointer;
}
.taskbar-button.active {
background:
repeating-linear-gradient(
45deg,
#d8d8d8,
#d8d8d8 2px,
#c5c5c5 2px,
#c5c5c5 4px
);
border-top: 2px solid #333;
border-left: 2px solid #333;
border-right: 2px solid #fff;
border-bottom: 2px solid #fff;
}
#system-tray {
display: flex;
align-items: center;
gap: 8px;
margin-right: 7px;
padding: 5px 9px;
border: 2px inset #ddd;
font-size: 11px;
}
/* ==================================================
ANIMATION
================================================== */
@keyframes webGlobeSpin {
from {
transform: rotateY(0deg);
}
to {
transform: rotateY(360deg);
}
}
@keyframes webBannerFlash {
0%,
49% {
filter: brightness(1);
}
50%,
100% {
filter: brightness(1.35);
}
}
@keyframes homepageStarBlink {
0%,
49% {
opacity: 1;
}
50%,
100% {
opacity: .25;
}
}
/* ==================================================
GUI POLISH PASS 1
DESKTOP ONLY
================================================== */
@media (min-width: 701px) {
/* ----------------------------------------------
WINDOWS
---------------------------------------------- */
.window {
border-top: 2px solid #ffffff;
border-left: 2px solid #ffffff;
border-right: 2px solid #202020;
border-bottom: 2px solid #202020;
box-shadow:
1px 1px 0 #808080,
4px 4px 0 rgba(0, 0, 0, 0.28);
}
.window.active {
box-shadow:
1px 1px 0 #808080,
5px 5px 0 rgba(0, 0, 0, 0.32);
}
/* ----------------------------------------------
TITLE BAR
---------------------------------------------- */
.window-titlebar {
min-height: 28px;
padding:
2px
3px
2px
7px;
background:
linear-gradient(
90deg,
#000080 0%,
#0054a6 55%,
#1084d0 100%
);
text-shadow:
1px 1px 0 rgba(0, 0, 0, 0.55);
letter-spacing: 0.1px;
}
.window.inactive .window-titlebar {
background:
linear-gradient(
90deg,
#707070,
#a0a0a0
);
color: #eaeaea;
}
/* ----------------------------------------------
WINDOW BUTTONS
---------------------------------------------- */
.window-buttons {
gap: 2px;
}
.window-buttons button {
width: 25px;
height: 22px;
margin: 0;
padding: 0;
background: #c0c0c0;
color: #000;
border-top: 2px solid #fff;
border-left: 2px solid #fff;
border-right: 2px solid #404040;
border-bottom: 2px solid #404040;
font-family:
Arial,
sans-serif;
font-size: 12px;
font-weight: bold;
line-height: 17px;
text-align: center;
}
.window-buttons button:hover {
background: #d4d4d4;
}
.window-buttons button:active {
padding:
2px
0
0
2px;
border-top: 2px solid #404040;
border-left: 2px solid #404040;
border-right: 2px solid #fff;
border-bottom: 2px solid #fff;
}
/* ----------------------------------------------
WINDOW MENUS
---------------------------------------------- */
.window-menu {
background: #c0c0c0;
border-bottom: 1px solid #808080;
padding:
3px
7px;
font-size: 11px;
}
.window-menu span,
.window-menu button {
padding:
2px
5px;
}
.window-menu span:hover,
.window-menu button:hover {
background: #000080;
color: #fff;
}
/* ----------------------------------------------
BROWSER TOOLBAR
---------------------------------------------- */
.browser-toolbar {
background: #c0c0c0;
border-top: 1px solid #fff;
border-bottom: 1px solid #808080;
}
.fake-browser-button {
background: #c0c0c0;
border-top: 2px solid #fff;
border-left: 2px solid #fff;
border-right: 2px solid #555;
border-bottom: 2px solid #555;
}
.fake-browser-button:active {
border-top: 2px solid #555;
border-left: 2px solid #555;
border-right: 2px solid #fff;
border-bottom: 2px solid #fff;
}
.address-field {
background: #fff;
border:
2px
inset
#ddd;
padding:
3px
6px;
}
/* ----------------------------------------------
DESKTOP ICONS
---------------------------------------------- */
.desktop-icon {
border-radius: 0;
transition:
filter 80ms linear;
}
.desktop-icon:hover,
.desktop-icon:focus {
background:
rgba(
0,
32,
160,
0.42
);
border:
1px
dotted
#fff;
}
.desktop-icon:hover .desktop-icon-image {
filter:
brightness(1.08)
drop-shadow(
1px
1px
0
rgba(0,0,0,.75)
);
}
.desktop-icon:active {
transform:
translate(
1px,
1px
);
}
.desktop-icon:focus-visible {
outline:
1px
dotted
#fff;
outline-offset: -3px;
}
/* ----------------------------------------------
TASKBAR
---------------------------------------------- */
#taskbar {
background:
linear-gradient(
#d2d2d2,
#bcbcbc
);
border-top:
2px
solid
#fff;
box-shadow:
0
-1px
0
#777;
}
#start-button {
min-width: 90px;
font-weight: bold;
background: #c0c0c0;
border-top: 2px solid #fff;
border-left: 2px solid #fff;
border-right: 2px solid #444;
border-bottom: 2px solid #444;
}
#start-button:hover {
background: #d0d0d0;
}
#start-button:active {
border-top: 2px solid #444;
border-left: 2px solid #444;
border-right: 2px solid #fff;
border-bottom: 2px solid #fff;
}
.start-logo {
color: #000080;
text-shadow:
1px
1px
0
#fff;
}
/* ----------------------------------------------
TASKBAR APP BUTTONS
---------------------------------------------- */
.taskbar-button {
background: #c0c0c0;
border-top: 2px solid #fff;
border-left: 2px solid #fff;
border-right: 2px solid #555;
border-bottom: 2px solid #555;
text-align: left;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
.taskbar-button:hover {
background: #cdcdcd;
}
.taskbar-button.active {
background:
repeating-linear-gradient(
135deg,
#fff 0,
#fff 1px,
#d7d7d7 1px,
#d7d7d7 3px
);
border-top: 2px solid #555;
border-left: 2px solid #555;
border-right: 2px solid #fff;
border-bottom: 2px solid #fff;
font-weight: bold;
}
/* ----------------------------------------------
SYSTEM TRAY
---------------------------------------------- */
#system-tray {
background:
#c0c0c0;
border-top:
2px
solid
#777;
border-left:
2px
solid
#777;
border-right:
2px
solid
#fff;
border-bottom:
2px
solid
#fff;
}
/* ----------------------------------------------
START MENU
---------------------------------------------- */
#start-menu {
box-shadow:
4px
4px
0
rgba(0, 0, 0, 0.35);
}
.start-menu-items button {
min-height: 42px;
padding:
6px
9px;
text-align: left;
border: none;
background:
transparent;
color: #000;
}
.start-menu-items button:hover,
.start-menu-items button:focus {
background: #000080;
color: #fff;
outline: none;
}
.start-menu-sidebar {
background:
linear-gradient(
#808080,
#4d4d4d
);
color: #fff;
text-shadow:
1px
1px
#000;
}
/* ----------------------------------------------
STATUS BOX
---------------------------------------------- */
.status-box {
background: #ffffd5;
border-top: 2px solid #777;
border-left: 2px solid #777;
border-right: 2px solid #fff;
border-bottom: 2px solid #fff;
box-shadow:
1px
1px
0
rgba(0,0,0,.12);
}
.online {
color: #008000;
text-shadow:
0
0
4px
rgba(0, 255, 0, 0.20);
}
/* ----------------------------------------------
SYSTEM INFO TERMINAL
---------------------------------------------- */
.system-info {
background:
radial-gradient(
circle at center,
#071007,
#000 72%
);
box-shadow:
inset
0
0
18px
rgba(0,255,80,.08);
}
.system-info pre {
padding: 6px;
font-size: 12px;
line-height: 1.55;
text-shadow:
0
0
4px
rgba(0,255,87,.25);
}
/* ----------------------------------------------
MUSIC PLAYER
---------------------------------------------- */
#player {
background:
linear-gradient(
#262626,
#151515
);
border:
3px
ridge
#aaa;
box-shadow:
4px
4px
0
rgba(0,0,0,.3);
}
.player-title {
background:
linear-gradient(
#5a5a5a,
#343434
);
border-bottom:
1px
solid
#111;
color: #fff;
letter-spacing:
.5px;
}
.player-screen {
border:
1px
inset
#555;
box-shadow:
inset
0
0
10px
rgba(80,255,0,.08);
}
.player-controls {
margin-top: 5px;
padding: 4px;
color: #fff;
text-align: center;
border-top:
1px
solid
#666;
}
}
/* ==================================================
MY COMPUTER / FILE EXPLORER
================================================== */
#computer-window {
width: 620px;
height: 440px;
}
.explorer-toolbar {
display: flex;
align-items: center;
gap: 4px;
padding: 4px;
background: #c0c0c0;
border-top: 1px solid #fff;
border-bottom: 1px solid #777;
}
.explorer-button {
width: 31px;
height: 28px;
padding: 0;
background: #c0c0c0;
border-top: 2px solid #fff;
border-left: 2px solid #fff;
border-right: 2px solid #444;
border-bottom: 2px solid #444;
font-weight: bold;
}
.explorer-button:active {
border-top: 2px solid #444;
border-left: 2px solid #444;
border-right: 2px solid #fff;
border-bottom: 2px solid #fff;
}
.explorer-address {
flex: 1;
display: flex;
align-items: center;
gap: 5px;
min-width: 0;
font-size: 11px;
}
.explorer-address-field {
flex: 1;
min-width: 0;
padding: 4px 6px;
background: #fff;
border-top: 2px solid #777;
border-left: 2px solid #777;
border-right: 2px solid #fff;
border-bottom: 2px solid #fff;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.computer-content {
background: #fff;
}
.computer-content h2 {
margin-top: 0;
color: #000080;
}
.computer-description {
margin-bottom: 16px;
color: #444;
font-size: 12px;
}
.computer-grid {
display: grid;
grid-template-columns:
repeat(4, 1fr);
gap: 18px 14px;
}
.computer-item {
min-height: 92px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: flex-start;
gap: 7px;
padding: 8px 5px;
background: transparent;
border: 1px solid transparent;
color: #000;
font-family:
Arial,
sans-serif;
font-size: 11px;
text-align: center;
}
.computer-item:hover,
.computer-item:focus {
background: #000080;
color: #fff;
border:
1px dotted
#fff;
outline: none;
}
.computer-item:active {
transform:
translate(
1px,
1px
);
}
.computer-item-icon {
display: block;
font-size: 38px;
line-height: 1;
}
/* ==================================================
GUI POLISH PASS 2
SYSTEM INFO + GUESTBOOK + PLAYER
DESKTOP ONLY
================================================== */
@media (min-width: 701px) {
/* ==================================================
SYSTEM_INFO.EXE
================================================== */
#system-window {
width: min(560px, calc(100vw - 40px));
}
#system-window .window-content {
padding: 0;
}
.system-info {
position: relative;
min-height: 390px;
padding: 16px 18px;
background:
repeating-linear-gradient(
to bottom,
rgba(0, 255, 70, 0.018) 0,
rgba(0, 255, 70, 0.018) 1px,
transparent 1px,
transparent 3px
),
#020702;
color: #39ff69;
border-top: 2px solid #202020;
border-left: 2px solid #202020;
border-right: 2px solid #777;
border-bottom: 2px solid #777;
box-shadow:
inset 0 0 20px rgba(0, 255, 70, 0.08);
font-family:
"Courier New",
monospace;
}
.system-info::before {
content: "C:\\WEBSPACE\\SYSTEM> system_info.exe";
display: block;
margin-bottom: 12px;
padding-bottom: 8px;
border-bottom:
1px dashed
rgba(57, 255, 105, 0.4);
color: #a9ffbd;
font-size: 11px;
}
.system-info pre {
margin: 0;
padding: 0;
color: #39ff69;
font-size: 12px;
line-height: 1.6;
text-shadow:
0 0 4px
rgba(57, 255, 105, 0.3);
}
.system-info::after {
content: "_";
display: inline-block;
margin-top: 8px;
color: #39ff69;
animation:
terminalCursorBlink
0.8s
steps(2)
infinite;
}
/* ==================================================
FIREBASE GUESTBOOK
================================================== */
#guestbook-window .window-content {
background:
#fffef2;
}
.guestbook-header {
margin:
-4px
-4px
16px;
padding:
10px
8px
12px;
border-bottom:
1px solid
#aaa;
text-align: center;
}
.guestbook-header h1 {
margin:
0
0
6px;
color: #000080;
font-family:
"Times New Roman",
serif;
font-size: 28px;
text-shadow:
1px 1px
#a9d5ff;
}
.guestbook-header p {
margin: 0;
color: #333;
font-size: 12px;
}
#guestbook-form {
padding: 12px;
background: #e8e8e8;
border-top:
2px solid
#777;
border-left:
2px solid
#777;
border-right:
2px solid
#fff;
border-bottom:
2px solid
#fff;
}
#guestbook-form label {
display: block;
margin-bottom: 4px;
color: #000080;
font-family:
"Courier New",
monospace;
font-size: 11px;
font-weight: bold;
}
#guestbook-name,
#guestbook-message {
width: 100%;
padding: 6px 7px;
background: #fff;
color: #111;
border-top:
2px solid
#777;
border-left:
2px solid
#777;
border-right:
2px solid
#fff;
border-bottom:
2px solid
#fff;
outline: none;
}
#guestbook-name:focus,
#guestbook-message:focus {
background: #ffffe8;
outline:
1px dotted
#000080;
outline-offset: -4px;
}
#guestbook-message {
min-height: 95px;
}
.guestbook-submit {
margin-top: 3px;
padding:
7px
14px;
background: #c0c0c0;
color: #000080;
border-top:
2px solid
#fff;
border-left:
2px solid
#fff;
border-right:
2px solid
#444;
border-bottom:
2px solid
#444;
font-weight: bold;
}
.guestbook-submit:hover {
background: #d3d3d3;
}
.guestbook-submit:active {
padding:
8px
13px
6px
15px;
border-top:
2px solid
#444;
border-left:
2px solid
#444;
border-right:
2px solid
#fff;
border-bottom:
2px solid
#fff;
}
#guestbook-status {
margin-top: 8px;
min-height: 18px;
font-family:
"Courier New",
monospace;
font-size: 11px;
}
#guestbook-list {
max-height: 230px;
overflow-y: auto;
padding-right: 4px;
}
.guestbook-entry {
position: relative;
margin-bottom: 8px;
padding:
9px
10px;
background:
linear-gradient(
#ffffdd,
#ffffbd
);
border:
1px solid
#999;
box-shadow:
2px
2px
0
rgba(0, 0, 0, 0.10);
}
.guestbook-entry strong {
color: #000080;
font-family:
Arial,
sans-serif;
}
.guestbook-entry p {
margin:
5px
0
0;
color: #222;
}
/* ==================================================
MUSIC PLAYER
================================================== */
#player {
width: 205px;
padding: 6px;
background:
linear-gradient(
#2d2d2d,
#141414
);
border:
3px ridge
#aaa;
box-shadow:
4px
4px
0
rgba(0,0,0,.32);
}
.player-title {
padding:
5px
6px;
background:
linear-gradient(
#616161,
#363636
);
color: #fff;
border-bottom:
1px solid
#111;
font-size: 10px;
font-weight: bold;
letter-spacing:
.6px;
}
.player-screen {
margin-top: 5px;
min-height: 38px;
display: flex;
align-items: center;
padding:
8px
9px;
background:
#031000;
color:
#72ff35;
border:
2px inset
#555;
box-shadow:
inset
0
0
10px
rgba(120,255,40,.10);
font-family:
"Courier New",
monospace;
font-size: 10px;
text-shadow:
0 0
4px
rgba(114,255,53,.4);
}
.player-number {
margin-right: 4px;
color: #ffff00;
}
.player-progress {
height: 8px;
margin:
7px
0;
background: #080808;
border:
1px inset
#777;
}
.player-progress-fill {
height: 100%;
background:
repeating-linear-gradient(
90deg,
#76ff22 0,
#76ff22 5px,
#35b800 5px,
#35b800 7px
);
box-shadow:
0
0
5px
rgba(118,255,34,.45);
}
.player-controls {
padding:
5px
3px;
background: #1b1b1b;
color: #fff;
border-top:
1px solid
#555;
text-align: center;
letter-spacing:
6px;
font-size: 12px;
text-shadow:
1px 1px
#000;
}
/* ==================================================
STATUS BARS
================================================== */
.window-statusbar {
gap: 4px;
padding:
3px
4px;
}
.window-statusbar span {
flex: 1;
padding:
2px
4px;
border-top:
1px solid
#777;
border-left:
1px solid
#777;
border-right:
1px solid
#fff;
border-bottom:
1px solid
#fff;
}
}
/* ==================================================
TERMINAL CURSOR
================================================== */
@keyframes terminalCursorBlink {
0%,
49% {
opacity: 1;
}
50%,
100% {
opacity: 0;
}
}
/* ==================================================
WELCOME HOMEPAGE BANNER
================================================== */
.homepage-banner-img {
position: absolute;
top: 18px;
left: 50%;
width: 280px;
max-width: 280px;
height: auto;
transform: translateX(-50%);
pointer-events: none;
user-select: none;
-webkit-user-drag: none;
}
/* ==================================================
WEBCORE ASSET SIZE STABILIZATION
Keeps the original nostalgia decorations from
rendering at their raw image dimensions.
================================================== */
.webcore-asset {
position: absolute;
display: block;
height: auto;
object-fit: contain;
user-select: none;
-webkit-user-drag: none;
pointer-events: none;
}
.internet-sticker {
top: 145px;
right: 38px;
width: 76px;
height: auto;
pointer-events: auto;
}
.sparkle-gif {
top: 115px;
right: 235px;
width: 54px;
height: auto;
opacity: 0.9;
}
.construction-gif {
left: 50%;
bottom: 54px;
width: 215px;
height: auto;
transform: translateX(-50%);
}
.mail-gif {
top: 180px;
right: 155px;
width: 78px;
height: auto;
transform: rotate(-5deg);
pointer-events: auto;
}
.smiley-sticker {
left: 180px;
bottom: 105px;
width: 66px;
height: auto;
transform: rotate(-9deg);
}
.online-sticker {
right: 245px;
bottom: 78px;
width: 92px;
height: auto;
}
.internet-sticker:hover {
transform: scale(1.08);
filter: brightness(1.15);
}
.mail-gif:hover {
transform:
rotate(-5deg)
scale(1.08);
filter: brightness(1.15);
}
/* ==================================================
RETRO CAMERA DESKTOP ICON
================================================== */
.desktop-icon-camera {
position: relative;
width: 48px;
height: 34px;
display: block;
margin:
7px
auto
12px;
background:
linear-gradient(
#efefef,
#9d9d9d
);
border-top:
2px solid
#fff;
border-left:
2px solid
#fff;
border-right:
2px solid
#333;
border-bottom:
2px solid
#333;
box-shadow:
1px
1px
0
rgba(0, 0, 0, 0.6);
}
.desktop-icon-camera::before {
content: "";
position: absolute;
top: -7px;
left: 7px;
width: 15px;
height: 7px;
background: #bdbdbd;
border-top:
1px solid
#fff;
border-left:
1px solid
#fff;
border-right:
1px solid
#444;
}
.desktop-icon-camera::after {
content: "";
position: absolute;
top: 6px;
right: 5px;
width: 5px;
height: 4px;
background: #ff3030;
border:
1px solid
#6d0000;
}
.desktop-icon-camera-lens {
position: absolute;
top: 5px;
left: 16px;
width: 20px;
height: 20px;
display: block;
background:
radial-gradient(
circle,
#9ce6ff 0 18%,
#164e7a 20% 38%,
#111 40% 62%,
#777 64% 72%,
#222 74%
);
border:
2px solid
#4e4e4e;
border-radius: 50%;
}
/* ==================================================
VISITOR CAMERA WINDOW
================================================== */
#camera-window {
width:
min(
760px,
calc(100vw - 40px)
);
}
.camera-content {
display: grid;
grid-template-columns:
minmax(0, 1.55fr)
minmax(210px, 0.8fr);
gap: 12px;
background: #d4d0c8;
}
.camera-app-shell {
padding: 10px;
background:
linear-gradient(
145deg,
#e8e8e8,
#929292
);
border-top:
2px solid
#fff;
border-left:
2px solid
#fff;
border-right:
2px solid
#404040;
border-bottom:
2px solid
#404040;
box-shadow:
inset
0
0
0
1px
#b6b6b6;
}
.camera-brand-row {
min-height: 37px;
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 10px;
padding:
2px
2px
8px;
}
.camera-brand {
color: #232323;
font-family:
Arial,
sans-serif;
font-size: 15px;
font-weight: 900;
letter-spacing: 1.5px;
}
.camera-model {
margin-top: 2px;
color: #4c4c4c;
font-size: 8px;
letter-spacing: 0.7px;
}
.camera-indicators {
display: flex;
align-items: center;
gap: 5px;
font-family:
"Courier New",
monospace;
font-size: 9px;
}
.camera-indicator {
padding:
2px
4px;
background: #252525;
color: #7bff50;
border:
1px inset
#777;
}
.camera-battery {
color: #173d17;
letter-spacing: -2px;
}
.camera-screen {
position: relative;
width: 100%;
aspect-ratio: 4 / 3;
overflow: hidden;
background: #050505;
border-top:
5px solid
#292929;
border-left:
5px solid
#292929;
border-right:
5px solid
#7c7c7c;
border-bottom:
5px solid
#7c7c7c;
box-shadow:
inset
0
0
16px
rgba(0, 0, 0, 0.95);
}
#camera-video,
#camera-photo-preview {
width: 100%;
height: 100%;
display: block;
object-fit: cover;
background: #050505;
}
#camera-photo-preview {
image-rendering: auto;
}
.camera-screen-message {
position: absolute;
inset: 0;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 8px;
padding: 20px;
background:
radial-gradient(
circle,
#121d12,
#030503 70%
);
color: #9cff9c;
font-family:
"Courier New",
monospace;
font-size: 18px;
font-weight: bold;
text-align: center;
text-shadow:
0
0
5px
rgba(80, 255, 100, 0.45);
}
.camera-screen-message small {
max-width: 300px;
color: #bcbcbc;
font-size: 10px;
font-weight: normal;
line-height: 1.5;
}
.camera-screen-overlay {
position: absolute;
left: 8px;
right: 8px;
bottom: 7px;
display: flex;
justify-content: space-between;
pointer-events: none;
color: #e8ffe8;
font-family:
"Courier New",
monospace;
font-size: 9px;
text-shadow:
1px
1px
2px
#000;
}
.camera-flash {
position: absolute;
inset: 0;
z-index: 20;
pointer-events: none;
background: #fff;
opacity: 0;
}
.camera-flash-active {
animation:
cameraFlashBlink
180ms
ease-out;
}
.camera-controls {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 7px;
padding-top: 10px;
}
.retro-button {
min-height: 28px;
padding:
5px
10px;
background: #c0c0c0;
color: #111;
border-top:
2px solid
#fff;
border-left:
2px solid
#fff;
border-right:
2px solid
#444;
border-bottom:
2px solid
#444;
font-size: 11px;
font-weight: bold;
}
.retro-button:hover:not(:disabled) {
background: #d2d2d2;
}
.retro-button:active:not(:disabled) {
padding:
6px
9px
4px
11px;
border-top:
2px solid
#444;
border-left:
2px solid
#444;
border-right:
2px solid
#fff;
border-bottom:
2px solid
#fff;
}
.retro-button:disabled {
color: #777;
text-shadow:
1px
1px
#fff;
cursor: default;
}
.camera-shutter-button {
color: #6f0000;
}
.camera-save-panel {
min-width: 0;
padding: 11px;
background: #efefef;
border-top:
2px solid
#777;
border-left:
2px solid
#777;
border-right:
2px solid
#fff;
border-bottom:
2px solid
#fff;
}
.camera-save-title {
margin-bottom: 12px;
padding:
5px
6px;
background: #000080;
color: #fff;
font-family:
"Courier New",
monospace;
font-size: 10px;
font-weight: bold;
text-align: center;
}
.camera-save-panel label {
display: block;
margin:
9px
0
4px;
color: #000080;
font-size: 10px;
font-weight: bold;
}
#camera-name,
#camera-caption {
width: 100%;
padding:
5px
6px;
background: #fff;
color: #111;
border-top:
2px solid
#777;
border-left:
2px solid
#777;
border-right:
2px solid
#fff;
border-bottom:
2px solid
#fff;
font:
11px
Arial,
sans-serif;
outline: none;
}
#camera-caption {
min-height: 76px;
resize: vertical;
}
#camera-name:focus,
#camera-caption:focus {
background: #ffffe5;
outline:
1px dotted
#000080;
outline-offset: -4px;
}
.camera-publish-notice {
margin:
10px
0;
padding: 7px;
background: #ffffcc;
border:
1px solid
#888;
color: #333;
font-size: 9px;
line-height: 1.4;
}
.camera-save-button {
width: 100%;
color: #000080;
}
.camera-status {
min-height: 36px;
margin-top: 9px;
padding: 6px;
background: #fff;
color: #333;
border:
1px inset
#ddd;
font-family:
"Courier New",
monospace;
font-size: 9px;
line-height: 1.4;
}
.camera-status-success {
background: #e8ffe8;
color: #006000;
}
.camera-status-error {
background: #fff0f0;
color: #8a0000;
}
/* ==================================================
VISITOR PHOTO ALBUM
================================================== */
.gallery-content {
background: #fffef0;
}
.gallery-header-row {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 12px;
margin-bottom: 10px;
}
.gallery-header-row h2 {
margin-bottom: 4px;
}
.gallery-camera-button {
flex-shrink: 0;
}
.gallery-internet-note {
margin-bottom: 12px;
padding: 7px;
background: #dfefff;
color: #1c1c1c;
border:
1px solid
#7f9db9;
font-family:
"Courier New",
monospace;
font-size: 9px;
}
.visitor-photo-grid {
display: grid;
grid-template-columns:
repeat(
3,
minmax(
0,
1fr
)
);
gap: 12px;
}
.visitor-photo-loading,
.visitor-photo-empty,
.visitor-photo-error {
grid-column:
1 /
-1;
padding: 20px;
background: #efefef;
color: #555;
border:
2px inset
#ddd;
font-family:
"Courier New",
monospace;
font-size: 11px;
text-align: center;
}
.visitor-photo-error {
color: #8a0000;
}
.visitor-photo-card {
min-width: 0;
padding: 6px;
background: #f5f5dc;
color: #111;
border-top:
2px solid
#fff;
border-left:
2px solid
#fff;
border-right:
2px solid
#777;
border-bottom:
2px solid
#777;
box-shadow:
2px
2px
0
rgba(0, 0, 0, 0.16);
text-align: left;
}
.visitor-photo-card:hover,
.visitor-photo-card:focus {
background: #ffffd9;
outline:
1px dotted
#000080;
}
.visitor-photo-thumb {
width: 100%;
aspect-ratio: 4 / 3;
display: block;
object-fit: cover;
background: #111;
border:
2px inset
#aaa;
}
.visitor-photo-file {
margin-top: 6px;
overflow: hidden;
color: #000080;
font-family:
"Courier New",
monospace;
font-size: 9px;
font-weight: bold;
white-space: nowrap;
text-overflow: ellipsis;
}
.visitor-photo-name {
margin-top: 3px;
overflow: hidden;
font-size: 10px;
font-weight: bold;
white-space: nowrap;
text-overflow: ellipsis;
}
.visitor-photo-caption {
min-height: 24px;
margin-top: 3px;
overflow: hidden;
color: #444;
font-size: 9px;
line-height: 1.3;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
}
.visitor-photo-date {
margin-top: 4px;
color: #777;
font-size: 8px;
}
/* ==================================================
PHOTO VIEWER
================================================== */
#photo-viewer-window {
width:
min(
690px,
calc(100vw - 40px)
);
}
.photo-viewer-content {
background: #4f4f4f;
}
.photo-viewer-image-frame {
padding: 9px;
background: #1d1d1d;
border:
2px inset
#777;
text-align: center;
}
#photo-viewer-image {
max-width: 100%;
max-height: 52vh;
display: block;
margin: auto;
background: #000;
}
.photo-viewer-details {
margin-top: 8px;
padding:
8px
10px;
background: #efefef;
color: #111;
border:
2px inset
#ddd;
font-size: 11px;
}
.photo-viewer-details p {
margin:
5px
0;
}
#photo-viewer-date {
color: #666;
font-size: 9px;
}
/* ==================================================
CAMERA RESPONSIVE WINDOW CONTENT
================================================== */
@media (max-width: 800px) {
.camera-content {
grid-template-columns:
1fr;
}
.visitor-photo-grid {
grid-template-columns:
repeat(
2,
minmax(
0,
1fr
)
);
}
}
@media (max-width: 700px) {
#camera-window,
#photo-viewer-window,
#control-panel-window,
#system-dialog-window,
#recycle-bin-window {
width: auto !important;
height: auto !important;
}
.camera-content {
display: block;
}
.camera-save-panel {
margin-top: 10px;
}
.visitor-photo-grid {
grid-template-columns:
repeat(
2,
minmax(
0,
1fr
)
);
}
}
/* ==================================================
CAMERA ANIMATION
================================================== */
@keyframes cameraFlashBlink {
0% {
opacity: 0;
}
15% {
opacity: 0.95;
}
100% {
opacity: 0;
}
}
/* ==================================================
MY COMPUTER — FINISHED NAVIGATION DETAILS
================================================== */
.computer-item.selected {
background: #000080;
color: #fff;
border: 1px dotted #fff;
}
.computer-item-image {
width: 42px;
height: 42px;
display: block;
object-fit: contain;
image-rendering: pixelated;
}
.computer-item-name {
max-width: 100%;
line-height: 1.25;
overflow-wrap: anywhere;
}
#computer-location-status {
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
/* ==================================================
CONTROL PANEL PLACEHOLDER
================================================== */
.control-panel-window {
width: min(520px, calc(100vw - 40px));
}
.control-panel-placeholder {
min-height: 220px;
display: flex;
align-items: flex-start;
gap: 18px;
background: #efefef;
}
.control-panel-placeholder-icon {
flex: 0 0 auto;
width: 58px;
height: 58px;
display: flex;
align-items: center;
justify-content: center;
background: #c0c0c0;
border-top: 2px solid #fff;
border-left: 2px solid #fff;
border-right: 2px solid #555;
border-bottom: 2px solid #555;
font-size: 34px;
}
/* ==================================================
REUSABLE CLASSIC WINDOWS DIALOG
================================================== */
.system-dialog-window {
width: min(410px, calc(100vw - 32px));
z-index: 5000;
}
.system-dialog-body {
display: flex;
align-items: flex-start;
gap: 16px;
min-height: 115px;
padding: 20px 18px 12px;
background: #c0c0c0;
}
.system-dialog-icon {
flex: 0 0 46px;
width: 46px;
min-height: 46px;
display: flex;
align-items: center;
justify-content: center;
color: #111;
font-family: Arial, sans-serif;
font-size: 38px;
font-weight: bold;
line-height: 1;
}
.system-dialog-message {
flex: 1;
min-width: 0;
padding-top: 4px;
color: #111;
font-family: "Tahoma", "Arial", sans-serif;
font-size: 12px;
line-height: 1.45;
white-space: pre-wrap;
}
.system-dialog-actions {
display: flex;
justify-content: center;
gap: 8px;
padding: 4px 14px 14px;
background: #c0c0c0;
}
.system-dialog-actions .retro-button {
min-width: 82px;
}
/* ==================================================
MY COMPUTER DELETE BUTTON
================================================== */
.explorer-delete-button {
color: #7a0000;
font-weight: 900;
}
.explorer-delete-button:disabled {
color: #808080;
}
/* ==================================================
RECYCLE BIN DESKTOP ICON
================================================== */
.desktop-recycle-icon,
.recycle-window-icon {
position: relative;
width: 46px;
height: 48px;
display: block;
margin:
0
auto
5px;
}
.recycle-window-icon {
flex:
0
0
46px;
margin: 0;
}
.recycle-bin-lid {
position: absolute;
top: 4px;
left: 7px;
width: 32px;
height: 8px;
background:
linear-gradient(
#f6f6f6,
#a7a7a7
);
border-top:
2px solid
#fff;
border-left:
2px solid
#fff;
border-right:
2px solid
#444;
border-bottom:
2px solid
#444;
transform:
rotate(-4deg);
transform-origin:
left center;
}
.recycle-bin-can {
position: absolute;
top: 13px;
left: 10px;
width: 28px;
height: 31px;
background:
repeating-linear-gradient(
90deg,
#dfdfdf 0,
#dfdfdf 4px,
#bababa 4px,
#bababa 7px
);
border-top:
2px solid
#fff;
border-left:
2px solid
#fff;
border-right:
2px solid
#404040;
border-bottom:
2px solid
#404040;
transform:
perspective(40px)
rotateX(-3deg);
}
.recycle-bin-paper {
position: absolute;
top: 9px;
left: 18px;
z-index: 2;
color: #fff;
font-family:
"Times New Roman",
serif;
font-size: 18px;
font-weight: bold;
text-shadow:
1px
1px
#000;
}
.desktop-recycle-icon.empty .recycle-bin-paper,
.recycle-window-icon.empty .recycle-bin-paper {
display: none;
}
.desktop-recycle-icon.empty .recycle-bin-lid,
.recycle-window-icon.empty .recycle-bin-lid {
transform:
rotate(0deg);
}
/* ==================================================
RECYCLE BIN WINDOW
================================================== */
#recycle-bin-window {
width:
min(
620px,
calc(100vw - 40px)
);
height: 430px;
}
.recycle-toolbar {
justify-content:
flex-start;
gap: 6px;
padding:
5px;
}
.recycle-bin-content {
background: #fff;
}
.recycle-bin-header {
display: flex;
align-items: center;
gap: 14px;
margin-bottom: 15px;
padding-bottom: 10px;
border-bottom:
1px dotted
#888;
}
.recycle-bin-header h2 {
margin:
0
0
3px;
}
.recycle-bin-header p {
margin: 0;
}
.recycle-file-grid {
display: grid;
grid-template-columns:
repeat(
4,
minmax(
0,
1fr
)
);
gap:
15px
10px;
}
.recycle-file {
min-height: 96px;
display: flex;
flex-direction: column;
align-items: center;
justify-content:
flex-start;
gap: 4px;
padding:
7px
4px;
background: transparent;
color: #111;
border:
1px solid
transparent;
font-family:
Arial,
sans-serif;
font-size: 10px;
text-align: center;
}
.recycle-file:hover,
.recycle-file:focus,
.recycle-file.selected {
background: #000080;
color: #fff;
border:
1px dotted
#fff;
outline: none;
}
.recycle-file-icon {
display: block;
font-size: 36px;
line-height: 1;
}
.recycle-file-name {
max-width: 100%;
overflow-wrap: anywhere;
line-height: 1.2;
}
.recycle-file-details {
color: #666;
font-size: 8px;
}
.recycle-file:hover .recycle-file-details,
.recycle-file:focus .recycle-file-details,
.recycle-file.selected .recycle-file-details {
color: #fff;
}
.recycle-empty-message {
grid-column:
1 /
-1;
min-height: 190px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 8px;
color: #555;
font-size: 11px;
text-align: center;
}
.recycle-empty-big-icon {
font-size: 44px;
}
/* ==================================================
RECYCLE BIN MOBILE
================================================== */
@media (max-width: 700px) {
#recycle-bin-window {
width: auto !important;
height: auto !important;
}
.recycle-file-grid {
grid-template-columns:
repeat(
2,
minmax(
0,
1fr
)
);
}
}
/* ==================================================
CONTROL PANEL
================================================== */
.control-panel-window {
width: min(585px, calc(100vw - 40px));
height: 430px;
}
.control-panel-content {
background: #fff;
}
.control-panel-grid {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 18px 12px;
}
.control-applet {
min-height: 90px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: flex-start;
gap: 5px;
padding: 7px 3px;
background: transparent;
border: 1px solid transparent;
color: #111;
font-family: Arial, sans-serif;
font-size: 10px;
text-align: center;
}
.control-applet:hover,
.control-applet:focus {
background: #000080;
color: #fff;
border: 1px dotted #fff;
outline: none;
}
.control-applet-icon {
font-size: 36px;
line-height: 1;
}
/* ==================================================
PROPERTY SHEETS
================================================== */
.property-sheet-window {
width: min(550px, calc(100vw - 40px));
background: #c0c0c0;
}
.property-tabs {
display: flex;
align-items: flex-end;
gap: 2px;
padding: 8px 8px 0;
background: #c0c0c0;
}
.property-tab {
position: relative;
top: 1px;
padding: 4px 10px 5px;
background: #c0c0c0;
border-top: 2px solid #fff;
border-left: 2px solid #fff;
border-right: 2px solid #555;
border-bottom: 1px solid #c0c0c0;
font: 11px Tahoma, Arial, sans-serif;
}
.property-tab.active {
padding-top: 6px;
z-index: 2;
}
.property-sheet-content {
margin: 0 8px;
min-height: 260px;
background: #c0c0c0;
border-top: 2px solid #fff;
border-left: 2px solid #fff;
border-right: 2px solid #555;
border-bottom: 2px solid #555;
}
.property-sheet-actions {
display: flex;
justify-content: flex-end;
gap: 7px;
padding: 8px;
}
.property-sheet-actions .retro-button {
min-width: 76px;
}
.stacked-property-content {
display: flex;
flex-direction: column;
gap: 12px;
}
.classic-fieldset {
padding: 12px;
border: 1px solid #808080;
}
.classic-fieldset legend {
padding: 0 4px;
}
.classic-text-input,
.property-sheet-content select {
min-height: 25px;
padding: 3px 5px;
background: #fff;
border-top: 2px solid #777;
border-left: 2px solid #777;
border-right: 2px solid #fff;
border-bottom: 2px solid #fff;
font: 11px Tahoma, Arial, sans-serif;
}
.property-checkbox {
display: flex;
align-items: center;
gap: 7px;
}
.property-help {
color: #555;
font-size: 10px;
line-height: 1.4;
}
/* ==================================================
DISPLAY PROPERTIES
================================================== */
.display-properties-content {
display: grid;
grid-template-columns: 220px 1fr;
gap: 18px;
align-items: center;
}
.display-preview-shell {
display: flex;
flex-direction: column;
align-items: center;
}
.display-preview-monitor {
width: 200px;
height: 160px;
padding: 12px;
background: #d3d0c8;
border-top: 4px solid #fff;
border-left: 4px solid #fff;
border-right: 4px solid #444;
border-bottom: 4px solid #444;
}
.display-preview-desktop {
position: relative;
width: 100%;
height: 100%;
overflow: hidden;
background: #3278c8;
background-image:
linear-gradient(rgba(35,90,180,.08), rgba(35,90,180,.08)),
url("assets/wallpapers/webcore-wallpaper.jpg");
background-size: cover;
background-position: center;
}
.display-preview-icon {
position: absolute;
top: 12px;
left: 12px;
width: 18px;
height: 18px;
background: #d0d0d0;
border: 2px solid #fff;
box-shadow: 2px 2px #222;
}
.display-preview-icon.second {
top: 42px;
}
.display-preview-base {
width: 120px;
height: 14px;
background: #bdbdbd;
border-top: 2px solid #fff;
border-left: 2px solid #fff;
border-right: 2px solid #444;
border-bottom: 2px solid #444;
}
.display-controls {
display: flex;
flex-direction: column;
gap: 7px;
}
#desktop.scanlines-off::before {
display: none;
}
/* ==================================================
MOUSE
================================================== */
.mouse-test-folder {
width: 120px;
min-height: 70px;
margin: 12px auto 4px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 4px;
background: #efefef;
border: 1px dotted #555;
font-size: 27px;
}
.mouse-test-folder span {
font-size: 10px;
}
.pointer-trails-enabled {
--pointer-trails-enabled: 1;
}
/* ==================================================
DATE / TIME
================================================== */
.datetime-properties-content {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 18px;
align-items: center;
}
.datetime-calendar-card,
.datetime-clock-card {
min-height: 210px;
padding: 14px;
background: #efefef;
border: 2px inset #ddd;
text-align: center;
}
#datetime-date-large {
margin-top: 35px;
color: #000080;
font-size: 20px;
font-weight: bold;
}
#datetime-day-large {
margin-top: 8px;
font-size: 13px;
}
.analog-clock-face {
position: relative;
width: 110px;
height: 110px;
margin: 0 auto 10px;
border: 4px ridge #999;
border-radius: 50%;
background: #fff;
}
.clock-hand {
position: absolute;
left: 50%;
bottom: 50%;
width: 2px;
transform-origin: 50% 100%;
background: #111;
}
.clock-hand.hour {
height: 30px;
width: 4px;
}
.clock-hand.minute {
height: 42px;
width: 3px;
}
.clock-hand.second {
height: 45px;
background: #a00000;
}
.clock-center-dot {
position: absolute;
left: 50%;
top: 50%;
width: 8px;
height: 8px;
transform: translate(-50%, -50%);
border-radius: 50%;
background: #111;
}
#datetime-time-large {
font-family: "Courier New", monospace;
font-weight: bold;
}
/* ==================================================
SYSTEM / PROGRAMS
================================================== */
.system-properties-content {
display: grid;
grid-template-columns: 90px 1fr;
gap: 18px;
}
.system-logo-box {
width: 72px;
height: 72px;
display: flex;
align-items: center;
justify-content: center;
background: #000080;
color: #fff;
font-size: 42px;
box-shadow: inset 2px 2px #6aa0ff;
}
.system-properties-list {
display: grid;
grid-template-columns: 90px 1fr;
gap: 5px 10px;
}
.system-properties-list dt {
font-weight: bold;
}
.system-properties-list dd {
margin: 0;
}
.programs-properties-content {
display: flex;
flex-direction: column;
gap: 10px;
}
.installed-program-list {
min-height: 160px;
overflow: auto;
background: #fff;
border: 2px inset #ddd;
}
.installed-program {
width: 100%;
display: block;
padding: 7px 8px;
background: transparent;
border: none;
text-align: left;
}
.installed-program.selected {
background: #000080;
color: #fff;
}
/* ==================================================
NOTEPAD
================================================== */
.notepad-window {
width: min(650px, calc(100vw - 40px));
height: 480px;
}
.notepad-menu {
position: relative;
}
.notepad-menu > button {
padding: 0 6px;
background: transparent;
border: none;
font: inherit;
}
.notepad-file-menu {
position: absolute;
top: 100%;
left: 0;
z-index: 30;
min-width: 170px;
padding: 2px;
background: #c0c0c0;
border-top: 2px solid #fff;
border-left: 2px solid #fff;
border-right: 2px solid #333;
border-bottom: 2px solid #333;
}
.notepad-file-menu button {
width: 100%;
display: block;
padding: 5px 20px 5px 8px;
background: transparent;
border: none;
text-align: left;
font: 11px Tahoma, Arial, sans-serif;
}
.notepad-file-menu button:hover {
background: #000080;
color: #fff;
}
.menu-separator {
height: 1px;
margin: 3px;
background: #777;
border-bottom: 1px solid #fff;
}
.notepad-textarea {
flex: 1 1 auto;
width: 100%;
min-height: 360px;
display: block;
resize: none;
padding: 5px;
background: #fff;
color: #111;
border: 2px inset #ddd;
font: 14px "Courier New", monospace;
line-height: 1.35;
outline: none;
}
/* ==================================================
PAINT
================================================== */
.paint-window {
width: min(790px, calc(100vw - 30px));
height: 590px;
}
.paint-content {
display: grid;
grid-template-columns: 72px 1fr;
gap: 6px;
padding: 6px;
background: #a0a0a0;
}
.paint-tools {
display: flex;
flex-direction: column;
gap: 5px;
}
.paint-tool {
min-height: 38px;
background: #c0c0c0;
border-top: 2px solid #fff;
border-left: 2px solid #fff;
border-right: 2px solid #444;
border-bottom: 2px solid #444;
font-size: 20px;
}
.paint-tool.active {
border-top: 2px solid #444;
border-left: 2px solid #444;
border-right: 2px solid #fff;
border-bottom: 2px solid #fff;
background: #dedede;
}
.paint-small-button {
padding-left: 3px;
padding-right: 3px;
font-size: 9px;
}
.paint-canvas-area {
min-width: 0;
min-height: 0;
overflow: auto;
padding: 7px;
background: #808080;
border: 2px inset #aaa;
}
#paint-canvas {
display: block;
max-width: 100%;
height: auto;
background: #fff;
cursor: crosshair;
touch-action: none;
box-shadow: 1px 1px #111;
}
.paint-palette {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 2px;
padding: 5px 8px;
background: #c0c0c0;
border-top: 2px solid #fff;
}
.paint-palette button {
width: 22px;
height: 22px;
padding: 0;
background: var(--swatch);
border: 2px outset #ddd;
}
.paint-current-color {
width: 38px;
height: 28px;
margin-right: 8px;
border: 3px double #111;
background: #000;
}
/* ==================================================
CAMERA POLISH
================================================== */
.camera-screen-overlay {
top: 7px;
bottom: auto;
}
.camera-indicators {
flex-wrap: wrap;
justify-content: flex-end;
}
.camera-indicator {
white-space: nowrap;
}
/* ==================================================
PHOTO VIEWER POLISH
================================================== */
.photo-viewer-toolbar {
display: flex;
align-items: center;
justify-content: center;
gap: 10px;
margin: 8px 0;
}
#photo-viewer-position {
min-width: 82px;
color: #fff;
font-family: "Courier New", monospace;
font-size: 10px;
text-align: center;
}
.photo-viewer-filename {
margin-bottom: 4px;
color: #000080;
font-family: "Courier New", monospace;
font-size: 10px;
font-weight: bold;
}
/* ==================================================
MOBILE — NEW APP WINDOWS
================================================== */
@media (max-width: 700px) {
#display-properties-window,
#mouse-properties-window,
#sounds-properties-window,
#datetime-properties-window,
#system-properties-window,
#internet-properties-window,
#programs-properties-window,
#notepad-window,
#paint-window,
#media-player-window {
width: auto !important;
height: auto !important;
}
.control-panel-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.display-properties-content,
.datetime-properties-content,
.system-properties-content {
grid-template-columns: 1fr;
}
.display-preview-shell {
display: none;
}
.paint-content {
grid-template-columns: 58px 1fr;
}
.notepad-textarea {
min-height: 55vh;
}
}
/* ==================================================
DESKTOP MUSIC PLAYER — SPOTIFY
================================================== */
#player {
width: 205px;
}
.player-title-row {
display: flex;
align-items: center;
justify-content: space-between;
gap: 5px;
}
.player-title {
flex: 1;
}
.player-open-button,
.player-screen-button {
border: 0;
text-align: left;
cursor: pointer;
}
.player-open-button {
width: auto;
}
.player-source-badge {
padding: 2px 4px;
background: #071000;
color: #72ff35;
border: 1px inset #555;
font-size: 8px;
}
.player-screen-button {
width: 100%;
display: block;
}
.player-screen-button:hover {
filter: brightness(1.14);
}
.player-mini-eq {
height: 18px;
display: flex;
align-items: flex-end;
justify-content: center;
gap: 2px;
margin: 4px 0;
padding: 2px;
background: #050905;
border: 1px inset #555;
}
.player-mini-eq span {
width: 5px;
height: 25%;
display: block;
background: #72ff35;
}
.spotify-playing .player-mini-eq span:nth-child(1) {
animation: miniEqA .48s steps(3) infinite alternate;
}
.spotify-playing .player-mini-eq span:nth-child(2) {
animation: miniEqB .37s steps(3) infinite alternate;
}
.spotify-playing .player-mini-eq span:nth-child(3) {
animation: miniEqA .29s steps(3) infinite alternate-reverse;
}
.spotify-playing .player-mini-eq span:nth-child(4) {
animation: miniEqB .52s steps(3) infinite alternate;
}
.spotify-playing .player-mini-eq span:nth-child(5) {
animation: miniEqA .33s steps(3) infinite alternate;
}
.spotify-playing .player-mini-eq span:nth-child(6) {
animation: miniEqB .43s steps(3) infinite alternate-reverse;
}
.spotify-playing .player-mini-eq span:nth-child(7) {
animation: miniEqA .39s steps(3) infinite alternate;
}
.spotify-playing .player-mini-eq span:nth-child(8) {
animation: miniEqB .31s steps(3) infinite alternate;
}
.player-controls {
display: flex;
align-items: center;
justify-content: center;
gap: 5px;
letter-spacing: 0;
}
.player-controls button {
min-width: 42px;
height: 25px;
padding: 0 6px;
background: #c0c0c0;
color: #111;
border-top: 2px solid #fff;
border-left: 2px solid #fff;
border-right: 2px solid #444;
border-bottom: 2px solid #444;
font-family: "Courier New", monospace;
font-size: 10px;
font-weight: bold;
}
.player-controls button:active {
border-top: 2px solid #444;
border-left: 2px solid #444;
border-right: 2px solid #fff;
border-bottom: 2px solid #fff;
}
/* ==================================================
WEBSPACE MEDIA PLAYER WINDOW
================================================== */
.webspace-media-window {
width: min(690px, calc(100vw - 40px));
}
.media-player-content {
background: #202020;
color: #efefef;
}
.media-player-console {
padding: 8px;
background:
linear-gradient(
#4b4b4b,
#252525
);
border-top: 2px solid #aaa;
border-left: 2px solid #aaa;
border-right: 2px solid #111;
border-bottom: 2px solid #111;
}
.media-lcd-top {
min-height: 62px;
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 12px;
padding: 9px 10px;
background: #031000;
border: 2px inset #555;
color: #72ff35;
font-family: "Courier New", monospace;
}
.media-lcd-label {
color: #ffff00;
font-size: 9px;
}
.media-lcd-track {
margin-top: 7px;
font-size: 14px;
font-weight: bold;
text-shadow: 0 0 5px rgba(114, 255, 53, .45);
}
.media-lcd-status {
display: flex;
flex-direction: column;
align-items: flex-end;
gap: 6px;
font-size: 9px;
}
.media-source-light {
padding: 2px 5px;
border: 1px solid #1c5f1c;
color: #9cff73;
}
.media-equalizer {
height: 70px;
display: flex;
align-items: flex-end;
justify-content: center;
gap: 5px;
margin-top: 7px;
padding: 6px;
background: #050905;
border: 2px inset #555;
}
.media-equalizer span {
width: 12px;
height: 12%;
display: block;
background:
linear-gradient(
to top,
#1f8d12,
#72ff35 70%,
#ffff00
);
}
.media-equalizer.playing span:nth-child(3n+1) {
animation: mediaEqA .41s steps(5) infinite alternate;
}
.media-equalizer.playing span:nth-child(3n+2) {
animation: mediaEqB .33s steps(5) infinite alternate-reverse;
}
.media-equalizer.playing span:nth-child(3n) {
animation: mediaEqC .52s steps(5) infinite alternate;
}
.media-progress-row {
display: grid;
grid-template-columns: 42px 1fr 42px;
align-items: center;
gap: 7px;
margin-top: 7px;
color: #b8ff9b;
font-family: "Courier New", monospace;
font-size: 9px;
}
.media-progress-track {
height: 9px;
overflow: hidden;
background: #020402;
border: 1px inset #555;
}
.media-progress-fill {
width: 0;
height: 100%;
background:
repeating-linear-gradient(
90deg,
#72ff35 0,
#72ff35 5px,
#208f0f 5px,
#208f0f 7px
);
}
.media-retro-controls {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 7px;
margin-top: 9px;
}
.media-play-button {
min-width: 100px;
color: #000080;
}
.media-playlist-label {
margin: 10px 0 5px;
display: flex;
align-items: center;
justify-content: space-between;
gap: 8px;
color: #c8c8c8;
font-family: "Courier New", monospace;
font-size: 9px;
}
.media-playlist-label strong {
color: #72ff35;
}
.spotify-embed-frame {
min-height: 352px;
overflow: hidden;
background: #111;
border-top: 2px solid #080808;
border-left: 2px solid #080808;
border-right: 2px solid #666;
border-bottom: 2px solid #666;
}
.spotify-embed-loading {
min-height: 352px;
display: flex;
align-items: center;
justify-content: center;
color: #72ff35;
font-family: "Courier New", monospace;
font-size: 11px;
}
.spotify-embed-frame iframe {
display: block;
width: 100% !important;
min-height: 352px;
border: 0;
}
.media-player-note {
margin-bottom: 0;
color: #aaa;
font-family: "Courier New", monospace;
font-size: 9px;
line-height: 1.5;
}
/* ==================================================
MEDIA PLAYER ANIMATIONS
================================================== */
@keyframes miniEqA {
from { height: 20%; }
to { height: 95%; }
}
@keyframes miniEqB {
from { height: 70%; }
to { height: 25%; }
}
@keyframes mediaEqA {
from { height: 10%; }
to { height: 90%; }
}
@keyframes mediaEqB {
from { height: 75%; }
to { height: 20%; }
}
@keyframes mediaEqC {
from { height: 35%; }
to { height: 100%; }
}
/* ==================================================
MEDIA PLAYER MOBILE
================================================== */
@media (max-width: 700px) {
#media-player-window {
width: auto !important;
height: auto !important;
}
.spotify-embed-frame,
.spotify-embed-loading,
.spotify-embed-frame iframe {
min-height: 352px;
}
.media-lcd-top,
.media-playlist-label {
flex-direction: column;
align-items: flex-start;
}
.media-lcd-status {
align-items: flex-start;
}
}
/* ==================================================
OLD-SCHOOL DESKTOP SHORTCUT LAYOUT
================================================== */
.desktop-icons {
display: flex;
flex-flow: column wrap;
align-content: flex-start;
align-items: flex-start;
width: min(350px, 45vw);
height: calc(100vh - 86px);
gap: 5px 7px;
}
.desktop-icon {
flex: 0 0 74px;
width: 100px;
min-height: 74px;
padding: 3px 2px;
}
.desktop-program-icon {
position: relative;
display: block;
width: 48px;
height: 48px;
margin: 0 auto 5px;
image-rendering: pixelated;
filter:
drop-shadow(
1px 1px 0 rgba(0, 0, 0, .8)
);
}
/* Control Panel */
.icon-control-panel {
background:
linear-gradient(#d7d7d7, #a9a9a9);
border-top: 3px solid #fff;
border-left: 3px solid #fff;
border-right: 3px solid #555;
border-bottom: 3px solid #555;
}
.icon-control-panel::before {
content: "";
position: absolute;
inset: 7px;
background:
linear-gradient(
90deg,
#000080 0 7px,
transparent 7px 12px,
#008080 12px 19px,
transparent 19px 24px,
#800000 24px 31px
);
}
.icon-control-panel::after {
content: "";
position: absolute;
left: 8px;
right: 8px;
bottom: 7px;
height: 8px;
background:
repeating-linear-gradient(
90deg,
#444 0 5px,
#ddd 5px 10px
);
}
/* Notepad */
.icon-notepad {
width: 40px;
height: 47px;
background:
repeating-linear-gradient(
to bottom,
#fff 0 7px,
#98bff5 7px 8px
);
border: 2px solid #333;
}
.icon-notepad::before {
content: "";
position: absolute;
top: -4px;
left: 3px;
right: 3px;
height: 7px;
background:
repeating-linear-gradient(
90deg,
#222 0 3px,
#bbb 3px 6px
);
}
/* Paint */
.icon-paint {
border-radius: 48% 48% 55% 42%;
background:
radial-gradient(circle at 30% 32%, #f00 0 4px, transparent 5px),
radial-gradient(circle at 58% 25%, #ff0 0 4px, transparent 5px),
radial-gradient(circle at 70% 52%, #00f 0 4px, transparent 5px),
radial-gradient(circle at 42% 67%, #0a0 0 4px, transparent 5px),
#d7b56d;
border: 3px solid #5a421f;
}
.icon-paint::after {
content: "";
position: absolute;
right: -7px;
bottom: -1px;
width: 9px;
height: 38px;
transform: rotate(35deg);
background:
linear-gradient(
90deg,
#6f3a17 0 4px,
#d59a5d 4px 7px,
#222 7px 9px
);
}
/* Media Player */
.icon-media-player {
background: #303030;
border: 3px ridge #999;
}
.icon-media-player::before {
content: "▶";
position: absolute;
inset: 7px 5px 17px;
display: flex;
align-items: center;
justify-content: center;
background: #051000;
color: #74ff35;
border: 2px inset #555;
font: bold 15px monospace;
}
.icon-media-player::after {
content: "■ ▶";
position: absolute;
left: 5px;
bottom: 4px;
color: #ddd;
font: bold 8px monospace;
}
/* Minesweeper */
.icon-minesweeper {
background: #c0c0c0;
border-top: 3px solid #fff;
border-left: 3px solid #fff;
border-right: 3px solid #444;
border-bottom: 3px solid #444;
}
.icon-minesweeper::before {
content: "";
position: absolute;
left: 11px;
top: 12px;
width: 22px;
height: 22px;
border-radius: 50%;
background:
radial-gradient(circle at 35% 30%, #777 0 2px, #111 3px 100%);
}
.icon-minesweeper::after {
content: "✦";
position: absolute;
right: 3px;
top: 0;
color: #f00;
font-size: 18px;
}
/* Solitaire */
.icon-solitaire::before,
.icon-solitaire::after {
content: "";
position: absolute;
width: 30px;
height: 42px;
background: #fff;
border: 2px solid #111;
}
.icon-solitaire::before {
left: 4px;
top: 4px;
transform: rotate(-9deg);
background:
repeating-linear-gradient(
45deg,
#000080 0 3px,
#fff 3px 5px
);
}
.icon-solitaire::after {
right: 2px;
bottom: 1px;
transform: rotate(7deg);
background:
radial-gradient(circle at 50% 48%, #b00000 0 7px, transparent 8px),
#fff;
}
/* Calculator */
.icon-calculator {
background: #bdbdbd;
border-top: 3px solid #fff;
border-left: 3px solid #fff;
border-right: 3px solid #444;
border-bottom: 3px solid #444;
}
.icon-calculator::before {
content: "123";
position: absolute;
top: 5px;
left: 5px;
right: 5px;
height: 12px;
padding-right: 2px;
background: #dff1df;
color: #111;
border: 2px inset #ddd;
font: bold 8px "Courier New", monospace;
text-align: right;
line-height: 12px;
}
.icon-calculator::after {
content: "";
position: absolute;
left: 7px;
right: 7px;
top: 23px;
bottom: 5px;
background:
repeating-linear-gradient(
90deg,
#777 0 7px,
transparent 7px 10px
),
repeating-linear-gradient(
0deg,
#777 0 5px,
transparent 5px 8px
);
}
/* Guestbook */
.icon-guestbook {
width: 46px;
height: 40px;
margin-top: 5px;
background:
linear-gradient(
90deg,
#fff6cc 0 47%,
#8d6b35 47% 53%,
#fff6cc 53% 100%
);
border: 2px solid #5a421f;
}
.icon-guestbook::before,
.icon-guestbook::after {
content: "";
position: absolute;
top: 8px;
width: 15px;
height: 2px;
background: #7f735e;
box-shadow:
0 6px #7f735e,
0 12px #7f735e;
}
.icon-guestbook::before {
left: 5px;
}
.icon-guestbook::after {
right: 5px;
}
/* ==================================================
MINESWEEPER
================================================== */
.minesweeper-window {
width: auto;
max-width: calc(100vw - 30px);
}
.mines-menu {
align-items: center;
}
.mines-difficulty-label {
margin-left: auto;
}
#mines-difficulty {
margin-right: 3px;
font: 10px Tahoma, Arial, sans-serif;
}
.mines-shell {
width: max-content;
max-width: 100%;
padding: 7px;
overflow: auto;
background: #c0c0c0;
border-top: 3px solid #fff;
border-left: 3px solid #fff;
border-right: 3px solid #777;
border-bottom: 3px solid #777;
}
.mines-score-panel {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 7px;
padding: 5px 7px;
border-top: 3px solid #777;
border-left: 3px solid #777;
border-right: 3px solid #fff;
border-bottom: 3px solid #fff;
}
.mines-led {
min-width: 57px;
padding: 2px 4px;
background: #100;
color: #f22;
border: 2px inset #777;
font: bold 25px "Courier New", monospace;
line-height: 28px;
text-align: center;
text-shadow:
0 0 4px #f00;
}
.mines-face-button {
width: 36px;
height: 36px;
background: #c0c0c0;
border-top: 3px solid #fff;
border-left: 3px solid #fff;
border-right: 3px solid #555;
border-bottom: 3px solid #555;
font-size: 20px;
}
.mines-face-button:active {
border-top-color: #555;
border-left-color: #555;
border-right-color: #fff;
border-bottom-color: #fff;
}
.mines-grid {
display: grid;
grid-template-columns:
repeat(
var(--mines-cols),
22px
);
width: max-content;
border-top: 3px solid #777;
border-left: 3px solid #777;
border-right: 3px solid #fff;
border-bottom: 3px solid #fff;
}
.mine-cell {
width: 22px;
height: 22px;
padding: 0;
background: #c0c0c0;
border-top: 3px solid #fff;
border-left: 3px solid #fff;
border-right: 3px solid #777;
border-bottom: 3px solid #777;
color: #111;
font: bold 14px Arial, sans-serif;
line-height: 16px;
}
.mine-cell:active:not(.revealed) {
border: 1px solid #777;
}
.mine-cell.revealed {
background: #c0c0c0;
border: 1px solid #888;
}
.mine-cell[data-count="1"] { color: #0000ff; }
.mine-cell[data-count="2"] { color: #008000; }
.mine-cell[data-count="3"] { color: #ff0000; }
.mine-cell[data-count="4"] { color: #000080; }
.mine-cell[data-count="5"] { color: #800000; }
.mine-cell[data-count="6"] { color: #008080; }
.mine-cell[data-count="7"] { color: #000; }
.mine-cell[data-count="8"] { color: #777; }
.mine-cell.flagged {
color: #d00000;
}
.mine-cell.mine {
color: #000;
}
.mines-footer {
display: flex;
justify-content: space-between;
gap: 12px;
margin-top: 7px;
color: #333;
font-size: 9px;
}
/* ==================================================
SOLITAIRE
================================================== */
.solitaire-window {
width: min(790px, calc(100vw - 24px));
}
.solitaire-menu {
align-items: center;
}
.solitaire-menu button {
padding: 0;
background: transparent;
border: 0;
font: inherit;
}
.solitaire-stats {
display: flex;
gap: 12px;
margin-left: auto;
font-size: 9px;
}
.solitaire-table {
min-height: 505px;
padding: 12px;
overflow: auto;
background:
#008000;
border-top: 2px solid #006000;
border-left: 2px solid #006000;
border-right: 2px solid #39a339;
border-bottom: 2px solid #39a339;
}
.solitaire-top-row {
display: grid;
grid-template-columns:
74px
74px
1fr
repeat(4, 74px);
gap: 10px;
min-width: 650px;
}
.solitaire-spacer {
min-width: 20px;
}
.sol-pile {
position: relative;
width: 72px;
height: 98px;
padding: 0;
border-radius: 4px;
background: rgba(0, 80, 0, .45);
border: 2px solid rgba(255,255,255,.4);
color: rgba(255,255,255,.55);
font: bold 32px Georgia, serif;
}
.sol-stock.has-card {
background:
repeating-linear-gradient(
45deg,
#000080 0 5px,
#fff 5px 7px,
#000080 7px 12px
);
border: 4px double #fff;
}
.sol-waste,
.sol-foundation {
display: flex;
align-items: center;
justify-content: center;
}
.sol-foundation.red {
color: rgba(255,210,210,.65);
}
.solitaire-tableau {
display: grid;
grid-template-columns:
repeat(
7,
74px
);
gap: 10px;
min-width: 650px;
min-height: 330px;
margin-top: 18px;
}
.sol-tableau-column {
position: relative;
min-height: 315px;
}
.sol-empty-tableau {
width: 72px;
height: 98px;
background: rgba(0, 80, 0, .45);
border: 2px solid rgba(255,255,255,.35);
border-radius: 4px;
}
.sol-card {
position: absolute;
top:
calc(
var(--sol-card-index, 0) *
25px
);
left: 0;
width: 72px;
height: 98px;
padding: 0;
overflow: hidden;
border: 1px solid #111;
border-radius: 4px;
background: #fff;
box-shadow:
1px 1px 1px rgba(0,0,0,.45);
font-family: Georgia, serif;
}
.sol-card.face-down {
background:
repeating-linear-gradient(
45deg,
#000080 0 5px,
#fff 5px 7px,
#000080 7px 12px
);
border: 4px double #fff;
}
.sol-card.red {
color: #c00000;
}
.sol-card.black {
color: #111;
}
.sol-card.selected {
outline: 3px dotted #ffff00;
outline-offset: -4px;
}
.sol-card-corner {
position: absolute;
top: 3px;
left: 4px;
font-size: 15px;
font-weight: bold;
line-height: 1;
}
.sol-card-corner.bottom {
top: auto;
left: auto;
right: 4px;
bottom: 3px;
transform: rotate(180deg);
}
.sol-card-suit {
position: absolute;
inset: 0;
display: flex;
align-items: center;
justify-content: center;
font-size: 34px;
}
.sol-waste .sol-card,
.sol-foundation .sol-card {
top: 0;
left: 0;
}
.solitaire-help {
min-width: 650px;
margin-top: 10px;
color: #d5ffd5;
font-size: 9px;
text-align: center;
}
/* ==================================================
CALCULATOR
================================================== */
.calculator-window {
width: 315px;
}
.calculator-body {
padding: 9px;
background: #c0c0c0;
}
.calculator-display {
width: 100%;
height: 34px;
box-sizing: border-box;
padding: 3px 6px;
background: #eef7e8;
border-top: 3px solid #777;
border-left: 3px solid #777;
border-right: 3px solid #fff;
border-bottom: 3px solid #fff;
font: 21px "Courier New", monospace;
text-align: right;
}
.calculator-memory-row {
display: grid;
grid-template-columns:
34px
repeat(4, 1fr);
gap: 5px;
margin-top: 8px;
}
.calculator-memory-row span {
display: flex;
align-items: center;
justify-content: center;
min-height: 29px;
color: #999;
border: 2px inset #ddd;
font-weight: bold;
}
.calculator-memory-row span.active {
color: #000080;
}
.calculator-body button {
min-height: 31px;
background: #c0c0c0;
border-top: 2px solid #fff;
border-left: 2px solid #fff;
border-right: 2px solid #444;
border-bottom: 2px solid #444;
color: #000080;
font: bold 11px Tahoma, Arial, sans-serif;
}
.calculator-body button:active {
border-top-color: #444;
border-left-color: #444;
border-right-color: #fff;
border-bottom-color: #fff;
}
.calculator-grid {
display: grid;
grid-template-columns:
repeat(
5,
1fr
);
gap: 5px;
margin-top: 7px;
}
.calculator-grid .calc-wide {
grid-column: span 3;
}
.calculator-grid .calc-op {
color: #b00000;
}
.calculator-grid .calc-equals {
color: #b00000;
}
/* ==================================================
RESPONSIVE NOSTALGIA PACK
================================================== */
@media (max-width: 700px) {
.desktop-icons {
width: 310px;
height: calc(100vh - 82px);
gap: 4px;
}
.desktop-icon {
width: 90px;
flex-basis: 70px;
}
#minesweeper-window,
#solitaire-window,
#calculator-window {
width: auto !important;
height: auto !important;
}
.solitaire-table {
min-height: 430px;
}
}
/* ==================================================
YEARBOOK DESKTOP ICON
================================================== */
.icon-yearbook {
width: 46px;
height: 42px;
margin-top: 4px;
background:
linear-gradient(
90deg,
#8d1e1e 0 47%,
#4e0f0f 47% 53%,
#8d1e1e 53% 100%
);
border-top: 3px solid #d9a3a3;
border-left: 3px solid #d9a3a3;
border-right: 3px solid #401010;
border-bottom: 3px solid #401010;
}
.icon-yearbook::before {
content: "96";
position: absolute;
top: 7px;
left: 9px;
width: 23px;
height: 23px;
display: flex;
align-items: center;
justify-content: center;
border: 2px double #f4d26b;
border-radius: 50%;
color: #ffe894;
font: bold 10px Georgia, serif;
}
.icon-yearbook::after {
content: "YEARBOOK";
position: absolute;
left: 3px;
right: 3px;
bottom: 3px;
color: #fff3b4;
font: bold 5px Arial, sans-serif;
text-align: center;
letter-spacing: .5px;
}
/* ==================================================
WEBSPACE YEARBOOK
================================================== */
.yearbook-window {
width: min(860px, calc(100vw - 28px));
height: min(720px, calc(100vh - 75px));
}
.yearbook-content {
overflow: auto;
background:
#fffdf0;
color: #241c13;
font-family:
"Times New Roman",
Georgia,
serif;
}
.yearbook-header {
display: flex;
align-items: center;
justify-content: space-between;
gap: 20px;
padding: 10px 14px 7px;
background:
repeating-linear-gradient(
0deg,
rgba(117, 75, 23, .035) 0 1px,
transparent 1px 4px
),
#f6edce;
}
.yearbook-header h2 {
margin: 2px 0 3px;
color: #721919;
font-size: 27px;
letter-spacing: 2px;
}
.yearbook-header p {
margin: 0;
font-size: 12px;
}
.yearbook-kicker {
color: #82631d;
font: bold 9px Arial, sans-serif;
letter-spacing: 2px;
}
.yearbook-seal {
flex: 0 0 68px;
width: 68px;
height: 68px;
display: flex;
align-items: center;
justify-content: center;
border: 5px double #8a6b28;
border-radius: 50%;
background:
#7d1d1d;
color: #ffe99b;
font: bold 26px Georgia, serif;
box-shadow:
inset 0 0 0 3px #eadc99;
}
.yearbook-rule {
height: 7px;
background:
repeating-linear-gradient(
90deg,
#7d1d1d 0 20px,
#d8b35c 20px 28px,
#1f4a70 28px 48px,
#d8b35c 48px 56px
);
}
.yearbook-signing-area {
display: grid;
grid-template-columns:
minmax(260px, 330px)
1fr;
gap: 16px;
padding: 14px;
border-bottom: 1px solid #cbb98b;
}
.yearbook-camera-panel,
.yearbook-form-panel {
min-width: 0;
}
.yearbook-photo-frame {
position: relative;
width: min(100%, 288px);
aspect-ratio: 4 / 5;
margin: 0 auto;
overflow: hidden;
background:
#d4ceb9;
border: 10px solid #f8f2da;
outline: 2px solid #664f25;
box-shadow:
5px 5px 0 rgba(80, 55, 20, .24);
}
.yearbook-video,
.yearbook-preview {
width: 100%;
height: 100%;
display: block;
object-fit: cover;
background: #111;
}
.yearbook-video {
transform: scaleX(-1);
}
.yearbook-camera-placeholder {
position: absolute;
inset: 0;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 8px;
padding: 18px;
background:
linear-gradient(
145deg,
#e3dcc4,
#b8af96
);
color: #50482f;
text-align: center;
}
.yearbook-camera-placeholder strong {
color: #731b1b;
font-size: 16px;
letter-spacing: 1px;
}
.yearbook-camera-placeholder span:last-child {
font-size: 10px;
line-height: 1.4;
}
.yearbook-placeholder-camera {
position: relative;
width: 62px;
height: 42px;
background: #3a3a3a;
border: 3px outset #888;
}
.yearbook-placeholder-camera::before {
content: "";
position: absolute;
left: 17px;
top: 7px;
width: 24px;
height: 24px;
border: 4px solid #aaa;
border-radius: 50%;
background: #101a20;
}
.yearbook-placeholder-camera::after {
content: "";
position: absolute;
left: 7px;
top: -9px;
width: 22px;
height: 10px;
background: #555;
border: 2px outset #888;
}
.yearbook-flash {
pointer-events: none;
position: absolute;
inset: 0;
opacity: 0;
background: #fff;
}
.yearbook-flash.active {
animation:
yearbookFlash .22s ease-out;
}
@keyframes yearbookFlash {
0% {
opacity: .95;
}
100% {
opacity: 0;
}
}
.yearbook-camera-controls {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 6px;
margin-top: 12px;
}
.yearbook-camera-note {
margin: 8px 0 0;
color: #665d47;
font-size: 10px;
text-align: center;
}
.yearbook-form-panel {
padding: 10px 12px;
background:
repeating-linear-gradient(
to bottom,
transparent 0 25px,
rgba(64, 102, 145, .16) 25px 26px
),
#fffef8;
border: 1px solid #baaa80;
}
.yearbook-form-heading {
margin-bottom: 12px;
color: #7a1818;
font-size: 18px;
font-weight: bold;
text-align: center;
letter-spacing: 1px;
}
.yearbook-form-panel label {
display: block;
margin: 8px 0 4px;
color: #4d321c;
font: bold 10px Arial, sans-serif;
}
.yearbook-input {
width: 100%;
box-sizing: border-box;
padding: 6px 7px;
background: rgba(255, 255, 255, .93);
color: #111;
border-top: 2px solid #777;
border-left: 2px solid #777;
border-right: 2px solid #fff;
border-bottom: 2px solid #fff;
font: 12px "Courier New", monospace;
}
.yearbook-quote {
min-height: 92px;
resize: vertical;
}
.yearbook-character-count {
margin-top: 2px;
color: #716b5c;
font: 9px Arial, sans-serif;
text-align: right;
}
.yearbook-permanent-notice {
margin: 12px 0;
padding: 7px;
background: #fff1b9;
border: 1px solid #9b7b25;
color: #5a4414;
font: 9px Arial, sans-serif;
line-height: 1.4;
}
.yearbook-submit-button {
width: 100%;
min-height: 34px;
font-weight: bold;
}
.yearbook-status {
min-height: 30px;
margin-top: 9px;
padding: 6px 7px;
background: #f1eddb;
border: 1px inset #ddd;
color: #4c473a;
font: 10px Arial, sans-serif;
line-height: 1.4;
}
.yearbook-status.success {
background: #dff1d6;
color: #195719;
}
.yearbook-status.error {
background: #f5dddd;
color: #821515;
}
.yearbook-status.locked {
background: #e4e1d1;
color: #5f4f2c;
}
.yearbook-pages {
padding: 14px;
background:
repeating-linear-gradient(
90deg,
rgba(93, 60, 18, .025) 0 1px,
transparent 1px 5px
),
#f8f1d9;
}
.yearbook-pages-heading {
display: flex;
align-items: flex-end;
justify-content: space-between;
gap: 12px;
margin-bottom: 12px;
border-bottom: 3px double #82651f;
}
.yearbook-pages-heading h3 {
margin: 2px 0 5px;
color: #6c1818;
font-size: 21px;
}
#yearbook-entry-count {
padding-bottom: 6px;
color: #716441;
font: 10px Arial, sans-serif;
}
.yearbook-gallery {
display: grid;
grid-template-columns:
repeat(
auto-fill,
minmax(
145px,
1fr
)
);
gap: 14px;
}
.yearbook-gallery-message {
grid-column: 1 / -1;
padding: 25px;
color: #675d45;
text-align: center;
font-style: italic;
}
.yearbook-entry {
position: relative;
min-width: 0;
padding: 7px 7px 12px;
background: #fffef7;
border: 1px solid #aa9b72;
box-shadow:
3px 3px 0 rgba(80, 55, 20, .17);
transform:
rotate(
var(--yearbook-tilt, 0deg)
);
}
.yearbook-entry-photo-wrap {
aspect-ratio: 4 / 5;
overflow: hidden;
background: #ddd2b9;
border: 4px solid #f1ead3;
outline: 1px solid #635331;
}
.yearbook-entry-photo {
width: 100%;
height: 100%;
display: block;
object-fit: cover;
}
.yearbook-entry-name {
margin-top: 7px;
color: #701919;
font-size: 14px;
font-weight: bold;
text-align: center;
}
.yearbook-entry-quote {
min-height: 31px;
margin: 5px 2px 0;
overflow-wrap: anywhere;
color: #423726;
font: italic 10px Georgia, serif;
line-height: 1.35;
text-align: center;
}
.yearbook-entry-date {
margin-top: 6px;
color: #8a7b5b;
font: 8px Arial, sans-serif;
text-align: center;
text-transform: uppercase;
}
.yearbook-entry::after {
content: "★ '96 ★";
display: block;
margin-top: 5px;
color: #a1853d;
font: bold 7px Arial, sans-serif;
text-align: center;
letter-spacing: 1px;
}
/* ==================================================
YEARBOOK MOBILE
================================================== */
@media (max-width: 700px) {
#yearbook-window {
width: auto !important;
height: auto !important;
}
.yearbook-signing-area {
grid-template-columns: 1fr;
}
.yearbook-header {
align-items: flex-start;
}
.yearbook-seal {
flex-basis: 52px;
width: 52px;
height: 52px;
font-size: 19px;
}
.yearbook-gallery {
grid-template-columns:
repeat(
2,
minmax(
0,
1fr
)
);
}
}
/* ==================================================
MOBILE — ONE CANONICAL RULE SET
Phone acts as a viewport into the original
1024 × 768 desktop; opened windows remain usable.
================================================== */
@media (max-width: 700px) {
html,
body {
margin: 0;
overflow: auto !important;
touch-action: pan-x pan-y;
-webkit-overflow-scrolling: touch;
}
html,
body {
width: 1024px !important;
min-width: 1024px !important;
}
body {
height: 768px !important;
min-height: 768px !important;
}
#desktop {
position: relative !important;
width: 1024px !important;
min-width: 1024px !important;
height: 768px !important;
min-height: 768px !important;
padding: 0 !important;
overflow: visible !important;
background-size: cover !important;
background-position: center center !important;
background-repeat: no-repeat !important;
}
.desktop-icons {
position: absolute !important;
top: 24px !important;
left: 18px !important;
width: 100px !important;
max-width: 100px !important;
display: grid !important;
grid-template-columns: 100px !important;
gap: 13px !important;
margin: 0 !important;
padding: 0 !important;
}
.desktop-icon {
width: 100px !important;
padding: 5px 3px !important;
font-size: 12px !important;
}
.desktop-icon-image {
width: 48px !important;
height: 48px !important;
margin: 0 auto 5px !important;
}
.webcore-clutter {
position: absolute !important;
inset: 0 !important;
width: 1024px !important;
height: 768px !important;
}
.webcore-clutter,
.webcore-asset,
.homepage-banner-img,
.visitor-box,
.best-viewed,
.web-badge,
.desktop-note,
#player {
display: block !important;
}
.homepage-banner-img {
top: 18px !important;
left: 50% !important;
width: 280px !important;
max-width: 280px !important;
transform: translateX(-50%) !important;
}
.visitor-box {
top: 28px !important;
right: 35px !important;
transform: none !important;
}
.window {
position: fixed !important;
top: 6px !important;
left: 6px !important;
right: 6px !important;
bottom: 48px !important;
width: auto !important;
max-width: none !important;
height: auto !important;
max-height: none !important;
margin: 0 !important;
overflow: hidden !important;
}
.window.active {
display: flex !important;
flex-direction: column;
}
.browser-window,
#computer-window,
#system-window,
#camera-window,
#photo-viewer-window {
width: auto !important;
height: auto !important;
}
.window-content {
flex: 1 1 auto;
min-width: 0;
min-height: 0;
max-height: none !important;
padding: 10px;
overflow: auto !important;
-webkit-overflow-scrolling: touch;
}
.window-titlebar,
.window-menu,
.browser-toolbar,
.explorer-toolbar,
.window-statusbar {
flex-shrink: 0;
}
.welcome-columns {
grid-template-columns: 1fr !important;
}
.welcome-main {
padding-right: 0 !important;
border-right: 0 !important;
}
.welcome-sidebar {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 8px;
}
.welcome-navigation {
grid-template-columns: 1fr !important;
}
.file-grid,
.computer-grid,
.visitor-photo-grid {
grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
}
.gallery-grid {
grid-template-columns: 1fr !important;
}
.camera-content {
display: block;
}
.camera-save-panel {
margin-top: 10px;
}
#guestbook-name,
#guestbook-message,
#camera-name,
#camera-caption {
width: 100%;
box-sizing: border-box;
font-size: 16px;
}
#taskbar {
position: fixed !important;
left: 0 !important;
right: 0 !important;
bottom: 0 !important;
width: 100vw !important;
height: 42px !important;
z-index: 9999 !important;
}
#taskbar-apps {
min-width: 0;
overflow-x: auto !important;
overflow-y: hidden !important;
}
.taskbar-button {
flex: 0 0 95px;
width: 95px;
}
#system-tray {
flex-shrink: 0;
}
#start-menu {
position: fixed !important;
left: 3px !important;
bottom: 42px !important;
width: 245px !important;
max-height: calc(100dvh - 50px);
overflow-y: auto;
}
}
/* ==================================================
WINDOWS 95 DESKTOP SHELL COMPLETION
================================================== */
/* Display Properties now owns its tab-panel layout. */
.display-properties-content {
display: block;
}
/* Window viewport safety for normal desktop zoom levels. */
@media (min-width: 701px) {
.window {
max-width: calc(100vw - 8px);
max-height: calc(100vh - 50px);
}
.window-content {
max-height: calc(100vh - 135px);
}
.yearbook-window {
height: min(680px, calc(100vh - 54px));
}
.yearbook-window .yearbook-content {
max-height: calc(100vh - 138px);
}
}
/* ==================================================
DESKTOP SELECTION / DOCUMENT ICON
================================================== */
.desktop-icon.selected,
.desktop-icon:focus-visible {
background: rgba(0, 0, 128, .58);
border: 1px dotted #fff;
outline: none;
}
.desktop-icon.selected > span:last-child,
.desktop-icon:focus-visible > span:last-child {
background: #000080;
color: #fff;
}
.desktop-text-file-icon {
position: relative;
display: block;
width: 36px;
height: 46px;
margin: 0 auto 7px;
background:
repeating-linear-gradient(
to bottom,
#fff 0 6px,
#d4d4d4 6px 7px
);
border: 2px solid #222;
box-shadow:
2px 2px 0 rgba(0,0,0,.35);
}
.desktop-text-file-icon::after {
content: "TXT";
position: absolute;
left: 3px;
right: 3px;
bottom: 4px;
background: #000080;
color: #fff;
font: bold 7px Arial, sans-serif;
text-align: center;
}
.desktop-refreshing {
animation: desktopRefreshFlash .16s steps(2, end);
}
@keyframes desktopRefreshFlash {
0% { opacity: 1; }
45% { opacity: .25; }
100% { opacity: 1; }
}
/* ==================================================
DESKTOP CONTEXT MENU
================================================== */
.desktop-context-menu {
position: fixed;
z-index: 6500;
width: 180px;
padding: 3px;
background: #c0c0c0;
border-top: 2px solid #fff;
border-left: 2px solid #fff;
border-right: 2px solid #222;
border-bottom: 2px solid #222;
box-shadow: 2px 2px 0 rgba(0,0,0,.35);
font-size: 11px;
}
.desktop-context-menu button {
width: 100%;
min-height: 24px;
display: flex;
align-items: center;
justify-content: space-between;
gap: 7px;
padding: 3px 18px 3px 22px;
background: transparent;
border: 0;
color: #111;
text-align: left;
}
.desktop-context-menu button:hover,
.desktop-context-menu button:focus {
background: #000080;
color: #fff;
outline: 0;
}
.context-menu-separator {
height: 2px;
margin: 3px 1px;
border-top: 1px solid #777;
border-bottom: 1px solid #fff;
}
.context-submenu-host {
position: relative;
}
.context-submenu {
position: absolute;
left: calc(100% - 2px);
top: -4px;
display: none;
width: 170px;
padding: 3px;
background: #c0c0c0;
border-top: 2px solid #fff;
border-left: 2px solid #fff;
border-right: 2px solid #222;
border-bottom: 2px solid #222;
box-shadow: 2px 2px 0 rgba(0,0,0,.35);
}
.context-submenu-host:hover .context-submenu,
.context-submenu-host:focus-within .context-submenu {
display: block;
}
.context-submenu button {
justify-content: flex-start;
padding-left: 8px;
}
.tiny-text-file-icon {
width: 13px;
height: 16px;
flex: 0 0 13px;
background: #fff;
border: 1px solid #222;
}
.menu-arrow {
margin-left: auto;
font-size: 8px;
}
/* ==================================================
CLASSIC START MENU
================================================== */
#start-menu {
width: 252px;
min-height: 0;
overflow: visible;
z-index: 6000;
}
.classic-start-items {
position: relative;
padding: 4px 0;
}
.start-submenu-host {
position: relative;
}
.start-menu-items .start-menu-row {
min-height: 39px;
padding: 5px 8px;
}
.start-menu-glyph {
width: 30px !important;
flex: 0 0 30px;
font-size: 20px !important;
}
.start-menu-label {
width: auto !important;
flex: 1;
font-size: 11px !important;
text-align: left !important;
}
.start-menu-arrow {
width: 12px !important;
margin-left: auto;
font-size: 8px !important;
}
.start-submenu {
position: absolute;
left: calc(100% - 3px);
top: -4px;
z-index: 6100;
display: none;
min-width: 230px;
padding: 3px 0;
background: #c0c0c0;
border-top: 2px solid #fff;
border-left: 2px solid #fff;
border-right: 2px solid #222;
border-bottom: 2px solid #222;
box-shadow: 2px 2px 0 rgba(0,0,0,.35);
}
.start-submenu-host:hover > .start-submenu,
.start-submenu-host:focus-within > .start-submenu,
.start-submenu-host.open > .start-submenu {
display: block;
}
.start-submenu button {
min-height: 31px;
padding: 4px 9px;
white-space: nowrap;
}
.start-submenu button span {
width: 24px;
font-size: 15px;
}
/* ==================================================
FIND
================================================== */
.find-window {
width: min(520px, calc(100vw - 20px));
}
.find-body {
display: grid;
grid-template-columns: 44px 55px 1fr auto;
align-items: center;
gap: 7px;
padding: 12px;
background: #c0c0c0;
border-bottom: 2px groove #ddd;
font-size: 11px;
}
.find-logo {
grid-row: 1;
font-size: 28px;
text-align: center;
}
.find-body input {
min-width: 0;
height: 24px;
padding: 2px 4px;
background: #fff;
border: 2px inset #ddd;
font: 11px Tahoma, Arial, sans-serif;
}
.find-results {
min-height: 190px;
max-height: 300px;
overflow: auto;
background: #fff;
border: 2px inset #ddd;
}
.find-empty {
padding: 18px;
color: #555;
font-size: 11px;
}
.find-result-row {
width: 100%;
display: grid;
grid-template-columns: 1fr 150px;
gap: 10px;
padding: 5px 8px;
background: #fff;
border: 0;
border-bottom: 1px solid #ddd;
color: #111;
text-align: left;
font: 11px Tahoma, Arial, sans-serif;
}
.find-result-row:hover,
.find-result-row:focus {
background: #000080;
color: #fff;
outline: 0;
}
/* ==================================================
HELP
================================================== */
.help-window {
width: min(610px, calc(100vw - 20px));
}
.help-layout {
display: grid;
grid-template-columns: 175px 1fr;
min-height: 330px;
background: #fff;
}
.help-sidebar {
padding: 10px;
background: #c0c0c0;
border-right: 2px groove #ddd;
}
.help-sidebar strong {
display: block;
margin-bottom: 8px;
}
.help-sidebar button {
width: 100%;
padding: 6px 5px;
background: transparent;
border: 0;
color: #000080;
font-size: 10px;
text-align: left;
}
.help-sidebar button:hover,
.help-sidebar button:focus {
background: #000080;
color: #fff;
outline: 0;
}
.help-topic {
padding: 18px;
overflow: auto;
font-family: Arial, sans-serif;
font-size: 12px;
}
.help-topic h2 {
color: #000080;
font-family: "Times New Roman", serif;
}
/* ==================================================
RUN + SHUTDOWN DIALOGS
================================================== */
.run-dialog-window {
width: min(430px, calc(100vw - 20px));
}
.run-dialog-body {
display: grid;
grid-template-columns: 48px 1fr;
gap: 10px;
padding: 16px 14px 10px;
background: #c0c0c0;
font-size: 11px;
}
.run-dialog-icon {
font-size: 36px;
color: #000080;
text-align: center;
}
.run-dialog-body p {
margin: 0 0 12px;
line-height: 1.35;
}
.run-dialog-body label {
display: inline-block;
width: 42px;
}
.run-dialog-body input {
width: calc(100% - 48px);
height: 24px;
background: #fff;
border: 2px inset #ddd;
font: 11px Tahoma, Arial, sans-serif;
}
.classic-dialog-actions {
display: flex;
justify-content: flex-end;
gap: 7px;
padding: 7px 10px 10px;
background: #c0c0c0;
}
.classic-dialog-actions .retro-button {
min-width: 76px;
}
.shutdown-dialog-window {
width: min(455px, calc(100vw - 20px));
}
.shutdown-dialog-body {
display: grid;
grid-template-columns: 78px 1fr;
gap: 12px;
align-items: center;
padding: 18px 14px 8px;
background: #c0c0c0;
}
.shutdown-computer-icon {
position: relative;
width: 64px;
height: 54px;
margin: 0 auto;
background: #aaa;
border: 3px outset #ddd;
}
.shutdown-computer-icon::before {
content: "";
position: absolute;
left: 9px;
right: 9px;
top: 7px;
height: 28px;
background: #000080;
border: 2px inset #777;
}
.shutdown-computer-icon::after {
content: "";
position: absolute;
left: 21px;
bottom: -11px;
width: 22px;
height: 10px;
background: #888;
border: 2px outset #bbb;
}
.shutdown-options {
margin: 0;
padding: 10px 12px 12px;
}
.shutdown-options label {
display: block;
margin: 9px 0;
font-size: 11px;
}
/* ==================================================
DISPLAY PROPERTIES — SCREEN SAVER
================================================== */
.display-tab-panel {
width: 100%;
}
#display-desktop-panel {
display: grid;
grid-template-columns: 210px 1fr;
gap: 16px;
align-items: start;
}
#display-screensaver-panel {
min-height: 260px;
}
.screensaver-monitor-preview {
width: 245px;
margin: 3px auto 16px;
padding: 13px 14px 22px;
background: #777;
border: 4px outset #bbb;
border-radius: 4px;
}
.screensaver-mini-preview {
position: relative;
height: 140px;
overflow: hidden;
background: #000;
border: 3px inset #888;
}
.screensaver-mini-preview.mini-starfield {
background:
radial-gradient(circle at 20% 25%, #fff 0 1px, transparent 2px),
radial-gradient(circle at 70% 18%, #fff 0 1px, transparent 2px),
radial-gradient(circle at 44% 62%, #6cf 0 1px, transparent 2px),
radial-gradient(circle at 88% 75%, #fff 0 1px, transparent 2px),
#000018;
background-size: 70px 55px, 95px 80px, 115px 90px, 85px 105px, auto;
}
.screensaver-mini-preview.mini-none {
background: #111;
}
.screensaver-mini-logo {
position: absolute;
left: 42px;
top: 52px;
padding: 6px 9px;
background: #000080;
color: #fff;
border: 2px outset #fff;
font: bold 10px Arial, sans-serif;
}
.screensaver-settings-fieldset {
display: grid;
grid-template-columns: 105px 1fr auto;
gap: 8px;
align-items: center;
}
.screensaver-settings-fieldset .property-help {
grid-column: 1 / -1;
}
/* ==================================================
FULL SCREEN SAVER
================================================== */
.screensaver-overlay {
position: fixed;
inset: 0;
z-index: 30000;
overflow: hidden;
background: #000;
cursor: none;
}
.screensaver-overlay.screensaver-starfield {
background:
radial-gradient(circle at 10% 20%, #fff 0 1px, transparent 2px),
radial-gradient(circle at 31% 77%, #8cf 0 1px, transparent 2px),
radial-gradient(circle at 68% 29%, #fff 0 1px, transparent 2px),
radial-gradient(circle at 88% 68%, #fff 0 1px, transparent 2px),
radial-gradient(circle at 55% 52%, #bdf 0 1px, transparent 2px),
linear-gradient(#000008, #000026);
background-size: 140px 120px, 180px 160px, 210px 170px, 165px 205px, 260px 230px, cover;
animation: screensaverStarfield 13s linear infinite;
}
@keyframes screensaverStarfield {
from {
background-position: 0 0, 0 0, 0 0, 0 0, 0 0, 0 0;
}
to {
background-position: 140px 120px, -180px 160px, 210px -170px, -165px -205px, 260px 230px, 0 0;
}
}
.screensaver-logo {
position: absolute;
left: 0;
top: 0;
width: 190px;
height: 92px;
display: grid;
grid-template-columns: 1fr 1fr;
grid-template-rows: 1fr 1fr 28px;
gap: 3px;
padding: 7px;
background: #080808;
border: 3px outset #c0c0c0;
box-shadow: 8px 8px 0 rgba(0,0,0,.45);
}
.screensaver-logo-pane {
border: 1px solid rgba(255,255,255,.55);
}
.pane-red { background: #e22; }
.pane-green { background: #0a5; }
.pane-blue { background: #1684d8; }
.pane-yellow { background: #f2cf23; }
.screensaver-logo strong {
grid-column: 1 / -1;
display: flex;
align-items: center;
justify-content: center;
color: #fff;
font: bold 13px Arial, sans-serif;
letter-spacing: 2px;
}
.screensaver-starfield .screensaver-logo {
display: none;
}
.screensaver-exit-hint {
position: absolute;
left: 0;
right: 0;
bottom: 14px;
color: rgba(255,255,255,.28);
font: 9px "Courier New", monospace;
text-align: center;
}
/* ==================================================
SAFE TO TURN OFF SCREEN
================================================== */
.shutdown-screen {
position: fixed;
inset: 0;
z-index: 40000;
display: flex;
align-items: center;
justify-content: center;
background: #000;
color: #f6f6f6;
cursor: pointer;
}
.shutdown-screen-message {
width: min(560px, 90vw);
text-align: center;
font-family: Arial, sans-serif;
}
.shutdown-windows-cloud {
margin-bottom: 12px;
color: #73a9ff;
font-size: 90px;
line-height: 1;
text-shadow: 3px 3px #000080;
}
.shutdown-screen-title {
color: #fff;
font-size: 35px;
font-weight: bold;
font-style: italic;
text-shadow: 3px 3px #000080;
}
.shutdown-screen-message p {
margin: 22px 0 14px;
color: #ffef9b;
font: bold 19px "Times New Roman", serif;
}
.shutdown-screen-message small {
color: #777;
font: 10px "Courier New", monospace;
}
/* ==================================================
110% ZOOM / SMALLER DESKTOP VIEWPORT POLISH
================================================== */
@media (min-width: 701px) and (max-height: 820px) {
.desktop-icons {
height: calc(100vh - 76px);
gap: 2px 6px;
}
.desktop-icon {
flex-basis: 69px;
min-height: 69px;
font-size: 11px;
}
.desktop-icon-image,
.desktop-program-icon {
width: 44px;
height: 44px;
margin-bottom: 3px;
}
#start-menu {
bottom: 40px;
}
.yearbook-window {
height: calc(100vh - 50px);
}
}
@media (max-width: 700px) {
.desktop-context-menu,
.start-submenu {
font-size: 12px;
}
.find-window,
.help-window,
.run-dialog-window,
.shutdown-dialog-window {
width: 520px !important;
height: auto !important;
}
.screensaver-overlay,
.shutdown-screen {
width: 100vw !important;
height: 100vh !important;
}
}