/*A vast majority of this styling comes from 98.css code, if you're making a full windows 98 theme, I suggest you use the stylesheet this is sourced from - https://jdan.github.io/98.css/ */ .title-bar-controls button { border:none; border-radius:0; box-sizing:border-box; color:transparent; min-height:23px; min-width:75px; padding:0 12px; text-shadow:0 0 #222; } .title-bar-controls button { background:silver; box-shadow:inset -1px -1px #0a0a0a, inset 1px 1px #fff, inset -2px -2px grey, inset 2px 2px #dfdfdf; } .title-bar-controls button:not(:disabled):active { box-shadow:inset -1px -1px #fff, inset 1px 1px #0a0a0a, inset -2px -2px #dfdfdf, inset 2px 2px grey; text-shadow:1px 1px #222; } @media (not(hover)){ button:not(:disabled):hover { box-shadow:inset -1px -1px #fff,inset 1px 1px #0a0a0a,inset -2px -2px #dfdfdf,inset 2px 2px grey} } .title-bar-controls button:focus { outline:1px dotted #000; outline-offset:-4px; } .title-bar-controls button::-moz-focus-inner { border:0 } @font-face { font-family: "Pixelated MS Sans Serif"; src: url("https://files.catbox.moe/1za99g.woff") format("woff"); src: url("https://files.catbox.moe/8fwbkl.woff2") format("woff2"); font-weight: normal; font-style: normal; } .window, .title-bar { font-family: "Pixelated MS Sans Serif", Arial; -webkit-font-smoothing: none; font-size: 11px; } .window { box-shadow: inset -1px -1px #0a0a0a, inset 1px 1px #dfdfdf, inset -2px -2px #808080, inset 2px 2px #ffffff; background: #c0c0c0; color:#000; padding: 3px; width:100%; } .title-bar { background:linear-gradient(90deg, purple, orchid, pink); padding: 3px 2px 3px 3px; display: flex; justify-content: space-between; align-items: center; } .title-bar-text { font-weight: bold; color: white; letter-spacing: 0; margin-right: 24px; } .title-bar-controls { display: flex; } .title-bar-controls button { padding: 0; display: block; min-width: 16px; min-height: 14px; } .title-bar-controls button:active { padding: 0; } .title-bar-controls button:focus { outline: none; } .title-bar-controls button[aria-label=Minimize]{ background-image:url("https://raw.githubusercontent.com/jdan/98.css/main/icon/minimize.svg"); background-position:bottom 3px left 4px; background-repeat:no-repeat } .title-bar-controls button[aria-label=Maximize]{ background-image:url("https://raw.githubusercontent.com/jdan/98.css/4a2282dd9170cabf730fb5803d1153d86b2e94e3/icon/maximize.svg"); background-position:top 2px left 3px; background-repeat:no-repeat; } .title-bar-controls button[aria-label=Close]{ background-image:url("https://raw.githubusercontent.com/jdan/98.css/main/icon/close.svg"); background-position:top 3px left 4px; background-repeat:no-repeat; margin-left:2px; } .window-body { margin: 8px; } /* literally only part ive custom coded so it scrolls . i also like the effect the fieldset adds */ .fieldset { border:1px gray solid; box-shadow: white 1px 1px 0px inset, white 1px 1px 0px, white 0px 1px 0px, white 1px 0px 0px; margin:0; padding:10px; overflow-y:auto; height: 190px; }