Card by NlghtM4re
#e8e8e8
1.container { 2 display: flex; 3 justify-content: center; 4 align-items: center; 5} 6 7.window { 8 position: absolute; 9 height: 200px; 10 width: 300px; 11 background-color: #fff; 12 border: 2px solid #333; 13 border-radius: 15px; 14 overflow: hidden; 15} 16 17.window-title { 18 height: 30px; 19 background-color: #333; 20 display: flex; 21 align-items: center; 22 justify-content: space-between; 23 padding: 0 10px; 24 box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.25); 25} 26 27.window-title p { 28 color: #fff; 29 font-weight: bold; 30 margin: 0; 31 padding: 0; 32 text-align: left; 33} 34 35.window-buttons { 36 display: flex; 37 align-items: center; 38} 39 40.window-button { 41 width: 10px; 42 height: 10px; 43 border-radius: 5px; 44 margin: 5px; 45 transition: background-color 0.2s ease; 46} 47 48.window-button.close { 49 background-color: #f00; 50} 51 52.window-button.close:hover { 53 background-color: rgb(182, 2, 2); 54 cursor: pointer; 55} 56 57.window-button.reduce { 58 background-color: #ff0; 59} 60 61.window-button.reduce:hover { 62 background-color: rgb(172, 172, 4); 63 cursor: pointer; 64} 65 66.window-button.fullscreen { 67 background-color: #0f0; 68} 69 70.window-button.fullscreen:hover { 71 background-color: rgb(7, 159, 7); 72 cursor: pointer; 73} 74 75.window-button:focus { 76 outline: none; 77} 78 79.console { 80 width: 100%; 81 height: calc(100% - 30px); 82 background-color: #000; 83 color: #fff; 84 overflow: auto; 85} 86 87.console pre { 88 margin: 0; 89 padding: 5px; 90 font-size: 15px; 91} 92 93.console pre code { 94 color: #0f0; 95 outline: none; 96} 97 98.console::-webkit-scrollbar { 99 width: 8px; 100} 101 102.console::-webkit-scrollbar-track { 103 background-color: #333; 104} 105 106.console::-webkit-scrollbar-thumb { 107 background-color: #666; 108 border-radius: 10px; 109 border: 2px solid #333; 110} 111 112.console::-webkit-scrollbar-thumb:hover { 113 background-color: #999; 114}
1.3K views
1.3K views
MIT License