src/html/elrs.css

   1 /*==========================*/
   2
   3 .elrs-header {
   4     padding: 3em 0 3em 0 ;
   5     background-color: #4686a0;
   6     color: rgba(255, 255, 255, 0.75);
   7     background-attachment: fixed, fixed, fixed;
   8     background-image: linear-gradient(45deg, #9dc66b 5%, #4fa49a 30%, #4361c2);
   9     background-position: top left, center center, center center;
  10     background-size: auto, cover, cover;
  11     overflow: hidden;
  12     position: relative;
  13     text-align: center;
  14 }
  15
  16 .upload > label > input {
  17         clip: rect(0 0 0 0);
  18         clip-path: inset(50%);
  19         height: 1px;
  20         overflow: hidden;
  21         position: absolute;
  22         bottom: 0;
  23         left: 0;
  24         white-space: nowrap;
  25         width: 1px;
  26 }
  27 .upload > label {
  28         cursor: pointer;
  29         padding: 10px 16px 10px 16px;
  30 }
  31 .upload {
  32         padding: 0;
  33         tab-index: -1;
  34 }
  35
  36 body, input, select, textarea {
  37     color: #666;
  38     font-family: "Source Sans Pro", Helvetica, sans-serif;
  39     font-size: 12pt;
  40     font-weight: 300;
  41     line-height: 1.65em;
  42 }
  43
  44 .fixed-column {
  45         width: 20px;
  46         padding-left: 4px !important;
  47         padding-right: 4px !important;
  48 }
  49
  50 .compact {
  51         padding-left: 10px !important;
  52         padding-right: 10px !important;
  53         padding-top: 5px !important;
  54         margin-bottom: 5px !important;
  55 }
  56
  57 @media screen and (max-width: 800px) {
  58     .logo {
  59         width:25%;
  60                 height:25%;
  61     }
  62 }
  63
  64 /*==========================*/
  65
  66 #filedrag {
  67         display: none;
  68         font-weight: bold;
  69         text-align: center;
  70         padding: 1em 0;
  71         margin: 1em 0;
  72         color: #555;
  73         border: 2px dashed #555;
  74         border-radius: 7px;
  75         cursor: default;
  76 }
  77
  78 #filedrag.hover {
  79         color: #f00;
  80         border-color: #f00;
  81         border-style: solid;
  82         box-shadow: inset 0 3px 4px #888;
  83 }
  84
  85 /*==========================*/
  86
  87 /* Autocomplete */
  88
  89 .autocomplete {
  90         position: relative;
  91         display: inline-block;
  92 }
  93
  94 .autocomplete-items {
  95         position: absolute;
  96         border: 1px solid #d4d4d4;
  97         border-bottom: none;
  98         border-top: none;
  99         z-index: 99;
 100         /*position the autocomplete items to be the same width as the container:*/
 101         top: 100%;
 102         left: 0;
 103         right: 0;
 104 }
 105
 106 .autocomplete-items div {
 107         padding: 5px;
 108         cursor: pointer;
 109         background-color: #fff;
 110         border-bottom: 1px solid #d4d4d4;
 111 }
 112
 113 /*when hovering an item:*/
 114 .autocomplete-items div:hover {
 115         background-color: #e9e9e9;
 116 }
 117
 118 /*when navigating through the items using the arrow keys:*/
 119 .autocomplete-active {
 120         background-color: DodgerBlue !important;
 121         color: #ffffff;
 122 }
 123
 124 /*==========================*/
 125
 126 /* Loader spinner */
 127
 128 .loader {
 129         background-color: #ffffff;
 130         background-image: url("data:image/svg+xml,%3C%3Fxml%20version='1.0'%20encoding='utf-8'%3F%3E%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20xmlns:xlink='http://www.w3.org/1999/xlink'%20width='28px'%20height='28px'%20viewBox='0%200%20100%20100'%20preserveAspectRatio='xMidYMid'%3E%3Crect%20x='0'%20y='0'%20width='100'%20height='100'%20stroke='none'%20fill='none'/%3E%3Ccircle%20cx='28'%20cy='75'%20r='11'%20fill='%230051a2'%3E%3Canimate%20attributeName='fill-opacity'%20repeatCount='indefinite'%20dur='1s'%20values='0%3B1%3B1'%20keyTimes='0%3B0.2%3B1'%20begin='0s'%3E%3C/animate%3E%3C/circle%3E%3Cpath%20d='M28%2047A28%2028%200%200%201%2056%2075'%20fill='none'%20stroke='%231b75be'%20stroke-width='10'%3E%3Canimate%20attributeName='stroke-opacity'%20repeatCount='indefinite'%20dur='1s'%20values='0%3B1%3B1'%20keyTimes='0%3B0.2%3B1'%20begin='0.1s'%3E%3C/animate%3E%3C/path%3E%3Cpath%20d='M28%2025A50%2050%200%200%201%2078%2075'%20fill='none'%20stroke='%23408ee0'%20stroke-width='10'%3E%3Canimate%20attributeName='stroke-opacity'%20repeatCount='indefinite'%20dur='1s'%20values='0%3B1%3B1'%20keyTimes='0%3B0.2%3B1'%20begin='0.2s'%3E%3C/animate%3E%3C/path%3E%3C/svg%3E");
 131         background-size: 25px 25px;
 132         background-position: right center;
 133         background-repeat: no-repeat;
 134 }
 135
 136   /* Safari */
 137 @-webkit-keyframes spin {
 138         0% { -webkit-transform: rotate(0deg); }
 139         100% { -webkit-transform: rotate(360deg); }
 140 }
 141
 142 @keyframes spin {
 143         0% { transform: rotate(0deg); }
 144         100% { transform: rotate(360deg); }
 145 }
 146
 147 /*==========================*/
 148
 149 /* Alert box design by Igor Ferrão de Souza: https://www.linkedin.com/in/igor-ferr%C3%A3o-de-souza-4122407b/ */
 150
 151 .alert-wrapper {
 152         display: flex;
 153         width: 100%;
 154         height: 100%;
 155         align-items: center;
 156         justify-content: center;
 157         margin: 0px auto;
 158         padding: 0px auto;
 159         left: 0;
 160         top: 0;
 161         overflow: hidden;
 162         position: fixed;
 163         background: rgb(0, 0, 0, 0.3);
 164         z-index: 999999;
 165   }
 166
 167   @keyframes open-frame {
 168         0% {
 169           transform: scale(1);
 170         }
 171         25% {
 172           transform: scale(0.95);
 173         }
 174         50% {
 175           transform: scale(0.97);
 176         }
 177         75% {
 178           transform: scale(0.93);
 179         }
 180         100% {
 181           transform: scale(1);
 182         }
 183   }
 184
 185   .alert-frame {
 186         background: #fff;
 187         min-height: 400px;
 188         width: 450px;
 189         box-shadow: 5px 5px 10px rgb(0, 0, 0, 0.2);
 190         border-radius: 10px;
 191         animation: open-frame 0.3s linear;
 192   }
 193
 194   .alert-header {
 195         display: flex;
 196         flex-direction: row;
 197         height: 175px;
 198         border-top-left-radius: 5px;
 199         border-top-right-radius: 5px;
 200   }
 201
 202   .alert-img {
 203         height: 80px;
 204         position: absolute;
 205         left: 0;
 206         right: 0;
 207         margin-left: auto;
 208         margin-right: auto;
 209         align-self: center;
 210   }
 211
 212   .alert-close {
 213         width: 30px;
 214         height: 30px;
 215         color: rgb(0, 0, 0, 0.2);
 216         display: flex;
 217         align-items: center;
 218         justify-content: center;
 219         font-family: "Dosis", sans-serif;
 220         font-weight: 700;
 221         font-size: 16px;
 222         cursor: pointer;
 223         line-height: 30px;
 224         transition: color 0.5s;
 225         margin-left: auto;
 226         margin-right: 5px;
 227         margin-top: 5px;
 228   }
 229
 230   .alert-close-circle {
 231         width: 30px;
 232         height: 30px;
 233         background: #e4eae7;
 234         color: #222;
 235         display: flex;
 236         align-items: center;
 237         justify-content: center;
 238         border-radius: 17.5px;
 239         margin-top: -15px;
 240         margin-right: -15px;
 241         font-family: "Dosis", sans-serif;
 242         font-weight: 700;
 243         font-size: 12px;
 244         cursor: pointer;
 245         line-height: 30px;
 246         transition: background 0.5s;
 247         margin-left: auto;
 248   }
 249
 250   .alert-close-circle:hover {
 251         background: #fff;
 252   }
 253
 254   .alert-close:hover {
 255         color: rgb(0, 0, 0, 0.5);
 256   }
 257
 258   .alert-body {
 259         padding: 30px 30px;
 260         display: flex;
 261         flex-direction: column;
 262         text-align: center;
 263     font-family: "Source Sans Pro", Helvetica, sans-serif;
 264   }
 265
 266   .alert-title {
 267         font-size: 18px !important;
 268         font-family: "Source Sans Pro", Helvetica, sans-serif;
 269         font-weight: 700;
 270         font-size: 15px;
 271         margin-bottom: 35px;
 272         color: #222;
 273         align-self: center;
 274   }
 275
 276   .alert-message {
 277         font-size: 15px !important;
 278         color: #666;
 279         font-family: "Source Sans Pro", Helvetica, sans-serif;
 280         font-weight: 400;
 281         font-size: 15px;
 282         text-align: center;
 283         margin-bottom: 35px;
 284         line-height: 1.6;
 285         align-self: center;
 286   }
 287
 288   .question-buttons {
 289         display: flex;
 290         flex-direction: row;
 291         justify-content: center;
 292   }
 293
 294   .error-bg {
 295         background: #d85261;
 296   }
 297
 298   .success-bg {
 299         background: #2dd284;
 300   }
 301
 302   .warning-bg {
 303         background: #fada5e;
 304   }
 305
 306   .question-bg {
 307         background: #779ecb;
 308   }
 309
 310   .error-btn:hover {
 311         background: #e5a4b4;
 312   }
 313
 314   .success-btn:hover {
 315         background: #6edaa4;
 316   }
 317
 318   .warning-btn:hover {
 319         background: #fcecae;
 320   }
 321
 322   .info-btn:hover {
 323         background: #c3e6fb;
 324   }
 325
 326   .question-btn:hover {
 327         background: #bacee4;
 328   }
 329
 330   .error-timer {
 331         background: #e5a4b4;
 332   }
 333
 334   .success-timer {
 335         background: #6edaa4;
 336   }
 337
 338   .warning-timer {
 339         background: #fcecae;
 340   }
 341
 342   .info-timer {
 343         background: #c3e6fb;
 344   }
 345
 346   .info-bg {
 347         background: #88cef7;
 348   }
 349
 350     /* Custom code for ExpressLRS PWM Output table */
 351   .pwmpnl {
 352         min-width: fit-content;
 353   }
 354   .pwmtbl table {
 355         overflow-x: auto;
 356   }
 357   .pwmtbl th {
 358         text-align: center;
 359         font-weight: bold;
 360   }
 361   .pwmtbl td {
 362         text-align: center;
 363   }
 364   .pwmitm {
 365         min-width: 6em;
 366         white-space: nowrap;
 367         width: fit-content;
 368   }
 369
 370   /*==========================*/
 371
 372   .elrs-inline-form {
 373           display: flex;
 374           align-items: center;
 375   }
 376
 377   .elrs-inline-form > * {
 378         margin-right: 5px;
 379   }
 380
 381   .badge {
 382         color: white;
 383         padding: 4px 8px;
 384         font-weight: bold;
 385         text-align: center;
 386         border-radius: 5px;
 387   }
 388
 389   @@include("mui.css")