rss-bridge-dark-theme

Dark theme for RSS-Bridge
git clone git://fossdaily.xyz/rss-bridge-dark-theme
Log | Files | Refs

style.css (6728B)


      1 html,
      2 body,
      3 div,
      4 span,
      5 applet,
      6 object,
      7 iframe,
      8 h1,
      9 h2,
     10 h3,
     11 h4,
     12 h5,
     13 h6,
     14 p,
     15 blockquote,
     16 pre,
     17 a,
     18 abbr,
     19 acronym,
     20 address,
     21 big,
     22 cite,
     23 code,
     24 del,
     25 dfn,
     26 em,
     27 img,
     28 ins,
     29 kbd,
     30 q,
     31 s,
     32 samp,
     33 small,
     34 strike,
     35 strong,
     36 sub,
     37 sup,
     38 tt,
     39 var,
     40 b,
     41 u,
     42 i,
     43 center,
     44 dl,
     45 dt,
     46 dd,
     47 ol,
     48 ul,
     49 li,
     50 fieldset,
     51 form,
     52 label,
     53 legend,
     54 table,
     55 caption,
     56 tbody,
     57 tfoot,
     58 thead,
     59 tr,
     60 th,
     61 td,
     62 article,
     63 aside,
     64 canvas,
     65 details,
     66 figcaption,
     67 figure,
     68 footer,
     69 header,
     70 hgroup,
     71 menu,
     72 nav,
     73 section,
     74 summary,
     75 time,
     76 mark,
     77 audio,
     78 video {
     79   margin: 0;
     80   padding: 0;
     81   border: 0;
     82   outline: 0;
     83   font-size: 100%;
     84   font: inherit;
     85   vertical-align: baseline;
     86 }
     87 
     88 /* HTML5 display-role reset for older browsers */
     89 article,
     90 aside,
     91 details,
     92 figcaption,
     93 figure,
     94 footer,
     95 header,
     96 hgroup,
     97 menu,
     98 nav,
     99 section {
    100   display: block;
    101 }
    102 
    103 /* Adjust parameters for browsers that don't support the grid layout */
    104 
    105 .parameters label:before {
    106   content: " ";
    107   display: block;
    108 }
    109 
    110 /* Let's go for the actual style */
    111 body {
    112   background-color: #393d3e;
    113   font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica,
    114     Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
    115 }
    116 
    117 a,
    118 a:link,
    119 a:visited {
    120   color: #2196f3;
    121   text-decoration: none;
    122 }
    123 
    124 a:hover {
    125   text-decoration: underline;
    126 }
    127 
    128 /* Header */
    129 
    130 header {
    131   margin-top: 40px;
    132   text-align: center;
    133   color: #1182db;
    134 }
    135 
    136 header > div.logo {
    137   background-image: url(logo_600px.png);
    138   width: 599px;
    139   height: 177px;
    140   margin: auto;
    141 }
    142 
    143 header > section.warning {
    144   width: 40%;
    145   background-color: #ffc600;
    146   color: #5f5f5f;
    147 }
    148 
    149 header > section.critical-warning {
    150   width: 40%;
    151   background-color: #cf3e3e;
    152   font-weight: bold;
    153   color: white;
    154 }
    155 
    156 select,
    157 input[type="text"],
    158 input[type="number"] {
    159   background-color: #bcb7b0;
    160   color: #2e3031;
    161   border: 1px solid #2e3031;
    162   margin-left: 8px;
    163   margin-bottom: 10px;
    164   padding: 5px 10px;
    165 }
    166 
    167 select:focus,
    168 input[type="text"]:focus,
    169 input[type="number"]:focus {
    170   outline: none;
    171   border-color: #888;
    172 }
    173 
    174 input:focus::-webkit-input-placeholder {
    175   opacity: 0;
    176 }
    177 input:focus::-moz-placeholder {
    178   opacity: 0;
    179 }
    180 input:focus::placeholder {
    181   opacity: 0;
    182 }
    183 input:focus:-moz-placeholder {
    184   opacity: 0;
    185 }
    186 input:focus:-ms-input-placeholder {
    187   opacity: 0;
    188 }
    189 
    190 .searchbar {
    191   width: 40%;
    192   margin: 40px auto 100px;
    193 }
    194 
    195 .searchbar input[type="text"] {
    196   width: 90%;
    197   margin: auto;
    198   font-size: 1.1em;
    199   text-align: center;
    200   margin-bottom: 10px;
    201 }
    202 
    203 .searchbar input[type="text"]::placeholder {
    204   text-align: center;
    205 }
    206 
    207 .searchbar > h3 {
    208   font-size: 200%;
    209   font-weight: bold;
    210   color: #1182db;
    211   margin-bottom: 10px;
    212 }
    213 
    214 /* Section */
    215 section {
    216   background-color: #2e3031;
    217   width: 60%;
    218   margin: 30px auto;
    219   padding: 15px 15px;
    220   text-align: center;
    221   box-shadow: 0 6px 15px 0 #222;
    222   border-radius: 4px;
    223 }
    224 
    225 section.footer {
    226   opacity: 0.5;
    227   color: #bcb7b0;
    228 }
    229 
    230 section.footer:hover {
    231   opacity: 1;
    232 }
    233 
    234 section.footer .version {
    235   font-size: 80%;
    236 }
    237 
    238 section > h2 {
    239   font-size: 200%;
    240   font-weight: bold;
    241 }
    242 
    243 /* Buttons */
    244 button {
    245   line-height: 1.9em;
    246   color: #fff;
    247   font-weight: bold;
    248   vertical-align: middle;
    249   padding: 6px 12px;
    250   margin: 12px auto 0px;
    251   border-radius: 4px;
    252   border: 1px solid transparent;
    253   background: #2196f3 none repeat scroll 0% 0%;
    254   cursor: pointer;
    255   width: calc(20% - 4px);
    256 }
    257 
    258 button.small {
    259   width: auto;
    260   line-height: 1.2em;
    261 }
    262 
    263 button:hover {
    264   background: #49afff;
    265 }
    266 
    267 .description {
    268   margin: 10px;
    269   color: #bcb7b0;
    270 }
    271 
    272 h5 {
    273   margin: 20px;
    274   font-weight: bold;
    275   color: #2196f3;
    276 }
    277 
    278 form {
    279   margin-bottom: 6px;
    280 }
    281 
    282 .parameters label::first-letter {
    283   text-transform: capitalize;
    284 }
    285 
    286 .parameters label::after {
    287   content: " :";
    288 }
    289 
    290 .info {
    291   cursor: help;
    292   opacity: 0.5;
    293   width: 24px;
    294   height: 24px;
    295   font-size: 16px;
    296   font-weight: bold;
    297   font-style: italic;
    298   line-height: 22px;
    299   text-align: center;
    300   color: #fff;
    301   background-image: radial-gradient(#49afff, #1182db);
    302   -webkit-border-radius: 16px;
    303   -moz-border-radius: 16px;
    304   border-radius: 16px;
    305 }
    306 
    307 .info:hover {
    308   opacity: 1;
    309 }
    310 
    311 @supports (display: grid) {
    312   .parameters {
    313     display: grid;
    314     padding: 12px 0;
    315     grid-template-columns: 40% max-content 24px;
    316     grid-column-gap: 10px;
    317     grid-row-gap: 5px;
    318   }
    319 
    320   .parameters label {
    321     text-align: right;
    322     line-height: 1.5em;
    323     color: #bcb7b0;
    324   }
    325 
    326   .parameters label::before {
    327     content: none;
    328   }
    329 
    330   .parameters input[type="text"],
    331   .parameters input[type="number"],
    332   .parameters input[type="checkbox"],
    333   .parameters select {
    334     margin-left: 0;
    335   }
    336 
    337   .parameters input[type="text"],
    338   .parameters input[type="number"] {
    339     width: auto;
    340     color: #2e3031;
    341   }
    342 
    343   .parameters input[type="checkbox"] {
    344     width: 20px;
    345     height: 20px;
    346   }
    347 } /* @supports (display: grid) */
    348 
    349 .maintainer {
    350   color: #bcb7b0;
    351   font-size: 70%;
    352   text-align: right;
    353 }
    354 
    355 .secure-warning {
    356   background-color: #ffc600;
    357   color: #393d3e;
    358   box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.3);
    359   border-radius: 2px;
    360   border: 1px solid transparent;
    361   width: 80%;
    362   margin: auto;
    363   margin-bottom: 6px;
    364 }
    365 
    366 form {
    367   display: none;
    368 }
    369 
    370 select {
    371   padding: 5px 10px;
    372   margin-left: 8px;
    373 }
    374 
    375 h5 {
    376   display: none;
    377 }
    378 
    379 /* Show more / less */
    380 .showmore-box {
    381   display: none;
    382 }
    383 
    384 .showmore,
    385 .showless {
    386   color: #e7e7e7;
    387   cursor: pointer;
    388 }
    389 .showmore:hover,
    390 .showless:hover {
    391   color: #fff;
    392   cursor: pointer;
    393 }
    394 
    395 .showmore-box:checked ~ .showmore {
    396   display: none;
    397 }
    398 
    399 .showmore-box:not(:checked) ~ .showless {
    400   display: none;
    401 }
    402 
    403 .showmore-box:checked ~ form,
    404 .showmore-box:checked ~ h5 {
    405   display: block;
    406 }
    407 
    408 /* Additional styles for error pages */
    409 .exception-message {
    410   background-color: #c00000;
    411   color: #ffffff;
    412   font-weight: bold;
    413   box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.3);
    414   border-radius: 2px;
    415   border: 1px solid transparent;
    416   width: 80%;
    417   margin: auto;
    418   margin-bottom: 6px;
    419 }
    420 
    421 .advice {
    422   margin-left: auto;
    423   margin-right: auto;
    424   display: table;
    425 }
    426 
    427 .advice > li {
    428   text-align: left;
    429 }
    430 
    431 @media screen and (max-width: 767px) {
    432   body {
    433     font-size: 75%;
    434   }
    435 
    436   header > div.logo {
    437     background-image: url(logo_300px.png);
    438     width: 300px;
    439     height: 89px;
    440   }
    441 
    442   header > section.warning {
    443     width: 90%;
    444   }
    445 
    446   header > section.critical-warning {
    447     width: 90%;
    448   }
    449 
    450   .searchbar {
    451     width: 90%;
    452     margin: 0 auto;
    453   }
    454 
    455   section {
    456     width: 90%;
    457     margin: 10px auto;
    458     overflow: hidden;
    459   }
    460 
    461   button {
    462     display: inline-block;
    463     width: 40%;
    464     padding: 5px auto;
    465     margin: 3px auto 0;
    466   }
    467 
    468   .info {
    469     display: none;
    470   }
    471 
    472   @supports (display: grid) {
    473     .parameters {
    474       grid-template-columns: auto auto;
    475       grid-column-gap: 5px;
    476     }
    477 
    478     .parameters label {
    479       line-height: 2em;
    480       word-break: break-word;
    481     }
    482   } /* @supports (display: grid) */
    483 
    484   .secure-warning {
    485     width: 100%;
    486   }
    487 }