LibreY

- privacy respecting meta search engine
git clone git://git.acid.vegas/LibreY.git
styles.css (9908B)
      1 html {
      2     color: var(--main-fg);
      3     background-color: var(--main-bg);
      4     font-family: Arial, Helvetica, sans-serif;
      5     font-size: 16px;
      6 }
      7 
      8 body {
      9     margin: 0;
     10 }
     11 
     12 input,
     13 button {
     14     outline: none;
     15 }
     16 
     17 button {
     18     cursor: pointer;
     19 }
     20 
     21 p {
     22     font-size: 18px;
     23     color: var(--result-fg);
     24 }
     25 
     26 a,
     27 .text-result-wrapper a:hover {
     28     text-decoration: none;
     29 }
     30 
     31 .text-result-wrapper a:visited h2,
     32 .special-result-container a,
     33 .did-you-mean a,
     34 .sub-search-button-wrapper a,
     35 .sub-search-button-wrapper a:visited {
     36     color: #bd93f9;
     37 }
     38 
     39 .sub-search-button-wrapper .active {
     40     border-bottom: 2px #bd93f9 solid;
     41     padding-bottom: 10px;
     42 }
     43 
     44 a:hover,
     45 .text-result-wrapper h2:hover {
     46     text-decoration: underline;
     47 }
     48 
     49 .search-container {
     50     text-align: center;
     51     margin-top: 10%;
     52 }
     53 
     54 .search-container h1 {
     55     font-size: 70px;
     56 }
     57 
     58 .search-container input,
     59 .sub-search-container input {
     60     width: 500px;
     61     color: var(--search-container-text-color);
     62     background-color: var(--search-container-background-color);
     63     padding: 10px;
     64     font-size: inherit;
     65     font-family: sans-serif;
     66     border: 1px solid var(--search-container-background-border);
     67     border-radius: 25px;
     68 }
     69 
     70 .search-button-wrapper button,
     71 .misc-container button,
     72 .misc-container select {
     73     color: inherit;
     74     background-color: var(--button-bg);
     75     font-size: 14px;
     76     border: 1px solid var(--main-bg);
     77     border-radius: 4px;
     78     padding: 13px 10px 13px 10px;
     79 }
     80 
     81 .search-button-wrapper button {
     82 
     83     margin: 30px 60px 0px 60px;
     84 }
     85 
     86 .sub-search-container {
     87     background-color: var(--search-form-background-color);
     88     width: 100%;
     89     border-bottom: 1px solid var(--border);
     90 }
     91 
     92 .sub-search-container hr {
     93     opacity: 0;
     94 }
     95 
     96 .sub-search-container input {
     97     margin-bottom: 20px;
     98     width: 580px;
     99     position: relative;
    100     left: 140px;
    101     margin: 18px;
    102 }
    103 
    104 .logomobile {
    105     position: absolute;
    106     margin-top: 0px;
    107     top: 25px;
    108     left: 20px;
    109 }
    110 
    111 .no-decoration {
    112     text-decoration: none;
    113     color: var(--main-fg);
    114 }
    115 
    116 .no-decoration:hover {
    117     text-decoration: none;
    118 }
    119 
    120 .sub-search-button-wrapper {
    121     margin-left: 165px;
    122     margin-bottom: 10px;
    123 }
    124 
    125 .search-button-wrapper button:hover,
    126 .misc-container button:hover {
    127     border: 1px solid #5f6368;
    128     cursor: pointer;
    129 }
    130 
    131 .sub-search-button-wrapper i {
    132     vertical-align: middle;
    133     margin-right: 5px;
    134 }
    135 
    136 .sub-search-button-wrapper a {
    137     border: none;
    138     background-color: inherit;
    139     font-size: 15px;
    140     margin-right: 20px;
    141     cursor: pointer;
    142     text-decoration: none;
    143 }
    144 
    145 .sub-search-button-wrapper img {
    146     vertical-align: middle;
    147     margin-right: 5px;
    148     width: 20px;
    149 }
    150 
    151 .misc-container {
    152     text-align: center;
    153     word-wrap: break-word;
    154     width: 460px;
    155     margin-left: auto;
    156     margin-right: auto;
    157     margin-bottom: 100px;
    158 }
    159 
    160 .misc-container div {
    161     margin-bottom: 30px;
    162 }
    163 
    164 .misc-container button {
    165     margin-right: 10px;
    166     margin-left: 10px;
    167 }
    168 
    169 .misc-container a {
    170     color: inherit;
    171     text-decoration: underline;
    172 }
    173 
    174 .settings-textbox-container div {
    175     text-align: left;
    176     margin-bottom: 25px;
    177 }
    178 
    179 .settings-textbox-container input {
    180     color: inherit;
    181     background-color: inherit;
    182     padding: 5px;
    183     font-size: inherit;
    184     font-family: inherit;
    185     border: 1px solid #5f6368;
    186     border-radius: 5px;
    187     float: right;
    188 }
    189 
    190 .text-result-container,
    191 #time,
    192 .next-page-button-wrapper,
    193 .did-you-mean {
    194     margin-left: 170px;
    195 }
    196 
    197 .text-result-container {
    198     margin-bottom: 100px;
    199 }
    200 
    201 .special-result-container {
    202     padding: 10px;
    203     border: 1px solid var(--special-result-border);
    204     width: 500px;
    205     border-radius: 8px;
    206     background: var(--special-text-background);
    207     color: var(--special-text-color);
    208     margin-left: 840px;
    209     margin-top: 0px;
    210     position: absolute;
    211 }
    212 
    213 .text-result-wrapper {
    214     max-width: 550px;
    215     word-wrap: break-word;
    216     margin-bottom: 35px;
    217 }
    218 
    219 .text-result-wrapper a {
    220     font-size: 14px;
    221     color: var(--result-fg);
    222 }
    223 
    224 .video-img {
    225     height: 115px;
    226     border-radius: 12px;
    227 }
    228 
    229 .text-result-wrapper h2 {
    230     font-size: 20px;
    231     color: var(--result-link-fg);
    232     padding-top: 5px;
    233     margin-top: 1px;
    234 }
    235 
    236 .special-result-container a {
    237     display: flex;
    238     margin-top: 10px;
    239     font-size: 14px;
    240 }
    241 
    242 .special-result-container img {
    243     display: flex;
    244     max-width: 60%;
    245     max-height: 200px;
    246     padding-bottom: 10px;
    247     margin-left: auto;
    248     margin-right: auto;
    249 }
    250 
    251 .next-page-button-wrapper {
    252     margin-top: -40px;
    253     margin-bottom: 100px;
    254 }
    255 
    256 .next-page-button-wrapper button {
    257     border: none;
    258     background-color: inherit;
    259     color: var(--result-link-fg);
    260     font-size: 18px;
    261     margin-right: 8px;
    262 }
    263 
    264 .next-page-button-wrapper .page {
    265     display: inline;
    266 }
    267 
    268 .image-result-container {
    269     display: flex;
    270     flex-wrap: wrap;
    271     grid-gap: 1.5rem;
    272     justify-items: center;
    273     margin-left: 9%;
    274     margin-right: 9%;
    275     padding: 0;
    276     margin-bottom: 50px;
    277 }
    278 
    279 a[title] {
    280     flex-grow: 1;
    281     height: 12rem;
    282 }
    283 
    284 .image-result-container img {
    285     margin: 0px;
    286     height: 100%;
    287     width: 100%;
    288     object-fit: cover;
    289     vertical-align: bottom;
    290 }
    291 
    292 
    293 .git-container {
    294     right: 0;
    295 }
    296 
    297 .git-container,
    298 .footer-container {
    299     position: fixed;
    300     bottom: 0;
    301 }
    302 
    303 .footer-container {
    304     width: 100vw;
    305     left: 0;
    306     background-color: var(--footer-bg);
    307     padding: 10px;
    308     border-top: 1px solid var(--border);
    309     text-align: center;
    310 }
    311 
    312 .git-container a {
    313     font-size: 10px;
    314 }
    315 
    316 .git-container a,
    317 .footer-container a {
    318     color: var(--footer-fg);
    319 }
    320 
    321 .footer-container a {
    322     margin-right: 30px;
    323 }
    324 
    325 .hide {
    326     display: none;
    327 }
    328 
    329 .Y {
    330     color: #bd93f9;
    331 }
    332 
    333 .seeders {
    334     color: #50fa7b;
    335 }
    336 
    337 .leechers {
    338     color: #ff79c6;
    339 }
    340 
    341 
    342 /* donate css start */
    343 
    344 .donate-container {
    345   width: 700px;
    346   margin-left: auto;
    347   margin-right: auto;
    348   margin-bottom: 100px;
    349 }
    350 
    351 .flexbox-column {
    352   display: flex;
    353   flex-direction: column;
    354   justify-content: space-between;
    355   align-items: center;
    356   gap: 10px;
    357 }
    358 
    359 .inner-wrap {
    360   width: 500px;
    361   padding: 20px;
    362 }
    363 
    364 .qr-box {
    365   background-color: var(--search-container-background-color);
    366   border: 1px solid var(--search-container-background-border);
    367   border-radius: 10px 0px 0px 10px;
    368   width: 100%;
    369 
    370   display: flex;
    371   word-wrap: break-word;
    372   align-items: center;
    373   justify-content: space-between;
    374 }
    375 
    376 .flex-row {
    377   width: 700px;
    378   height: auto;
    379   display: flex;
    380   flex-direction: row;
    381   justify-content: space-evenly;
    382 }
    383 
    384 hr.small-line {
    385   /* background-color: #f1f3f4; */
    386   border: 2px solid var(--main-fg);
    387   height: 0px;
    388   width: 100px;
    389   margin: 30px;
    390   border-radius: 2px;
    391 }
    392 /* donate css end */
    393 
    394 
    395 @media only screen and (max-width: 1320px) {
    396     .special-result-container {
    397         position: relative;
    398         float: none;
    399         margin-left: 165px;
    400     }
    401 }
    402 
    403 /* mobile view */
    404 @media only screen and (max-width: 750px) {
    405     p {
    406         font-size: 16px;
    407     }
    408 
    409     html {
    410         font-size: 14px;
    411     }
    412 
    413     .search-container input {
    414         width: 80%;
    415     }
    416 
    417     .search-button-wrapper button {
    418         display: table-row;
    419         margin: 30px 0px 0px 0px;
    420         width: 80%;
    421     }
    422 
    423     .image-result-container {
    424         display: unset;
    425         margin: 0;
    426         padding: 0;
    427     }
    428 
    429     .image-result-container img {
    430         margin: 0 5% 5% 5%;
    431         padding: 0;
    432         width: 90%;
    433         border: none;
    434     }
    435 
    436     .git-container {
    437         display: none;
    438     }
    439 
    440     .footer-container a {
    441         margin: 10px;
    442     }
    443 
    444     .sub-search-container {
    445         margin-left: auto;
    446         margin-right: auto;
    447         text-align: center;
    448     }
    449 
    450     .sub-search-container .logo {
    451         display: none;
    452 
    453     }
    454 
    455     .logomobile {
    456         position: relative;
    457         float: none;
    458         margin-top: 0px;
    459         margin-bottom: 0px;
    460         margin-left: auto;
    461         margin-right: auto;
    462         padding: 10px;
    463         font-size: 28px;
    464         display: block;
    465         margin-top: 0px;
    466         top: 0px;
    467         left: 0px;
    468     }
    469 
    470     .sub-search-container input {
    471         width: 80%;
    472         position: relative;
    473         left: 0px;
    474         margin-top: 0px;
    475     }
    476 
    477     .sub-search-button-wrapper {
    478         margin: 0;
    479         padding: 0;
    480         display: flex;
    481         align-items: baseline;
    482     }
    483 
    484     .sub-search-button-wrapper img {
    485         margin: 0;
    486         padding: 0;
    487     }
    488 
    489     .sub-search-button-wrapper a {
    490         margin-left: auto;
    491         margin-right: auto;
    492         padding: 0;
    493         display: flex;
    494         flex-direction: column;
    495         align-items: center;
    496     }
    497 
    498     .special-result-container {
    499         position: relative;
    500         float: none;
    501         max-width: 90%;
    502         margin-left: 10px;
    503         width: auto;
    504     }
    505 
    506     .special-result-container img {
    507         max-width: 80%;
    508     }
    509 
    510     .misc-container {
    511         margin-bottom: 200px;
    512         width: 95%;
    513     }
    514 
    515     .search-container h1 {
    516         font-size: 55px;
    517     }
    518 
    519     .search-container {
    520         margin-top: 10%;
    521     }
    522 
    523     .text-result-container,
    524     #time,
    525     .next-page-button-wrapper {
    526         margin-left: 20px;
    527         max-width: 90%;
    528     }
    529 
    530     .next-page-button-wrapper {
    531         margin-top: 30px;
    532     }
    533 
    534     .text-result-container,
    535     #time,
    536     .next-page-button-wrapper,
    537     .did-you-mean {
    538         margin-left: 20px;
    539     }
    540 
    541    /* dontate css start*/
    542 
    543   .donate-container {
    544     margin-bottom: 100px;
    545     width: 95%;
    546     text-align: center;
    547   }
    548 
    549   .qr-box {
    550     display: flex;
    551     flex-direction: column;
    552     word-wrap: break-word;
    553     align-items: center;
    554     justify-content: space-between;
    555     word-wrap: break-word;
    556     height: auto;
    557   }
    558 
    559   .qr-box {
    560     border-radius: 10px;
    561     flex-direction: column;
    562     align-items: center;
    563   }
    564 
    565   .inner-wrap {
    566     width: 80%;
    567     text-align: center;
    568   }
    569 
    570   .qr-box img {
    571     width: 40%;
    572     height: auto;
    573     padding: 20px;
    574   }
    575 
    576   .flex-row {
    577     flex-direction: column;
    578     align-items: center;
    579     gap: 5px;
    580     width: 0;
    581   }
    582 
    583   .flex-row a img {
    584     width: 220px;
    585     height: auto;
    586   }
    587   /* donate css end */
    588 
    589 
    590 }