573 views
1.card { 2 position: relative; 3 display: flex; 4 flex-direction: column; 5 max-width: 290px; 6 height: 254px; 7 background: #2b2b2b; 8 margin: 0 2px; 9} 10 11.card .header { 12 height: 30px; 13 width: 100%; 14 display: flex; 15 align-items: center; 16 justify-content: flex-start; 17 background-color: rgb(17, 17, 17); 18 padding-left: 4px; 19} 20 21.card .header .btn { 22 margin-left: 8px; 23 height: 12px; 24 width: 12px; 25 border-radius: 50%; 26 cursor: pointer; 27} 28 29.active { 30 cursor: pointer; 31 position: relative; 32 padding: 0 20px; 33 display: flex; 34 align-items: center; 35 justify-content: center; 36 color: #fefe; 37 background-color: #2b2b2b; 38 height: 100%; 39 margin-left: 10px; 40 border-top-left-radius: 10px; 41 border-top-right-radius: 10px; 42 font-size: 12px; 43} 44 45.card .header div:nth-child(1) { 46 background-color: rgb(255, 102, 0); 47} 48 49.card .header div:nth-child(2) { 50 background-color: rgb(247, 202, 1); 51} 52 53.card .header div:nth-child(3) { 54 background-color: rgb(10, 184, 10); 55} 56 57.card .content { 58 display: flex; 59 flex-direction: column; 60 justify-content: flex-start; 61 flex: 1; 62 line-height: 125%; 63 color: #fff; 64} 65 66.card .content .req, .card .content .res { 67 padding: .2em 1.6em; 68 border-bottom: 1px solid rgba(102, 101, 101, 0.685); 69 font-size: 12px; 70} 71 72.card .content .req { 73 display: flex; 74 align-items: center; 75 justify-content: flex-start; 76 position: relative; 77 color: #fff; 78} 79 80.card .content .req::before { 81 position: absolute; 82 content: ""; 83 border-left: 1px solid rgb(177, 176, 176); 84 border-bottom: 1px solid rgb(177, 176, 176); 85 padding: 4px; 86 left: 2px; 87 height: 0; 88 width: 0; 89 background-color: transparent; 90 transform: rotate(220deg); 91} 92 93.card .content .res { 94 margin-top: 4px; 95 display: flex; 96 align-items: center; 97 justify-content: flex-start; 98 position: relative; 99 color: #fff; 100} 101 102.card .content .res span:nth-child(1) { 103 color: rgb(230, 103, 103); 104 font-style: italic; 105 margin-right: 8px; 106} 107 108.card .content .res span:nth-child(2) { 109 color: rgb(77, 245, 43); 110} 111 112.card .content .res.error { 113 background-color: rgba(255, 0, 0, 0.05); 114} 115 116.card .content .res.error::before { 117 position: absolute; 118 content: "X"; 119 padding: 3px; 120 left: 2px; 121 height: 6px; 122 width: 6px; 123 background-color: rgba(255, 0, 0, 0.644); 124 border-radius: 50%; 125 display: flex; 126 align-items: center; 127 justify-content: center; 128 font-size: 12px; 129 font-weight: 500; 130}
MIT License