Skip to content

Instantly share code, notes, and snippets.

@xero

xero/win98.css

Last active May 20, 2025 21:09
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save xero/1c2c347db7aefda86298fa415df14e92 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save xero/1c2c347db7aefda86298fa415df14e92 to your computer and use it in GitHub Desktop.
Download ZIP
win98.css
Raw
win98.css
@font-face{
font-family:"Pixelated MS Sans Serif";
src:url("/fonts/ms_sans_serif.woff") format("woff");
src:url("/fonts/ms_sans_serif.woff2") format("woff2");
font-weight:normal;
font-style:normal;
}
*,html{
font-family:"Pixelated MS Sans Serif", "Microsoft Sans Serif", "MS Sans Serif", Roboto, sans-serif;
font-weight:normal;
image-rendering:-moz-crisp-edges;
image-rendering:-o-crisp-edges;
image-rendering:-webkit-optimize-contrast;
-ms-interpolation-mode:nearest-neighbor;
}
*:focus {
outline: none !important;
}
::-webkit-scrollbar {
width: 16px;
}
::-webkit-scrollbar:horizontal {
height: 17px;
}
::-webkit-scrollbar-corner {
background: #dfdfdf;
}
::-webkit-scrollbar-thumb {
background-color: #dfdfdf;
box-shadow:
inset -1px -1px #0a0a0a, inset 1px 1px #fff,
inset -2px -2px #808080, inset 2px 2px #dfdfdf;
}
::-webkit-scrollbar-button:horizontal:start:decrement,
::-webkit-scrollbar-button:horizontal:end:increment,
::-webkit-scrollbar-button:vertical:start:decrement,
::-webkit-scrollbar-button:vertical:end:increment {
display: block;
}
::-webkit-scrollbar-track {
background-image: url("/x/win98/dot.svg");
}
::-webkit-scrollbar-button:vertical:start {
height: 17px;
background-image: url("/x/win98/up.svg");
}
::-webkit-scrollbar-button:vertical:end {
height: 17px;
background-image: url("/x/win98/down.svg");
}
::-webkit-scrollbar-button:horizontal:start {
width: 16px;
background-image: url("/x/win98/left.svg");
}
::-webkit-scrollbar-button:horizontal:end {
width: 16px;
background-image: url("/x/win98/right.svg");
}
body{
background:#222;
user-select:none;
margin:0;
padding:0;
width:100%;
height:100%;
overflow: hidden;
}
#boot,
#windows,
#desktop,
#BSOD,
#clouds,
.overlay {
display:block;
position:fixed;
top:0;
left:0;
width: 100%;
height:100%;
}
#boot,
#windows,
#BSOD {
visibility: hidden;
}
#boot{
background: #000;
z-index: 1;
#clouds {
background:url("/x/win98/clouds.svg");
background-size: cover;
}
#logo {
position: absolute;
left: 50%;
top: 50%;
width: 320px;
height: 280px;
transform: scale(2) translate(-20%, -45%);
background:url("/x/win98/logo.svg");
}
h2,h3 {
position: absolute;
}
h2,
h2 *,
h3,
h3 *,
h4,
h4 *{
font-family: Arial, sans-serif;
}
h2 {
font-size: 52px;
left: 40%;
bottom: 15%;
transform: scale(2);
color: white;
letter-spacing: 1.2px;
line-height: 1ex;
z-index: 1;
text-shadow: 2px 2px #222;
em{
display: block;
text-indent: 12px;
font-size: 74px;
font-weight: 900;
color: #000;
letter-spacing: -6px;
line-height: 1ex;
text-shadow: none;
margin-top: 11px;
}
sup {
font-size: 25px;
padding: 0 5px;
text-shadow: none;
}
i {
font-style: normal;
font-size: 25px;
padding-left: 230px;
}
}
h3 {
right: 0;
font-style: italic;
font-weight: bold;
font-size: 48px;
line-height: 50px;
z-index: 1;
letter-spacing: -2px;
margin-right: 2ex;
sup{
margin-left: 4px;
font-size: 18px;
margin-left: 5px;
}
}
h4 {
display: none;
position: absolute;
font-weight: bold;
font-size: 55px;
z-index: 999;
letter-spacing: -2px;
margin-right: 2ex;
left: 40%;
bottom: -3%;
color: #000;
}
footer.loading {
position: absolute;
overflow: hidden;
bottom: 0;
width: 200%;
height: 24px;
background: linear-gradient(90deg, #47b, #bcd 19%, #bcd 31%, #47b 50%, #bcd 69%, #bcd 81%, #47b);
-webkit-animation: smear 2s linear infinite;
animation: smear 2s linear infinite;
}
}
#windows {
#desktop{
background:#018281;
color: #000;
z-index: 5;
article{
position:absolute;
transform:scale(1.5);
text-align:center;
isolation: isolate;
kbd {
display:block;
color: #000;
clear: both;
padding: 2px;
}
&.selected img {
filter: drop-shadow(0px 1000px 0 #000080);
transform: translateY(-1000px);
}
&.selected kbd {
background: #000080;
color: #f0f0f0;
}
}
#cpu {
top:3%;
left:2%;
}
#docs {
top:16%;
left:3%;
}
#trash {
bottom:12%;
left:3%;
}
#disks {
top:3%;
left:14%;
}
#msie {
top:40%;
left:50%;
}
#vb6 {
top:34%;
left:3%;
}
#todo {
bottom:40%;
left:90%;
}
#game {
bottom:10%;
left:80%;
}
#BO2k {
top:3%;
left:95%;
}
#sub7 {
top:5%;
left:86%;
}
#photoshop {
top:36%;
left:35%;
}
#spewfy {
top:5%;
left:78%;
}
#adraw{
top:23%;
left:79%;
}
#dialup {
top:17%;
left:13%;
}
#cal {
top:53%;
left:3%;
}
#cd {
top:2%;
left:23%;
}
#winamp{
top:4%;
left:30%;
}
#irc {
top:82%;
left:94%;
}
#torrent {
top:22%;
left:92%;
}
#reg {
top:32%;
left:24%;
}
#dw {
top:25%;
left:45%;
}
#putty {
top:2%;
left:55%;
}
#nero {
top:17%;
left:22%;
}
#app{
top:19%;
left:69%;
}
#vstudio{
top:35%;
left:12%;
}
}
.app-hidden {
visibility: hidden !important;
pointer-events: none !important;
}
#app-adraw,
#app-bo2k,
#app-cmd,
#app-dos,
#app-explorer,
#app-help,
#app-mycpu,
#app-nero,
#app-notepad,
#app-photoshop,
#app-regedit,
#app-sub7,
#app-solitaire,
#app-winamp,
#app-xircon {
z-index: 50;
pointer-events: auto;
header {
width: 100%;
margin:0;
padding:0;
height: 25px;
.exit,
.min{
display:block;
float: right;
height: 25px;
width: 25px;
}
.min{
margin-right:14px;
}
}
}
#app-regedit {
height: 223px;
width: 450px;
&::before{
width: 448px;
height: 221px;
}
h2,
.label {
width: 442px;
}
footer {
gap: 1px;
display: flex;
margin: 0 5px 1px 4px;
padding:0px;
width: 98%;
height: 25px;
max-height: 25px;
border:0;
section {
box-shadow: inset -1px -1px #dfdfdf, inset 1px 1px grey;
flex-grow: 1;
margin: 0;
padding: 2px 3px;
}
}
aside {
float:right;
background:#fff;
width: 204px;
height: 149px;
border-width: 1px;
border-style: solid;
border-color: #808080 #fff #fff #808080;
padding: 0;
box-sizing: border-box;
header {
width: 202px;
height:22px;
background-color: #c0c0c0;
border-bottom: 1px solid #808080;
span:nth-child(1) {
border-right: 1px solid #808080;
}
span:nth-child(2) {
border-left: 1px solid #fff;
}
span{
background: #c0c0c0;
}
}
section {
width: 202px;
height: 140px;
.highlight {
border: 1px dotted #000;
padding: 3px;
img {
margin-right: 2px;
width: 12px;
height:12px;
}
}
}
header,
section {
span{
display:block;
color: #000;
float:left;
width: 40%;
padding: 5px 4px 4px 5px;
}
}
}
ul.tree-view {
float:left;
width: 220px;
height: 140px;
overflow: scroll;
display: block;
background: #fff;
padding: 5px;
margin: 0;
}
ul.tree-view li img {
width: 12px;
height: 12px;
margin-right: 5px;
}
ul.tree-view li {
list-style-type: none;
}
ul.tree-view a {
text-decoration: none;
color: #000;
}
ul.tree-view a:focus {
background-color: #000080;
color: #fff;
}
ul.tree-view ul,
ul.tree-view li {
margin-top: 3px;
}
ul.tree-view ul {
margin-left: 16px;
padding-left: 16px;
/* Goes down too far */
border-left: 1px dotted #808080;
}
ul.tree-view ul > li {
position: relative;
}
ul.tree-view ul > li::before {
content: "";
display: block;
position: absolute;
left: -16px;
top: 6px;
width: 12px;
border-bottom: 1px dotted #808080;
}
ul.tree-view ul > li:last-child::after {
content: "";
display: block;
position: absolute;
left: -20px;
top: 7px;
bottom: 0px;
width: 8px;
background: #fff;
}
ul.tree-view details {
margin-top: 0;
}
ul.tree-view details[open] summary {
margin-bottom: 0;
}
ul.tree-view ul details > summary:before {
margin-left: -22px;
position: relative;
z-index: 1;
}
ul.tree-view details > summary:before {
text-align: center;
display: block;
float: left;
content: "+";
border: 1px solid #808080;
width: 8px;
height: 9px;
line-height: 8px;
margin-right: 5px;
padding-left: 1px;
background-color: #fff;
}
ul.tree-view details[open] > summary:before {
content: "-";
}
ul.tree-view details > summary::marker,
ul.tree-view details > summary::-webkit-details-marker {
content: "";
}
}
#app-mycpu {
position: absolute;
left: 9%;
top: 10%;
width:908px;
height: 596px;
background:url("/x/win98/app-mycpu.png") no-repeat;
}
#app-xircon{
position: absolute;
left: 19%;
top: 17%;
width:908px;
height: 530px;
background:url("/x/win98/app-xircon.png") no-repeat;
}
#app-photoshop{
position: absolute;
right: 10%;
top: 13%;
width:800px;
transform:scale(1.35);
height: 572px;
background:url("/x/win98/app-photoshop.png") no-repeat;
.close {
display:block;
float: right;
height: 50px;
width: 50px;
}
input {
width: 1px;
height: 1px;
position: absolute;
top: 30%;
left: 30%;
}
}
#app-explorer {
position: absolute;
left: 19%;
top: 17%;
width: 908px;
height: 596px;
background:url("/x/win98/app-explorer-sm.png") no-repeat;
}
#app-solitaire {
position: absolute;
right: 241px;
top: 150px;
width: 598px;
height: 475px;
background:url("/x/win98/app-solitaire.png") no-repeat;
}
#app-sub7 {
position: absolute;
left: 300px;
transform: scale(1.5);
top: 222px;
width:462px;
height: 358px;
background:url("/x/win98/app-sub7.png") no-repeat;
}
#app-bo2k {
height: 344px;
top: 222px;
left: 24%;
width: 510px;
&::before {
width: 508px;
height: 342px;
}
aside,field-set {
float: left;
margin: 2px 10px 0 0;
}
fieldset {
display: block;
margin: 10px;
label {
display: block;
width: 100%;
clear: both;
font-size: 10pt;
margin: 8px 0 2px 0;
}
input[type="text"]{
width: 98%;
}
select {
width: 100%;
}
p {
margin: 8px 0 0 0;
padding: 0;
&.btns {
margin-top: 15px;
}
}
}
}
#app-help {
position: absolute;
right: 8%;
top: 10%;
width:781px;
height: 682px;
background:url("/x/win98/app-help-sm.png") no-repeat;
}
#app-adraw{
position: absolute;
left: 12%;
top: 16%;
width:984px;
height: 518px;
background:url("/x/win98/app-cmd.png") no-repeat;
text-align: center;
.close {
display:block;
float: right;
height: 50px;
width: 50px;
}
img {
margin-top: 106px;
}
}
#app-nero{
position: absolute;
left: 26%;
top: 8%;
width:635px;
height: 643px;
background:url("/x/win98/app-nero.png") no-repeat;
text-align: center;
.close {
display:block;
float: right;
height: 65px;
width: 45px;
}
section {
width: 99%;
height: 90%;
margin-top:65px;
}
}
#app-winamp{
position: absolute;
left: 12%;
top: 8%;
width:550px;
height: 692px;
background:url("/x/win98/app-winamp.png") no-repeat;
text-align: center;
header {
width: 100%;
margin:0;
padding:0;
height: 25px;
#winexit,
#winmin{
display:block;
float: right;
height: 25px;
width: 25px;
}
#winmin{
margin-right:14px;
}
}
section {
width: 99%;
height: 96%;
}
}
#app-dos {
position: absolute;
left: 12%;
top: 16%;
width:984px;
height: 518px;
background:url("/x/win98/app-cmd.png") no-repeat;
text-align: center;
header {
width: 100%;
margin:0;
padding:0;
height: 45px;
.close {
display:block;
float: right;
height: 45px;
width: 50px;
}
}
textarea {
display: block;
border: none;
margin: 62px 0 0 11px;
height: 394px!important;
width:97%;
padding: 2px;
font-family: monospace;
font-size: 14px;
resize: none;
background: #000;
color: #f1f1f1;
}
}
form {
background-color: rgb(192, 192, 192);
border-color: #c0c0c0 #000 #000 #c0c0c0;
border-style: solid;
border-width: 1px;
box-sizing: border-box;
color: #000;
cursor: default;
font-size: 12px;
font-style: normal;
height: 306px;
left: 660px;
margin: 0px;
padding: 3px;
position: absolute;
top: 310px;
transform: scale(2);
input[type="text"]{
display:none;
}
&::before {
border-color: #fff #808080 #808080 #fff;
border-style: solid;
border-width: 1px;
box-sizing: border-box;
content: "";
cursor: default;
display: block;
height: 305px;
left: 0px;
line-height: 12px;
margin: 0px;
padding: 0px;
pointer-events: none;
position: absolute;
top: 0px;
width: 510px;
}
h2 {
background: #000081;
background: linear-gradient(90deg, rgba(0, 0, 129, 1) 0%, rgba(16, 132, 208, 1) 64%);
box-sizing: border-box;
color: #fff;
cursor: default;
display: flex;
font-size: 12px;
height: 18px;
line-height: 14px;
margin-block-end: 0px;
margin-block-start: 0px;
margin-bottom: 0px;
margin-inline-end: 0px;
margin-inline-start: 0px;
margin: 0px;
padding: 2px;
position: relative;
width: 504px;
}
h2 img {
width: 13px;
height: 13px;
margin-right: 2px;
}
.sm.pad {
display: block;
height: 16px;
margin: 0px;
padding: 0px;
text-align: center;
width: 16px;
&::before {
content: "📄";
cursor: default;
display: inline;
font-size: 12px;
font-size-adjust: none;
font-stretch: 100%;
font-style: normal;
font-variant-emoji: normal;
font-weight: 700;
height: auto;
line-height: 15px;
margin: 0px;
padding:0px;
text-align: center;
}
}
.label {
color: #fff;
display: block;
flex-basis: 0%;
flex-grow: 1;
flex-shrink: 1;
font-size: 12px;
height: 14px;
line-height: 14px;
margin: 2px;
overflow-x: hidden;
overflow-y: hidden;
padding: 0px;
position: relative;
text-overflow: ellipsis;
text-wrap-mode: nowrap;
white-space-collapse: collapse;
width: 432px;
}
.btn {
background: #c0c0c0;
position: relative;
height: 12px;
width: 14px;
margin:0;
border-width: 1px;
border-style: solid;
border-color: #fff #000 #000 #fff;
&::after {
background-clip: border-box;
background-color: #c0c0c0;
background-origin: padding-box;
background-position-x: 50%;
background-position-y: 50%;
background-repeat: no-repeat;
background-size: cover;
border-bottom-color: rgb(128, 128, 128);
border-bottom-style: solid;
border-bottom-width: 1px;
border-left-color: rgb(224, 224, 224);
border-left-style: solid;
border-left-width: 1px;
border-right-color: rgb(128, 128, 128);
border-right-style: solid;
border-right-width: 1px;
border-top-color: rgb(224, 224, 224);
border-top-style: solid;
border-top-width: 1px;
box-sizing: border-box;
color: rgb(255, 255, 255);
content: "";
cursor: default;
display: block;
font-size: 12px;
height: 12px;
left: 0px;
line-height: 14px;
margin: 0px;
padding: 0px;
position: absolute;
top: 0px;
width: 14px;
}
}
.min::after {
background: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='16'%3E%3Cpath d='M5 10h6v2H5z'/%3E%3C/svg%3E") no-repeat center center;
}
.max::after {
background: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='16'%3E%3Cpath d='M4 4v8h9V4H4zm1 2h7v5H5V6z'/%3E%3C/svg%3E") no-repeat center center;
}
.close::after {
background: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 16' width='9' height='8'%3E%3Cpath d='M0 1l7 7-7 7h4l5-5 5 5h4l-7-7 7-7h-4L9 6 4 1z'/%3E%3C/svg%3E") no-repeat center center;
}
}
.menu {
display: flex;
padding: 1px 0;
position: relative;
a,
a:visited {
padding: 3px 5px;
color: inherit;
text-decoration: none;
cursor: default;
}
a:hover,
a:focus,
a:active{
background: #000081;
color: #f1f1f1;
}
}
.client {
border-width: 1px;
border-style: solid;
border-color: #808080 #fff #fff #808080;
position: relative;
cursor: default;
margin: 0;
padding: 0;
box-sizing: border-box;
&::before {
content: "";
position: absolute;
box-sizing: border-box;
}
&::after {
left: 0;
top: 0;
content: "";
position: absolute;
box-sizing: border-box;
width: 100%;
height: 100%;
border-width: 1px;
border-style: solid;
border-color: #000 #c0c0c0 #c0c0c0 #000;
pointer-events: none;
}
textarea {
display: block;
border: none;
margin: 1px;
height: 250px!important;
padding: 2px;
font-family: monospace;
font-size: 13px;
resize: none;
}
}
footer{
align-items: center;
background:#C0C0C0;
border-top: 1px solid #fff;
bottom:0;
display: flex;
gap: 5px;
height: 44px;
left:0;
max-height: 44px;
overflow-block: hidden;
overflow: hidden;
padding:6px 6px 5px 6px;
position:fixed;
width:100%;
z-index:999;
#start{
background: #c0c0c0;
border-color: #fff #000 #000 #fff;
border-style: solid;
border-width: 2px;
color:black;
letter-spacing:0;
padding:4px 10px 0 10px;
flex-shrink: 0;
&::before {
content: "";
position: absolute;
left: -2px;
top: -2px;
display: block;
width: 100%;
height: 100%;
border-width: 2px;
border-style: solid;
border-color: #e0e0e0 #808080 #808080 #e0e0e0;
pointer-events: none;
}
&.pressed {
border-color: #000 #fff #fff #000;
border-width: 2px;
padding-top: 6px;
&::before {
border-color: #000 #fff #fff #000;
}
}
sup {
font-size:1.4rem;
margin-left:5px;
}
}
.sep{
height:40px;
width:1px;
border-left:2px solid #FCFCFC;
border-right:2px solid #808080;
flex-shrink: 0;
}
#quick{
display:flex;
align-items: center;
padding:3px;
height:40px;
flex-shrink: 0;
img{
margin:0 2px;
}
}
#tasks {
display: flex;
flex: 1;
height: 45px;
height: 100%;
overflow: hidden;
gap: 3px;
}
.task {
align-items: center;
background: #c0c0c0;
border-color: #fff #000 #000 #fff;
border-style: solid;
border-width: 2px;
box-sizing: border-box;
color: black;
display: flex;
flex: 1;
font-weight: bold;
height: 100%;
line-height: 24px;
max-width: 300px;
min-width: 100px;
overflow: hidden;
padding: 5px;
text-decoration: none;
text-overflow: ellipsis;
white-space: nowrap;
&.selected{
border-color: #000 #fff #fff #000;
border-width: 2px;
padding-top: 6px;
&::before {
border-color: #000 #fff #fff #000;
}
}
sup {
margin-left: 4px;
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
display: inline-block;
margin-top: 4px;
font-size:1.2rem;
}
img {
height: 27px;
margin-right: 5px;
}
}
aside{
display:flex;
transform:scale(1.25);
border-top:1px solid #08080E;
border-left:1px solid #08080E;
border-right:1px solid #FCFCFC;
border-bottom:1px solid #FCFCFC;
padding:6px 5px;
margin: 0 35px 0 25px;
font-size:1.1rem;
flex-shrink: 0;
&::before {
content: "";
position: absolute;
left: -2px;
top: -2px;
display: block;
width: 100%;
height: 100%;
border-width: 2px;
border-style: solid;
pointer-events: none;
border-color: #000 #fff #fff #000;
}
img {
margin: 0 4px;
transform:scaleX(1.25);
}
}
}
#cdc {
display:none;
}
#startmenu{
visibility: hidden;
bottom:58px;
height:485px;
width: 250px;
left:2;
h2{
position:absolute;
font-size:24px;
left:2px;
bottom:4px;
font-weight:bold;
padding:20px 2px 140px 5px;
margin:0;
color:#c0c0c0;
transform:rotate(180deg);
-ms-writing-mode:tb-rl;
writing-mode:vertical-lr;
pointer-events:none;
z-index:2;
background:#030cdf;
background:linear-gradient(0deg,#000 0%,#030cdf 100%);
width:15%;
font-family:Tahoma;
font-weight:700;
em,strong{
font-family:Tahoma;
}
em {
font-weight:normal;
font-style:normal;
font-size:24px;
}
strong {
font-size:22px;
font-weight:bold;
}
}
.menu{
margin:2px 0px 0px 45px;
clear:both;
pointer-events: all;
width:200px;
height:48px;
display: block;
&:hover,
&:hover::after,
& *:hover {
background:#020571;
color:#e0e0e0;
}
img, sup, em{
float:left;
display:block;
height:48px;
}
sup{
height:40px;
padding-top:5px;
margin-left:5px;
margin-right:30px;
line-height:3em;
}
em{
font-style:normal;
height:40px;
font-size:2em;
margin-right:10px;
float:right;
padding-top:5px;
}
}
.more::after{
content: "";
border-style: solid;
border-width: 7px 0 7px 7px;
border-color: transparent currentColor transparent;
width: 0;
height: 0;
position: absolute;
right: 7px;
color: #000;
margin-top: 17px;
}
.divider{
display:block;
clear:both;
width:70%;
height:1px;
background:#08080E;
border-bottom:2px solid #FCFCFC;
margin:5px 2px 5px 55px;
}
}
#flyout {
visibility: hidden;
height:52px;
width: 100px;
left:248px;
text-align: center;
padding: 15px;
color: #808080;
text-shadow: 1px 1px #fff;
}
#startmenu,
#flyout {
pointer-events:auto;
background:#c0c0c0;
display:block;
position:absolute;
border-color:#e0e0e0 #808080 #808080 #e0e0e0;
border-style:solid;
border-width:3px;
box-sizing:border-box;
z-index:999;
}
#tooltip {
position: absolute;
display: none;
opacity:0;
background: #333;
color: #fff;
padding: 5px 10px;
font-size: 16px;
bottom: 60px;
pointer-events: none;
z-index: 1000;
transition:
opacity 0.7s ease-out,
display 0.7s ease-out allow-discrete;
}
}
#BSOD {
background-color: #00a;
color: #f1f1f1;
font-size:30px;
z-index: 10;
article {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -62%);
ul {
margin-left: 4%;
}
}
h2 {
text-align: center;
em {
background: #a8a8a8;
color: #0000a8;
font-size: 1.15em;
font-style: normal;
font-weight: bold;
padding: 0 1em;
}
}
#hex {
text-transform: capitalize;
}
footer {
text-align: center;
}
}
#minani {
background: #000081;
background: linear-gradient(90deg, rgba(0,0,129,1) 0%, rgba(16,132,208,1) 64%);
box-sizing: border-box;
color: #fff;
cursor: default;
display: flex;
font-size: 12px;
height: 18px;
line-height: 14px;
margin: 0;
padding: 2px;
position: fixed;
z-index: 2000;
transition: none;
pointer-events: none;
}
.overlay {
position:absolute;
z-index:1000;
pointer-events: none;
user-select: none;
&.vignette {
background-image: radial-gradient(ellipse at center, rgba(0,0,0,0) 50%, rgba(0,0,0,0.3) 100%);
}
&.scanlines {
background-image: linear-gradient(0deg, rgba(0,0,0,0) 25%, rgba(0,0,0,0.33) 25%, rgba(0,0,0,0.33) 50%, rgba(0,0,0,0) 50%, rgba(0,0,0,0) 75%, rgba(0,0,0,0.33) 75%, rgba(0,0,0,0.33) 100%);
background-size: 4px 4px;
}
&.off {
z-index:900;
color:#dfdfdf;
padding: 100px;
display:none;
pointer-events: auto;
h1 {
color: #d97c41;
font-family:Tahoma,Arial, Helvetica, sans-serif;
font-size: 90px;
position: absolute;
text-align: center;
width: 100%;
margin:0;
padding: 0;
top: 40%;
left: 42%;
transform: translate(-50%, -50%);
}
textarea {
display: none;
width: 100%;
height: 80%;
margin:0;
padding:0;
color: #0f0;
font-size: 42px;
background:transparent;
border:none;
}
}
}
dialog,
#msg {
z-index: 999;
opacity: 0;
&[open] {
opacity: 1;
padding: 2px;
border: 0;
min-width: 300px;
background: silver;
box-shadow: inset -1px -1px #0a0a0a, inset 1px 1px #dfdfdf, inset -2px -2px grey, inset 2px 2px #fff;
@starting-style {
opacity: 1;
background: silver;
}
}
&:not([open]) {
opacity: 0;
background: silver;
padding: 0;
}
aside,
section {
float:left;
}
input[type="text"],
input[type="password"],
select {
display: block;
background: #FCFCFC;
color: #000;
border-radius:0;
font-size: 8pt;
border-color:rgb(118, 118, 118);
border-style:inset;
border-width:2px;
}
input[type="radio"],
input[type="checkbox"] {
appearance: none;
-webkit-appearance: none;
-moz-appearance: none;
margin: 0;
background: 0;
position: fixed;
opacity: 0;
border: none;
}
input[type="radio"] + label,
input[type="checkbox"] + label {
line-height: 13px;
}
input[type="radio"] + label {
position: relative;
margin-left: 18px;
}
input[type="radio"] + label::before {
content: "";
position: absolute;
top: 0;
left: -18px;
display: inline-block;
width: 12px;
height:12px;
margin-right: 6px;
background: url("/x/win98/radio.svg");
}
input[type="radio"]:active + label::before {
background: url("/x/win98/radio-disabled.svg");
}
input[type="radio"]:checked + label::after {
content: "";
display: block;
width: 4px;
height: 4px;
top: 4px;
left: -14px;
position: absolute;
background:url("/x/win98/radio-checked.svg");
}
input[type="radio"]:focus + label,
input[type="checkbox"]:focus + label {
outline: 1px dotted #000000;
}
.field-row {
clear: both;
padding: 8px;
width: 90%;
justify-content: flex-end;
&.aleft {
justify-content: flex-start;
}
}
}
#logon {
.field-row {
clear: both;
padding: 0 0 1px 20px;
margin-bottom: 5px;
}
aside {
padding-top: 18px;
margin-right:8px;
}
label {
width: 100px;
display: block;
font-size: 16px;
font-weight: bold;
}
input[type=text],
input[type=password]{
width:200px;
font-size:16px;
}
img {
margin:0 20px 0 0;
}
#frmErr{
color: red;
text-align: left;
font-weight: bold;
font-size: 18px;
margin-bottom: 20px;
}
}
::backdrop {
background: none;
}
.title-bar {
align-items: center;
background: #000081;
background: linear-gradient(90deg, rgba(0, 0, 129, 1) 0%, rgba(16, 132, 208, 1) 64%);
display: flex;
justify-content: space-between;
padding: 3px 2px 3px 4px;
}
.title-bar.inactive {
background: linear-gradient(90deg, grey, #b5b5b5);
}
.title-bar-text {
color: #fff;
font-weight: 700;
letter-spacing: 0;
margin-right: 24px;
}
.title-bar-controls {
display: flex;
}
.title-bar-controls .close {
background-clip: border-box;
background-color: rgb(192, 192, 192);
background-image: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iOCIgaGVpZ2h0PSI3IiB2aWV3Qm94PSIwIDAgOCA3IiBmaWxsPSJub25lIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPgo8cGF0aCBmaWxsLXJ1bGU9ImV2ZW5vZGQiIGNsaXAtcnVsZT0iZXZlbm9kZCIgZD0iTTAgMEgxSDJWMUgzVjJINEg1VjFINlYwSDdIOFYxSDdWMkg2VjNINVY0SDZWNUg3VjZIOFY3SDdINlY2SDVWNUg0SDNWNkgyVjdIMUgwVjZIMVY1SDJWNEgzVjNIMlYySDFWMUgwVjBaIiBmaWxsPSJibGFjayIvPgo8L3N2Zz4K');
background-origin: padding-box;
background-position-x: 4px;
background-position-y: 3px;
background-repeat: no-repeat;
background-size: auto;
border-image-outset: 0;
border-image-repeat: stretch;
border-image-slice: 100%;
border-image-source: none;
border-image-width: 1;
border-color: transparent;
border-radius: 0;
border-style: none;
border-width: 0;
box-shadow: #0a0a0a -1px -1px 0 0 inset,#fff 1px 1px 0 0 inset;
box-sizing: border-box;
cursor: default;
display: block;
height: 14px;
margin: 0 0 0 2px;
min-height: 14px;
min-width: 16px;
padding: 0;
width: 16px
}
.window-body {
margin: 12px;
}
.field-row {
justify-content: flex-end;
align-items: center;
display: flex ;
}
.field-row>*+* {
margin-left: 6px;
}
button, input[type=reset], input[type=submit] {
background: silver;
border: none;
border-radius: 0;
box-shadow: inset -1px -1px #0a0a0a, inset 1px 1px #fff, inset -2px -2px grey, inset 2px 2px #dfdfdf;
box-sizing: border-box;
color: transparent;
min-height: 23px;
min-width: 75px;
padding: 0 12px;
text-shadow: 0 0 #222;
&:disabled {
color: #888 !important;
}
}
canvas,
#glitch {
display: block;
z-index: 800;
position:fixed;
top:0;
left:0;
width: 100%;
height:100%;
user-select:none;
pointer-events: none;
user-select: none;
image-rendering: pixelated;
}
.blink {
animation: blink 1s steps(1) infinite;
}
@keyframes blink { 66% { opacity: 0; } }
@keyframes smear {
0% { margin-left: 0; }
100% { margin-left: -100%; }
}
.progress{
border: none;
border-radius: 0;
box-shadow: inset -2px -2px #dfdfdf, inset 2px 2px grey;
box-sizing: border-box;
height: 32px;
padding: 4px;
position: relative;
}
#dialupbar{
background-color: transparent;
background-image: linear-gradient(90deg, #000080 16px, transparent 0 2px);
background-repeat: repeat;
background-size: 18px 100%;
width: 100%;
display: block;
height: 100%;
}
.group {
background-image: url("data:image/svg xml;charset=utf-8,<svg width='5' height='5' fill='#808080' xmlns='http://www.w3.org/2000/svg'><path fill-rule='evenodd' clip-rule='evenodd' d='M0 0h5v5H0V2h2v1h1V2H0' fill='#fff'/><path fill-rule='evenodd' clip-rule='evenodd' d='M0 0h4v4H0V1h1v2h2V1H0'/></svg>");
background-size: cover;
margin: 0;
padding: 10px;
padding-block-start: 8px;
}
@media (min-width: 1201px) {
#app-help {
width:1042px;
height: 900px;
background:url("/x/win98/app-help.png") no-repeat;
}
#app-explorer {
width:1340px;
height: 786px;
background:url("/x/win98/app-explorer.png") no-repeat;
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment