/* * hdrop: слой адаптации поверх базовой темы 98.css — только то, что * нужно странице передачи файлов и не покрывается hdrop.css: * плоские скроллбары, рамки базовых контролов, кнопки-«тулбар» из * htelegraf (nav-button «Выйти») и ТЁМНАЯ разновидность Windows 98 * (палитра перенесена из 98-htelegraf.css без изменений). * * Тёмная разновидность включается классом .dark на — кнопкой * «Тема» (app.js; состояние — localStorage hdrop-theme, применяется * заранее через theme-early.js без «вспышки» светлой). * CSP: data:-URI запрещены, картинок в стилях нет. */ /* color-scheme объявляем явно (как в htelegraf): иначе «Тёмная тема» * браузера сама перекрашивала серебро, а тёмная разновидность не * красила нативные скроллбары и селекты */ html.style-98 { color-scheme: light; } html.style-98.dark { color-scheme: dark; } html.style-98 ::-webkit-scrollbar { width: 16px; height: 16px; } html.style-98 ::-webkit-scrollbar-track { background: var(--s98-face); } html.style-98 ::-webkit-scrollbar-button { display: none !important; } /* базовые контролы: серебряная кнопка и грoув-рамка fieldset */ html.style-98 button { font-family: var(--s98-font, Tahoma, sans-serif); font-size: 11px; background: var(--s98-face, #c0c0c0); border: none; padding: 3px 12px; min-height: 21px; box-shadow: inset -1px -1px var(--s98-dark, #0a0a0a), inset 1px 1px var(--s98-hilite, #fff), inset -2px -2px var(--s98-shadow, #808080), inset 2px 2px var(--s98-light, #dfdfdf); } html.style-98 button:active { box-shadow: inset -1px -1px var(--s98-hilite, #fff), inset 1px 1px var(--s98-dark, #0a0a0a), inset -2px -2px var(--s98-light, #dfdfdf), inset 2px 2px var(--s98-shadow, #808080); } html.style-98 button:focus-visible { outline: 1px dotted #0a0a0a; outline-offset: -4px; } html.style-98 input[type=text] { background: var(--s98-well, #fff); border: none; padding: 3px 4px; box-shadow: inset -1px -1px var(--s98-hilite, #fff), inset 1px 1px var(--s98-shadow, #808080), inset -2px -2px var(--s98-light, #dfdfdf), inset 2px 2px var(--s98-dark, #0a0a0a); } html.style-98 input[type=text]:focus-visible { outline: 1px dotted #0a0a0a; outline-offset: -4px; } html.style-98 fieldset { border: none; margin: 0 0 10px 0; padding: 8px; box-shadow: inset -1px -1px var(--s98-hilite, #fff), inset 1px 1px var(--s98-shadow, #808080), inset -2px -2px var(--s98-light, #dfdfdf), inset 2px 2px var(--s98-dark, #0a0a0a); background: var(--s98-face, #c0c0c0); } html.style-98 fieldset legend { font-size: 11px; font-weight: 700; padding: 0 4px; } html.style-98 ::selection { background: var(--s98-sel, #000080); color: var(--s98-sel-text, #fff); } /* ==================== кнопки-«тулбар» из htelegraf ==================== * Стиль взят с кнопки «Выйти» htelegraf (98-htelegraf.css, * .nav-link/.nav-button): серебряная кнопка с фасками, иконка * FontAwesome сверху, жирная мелкая подпись снизу; наведение * высветляет, нажатие вдавливает, фокус — точечный outline. */ html.style-98 .hd-navbtn { background: var(--s98-face); color: var(--s98-text); border-radius: 0; box-shadow: inset -1px -1px var(--s98-dark), inset 1px 1px var(--s98-hilite), inset -2px -2px var(--s98-shadow), inset 2px 2px var(--s98-light); /* 98.css задаёт всем button min-width:75px — отменяем */ min-width: 0; min-height: 0; padding: 3px 8px; transition: none; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; } html.style-98 .hd-navbtn span { color: var(--s98-text); font-size: 16px; line-height: 1; } html.style-98 .hd-navbtn label { color: var(--s98-text); font-family: var(--s98-font, Tahoma, sans-serif); font-size: 10px; font-weight: 700; cursor: inherit; } html.style-98 .hd-navbtn:hover { background: var(--s98-light); color: var(--s98-text); } html.style-98 .hd-navbtn:active { box-shadow: inset -1px -1px var(--s98-hilite), inset 1px 1px var(--s98-dark), inset -2px -2px var(--s98-light), inset 2px 2px var(--s98-shadow); } html.style-98 .hd-navbtn:focus-visible { outline: 1px dotted var(--s98-text); outline-offset: -4px; } /* ==================== ТЁМНАЯ РАЗНОВИДНОСТЬ «WINDOWS 98» ==================== * Палитра перенесена из 98-htelegraf.css без изменений: * стол #006666, панели/кнопки #3c4143, «колодцы» #181a1b, * титлбары — прежний синий градиент navy → #1084d0 с белым текстом. * Секция переопределяет ТОЛЬКО переменные --s98-* — все панели, фаски * и «колодцы», нарисованные через переменные в hdrop.css и выше, * темнеют автоматически. Ниже — поточечные перекрытия цветов, * захардкоженных в 98.css. */ html.style-98.dark { --s98-face: #3c4143; /* панели и кнопки */ --s98-hilite: #4d5254; /* светлый бевел (внешний) */ --s98-light: #42474a; /* светло-серый бевел (внутренний) */ --s98-shadow: #272b2d; /* тёмно-серый бевел (внутренний) */ --s98-dark: #0e1011; /* чёрный бевел (внешний) */ --s98-text: #e8eaeb; --s98-text-dim: #9ba1a4; --s98-well: #181a1b; /* фон «колодцев» */ --s98-desktop: #006666; /* тёмно-бирюзовый «рабочий стол» */ --s98-sel: #000080; /* выделение — navy, без изменений */ --s98-sel-text: #ffffff; --s98-link: #7fb8e0; --s98-msg-alt: #2e3234; } /* --- поточечные перекрытия захардкоженных цветов 98.css --- */ /* кнопки: бевелы в 98.css жёстко прописаны #fff/#dfdfdf/#0a0a0a */ html.style-98.dark button { box-shadow: inset -1px -1px var(--s98-dark), inset 1px 1px var(--s98-hilite), inset -2px -2px var(--s98-shadow), inset 2px 2px var(--s98-light); } html.style-98.dark button:not(:disabled):active { box-shadow: inset -1px -1px var(--s98-hilite), inset 1px 1px var(--s98-dark), inset -2px -2px var(--s98-light), inset 2px 2px var(--s98-shadow); } html.style-98.dark button:focus-visible, html.style-98.dark button:focus { outline-color: var(--s98-text); } /* поля ввода: фон в 98.css белый — перекрашиваем в «колодец» */ html.style-98.dark input[type=text] { background-color: var(--s98-well); color: var(--s98-text); box-shadow: inset -1px -1px var(--s98-hilite), inset 1px 1px var(--s98-shadow), inset -2px -2px var(--s98-light), inset 2px 2px var(--s98-dark); } html.style-98.dark ::-webkit-scrollbar-corner { background: var(--s98-shadow); } html.style-98.dark ::-webkit-scrollbar-thumb { background-color: var(--s98-light); box-shadow: inset -1px -1px var(--s98-dark), inset 1px 1px var(--s98-hilite), inset -2px -2px var(--s98-shadow), inset 2px 2px var(--s98-light); } /* иконки FontAwesome наследуют цвет текста */ html.style-98 .hd-navbtn i { color: var(--s98-text); } /* красные тексты ошибок: в темноте — светло-красные (как в htelegraf) */ html.style-98.dark .hd-error, html.style-98.dark .hd-transfer-err { color: #ff7b7b; }