Legacy Windows
ํ์ด์ง ๋งจ ์๋์ ๋งํฌ๋ฅผ ๋๋ฌ๋ณด์ธ์!
.window { position: fixed; top: 50%; background: rgb(189, 189, 189); border-style: solid; border-width: 3px; border-top-color: rgb(222, 222, 222); border-right-color: rgb(98, 98, 98); border-bottom-color: rgb(94, 98, 98); border-left-color: rgb(222, 222, 222); transform: translateY(-50%); /* ๋ฌด์ฑ์ */ z-index: 999 } .window p { margin-block-start: 0; margin-block-end: 0; } .window .control { display: flex; padding: 3px; background: rgb(0, 0, 123); color: rgb(255, 255, 255); font-weight: bold; } .window .control > p { flex-grow: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .window .control-buttons span { display: inline-flex; justify-content: center; align-items: flex-end; width: 1em; height: 1em; margin-left: 3px; background: rgb(189, 189, 189); border-style: solid; border-width: 2px; border-top-color: rgb(222, 222, 222); border-right-color: rgb(98, 98, 98); border-bottom-color: rgb(94, 98, 98); border-left-color: rgb(222, 222, 222); color: rgb(0, 0, 0); } .window .control-buttons span.disabled { color: rgb(123, 123, 123); } .window .content { padding: 1em; } .window .progress-bar { display: flex; width: 100%; height: 1.5em; padding: 2.5px; box-shadow: inset 1.5px 1.5px rgb(136, 136, 136), inset -1.5px -1.5px rgb(215, 215, 215); color: rgb(0, 0, 123); } .window .checkbox { display: inline-flex; align-items: center; width: 1em; height: 1em; background: rgb(255, 255, 255); box-shadow: inset 2px 2px rgb(98, 98, 98), inset -2px -2px rgb(222, 222, 222); } .window .window-buttons { display: flex; justify-content: flex-end; } .window .window-buttons span { display: inline-flex; justify-content: center; width: 7em; margin-left: .5em; border-style: solid; border-width: 2px; border-top-color: rgb(222, 222, 222); border-right-color: rgb(98, 98, 98); border-bottom-color: rgb(94, 98, 98); border-left-color: rgb(222, 222, 222); } .window .window-buttons span.disabled { color: rgb(123, 123, 123); }
ํ์ด์ง ๋ด์ญ: 36, ๋ง์ง๋ง ์์ : 29 Jul 2021 16:44