* {
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: default;
}
button,
a,
.desktop-icon {
cursor: pointer;
}
/* ==================================================
BOOT
================================================== */
#boot-screen {
position: fixed;
inset: 0;
z-index: 9999;
display: flex;
align-items: center;
justify-content: center;
padding: 25px;
background: radial-gradient(circle at 50% 38%, #08122b 0, #02050e 42%, #000 78%);
color: #d6d6d6;
image-rendering: pixelated;
}
.boot-shell {
width: min(760px, 94vw);
padding: 8px 10px 12px;
background: #03060d;
border: 1px solid #53627d;
box-shadow: 0 0 0 2px #000, 0 0 28px rgba(55,116,255,.16);
font-family: "Courier New", monospace;
}
.boot-bios-bar {
margin: -8px -10px 13px;
padding: 4px 7px;
background: #000080;
color: #fff;
font-size: 10px;
font-weight: bold;
}
.boot-brand-row {
display: flex;
align-items: center;
gap: 14px;
}
.boot-logo {
width: 50px;
height: 42px;
display: grid;
grid-template-columns: 1fr 1fr;
gap: 2px;
transform: skewY(-7deg);
filter: drop-shadow(2px 2px 0 #000);
}
.boot-logo-pane { display: block; }
.boot-pane-red { background: #ef2d27; }
.boot-pane-green { background: #13a33a; }
.boot-pane-blue { background: #2385d8; }
.boot-pane-yellow { background: #f3cf24; }
.boot-title {
color: #fff;
font-size: 25px;
font-weight: bold;
letter-spacing: 1px;
text-shadow: 2px 2px #000080;
}
.boot-subtitle {
margin-top: 3px;
color: #8ea2c5;
font-size: 10px;
letter-spacing: 1px;
}
.boot-memory-line {
margin-top: 12px;
color: #b8b8b8;
font-size: 10px;
}
.boot-divider {
margin: 9px 0;
overflow: hidden;
color: #34425c;
white-space: nowrap;
}
#boot-lines { min-height: 210px; }
.boot-line {
margin: 7px 0;
color: #bfc8d7;
font-size: 12px;
}
.boot-ok {
color: #63f46e;
font-weight: bold;
}
.boot-progress-shell {
height: 14px;
margin-top: 12px;
padding: 2px;
background: #000;
border-top: 2px solid #1d2638;
border-left: 2px solid #1d2638;
border-right: 2px solid #59677e;
border-bottom: 2px solid #59677e;
}
.boot-progress-fill {
width: 0%;
height: 100%;
background: repeating-linear-gradient(90deg, #000080 0 8px, #1084d0 8px 15px, #6bb7ff 15px 17px);
transition: width .16s steps(4, end);
}
.boot-footer-row {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
margin-top: 9px;
}
#boot-status-text {
color: #7d8da8;
font-size: 9px;
}
#skip-boot {
padding: 5px 9px;
background: #101623;
color: #9da9ba;
border-top: 1px solid #53627d;
border-left: 1px solid #53627d;
border-right: 1px solid #121723;
border-bottom: 1px solid #121723;
font-family: "Courier New", monospace;
font-size: 9px;
}
#skip-boot:hover {
color: #fff;
background: #000080;
}
/* ==================================================
DESKTOP
================================================== */
#desktop {
position: relative;
width: 100%;
height: 100vh;
overflow: hidden;
background-color: #3278c8;
background-image:
radial-gradient(circle at 30% 20%, rgba(255,255,255,.12), transparent 28%),
linear-gradient(145deg, #285e9e 0%, #3278c8 48%, #183f70 100%);
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: 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;
padding: 2px 3px;
background: #c0c0c0;
border-top: 2px solid #fff;
box-shadow: inset 0 1px #dfdfdf, 0 -1px #777;
}
#start-button {
height: 34px;
display: inline-flex;
align-items: center;
gap: 5px;
margin-left: 1px;
padding: 0 10px 0 7px;
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;
box-shadow: inset 1px 1px #dfdfdf;
}
#start-button.active,
#start-button:active {
padding-top: 2px;
border-top: 2px solid #333;
border-left: 2px solid #333;
border-right: 2px solid #fff;
border-bottom: 2px solid #fff;
box-shadow: inset 1px 1px #777;
}
.start-logo {
width: 18px;
height: 16px;
display: inline-grid;
place-items: center;
margin-right: 1px;
background: linear-gradient(135deg, #f33 0 24%, #0a5 24% 49%, #1684d8 49% 74%, #f2cf23 74% 100%);
color: transparent;
border: 1px solid #555;
transform: skewY(-8deg);
}
#taskbar-apps {
flex: 1;
display: flex;
gap: 3px;
min-width: 0;
padding: 0 5px;
overflow: hidden;
}
.taskbar-button {
width: 160px;
max-width: 190px;
min-width: 48px;
height: 31px;
display: flex;
align-items: center;
gap: 6px;
padding: 0 7px;
background: #c0c0c0;
border-top: 2px solid #fff;
border-left: 2px solid #fff;
border-right: 2px solid #333;
border-bottom: 2px solid #333;
overflow: hidden;
white-space: nowrap;
text-align: left;
font-size: 11px;
}
.taskbar-button-label {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.taskbar-button.active {
padding-top: 2px;
background: repeating-linear-gradient(45deg, #d8d8d8 0 2px, #c5c5c5 2px 4px);
border-top: 2px solid #333;
border-left: 2px solid #333;
border-right: 2px solid #fff;
border-bottom: 2px solid #fff;
}
.taskbar-mini-icon {
position: relative;
flex: 0 0 18px;
width: 18px;
height: 18px;
display: inline-block;
background: #efefef;
border: 1px solid #444;
box-shadow: inset 1px 1px #fff;
image-rendering: pixelated;
}
.taskbar-mini-icon::after {
position: absolute;
inset: 0;
display: grid;
place-items: center;
color: #111;
font: bold 10px Arial, sans-serif;
line-height: 1;
}
.taskbar-mini-icon[data-icon="browser"]::after { content: "e"; color: #0050c8; font-style: italic; }
.taskbar-mini-icon[data-icon="computer"]::after { content: "▣"; color: #002080; }
.taskbar-mini-icon[data-icon="recycle"]::after { content: "⌫"; }
.taskbar-mini-icon[data-icon="folder"]::after { content: "▰"; color: #d69800; }
.taskbar-mini-icon[data-icon="picture"]::after { content: "▧"; color: #087a2a; }
.taskbar-mini-icon[data-icon="camera"]::after { content: "●"; color: #20354f; }
.taskbar-mini-icon[data-icon="globe"]::after { content: "◎"; color: #005bd7; }
.taskbar-mini-icon[data-icon="terminal"]::after { content: ">_"; color: #00b000; font-size: 7px; background: #111; }
.taskbar-mini-icon[data-icon="control"]::after { content: "▥"; color: #700070; }
.taskbar-mini-icon[data-icon="notepad"]::after { content: "≡"; color: #003a8c; background: #fff; }
.taskbar-mini-icon[data-icon="paint"]::after { content: "●"; color: #e00000; background: #f3c85e; }
.taskbar-mini-icon[data-icon="media"]::after { content: "▶"; color: #68ff24; background: #111; }
.taskbar-mini-icon[data-icon="mine"]::after { content: "✹"; color: #d00000; }
.taskbar-mini-icon[data-icon="cards"]::after { content: "♥"; color: #c00000; background: #fff; }
.taskbar-mini-icon[data-icon="calc"]::after { content: "123"; font-size: 6px; }
.taskbar-mini-icon[data-icon="book"]::after { content: "▥"; color: #734b16; }
.taskbar-mini-icon[data-icon="yearbook"]::after { content: "96"; color: #ffe58a; background: #7c1717; font-size: 7px; }
.taskbar-mini-icon[data-icon="display"]::after { content: "▣"; color: #0059b7; }
.taskbar-mini-icon[data-icon="find"]::after { content: "?"; color: #004cb2; }
.taskbar-mini-icon[data-icon="help"]::after { content: "?"; color: #000080; }
.taskbar-mini-icon[data-icon="run"]::after { content: "▶"; color: #006000; }
.taskbar-mini-icon[data-icon="window"]::after { content: "□"; }
#system-tray {
display: flex;
align-items: center;
gap: 2px;
height: 34px;
margin-right: 1px;
padding: 2px 3px;
border-top: 2px solid #777;
border-left: 2px solid #777;
border-right: 2px solid #fff;
border-bottom: 2px solid #fff;
font-size: 11px;
}
.tray-indicator {
position: relative;
width: 25px;
height: 24px;
padding: 0;
display: inline-flex;
align-items: center;
justify-content: center;
background: transparent;
border: 1px solid transparent;
color: #111;
}
.tray-indicator:hover,
.tray-indicator:focus-visible {
background: #d7d7d7;
border-top: 1px solid #fff;
border-left: 1px solid #fff;
border-right: 1px solid #777;
border-bottom: 1px solid #777;
outline: 0;
}
.tray-network-led {
position: absolute;
right: 2px;
bottom: 3px;
width: 5px;
height: 5px;
background: #00b800;
border: 1px solid #005000;
animation: trayNetworkBlink 3.5s steps(2, end) infinite;
}
.tray-network-pc {
color: #003b85;
font-size: 15px;
}
.tray-speaker {
color: #263b63;
font-size: 18px;
line-height: 1;
}
.tray-wave {
margin-left: -4px;
color: #111;
font: bold 7px Arial, sans-serif;
}
.tray-sound.muted .tray-wave { display: none; }
.tray-sound.muted::after {
content: "×";
position: absolute;
right: 2px;
top: 1px;
color: #d00000;
font: bold 13px Arial, sans-serif;
}
.tray-clock-well {
min-width: 64px;
padding: 2px 7px;
display: flex;
align-items: center;
justify-content: center;
border-left: 1px solid #777;
font-size: 10px;
white-space: nowrap;
}
@keyframes trayNetworkBlink {
0%, 92% { background: #00b800; }
93%, 100% { background: #aaff00; }
}
/* ==================================================
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);
}
/* ==================================================
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-yearbook-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;
}
/* ==================================================
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:
radial-gradient(circle at 30% 20%, rgba(255,255,255,.12), transparent 28%),
linear-gradient(145deg, #285e9e 0%, #3278c8 48%, #183f70 100%);
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;
}
/* ==================================================
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,
#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,
{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;
overflow: hidden;
background: linear-gradient(180deg, #06183b 0%, #245b96 47%, #6da1ce 68%, #0a2450 100%);
color: #f6f6f6;
cursor: pointer;
}
.shutdown-screen::before {
content: "";
position: absolute;
inset: 0;
pointer-events: none;
background: repeating-linear-gradient(to bottom, rgba(255,255,255,.02) 0 1px, rgba(0,0,0,.03) 1px 3px);
}
.shutdown-screen-message {
position: relative;
z-index: 2;
width: min(590px, 90vw);
padding: 34px 24px 28px;
text-align: center;
font-family: Arial, sans-serif;
}
.shutdown-clouds {
position: absolute;
left: -8vw;
right: -8vw;
top: -95px;
display: flex;
justify-content: space-around;
color: rgba(255,255,255,.2);
font-size: 140px;
filter: blur(1px);
pointer-events: none;
}
.shutdown-brand {
position: relative;
display: flex;
align-items: center;
justify-content: center;
gap: 16px;
margin-bottom: 17px;
}
.shutdown-logo {
width: 68px;
height: 58px;
display: grid;
grid-template-columns: 1fr 1fr;
gap: 3px;
transform: skewY(-8deg);
filter: drop-shadow(3px 3px 0 rgba(0,0,0,.55));
}
.shutdown-pane {
display: block;
border: 1px solid rgba(255,255,255,.45);
}
.shutdown-red { background: #ef2d27; }
.shutdown-green { background: #13a33a; }
.shutdown-blue { background: #2385d8; }
.shutdown-yellow { background: #f3cf24; }
.shutdown-microsoft {
color: #fff;
font-size: 15px;
font-style: italic;
text-align: left;
}
.shutdown-screen-title {
color: #fff;
font-size: 39px;
font-weight: bold;
font-style: italic;
text-align: left;
text-shadow: 3px 3px #000080;
}
.shutdown-screen-message p {
margin: 24px 0 9px;
color: #ffef9b;
font: bold 20px "Times New Roman", serif;
text-shadow: 1px 1px #000;
}
.shutdown-blink {
height: 20px;
color: #fff;
font: bold 18px "Courier New", monospace;
animation: shutdownCursorBlink .8s steps(2, end) infinite;
}
.shutdown-screen-message small {
color: rgba(255,255,255,.58);
font: 10px "Courier New", monospace;
}
@keyframes shutdownCursorBlink {
0%, 49% { opacity: 1; }
50%, 100% { opacity: 0; }
}
/* ==================================================
EXTERIOR POLISH — THEMES / CRT / SCROLLBARS / BADGES
================================================== */
:root {
--shell-title-start: #000080;
--shell-title-end: #1084d0;
--shell-accent: #000080;
}
html[data-shell-theme="webspace"] {
--shell-title-start: #001f80;
--shell-title-end: #18a0e8;
--shell-accent: #004fb8;
}
html[data-shell-theme="midnight"] {
--shell-title-start: #1c083f;
--shell-title-end: #7342a3;
--shell-accent: #432064;
}
html[data-shell-theme="teal-machine"] {
--shell-title-start: #004c4c;
--shell-title-end: #009b94;
--shell-accent: #006b67;
}
html[data-shell-theme] .window-titlebar {
background: linear-gradient(90deg, var(--shell-title-start), var(--shell-title-end));
}
html[data-shell-theme] .window.inactive .window-titlebar {
background: linear-gradient(90deg, #727272, #a8a8a8);
}
html[data-shell-theme="midnight"] #start-menu .start-menu-sidebar {
background: linear-gradient(#1c083f, #5b2c82);
}
html[data-shell-theme="teal-machine"] #start-menu .start-menu-sidebar {
background: linear-gradient(#003f3f, #007f79);
}
#desktop.crt-glow::after {
content: "";
position: absolute;
inset: 0;
z-index: 900;
pointer-events: none;
background: radial-gradient(ellipse at center, transparent 48%, rgba(0,0,0,.10) 76%, rgba(0,0,0,.30) 100%);
box-shadow: inset 0 0 42px rgba(93,185,255,.10);
mix-blend-mode: multiply;
}
.display-preview-desktop[data-shell-theme="classic"] { box-shadow: inset 0 6px #000080; }
.display-preview-desktop[data-shell-theme="webspace"] { box-shadow: inset 0 6px #1084d0; }
.display-preview-desktop[data-shell-theme="midnight"] { box-shadow: inset 0 6px #5b2c82; }
.display-preview-desktop[data-shell-theme="teal-machine"] { box-shadow: inset 0 6px #007f79; }
.window-content,
.yearbook-content,
.solitaire-table,
#notepad-textarea,
textarea {
scrollbar-width: auto;
scrollbar-color: #c0c0c0 #e7e7e7;
}
.window-content::-webkit-scrollbar,
.yearbook-content::-webkit-scrollbar,
.solitaire-table::-webkit-scrollbar,
#notepad-textarea::-webkit-scrollbar,
textarea::-webkit-scrollbar {
width: 17px;
height: 17px;
}
.window-content::-webkit-scrollbar-track,
.yearbook-content::-webkit-scrollbar-track,
.solitaire-table::-webkit-scrollbar-track,
#notepad-textarea::-webkit-scrollbar-track,
textarea::-webkit-scrollbar-track {
background: repeating-linear-gradient(45deg, #e6e6e6 0 2px, #f7f7f7 2px 4px);
border: 1px solid #888;
}
.window-content::-webkit-scrollbar-thumb,
.yearbook-content::-webkit-scrollbar-thumb,
.solitaire-table::-webkit-scrollbar-thumb,
#notepad-textarea::-webkit-scrollbar-thumb,
textarea::-webkit-scrollbar-thumb {
min-height: 24px;
background: #c0c0c0;
border-top: 2px solid #fff;
border-left: 2px solid #fff;
border-right: 2px solid #555;
border-bottom: 2px solid #555;
}
.window-content::-webkit-scrollbar-corner,
.yearbook-content::-webkit-scrollbar-corner,
.solitaire-table::-webkit-scrollbar-corner {
background: #c0c0c0;
}
.desktop-icon.selected,
.desktop-icon:focus-visible {
background: rgba(0,0,128,.48);
border: 1px dotted #fff;
outline: 1px dotted rgba(0,0,0,.55);
outline-offset: -3px;
}
.desktop-icon.selected > span:last-child,
.desktop-icon:focus-visible > span:last-child {
padding: 1px 3px;
background: #000080;
color: #fff;
text-shadow: none;
}
.retro-badge-rack {
position: absolute;
right: 26px;
bottom: 47px;
width: 192px;
display: grid;
grid-template-columns: repeat(2, 88px);
gap: 4px 6px;
pointer-events: none;
}
.retro-88 {
width: 88px;
height: 31px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
overflow: hidden;
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,.35);
font: bold 7px Arial, sans-serif;
line-height: 8px;
text-align: center;
image-rendering: pixelated;
}
.retro-88 strong {
font-size: 9px;
letter-spacing: .5px;
}
.badge-notepad {
background: repeating-linear-gradient(0deg, #fff 0 5px, #d5e6ff 5px 6px);
color: #000080;
}
.badge-ie {
background: linear-gradient(135deg, #001b68, #0d91e5);
color: #fff;
}
.badge-y2k {
background: #000;
color: #00ff55;
font-family: "Courier New", monospace;
}
.badge-noframes {
background: linear-gradient(90deg, #ff00cc, #ffff00, #00ffff);
color: #000;
}
.window-titlebar,
#taskbar,
#start-menu,
.desktop-context-menu {
image-rendering: pixelated;
}
@media (min-width: 701px) and (max-height: 820px) {
.retro-badge-rack {
right: 18px;
bottom: 45px;
transform: scale(.86);
transform-origin: right bottom;
}
.best-viewed,
.badge-html {
transform: scale(.9);
transform-origin: right bottom;
}
}
@media (max-width: 700px) {
.retro-badge-rack {
display: none;
}
}
/* ==================================================
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;
}
}
/* ==================================================
FINAL EXTERIOR CLEANUP
deliberate badge cluster / decor balance / taskbar grips
================================================== */
/*
Bottom-right old-web decorations are arranged as one deliberate
cluster instead of independent overlapping pieces.
*/
.online-sticker {
right: 214px;
bottom: 127px;
width: 92px;
}
.badge-html {
right: 120px;
bottom: 127px;
}
.best-viewed {
right: 26px;
bottom: 127px;
width: 88px;
height: 31px;
box-sizing: border-box;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 2px 4px;
line-height: 9px;
}
.retro-badge-rack {
right: 26px;
bottom: 54px;
width: 182px;
grid-template-columns:
repeat(
2,
88px
);
gap: 4px 6px;
}
/*
Move the smiley into the right-side webcore decoration zone so
it reads as decorative homepage clutter rather than another app.
*/
.smiley-sticker {
left: auto;
right: 318px;
top: 305px;
bottom: auto;
width: 62px;
transform:
rotate(8deg);
filter:
drop-shadow(
2px 2px 0 rgba(0,0,0,.28)
);
}
/* --------------------------------------------------
WINDOWS 95 TASKBAR SEPARATOR / GRIP DETAILS
-------------------------------------------------- */
#taskbar-apps {
position: relative;
margin-left: 6px;
padding-left: 10px;
}
#taskbar-apps::before {
content: "";
position: absolute;
left: 1px;
top: 5px;
bottom: 5px;
width: 4px;
border-left: 1px solid #777;
border-right: 1px solid #fff;
box-shadow:
2px 0 0 #9d9d9d;
}
#system-tray {
position: relative;
margin-left: 7px;
}
#system-tray::before {
content: "";
position: absolute;
left: -7px;
top: 4px;
bottom: 4px;
width: 4px;
border-left: 1px solid #777;
border-right: 1px solid #fff;
box-shadow:
2px 0 0 #9d9d9d;
}
/*
Slightly stronger classic selected-icon state.
Still intentionally flat/pixel-era rather than modern.
*/
.desktop-icon.selected,
.desktop-icon:focus-visible {
background:
rgba(0, 0, 128, .58);
box-shadow:
inset 1px 1px 0 rgba(255,255,255,.18);
}
.desktop-icon.selected > span:last-child,
.desktop-icon:focus-visible > span:last-child {
border:
1px dotted rgba(255,255,255,.78);
box-shadow:
1px 1px 0 rgba(0,0,0,.28);
}
/* --------------------------------------------------
110% / SHORTER VIEWPORT — KEEP THE CLUSTER INTACT
-------------------------------------------------- */
@media (min-width: 701px) and (max-height: 820px) {
.online-sticker {
right: 194px;
bottom: 117px;
width: 82px;
}
.badge-html {
right: 106px;
bottom: 117px;
transform: none;
}
.best-viewed {
right: 18px;
bottom: 117px;
transform: none;
}
.retro-badge-rack {
right: 18px;
bottom: 47px;
transform:
scale(.86);
transform-origin:
right bottom;
}
.smiley-sticker {
right: 290px;
top: 285px;
width: 56px;
}
}
/* --------------------------------------------------
SMALLER DESKTOP WIDTHS — REDUCE DECOR FOOTPRINT
-------------------------------------------------- */
@media (min-width: 701px) and (max-width: 1100px) {
.smiley-sticker {
right: 285px;
top: 300px;
width: 54px;
}
.retro-badge-rack {
transform:
scale(.9);
transform-origin:
right bottom;
}
}
/* Decorative pieces remain non-interactive. */
.smiley-sticker,
.retro-badge-rack,
.best-viewed,
.badge-html,
.online-sticker {
pointer-events: none;
}
/* ==================================================
BULLWORTH ACADEMY — STUDENT TERMINAL THEME
================================================== */
:root {
--bw-green: #102f27;
--bw-green-2: #174438;
--bw-green-3: #0b211b;
--bw-gold: #b68a3a;
--bw-gold-light: #d3b064;
--bw-cream: #e8dfc8;
--bw-paper: #d9cba8;
--bw-paper-light: #f0e8d3;
--bw-ink: #201d17;
--bw-wood: #3a2619;
--bw-wood-dark: #25170f;
--bw-red: #7b2522;
--bw-navy: #112d36;
}
/* --------------------------------------------------
DESKTOP / WALLPAPER
-------------------------------------------------- */
#desktop {
color: var(--bw-cream);
background:
linear-gradient(
90deg,
rgba(255,255,255,.018)
1px,
transparent
1px
)
0 0 / 5px 5px,
radial-gradient(
circle at 54% 42%,
rgba(182,138,58,.11),
transparent 31%
),
linear-gradient(
180deg,
#142d26 0%,
#0b211b 63%,
#3a2619 64%,
#25170f 100%
) !important;
}
#desktop::before {
content: "";
position: absolute;
inset: 0;
pointer-events: none;
background:
radial-gradient(
circle at 50% 36%,
transparent 0 45%,
rgba(0,0,0,.14) 100%
);
z-index: 0;
}
/* --------------------------------------------------
DESKTOP ICONS
-------------------------------------------------- */
.desktop-icons {
z-index: 20;
width: 225px;
height: calc(100vh - 60px);
display: flex;
flex-flow: column wrap;
align-content: flex-start;
gap: 5px 6px;
}
.desktop-icon {
width: 102px;
flex: 0 0 76px;
color: #f3ead5;
text-shadow:
1px 1px 0 #000,
0 2px 3px rgba(0,0,0,.9);
}
.desktop-icon-image,
.desktop-program-icon,
.desktop-recycle-icon {
filter:
sepia(.28)
saturate(.86)
drop-shadow(
2px 2px 0 rgba(0,0,0,.58)
);
}
.desktop-icon.selected,
.desktop-icon:focus-visible {
background:
rgba(182,138,58,.20);
border:
1px dotted var(--bw-gold-light);
outline:
1px dotted rgba(0,0,0,.8);
}
.desktop-icon.selected > span:last-child,
.desktop-icon:focus-visible > span:last-child {
background:
#183b32;
border:
1px solid #b68a3a;
color:
#f3e5bb;
}
/* --------------------------------------------------
WALLPAPER BRAND
-------------------------------------------------- */
.bullworth-desktop-brand {
position: absolute;
left: 42%;
bottom: 78px;
z-index: 1;
transform:
translateX(-50%);
text-align: center;
color:
rgba(182,138,58,.25);
pointer-events: none;
}
.bullworth-wall-crest {
width: 150px;
height: 175px;
margin: 0 auto 7px;
display: grid;
place-items: center;
border:
4px double
rgba(182,138,58,.34);
clip-path:
polygon(
50% 0,
94% 14%,
89% 72%,
50% 100%,
11% 72%,
6% 14%
);
font:
bold 92px
Georgia,
serif;
}
.bullworth-wall-title {
font:
bold 28px
Georgia,
serif;
letter-spacing:
4px;
}
.bullworth-wall-motto {
margin-top: 5px;
font:
11px
Georgia,
serif;
letter-spacing:
6px;
}
/* --------------------------------------------------
WINDOWS
-------------------------------------------------- */
html[data-shell-theme="bullworth"] {
--shell-title-start: #112d36;
--shell-title-end: #174438;
--shell-accent: #b68a3a;
}
.window {
background:
#c9bea5;
border-top-color:
#e8dfc8;
border-left-color:
#e8dfc8;
border-right-color:
#30251b;
border-bottom-color:
#30251b;
box-shadow:
4px 5px 0
rgba(0,0,0,.28);
}
.window-titlebar {
background:
linear-gradient(
90deg,
#112d36,
#174438
) !important;
color:
#f2dfad;
border-bottom:
1px solid #b68a3a;
font-family:
Georgia,
"Times New Roman",
serif;
}
.window.inactive .window-titlebar {
background:
linear-gradient(
90deg,
#4a4b43,
#777263
) !important;
color:
#e3dac6;
}
.window-menu,
.window-statusbar {
background:
#cbbfa6;
color:
#2c261e;
border-color:
#6e624e;
}
.window-content {
background:
#e9dfc6;
color:
#282219;
}
/* --------------------------------------------------
BROWSER / SCHOOL NETWORK
-------------------------------------------------- */
.browser-toolbar {
background:
#cbbfa6;
}
.address-field {
background:
#f7efd8;
color:
#2b271f;
border:
2px inset #b9aa8a;
}
.bullworth-intranet {
padding: 0 !important;
background:
#e2d7bd !important;
}
.bullworth-intranet-banner {
display: grid;
grid-template-columns:
92px 1fr 160px;
align-items: center;
gap: 12px;
padding:
11px 16px;
background:
linear-gradient(
90deg,
#112d36,
#0d242c
);
border-bottom:
4px double #b68a3a;
color:
#d9b763;
}
.bullworth-intranet-crest {
width: 68px;
height: 78px;
display: grid;
place-items: center;
border:
3px double #b68a3a;
clip-path:
polygon(
50% 0,
94% 14%,
89% 72%,
50% 100%,
11% 72%,
6% 14%
);
font:
bold 38px
Georgia,
serif;
}
.bullworth-intranet-banner h1 {
margin: 0;
font:
bold 31px
Georgia,
serif;
letter-spacing:
2px;
}
.bullworth-intranet-banner p {
margin: 3px 0 0;
letter-spacing:
7px;
}
.bullworth-intranet-values {
justify-self: end;
color:
#ceb06c;
font:
12px
Georgia,
serif;
letter-spacing:
2px;
line-height:
1.65;
}
.bullworth-intranet-body {
display: grid;
grid-template-columns:
165px
minmax(260px,1fr)
260px;
min-height:
360px;
}
.bullworth-intranet-nav {
display: flex;
flex-direction: column;
background:
#cdbf9f;
border-right:
2px solid #8b7854;
}
.bullworth-intranet-nav button {
min-height:
36px;
padding:
7px 10px;
background:
linear-gradient(
#eee4cc,
#d8c9a7
);
border:
0;
border-bottom:
1px solid #aa9873;
color:
#282219;
text-align:
left;
}
.bullworth-intranet-nav button:hover {
background:
#112d36;
color:
#e8d199;
}
.bullworth-campus-feature {
padding:
12px;
background:
#d9cdae;
}
.bullworth-campus-art {
position: relative;
height:
245px;
overflow:
hidden;
border:
5px solid #eee4ca;
outline:
1px solid #6b5738;
background:
linear-gradient(
180deg,
#8e927f 0%,
#c2ad85 45%,
#68583a 46%,
#3c3525 100%
);
}
.bullworth-campus-art::before {
content: "";
position: absolute;
inset: 0;
background:
repeating-linear-gradient(
to bottom,
transparent 0 3px,
rgba(0,0,0,.055)
3px 4px
);
pointer-events:
none;
}
.bullworth-campus-building {
position: absolute;
left: 50%;
bottom: 18px;
width: 230px;
height: 145px;
transform:
translateX(-50%);
background:
#64513a;
border:
4px solid #31281c;
box-shadow:
inset 0 0 0 3px #9c8056;
}
.bullworth-campus-building .tower {
position: absolute;
left: 50%;
top: -58px;
width: 67px;
height: 62px;
transform:
translateX(-50%);
background:
#68533a;
border:
4px solid #31281c;
}
.bullworth-campus-building .tower::before {
content: "";
position: absolute;
left: 50%;
top: -30px;
width: 0;
height: 0;
transform:
translateX(-50%);
border-left:
34px solid transparent;
border-right:
34px solid transparent;
border-bottom:
30px solid #403225;
}
.bullworth-campus-building .wing {
position: absolute;
bottom: 0;
width: 80px;
height: 102px;
background:
#5b4934;
border:
3px solid #31281c;
}
.bullworth-campus-building .wing.left {
left: -72px;
}
.bullworth-campus-building .wing.right {
right: -72px;
}
.bullworth-campus-building .door {
position: absolute;
left: 50%;
bottom: 0;
width: 35px;
height: 57px;
transform:
translateX(-50%);
background:
#241d16;
border:
3px solid #aa8954;
}
.bullworth-campus-feature blockquote {
margin:
11px 0 0;
color:
#3b2a1a;
font:
bold 18px
Georgia,
serif;
text-align:
center;
}
.bullworth-announcements {
padding:
10px;
border-left:
1px solid #a69673;
background:
#e4d9bf;
}
.bullworth-announcements h2 {
margin:
0 0 7px;
padding:
6px;
background:
#cbbb98;
border:
1px solid #9a8763;
color:
#382c1f;
font:
bold 14px
Georgia,
serif;
}
.bullworth-announcements button {
width:
100%;
display:
block;
margin-bottom:
7px;
padding:
9px;
background:
#efe6d1;
border:
1px solid #a69673;
color:
#2d261d;
text-align:
left;
}
.bullworth-announcements button:hover {
background:
#fff5da;
}
.bullworth-announcements strong,
.bullworth-announcements span {
display:
block;
}
.bullworth-announcements span {
margin-top:
2px;
font-size:
10px;
}
/* --------------------------------------------------
STUDENT ID
-------------------------------------------------- */
.bullworth-id-card {
position:
absolute;
z-index:
30;
right:
155px;
top:
18px;
width:
365px;
height:
190px;
perspective:
900px;
cursor:
pointer;
}
.bullworth-id-inner {
position:
relative;
width:
100%;
height:
100%;
transition:
transform .5s ease;
transform-style:
preserve-3d;
}
.bullworth-id-card.flipped
.bullworth-id-inner {
transform:
rotateY(180deg);
}
.bullworth-id-face {
position:
absolute;
inset:
0;
padding:
9px;
backface-visibility:
hidden;
background:
#d8c7a4;
color:
#2b241a;
border:
5px solid #1a2826;
box-shadow:
0 8px 18px
rgba(0,0,0,.55);
}
.bullworth-id-front header {
display:
flex;
align-items:
center;
gap:
7px;
padding:
6px;
background:
#15382f;
color:
#d2aa58;
}
.bullworth-id-front header div {
display:
flex;
flex-direction:
column;
}
.bullworth-id-front header strong {
font-size:
14px;
letter-spacing:
1px;
}
.bullworth-id-front header small {
color:
#e6d6ac;
font-size:
8px;
letter-spacing:
2px;
}
.bullworth-mini-crest {
flex:
0 0 24px;
width:
24px;
height:
27px;
display:
inline-grid;
place-items:
center;
border:
2px double #b68a3a;
color:
#d8b35c;
clip-path:
polygon(
50% 0,
94% 14%,
89% 72%,
50% 100%,
11% 72%,
6% 14%
);
font:
bold 14px
Georgia,
serif;
}
.bullworth-mini-crest.large {
width:
64px;
height:
72px;
margin:
0 auto 5px;
font-size:
36px;
}
.bullworth-id-grid {
display:
grid;
grid-template-columns:
90px 1fr;
gap:
10px;
margin-top:
8px;
}
.bullworth-portrait {
position:
relative;
height:
89px;
display:
flex;
flex-direction:
column;
align-items:
center;
justify-content:
center;
overflow:
hidden;
background:
linear-gradient(
145deg,
#777566,
#b8aa8c
);
border:
2px solid #493f31;
color:
#393226;
font:
bold 7px
Arial,
sans-serif;
}
.bullworth-silhouette {
position:
relative;
width:
44px;
height:
53px;
margin-bottom:
3px;
background:
#2e322d;
border-radius:
45% 45% 28% 28%;
}
.bullworth-silhouette::before {
content: "";
position:
absolute;
left:
9px;
top:
-17px;
width:
27px;
height:
29px;
background:
#34362f;
border-radius:
48%;
}
.bullworth-id-data {
display:
grid;
grid-template-columns:
49px 1fr;
gap:
3px 5px;
align-content:
start;
font:
10px
Georgia,
serif;
}
.bullworth-id-data > span {
color:
#5a4932;
}
.bullworth-id-data > strong {
overflow:
hidden;
text-overflow:
ellipsis;
white-space:
nowrap;
}
.bullworth-barcode {
margin-top:
4px;
font:
bold 10px
monospace;
letter-spacing:
2px;
text-align:
right;
}
.bullworth-id-front footer {
font:
italic 9px
Georgia,
serif;
}
.bullworth-id-back {
transform:
rotateY(180deg);
text-align:
center;
}
.bullworth-id-back h3 {
margin:
4px 0 8px;
color:
#15382f;
font-size:
13px;
}
.bullworth-id-back p {
margin:
4px 0;
font-size:
10px;
}
.bullworth-id-back small {
display:
block;
margin-top:
10px;
color:
#6a5b43;
}
.bullworth-restricted {
color:
#7b2522;
font-weight:
bold;
}
/* --------------------------------------------------
CLOCK
-------------------------------------------------- */
.bullworth-clock-card {
position:
absolute;
z-index:
29;
right:
18px;
top:
16px;
width:
122px;
text-align:
center;
}
.bullworth-analog-clock {
position:
relative;
width:
112px;
height:
112px;
margin:
0 auto;
border-radius:
50%;
background:
radial-gradient(
circle,
#e8dfc7 0%,
#d4c39e 72%,
#9e875d 100%
);
border:
7px solid #34281e;
box-shadow:
0 5px 14px
rgba(0,0,0,.65),
inset 0 0 0 2px #8d744a;
}
.bullworth-clock-number {
position:
absolute;
color:
#271f17;
font:
bold 12px
Georgia,
serif;
}
.bullworth-clock-number.n12 {
top:
5px;
left:
50%;
transform:
translateX(-50%);
}
.bullworth-clock-number.n3 {
right:
7px;
top:
50%;
transform:
translateY(-50%);
}
.bullworth-clock-number.n6 {
bottom:
5px;
left:
50%;
transform:
translateX(-50%);
}
.bullworth-clock-number.n9 {
left:
7px;
top:
50%;
transform:
translateY(-50%);
}
.bullworth-hand {
position:
absolute;
left:
50%;
bottom:
50%;
width:
3px;
background:
#241d16;
transform-origin:
50% 100%;
border-radius:
2px;
}
.bullworth-hour-hand {
height:
27px;
}
.bullworth-minute-hand {
width:
2px;
height:
38px;
}
.bullworth-clock-dot {
position:
absolute;
left:
50%;
top:
50%;
width:
8px;
height:
8px;
transform:
translate(-50%,-50%);
border-radius:
50%;
background:
#221b14;
}
.bullworth-date-label,
.bullworth-period-label {
display:
block;
padding:
4px;
background:
#cbb784;
color:
#2a2219;
border-left:
3px solid #4b3825;
border-right:
3px solid #4b3825;
font:
9px
Georgia,
serif;
}
.bullworth-period-label {
border-bottom:
3px solid #4b3825;
color:
#54351d;
font-weight:
bold;
}
/* --------------------------------------------------
TROUBLE METER
-------------------------------------------------- */
.bullworth-trouble-widget {
position:
absolute;
z-index:
28;
right:
354px;
top:
220px;
width:
265px;
padding:
8px 10px;
background:
linear-gradient(
#142f29,
#0b1d19
);
border:
4px double #b68a3a;
box-shadow:
0 5px 12px
rgba(0,0,0,.45);
color:
#d8bd75;
}
.bullworth-trouble-title {
display:
flex;
align-items:
center;
justify-content:
center;
gap:
6px;
margin-bottom:
6px;
font:
bold 11px
Georgia,
serif;
letter-spacing:
1px;
}
.bullworth-trouble-cells {
display:
grid;
grid-template-columns:
repeat(
5,
1fr
);
gap:
3px;
}
.bullworth-trouble-cells i {
height:
14px;
background:
#282a23;
border:
1px solid #77684a;
box-shadow:
inset 0 0 0 1px #111;
}
.bullworth-trouble-cells i.active {
background:
linear-gradient(
#e2b34a,
#a86820
);
}
#bullworth-trouble-text {
display:
block;
margin-top:
4px;
color:
#b8a77d;
font:
8px
Arial,
sans-serif;
text-align:
center;
}
/* --------------------------------------------------
NOTICE BOARD
-------------------------------------------------- */
.bullworth-notice-board {
position:
absolute;
z-index:
25;
right:
18px;
bottom:
58px;
width:
330px;
height:
330px;
display:
grid;
grid-template-columns:
1fr 1fr;
grid-template-rows:
35px 1fr 1fr 36px;
gap:
10px;
padding:
15px;
background:
radial-gradient(
circle,
rgba(255,255,255,.06)
0 1px,
transparent
2px
)
0 0 / 7px 7px,
#6c4a30;
border:
9px solid #392416;
box-shadow:
0 8px 18px
rgba(0,0,0,.6);
transform:
rotate(-.25deg);
}
.bullworth-notice-board h3 {
grid-column:
1 / -1;
margin:
0;
display:
flex;
align-items:
center;
justify-content:
center;
background:
#ccb889;
border:
3px double #4a3320;
color:
#38271c;
font:
bold 12px
Georgia,
serif;
letter-spacing:
1px;
}
.bullworth-notice {
position:
relative;
padding:
11px 8px;
background:
#e3d4ad;
border:
1px solid #8e754c;
box-shadow:
2px 3px 0
rgba(0,0,0,.24);
color:
#38291d;
text-align:
center;
transform:
rotate(var(--notice-rotate,0deg));
}
.bullworth-notice::before {
content:
"";
position:
absolute;
top:
4px;
left:
50%;
width:
8px;
height:
8px;
transform:
translateX(-50%);
border-radius:
50%;
background:
#9c6e2e;
box-shadow:
inset 1px 1px #e4bb61;
}
.bullworth-notice strong {
display:
block;
margin-top:
4px;
color:
#6f211c;
font-size:
11px;
}
.bullworth-notice span {
display:
block;
margin-top:
5px;
font-size:
8px;
line-height:
1.35;
}
.bullworth-notice:nth-of-type(2) {
--notice-rotate:
-1deg;
}
.bullworth-notice:nth-of-type(3) {
--notice-rotate:
.8deg;
}
.bullworth-notice:nth-of-type(4) {
--notice-rotate:
-.5deg;
}
.bullworth-session-counter {
grid-column:
1 / -1;
display:
flex;
flex-direction:
column;
align-items:
stretch;
gap:
4px;
padding:
5px 8px;
background:
#1a302a;
border:
2px inset #705c3c;
color:
#d7bd7e;
font:
bold 8px
"Courier New",
monospace;
}
.bullworth-counter-row {
display:
flex;
align-items:
center;
justify-content:
space-between;
gap:
8px;
}
.bullworth-session-counter
.visitor-counter,
.bullworth-session-counter
.online-counter {
padding:
2px 5px;
background:
#09110f;
color:
#7bff58;
font:
bold 9px
"Courier New",
monospace;
letter-spacing:
2px;
}
/* --------------------------------------------------
BOTTOM PLAQUE
-------------------------------------------------- */
.bullworth-bottom-plaque {
position:
absolute;
z-index:
3;
left:
50%;
bottom:
52px;
transform:
translateX(-50%);
min-width:
440px;
display:
flex;
flex-direction:
column;
align-items:
center;
color:
rgba(196,155,73,.72);
pointer-events:
none;
}
.bullworth-bottom-plaque strong {
font:
bold 28px
Georgia,
serif;
letter-spacing:
5px;
}
.bullworth-bottom-plaque span {
margin-top:
2px;
font:
10px
Georgia,
serif;
letter-spacing:
6px;
}
/* --------------------------------------------------
START MENU / TASKBAR
-------------------------------------------------- */
#start-menu {
background:
#d6c9aa;
border-color:
#33261b;
box-shadow:
5px 6px 0
rgba(0,0,0,.35);
}
.start-menu-sidebar {
background:
linear-gradient(
#102f27,
#1b4a3d
) !important;
color:
#d9b45f;
font-family:
Georgia,
serif;
letter-spacing:
3px;
}
.start-menu-row,
.start-submenu button {
color:
#2d261d;
}
.start-menu-row:hover,
.start-submenu button:hover {
background:
#15382f;
color:
#efd9a5;
}
#taskbar {
background:
#b9ae96;
border-top-color:
#eee4cc;
box-shadow:
inset 0 1px #d9cdb2,
0 -1px #514839;
}
#start-button {
color:
#2a241b;
font-family:
Georgia,
serif;
letter-spacing:
.5px;
}
.bullworth-start-crest {
display:
inline-grid !important;
place-items:
center;
background:
#12372e !important;
border:
1px solid #8c6d35 !important;
color:
#d6ad56 !important;
font:
bold 10px
Georgia,
serif;
}
#system-tray {
background:
#c2b69c;
}
.tray-network-pc,
.tray-speaker {
color:
#173b33;
}
/* --------------------------------------------------
YEARBOOK
-------------------------------------------------- */
.yearbook-header {
background:
#eadfc0;
}
.yearbook-header h2,
.yearbook-form-heading,
.yearbook-pages-heading h3,
.yearbook-entry-name {
color:
#17382f;
}
.yearbook-rule {
background:
repeating-linear-gradient(
90deg,
#17382f 0 24px,
#b68a3a 24px 34px,
#7b2522 34px 48px,
#b68a3a 48px 58px
);
}
.yearbook-seal {
background:
#15382f;
color:
#dfbd70;
}
.yearbook-entry::after {
content:
"★ BULLWORTH ★";
}
/* --------------------------------------------------
RADIO / MEDIA PLAYER
-------------------------------------------------- */
.media-player-window {
border-color:
#31271c;
}
.media-player-shell {
background:
linear-gradient(
#4f3c28,
#2b2118
);
}
.media-player-display {
background:
#09130f;
color:
#7ef45f;
border-color:
#907442;
}
/* --------------------------------------------------
BOOT / SHUTDOWN
-------------------------------------------------- */
#boot-screen {
background:
radial-gradient(
circle at 50% 38%,
#163e32 0%,
#07120f 56%,
#020604 100%
);
}
.boot-bios-bar {
background:
#112d36;
color:
#d7b767;
}
.boot-title {
color:
#d8b45d;
text-shadow:
2px 2px #05110e;
}
.boot-logo {
border:
3px double #b68a3a;
clip-path:
polygon(
50% 0,
94% 14%,
89% 72%,
50% 100%,
11% 72%,
6% 14%
);
background:
#112d36;
transform:
none;
}
.boot-logo-pane {
display:
none;
}
.boot-logo::before {
content:
"B";
display:
grid;
place-items:
center;
width:
100%;
height:
100%;
color:
#d5ae59;
font:
bold 31px
Georgia,
serif;
}
.boot-progress-fill {
background:
repeating-linear-gradient(
90deg,
#6c5228 0 8px,
#b68a3a 8px 15px,
#e0c377 15px 17px
);
}
.shutdown-screen {
background:
radial-gradient(
circle at 50% 38%,
#173a31,
#07130f 70%
);
}
.shutdown-clouds {
display:
none;
}
.shutdown-logo {
border:
4px double #b68a3a;
clip-path:
polygon(
50% 0,
94% 14%,
89% 72%,
50% 100%,
11% 72%,
6% 14%
);
transform:
none;
}
.shutdown-pane {
display:
none;
}
.shutdown-logo::before {
content:
"B";
display:
grid;
place-items:
center;
width:
100%;
height:
100%;
color:
#d9b45f;
font:
bold 39px
Georgia,
serif;
}
.shutdown-microsoft {
display:
none;
}
.shutdown-screen-title {
color:
#d8b45f;
text-shadow:
2px 2px #000;
}
/* --------------------------------------------------
HIDE OLD WEBCORE-SPECIFIC DECORATION CLASSES IF ANY
-------------------------------------------------- */
.webcore-clutter,
.desktop-note,
.homepage-banner-img,
.internet-sticker,
.sparkle-gif,
.construction-gif,
.mail-gif,
.smiley-sticker,
.online-sticker,
.retro-badge-rack,
.best-viewed,
.badge-html {
display:
none !important;
}
/* --------------------------------------------------
RESPONSIVE / 110% ZOOM
-------------------------------------------------- */
@media (max-width: 1180px) {
.bullworth-id-card {
right:
138px;
width:
335px;
}
.bullworth-trouble-widget {
right:
325px;
width:
235px;
}
.bullworth-notice-board {
width:
300px;
}
.bullworth-bottom-plaque {
min-width:
350px;
transform:
translateX(-43%)
scale(.88);
}
}
@media (max-height: 820px) and (min-width: 701px) {
.bullworth-id-card {
top:
12px;
transform:
scale(.86);
transform-origin:
right top;
}
.bullworth-clock-card {
top:
11px;
transform:
scale(.87);
transform-origin:
right top;
}
.bullworth-trouble-widget {
top:
184px;
transform:
scale(.88);
transform-origin:
right top;
}
.bullworth-notice-board {
bottom:
48px;
transform:
rotate(-.25deg)
scale(.84);
transform-origin:
right bottom;
}
.bullworth-bottom-plaque {
bottom:
45px;
transform:
translateX(-50%)
scale(.8);
}
}
@media (max-width: 700px) {
.bullworth-id-card,
.bullworth-clock-card,
.bullworth-trouble-widget,
.bullworth-notice-board,
.bullworth-bottom-plaque,
.bullworth-desktop-brand {
display:
none;
}
.desktop-icons {
width:
310px;
height:
calc(100vh - 82px);
}
}
/* ==================================================
BULLWORTH FIDELITY PASS V2
================================================== */
#desktop {
background:
radial-gradient(ellipse at 49% 105%, rgba(182,138,58,.10), transparent 42%),
radial-gradient(circle at 18% 28%, rgba(196,160,83,.055) 0 2px, transparent 3px) 0 0 / 85px 85px,
repeating-linear-gradient(90deg, rgba(255,255,255,.018) 0 1px, transparent 1px 4px),
linear-gradient(180deg, #102a23 0%, #0b211b 54%, #081914 100%) !important;
}
#desktop::before {
background:
repeating-linear-gradient(135deg, transparent 0 22px, rgba(182,138,58,.018) 22px 23px, transparent 23px 45px),
radial-gradient(ellipse at center, transparent 42%, rgba(0,0,0,.28) 100%) !important;
}
.bullworth-desktop-brand { display: none !important; }
.bullworth-bottom-plaque {
bottom: 52px;
z-index: 3;
color: rgba(194,155,76,.56);
}
.bullworth-bottom-plaque strong { font-size: 25px; }
.bullworth-id-card,
.bullworth-clock-card,
.bullworth-trouble-widget,
.bullworth-notice-board {
z-index: 7 !important;
}
/* Student ID */
.bullworth-id-card {
top: 17px;
right: 150px;
width: 370px;
height: 238px;
}
.bullworth-id-face {
padding: 10px 11px;
background:
repeating-linear-gradient(0deg, rgba(87,67,34,.025) 0 1px, transparent 1px 4px),
linear-gradient(145deg, #e6d8b7, #cbb88d);
border: 5px solid #202a26;
box-shadow: 0 8px 18px rgba(0,0,0,.58), inset 0 0 24px rgba(96,70,35,.10);
}
.bullworth-id-grid {
grid-template-columns: 100px 1fr;
margin-top: 9px;
}
.bullworth-portrait {
position: relative;
height: 112px;
}
.bullworth-student-photo {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
filter: sepia(.12) contrast(1.04) saturate(.85);
}
.bullworth-portrait > span {
position: absolute;
left: 0;
right: 0;
bottom: 2px;
padding: 2px 0;
background: rgba(231,216,183,.78);
}
.bullworth-id-data { font-size: 11px; }
.bullworth-id-footer-row {
display: flex;
align-items: flex-end;
justify-content: space-between;
gap: 10px;
margin-top: 5px;
}
.bullworth-barcode {
margin-top: 0;
text-align: left;
}
.bullworth-barcode small {
display: block;
margin-top: 1px;
color: #5c4a34;
font-size: 6px;
letter-spacing: 1px;
}
.bullworth-signature {
min-width: 95px;
padding-bottom: 2px;
border-bottom: 1px solid #6b5638;
color: #372b1e;
font: italic 15px "Brush Script MT", "Segoe Script", cursive;
text-align: center;
}
.bullworth-signature span {
display: block;
margin-top: -2px;
color: #786447;
font: 6px Arial, sans-serif;
text-transform: uppercase;
}
/* Right-side layout */
.bullworth-clock-card {
top: 12px;
right: 16px;
}
.bullworth-trouble-widget {
top: 272px;
right: 148px;
width: 280px;
}
.bullworth-notice-board {
right: 18px;
bottom: 53px;
width: 330px;
height: 395px;
grid-template-rows: 36px 1fr 1fr 36px;
background:
radial-gradient(circle, rgba(255,224,178,.10) 0 1px, transparent 2px) 0 0 / 8px 8px,
repeating-linear-gradient(45deg, rgba(44,25,15,.08) 0 2px, transparent 2px 6px),
#6d4a2d;
border: 10px ridge #4a2e1a;
}
.bullworth-notice {
min-height: 125px;
background:
repeating-linear-gradient(0deg, transparent 0 18px, rgba(105,85,51,.07) 18px 19px),
#e4d4aa;
}
.bullworth-notice.boxing strong {
color: #7e1815;
font-size: 14px;
}
.bullworth-notice.football strong { color: #183f54; }
.bullworth-notice.yearbook::after {
content: "⊘";
display: block;
margin: 10px auto 0;
color: #7f251d;
font: bold 32px Arial, sans-serif;
}
/* Intranet */
#welcome-window {
width: min(790px, calc(100vw - 520px));
}
.bullworth-intranet-banner {
grid-template-columns: 105px 1fr 145px;
padding: 10px 14px;
background: linear-gradient(90deg, #102d35, #081f26);
border-bottom: 4px double #c79e4a;
}
.bullworth-intranet-crest {
width: 76px;
height: 86px;
}
.bullworth-intranet-banner h1 { font-size: 34px; }
.bullworth-intranet-banner p { color: #d7bc76; }
.bullworth-intranet-body {
grid-template-columns: 158px minmax(285px,1fr) 260px;
}
.bullworth-intranet-nav button {
min-height: 31px;
font: 11px Georgia, serif;
}
.bullworth-campus-art {
height: 252px;
background: linear-gradient(180deg, #5f6256 0%, #aaa17e 44%, #5a5138 45%, #2e2a1e 100%);
}
.bullworth-campus-building {
width: 238px;
height: 150px;
background: linear-gradient(#715b3f, #4f402f);
}
.bullworth-announcements button {
min-height: 59px;
font-family: Georgia, serif;
}
/* Dorm Radio */
.webspace-media-window {
width: min(585px, calc(100vw - 40px));
}
#media-player-window .window-content {
background:
repeating-linear-gradient(90deg, rgba(255,255,255,.016) 0 1px, transparent 1px 5px),
linear-gradient(#4b3725, #291e16);
}
#media-player-window .media-player-console {
padding: 11px;
background: linear-gradient(#3a2b1f, #1d1712);
border: 4px ridge #7a5d38;
}
#media-player-window .media-lcd-top,
#media-player-window .media-equalizer,
#media-player-window .media-progress-track {
background: #07110d;
border-color: #aa8242;
color: #86ff64;
}
#media-player-window .media-lcd-label {
color: #d0a557;
font: bold 15px Georgia, serif;
}
#media-player-window .media-lcd-track { color: #88ff65; }
#media-player-window .media-playlist-label {
background: #1b1712;
border: 2px inset #8c6c42;
color: #d3bb83;
}
#media-player-window .spotify-embed-frame {
border: 3px ridge #7f603a;
background: #19130f;
}
#player {
background: linear-gradient(#4e3a29, #231a14) !important;
border-color: #a78045 !important;
}
#player .player-screen {
background: #06100b !important;
color: #84ff5f !important;
}
/* School paper windows */
.bullworth-paper-window {
width: min(610px, calc(100vw - 40px));
}
.bullworth-paper-content {
padding: 13px;
background:
repeating-linear-gradient(0deg, rgba(95,72,38,.025) 0 1px, transparent 1px 4px),
#e8ddc0 !important;
}
.bullworth-document-header {
display: flex;
align-items: center;
gap: 11px;
margin-bottom: 11px;
padding-bottom: 8px;
border-bottom: 3px double #82642c;
}
.bullworth-document-crest {
width: 55px;
height: 63px;
display: grid;
place-items: center;
background: #15382f;
border: 3px double #b68a3a;
clip-path: polygon(50% 0,94% 14%,89% 72%,50% 100%,11% 72%,6% 14%);
color: #d7b159;
font: bold 29px Georgia, serif;
}
.bullworth-document-header h2 {
margin: 0;
color: #2d271e;
font: bold 24px Georgia, serif;
}
.bullworth-document-header p {
margin: 2px 0 0;
color: #6f5938;
font: 9px Georgia, serif;
letter-spacing: 2px;
}
.bullworth-schedule-table,
.records-grade-table {
width: 100%;
border-collapse: collapse;
color: #2b241b;
font: 11px Georgia, serif;
}
.bullworth-schedule-table th,
.bullworth-schedule-table td,
.records-grade-table th,
.records-grade-table td {
padding: 6px 7px;
border: 1px solid #a9946b;
}
.bullworth-schedule-table th { background: #cdbd98; }
.bullworth-schedule-table tr.current-period { background: #b9c2bf; }
.schedule-lunch { background: #d7c9a8; }
.student-record-grid {
display: grid;
grid-template-columns: 110px 1fr;
gap: 6px 9px;
padding: 10px;
background: rgba(255,255,255,.26);
border: 1px solid #a9956d;
font: 11px Georgia, serif;
}
.records-grade-table th { width: 70%; text-align: left; }
.records-grade-table td { text-align: center; font-weight: bold; }
/* Map */
.bullworth-map-content {
padding: 12px;
background: #dfd2af !important;
}
.bullworth-campus-map {
position: relative;
height: 355px;
overflow: hidden;
background:
radial-gradient(circle at 15% 20%, rgba(42,78,48,.15) 0 16%, transparent 17%),
radial-gradient(circle at 80% 72%, rgba(42,78,48,.18) 0 18%, transparent 19%),
#c9b98f;
border: 5px double #705633;
}
.map-road {
position: absolute;
background: #8d7c60;
border: 1px solid #675943;
}
.road-horizontal { left:0; right:0; top:47%; height:22px; }
.road-vertical { top:0; bottom:0; left:47%; width:24px; }
.map-location {
position: absolute;
min-width: 120px;
padding: 7px;
background: #e7dcc0;
border: 2px solid #6d5839;
color: #33291e;
text-align: left;
}
.map-location strong,
.map-location span { display:block; }
.map-location strong { font: bold 10px Georgia, serif; }
.map-location span { margin-top:2px; font:7px Arial,sans-serif; }
.main-building { left:35%; top:30%; }
.boys-dorm { left:8%; top:17%; }
.gym { right:7%; top:16%; }
.library { left:11%; bottom:14%; }
.field { right:9%; bottom:16%; }
.map-compass {
position:absolute;
right:12px;
top:9px;
font:bold 18px Georgia,serif;
}
/* Mail */
.bullworth-mail-window {
width: min(700px, calc(100vw - 40px));
}
.bullworth-mail-content {
display:grid;
grid-template-columns:135px 230px 1fr;
min-height:330px;
padding:0 !important;
background:#dfd3b4 !important;
}
.mail-folders {
display:flex;
flex-direction:column;
padding:10px;
background:#cbbb97;
border-right:2px solid #806b47;
}
.mail-folders button,
.mail-row {
padding:8px;
background:transparent;
border:0;
color:#33291e;
text-align:left;
}
.mail-folders button.active,
.mail-folders button:hover {
background:#17382f;
color:#f1deb0;
}
.mail-list { border-right:1px solid #a8956e; }
.mail-row {
width:100%;
display:grid;
gap:2px;
border-bottom:1px solid #b5a27b;
}
.mail-preview {
padding:14px;
background:#efe5cb;
}
/* Restricted */
.bullworth-restricted-window {
width:min(420px, calc(100vw - 40px));
}
.restricted-files-content {
padding:26px;
background:#e5dbc0 !important;
text-align:center;
}
.restricted-folder-icon {
width:65px;
height:65px;
margin:0 auto 11px;
display:grid;
place-items:center;
background:#7d2520;
border:5px ridge #a88548;
color:#f3d87c;
font:bold 40px Georgia,serif;
}
#restricted-access-status {
margin-top:12px;
padding:6px;
background:#281712;
color:#ff6d55;
border:2px inset #796447;
font:bold 10px "Courier New",monospace;
}
/* Achievements */
.bullworth-achievement-grid {
display:grid;
grid-template-columns:repeat(2,minmax(0,1fr));
gap:10px;
}
.achievement-badge {
min-height:105px;
display:grid;
grid-template-columns:48px 1fr;
gap:4px 9px;
padding:10px;
background:#c9bea1;
border:3px double #77613f;
opacity:.55;
}
.achievement-badge.unlocked {
background:#e5d7b4;
opacity:1;
}
.achievement-badge > span {
grid-row:1 / 3;
display:grid;
place-items:center;
width:45px;
height:45px;
border-radius:50%;
background:#15382f;
border:3px double #b68a3a;
color:#d7b159;
font-size:24px;
}
/* New desktop icons */
.icon-class-schedule {
position:relative;
width:43px;
height:48px;
background:repeating-linear-gradient(to bottom,#eee4c8 0 7px,#a9b891 7px 8px);
border:3px solid #5e513a;
box-shadow:inset 0 5px #8e2724;
}
.icon-campus-map {
position:relative;
width:48px;
height:42px;
background:linear-gradient(135deg,#6f8a60 0 33%,#d3be87 33% 66%,#7f9b6c 66%);
border:3px solid #57462e;
}
/* Dark school-issued taskbar */
#taskbar {
background:linear-gradient(#18372f,#0f2923) !important;
border-top:2px solid #967b46 !important;
}
#start-button {
background:linear-gradient(#21493d,#123329) !important;
color:#e0c178 !important;
}
.taskbar-button {
background:#1b332c !important;
color:#e4d6b5 !important;
}
.taskbar-button.active {
background:repeating-linear-gradient(45deg,#1f473b 0 2px,#18372f 2px 4px) !important;
color:#f0d58e !important;
}
#system-tray {
background:#132b25 !important;
color:#ead8ae !important;
}
.tray-clock-well { color:#ead8ae; }
@media (max-width: 1180px) and (min-width:701px) {
.bullworth-id-card { width:330px; height:218px; }
.bullworth-trouble-widget { right:132px; top:242px; width:250px; }
.bullworth-notice-board { width:295px; height:350px; }
#welcome-window { width:min(690px, calc(100vw - 430px)); }
}
/* ==================================================
BULLWORTH FIDELITY V2.1
================================================== */
.bullworth-trouble-widget {
top: 276px !important;
right: 235px !important;
width: 280px !important;
z-index: 7 !important;
}
.bullworth-id-card {
height: 252px !important;
}
.bullworth-id-face {
padding: 10px 12px 12px !important;
}
.bullworth-id-front header {
min-height: 40px;
}
.bullworth-id-grid {
margin-top: 8px !important;
}
.bullworth-portrait {
height: 108px !important;
}
.bullworth-id-footer-row {
margin-top: 8px !important;
min-height: 27px;
}
.bullworth-barcode {
line-height: 1.05;
}
.bullworth-barcode small {
margin-top: 3px !important;
}
.bullworth-signature {
min-width: 105px !important;
margin-bottom: 2px;
}
.bullworth-id-front footer {
margin-top: 6px !important;
line-height: 1.2;
}
.bullworth-intranet-banner {
min-height: 108px;
grid-template-columns: 94px minmax(260px,1fr) 142px !important;
align-items: center;
padding: 10px 15px !important;
background: linear-gradient(90deg, #102d35 0%, #0c2730 58%, #081d24 100%) !important;
border-bottom: 4px double #b98d3f !important;
box-shadow: inset 0 -1px rgba(226,193,116,.18);
}
.bullworth-intranet-crest {
width: 72px !important;
height: 80px !important;
margin: 0 auto;
display: grid;
place-items: center;
background: radial-gradient(circle at 50% 43%, #183c36, #0d2824 72%);
border: 3px double #b98d3f !important;
color: #d3ad5a !important;
text-shadow: 1px 1px 0 #020807;
box-shadow: inset 0 0 0 2px rgba(218,180,91,.10), 2px 2px 0 rgba(0,0,0,.24);
}
.bullworth-intranet-banner h1 {
margin: 0 !important;
color: #d5ae5a !important;
font: bold 32px Georgia, "Times New Roman", serif !important;
letter-spacing: 2px !important;
line-height: 1 !important;
text-shadow: 1px 1px 0 #030b09, 0 0 8px rgba(181,137,60,.08);
}
.bullworth-intranet-banner p {
margin-top: 7px !important;
color: #d8c28a !important;
font: 12px Georgia, serif !important;
letter-spacing: 7px !important;
}
.bullworth-intranet-values {
color: #d4b973 !important;
font: 11px/1.75 Georgia, serif !important;
letter-spacing: 2px !important;
text-shadow: 1px 1px 0 #050c0a;
}
#player {
right: 24px !important;
top: 255px !important;
z-index: 8 !important;
width: 205px !important;
padding: 7px !important;
background:
repeating-linear-gradient(90deg, rgba(255,255,255,.025) 0 1px, transparent 1px 5px),
linear-gradient(#503a27, #2b2017) !important;
color: #8fff65 !important;
border: 4px ridge #8b6839 !important;
box-shadow: 0 6px 14px rgba(0,0,0,.52), inset 0 0 0 1px #241811 !important;
font-family: "Courier New", monospace !important;
}
#player .player-title-row {
min-height: 27px;
padding: 3px 4px;
background: linear-gradient(#5b432c, #34261b);
border: 2px inset #84653e;
}
#player .player-title {
padding: 2px 4px !important;
background: transparent !important;
color: #d8b462 !important;
font: bold 9px Georgia, serif !important;
letter-spacing: .8px;
}
#player .player-source-badge {
padding: 2px 4px !important;
background: #0a160f !important;
color: #92ff6c !important;
border: 1px solid #9d7b42 !important;
font: bold 7px "Courier New", monospace !important;
white-space: nowrap;
}
#player .player-screen {
min-height: 49px;
margin-top: 5px !important;
padding: 9px !important;
background: linear-gradient(#06110b, #091a11) !important;
color: #8dff69 !important;
border: 2px inset #8a6a3e !important;
box-shadow: inset 0 0 9px rgba(92,255,74,.05);
}
#player .player-number {
color: #d8b45f !important;
}
#player .player-mini-eq {
margin: 5px 0 !important;
background: #07100b !important;
border: 2px inset #745b39 !important;
}
#player .player-mini-eq span {
background: linear-gradient(#c8a34d, #75ee54) !important;
}
#player .player-progress {
height: 8px !important;
background: #090c09 !important;
border: 2px inset #765c39 !important;
}
#player .player-progress-fill {
background: repeating-linear-gradient(90deg, #77e955 0 6px, #bca348 6px 8px) !important;
}
#player .player-controls {
padding: 4px 2px 2px;
background: #251b14;
}
#player .player-controls button {
min-width: 42px !important;
height: 25px !important;
background: linear-gradient(#c2aa78, #8f744a) !important;
color: #211a13 !important;
border-top: 2px solid #ddc996 !important;
border-left: 2px solid #ddc996 !important;
border-right: 2px solid #4d3822 !important;
border-bottom: 2px solid #4d3822 !important;
font: bold 10px "Courier New", monospace !important;
}
#player .player-controls button:active {
border-top: 2px solid #4d3822 !important;
border-left: 2px solid #4d3822 !important;
border-right: 2px solid #ddc996 !important;
border-bottom: 2px solid #ddc996 !important;
}
.bullworth-notice.boxing {
transform: rotate(-1.15deg) !important;
background:
repeating-linear-gradient(0deg, transparent 0 18px, rgba(105,85,51,.065) 18px 19px),
#e8d5a5 !important;
}
.bullworth-notice.detention {
transform: rotate(.9deg) !important;
background:
repeating-linear-gradient(0deg, transparent 0 18px, rgba(105,85,51,.055) 18px 19px),
#ddd0af !important;
}
.bullworth-notice.football {
transform: rotate(.7deg) !important;
background:
repeating-linear-gradient(0deg, transparent 0 18px, rgba(67,86,89,.055) 18px 19px),
#d4d2b9 !important;
}
.bullworth-notice.yearbook {
transform: rotate(-.8deg) !important;
background:
repeating-linear-gradient(0deg, transparent 0 18px, rgba(113,74,45,.055) 18px 19px),
#e4cfa9 !important;
}
@media (max-height: 820px) and (min-width: 701px) {
.bullworth-id-card {
height: 238px !important;
}
.bullworth-trouble-widget {
top: 244px !important;
right: 225px !important;
width: 258px !important;
transform: scale(.88) !important;
transform-origin: right top !important;
}
#player {
top: 246px !important;
transform: scale(.93);
transform-origin: right top;
}
}
@media (max-width: 1180px) and (min-width: 701px) {
.bullworth-trouble-widget {
right: 235px !important;
width: 250px !important;
}
}
/* ==================================================
CUSTOMIZABLE STUDENT ID
================================================== */
.bullworth-signature strong {
display: block;
color: inherit;
font: inherit;
font-weight: normal;
}
.bullworth-mini-crest.badge-academic {
background: #243d55 !important;
color: #e4c675 !important;
}
.bullworth-mini-crest.badge-athletics {
background: #6a251f !important;
color: #f0d17d !important;
}
.bullworth-mini-crest.badge-arts {
background: #4d3156 !important;
color: #e4c980 !important;
}
.bullworth-mini-crest.badge-photo {
background: #364b43 !important;
color: #e0c577 !important;
}
.bullworth-id-settings-window {
width: min(690px, calc(100vw - 40px));
}
.bullworth-id-settings-content {
padding: 12px;
background:
repeating-linear-gradient(0deg, rgba(95,72,38,.025) 0 1px, transparent 1px 4px),
#e6dabd !important;
}
.bullworth-id-settings-header {
display: flex;
align-items: center;
gap: 11px;
margin-bottom: 11px;
padding-bottom: 8px;
border-bottom: 3px double #82642c;
}
.bullworth-id-settings-header h2 {
margin: 0;
color: #30271d;
font: bold 21px Georgia, serif;
}
.bullworth-id-settings-header p {
margin: 3px 0 0;
color: #685538;
font: 9px Georgia, serif;
}
.bullworth-id-settings-layout {
display: grid;
grid-template-columns: minmax(0,1fr) 210px;
gap: 13px;
}
.bullworth-id-settings-form fieldset {
margin: 0 0 10px;
}
.bullworth-id-settings-form label {
display: grid;
gap: 3px;
margin-bottom: 8px;
color: #372c20;
font: 10px Georgia, serif;
}
.bullworth-id-settings-form input,
.bullworth-id-settings-form select {
width: 100%;
box-sizing: border-box;
min-height: 25px;
padding: 3px 5px;
background: #f4ecd8;
color: #241d16;
border: 2px inset #aa9670;
font: 11px Arial, sans-serif;
}
.bullworth-form-row {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 8px;
}
.bullworth-id-photo-settings {
padding: 9px;
background: #cbbb98;
border: 2px inset #897551;
}
.bullworth-id-photo-preview {
position: relative;
width: 150px;
height: 178px;
margin: 0 auto 9px;
overflow: hidden;
background: #797568;
border: 4px ridge #6e5a3b;
}
.bullworth-id-photo-preview img {
width: 100%;
height: 100%;
object-fit: cover;
filter: sepia(.12) contrast(1.04) saturate(.85);
}
.bullworth-id-photo-placeholder {
position: absolute;
inset: 0;
display: grid;
place-items: end center;
padding-bottom: 12px;
color: #3c3528;
font: bold 8px Arial, sans-serif;
}
.bullworth-id-photo-placeholder span {
position: absolute;
left: 50%;
top: 47px;
width: 66px;
height: 80px;
transform: translateX(-50%);
background: #33382f;
border-radius: 46% 46% 28% 28%;
}
.bullworth-id-photo-placeholder span::before {
content: "";
position: absolute;
left: 15px;
top: -30px;
width: 37px;
height: 39px;
background: #36382f;
border-radius: 50%;
}
.bullworth-photo-file-label {
display: block;
margin-bottom: 6px;
padding: 6px;
background: linear-gradient(#e0d2af,#bda87b);
border-top: 2px solid #f5ead0;
border-left: 2px solid #f5ead0;
border-right: 2px solid #665236;
border-bottom: 2px solid #665236;
color: #2c241a;
font: bold 9px Arial, sans-serif;
text-align: center;
cursor: pointer;
}
.bullworth-photo-file-label:active {
border-top-color: #665236;
border-left-color: #665236;
border-right-color: #f5ead0;
border-bottom-color: #f5ead0;
}
.bullworth-photo-file-label input {
display: none;
}
.bullworth-id-photo-settings .retro-button {
width: 100%;
margin-bottom: 5px;
}
.bullworth-settings-help {
margin: 8px 2px 0;
color: #5e4d35;
font: 8px/1.4 Georgia, serif;
}
.bullworth-id-settings-actions {
display: flex;
align-items: center;
gap: 6px;
padding: 7px 9px;
background: #c5b99d;
border-top: 1px solid #eee2c8;
}
.bullworth-id-settings-spacer {
flex: 1;
}
.bullworth-profile-actions {
margin: 11px 0;
}
@media (max-width: 700px) {
.bullworth-id-settings-layout {
grid-template-columns: 1fr;
}
.bullworth-id-settings-window {
width: calc(100vw - 12px);
}
.bullworth-form-row {
grid-template-columns: 1fr;
}
}
/* ==================================================
BULLWORTH FIDELITY V3
Desktop shell inspired by an old school-issued terminal.
================================================== */
.bully-v3 {
--bw-green-0: #061a15;
--bw-green-1: #0a2a22;
--bw-green-2: #0f3b30;
--bw-green-3: #174d3e;
--bw-gold: #c99a3c;
--bw-gold-soft: #d8bb72;
--bw-paper: #ddcda2;
--bw-ink: #211b15;
--bw-wood-1: #3a2114;
--bw-wood-2: #21130d;
}
/* --------------------------------------------------
DESKTOP WALL / WOOD PANEL + WATERMARK CREST
-------------------------------------------------- */
.bully-v3 #desktop {
background:
radial-gradient(
ellipse at 50% 37%,
rgba(213,171,78,.055) 0 2px,
transparent 3px
) 0 0 / 74px 74px,
repeating-linear-gradient(
90deg,
rgba(255,255,255,.016) 0 1px,
transparent 1px 4px
),
linear-gradient(
180deg,
#0b2b23 0%,
#09251e 55%,
#3a2114 55.2%,
#25140d 100%
) !important;
background-size:
74px 74px,
auto,
auto !important;
}
.bully-v3 #desktop::before {
background:
repeating-linear-gradient(
0deg,
transparent 0 4px,
rgba(216,165,72,.018) 4px 5px
),
radial-gradient(
ellipse at center,
transparent 43%,
rgba(0,0,0,.25) 100%
) !important;
}
.bully-v3 #desktop::after {
content: "B";
position: absolute;
left: 50%;
top: 36%;
z-index: 2;
transform: translate(-50%, -50%);
width: 178px;
height: 210px;
display: grid;
place-items: center;
color: rgba(202,154,60,.47);
font: bold 92px Georgia, "Times New Roman", serif;
border: 2px solid rgba(202,154,60,.10);
clip-path: polygon(50% 0,90% 12%,87% 72%,50% 100%,13% 72%,10% 12%);
pointer-events: none;
}
.bully-v3 .bullworth-bottom-plaque {
bottom: 70px !important;
z-index: 3 !important;
color: rgba(202,154,60,.42) !important;
}
.bully-v3 .bullworth-bottom-plaque strong {
font-size: 29px !important;
letter-spacing: 5px !important;
}
/* --------------------------------------------------
DESKTOP ICON LAYOUT + OBJECT ICONS
-------------------------------------------------- */
.bully-v3 .desktop-icons {
top: 24px !important;
left: 20px !important;
width: 370px !important;
display: grid !important;
grid-template-columns: repeat(4, 82px) !important;
grid-auto-rows: 86px !important;
gap: 13px 10px !important;
align-content: start !important;
z-index: 8 !important;
}
.bully-v3 .desktop-icon {
width: 82px !important;
height: 86px !important;
margin: 0 !important;
padding: 4px 2px !important;
display: flex !important;
flex-direction: column !important;
align-items: center !important;
justify-content: flex-start !important;
color: #f3ead2 !important;
background: transparent !important;
border: 1px solid transparent !important;
font:
bold 11px/1.05
Georgia,
"Times New Roman",
serif !important;
text-align: center !important;
text-shadow:
1px 1px 0 #000,
-1px 0 0 #000,
0 -1px 0 #000 !important;
}
.bully-v3 .desktop-icon:hover,
.bully-v3 .desktop-icon:focus,
.bully-v3 .desktop-icon.selected {
background:
rgba(206,176,111,.12) !important;
border:
1px dotted
rgba(232,216,178,.62) !important;
outline:
none !important;
}
.bully-v3 .desktop-icon > .desktop-icon-image,
.bully-v3 .desktop-icon > .desktop-program-icon,
.bully-v3 .desktop-icon > .desktop-recycle-icon {
display: none !important;
}
.bully-v3 .desktop-icon::before {
content: "";
width: 54px;
height: 54px;
flex: 0 0 54px;
margin: 0 auto 3px;
display: block;
background:
center / contain
no-repeat;
image-rendering: pixelated;
filter:
drop-shadow(2px 3px 0 rgba(0,0,0,.52));
}
.bully-v3 .desktop-icon[data-window="computer-window"]::before {
background-image: url("assets/bullworth-v3-icons/computer.png");
}
.bully-v3 .desktop-icon[data-window="recycle-bin-window"]::before {
background-image: url("assets/bullworth-v3-icons/trash.png");
}
.bully-v3 .desktop-icon[data-window="about-window"]::before {
background-image: url("assets/bullworth-v3-icons/profile.png");
}
.bully-v3 .desktop-icon[data-window="activities-window"]::before {
background-image: url("assets/bullworth-v3-icons/activities.png");
}
.bully-v3 .desktop-icon[data-window="projects-window"]::before {
background-image: url("assets/bullworth-v3-icons/schoolwork.png");
}
.bully-v3 .desktop-icon[data-window="gallery-window"]::before {
background-image: url("assets/bullworth-v3-icons/photo.png");
}
.bully-v3 .desktop-icon[data-window="links-window"]::before {
background-image: url("assets/bullworth-v3-icons/network.png");
}
.bully-v3 .desktop-icon[data-window="class-schedule-window"]::before {
background-image: url("assets/bullworth-v3-icons/schedule.png");
}
.bully-v3 .desktop-icon[data-window="bullworth-map-window"]::before {
background-image: url("assets/bullworth-v3-icons/map.png");
}
.bully-v3 .desktop-icon[data-window="system-window"]::before {
background-image: url("assets/bullworth-v3-icons/terminal.png");
}
.bully-v3 .desktop-icon[data-window="control-panel-window"]::before {
background-image: url("assets/bullworth-v3-icons/settings.png");
}
.bully-v3 .desktop-icon[data-window="notepad-window"]::before {
background-image: url("assets/bullworth-v3-icons/notes.png");
}
.bully-v3 .desktop-icon[data-window="paint-window"]::before {
background-image: url("assets/bullworth-v3-icons/art.png");
}
.bully-v3 .desktop-icon[data-window="media-player-window"]::before {
background-image: url("assets/bullworth-v3-icons/radio.png");
}
.bully-v3 .desktop-icon[data-window="minesweeper-window"]::before {
background-image: url("assets/bullworth-v3-icons/minesweeper.png");
}
.bully-v3 .desktop-icon[data-window="solitaire-window"]::before {
background-image: url("assets/bullworth-v3-icons/solitaire.png");
}
.bully-v3 .desktop-icon[data-window="calculator-window"]::before {
background-image: url("assets/bullworth-v3-icons/calculator.png");
}
.bully-v3 .desktop-icon[data-window="guestbook-window"]::before {
background-image: url("assets/bullworth-v3-icons/guestbook.png");
}
.bully-v3 .desktop-icon[data-window="yearbook-window"]::before {
background-image: url("assets/bullworth-v3-icons/yearbook.png");
}
/* --------------------------------------------------
TROUBLE / ID / CLOCK / NOTICE LAYOUT
-------------------------------------------------- */
.bully-v3 .bullworth-trouble-widget {
top: 24px !important;
left: 430px !important;
right: auto !important;
width: 170px !important;
min-height: 82px !important;
transform: none !important;
background:
linear-gradient(
#d8c28d,
#c9ae73
) !important;
border:
4px ridge
#735733 !important;
color:
#241b13 !important;
box-shadow:
4px 5px 0
rgba(0,0,0,.28) !important;
}
.bully-v3 .bullworth-trouble-title {
color:
#241b13 !important;
}
.bully-v3 .bullworth-trouble-title .bullworth-mini-crest {
display:
none !important;
}
.bully-v3 .bullworth-trouble-cells {
height:
10px !important;
background:
#423b2e !important;
}
.bully-v3 .bullworth-trouble-cells i {
background:
transparent !important;
}
.bully-v3 .bullworth-trouble-cells i.active {
background:
#a67726 !important;
}
.bully-v3 .bullworth-id-card {
top:
22px !important;
right:
154px !important;
transform:
rotate(-.25deg);
}
.bully-v3 .bullworth-clock-card {
top:
18px !important;
right:
18px !important;
}
.bully-v3 .bullworth-notice-board {
right:
18px !important;
bottom:
62px !important;
}
/* --------------------------------------------------
TASKBAR — SCREENSHOT-STYLE SCHOOL SHELL
-------------------------------------------------- */
.bully-v3 #taskbar {
height:
44px !important;
padding:
4px 6px !important;
background:
linear-gradient(
#0f4639,
#083229
) !important;
border:
0 !important;
border-top:
2px solid
#c6983e !important;
box-shadow:
inset 0 1px
rgba(255,255,255,.035),
0 -2px 8px
rgba(0,0,0,.32) !important;
}
.bully-v3 #start-button {
width:
184px !important;
height:
34px !important;
display:
flex !important;
align-items:
center !important;
justify-content:
flex-start !important;
gap:
10px !important;
padding:
2px 10px !important;
background:
#0d3b31 !important;
color:
#d2a74b !important;
border:
1px solid
#b78b35 !important;
box-shadow:
inset 0 0 0 1px
#061c17 !important;
font:
bold 15px
Georgia,
serif !important;
letter-spacing:
1.5px !important;
}
.bully-v3 #start-button:hover {
background:
#154d3f !important;
}
.bully-v3 #start-button:active {
transform:
translateY(1px);
}
.bully-v3 .bullworth-start-crest {
width:
24px !important;
height:
24px !important;
display:
grid !important;
place-items:
center !important;
margin:
0 !important;
background:
#0b2a23 !important;
border:
1px solid
#c6983e !important;
color:
#cfa13e !important;
font:
bold 14px
Georgia,
serif !important;
}
.bully-v3 #taskbar-apps {
height:
34px !important;
display:
flex !important;
align-items:
center !important;
gap:
4px !important;
padding:
0 6px !important;
}
.bully-v3 .taskbar-button {
height:
30px !important;
min-width:
125px !important;
max-width:
185px !important;
padding:
3px 9px !important;
background:
#103d33 !important;
color:
#e1d1a8 !important;
border:
1px solid
#6b633f !important;
box-shadow:
inset 0 0 0 1px
#071d18 !important;
font:
bold 10px
Georgia,
serif !important;
}
.bully-v3 .taskbar-button.active {
background:
#1a5646 !important;
color:
#f1d891 !important;
border-color:
#bd923a !important;
}
.bully-v3 #system-tray {
height:
34px !important;
min-width:
120px !important;
padding:
0 8px !important;
display:
flex !important;
align-items:
center !important;
justify-content:
flex-end !important;
gap:
5px !important;
background:
transparent !important;
border:
0 !important;
color:
#eadfbe !important;
}
.bully-v3 .tray-indicator {
background:
transparent !important;
border:
0 !important;
color:
#d8ccb0 !important;
}
.bully-v3 .tray-clock-well {
min-width:
72px !important;
padding:
0 2px !important;
background:
transparent !important;
border:
0 !important;
color:
#f2e9d0 !important;
font:
12px
Georgia,
serif !important;
}
/* --------------------------------------------------
START MENU — SCHOOL-ISSUED LOOK
-------------------------------------------------- */
.bully-v3 #start-menu {
background:
#d9c89f !important;
border:
3px ridge
#79633d !important;
box-shadow:
5px 6px 0
rgba(0,0,0,.34) !important;
}
.bully-v3 .start-menu-sidebar {
background:
linear-gradient(
#0e3c31,
#071f1a
) !important;
color:
#d4a548 !important;
font-family:
Georgia,
serif !important;
}
.bully-v3 .start-menu-row:hover,
.bully-v3 .start-submenu button:hover {
background:
#17493c !important;
color:
#f5e7c2 !important;
}
/* --------------------------------------------------
LOGIN / LOCK SCREEN
-------------------------------------------------- */
.bullworth-login-screen {
position:
fixed;
inset:
0;
z-index:
10020;
display:
grid;
place-items:
center;
padding:
20px;
background:
radial-gradient(
circle at 50% 40%,
rgba(23,75,61,.72),
rgba(4,20,16,.97) 62%
),
#071d18;
color:
#dfcca0;
}
.bullworth-login-panel {
width:
min(560px, 94vw);
padding:
16px 18px 13px;
background:
linear-gradient(
#102f28,
#081f1a
);
border:
2px solid
#b78a38;
box-shadow:
0 0 0 4px
#05130f,
0 18px 45px
rgba(0,0,0,.58);
font-family:
Georgia,
"Times New Roman",
serif;
}
.bullworth-login-crest {
width:
74px;
height:
86px;
margin:
0 auto 10px;
display:
grid;
place-items:
center;
clip-path:
polygon(
50% 0,
92% 13%,
88% 72%,
50% 100%,
12% 72%,
8% 13%
);
background:
#0b3c32;
border:
3px solid
#c5963d;
color:
#d2a348;
font:
bold 38px
Georgia,
serif;
}
.bullworth-login-heading {
text-align:
center;
}
.bullworth-login-heading small {
color:
#c89a40;
letter-spacing:
5px;
}
.bullworth-login-heading h1 {
margin:
4px 0;
color:
#e2c77e;
font-size:
25px;
letter-spacing:
2px;
}
.bullworth-login-heading p {
margin:
0 0 14px;
color:
#8fae9e;
font:
9px
"Courier New",
monospace;
}
.bullworth-login-card {
width:
min(420px, 100%);
margin:
0 auto 12px;
display:
grid;
grid-template-columns:
102px 1fr;
gap:
14px;
padding:
10px;
background:
#d8c69d;
border:
4px ridge
#725a34;
color:
#281f16;
}
.bullworth-login-photo {
position:
relative;
width:
92px;
height:
108px;
overflow:
hidden;
background:
#8f8d7b;
border:
2px solid
#443726;
}
.bullworth-login-photo img {
width:
100%;
height:
100%;
object-fit:
cover;
filter:
sepia(.12)
saturate(.8)
contrast(1.05);
}
.bullworth-login-silhouette {
position:
absolute;
left:
21px;
top:
31px;
width:
50px;
height:
68px;
background:
#3d4036;
border-radius:
45% 45% 25% 25%;
}
.bullworth-login-silhouette::before {
content:
"";
position:
absolute;
left:
10px;
top:
-24px;
width:
31px;
height:
33px;
border-radius:
50%;
background:
#3d4036;
}
.bullworth-login-details {
display:
grid;
grid-template-columns:
112px 1fr;
align-content:
center;
gap:
7px 8px;
font-size:
10px;
}
.bullworth-login-details span {
color:
#6d5938;
}
.bullworth-login-details strong {
color:
#2b2319;
}
.bullworth-login-details .login-online {
color:
#24543e;
}
.bullworth-login-status {
margin:
8px 0;
color:
#8fb7a4;
font:
10px
"Courier New",
monospace;
text-align:
center;
}
.bullworth-login-button {
width:
100%;
padding:
9px 12px;
background:
#b78a38;
color:
#15110d;
border:
2px outset
#e0c377;
font:
bold 11px
Georgia,
serif;
letter-spacing:
1px;
}
.bullworth-login-button:active {
border-style:
inset;
}
.bullworth-login-footer {
margin-top:
10px;
color:
#a88f5f;
font-size:
8px;
text-align:
center;
letter-spacing:
2px;
}
/* --------------------------------------------------
CURFEW MODE / PREFECT ATMOSPHERE
-------------------------------------------------- */
.bully-v3.bullworth-curfew #desktop::before {
background:
linear-gradient(
rgba(0,13,17,.35),
rgba(0,9,14,.48)
),
repeating-linear-gradient(
0deg,
transparent 0 4px,
rgba(77,124,132,.025) 4px 5px
),
radial-gradient(
ellipse at center,
transparent 32%,
rgba(0,0,0,.50) 100%
) !important;
}
.bully-v3.bullworth-curfew .bullworth-period-label {
color:
#f4d66d !important;
background:
#4e271d !important;
}
.bully-v3.bullworth-curfew #taskbar::before {
content:
"CURFEW";
height:
22px;
display:
grid;
place-items:
center;
padding:
0 8px;
margin-right:
4px;
color:
#ffd36f;
border:
1px solid
#7c5d2e;
background:
#4e271d;
font:
bold 9px
"Courier New",
monospace;
}
/* --------------------------------------------------
STUDENT RECORD / DISCIPLINE
-------------------------------------------------- */
.bullworth-discipline-grid {
display:
grid;
grid-template-columns:
135px 1fr;
gap:
5px 8px;
padding:
9px;
background:
#d2c29d;
border:
1px solid
#9a845c;
color:
#33291e;
font:
10px
Georgia,
serif;
}
.bullworth-discipline-grid > span {
color:
#6f5836;
}
.bullworth-discipline-log {
margin:
8px 0 13px;
padding:
8px;
background:
rgba(255,255,255,.22);
border:
1px solid
#aa976e;
color:
#3f3322;
font:
9px
Georgia,
serif;
}
.bullworth-discipline-log > strong {
color:
#67261f;
}
.bullworth-discipline-log ul {
margin:
7px 0 0 17px;
padding:
0;
}
.bullworth-discipline-log li {
margin:
3px 0;
}
/* --------------------------------------------------
STRONGER CREST LANGUAGE
-------------------------------------------------- */
.bully-v3 .bullworth-document-crest,
.bully-v3 .bullworth-mini-crest,
.bully-v3 .bullworth-intranet-crest {
box-shadow:
inset 0 0 0 1px
rgba(230,200,124,.14),
2px 2px 0
rgba(0,0,0,.26) !important;
}
/* --------------------------------------------------
110% / NARROW DESKTOP SAFETY
-------------------------------------------------- */
@media (max-width: 1260px) and (min-width: 701px) {
.bully-v3 .desktop-icons {
grid-template-columns:
repeat(3, 82px) !important;
width:
275px !important;
}
.bully-v3 .bullworth-trouble-widget {
left:
310px !important;
}
.bully-v3 .bullworth-id-card {
transform:
scale(.92)
rotate(-.25deg);
transform-origin:
right top;
}
.bully-v3 .bullworth-notice-board {
transform:
scale(.90);
transform-origin:
right bottom;
}
}
@media (max-height: 760px) and (min-width: 701px) {
.bully-v3 .desktop-icons {
transform:
scale(.90);
transform-origin:
left top;
}
.bully-v3 .bullworth-notice-board {
transform:
scale(.80);
transform-origin:
right bottom;
}
.bully-v3 .bullworth-bottom-plaque {
display:
none !important;
}
}
/* ==================================================
BULLWORTH V3.1 — FINAL LAYOUT POLISH
no new features; layout fixes only
================================================== */
/* --------------------------------------------------
SCHOOL NETWORK
Keep the browser within the left / center desktop area
so it does not sit under the Student ID stack.
-------------------------------------------------- */
.bully-v3 #welcome-window {
width:
min(
720px,
calc(100vw - 520px)
) !important;
max-width:
720px !important;
}
/* --------------------------------------------------
RIGHT-SIDE WIDGET STACK
ID -> Trouble -> Radio
-------------------------------------------------- */
.bully-v3 .bullworth-id-card {
top:
22px !important;
right:
154px !important;
}
.bully-v3 .bullworth-trouble-widget {
top:
284px !important;
left:
auto !important;
right:
236px !important;
width:
220px !important;
min-height:
72px !important;
transform:
none !important;
}
.bully-v3 #player {
top:
255px !important;
right:
24px !important;
}
/* --------------------------------------------------
CURFEW
Remove the detached left taskbar badge.
Put the state beside the clock instead.
-------------------------------------------------- */
.bully-v3.bullworth-curfew #taskbar::before {
content:
none !important;
display:
none !important;
}
.bully-v3.bullworth-curfew .tray-clock-well::after {
content:
" · CURFEW";
margin-left:
3px;
color:
#f4c75d;
font-weight:
bold;
}
.bully-v3 .tray-clock-well {
min-width:
118px !important;
white-space:
nowrap;
}
/* --------------------------------------------------
OPEN WINDOW POSITIONING
Keep Bullworth widgets visible when School Network opens.
-------------------------------------------------- */
@media (min-width: 1261px) {
.bully-v3 #welcome-window {
left:
225px !important;
top:
18px !important;
}
}
@media (max-width: 1260px) and (min-width: 901px) {
.bully-v3 #welcome-window {
width:
min(
650px,
calc(100vw - 450px)
) !important;
max-width:
650px !important;
}
.bully-v3 .bullworth-trouble-widget {
right:
218px !important;
width:
205px !important;
}
}
/* --------------------------------------------------
110% / SHORTER HEIGHT SAFETY
-------------------------------------------------- */
@media (max-height: 820px) and (min-width: 701px) {
.bully-v3 .bullworth-trouble-widget {
top:
252px !important;
right:
214px !important;
width:
202px !important;
transform:
scale(.90) !important;
transform-origin:
right top !important;
}
.bully-v3 #player {
top:
248px !important;
transform:
scale(.93);
transform-origin:
right top;
}
}
/* --------------------------------------------------
NARROW DESKTOP
-------------------------------------------------- */
@media (max-width: 900px) and (min-width: 701px) {
.bully-v3 #welcome-window {
width:
calc(100vw - 32px) !important;
max-width:
none !important;
}
.bully-v3 .bullworth-trouble-widget {
right:
188px !important;
width:
190px !important;
}
}
/* ==================================================
BULLWORTH V3.2 — INTERIOR FIDELITY
================================================== */
.bully-v3 #desktop::after{content:"B"!important;width:190px!important;height:218px!important;color:rgba(205,156,60,.50)!important;background:radial-gradient(circle at 50% 40%,rgba(23,73,59,.17),rgba(4,24,19,.10) 65%);border:5px double rgba(205,156,60,.18)!important;box-shadow:inset 0 0 0 2px rgba(220,187,105,.06),0 0 38px rgba(0,0,0,.14);text-shadow:0 2px 0 rgba(0,0,0,.38);font-size:96px!important}
.bully-v3 #computer-window .computer-content,.bully-v3 #control-panel-window .control-panel-content,.bully-v3 #notepad-window .notepad-textarea,.bully-v3 #paint-window .window-content,.bully-v3 #calculator-window .window-content{background:repeating-linear-gradient(0deg,rgba(93,69,35,.025) 0 1px,transparent 1px 4px),#e6dabc!important;color:#2b241a!important}
.bully-v3 #computer-window{width:min(650px,calc(100vw - 40px))}.bully-v3 #computer-window .computer-content{padding:17px!important;border-top:3px double #9b7a3d}.bully-v3 #computer-window .computer-content::before{content:"BULLWORTH ACADEMY · STUDENT FILES";display:block;margin-bottom:8px;padding-bottom:7px;color:#705426;border-bottom:1px solid #ad966b;font:bold 9px Georgia,serif;letter-spacing:2px}.bully-v3 #computer-window #computer-heading{color:#183b31!important;font:bold 22px Georgia,serif!important}.bully-v3 #computer-window .computer-item:hover,.bully-v3 #computer-window .computer-item.selected{background:#1b4a3d!important;color:#f0dfb3!important}
.bully-v3 #control-panel-window .control-panel-content{padding:15px!important}.bully-v3 #control-panel-window .control-panel-content::before{content:"BULLWORTH ACADEMY · TERMINAL CONFIGURATION";display:block;margin-bottom:12px;padding:8px 10px;color:#d5b45e;background:#113b31;border:2px double #a9823e;font:bold 10px Georgia,serif;letter-spacing:1px}.bully-v3 #control-panel-window .control-applet{background:#ddcfaa!important;border-color:#8c7349!important;color:#32271a!important}.bully-v3 #control-panel-window .control-applet:hover{background:#173f34!important;color:#f1dfb1!important}
.bully-v3 #notepad-window .window-titlebar span::after{content:" · BULLWORTH ACADEMY";opacity:.72}.bully-v3 #notepad-window .notepad-textarea{color:#33281d!important;border:7px solid #d2c39f!important;box-shadow:inset 0 0 0 1px #a99468;font:13px/1.55 "Courier New",monospace!important;background-image:repeating-linear-gradient(0deg,transparent 0 21px,rgba(111,93,59,.12) 21px 22px)!important}
.bully-v3 #paint-window .window-titlebar span::before{content:"ART ROOM — "}.bully-v3 #paint-window .paint-toolbar,.bully-v3 #paint-window .paint-palette{background:#c9b991!important;border-color:#836c45!important}.bully-v3 #paint-window canvas{border:5px ridge #80663d!important;box-shadow:3px 3px 0 rgba(0,0,0,.18)}
.bully-v3 #calculator-window .calculator-body,.bully-v3 #calculator-window .calculator-panel{background:#c8b991!important;border-color:#7b6541!important}.bully-v3 #calculator-window .calculator-display{background:#12271f!important;color:#b7df92!important;border-color:#9b7c42!important}
.bullworth-diagnostics-window{width:min(560px,calc(100vw - 40px))}.bullworth-diagnostics-content{padding:12px!important;background:#ded1b2!important}.bullworth-diagnostics-header{display:flex;align-items:center;gap:11px;margin-bottom:10px;padding-bottom:8px;border-bottom:3px double #82642c}.bullworth-diagnostics-header h2{margin:0;color:#2d251c;font:bold 23px Georgia,serif}.bullworth-diagnostics-header p{margin:2px 0 0;color:#6f5837;font:9px Georgia,serif;letter-spacing:2px}.bullworth-diagnostics-screen{padding:14px;background:linear-gradient(#071b15,#06140f);border:5px ridge #795d36;color:#8df574;box-shadow:inset 0 0 16px rgba(40,255,84,.035);font:11px/1.4 "Courier New",monospace}.diagnostic-line{display:grid;grid-template-columns:160px 1fr;gap:12px;padding:5px 0;border-bottom:1px dotted rgba(113,192,113,.12)}.diagnostic-line span{color:#d0a84e}.diagnostic-line strong{color:#9aff7f;font-weight:normal}.diagnostic-rule{height:1px;margin:13px 0;background:repeating-linear-gradient(90deg,#7bad6b 0 6px,transparent 6px 11px)}.bullworth-diagnostics-screen p{margin:0;color:#bea057;font-size:9px;letter-spacing:1px}
.bullworth-restricted-window{width:min(590px,calc(100vw - 40px))!important}.faculty-network-content{padding:14px!important;background:repeating-linear-gradient(0deg,rgba(101,73,34,.025) 0 1px,transparent 1px 4px),#e1d4b4!important}.faculty-network-header{display:flex;align-items:center;gap:12px;margin-bottom:13px;padding:10px;background:#cabb95;border:2px inset #8b744d}.faculty-network-header .restricted-folder-icon{margin:0!important;flex:0 0 58px}.faculty-network-header h2{margin:0;color:#64241e;font:bold 18px "Courier New",monospace}.faculty-network-header p{margin:3px 0 0;color:#725333;font:9px Georgia,serif;letter-spacing:1px}.faculty-folder-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}.faculty-folder-entry{min-height:88px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;padding:8px;background:#d8c8a2;border:2px outset #a48d62;color:#362a1d}.faculty-folder-entry:hover{background:#173e34;color:#eedba9}.faculty-folder-entry>span{width:35px;height:35px;display:grid;place-items:center;background:#6e241f;border:2px double #b88b42;color:#f1cf72;font:bold 10px "Courier New",monospace}.faculty-folder-entry strong{font:bold 8px "Courier New",monospace}.faculty-access-strip{display:grid;grid-template-columns:auto 1fr;gap:10px;align-items:center;margin-top:12px}.faculty-access-strip #restricted-access-status{margin:0!important}
.bullworth-notice.detention.active-detention{background:#e5c3a4!important;border-color:#772b21!important;box-shadow:0 0 0 3px rgba(121,38,29,.16);animation:bullworthDetentionPulse 1.25s steps(2,end) infinite}.bullworth-notice.detention.active-detention strong{color:#8a1e17!important}@keyframes bullworthDetentionPulse{50%{filter:brightness(.89)}}
.bullworth-class-bell{position:absolute;left:50%;top:74px;z-index:55;min-width:290px;display:grid;grid-template-columns:62px 1fr;align-items:center;gap:10px;transform:translateX(-50%) translateY(-14px);padding:10px;background:#d8c599;border:5px ridge #725735;color:#2d2419;box-shadow:5px 7px 0 rgba(0,0,0,.34);opacity:0;pointer-events:none;transition:opacity .15s,transform .15s}.bullworth-class-bell.ringing{opacity:1;transform:translateX(-50%) translateY(0)}.class-bell-icon{width:52px;height:52px;display:grid;place-items:center;border-radius:50% 50% 38% 38%;background:#a67528;border:3px double #654a28;color:#f1db9b;font:bold 8px Georgia,serif}.bullworth-class-bell strong,.bullworth-class-bell span,.bullworth-class-bell small{display:block}.bullworth-class-bell strong{color:#6d241e;font:bold 12px Georgia,serif;letter-spacing:1px}.bullworth-class-bell span{margin-top:2px;font:bold 17px Georgia,serif}.bullworth-class-bell small{margin-top:2px;color:#675336;font:9px Georgia,serif}
.bully-v3.bullworth-curfew #taskbar::before{display:none!important;content:none!important}
@media(max-width:700px){.faculty-folder-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.bullworth-class-bell{min-width:min(290px,calc(100vw - 30px))}}