onions.css (6633B)
1 .onions-page { 2 display: block; 3 margin: 0 auto; 4 max-width: 1400px; 5 padding: 30px 20px; 6 } 7 8 .onions-page > .p-title { 9 font-size: 24px; 10 margin-bottom: 20px; 11 color: #000; 12 text-align: center; 13 } 14 15 .onions-page > .p-body { 16 width: 100%; 17 text-align: center; 18 margin-bottom: 20px; 19 font-size: 14px; 20 line-height: 18px; 21 } 22 23 .onions-page > .list { 24 width: 100%; 25 font-size: 0; 26 } 27 28 .onions-page > .list > .item { 29 padding: 15px; 30 font-size: 0; 31 } 32 33 .onions-page > .list > .item > .left { 34 display: inline-block; 35 vertical-align: middle; 36 width: calc(100% - 200px); 37 } 38 39 .onions-page > .list > .item > .left > .icon { 40 display: inline-block; 41 vertical-align: middle; 42 width: 60px; 43 height: 60px; 44 margin-right: 15px; 45 border: 1px solid #efefed; 46 background-size: contain; 47 background-position: center center; 48 background-repeat: no-repeat; 49 } 50 51 .onions-page > .list > .item > .left > .text { 52 display: inline-block; 53 vertical-align: middle; 54 width: calc(100% - 75px); 55 } 56 57 .onions-page > .list > .item > .left > .text > .title { 58 font-size: 18px; 59 font-weight: bold; 60 } 61 62 .onions-page > .list > .item > .left > .text > .title > a { 63 color: #9b59b6; 64 text-decoration: none; 65 } 66 67 .onions-page > .list > .item > .right { 68 text-align: right; 69 display: inline-block; 70 vertical-align: middle; 71 width: 200px; 72 } 73 74 .onions-page > .list > .item > .right > .data { 75 display: inline-block; 76 vertical-align: middle; 77 text-align: center; 78 width: 70px; 79 } 80 81 .onions-page > .list > .item > .right > .data > .label { 82 font-size: 12px; 83 color: #999; 84 width: 100%; 85 text-align: center; 86 margin-bottom: 5px; 87 } 88 89 .onions-page > .list > .item > .right > .data > .value { 90 font-size: 26px; 91 color: #000; 92 text-align: center; 93 width: 100%; 94 font-weight: bold; 95 } 96 97 .onions-page > .list > .item > .right > .data > .value.red { 98 color: #e74c3c; 99 } 100 101 .onions-page > .list > .item > .right > .data > .value.green { 102 color: #2ecc71; 103 } 104 105 .onions-page > .list > .item > .right > .data > .value.amber { 106 color: #e67e22; 107 } 108 109 .onions-page > .list > .item:nth-child(odd) { 110 background: #fff; 111 } 112 113 .onions-view { 114 display: block; 115 width: 100%; 116 } 117 118 .onions-view > .banner-top { 119 display: block; 120 width: 100%; 121 height: 200px; 122 background-size: cover; 123 background-position: center center; 124 background-repeat: no-repeat; 125 position: relative; 126 } 127 128 .onions-view > .banner-top:after { 129 position: absolute; 130 top: 0; 131 left: 0; 132 width: 100%; 133 height: 100%; 134 opacity: 0.5; 135 background: #000; 136 content: ""; 137 z-index: 1; 138 } 139 140 .onions-view > .banner-top > a { 141 position: absolute; 142 top: 20px; 143 left: 20px; 144 background: #000; 145 height: 30px; 146 line-height: 30px; 147 font-size: 16px; 148 color: #fff; 149 text-decoration: none; 150 z-index: 2; 151 padding: 0 20px; 152 } 153 154 .onions-view > .header-bar { 155 background: #fff; 156 padding: 15px; 157 margin-bottom: 20px; 158 } 159 160 .onions-view > .header-bar > .inner { 161 max-width: 1400px; 162 width: 100%; 163 padding: 0 15px; 164 margin: 0 auto; 165 } 166 167 .onions-view > .header-bar > .inner > .left { 168 display: inline-block; 169 vertical-align: middle; 170 width: calc(100% - 200px); 171 } 172 173 .onions-view > .header-bar > .inner > .left > .icon { 174 display: inline-block; 175 vertical-align: middle; 176 width: 80px; 177 height: 80px; 178 margin-right: 15px; 179 border: 1px solid #efefed; 180 background-size: contain; 181 background-position: center center; 182 background-repeat: no-repeat; 183 } 184 185 .onions-view > .header-bar > .inner > .left > .text { 186 display: inline-block; 187 vertical-align: middle; 188 width: calc(100% - 95px); 189 } 190 191 .onions-view > .header-bar > .inner > .left > .text > .title { 192 font-size: 24px; 193 font-weight: bold; 194 } 195 196 .onions-view > .header-bar > .inner > .left > .text > .title > a { 197 color: #9b59b6; 198 text-decoration: none; 199 } 200 201 .onions-view > .header-bar > .inner > .right { 202 text-align: right; 203 display: inline-block; 204 vertical-align: middle; 205 width: 200px; 206 } 207 208 .onions-view > .header-bar > .inner > .right > .data { 209 display: inline-block; 210 vertical-align: middle; 211 text-align: center; 212 width: 70px; 213 } 214 215 .onions-view > .header-bar > .inner > .right > .data > .label { 216 font-size: 12px; 217 color: #999; 218 width: 100%; 219 text-align: center; 220 margin-bottom: 5px; 221 } 222 223 .onions-view > .header-bar > .inner > .right > .data > .value { 224 font-size: 26px; 225 color: #000; 226 text-align: center; 227 width: 100%; 228 font-weight: bold; 229 } 230 231 .onions-view > .header-bar > .inner > .right > .data > .value.red { 232 color: #e74c3c; 233 } 234 235 .onions-view > .header-bar > .inner > .right > .data > .value.green { 236 color: #2ecc71; 237 } 238 239 .onions-view > .header-bar > .inner > .right > .data > .value.amber { 240 color: #e67e22; 241 } 242 243 .onions-view > .columns { 244 max-width: 1400px; 245 width: 100%; 246 margin: 0 auto; 247 padding: 0 15px; 248 font-size: 0; 249 } 250 251 .onions-view > .columns > .item { 252 display: inline-block; 253 vertical-align: top; 254 width: calc(50% - 10px); 255 margin-right: 20px; 256 margin-bottom: 20px; 257 background: #fff; 258 } 259 260 .onions-view > .columns > .item:nth-child(even) { 261 margin-right: 0; 262 } 263 264 @media (max-width: 700px) { 265 .onions-view > .columns > .item { 266 display: block; 267 width: 100%; 268 margin: 0 0 10px 0 !important; 269 } 270 } 271 272 .onions-view > .columns > .item > .title { 273 height: 40px; 274 line-height: 40px; 275 color: #9b59b6; 276 font-size: 18px; 277 font-weight: bold; 278 padding: 0 15px; 279 border-bottom: 1px solid #efefed; 280 } 281 282 .onions-view > .columns > .item > .data { 283 padding: 10px 15px; 284 font-size: 14px; 285 border-bottom: 1px solid #efefed; 286 } 287 288 .onions-view > .columns > .item > .data a { 289 text-decoration: none; 290 } 291 292 .onions-view > .columns > .item > .data:last-child { 293 border: none; 294 } 295 296 .onions-view > .columns > .item > .data > .label { 297 font-size: 12px; 298 color: #999; 299 margin-bottom: 5px; 300 } 301 302 .onions-view > .columns > .item > .data > .value { 303 font-weight: bold; 304 font-size: 16px; 305 } 306 307 .onions-view > .columns > .item > .mirrors { 308 display: block; 309 width: 100%; 310 } 311 312 .onions-view > .columns > .item > .mirrors > .element { 313 display: block; 314 width: 100%; 315 padding: 10px 15px; 316 border-bottom: 1px solid #efefed; 317 overflow: hidden; 318 } 319 320 .onions-view > .columns > .item > .mirrors > .element > .url { 321 display: block; 322 white-space: nowrap; 323 overflow: hidden; 324 width: 100%; 325 } 326 327 .onions-view > .columns > .item > .mirrors > .element > .url > a { 328 color: #9b59b6; 329 text-decoration: none; 330 font-size: 16px; 331 }