div+css布局模拟win95操作界面ui交互效果代码-html代码-BFW代码库

代码语言：html
代码描述：div+css布局模拟win95操作界面ui交互效果代码，可打开开始菜单、可拖动窗口，打开关闭，可打开内置的应用。
代码标签： div css 布局模拟 win95 操作界面 ui 交互 windows
下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  


  
  
<style>
@charset "UTF-8";
@font-face {
  font-family: "MS Sans Serif";
  src: url("//repo.bfw.wiki/bfwrepo/images/win95/ms-sans-serif.woff2") format("woff2");
  font-weight: normal;
  font-display: swap;
}
@font-face {
  font-family: "MS Sans Serif";
  src: url("//repo.bfw.wiki/bfwrepo/images/win95/ms-sans-serif-bold.woff2") format("woff2");
  font-weight: bold;
  font-display: swap;
}
*, *:before, *:after {
  cursor: default;
  box-sizing: border-box;
  -ms-interpolation-mode: nearest-neighbor;
      image-rendering: -moz-crisp-edges;
      image-rendering: pixelated;
  font-family: "MS Sans Serif", Tahoma, Helvetica, Arial, sans-serif;
  font-size: 16px;
  text-decoration-thickness: 1.5px;
  text-underline-offset: 1px;
}

*:not(textarea, input) {
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

*:focus {
  outline: none;
}

::-moz-selection {
  background: none;
}

::selection {
  background: none;
}

body, html {
  height: 100%;
}

body {
  margin: 0;
  background-color: #fbe6e2;
  color: #263238;
  line-height: 1;
  overflow: hidden;
}

textarea {
  display: block;
  border: 0;
  padding: 3px;
  width: 100%;
  height: 100%;
  resize: none;
  overflow: scroll;
  font-size: 18px;
  font-weight: bold;
  line-height: 1.4;
}
textarea::-moz-selection {
  background-color: #577783;
  -webkit-tap-highlight-color: #577783;
  color: white;
}
textarea::selection {
  background-color: #577783;
  -webkit-tap-highlight-color: #577783;
  color: white;
}

.textarea-container {
  box-shadow: inset -1.5px -1.5px 0 0 #fcfcfc, inset 1.5px 1.5px 0 0 #a099a1, inset -3px -3px 0 0 #cac6cb, inset 3px 3px 0 0 #263238;
  padding: 3px;
}

[hidden] {
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  visibility: hidden;
  position: absolute;
  top: 0;
  left: 0;
  width: 0;
  height: 0;
}

menu, ul:not(.information ul), ol {
  margin: 0;
  padding: 0;
  list-style: none;
}

.underline > li > a:not(.no-line):first-letter, .underline > li > a:not(.no-line) > span:first-letter, .underline > li > a:not(.no-line) .line:first-letter, .underline > li > label:not(.no-line):first-letter, .underline > li > label:not(.no-line) > span:first-letter, .underline > li > label:not(.no-line) .line:first-letter {
  text-decoration: underline;
}
.underline > li > a:not(.no-line) > span span:not(.line):first-letter, .underline > li > label:not(.no-line) > span span:not(.line):first-letter {
  text-decoration: none;
}
.underline > li > a:not(.no-line) .line, .underline > li > label:not(.no-line) .line {
  display: inline-block;
}

label:before, label:after, a:before, a:after {
  content: "";
  background-position: center center;
  background-size: contain;
}

label[tabindex] span {
  padding: 1px 2px;
}
label[tabindex] span span {
  padding: 0;
}

[class*=label]:not(.folders label):not(.label-nested):after {
  background-color: transparent;
  background-image: linear-gradient(45deg, #B2738E 25%, transparent 25%, transparent 75%, #B2738E 75%, #B2738E), linear-gradient(45deg, #B2738E 25%, transparent 25%, transparent 75%, #B2738E 75%, #B2738E);
  background-size: 3px 3px;
  background-position: 0 0, 1.5px 1.5px;
  display: block;
  opacity: 0;
  position: absolute;
  top: 0;
  -webkit-mask-position: center;
          mask-position: center;
  -webkit-mask-size: cover;
          mask-size: cover;
}
[class*=label]:not(.folders label):not(.label-nested)[tabindex]:active:after, [class*=label]:not(.folders label):not(.label-nested)[tabindex]:focus:after {
  opacity: 1;
}

.label-nested:after {
  position: absolute;
  right: 6px;
  width: 16px;
  height: 16px;
  background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAMCAYAAABWdVznAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAWElEQVQokWP8//8/AymAiSTVDAwMLOgCasYW/xkYGBhh/FtnTxBlA053Ymjg/vcTryYMDV+Z2PHahNPTUJsY0cVxavjKxI6hGJ8GrIoZGBgYGGkecSRrAABJOBMT7b9GFQAAAABJRU5ErkJggg==");
  background-size: 16px 16px;
}
.label-nested:hover:after {
  filter: invert(1) brightness(200%);
}

li:hover > .label-nested:after {
  filter: invert(1) brightness(200%);
}

.label-folder-programs:before {
  background-image: url("//repo.bfw.wiki/bfwrepo/images/win95/folder-programs.png");
  background-repeat: no-repeat;
}
.label-folder-programs:not(.folders label):not(.label-nested):after {
  -webkit-mask-image: url("//repo.bfw.wiki/bfwrepo/images/win95/folder-programs.png");
          mask-image: url("//repo.bfw.wiki/bfwrepo/images/win95/folder-programs.png");
}

.label-folder-programs-small:before {
  background-image: url("//repo.bfw.wiki/bfwrepo/images/win95/folder-programs-small.png");
  background-repeat: no-repeat;
}
.label-folder-programs-small:not(.folders label):not(.label-nested):after {
  -webkit-mask-image: url("//repo.bfw.wiki/bfwrepo/images/win95/folder-programs-small.png");
          mask-image: url("//repo.bfw.wiki/bfwrepo/images/win95/folder-programs-small.png");
}

.label-folder-documents:before {
  background-image: url("//repo.bfw.wiki/bfwrepo/images/win95/folder-documents.png");
  background-repeat: no-repeat;
}
.label-folder-documents:not(.folders label):not(.label-nested):after {
  -webkit-mask-image: url("//repo.bfw.wiki/bfwrepo/images/win95/folder-documents.png");
          mask-image: url("//repo.bfw.wiki/bfwrepo/images/win95/folder-documents.png");
}

.label-folder-documents-small:before {
  background-image: url("//repo.bfw.wiki/bfwrepo/images/win95/folder-documents-small.png");
  background-repeat: no-repeat;
}
.label-folder-documents-small:not(.folders label):not(.label-nested):after {
  -webkit-mask-image: url("//repo.bfw.wiki/bfwrepo/images/win95/folder-documents-small.png");
          mask-image: url("//repo.bfw.wiki/bfwrepo/images/win95/folder-documents-small.png");
}

.label-settings:before {
  background-image: url("//repo.bfw.wiki/bfwrepo/images/win95/settings.png");
  background-repeat: no-repeat;
}
.label-settings:not(.folders label):not(.label-nested):after {
  -webkit-mask-image: url("//repo.bfw.wiki/bfwrepo/images/win95/settings.png");
          mask-image: url("//repo.bfw.wiki/bfwrepo/images/win95/settings.png");
}

.label-settings-small:before {
  background-image: url("//repo.bfw.wiki/bfwrepo/images/win95/settings-small.png");
  background-repeat: no-repeat;
}
.label-settings-small:not(.folders label):not(.label-nested):after {
  -webkit-mask-image: url("//repo.bfw.wiki/bfwrepo/images/win95/settings-small.png");
          mask-image: url("//repo.bfw.wiki/bfwrepo/images/win95/settings-small.png");
}

.label-find:before {
  background-image: url("//repo.bfw.wiki/bfwrepo/images/win95/find.png");
  background-repeat: no-repeat;
}
.label-find:not(.folders label):not(.label-nested):after {
  -webkit-mask-image: url("//repo.bfw.wiki/bfwrepo/images/win95/find.png");
          mask-image: url("//repo.bfw.wiki/bfwrepo/images/win95/find.png");
}

.label-find-small:before {
  background-image: url("//repo.bfw.wiki/bfwrepo/images/win95/find-small.png");
  background-repeat: no-repeat;
}
.label-find-small:not(.folders label):not(.label-nested):after {
  -webkit-mask-image: url("//repo.bfw.wiki/bfwrepo/images/win95/find-small.png");
          mask-image: url("//repo.bfw.wiki/bfwrepo/images/win95/find-small.png");
}

.label-help:before {
  background-image: url("//repo.bfw.wiki/bfwrepo/images/win95/help.png");
  background-repeat: no-repeat;
}
.label-help:not(.folders label):not(.label-nested):after {
  -webkit-mask-image: url("//repo.bfw.wiki/bfwrepo/images/win95/help.png");
          mask-image: url("//repo.bfw.wiki/bfwrepo/images/win95/help.png");
}

.label-help-small:before {
  background-image: url("//repo.bfw.wiki/bfwrepo/images/win95/help-small.png");
  background-repeat: no-repeat;
}
.label-help-small:not(.folders label):not(.label-nested):after {
  -webkit-mask-image: url("//repo.bfw.wiki/bfwrepo/images/win95/help-small.png");
          mask-image: url("//repo.bfw.wiki/bfwrepo/images/win95/help-small.png");
}

.label-run:before {
  background-image: url("//repo.bfw.wiki/bfwrepo/images/win95/run.png");
  background-repeat: no-repeat;
}
.label-run:not(.folders label):not(.label-nested):after {
  -webkit-mask-image: url("//repo.bfw.wiki/bfwrepo/images/win95/run.png");
          mask-image: url("//repo.bfw.wiki/bfwrepo/images/win95/run.png");
}

.label-run-small:before {
  background-image: url("//repo.bfw.wiki/bfwrepo/images/win95/run-small.png");
  background-repeat: no-repeat;
}
.label-run-small:not(.folders label):not(.label-nested):after {
  -webkit-mask-image: url("//repo.bfw.wiki/bfwrepo/images/win95/run-small.png");
          mask-image: url("//repo.bfw.wiki/bfwrepo/images/win95/run-small.png");
}

.label-shut-down:before {
  background-image: url("//repo.bfw.wiki/bfwrepo/images/win95/shut-down.png");
  background-repeat: no-repeat;
}
.label-shut-down:not(.folders label):not(.label-nested):after {
  -webkit-mask-image: url("//repo.bfw.wiki/bfwrepo/images/win95/shut-down.png");
          mask-image: url("//repo.bfw.wiki/bfwrepo/images/win95/shut-down.png");
}

.label-shut-down-small:before {
  background-image: url("//repo.bfw.wiki/bfwrepo/images/win95/shut-down-small.png");
  background-repeat: no-repeat;
}
.label-shut-down-small:not(.folders label):not(.label-nested):after {
  -webkit-mask-image: url("//repo.bfw.wiki/bfwrepo/images/win95/shut-down-small.png");
          mask-image: url("//repo.bfw.wiki/bfwrepo/images/win95/shut-down-small.png");
}

.label-notepad:before {
  background-image: url("//repo.bfw.wiki/bfwrepo/images/win95/notepad.png");
  background-repeat: no-repeat;
}
.label-notepad:not(.folders label):not(.label-nested):after {
  -webkit-mask-image: url("//repo.bfw.wiki/bfwrepo/images/win95/notepad.png");
          mask-image: url("//repo.bfw.wiki/bfwrepo/images/win95/notepad.png");
}

.label-notepad-small:before {
  background-image: url("//repo.bfw.wiki/bfwrepo/images/win95/notepad-small.png");
  background-repeat: no-repeat;
}
.label-notepad-small:not(.folders label):not(.label-nested):after {
  -webkit-mask-image: url("//repo.bfw.wiki/bfwrepo/images/win95/notepad-small.png");
          mask-image: url("//repo.bfw.wiki/bfwrepo/images/win95/notepad-small.png");
}

.label-folder-explorer:before {
  background-image: url("//repo.bfw.wiki/bfwrepo/images/win95/folder-explorer.png");
  background-repeat: no-repeat;
}
.label-folder-explorer:not(.folders label):not(.label-nested):after {
  -webkit-mask-image: url("//repo.bfw.wiki/bfwrepo/images/win95/folder-explorer.png");
          mask-image: url("//repo.bfw.wiki/bfwrepo/images/win95/folder-explorer.png");
}

.label-folder-explorer-small:before {
  background-image: url("//repo.bfw.wiki/bfwrepo/images/win95/folder-explorer-small.png");
  background-repeat: no-repeat;
}
.label-folder-explorer-small:not(.folders label):not(.label-nested):after {
  -webkit-mask-image: url("//repo.bfw.wiki/bfwrepo/images/win95/folder-explorer-small.png");
          mask-image: url("//repo.bfw.wiki/bfwrepo/images/win95/folder-explorer-small.png");
}

.label-document-text:before {
  background-image: url("//repo.bfw.wiki/bfwrepo/images/win95/document-text.png");
  background-repeat: no-repeat;
}
.label-document-text:not(.folders label):not(.label-nested):after {
  -webkit-mask-image: url("//repo.bfw.wiki/bfwrepo/images/win95/document-text.png");
          mask-image: url("//repo.bfw.wiki/bfwrepo/images/win95/document-text.png");
}

.label-document-text-small:before {
  background-image: url("//repo.bfw.wiki/bfwrepo/images/win95/document-text-small.png");
  background-repeat: no-repeat;
}
.label-document-text-small:not(.folders label):not(.label-nested):after {
  -webkit-mask-image: url("//repo.bfw.wiki/bfwrepo/images/win95/document-text-small.png");
          mask-image: url("//repo.bfw.wiki/bfwrepo/images/win95/document-text-small.png");
}

.label-control-panel:before {
  background-image: url("//repo.bfw.wiki/bfwrepo/images/win95/control-panel.png");
  background-repeat: no-repeat;
}
.label-control-panel:not(.folders label):not(.label-nested):after {
  -webkit-mask-image: url("//repo.bfw.wiki/bfwrepo/images/win95/control-panel.png");
          mask-image: url("//repo.bfw.wiki/bfwrepo/images/win95/control-panel.png");
}

.label-control-panel-small:before {
  background-image: url("//repo.bfw.wiki/bfwrepo/images/win95/control-panel-small.png");
  background-repeat: no-repeat;
}
.label-control-panel-small:not(.folders label):not(.label-nested):after {
  -webkit-mask-image: url("//repo.bfw.wiki/bfwrepo/images/win95/control-panel-small.png");
          mask-image: url("//repo.bfw.wiki/bfwrepo/images/win95/control-panel-small.png");
}

.label-folder-printers:before {
  background-image: url("//repo.bfw.wiki/bfwrepo/images/win95/folder-printers.png");
  background-repeat: no-repeat;
}
.label-folder-printers:not(.folders label):not(.label-nested):after {
  -webkit-mask-image: url("//repo.bfw.wiki/bfwrepo/images/win95/folder-printers.png");
          mask-image: url("//repo.bfw.wiki/bfwrepo/images/win95/folder-printers.png");
}

.label-folder-printers-small:before {
  background-image: url("//repo.bfw.wiki/bfwrepo/images/win95/folder-printers-small.png");
  background-repeat: no-repeat;
}
.label-folder-printers-small:not(.folders label):not(.label-nested):after {
  -webkit-mask-image: url("//repo.bfw.wiki/bfwrepo/images/win95/folder-printers-small.png");
          mask-image: url("//repo.bfw.wiki/bfwrepo/images/win95/folder-printers-small.png");
}

.label-desktop:before {
  background-image: url("//repo.bfw.wiki/bfwrepo/images/win95/desktop.png");
  background-repeat: no-repeat;
}
.label-desktop:not(.folders label):not(.label-nested):after {
  -webkit-mask-image: url("//repo.bfw.wiki/bfwrepo/images/win95/desktop.png");
          mask-image: url("//repo.bfw.wiki/bfwrepo/images/win95/desktop.png");
}

.label-desktop-small:before {
  background-image: url("//repo.bfw.wiki/bfwrepo/images/win95/desktop-small.png");
  background-repeat: no-repeat;
}
.label-desktop-small:not(.folders label):not(.label-nested):after {
  -webkit-mask-image: url("//repo.bfw.wiki/bfwrepo/images/win95/desktop-small.png");
          mask-image: url("//repo.bfw.wiki/bfwrepo/images/win95/desktop-small.png");
}

.label-computer:before {
  background-image: url("//repo.bfw.wiki/bfwrepo/images/win95/computer.png");
  background-repeat: no-repeat;
}
.label-computer:not(.folders label):not(.label-nested):after {
  -webkit-mask-image: url("//repo.bfw.wiki/bfwrepo/images/win95/computer.png");
          mask-image: url("//repo.bfw.wiki/bfwrepo/images/win95/computer.png");
}

.label-computer-small:before {
  background-image: url("//repo.bfw.wiki/bfwrepo/images/win95/computer-small.png");
  background-repeat: no-repeat;
}
.label-computer-small:not(.folders label):not(.label-nested):after {
  -webkit-mask-image: url("//repo.bfw.wiki/bfwrepo/images/win95/computer-small.png");
          mask-image: url("//repo.bfw.wiki/bfwrepo/images/win95/computer-small.png");
}

.label-disk:before {
  background-image: url("//repo.bfw.wiki/bfwrepo/images/win95/disk.png");
  background-repeat: no-repeat;
}
.label-disk:not(.folders label):not(.label-nested):after {
  -webkit-mask-image: url("//repo.bfw.wiki/bfwrepo/images/win95/disk.png");
          mask-image: url("//repo.bfw.wiki/bfwrepo/images/win95/disk.png");
}

.label-disk-small:before {
  background-image: url("//repo.bfw.wiki/bfwrepo/images/win95/disk-small.png");
  background-repeat: no-repeat;
}
.label-disk-small:not(.folders label):not(.label-nested):after {
  -webkit-mask-image: url("//repo.bfw.wiki/bfwrepo/images/win95/disk-small.png");
          mask-image: url("//repo.bfw.wiki/bfwrepo/images/win95/disk-small.png");
}

.label-diskette:before {
  background-image: url("//repo.bfw.wiki/bfwrepo/images/win95/diskette.png");
  background-repeat: no-repeat;
}
.label-diskette:not(.folders label):not(.label-nested):after {
  -webkit-mask-image: url("//repo.bfw.wiki/bfwrepo/images/win95/diskette.png");
          mask-image: url("//repo.bfw.wiki/bfwrepo/images/win95/diskette.png");
}

.label-diskette-small:before {
  background-image: url("//repo.bfw.wiki/bfwrepo/images/win95/diskette-small.png");
  background-repeat: no-repeat;
}
.label-diskette-small:not(.folders label):not(.label-nested):after {
  -webkit-mask-image: url("//repo.bfw.wiki/bfwrepo/images/win95/diskette-small.png");
          mask-image: url("//repo.bfw.wiki/bfwrepo/images/win95/diskette-small.png");
}

.label-folder:before {
  background-image: url("//repo.bfw.wiki/bfwrepo/images/win95/folder.png");
  background-repeat: no-repeat;
}
.label-folder:not(.folders label):not(.label-nested):after {
  -webkit-mask-image: url("//repo.bfw.wiki/bfwrepo/images/win95/folder.png");
          mask-image: url("//repo.bfw.wiki/bfwrepo/images/win95/folder.png");
}

.label-folder-small:before {
  background-image: url("//repo.bfw.wiki/bfwrepo/images/win95/folder-small.png");
  background-repeat: no-repeat;
}
.label-folder-small:not(.folders label):not(.label-nested):after {
  -webkit-mask-image: url("//repo.bfw.wiki/bfwrepo/images/win95/folder-small.png");
          mask-image: url("//repo.bfw.wiki/bfwrepo/images/win95/folder-small.png");
}

.label-recycle-bin:before {
  background-image: url("//repo.bfw.wiki/bfwrepo/images/win95/recycle-bin.png");
  background-repeat: no-repeat;
}
.label-recycle-bin:not(.folders label):not(.label-nested):after {
  -webkit-mask-image: url("//repo.bfw.wiki/bfwrepo/images/win95/recycle-bin.png");
          mask-image: url("//repo.bfw.wiki/bfwrepo/images/win95/recycle-bin.png");
}

.label-recycle-bin-small:before {
  background-image: url("//repo.bfw.wiki/bfwrepo/images/win95/recycle-bin-small.png");
  background-repeat: no-repeat;
}
.label-recycle-bin-small:not(.folders label):not(.label-nested):after {
  -webkit-mask-image: url("//repo.bfw.wiki/bfwrepo/images/win95/recycle-bin-small.png");
          mask-image: url("//repo.bfw.wiki/bfwrepo/images/win95/recycle-bin-small.png");
}

.label-inbox:before {
  background-image: url("//repo.bfw.wiki/bfwrepo/images/win95/inbox.png");
  background-repeat: no-repeat;
}
.label-inbox:not(.folders label):not(.label-nested):after {
  -webkit-mask-image: url("//repo.bfw.wiki/bfwrepo/images/win95/inbox.png");
          mask-image: url("//repo.bfw.wiki/bfwrepo/images/win95/inbox.png");
}

.label-inbox-small:before {
  background-image: url("//repo.bfw.wiki/bfwrepo/images/win95/inbox-small.png");
  background-repeat: no-repeat;
}
.label-inbox-small:not(.folders label):not(.label-nested):after {
  -webkit-mask-image: url("//repo.bfw.wiki/bfwrepo/images/win95/inbox-small.png");
          mask-image: url("//repo.bfw.wiki/bfwrepo/images/win95/inbox-small.png");
}

.label-program:before {
  background-image: url("//repo.bfw.wiki/bfwrepo/images/win95/program.png");
  background-repeat: no-repeat;
}
.label-program:not(.folders label):not(.label-nested):after {
  -webkit-mask-image: url("//repo.bfw.wiki/bfwrepo/images/win95/program.png");
          mask-image: url("//repo.bfw.wiki/bfwrepo/images/win95/program.png");
}

.label-program-small:before {
  background-image: url("//repo.bfw.wiki/bfwrepo/images/win95/program-small.png");
  background-repeat: no-repeat;
}
.label-program-small:not(.folders label):not(.label-nested):after {
  -webkit-mask-image: url("//repo.bfw.wiki/bfwrepo/images/win95/program-small.png");
          mask-image: url("//repo.bfw.wiki/bfwrepo/images/win95/program-small.png");
}

.label-program-config:before {
  background-image: url("//repo.bfw.wiki/bfwrepo/images/win95/program-config.png");
  background-repeat: no-repeat;
}
.label-program-config:not(.folders label):not(.label-nested):after {
  -webkit-mask-image: url("//repo.bfw.wiki/bfwrepo/images/win95/program-config.png");
          mask-image: url("//repo.bfw.wiki/bfwrepo/images/win95/program-config.png");
}

.label-program-config-small:before {
  background-image: url("//repo.bfw.wiki/bfwrepo/images/win95/program-config-small.png");
  background-repeat: no-repeat;
}
.label-program-config-small:not(.folders label):not(.label-nested):after {
  -webkit-mask-image: url("//repo.bfw.wiki/bfwrepo/images/win95/program-config-small.png");
          mask-image: url("//repo.bfw.wiki/bfwrepo/images/win95/program-config-small.png");
}

.label-document-windows:before {
  background-image: url("//repo.bfw.wiki/bfwrepo/images/win95/document-windows.png");
  background-repeat: no-repeat;
}
.label-document-windows:not(.folders label):not(.label-nested):after {
  -webkit-mask-image: url("//repo.bfw.wiki/bfwrepo/images/win95/document-windows.png");
          mask-image: url("//repo.bfw.wiki/bfwrepo/images/win95/document-windows.png");
}

.label-document-windows-small:before {
  background-image: url("//repo.bfw.wiki/bfwrepo/images/win95/document-windows-small.png");
  background-repeat: no-repeat;
}
.label-document-windows-small:not(.folders label):not(.label-nested):after {
  -webkit-mask-image: url("//repo.bfw.wiki/bfwrepo/images/win95/document-windows-small.png");
          mask-image: url("//repo.bfw.wiki/bfwrepo/images/win95/document-windows-small.png");
}

.label-hardware:before {
  background-image: url("//repo.bfw.wiki/bfwrepo/images/win95/hardware.png");
  background-repeat: no-repeat;
}
.label-hardware:not(.folders label):not(.label-nested):after {
  -webkit-mask-image: url("//repo.bfw.wiki/bfwrepo/images/win95/hardware.png");
          mask-image: url("//repo.bfw.wiki/bfwrepo/images/win95/hardware.png");
}

.label-hardware-small:before {
  background-image: url("//repo.bfw.wiki/bfwrepo/images/win95/hardware-small.png");
  background-repeat: no-repeat;
}
.label-hardware-small:not(.folders label):not(.label-nested):after {
  -webkit-mask-image: url("//repo.bfw.wiki/bfwrepo/images/win95/hardware-small.png");
          mask-image: url("//repo.bfw.wiki/bfwrepo/images/win95/hardware-small.png");
}

.label-add-programs:before {
  background-image: url("//repo.bfw.wiki/bfwrepo/images/win95/add-programs.png");
  background-repeat: no-repeat;
}
.label-add-programs:not(.folders label):not(.label-nested):after {
  -webkit-mask-image: url("//repo.bfw.wiki/bfwrepo/images/win95/add-programs.png");
          mask-image: url("//repo.bfw.wiki/bfwrepo/images/win95/add-programs.png");
}

.label-add-programs-small:before {
  background-image: url("//repo.bfw.wiki/bfwrepo/images/win95/add-programs-small.png");
  background-repeat: no-repeat;
}
.label-add-programs-small:not(.folders label):not(.label-nested):after {
  -webkit-mask-image: url("//repo.bfw.wiki/bfwrepo/images/win95/add-programs-small.png");
          mask-image: url("//repo.bfw.wiki/bfwrepo/images/win95/add-programs-small.png");
}

.label-date-time:before {
  background-image: url("//repo.bfw.wiki/bfwrepo/images/win95/date-time.png");
  background-repeat: no-repeat;
}
.label-date-time:not(.folders label):not(.label-nested):after {
  -webkit-mask-image: url("//repo.bfw.wiki/bfwrepo/images/win95/date-time.png");
          mask-image: url("//repo.bfw.wiki/bfwrepo/images/win95/date-time.png");
}

.label-date-time-small:before {
  background-image: url("//repo.bfw.wiki/bfwrepo/images/win95/date-time-small.png");
  background-repeat: no-repeat;
}
.label-date-time-small:not(.folders label):not(.label-nested):after {
  -webkit-mask-image: url("//repo.bfw.wiki/bfwrepo/images/win95/date-time-small.png");
          mask-image: url("//repo.bfw.wiki/bfwrepo/images/win95/date-time-small.png");
}

.label-document-misc:before {
  background-image: url("//repo.bfw.wiki/bfwrepo/images/win95/document-misc.png");
  background-repeat: no-repeat;
}
.label-document-misc:not(.folders label):not(.label-nested):after {
  -webkit-mask-image: url("//repo.bfw.wiki/bfwrepo/images/win95/document-misc.png");
          mask-image: url("//repo.bfw.wiki/bfwrepo/images/win95/document-misc.png");
}

.label-document-misc-small:before {
  background-image: url("//repo.bfw.wiki/bfwrepo/images/win95/document-misc-small.png");
  background-repeat: no-repeat;
}
.label-document-misc-small:not(.folders label):not(.label-nested):after {
  -webkit-mask-image: url("//repo.bfw.wiki/bfwrepo/images/win95/document-misc-small.png");
          mask-image: url("//repo.bfw.wiki/bfwrepo/images/win95/document-misc-small.png");
}

.label-document-config:before {
  background-image: url("//repo.bfw.wiki/bfwrepo/images/win95/document-config.png");
  background-repeat: no-repeat;
}
.label-document-config:not(.folders label):not(.label-nested):after {
  -webkit-mask-image: url("//repo.bfw.wiki/bfwrepo/images/win95/document-config.png");
          mask-image: url("//repo.bfw.wiki/bfwrepo/images/win95/document-config.png");
}

.label-document-config-small:before {
  background-image: url("//repo.bfw.wiki/bfwrepo/images/win95/document-config-small.png");
  background-repeat: no-repeat;
}
.label-document-config-small:not(.folders label):not(.label-nested):after {
  -webkit-mask-image: url("//repo.bfw.wiki/bfwrepo/images/win95/document-config-small.png");
          mask-image: url("//repo.bfw.wiki/bfwrepo/images/win95/document-config-small.png");
}

.label-document-font:before {
  background-image: url("//repo.bfw.wiki/bfwrepo/images/win95/document-font.png");
  background-repeat: no-repeat;
}
.label-document-font:not(.folders label):not(.label-nested):after {
  -webkit-mask-image: url("//repo.bfw.wiki/bfwrepo/images/win95/document-font.png");
          mask-image: url("//repo.bfw.wiki/bfwrepo/images/win95/document-font.png");
}

.label-document-font-small:before {
  background-image: url("//repo.bfw.wiki/bfwrepo/images/win95/document-font-small.png");
  background-repeat: no-repeat;
}
.label-document-font-small:not(.folders label):not(.label-nested):after {
  -webkit-mask-image: url("//repo.bfw.wiki/bfwrepo/images/win95/document-font-small.png");
          mask-image: url("//repo.bfw.wiki/bfwrepo/images/win95/document-font-small.png");
}

.label-grpconv:before {
  background-image: url("//repo.bfw.wiki/bfwrepo/images/win95/grpconv.png");
  background-repeat: no-repeat;
}
.label-grpconv:not(.folders label):not(.label-nested):after {
  -webkit-mask-image: url("//repo.bfw.wiki/bfwrepo/images/win95/grpconv.png");
          mask-image: url("//repo.bfw.wiki/bfwrepo/images/win95/grpconv.png");
}

.label-grpconv-small:before {
  background-image: url("//repo.bfw.wiki/bfwrepo/images/win95/grpconv-small.png");
  background-repeat: no-repeat;
}
.label-grpconv-small:not(.folders label):not(.label-nested):after {
  -webkit-mask-image: url("//repo.bfw.wiki/bfwrepo/images/win95/grpconv-small.png");
          mask-image: url("//repo.bfw.wiki/bfwrepo/images/win95/grpconv-small.png");
}

.label-folder-fonts-link:before {
  background-image: url("//repo.bfw.wiki/bfwrepo/images/win95/folder-fonts-link.png");
  background-repeat: no-repeat;
}
.label-folder-fonts-link:not(.folders label):not(.label-nested):after {
  -webkit-mask-image: url("//repo.bfw.wiki/bfwrepo/images/win95/folder-fonts-link.png");
          mask-image: url("//repo.bfw.wiki/bfwrepo/images/win95/folder-fonts-link.png");
}

.label-folder-fonts-link-small:before {
  background-image: url("//repo.bfw.wiki/bfwrepo/images/win95/folder-fonts-link-small.png");
  background-repeat: no-repeat;
}
.label-folder-fonts-link-small:not(.folders label):not(.label-nested):after {
  -webkit-mask-image: url("//repo.bfw.wiki/bfwrepo/images/win95/folder-fonts-link-small.png");
          mask-image: url("//repo.bfw.wiki/bfwrepo/images/win95/folder-fonts-link-small.png");
}

.label-computer-display:before {
  background-image: url("//repo.bfw.wiki/bfwrepo/images/win95/computer-display.png");
  background-repeat: no-repeat;
}
.label-computer-display:not(.folders label):not(.label-nested):after {
  -webkit-mask-image: url("//repo.bfw.wiki/bfwrepo/images/win95/computer-display.png");
          mask-image: url("//repo.bfw.wiki/bfwrepo/images/win95/computer-display.png");
}

.label-computer-display-small:before {
  background-image: url("//repo.bfw.wiki/bfwrepo/images/win95/computer-display-small.png");
  background-repeat: no-repeat;
}
.label-computer-display-small:not(.folders label):not(.label-nested):after {
  -webkit-mask-image: url("//repo.bfw.wiki/bfwrepo/images/win95/computer-display-small.png");
          mask-image: url("//repo.bfw.wiki/bfwrepo/images/win95/computer-display-small.png");
}

.label-modems:before {
  background-image: url("//repo.bfw.wiki/bfwrepo/images/win95/modems.png");
  background-repeat: no-repeat;
}
.label-modems:not(.folders label):not(.label-nested):after {
  -webkit-mask-image: url("//repo.bfw.wiki/bfwrepo/images/win95/modems.png");
          mask-image: url("//repo.bfw.wiki/bfwrepo/images/win95/modems.png");
}

.label-modems-small:before {
  background-image: url("//repo.bfw.wiki/bfwrepo/images/win95/modems-small.png");
  background-repeat: no-repeat;
}
.label-modems-small:not(.folders label):not(.label-nested):after {
  -webkit-mask-image: url("//repo.bfw.wiki/bfwrepo/images/win95/modems-small.png");
          mask-image: url("//repo.bfw.wiki/bfwrepo/images/win95/modems-small.png");
}

.label-keyboard:before {
  background-image: url("//repo.bfw.wiki/bfwrepo/images/win95/keyboard.png");
  background-repeat: no-repeat;
}
.label-keyboard:not(.folders label):not(.label-nested):after {
  -webkit-mask-image: url("//repo.bfw.wiki/bfwrepo/images/win95/keyboard.png");
          mask-image: url("//repo.bfw.wiki/bfwrepo/images/win95/keyboard.png");
}

.label-keyboard-small:before {
  background-image: url("//repo.bfw.wiki/bfwrepo/images/win95/keyboard-small.png");
  background-repeat: no-repeat;
}
.label-keyboard-small:not(.folders label):not(.label-nested):after {
  -webkit-mask-image: url("//repo.bfw.wiki/bfwrepo/images/win95/keyboard-small.png");
          mask-image: url("//repo.bfw.wiki/bfwrepo/images/win95/keyboard-small.png");
}

.label-internet:before {
  background-image: url("//repo.bfw.wiki/bfwrepo/images/win95/internet.png");
  background-repeat: no-repeat;
}
.label-internet:not(.folders label):not(.label-nested):after {
  -webkit-mask-image: url("//repo.bfw.wiki/bfwrepo/images/win95/internet.png");
          mask-image: url("//repo.bfw.wiki/bfwrepo/images/win95/internet.png");
}

.label-internet-small:before {
  background-image: url("//repo.bfw.wiki/bfwrepo/images/win95/internet-small.png");
  background-repeat: no-repeat;
}
.label-internet-small:not(.folders label):not(.label-nested):after {
  -webkit-mask-image: url("//repo.bfw.wiki/bfwrepo/images/win95/internet-small.png");
          mask-image: url("//repo.bfw.wiki/bfwrepo/images/win95/internet-small.png");
}

.label-joystick:before {
  background-image: url("//repo.bfw.wiki/bfwrepo/images/win95/joystick.png");
  background-repeat: no-repeat;
}
.label-joystick:not(.folders label):not(.label-nested):after {
  -webkit-mask-image: url("//repo.bfw.wiki/bfwrepo/images/win95/joystick.png");
          mask-image: url("//repo.bfw.wiki/bfwrepo/images/win95/joystick.png");
}

.label-joystick-small:before {
  background-image: url("//repo.bfw.wiki/bfwrepo/images/win95/joystick-small.png");
  background-repeat: no-repeat;
}
.label-joystick-small:not(.folders label):not(.label-nested):after {
  -webkit-mask-image: url("//repo.bfw.wiki/bfwrepo/images/win95/joystick-small.png");
          mask-image: url("//repo.bfw.wiki/bfwrepo/images/win95/joystick-small.png");
}

.label-mouse:before {
  background-image: url("//repo.bfw.wiki/bfwrepo/images/win95/mouse.png");
  background-repeat: no-repeat;
}
.label-mouse:not(.folders label):not(.label-nested):after {
  -webkit-mask-image: url("//repo.bfw.wiki/bfwrepo/images/win95/mouse.png");
          mask-image: url("//repo.bfw.wiki/bfwrepo/images/win95/mouse.png");
}

.label-mouse-small:before {
  background-image: url("//repo.bfw.wiki/bfwrepo/images/win95/mouse-small.png");
  background-repeat: no-repeat;
}
.label-mouse-small:not(.folders label):not(.label-nested):after {
  -webkit-mask-image: url("//repo.bfw.wiki/bfwrepo/images/win95/mouse-small.png");
          mask-image: url("//repo.bfw.wiki/bfwrepo/images/win95/mouse-small.png");
}

.label-multimedia:before {
  background-image: url("//repo.bfw.wiki/bfwrepo/images/win95/multimedia.png");
  background-repeat: no-repeat;
}
.label-multimedia:not(.folders label):not(.label-nested):after {
  -webkit-mask-image: url("//repo.bfw.wiki/bfwrepo/images/win95/multimedia.png");
          mask-image: url("//repo.bfw.wiki/bfwrepo/images/win95/multimedia.png");
}

.label-multimedia-small:before {
  background-image: url("//repo.bfw.wiki/bfwrepo/images/win95/multimedia-small.png");
  background-repeat: no-repeat;
}
.label-multimedia-small:not(.folders label):not(.label-nested):after {
  -webkit-mask-image: url("//repo.bfw.wiki/bfwrepo/images/win95/multimedia-small.png");
          mask-image: url("//repo.bfw.wiki/bfwrepo/images/win95/multimedia-small.png");
}

.label-network:before {
  background-image: url("//repo.bfw.wiki/bfwrepo/images/win95/network.png");
  background-repeat: no-repeat;
}
.label-network:not(.folders label):not(.label-nested):after {
  -webkit-mask-image: url("//repo.bfw.wiki/bfwrepo/images/win95/network.png");
          mask-image: url("//repo.bfw.wiki/bfwrepo/images/win95/network.png");
}

.label-network-small:before {
  background-image: url("//repo.bfw.wiki/bfwrepo/images/win95/network-small.png");
  background-repeat: no-repeat;
}
.label-network-small:not(.folders label):not(.label-nested):after {
  -webkit-mask-image: url("//repo.bfw.wiki/bfwrepo/images/win95/network-small.png");
          mask-image: url("//repo.bfw.wiki/bfwrepo/images/win95/network-small.png");
}

.label-passwords:before {
  background-image: url("//repo.bfw.wiki/bfwrepo/images/win95/passwords.png");
  background-repeat: no-repeat;
}
.label-passwords:not(.folders label):not(.label-nested):after {
  -webkit-mask-image: url("//repo.bfw.wiki/bfwrepo/images/win95/passwords.png");
          mask-image: url("//repo.bfw.wiki/bfwrepo/images/win95/passwords.png");
}

.label-passwords-small:before {
  background-image: url("//repo.bfw.wiki/bfwrepo/images/win95/passwords-small.png");
  background-repeat: no-repeat;
}
.label-passwords-small:not(.folders label):not(.label-nested):after {
  -webkit-mask-image: url("//repo.bfw.wiki/bfwrepo/images/win95/passwords-small.png");
          mask-image: url("//repo.bfw.wiki/bfwrepo/images/win95/passwords-small.png");
}

.label-battery:before {
  background-image: url("//repo.bfw.wiki/bfwrepo/images/win95/battery.png");
  background-repeat: no-repeat;
}
.label-battery:not(.folders label):not(.label-nested):after {
  -webkit-mask-image: url("//repo.bfw.wiki/bfwrepo/images/win95/battery.png");
          mask-image: url("//repo.bfw.wiki/bfwrepo/images/win95/battery.png");
}

.label-battery-small:before {
  background-image: url("//repo.bfw.wiki/bfwrepo/images/win95/battery-small.png");
  background-repeat: no-repeat;
}
.label-battery-small:not(.folders label):not(.label-nested):after {
  -webkit-mask-image: url("//repo.bfw.wiki/bfwrepo/images/win95/battery-small.png");
          mask-image: url("//repo.bfw.wiki/bfwrepo/images/win95/battery-small.png");
}

.label-regional:before {
  background-image: url("//repo.bfw.wiki/bfwrepo/images/win95/regional.png");
  background-repeat: no-repeat;
}
.label-regional:not(.folders label):not(.label-nested):after {
  -webkit-mask-image: url("//repo.bfw.wiki/bfwrepo/images/win95/regional.png");
          mask-image: url("//repo.bfw.wiki/bfwrepo/images/win95/regional.png");
}

.label-regional-small:before {
  background-image: url("//repo.bfw.wiki/bfwrepo/images/win95/regional-small.png");
  background-repeat: no-repeat;
}
.label-regional-small:not(.folders label):not(.label-nested):after {
  -webkit-mask-image: url("//repo.bfw.wiki/bfwrepo/images/win95/regional-small.png");
          mask-image: url("//repo.bfw.wiki/bfwrepo/images/win95/regional-small.png");
}

.label-folder-printers-link:before {
  background-image: url("//repo.bfw.wiki/bfwrepo/images/win95/folder-printers-link.png");
  background-repeat: no-repeat;
}
.label-folder-printers-link:not(.folders label):not(.label-nested):after {
  -webkit-mask-image: url("//repo.bfw.wiki/bfwrepo/images/win95/folder-printers-link.png");
          mask-image: url("//repo.bfw.wiki/bfwrepo/images/win95/folder-printers-link.png");
}

.label-folder-printers-link-small:before {
  background-image: url("//repo.bfw.wiki/bfwrepo/images/win95/folder-printers-link-small.png");
  background-repeat: no-repeat;
}
.label-folder-printers-link-small:not(.folders label):not(.label-nested):after {
  -webkit-mask-image: url("//repo.bfw.wiki/bfwrepo/images/win95/folder-printers-link-small.png");
          mask-image: url("//repo.bfw.wiki/bfwrepo/images/win95/folder-printers-link-small.png");
}

.label-computer-sounds:before {
  background-image: url("//repo.bfw.wiki/bfwrepo/images/win95/computer-sounds.png");
  background-repeat: no-repeat;
}
.label-computer-sounds:not(.folders label):not(.label-nested):after {
  -webkit-mask-image: url("//repo.bfw.wiki/bfwrepo/images/win95/computer-sounds.png");
          mask-image: url("//repo.bfw.wiki/bfwrepo/images/win95/computer-sounds.png");
}

.label-computer-sounds-small:before {
  background-image: url("//repo.bfw.wiki/bfwrepo/images/win95/computer-sounds-small.png");
  background-repeat: no-repeat;
}
.label-computer-sounds-small:not(.folders label):not(.label-nested):after {
  -webkit-mask-image: url("//repo.bfw.wiki/bfwrepo/images/win95/computer-sounds-small.png");
          mask-image: url("//repo.bfw.wiki/bfwrepo/images/win95/computer-sounds-small.png");
}

.label-computer-mouse:before {
  background-image: url("//repo.bfw.wiki/bfwrepo/images/win95/computer-mouse.png");
  background-repeat: no-repeat;
}
.label-computer-mouse:not(.folders label):not(.label-nested):after {
  -webkit-mask-image: url("//repo.bfw.wiki/bfwrepo/images/win95/computer-mouse.png");
          mask-image: url("//repo.bfw.wiki/bfwrepo/images/win95/computer-mouse.png");
}

.label-computer-mouse-small:before {
  background-image: url("//repo.bfw.wiki/bfwrepo/images/win95/computer-mouse-small.png");
  background-repeat: no-repeat;
}
.label-computer-mouse-small:not(.folders label):not(.label-nested):after {
  -webkit-mask-image: url("//repo.bfw.wiki/bfwrepo/images/win95/computer-mouse-small.png");
          mask-image: url("//repo.bfw.wiki/bfwrepo/images/win95/computer-mouse-small.png");
}

.label-document-printer:before {
  background-image: url("//repo.bfw.wiki/bfwrepo/images/win95/document-printer.png");
  background-repeat: no-repeat;
}
.label-document-printer:not(.folders label):not(.label-nested):after {
  -webkit-mask-image: url("//repo.bfw.wiki/bfwrepo/images/win95/document-printer.png");
          mask-image: url("//repo.bfw.wiki/bfwrepo/images/win95/document-printer.png");
}

.label-document-printer-small:before {
  background-image: url("//repo.bfw.wiki/bfwrepo/images/win95/document-printer-small.png");
  background-repeat: no-repeat;
}
.label-document-printer-small:not(.folders label):not(.label-nested):after {
  -webkit-mask-image: url("//repo.bfw.wiki/bfwrepo/images/win95/document-printer-small.png");
          mask-image: url("//repo.bfw.wiki/bfwrepo/images/win95/document-printer-small.png");
}

.label-printer:before {
  background-image: url("//repo.bfw.wiki/bfwrepo/images/win95/printer.png");
  background-repeat: no-repeat;
}
.label-printer:not(.folders label):not(.label-nested):after {
  -webkit-mask-image: url("//repo.bfw.wiki/bfwrepo/images/win95/printer.png");
          mask-image: url("//repo.bfw.wiki/bfwrepo/images/win95/printer.png");
}

.label-printer-small:before {
  background-image: url("//repo.bfw.wiki/bfwrepo/images/win95/printer-small.png");
  background-repeat: no-repeat;
}
.label-printer-small:not(.folders label):not(.label-nested):after {
  -webkit-mask-image: url("//repo.bfw.wiki/bfwrepo/images/win95/printer-small.png");
          mask-image: url("//repo.bfw.wiki/bfwrepo/images/win95/printer-small.png");
}

.label-volume:before {
  background-image: url("//repo.bfw.wiki/bfwrepo/images/win95/volume.png");
  background-repeat: no-repeat;
}
.label-volume:not(.folders label):not(.label-nested):after {
  -webkit-mask-image: url("//repo.bfw.wiki/bfwrepo/images/win95/volume.png");
          mask-image: url("//repo.bfw.wiki/bfwrepo/images/win95/volume.png");
}

.label-volume-small:before {
  background-image: url("//repo.bfw.wiki/bfwrepo/images/win95/volume-small.png");
  background-repeat: no-repeat;
}
.label-volume-small:not(.folders label):not(.label-nested):after {
  -webkit-mask-image: url("//repo.bfw.wiki/bfwrepo/images/win95/volume-small.png");
          mask-image: url("//repo.bfw.wiki/bfwrepo/images/win95/volume-small.png");
}

.label-wordpad:before {
  background-image: url("//repo.bfw.wiki/bfwrepo/images/win95/wordpad.png");
  background-repeat: no-repeat;
}
.label-wordpad:not(.folders label):not(.label-nested):after {
  -webkit-mask-image: url("//repo.bfw.wiki/bfwrepo/images/win95/wordpad.png");
          mask-image: url("//repo.bfw.wiki/bfwrepo/images/win95/wordpad.png");
}

.label-wordpad-small:before {
  background-image: url("//repo.bfw.wiki/bfwrepo/images/win95/wordpad-small.png");
  background-repeat: no-repeat;
}
.label-wordpad-small:not(.folders label):not(.label-nested):after {
  -webkit-mask-image: url("//repo.bfw.wiki/bfwrepo/images/win95/wordpad-small.png");
          mask-image: url("//repo.bfw.wiki/bfwrepo/images/win95/wordpad-small.png");
}

.label-taskbar:before {
  background-image: url("//repo.bfw.wiki/bfwrepo/images/win95/taskbar.png");
  background-repeat: no-repeat;
}

.label-customize-start-menu:before {
  background-image: url("//repo.bfw.wiki/bfwrepo/images/win95/customize-start-menu.png");
  background-repeat: no-repeat;
}

.label-recycle-bin-folder:before {
  background-image: url("//repo.bfw.wiki/bfwrepo/images/win95/recycle-bin-folder.png");
  background-repeat: no-repeat;
}

.button {
  box-shadow: inset -1.5px -1.5px 0 0 #263238, inset 1.5px 1.5px 0 0 #fcfcfc, inset -3px -3px 0 0 #a099a1, inset 3px 3px 0 0 #cac6cb;
  padding-bottom: 1.5px;
  padding-right: 1.5px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding-bottom: 1.5px;
  z-index: 4;
  background: #cac6cb;
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  display: flex;
  align-items: center;
  border: 0;
  padding-left: 6px;
  padding-right: 6px;
  width: 120px;
  height: 36px;
  background: none;
  text-align: center;
}
.button.underline span:first-letter {
  text-decoration: underline;
}
.button + .button {
  margin-left: 10px;
}
.button > span {
  display: block;
  width: 100%;
  line-height: 22px;
  border: 1px dotted transparent;
  padding: 0 !important;
}
@media (min-width: 500px) {
  .button > span {
    border-width: 1.5px;
  }
}
.button[disabled] {
  color: #a099a1;
  pointer-events: none;
}
.button:not([disabled]):focus {
  box-shadow: inset -3px -3px 0 0 #263238, inset 1.5px 1.5px 0 0 #263238, inset -4.5px -4.5px 0 0 #a099a1, inset 3px 3px 0 0 #fcfcfc;
  padding-bottom: 1.5px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding-bottom: 1.5px;
  z-index: 4;
  background: #cac6cb;
}
.button:not([disabled]):active {
  box-shadow: inset -1.5px -1.5px 0 0 #263238, inset 1.5px 1.5px 0 0 #263238, inset -3px -3px 0 0 #a099a1, inset 3px 3px 0 0 #a099a1;
  padding-bottom: 1.5px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding-bottom: 1.5px;
  z-index: 4;
  background: #cac6cb;
}
.button:not([disabled]):focus span, .button:not([disabled]):active span {
  border-color: #263238;
  color: #263238;
  background: none;
}

#desktop {
  position: absolute;
  top: 0;
  left: 0;
  width: 100vw;
  height: calc(100vh - 44px);
}

#icons {
  position: relative;
  z-index: 1;
  padding-top: 3px;
  height: 100%;
}

.desktop-icon {
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
  width: 116px;
}
.desktop-icon:before, .desktop-icon:after {
  width: 48px;
  height: 48px;
}
.desktop-icon:before {
  margin-bottom: 6px;
}
.desktop-icon:after {
  left: 36px;
}
.desktop-icon span {
  padding: 1px;
  border: 1.5px solid transparent;
}
.desktop-icon:not(:first-child) {
  margin-top: 40px;
}
.desktop-icon[tabindex]:active span, .desktop-icon[tabindex]:focus span {
  background: #B2738E;
  color: white;
  border: 1px dotted #D1AE87;
}
@media (min-width: 500px) {
  .desktop-icon[tabindex]:active span, .desktop-icon[tabindex]:focus span {
    border-width: 1.5px;
  }
}

#windows, #alerts {
  display: grid;
  place-items: center;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: calc(100% + 44px);
  padding-bottom: 44px;
}

.window, .alert {
  box-shadow: inset -1.5px -1.5px 0 0 #263238, inset 1.5px 1.5px 0 0 #dedcde, inset -3px .........完整代码请登录后点击上方下载按钮下载查看