| * { |
| 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; |
| } |