universe

Universe
git clone https://git.dasho.dev/universe.git
Log | Files | Refs | Submodules | README

popout.css (7886B)

      1 input[type="radio"][name="popout_btn"][value="open"] {
      2  position: absolute;
      3  top: 0;
      4  left: 0;
      5  width: 100%;
      6  height: 100%;
      7  cursor: pointer;
      8  opacity: 0;
      9  margin: 0;
     10  padding: 0;
     11 }
     12 
     13 input[type="radio"][name="popout_btn"][value="close"] {
     14  display: none;
     15 }
     16 
     17 input[type="radio"][name="popout_btn"][value="open"]:checked
     18  ~ input[type="radio"][name="popout_btn"][value="close"] {
     19  display: block;
     20  width: 100%;
     21  height: 100%;
     22  left: 0;
     23  top: 0;
     24  z-index: 999998;
     25  position: fixed;
     26  opacity: 0;
     27  margin: 0;
     28  padding: 0;
     29 }
     30 
     31 .popout-bg {
     32  position: fixed;
     33  top: 0;
     34  left: 0;
     35  width: 100%;
     36  height: 100%;
     37  z-index: 999997;
     38  background: #000;
     39  cursor: pointer;
     40  display: none;
     41 }
     42 
     43 input[type="radio"][name="popout_btn"][value="open"]:checked ~ .popout-bg {
     44  opacity: 0.3;
     45  display: block;
     46 }
     47 
     48 input[type="radio"][name="popout_btn"][value="open"]:checked ~ .popout-box {
     49  display: block;
     50 }
     51 
     52 .popout-box {
     53  position: fixed;
     54  z-index: 999999;
     55  width: 500px;
     56  height: auto;
     57  padding: 20px 20px 0 20px;
     58  background: #fff;
     59  color: #000;
     60  display: none;
     61  -webkit-transform: translate(-50%, -50%);
     62  -moz-transform: translate(-50%, -50%);
     63  transform: translate(-50%, -50%);
     64  top: 50%;
     65  left: 50%;
     66  margin: 0 auto;
     67  cursor: initial;
     68  overflow-y: auto;
     69  text-align: left;
     70  font-size: 14px;
     71  font-weight: normal;
     72  max-height: 80%;
     73  max-width: 90%;
     74  overflow-x: hidden;
     75  text-transform: none;
     76  line-height: 1;
     77 }
     78 
     79 .popout-box.restricted {
     80  max-height: 400px;
     81 }
     82 
     83 .popout-box.login {
     84  height: 500px;
     85  max-height: 640px;
     86  width: 700px;
     87  max-width: 95%;
     88  border-radius: 10px;
     89  padding: 0;
     90 }
     91 
     92 .popout-box.login > form {
     93  position: absolute;
     94  right: 0;
     95  top: 50%;
     96  width: 70%;
     97  padding: 0 30px;
     98  transform: translateY(-50%);
     99 }
    100 
    101 .popout-box.login > form > .heading {
    102  color: #9b59b6;
    103  font-size: 22px;
    104  text-align: center;
    105  margin-bottom: 20px;
    106 }
    107 
    108 .popout-box.login > form > .inp {
    109  display: block;
    110  margin-bottom: 15px;
    111 }
    112 
    113 .popout-box.login > form > .inp > label {
    114  font-size: 16px;
    115  margin-bottom: 5px;
    116  display: block;
    117 }
    118 
    119 .popout-box.login > form > .inp input {
    120  display: block;
    121  width: 100%;
    122  height: 40px;
    123  line-height: 40px;
    124  padding: 0 15px;
    125  margin: 0;
    126  border: 1px solid #ccc;
    127 }
    128 
    129 .popout-box.login > form > .inp input:focus {
    130  border-color: #9b59b6;
    131 }
    132 
    133 .popout-box.login > form button.standardBtn {
    134  background: #9b59b6 !important;
    135 }
    136 
    137 .popout-box.login > form select {
    138  display: block;
    139  width: 100%;
    140  height: 40px;
    141  line-height: 40px;
    142  padding: 0 0 0 15px;
    143  margin: 0;
    144  border: 1px solid #ccc;
    145 }
    146 
    147 .popout-box.login > form select:focus {
    148  border-color: #9b59b6;
    149 }
    150 
    151 .popout-box.login > form > .captcha_img {
    152  display: block;
    153  font-size: 0;
    154  margin-bottom: 15px;
    155 }
    156 
    157 .popout-box.login > form > .captcha_img > img {
    158  display: inline-block;
    159  vertical-align: top;
    160  width: 150px;
    161  height: 50px;
    162 }
    163 
    164 .popout-box.login > form > .captcha_img > input {
    165  display: inline-block;
    166  vertical-align: top;
    167  width: calc(100% - 150px);
    168  height: 50px;
    169  line-height: 50px;
    170  border: 1px solid #ccc;
    171  padding: 0 15px;
    172  font-size: 16px;
    173 }
    174 
    175 .popout-box.login > form > .captcha_img > input:focus {
    176  border-color: #9b59b6;
    177 }
    178 
    179 .popout-box.login > form button.standardBtn {
    180  display: block;
    181  width: 100%;
    182  height: 50px;
    183  margin: 0;
    184  text-align: center;
    185  line-height: 50px;
    186  padding: 0;
    187  border-radius: 5px;
    188  font-size: 16px;
    189 }
    190 
    191 .popout-box.fluid {
    192  width: auto;
    193  min-width: 400px;
    194 }
    195 
    196 .popout-box.fluid > .captcha-field {
    197  font-size: 0;
    198  margin-bottom: 15px;
    199 }
    200 
    201 .popout-box.fluid > .captcha-field > input {
    202  padding: 0 10px;
    203  font-size: 16px;
    204  border: 1px solid #efefed;
    205 }
    206 
    207 .popout-box.fluid > .captcha-field > input:focus,
    208 .popout-box.fluid > .captcha-field > input:active {
    209  border-color: #9b59b6;
    210 }
    211 
    212 .popout-box.fluid textarea {
    213  font-family: roboto, helvetica, arial, tahoma, verdana;
    214  border: 1px solid #efefed;
    215  width: 100%;
    216  max-width: 100%;
    217  display: block;
    218  padding: 10px;
    219  font-size: 14px;
    220  line-height: 20px;
    221  color: #666;
    222  margin-bottom: 15px;
    223  min-height: 150px;
    224  min-width: calc(400px - 40px);
    225 }
    226 
    227 .popout-box.fluid textarea:focus,
    228 .popout-box.fluid textarea:active {
    229  border-color: #9b59b6;
    230  color: #000;
    231 }
    232 
    233 .popout-box.fluid button.standardBtn {
    234  display: inline-block;
    235  vertical-align: middle;
    236  margin-right: 15px;
    237  margin-bottom: 0;
    238 }
    239 
    240 .popout-box.fluid button.standardBtn ~ a {
    241  display: inline-block;
    242  vertical-align: middle;
    243  font-size: 14px;
    244  color: #9b59b6;
    245  text-decoration: none;
    246 }
    247 
    248 .popout-box.centered {
    249  text-align: center;
    250 }
    251 
    252 .popout-box.centered button {
    253  margin-left: auto;
    254  margin-right: auto;
    255 }
    256 
    257 .popout-box.reporting {
    258  font-size: 0;
    259  max-width: 400px;
    260 }
    261 
    262 .popout-box.reporting select {
    263  display: inline-block;
    264  vertical-align: top;
    265  width: calc(100% - 95px);
    266  max-width: calc(100% - 95px);
    267  height: 35px;
    268  line-height: 35px;
    269  padding: 0 10px;
    270  margin: 0;
    271  border: 1px solid #efefed;
    272  border-right: none;
    273 }
    274 
    275 .popout-box.reporting button {
    276  display: inline-block;
    277  vertical-align: top;
    278  padding: 0;
    279  width: 95px;
    280  text-align: center;
    281  margin: 0;
    282 }
    283 
    284 .popout-box p {
    285  margin-bottom: 15px;
    286  line-height: 18px;
    287 }
    288 
    289 .popout-box:after {
    290  display: block;
    291  width: 100%;
    292  height: 25px;
    293  content: "";
    294 }
    295 
    296 .popout-box > pre {
    297  border-color: #333;
    298  color: #333;
    299 }
    300 
    301 .popout-box > .heading {
    302  display: block;
    303  margin-bottom: 15px;
    304  font-size: 16px;
    305  color: #000;
    306  font-family: roboto, verdana, helvetica, arial, tahoma;
    307  text-align: center;
    308 }
    309 
    310 .popout-box > .field {
    311  display: block;
    312  margin-bottom: 15px;
    313 }
    314 
    315 .popout-box > .field > label {
    316  display: block;
    317  margin-bottom: 10px;
    318  font-size: 14px;
    319 }
    320 
    321 .popout-box > .field > select,
    322 .popout-box > .field > input[type="text"],
    323 .popout-box > .field > input[type="number"],
    324 .popout-box > .field > textarea {
    325  display: block;
    326  width: 100%;
    327  border: 1px solid #efefed;
    328  padding: 0 10px;
    329  line-height: 40px;
    330  height: 40px;
    331  font-size: 14px;
    332  font-family: roboto, helvetica, arial, tahoma, verdana;
    333 }
    334 
    335 .popout-box > .field > select:focus,
    336 .popout-box > .field > select:active,
    337 .popout-box > .field > input[type="text"]:focus,
    338 .popout-box > .field > input[type="text"]:active,
    339 .popout-box > .field > input[type="number"]:focus,
    340 .popout-box > .field > input[type="number"]:active,
    341 .popout-box > .field > textarea:focus,
    342 .popout-box > .field > textarea:active {
    343  border-color: #9b59b6;
    344 }
    345 
    346 .popout-box > .field > textarea {
    347  line-height: 20px;
    348  height: 150px;
    349  padding: 10px;
    350  max-width: 100%;
    351  min-width: 100%;
    352  min-height: 150px;
    353 }
    354 
    355 .popout-box.crosspost label {
    356  font-weight: bold;
    357  display: block;
    358  font-size: 14px;
    359  margin-bottom: 5px;
    360  width: 100%;
    361  text-align: left;
    362 }
    363 
    364 .popout-box.crosspost input[type="text"] {
    365  display: block;
    366  width: 100%;
    367  padding: 0 10px;
    368  line-height: 40px;
    369  height: 40px;
    370  font-size: 14px;
    371  color: #000;
    372  border: 1px solid #ccc;
    373  margin-bottom: 10px;
    374 }
    375 
    376 .popout-box.crosspost input[type="text"]:focus {
    377  border-color: #9b59b6;
    378 }
    379 
    380 .popout-box.discover > input[type="text"] {
    381  display: block;
    382  width: 100%;
    383  padding: 0 10px;
    384  line-height: 40px;
    385  height: 40px;
    386  font-size: 14px;
    387  color: #000;
    388  border: 1px solid #ccc;
    389  margin-bottom: 10px;
    390 }
    391 
    392 .popout-box.discover > input[type="text"]:focus {
    393  border-color: #9b59b6;
    394 }
    395 
    396 .popout-box.rules-popout .rule-output {
    397  max-width: 600px;
    398  width: 100%;
    399  padding: 10px;
    400  border: 1px solid #efefef;
    401  font-size: 16px;
    402  margin: 10px auto;
    403  height: 300px;
    404  overflow-y: auto;
    405 }