/* ============================================================ * htelegraf: стиль «Windows 98» — СГЕНЕРИРОВАН скриптом scripts/gen98.py * из эталона workdir1/miniapp/static/css/98.css (jdan/98.css v0.1.20, * MIT). НЕ править руками — править генератор или 98-htelegraf.css! * * Включается классом .style-98 на (тёмная — + .dark): * «...» -> Другие настройки -> Стиль -> Windows 98 (galene.js), * заранее при загрузке (theme-early.js, localStorage htelegraf-style). * Все цвета — переменные --s98-*; тёмный вариант переопределяет только их. * data:-URI из 98.css вычищены (CSP img-src 'self'); то, что ими * рисовалось, переопределено в 98-htelegraf.css файлами из img/98/. * ============================================================ */ /* --- палитра: светлая «Windows 98» --- */ html.style-98 { --s98-font: Tahoma, "Segoe UI", Verdana, Arial, sans-serif; --s98-face: #c0c0c0; /* серебро панелей */ --s98-hilite: #ffffff; /* светлый бевел */ --s98-light: #dfdfdf; /* светло-серый бевел */ --s98-shadow: #808080; /* тёмно-серый бевел */ --s98-dark: #0a0a0a; /* чёрный бевел / текст */ --s98-text: #0a0a0a; --s98-text-dim: #444; --s98-well: #ffffff; /* фон «колодцев» */ --s98-desktop: #008080; /* бирюзовый «рабочий стол» */ --s98-title-a: #000080; /* титлбар: левый край */ --s98-title-b: #1084d0; /* титлбар: правый край */ --s98-title-text: #ffffff; --s98-sel: #000080; /* выделение */ --s98-sel-text: #ffffff; --s98-link: #0000ee; --s98-msg-alt: #d8d8d8; /* контекстное меню участников (third-party/contextual) */ --contextualMenuBg: #c0c0c0; --contextualMenuText: #0a0a0a; --contextualSubMenuBg: #c0c0c0; --contextualHover: #000080; --contextualHoverText: #ffffff; --contextualSeperator: #808080; --contextualOverflowIcon: #0a0a0a; --contextualMenuRadius: 0px; --contextualMenuShadow: 2px 2px 0 #0a0a0a; } /* --- тёмная разновидность «Windows 98» снята (Task 34) --- * По решению пользователя у стиля 98 осталась ТОЛЬКО светлая тема: * переключатель «Тема» в 98 скрыт (98-htelegraf.css), theme-early.js * снимает класс .dark, а тёмная палитра --s98-* отсюда удалена — * даже если .dark окажется на , переменные останутся светлыми. */ /* --- шрифт (Task 36): пиксельный "Pixelated MS Sans Serif" УБРАН — * в нём нет кириллицы, из-за чего русские и английские буквы на странице * рисовались разными шрифтами. Теперь один стек для всего; файлы * static/fonts/ms_sans_serif*.woff2 больше не подключаются. --- */ /*! 98.css v0.1.20 - https://github.com/jdan/98.css */ html.style-98 body{color:var(--s98-text);font-family:Arial;font-size:12px} html.style-98 .title-bar,html.style-98 .window,html.style-98 button,html.style-98 input,html.style-98 label,html.style-98 option,html.style-98 select,html.style-98 table,html.style-98 textarea,html.style-98 ul.tree-view{;font-family:var(--s98-font);font-size:11px} html.style-98 h1{font-size:5rem} html.style-98 h2{font-size:2.5rem} html.style-98 h3{font-size:2rem} html.style-98 h4{font-size:1.5rem} html.style-98 u{border-bottom:.5px solid var(--s98-text);text-decoration:none} html.style-98 button,html.style-98 input[type=reset],html.style-98 input[type=submit]{border:none;border-radius:0;box-sizing:border-box;color:transparent;min-height:23px;min-width:75px;padding:0 12px;text-shadow:0 0 var(--s98-text)} html.style-98 .vertical-bar,html.style-98 button,html.style-98 input[type=reset],html.style-98 input[type=submit]{background:var(--s98-face);box-shadow:inset -1px -1px #0a0a0a,inset 1px 1px #fff,inset -2px -2px var(--s98-shadow),inset 2px 2px #dfdfdf} html.style-98 .vertical-bar{height:20px;width:4px} html.style-98 button:not(:disabled):active,html.style-98 input[type=reset]:not(:disabled):active,html.style-98 input[type=submit]:not(:disabled):active{box-shadow:inset -1px -1px #fff,inset 1px 1px #0a0a0a,inset -2px -2px #dfdfdf,inset 2px 2px var(--s98-shadow);text-shadow:1px 1px var(--s98-text)} @media (not(hover)){html.style-98 button:not(:disabled):hover,html.style-98 input[type=reset]:not(:disabled):hover,html.style-98 input[type=submit]:not(:disabled):hover{box-shadow:inset -1px -1px #fff,inset 1px 1px #0a0a0a,inset -2px -2px #dfdfdf,inset 2px 2px var(--s98-shadow)}} html.style-98 button:focus,html.style-98 input[type=reset]:focus,html.style-98 input[type=submit]:focus{outline:1px dotted #000;outline-offset:-4px} html.style-98 button::-moz-focus-inner,html.style-98 input[type=reset]::-moz-focus-inner,html.style-98 input[type=submit]::-moz-focus-inner{border:0} html.style-98 :disabled,html.style-98 :disabled+label,html.style-98 input[readonly],html.style-98 input[readonly]+label{color:var(--s98-shadow)} html.style-98 :disabled+label,html.style-98 button:disabled,html.style-98 input[type=reset]:disabled,html.style-98 input[type=submit]:disabled{text-shadow:1px 1px 0 #fff} html.style-98 .window{background:var(--s98-face);box-shadow:inset -1px -1px #0a0a0a,inset 1px 1px #dfdfdf,inset -2px -2px var(--s98-shadow),inset 2px 2px #fff;padding:3px} html.style-98 .title-bar{align-items:center;background:linear-gradient(90deg,var(--s98-title-a),var(--s98-title-b));display:flex;justify-content:space-between;padding:3px 2px 3px 3px} html.style-98 .title-bar.inactive{background:linear-gradient(90deg,var(--s98-shadow),#b5b5b5)} html.style-98 .title-bar-text{color:var(--s98-title-text);font-weight:700;letter-spacing:0;margin-right:24px} html.style-98 .title-bar-controls{display:flex} html.style-98 .title-bar-controls button{display:block;min-height:14px;min-width:16px;padding:0} html.style-98 .title-bar-controls button:active{padding:0} html.style-98 .title-bar-controls button:focus{outline:none} html.style-98 .title-bar-controls button[aria-label=Minimize]{background-image:none;background-position:bottom 3px left 4px;background-repeat:no-repeat} html.style-98 .title-bar-controls button[aria-label=Maximize]{background-image:none;background-position:top 2px left 3px;background-repeat:no-repeat} html.style-98 .title-bar-controls button[aria-label=Restore]{background-image:none;background-position:top 2px left 3px;background-repeat:no-repeat} html.style-98 .title-bar-controls button[aria-label=Help]{background-image:none;background-position:top 2px left 5px;background-repeat:no-repeat} html.style-98 .title-bar-controls button[aria-label=Close]{background-image:none;background-position:top 3px left 4px;background-repeat:no-repeat;margin-left:2px} html.style-98 .status-bar{gap:1px;display:flex;margin:0 1px} html.style-98 .status-bar-field{box-shadow:inset -1px -1px #dfdfdf,inset 1px 1px var(--s98-shadow);flex-grow:1;margin:0;padding:2px 3px} html.style-98 .window-body{margin:8px} html.style-98 fieldset{border-image:none 2;margin:0;padding:10px;padding-block-start:8px} html.style-98 legend{background:var(--s98-face)} html.style-98 .field-row{align-items:center;display:flex} html.style-98 [class^=field-row]+[class^=field-row]{margin-top:6px} html.style-98 .field-row>*+*{margin-left:6px} html.style-98 .field-row-stacked{display:flex;flex-direction:column} html.style-98 .field-row-stacked *+*{margin-top:6px} html.style-98 label{align-items:center;display:inline-flex} html.style-98 input[type=checkbox],html.style-98 input[type=radio]{appearance:none;-webkit-appearance:none;-moz-appearance:none;background:0;border:none;margin:0;opacity:0;position:fixed} html.style-98 input[type=checkbox]+label,html.style-98 input[type=radio]+label{line-height:13px} html.style-98 input[type=radio]+label{margin-left:18px;position:relative} html.style-98 input[type=radio]+label:before{background:none;content:"";display:inline-block;height:12px;left:-18px;margin-right:6px;position:absolute;top:0;width:12px} html.style-98 input[type=radio]:active+label:before{background:none} html.style-98 input[type=radio]:checked+label:after{background:none;content:"";display:block;height:4px;left:-14px;position:absolute;top:4px;width:4px} html.style-98 input[type=checkbox]:focus+label,html.style-98 input[type=radio]:focus+label{outline:1px dotted #000} html.style-98 input[type=radio][disabled]+label:before{background:none} html.style-98 input[type=radio][disabled]:checked+label:after{background:none} html.style-98 input[type=checkbox]+label{margin-left:19px;position:relative} html.style-98 input[type=checkbox]+label:before{background:var(--s98-well);box-shadow:inset -1px -1px #fff,inset 1px 1px var(--s98-shadow),inset -2px -2px #dfdfdf,inset 2px 2px #0a0a0a;content:"";display:inline-block;height:13px;left:-19px;margin-right:6px;position:absolute;width:13px} html.style-98 input[type=checkbox]:active+label:before{background:var(--s98-face)} html.style-98 input[type=checkbox]:checked+label:after{background:none;content:"";display:block;height:7px;left:-16px;position:absolute;top:3px;width:7px} html.style-98 input[type=checkbox][disabled]+label:before{background:var(--s98-face)} html.style-98 input[type=checkbox][disabled]:checked+label:after{background:none} html.style-98 input[type=email],html.style-98 input[type=number],html.style-98 input[type=password],html.style-98 input[type=text]{-webkit-appearance:none;-moz-appearance:none;appearance:none;border:none;border-radius:0} html.style-98 input[type=email],html.style-98 input[type=number],html.style-98 input[type=password],html.style-98 input[type=text],html.style-98 select{background-color:var(--s98-sel-text);box-shadow:inset -1px -1px #fff,inset 1px 1px var(--s98-shadow),inset -2px -2px #dfdfdf,inset 2px 2px #0a0a0a;box-sizing:border-box;padding:3px 4px} html.style-98 select,html.style-98 textarea{border:none} html.style-98 textarea{-webkit-appearance:none;-moz-appearance:none;appearance:none;background-color:var(--s98-sel-text);border-radius:0;box-shadow:inset -1px -1px #fff,inset 1px 1px var(--s98-shadow),inset -2px -2px #dfdfdf,inset 2px 2px #0a0a0a;box-sizing:border-box;padding:3px 4px} html.style-98 input[type=email],html.style-98 input[type=password],html.style-98 input[type=text],html.style-98 select{height:21px} html.style-98 input[type=number]{height:22px} html.style-98 input[type=email],html.style-98 input[type=number],html.style-98 input[type=password],html.style-98 input[type=text]{line-height:2} html.style-98 input[type=email]:disabled,html.style-98 input[type=email]:read-only,html.style-98 input[type=number]:disabled,html.style-98 input[type=number]:read-only,html.style-98 input[type=password]:disabled,html.style-98 input[type=password]:read-only,html.style-98 input[type=text]:disabled,html.style-98 input[type=text]:read-only,html.style-98 textarea:disabled{background-color:var(--s98-face)} html.style-98 select{appearance:none;-webkit-appearance:none;-moz-appearance:none;background-image:none;background-position:top 2px right 2px;background-repeat:no-repeat;border-radius:0;padding-right:32px;position:relative} html.style-98 input[type=email]:focus,html.style-98 input[type=number]:focus,html.style-98 input[type=password]:focus,html.style-98 input[type=text]:focus,html.style-98 select:focus,html.style-98 textarea:focus{outline:none} html.style-98 input[type=range]{-webkit-appearance:none;background:transparent;width:100%} html.style-98 input[type=range]:focus{outline:none} html.style-98 input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;background:none;border:none;box-shadow:none;height:21px;transform:translateY(-8px);width:11px} html.style-98 input[type=range].has-box-indicator::-webkit-slider-thumb{background:none;transform:translateY(-10px)} html.style-98 input[type=range]::-moz-range-thumb{background:none;border:0;border-radius:0;height:21px;transform:translateY(2px);width:11px} html.style-98 input[type=range].has-box-indicator::-moz-range-thumb{background:none;transform:translateY(0)} html.style-98 input[type=range]::-webkit-slider-runnable-track{background:#000;border-bottom:1px solid var(--s98-shadow);border-right:1px solid var(--s98-shadow);box-shadow:1px 0 0 #fff,1px 1px 0 #fff,0 1px 0 #fff,-1px 0 0 #a9a9a9,-1px -1px 0 #a9a9a9,0 -1px 0 #a9a9a9,-1px 1px 0 #fff,1px -1px #a9a9a9;box-sizing:border-box;height:2px;width:100%} html.style-98 input[type=range]::-moz-range-track{background:#000;border-bottom:1px solid var(--s98-shadow);border-right:1px solid var(--s98-shadow);box-shadow:1px 0 0 #fff,1px 1px 0 #fff,0 1px 0 #fff,-1px 0 0 #a9a9a9,-1px -1px 0 #a9a9a9,0 -1px 0 #a9a9a9,-1px 1px 0 #fff,1px -1px #a9a9a9;box-sizing:border-box;height:2px;width:100%} html.style-98 .is-vertical{display:inline-block;height:150px;transform:translateY(50%);width:4px} html.style-98 .is-vertical>input[type=range]{height:4px;margin:0 16px 0 10px;transform:rotate(270deg) translateX(calc(-50% + 8px));transform-origin:left;width:150px} html.style-98 .is-vertical>input[type=range]::-webkit-slider-runnable-track{border-bottom:1px solid var(--s98-shadow);border-left:1px solid var(--s98-shadow);border-right:0;box-shadow:-1px 0 0 #fff,-1px 1px 0 #fff,0 1px 0 #fff,1px 0 0 #a9a9a9,1px -1px 0 #a9a9a9,0 -1px 0 #a9a9a9,1px 1px 0 #fff,-1px -1px #a9a9a9} html.style-98 .is-vertical>input[type=range]::-moz-range-track{border-bottom:1px solid var(--s98-shadow);border-left:1px solid var(--s98-shadow);border-right:0;box-shadow:-1px 0 0 #fff,-1px 1px 0 #fff,0 1px 0 #fff,1px 0 0 #a9a9a9,1px -1px 0 #a9a9a9,0 -1px 0 #a9a9a9,1px 1px 0 #fff,-1px -1px #a9a9a9} html.style-98 .is-vertical>input[type=range]::-webkit-slider-thumb{transform:translateY(-8px) scaleX(-1)} html.style-98 .is-vertical>input[type=range].has-box-indicator::-webkit-slider-thumb{transform:translateY(-10px) scaleX(-1)} html.style-98 .is-vertical>input[type=range]::-moz-range-thumb{transform:translateY(2px) scaleX(-1)} html.style-98 .is-vertical>input[type=range].has-box-indicator::-moz-range-thumb{transform:translateY(0) scaleX(-1)} html.style-98 select:focus{background-color:var(--s98-sel);color:var(--s98-sel-text)} html.style-98 select:focus option{background-color:var(--s98-sel-text);color:var(--s98-text)} html.style-98 select:active{background-image:none} html.style-98 a{color:var(--s98-link)} html.style-98 a:focus{outline:1px dotted var(--s98-link)} html.style-98 ul.tree-view{background:var(--s98-well);box-shadow:inset -1px -1px #fff,inset 1px 1px var(--s98-shadow),inset -2px -2px #dfdfdf,inset 2px 2px #0a0a0a;display:block;margin:0;padding:6px} html.style-98 ul.tree-view li{list-style-type:none} html.style-98 ul.tree-view a{color:var(--s98-text);text-decoration:none} html.style-98 ul.tree-view a:focus{background-color:var(--s98-sel);color:var(--s98-sel-text)} html.style-98 ul.tree-view li,html.style-98 ul.tree-view ul{margin-top:3px} html.style-98 ul.tree-view ul{border-left:1px dotted var(--s98-shadow);margin-left:16px;padding-left:16px} html.style-98 ul.tree-view ul>li{position:relative} html.style-98 ul.tree-view ul>li:before{border-bottom:1px dotted var(--s98-shadow);content:"";display:block;left:-16px;position:absolute;top:6px;width:12px} html.style-98 ul.tree-view ul>li:last-child:after{background:var(--s98-well);bottom:0;content:"";display:block;left:-20px;position:absolute;top:7px;width:8px} html.style-98 ul.tree-view details{margin-top:0} html.style-98 ul.tree-view details[open] summary{margin-bottom:0} html.style-98 ul.tree-view ul details>summary:before{margin-left:-22px;position:relative;z-index:1} html.style-98 ul.tree-view details>summary:before{background-color:var(--s98-sel-text);border:1px solid var(--s98-shadow);content:"+";display:block;float:left;height:9px;line-height:8px;margin-right:5px;padding-left:1px;text-align:center;width:8px} html.style-98 ul.tree-view details[open]>summary:before{content:"-"} html.style-98 ul.tree-view details>summary::-webkit-details-marker,html.style-98 ul.tree-view details>summary::marker{content:""} html.style-98 pre{background:var(--s98-well);box-shadow:inset -1px -1px #fff,inset 1px 1px var(--s98-shadow),inset -2px -2px #dfdfdf,inset 2px 2px #0a0a0a;display:block;margin:0;padding:12px 8px} html.style-98 code,html.style-98 code *{font-family:monospace} html.style-98 summary:focus{outline:1px dotted #000} html.style-98 ::-webkit-scrollbar{width:16px} html.style-98 ::-webkit-scrollbar:horizontal{height:17px} html.style-98 ::-webkit-scrollbar-corner{background:#dfdfdf} html.style-98 ::-webkit-scrollbar-track{background-image:none} html.style-98 ::-webkit-scrollbar-thumb{background-color:#dfdfdf;box-shadow:inset -1px -1px #0a0a0a,inset 1px 1px #fff,inset -2px -2px var(--s98-shadow),inset 2px 2px #dfdfdf} html.style-98 ::-webkit-scrollbar-button:horizontal:end:increment,html.style-98 ::-webkit-scrollbar-button:horizontal:start:decrement,html.style-98 ::-webkit-scrollbar-button:vertical:end:increment,html.style-98 ::-webkit-scrollbar-button:vertical:start:decrement{display:block} html.style-98 ::-webkit-scrollbar-button:vertical:start{background-image:none;height:17px} html.style-98 ::-webkit-scrollbar-button:vertical:end{background-image:none;height:17px} html.style-98 ::-webkit-scrollbar-button:horizontal:start{background-image:none;width:16px} html.style-98 ::-webkit-scrollbar-button:horizontal:end{background-image:none;width:16px} html.style-98 .window[role=tabpanel]{position:relative;z-index:2} html.style-98 menu[role=tablist]{display:flex;list-style-type:none;margin:0 0 -2px;padding-left:3px;position:relative;text-indent:0} html.style-98 menu[role=tablist]>li{border-top-left-radius:3px;border-top-right-radius:3px;box-shadow:inset -1px 0 #0a0a0a,inset 1px 1px #dfdfdf,inset -2px 0 var(--s98-shadow),inset 2px 2px #fff;z-index:1} html.style-98 menu[role=tablist]>li[aria-selected=true]{background-color:var(--s98-face);margin-left:-3px;margin-top:-2px;padding-bottom:2px;position:relative;z-index:8} html.style-98 menu[role=tablist]>li>a{color:var(--s98-text);display:block;margin:6px;text-decoration:none} html.style-98 menu[role=tablist]>li[aria-selected=true]>a:focus{outline:none} html.style-98 menu[role=tablist]>li>a:focus{outline:1px dotted var(--s98-text)} html.style-98 menu[role=tablist].multirows>li{flex-grow:1;text-align:center} html.style-98 .sunken-panel{border:2px groove transparent;border-image:none 2;box-sizing:border-box;overflow:auto} html.style-98 .sunken-panel,html.style-98 table{background-color:var(--s98-sel-text)} html.style-98 table{border-collapse:collapse;position:relative;text-align:left;white-space:nowrap} html.style-98 table>thead>tr>*{background:var(--s98-face);box-shadow:inset -1px -1px #0a0a0a,inset 1px 1px #fff,inset -2px -2px var(--s98-shadow),inset 2px 2px #dfdfdf;box-sizing:border-box;font-weight:400;height:17px;padding:0 6px;position:sticky;top:0} html.style-98 table.interactive>tbody>tr{cursor:pointer} html.style-98 table>tbody>tr.highlighted{background-color:var(--s98-sel);color:var(--s98-sel-text)} html.style-98 table>tbody>tr>*{height:14px;padding:0 6px}