| | * { |
| | margin: 0; |
| | padding: 0; |
| | font-family: Sans-Serif; |
| | box-sizing: border-box; |
| | } |
| | html, body { |
| | height: 100%; |
| | width: 100%; |
| | } |
| | body { |
| | justify-content: center; |
| | align-items: center; |
| | display: flex; |
| | background-color: grey; |
| | } |
| | .window1 { |
| | background: #fff; |
| | width: 60%; |
| | height: auto; |
| | resize: both; |
| | overflow: auto; |
| | |
| | } |
| | .window1 .header-w1 { |
| | background: #000; |
| | justify-content: space-between; |
| | align-items: center; |
| | display: flex; |
| | padding: 5px; |
| | width: 100%; |
| | } |
| | .header-w1 span { |
| | color: #fff; |
| | } |
| | .header-w1 button { |
| | background: red; |
| | color: #000; |
| | } |
| | .window1 .content-w1 { |
| | padding: 10px; |
| | } |
| | .content-w1 p { |
| | color: #444; |
| | } |
| | .content-w1 button { |
| | padding: 2px 5px; |
| | background: #00FF5B; |
| | color: #000; |
| | border-radius: 1.5px; |
| | margin-top: 5px; |
| | } |
| |
|
| | |
| |
|
| | .window2 { |
| | background: #fff; |
| | width: 100%; |
| | height: 100%; |
| | overflow: auto; |
| | display: none; |
| | } |
| | .window2 .header-w2 { |
| | background: #000; |
| | justify-content: space-between; |
| | align-items: center; |
| | display: flex; |
| | padding: 5px; |
| | width: 100%; |
| | } |
| | .header-w2 span { |
| | color: #fff; |
| | } |
| | .header-w2 .actions { |
| | justify-content: space-between; |
| | align-items: center; |
| | display: flex; |
| | gap: 5px; |
| | } |
| | .actions button { |
| | padding: 2px; |
| | width: 30px; |
| | } |
| | .actions .minimize { |
| | background: #00FF1C; |
| | } |
| | .actions .close { |
| | background: red; |
| | } |
| | .window2 .content-w2 { |
| | margin-top: 5px; |
| | padding: 10px; |
| | justify-content: center; |
| | align-items: center; |
| | display: flex; |
| | flex-direction: column; |
| | gap: 8px; |
| | } |
| | .content-w2 input { |
| | text-indent: 5px; |
| | border: 0.5px solid grey; |
| | box-shadow: 1px 1px 2px grey; |
| | height: 25px; |
| | width: 225px; |
| | border-radius: 2.5px; |
| | } |
| | .content-w2 form { |
| | justify-content: center; |
| | align-items: center; |
| | display: flex; |
| | flex-direction: column; |
| | gap: 8px; |
| | } |
| | .content-w2 button { |
| | background: red; |
| | color: #fff; |
| | padding: 2.5px; |
| | height: 25; |
| | width: 225px; |
| | border-radius: 2.5px; |
| | } |