github.com/pdaian/flashboys2@v0.0.0-20190718175736-b101c35361f0/webapp/static/css/main.css (about) 1 /* frontrun.me specific stuff */ 2 3 @font-face { 4 font-family: 'Potra'; 5 src: url('../fonts/potra.woff') format('woff'), /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */ 6 url('../fonts/potra.ttf') format('truetype'); /* Chrome 4+, Firefox 3.5, Opera 10+, Safari 3—5 */ 7 } 8 9 #top { 10 padding: 20px; 11 margin-bottom: 20px; 12 } 13 14 15 .proftable { 16 transform-origin: top left; 17 zoom: 50 %; 18 transform: scale(calc(2/3));} 19 20 #header { 21 display: inline-block; 22 font-family: 'Potra', Fallback, sans-serif; 23 font-size: 6em; 24 vertical-align: middle; 25 margin-left: 20px; 26 } 27 28 #logo { 29 display: inline-block; 30 vertical-align: middle; 31 width: 20em; 32 } 33 34 #content { 35 padding: 20px; 36 } 37 38 /* pagination */ 39 .pagination { 40 display: inline-block; 41 margin-left: auto; 42 margin-right: auto; 43 } 44 45 .pagination a { 46 color: black; 47 float: left; 48 padding: 8px 16px; 49 text-decoration: none; 50 border: 1px solid #ddd; 51 } 52 53 .pagination a.active { 54 background-color: #4CAF50; 55 color: white; 56 border: 1px solid #4CAF50; 57 } 58 59 .pagination a:hover:not(.active) {background-color: #ddd;} 60 61 .pagination a:first-child { 62 border-top-left-radius: 5px; 63 border-bottom-left-radius: 5px; 64 } 65 66 .pagination a:last-child { 67 border-top-right-radius: 5px; 68 border-bottom-right-radius: 5px; 69 } 70 71 /* alert modal */ 72 73 /* The alert message box */ 74 .alert { 75 margin: 0px 20px 0px 20px; 76 padding: 20px; 77 background-color: #eeeeee; /* Red */ 78 color: black; 79 } 80 81 /* The close button */ 82 .closebtn { 83 margin-left: 15px; 84 color: black; 85 font-weight: bold; 86 float: right; 87 font-size: 22px; 88 line-height: 20px; 89 cursor: pointer; 90 transition: 0.3s; 91 } 92 93 /* When moving the mouse over the close button */ 94 .closebtn:hover { 95 color: black; 96 } 97 98 99 /* table boilerplate */ 100 101 /*////////////////////////////////////////////////////////////////// 102 [ FONT ]*/ 103 104 105 @font-face { 106 font-family: OpenSans-Regular; 107 src: url('../fonts/OpenSans/OpenSans-Regular.ttf'); 108 } 109 110 111 112 /*////////////////////////////////////////////////////////////////// 113 [ RESTYLE TAG ]*/ 114 * { 115 margin: 0px; 116 padding: 0px; 117 box-sizing: border-box; 118 } 119 120 body, html { 121 height: 100%; 122 font-family: sans-serif; 123 } 124 125 /* ------------------------------------ */ 126 a { 127 margin: 0px; 128 transition: all 0.4s; 129 -webkit-transition: all 0.4s; 130 -o-transition: all 0.4s; 131 -moz-transition: all 0.4s; 132 } 133 134 a:focus { 135 outline: none !important; 136 } 137 138 a:hover { 139 text-decoration: none; 140 } 141 142 /* ------------------------------------ */ 143 h1,h2,h3,h4,h5,h6 {margin: 0px;} 144 145 p {margin: 0px;} 146 147 ul, li { 148 margin: 0px; 149 list-style-type: none; 150 } 151 152 153 /* ------------------------------------ */ 154 input { 155 display: block; 156 outline: none; 157 border: none !important; 158 } 159 160 textarea { 161 display: block; 162 outline: none; 163 } 164 165 textarea:focus, input:focus { 166 border-color: transparent !important; 167 } 168 169 /* ------------------------------------ */ 170 button { 171 outline: none !important; 172 border: none; 173 background: transparent; 174 } 175 176 button:hover { 177 cursor: pointer; 178 } 179 180 iframe { 181 border: none !important; 182 } 183 184 185 186 187 /*////////////////////////////////////////////////////////////////// 188 [ Utiliti ]*/ 189 190 191 192 193 194 195 /*////////////////////////////////////////////////////////////////// 196 [ Table ]*/ 197 198 .limiter { 199 width: 100%; 200 margin: 0 auto; 201 } 202 203 .container-table100 { 204 display: -webkit-box; 205 display: -webkit-flex; 206 display: -moz-box; 207 display: -ms-flexbox; 208 display: flex; 209 align-items: center; 210 justify-content: center; 211 flex-wrap: wrap; 212 } 213 214 .wrap-table100 { 215 width: 100%; 216 } 217 218 table { 219 border-spacing: 1; 220 border-collapse: collapse; 221 background: #eeeeee; 222 border-radius: 10px; 223 overflow: hidden; 224 width: 100%; 225 margin: 0 auto; 226 position: relative; 227 } 228 table * { 229 position: relative; 230 } 231 table td, table th { 232 padding-left: 8px; 233 } 234 table thead tr { 235 height: 60px; 236 background: #36304a; 237 } 238 table tbody tr { 239 height: 50px; 240 } 241 table tbody tr:last-child { 242 border: 0; 243 } 244 table td, table th { 245 text-align: left; 246 } 247 table td.l, table th.l { 248 text-align: right; 249 } 250 table td.c, table th.c { 251 text-align: center; 252 } 253 table td.r, table th.r { 254 text-align: center; 255 } 256 257 258 .table100-head th{ 259 font-family: OpenSans-Regular; 260 font-size: 18px; 261 color: #fff; 262 line-height: 1.2; 263 font-weight: unset; 264 } 265 266 tbody tr:nth-child(even) { 267 background-color: #f5f5f5; 268 } 269 270 tbody tr { 271 font-family: OpenSans-Regular; 272 font-size: 15px; 273 color: #808080; 274 line-height: 1.2; 275 font-weight: unset; 276 } 277 278 tbody tr:hover { 279 color: #555555; 280 background-color: #f5f5f5; 281 cursor: pointer; 282 } 283 284 .column1 { 285 padding-left: 40px; 286 padding-right: 40px; 287 text-align: left; 288 } 289 290 .column2 { 291 width: 300px; 292 text-align: left; 293 } 294 295 .column3 { 296 width: 245px; 297 text-align: left; 298 } 299 300 .columnprofit { 301 text-align: left; 302 padding-left: 20px; 303 } 304 305 .column4 { 306 width: 110px; 307 padding-left: 30px; 308 text-align: center; 309 } 310 311 .column5 { 312 width: 170px; 313 text-align: center; 314 } 315 316 .column6 { 317 text-align: center; 318 padding-right: 62px; 319 padding-left: 30px; 320 } 321 322 .column7 { 323 } 324 325 .column8 { 326 width: 100px; 327 text-align: right; 328 padding-right: 40px; 329 } 330 331 332 @media screen and (max-width: 992px) { 333 table { 334 display: block; 335 } 336 table > *, table tr, table td, table th { 337 display: block; 338 } 339 table thead { 340 display: none; 341 } 342 table tbody tr { 343 height: auto; 344 padding: 37px 0; 345 } 346 table tbody tr td { 347 padding-left: 40% !important; 348 margin-bottom: 24px; 349 } 350 table tbody tr td:last-child { 351 margin-bottom: 0; 352 } 353 table tbody tr td:before { 354 font-family: OpenSans-Regular; 355 font-size: 14px; 356 color: #999999; 357 line-height: 1.2; 358 font-weight: unset; 359 position: absolute; 360 width: 40%; 361 left: 30px; 362 top: 0; 363 } 364 table tbody tr td:nth-child(1):before { 365 content: "Date"; 366 } 367 table tbody tr td:nth-child(2):before { 368 content: "Order ID"; 369 } 370 table tbody tr td:nth-child(3):before { 371 content: "Name"; 372 } 373 table tbody tr td:nth-child(4):before { 374 content: "Price"; 375 } 376 table tbody tr td:nth-child(5):before { 377 content: "Quantity"; 378 } 379 table tbody tr td:nth-child(6):before { 380 content: "Total"; 381 } 382 383 .column4, 384 .column5, 385 .column6 { 386 text-align: left; 387 } 388 389 .column4, 390 .column5, 391 .column6, 392 .column1, 393 .column2, 394 .column3 { 395 width: 100%; 396 } 397 398 tbody tr { 399 font-size: 14px; 400 } 401 } 402 403 @media (max-width: 576px) { 404 .container-table100 { 405 padding-left: 15px; 406 padding-right: 15px; 407 } 408 }