/* ═══════════════════════════════════════════════════════════════ skin-win98.css — Windows 98 theme overlay Activated by: Source: backups/20260412_home_chat_8_looks.html (.w98 block, Look 01) Every selector prefixed body[data-skin="win98"] — never bleeds to other skins. ═══════════════════════════════════════════════════════════════ */ /* ── Global defaults: hide win98-only icons in all other skins ── */ .auth-icon-win98, .about-icon-win98 { display: none; } /* ── FOUC guard: html[data-skin="win98"] set by inline head script ── */ html[data-skin="win98"] { background: #008080; } /* ── Base ───────────────────────────────────────────────────── */ body[data-skin="win98"] { font-family: Tahoma, "MS Sans Serif", "Lucida Sans Unicode", sans-serif; font-size: 11px; background: #008080; color: #000000; } /* ── Desktop ────────────────────────────────────────────────── */ body[data-skin="win98"] #desktop { background-color: #008080; background-image: none; top: 34px; /* matches menu-bar height so desktop clears the bar 1:1 with other themes */ } /* ── Menu bar ───────────────────────────────────────────────── */ body[data-skin="win98"] ul[role="menu-bar"] { height: 34px; /* normalized: matches system1 + modern so switching causes zero layout shift */ background: #c0c0c0; border-bottom: 1px solid #808080; font-family: Tahoma, "MS Sans Serif", sans-serif; font-size: 11px; font-weight: normal; padding-left: 4px; } body[data-skin="win98"] #menu-bar-logo { height: 14px; } body[data-skin="win98"] ul[role="menu-bar"] > [role="menu-item"] { padding: 6px 6px; color: #000000; line-height: 1; } body[data-skin="win98"] ul[role="menu-bar"] > [role="menu-item"]:hover, body[data-skin="win98"] ul[role="menu-bar"] > [role="menu-item"].open { background: #000080; color: #ffffff; } /* ── Dropdown menus ─────────────────────────────────────────── */ body[data-skin="win98"] ul[role="menu"] { background: #c0c0c0; color: #000000; border: none; box-shadow: 2px 2px 0 #000000, inset -1px -1px #808080, inset 1px 1px #ffffff; padding: 2px; min-width: 180px; font-family: Tahoma, "MS Sans Serif", sans-serif; font-size: 11px; } body[data-skin="win98"] ul[role="menu"] > [role="menu-item"] > a, body[data-skin="win98"] ul[role="menu"] > [role="menu-item"] > button, body[data-skin="win98"] ul[role="menu"] > [role="menu-item"] > span { font-family: Tahoma, "MS Sans Serif", sans-serif; font-size: 11px; padding: 3px 20px; color: #000000; } body[data-skin="win98"] ul[role="menu"] > [role="menu-item"] > a:hover, body[data-skin="win98"] ul[role="menu"] > [role="menu-item"] > button:hover, body[data-skin="win98"] ul[role="menu"] > [role="menu-item"] > span:hover { background: #000080; color: #ffffff; } body[data-skin="win98"] ul[role="menu"] > [role="menu-item"].divider::after { border-top: 1px solid #808080; } body[data-skin="win98"] .has-submenu > .submenu { background: #c0c0c0; border: none; box-shadow: 2px 2px 0 #000000, inset -1px -1px #808080, inset 1px 1px #ffffff; padding: 2px; } body[data-skin="win98"] .submenu > [role="menu-item"] > span { font-family: Tahoma, "MS Sans Serif", sans-serif; font-size: 11px; padding: 3px 20px; color: #000000; } body[data-skin="win98"] .submenu > [role="menu-item"] > span:hover { background: #000080; color: #ffffff; } /* ── Active-theme check glyph ───────────────────────────────── */ body[data-skin="win98"] [data-action="theme-win98"]::before { content: '✓ '; } body[data-skin="win98"] [data-action="theme-glass"]::before { content: ' '; white-space: pre; } body[data-skin="win98"] [data-action="theme-modern"]::before { content: ' '; white-space: pre; } body[data-skin="win98"] [data-action="theme-system1"]::before { content: ' '; white-space: pre; } /* ── Window chrome ──────────────────────────────────────────── */ body[data-skin="win98"] .window { background-color: #c0c0c0; border: none; border-radius: 0; overflow: hidden; box-shadow: inset -1px -1px #0a0a0a, inset 1px 1px #dfdfdf, inset -2px -2px #808080, inset 2px 2px #ffffff; font-family: Tahoma, "MS Sans Serif", sans-serif; font-size: 11px; } /* ── Title bar ──────────────────────────────────────────────── */ body[data-skin="win98"] .title-bar { height: 36px; /* normalized: matches modern theme height for zero layout shift on switch */ padding: 0 2px 0 4px; background: linear-gradient(to right, #000080, #1084d0); color: #ffffff; border-bottom: none; cursor: default; display: flex; align-items: center; gap: 4px; } body[data-skin="win98"] .title-bar::before { display: none; } body[data-skin="win98"] .title-bar .title { position: static; transform: none; font-family: Tahoma, "MS Sans Serif", sans-serif; font-size: 11px; font-weight: bold; background: transparent; color: #ffffff; padding: 0; margin: 0; flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } body[data-skin="win98"] .window:not(.focused) .title-bar { background: linear-gradient(to right, #808080, #b0b0b0); } body[data-skin="win98"] .window:not(.focused) .title-bar .title { color: #c0c0c0; } /* Close button — raised Win98 square with × glyph, pinned top-right */ body[data-skin="win98"] .title-bar button.close { position: absolute; right: 4px; top: 50%; transform: translateY(-50%); left: auto; width: 16px; height: 14px; border-radius: 0; background: #c0c0c0; box-shadow: inset -1px -1px #0a0a0a, inset 1px 1px #ffffff, inset -2px -2px #808080, inset 2px 2px #dfdfdf; border: none; color: #000000; display: flex; align-items: center; justify-content: center; cursor: default; font-size: 0; /* hide any inherited text */ z-index: 2; } body[data-skin="win98"] .title-bar button.close::after { content: '×'; font-size: 14px; font-family: Tahoma, "MS Sans Serif", sans-serif; line-height: 1; color: #000000; } body[data-skin="win98"] .title-bar button.close:hover::before { display: none; } body[data-skin="win98"] .title-bar button.close:active { box-shadow: inset 1px 1px #0a0a0a, inset -1px -1px #ffffff, inset 2px 2px #808080, inset -2px -2px #dfdfdf; padding-top: 1px; padding-left: 1px; } /* ── Separator ──────────────────────────────────────────────── */ body[data-skin="win98"] .separator { height: 2px; background: none; border-top: 1px solid #808080; border-bottom: 1px solid #ffffff; display: block; margin: 0; } /* ── Details bar ────────────────────────────────────────────── */ body[data-skin="win98"] .details-bar { background: #c0c0c0; border-bottom: none; font-family: Tahoma, "MS Sans Serif", sans-serif; font-size: 11px; } /* ── Window pane ────────────────────────────────────────────── */ body[data-skin="win98"] .window-pane { background: #ffffff; font-family: Tahoma, "MS Sans Serif", sans-serif; font-size: 11px; line-height: 1.4; box-shadow: inset 1px 1px #808080, inset -1px -1px #ffffff, inset 2px 2px #0a0a0a, inset -2px -2px #dfdfdf; } /* ── Chat messages ──────────────────────────────────────────── */ body[data-skin="win98"] #chat-messages { background: #ffffff; padding: 8px; font-family: Tahoma, "MS Sans Serif", sans-serif; font-size: 11px; line-height: 1.4; /* min-height floor — prevents messages area from collapsing to 0 when the chat-input-area grows (large textarea, attachments). 80px keeps at least a few lines of history visible even in a small window. */ min-height: 80px; } body[data-skin="win98"] .chat-msg .chat-role { font-size: 9px; font-weight: bold; color: #808080; text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 2px; font-family: Tahoma, "MS Sans Serif", sans-serif; } body[data-skin="win98"] .chat-msg .chat-text { color: #000000; font-size: 11px; font-family: Tahoma, "MS Sans Serif", sans-serif; } body[data-skin="win98"] .chat-msg.user-msg .chat-text { background: #d4e4f7; padding: 4px 8px; border: 1px solid #808080; max-width: 80%; border-radius: 0; } body[data-skin="win98"] .chat-msg:not(.user-msg) .chat-body { background: transparent; padding: 0; } body[data-skin="win98"] .chat-result { background: #f0f0f0; border: 1px solid #808080; padding: 6px 8px; margin: 4px 0; font-size: 11px; white-space: pre-line; } body[data-skin="win98"] .chat-msg .chat-text a, body[data-skin="win98"] .chat-msg .chat-text a, body[data-skin="win98"] .chat-result a { color: oklch(50% 0.15 240); text-decoration: underline; } body[data-skin="win98"] .chat-msg .chat-text a:hover, body[data-skin="win98"] .chat-result a:hover { background: oklch(50% 0.15 240); color: #ffffff; text-decoration: none; } body[data-skin="win98"] .tool-call, body[data-skin="win98"] .thinking-msg, body[data-skin="win98"] .thinking-work { font-family: Tahoma, "MS Sans Serif", sans-serif; font-size: 11px; color: #808080; font-style: italic; } /* Doc-type option buttons */ body[data-skin="win98"] .chat-buttons { margin: 4px 0; gap: 4px; } body[data-skin="win98"] .chat-buttons .btn { background: #c0c0c0; border: none; box-shadow: inset -1px -1px #0a0a0a, inset 1px 1px #ffffff, inset -2px -2px #808080, inset 2px 2px #dfdfdf; font-family: Tahoma, "MS Sans Serif", sans-serif; font-size: 11px; color: #000000; padding: 3px 10px; border-radius: 0; min-height: auto; text-transform: none; } body[data-skin="win98"] .chat-buttons .btn:active { box-shadow: inset 1px 1px #0a0a0a, inset -1px -1px #ffffff, inset 2px 2px #808080, inset -2px -2px #dfdfdf; } /* Sources drawer */ body[data-skin="win98"] .chat-sources { font-family: Tahoma, "MS Sans Serif", sans-serif; font-size: 11px; color: #000000; border-top: 1px solid #808080; } body[data-skin="win98"] .src-row { color: #000000; } body[data-skin="win98"] .src-meta { color: #808080; } /* ── Chat input area ────────────────────────────────────────── */ body[data-skin="win98"] #chat-input-area { background: #c0c0c0; border-top: 1px solid #808080; padding: 10px 14px; /* normalized: matches modern padding so input area height is identical */ gap: 8px; align-items: flex-end; } body[data-skin="win98"] #chat-input { flex: 1; min-height: 30px; /* normalized: matches modern so input area height is 1:1 */ max-height: 120px; padding: 7px 8px; background: #ffffff; border: none; box-shadow: inset 1px 1px #808080, inset -1px -1px #ffffff, inset 2px 2px #0a0a0a, inset -2px -2px #dfdfdf; font-family: Tahoma, "MS Sans Serif", sans-serif; font-size: 11px; color: #000000; resize: none; border-radius: 0; outline: none; line-height: 16px; } body[data-skin="win98"] #chat-input:focus { outline: none; } body[data-skin="win98"] #chat-send, body[data-skin="win98"] #chat-attach { height: 30px; /* normalized: matches modern 30px height */ padding: 0 10px; background: #c0c0c0; color: #000000; border: none; border-radius: 0; box-shadow: inset -1px -1px #0a0a0a, inset 1px 1px #ffffff, inset -2px -2px #808080, inset 2px 2px #dfdfdf; font-family: Tahoma, "MS Sans Serif", sans-serif; font-size: 11px; cursor: default; text-transform: none; } body[data-skin="win98"] #chat-attach { width: 28px; /* normalized: matches modern 28×28 attach button */ height: 28px; padding: 0; font-size: 14px; display: flex; align-items: center; justify-content: center; } body[data-skin="win98"] #chat-send:active, body[data-skin="win98"] #chat-attach:active { box-shadow: inset 1px 1px #0a0a0a, inset -1px -1px #ffffff, inset 2px 2px #808080, inset -2px -2px #dfdfdf; } body[data-skin="win98"] #chat-attachments { background: #c0c0c0; border-top: 1px solid #808080; padding: 4px 6px; } body[data-skin="win98"] .attach-chip { background: #c0c0c0; border: none; box-shadow: inset -1px -1px #808080, inset 1px 1px #ffffff; font-family: Tahoma, "MS Sans Serif", sans-serif; font-size: 11px; color: #000000; border-radius: 0; } body[data-skin="win98"] #chat-input-area .resize-handle { display: none; } /* ── Context menu ───────────────────────────────────────────── */ body[data-skin="win98"] #context-menu { background: #c0c0c0; border: none; border-radius: 0; box-shadow: 2px 2px 0 #000000, inset -1px -1px #808080, inset 1px 1px #ffffff; padding: 2px; min-width: 160px; font-family: Tahoma, "MS Sans Serif", sans-serif; font-size: 11px; } body[data-skin="win98"] #context-menu > [role="menu-item"] > span { font-family: Tahoma, "MS Sans Serif", sans-serif; font-size: 11px; color: #000000; padding: 3px 20px; } body[data-skin="win98"] #context-menu > [role="menu-item"] > span:hover { background: #000080; color: #ffffff; } body[data-skin="win98"] #context-menu [role="menu-item"] > span svg { display: none; } body[data-skin="win98"] #context-menu > [role="menu-item"].divider::after { border-top: 1px solid #808080; } /* ── Desktop icons — hide SVGs, show Win98 PNGs via ::before ── */ body[data-skin="win98"] .folder-icon > svg { display: none; } body[data-skin="win98"] .folder-icon[data-project-id]::before, body[data-skin="win98"] .folder-icon[data-drive-folder-id]:not([data-project-id])::before { content: ''; display: block; width: 32px; height: 32px; background: url('/static/icon/win98/directory_closed-4.png') center/contain no-repeat; image-rendering: pixelated; margin-bottom: 2px; } /* Home folder */ body[data-skin="win98"] .folder-icon[data-project-id][data-is-home="true"]::before { background-image: url('/static/icon/win98/directory_open_file_mydocs-4.png'); } /* File icons */ body[data-skin="win98"] .folder-icon[data-file-id]:not([data-drive-folder-id])::before { content: ''; display: block; width: 32px; height: 32px; background: url('/static/icon/win98/notepad-3.png') center/contain no-repeat; image-rendering: pixelated; margin-bottom: 2px; } /* Subfolders inside project windows */ body[data-skin="win98"] .window-pane .folder-icon:not([data-file-id]):not([data-project-id])::before { content: ''; display: block; width: 32px; height: 32px; background: url('/static/icon/win98/directory_closed-4.png') center/contain no-repeat; image-rendering: pixelated; margin-bottom: 2px; } /* Icon labels — white text on teal desktop */ body[data-skin="win98"] .folder-label, body[data-skin="win98"] .folder-icon .folder-label, body[data-skin="win98"] .file-icon .folder-label { font-family: Tahoma, "MS Sans Serif", sans-serif; font-size: 11px; color: #ffffff; text-shadow: 1px 1px #000000; background: transparent; } /* Icon labels inside windows — black text */ body[data-skin="win98"] .window-pane .folder-icon .folder-label, body[data-skin="win98"] .window-pane .file-icon .folder-label { color: #000000; text-shadow: none; } /* Selected icon — navy highlight */ body[data-skin="win98"] .folder-icon.selected .folder-label { background: #000080; color: #ffffff; text-shadow: none; } /* Drop target */ body[data-skin="win98"] .folder-icon.folder-drop-target::before { outline: 1px dotted #000000; } /* ── Trash icon ─────────────────────────────────────────────── */ body[data-skin="win98"] #trash-icon .trash-classic, body[data-skin="win98"] #trash-icon .trash-modern { display: none; } body[data-skin="win98"] #trash-icon::before { content: ''; display: block; width: 32px; height: 32px; background: url('/static/icon/win98/recycle_bin_empty-4.png') center/contain no-repeat; image-rendering: pixelated; margin-bottom: 2px; } body[data-skin="win98"] #trash-icon.trash-hover::before { background-image: url('/static/icon/win98/recycle_bin_full-4.png'); } body[data-skin="win98"] .trash-icon .folder-label { color: #ffffff; text-shadow: 1px 1px #000000; } /* ── Modal dialogs ──────────────────────────────────────────── */ body[data-skin="win98"] .modal-dialog { background: #c0c0c0; border: none; border-radius: 0; box-shadow: inset -1px -1px #0a0a0a, inset 1px 1px #dfdfdf, inset -2px -2px #808080, inset 2px 2px #ffffff, 4px 4px 0 #000000; font-family: Tahoma, "MS Sans Serif", sans-serif; font-size: 11px; } body[data-skin="win98"] .modal-dialog .outer-border, body[data-skin="win98"] .modal-dialog .inner-border { border: none; } /* ── Dialog title bar (about/terms/new-folder) ──────────────── */ body[data-skin="win98"] .dialog-title-bar { background: linear-gradient(to right, #000080, #1084d0); height: 36px; /* normalized: matches .title-bar height */ padding: 0 4px; margin: 0; display: flex; align-items: center; } body[data-skin="win98"] .dialog-title-bar .title { font-family: Tahoma, "MS Sans Serif", sans-serif; font-size: 11px; font-weight: bold; background: transparent; color: #ffffff; padding: 0; margin: 0; text-align: left; } /* ── Buttons ────────────────────────────────────────────────── */ body[data-skin="win98"] .btn { background: #c0c0c0; border: none; border-radius: 0; box-shadow: inset -1px -1px #0a0a0a, inset 1px 1px #ffffff, inset -2px -2px #808080, inset 2px 2px #dfdfdf; font-family: Tahoma, "MS Sans Serif", sans-serif; font-size: 11px; font-weight: normal; color: #000000; padding: 4px 14px; min-width: 75px; cursor: default; text-transform: none; } body[data-skin="win98"] .btn:hover { background: #c0c0c0; } body[data-skin="win98"] .btn:active { box-shadow: inset 1px 1px #0a0a0a, inset -1px -1px #ffffff, inset 2px 2px #808080, inset -2px -2px #dfdfdf; padding: 5px 13px 3px 15px; } /* Default button gets a double border (Win98 convention) */ body[data-skin="win98"] .btn-default { background: #c0c0c0; color: #000000; outline: 2px solid #000000; outline-offset: -2px; font-weight: normal; border-color: transparent; } body[data-skin="win98"] .btn-default:hover { background: #c0c0c0; } /* Sign-in link button */ body[data-skin="win98"] a.btn.btn-default { color: #000000; } /* ── Modal content ──────────────────────────────────────────── */ body[data-skin="win98"] .modal-contents { font-family: Tahoma, "MS Sans Serif", sans-serif; font-size: 11px; color: #000000; padding: 12px; } body[data-skin="win98"] .modal-contents label { font-family: Tahoma, "MS Sans Serif", sans-serif; font-size: 11px; color: #000000; } body[data-skin="win98"] .modal-contents input[type="text"] { border: none; border-radius: 0; box-shadow: inset 1px 1px #808080, inset -1px -1px #ffffff, inset 2px 2px #0a0a0a, inset -2px -2px #dfdfdf; padding: 3px 4px; font-family: Tahoma, "MS Sans Serif", sans-serif; font-size: 11px; background: #ffffff; color: #000000; outline: none; } body[data-skin="win98"] .modal-contents p, body[data-skin="win98"] .modal-contents li { font-family: Tahoma, "MS Sans Serif", sans-serif; font-size: 11px; color: #000000; margin-bottom: 4px; line-height: 1.4; } body[data-skin="win98"] .modal-contents strong { font-weight: bold; } body[data-skin="win98"] .modal-contents a { color: #000080; text-decoration: underline; } body[data-skin="win98"] .field-row { font-family: Tahoma, "MS Sans Serif", sans-serif; font-size: 11px; } /* ── Auth dialog icon toggle ────────────────────────────────── */ body[data-skin="win98"] .auth-icon-s1, body[data-skin="win98"] .auth-icon-modern { display: none; } body[data-skin="win98"] .auth-icon-win98 { display: block !important; width: 48px; height: 48px; margin: 0 auto 8px; image-rendering: pixelated; } /* ── About dialog icon toggle ───────────────────────────────── */ body[data-skin="win98"] .about-icon-s1, body[data-skin="win98"] .about-icon-modern { display: none; } body[data-skin="win98"] .about-icon-win98 { display: block !important; width: 48px; height: 48px; margin: 0 auto 8px; image-rendering: pixelated; } /* ── Chat history ───────────────────────────────────────────── */ body[data-skin="win98"] .chat-history-item { border-bottom: 1px solid #808080; padding: 4px 8px; font-family: Tahoma, "MS Sans Serif", sans-serif; font-size: 11px; } body[data-skin="win98"] .chat-history-item:hover { background: #000080; color: #ffffff; } body[data-skin="win98"] .chat-history-item.selected { background: #000080; color: #ffffff; } body[data-skin="win98"] .chat-history-preview, body[data-skin="win98"] .chat-history-meta { font-family: Tahoma, "MS Sans Serif", sans-serif; font-size: 11px; } /* ── Scrollbar ──────────────────────────────────────────────── */ body[data-skin="win98"] ::-webkit-scrollbar { width: 16px; background: #c0c0c0; } body[data-skin="win98"] ::-webkit-scrollbar-track { background: #c0c0c0; background-image: none; border-left: none; box-shadow: inset 1px 1px #808080; } body[data-skin="win98"] ::-webkit-scrollbar-thumb { background: #c0c0c0; border-radius: 0; border: none; box-shadow: inset -1px -1px #0a0a0a, inset 1px 1px #ffffff, inset -2px -2px #808080, inset 2px 2px #dfdfdf; } body[data-skin="win98"] ::-webkit-scrollbar-button { background: #c0c0c0; box-shadow: inset -1px -1px #0a0a0a, inset 1px 1px #ffffff; display: block; height: 16px; } /* ── Taskbar ────────────────────────────────────────────────── */ #wa-taskbar { display: none; } body[data-skin="win98"] #wa-taskbar { display: none !important; position: fixed; left: 0; right: 0; bottom: 0; height: 28px; background: #c0c0c0; border-top: 1px solid #ffffff; box-shadow: inset 0 1px #dfdfdf; align-items: center; padding: 2px 4px; gap: 4px; z-index: 9999; font-family: Tahoma, "MS Sans Serif", sans-serif; font-size: 11px; } body[data-skin="win98"] .start-btn { height: 22px; padding: 0 10px; background: #c0c0c0; color: #000000; border: none; box-shadow: inset -1px -1px #0a0a0a, inset 1px 1px #ffffff, inset -2px -2px #808080, inset 2px 2px #dfdfdf; font-family: Tahoma, "MS Sans Serif", sans-serif; font-size: 11px; font-weight: bold; cursor: default; white-space: nowrap; letter-spacing: 0.02em; } body[data-skin="win98"] .start-btn:active { box-shadow: inset 1px 1px #0a0a0a, inset -1px -1px #ffffff, inset 2px 2px #808080, inset -2px -2px #dfdfdf; } body[data-skin="win98"] .taskbar-sep { width: 1px; height: 22px; background: #808080; border-right: 1px solid #ffffff; margin: 0 2px; flex-shrink: 0; } body[data-skin="win98"] #wa-taskbar-tasks { display: flex; flex: 1; gap: 2px; align-items: center; height: 100%; overflow: hidden; } body[data-skin="win98"] .tb-task { height: 22px; padding: 0 8px; background: #c0c0c0; color: #000000; box-shadow: inset -1px -1px #0a0a0a, inset 1px 1px #ffffff, inset -2px -2px #808080, inset 2px 2px #dfdfdf; font-family: Tahoma, "MS Sans Serif", sans-serif; font-size: 11px; cursor: default; display: flex; align-items: center; white-space: nowrap; max-width: 150px; overflow: hidden; text-overflow: ellipsis; min-width: 80px; } body[data-skin="win98"] .tb-task.active { box-shadow: inset 1px 1px #0a0a0a, inset -1px -1px #ffffff, inset 2px 2px #808080, inset -2px -2px #dfdfdf; background: #d4d0c8; } body[data-skin="win98"] #wa-taskbar .tray { display: flex; align-items: center; height: 22px; padding: 0 8px; box-shadow: inset 1px 1px #808080, inset -1px -1px #ffffff; flex-shrink: 0; } body[data-skin="win98"] #wa-taskbar-clock { font-family: Tahoma, "MS Sans Serif", sans-serif; font-size: 11px; color: #000000; white-space: nowrap; } /* ── Mobile: disable taskbar on small screens ───────────────── */ @media (max-width: 768px) { body[data-skin="win98"] #wa-taskbar { display: none; } body[data-skin="win98"] #desktop { bottom: 0; } body[data-skin="win98"] #chat-window { border-radius: 0 !important; box-shadow: none !important; } body[data-skin="win98"] #mobile-hamburger { color: #000000; } body[data-skin="win98"] #mobile-drawer { background: #c0c0c0; border-right: 1px solid #808080; } body[data-skin="win98"] #mobile-drawer-nav li > span { font-family: Tahoma, "MS Sans Serif", sans-serif; font-size: 12px; color: #000000; } body[data-skin="win98"] #mobile-drawer-nav li > span:hover { background: #000080; color: #ffffff; } }