src/assets/css/main.css

   1 .navbar-toggler {
   2   border: 0px;
   3 }
   4
   5 .navbar-expand-lg .navbar-nav .nav-link {
   6   padding-right: 0.75rem !important;
   7   padding-left: 0.75rem !important;
   8 }
   9
  10 .pointer {
  11   cursor: pointer;
  12 }
  13
  14 .pointer-events {
  15   pointer-events: auto !important;
  16 }
  17
  18 .not-allowed {
  19   cursor: not-allowed;
  20 }
  21
  22 .no-click {
  23   pointer-events: none;
  24   opacity: 0.65;
  25 }
  26
  27 .upvote:hover {
  28   color: var(--info);
  29 }
  30
  31 .upvote {
  32   margin-bottom: -5px;
  33 }
  34
  35 .downvote:hover {
  36   color: var(--danger);
  37 }
  38
  39 .downvote {
  40   margin-top: -10px;
  41 }
  42
  43 .custom-select {
  44   -moz-appearance: none;
  45 }
  46
  47 .md-div p {
  48   overflow: hidden;
  49   text-overflow: ellipsis;
  50 }
  51
  52 .md-div p:last-child {
  53   margin-bottom: 0px;
  54 }
  55
  56 .md-div img {
  57   max-height: 40vh;
  58   max-width: 100%;
  59   height: auto;
  60 }
  61
  62 .md-div h1 {
  63   font-size: 2rem;
  64 }
  65
  66 .md-div h2 {
  67   font-size: 1.8rem;
  68 }
  69
  70 .md-div h3 {
  71   font-size: 1.6rem;
  72 }
  73
  74 .md-div h4 {
  75   font-size: 1.4rem;
  76 }
  77
  78 .md-div h5 {
  79   font-size: 1.2rem;
  80 }
  81
  82 .md-div table {
  83   border-collapse: collapse;
  84   width: 100%;
  85   margin-bottom: 1rem;
  86   border: 1px solid var(--dark);
  87 }
  88
  89 .md-div table th,
  90 .md-div table td {
  91   padding: 0.3rem;
  92   vertical-align: top;
  93   border-top: 1px solid var(--dark);
  94   border: 1px solid var(--dark);
  95 }
  96
  97 .md-div table thead th {
  98   vertical-align: bottom;
  99   border-bottom: 2px solid var(--dark);
 100 }
 101
 102 .md-div table tbody + tbody {
 103   border-top: 2px solid var(--dark);
 104 }
 105
 106 .vote-bar {
 107   margin-top: -6.5px;
 108 }
 109
 110 .post-title {
 111   line-height: 1;
 112 }
 113
 114 .post-title a:visited {
 115   color: var(--gray) !important;
 116 }
 117
 118 .icon {
 119   display: inline-grid;
 120   display: inline-flex;
 121   width: 1em;
 122   height: 1em;
 123   stroke-width: 0;
 124   stroke: currentColor;
 125   fill: currentColor;
 126   vertical-align: middle;
 127   align-self: center;
 128   -webkit-touch-callout: none;
 129   -webkit-user-select: none;
 130   -khtml-user-select: none;
 131   -moz-user-select: none;
 132   -ms-user-select: none;
 133   user-select: none;
 134 }
 135
 136 .icon-emoji {
 137   width: 4em;
 138   height: auto;
 139   max-height: inherit;
 140 }
 141
 142 .icon-emoji-admin {
 143   max-width: 24px;
 144   max-height: 24px;
 145   display: inline-block;
 146 }
 147
 148 .icon-inline {
 149   margin-bottom: 2px;
 150 }
 151
 152 .emoji-picker-container {
 153   position: absolute;
 154   top: 30px;
 155   z-index: 1000;
 156   transform: translateX(-50%);
 157 }
 158
 159 @media only screen and (max-width: 992px) {
 160   .emoji-picker-container {
 161     width: 100vw;
 162     transform: translateX(0%);
 163     position: fixed;
 164     left: 0;
 165   }
 166
 167   .emoji-picker-container > section {
 168     width: 100% !important;
 169   }
 170 }
 171
 172 .click-away-container {
 173   position: fixed;
 174   top: 0;
 175   left: 0;
 176   right: 0;
 177   bottom: 0;
 178   background-color: rgba(0, 0, 0, 0.3);
 179   z-index: 999;
 180 }
 181
 182 .spinner-large {
 183   display: grid;
 184   display: block;
 185   margin: 1em auto;
 186   width: 2em;
 187   height: 2em;
 188 }
 189
 190 .spin {
 191   animation: spins 2s linear infinite;
 192 }
 193
 194 @keyframes spins {
 195   0% {
 196     transform: rotate(0deg);
 197   }
 198
 199   100% {
 200     transform: rotate(359deg);
 201   }
 202 }
 203
 204 .dropdown-content {
 205   position: absolute;
 206   background-color: var(--light);
 207   min-width: 160px;
 208   box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
 209   z-index: 2000;
 210 }
 211
 212 blockquote {
 213   border-left: 2px solid var(--secondary);
 214   margin: 0.5em 5px;
 215   padding: 0.1em 5px;
 216 }
 217
 218 .mouse-icon {
 219   margin-top: -4px;
 220 }
 221
 222 .new-comments {
 223   max-height: 50vh;
 224   overflow-x: hidden;
 225   overflow-y: auto;
 226 }
 227
 228 .thumbnail {
 229   object-fit: cover;
 230   min-height: 60px;
 231   max-height: 80px;
 232   width: 100%;
 233 }
 234
 235 .thumbnail svg {
 236   height: 1.25rem;
 237   width: 1.25rem;
 238 }
 239
 240 .no-s-hows {
 241   position: absolute !important;
 242   top: -9999px !important;
 243   left: -9999px !important;
 244 }
 245
 246 hr {
 247   border-top: 1px solid var(--light);
 248 }
 249
 250 .emoji {
 251   max-height: 1.2em !important;
 252 }
 253
 254 .text-wrap-truncate {
 255   overflow: hidden;
 256   text-overflow: ellipsis;
 257 }
 258
 259 .text-xs-center {
 260   text-align: center;
 261 }
 262
 263 .overflow-wrap-anywhere {
 264   overflow-wrap: anywhere;
 265 }
 266
 267 #app {
 268   display: flex;
 269   flex-direction: column;
 270   min-height: 100vh;
 271 }
 272
 273 .fl-1 {
 274   flex: 1;
 275 }
 276
 277 .img-blur {
 278   filter: blur(10px);
 279   -webkit-filter: blur(10px);
 280   -moz-filter: blur(10px);
 281   -o-filter: blur(10px);
 282   -ms-filter: blur(10px);
 283 }
 284
 285 .img-expanded {
 286   max-height: 90vh;
 287 }
 288
 289 .btn-animate:active {
 290   transform: scale(1.2);
 291   -webkit-transform: scale(1.2);
 292   -ms-transform: scale(1.2);
 293 }
 294
 295 .mini-overlay {
 296   position: absolute;
 297   top: 0;
 298   right: 0;
 299   padding: 2px;
 300   height: 1.5em;
 301   width: 1.5em;
 302   background: rgba(0, 0, 0, 0.4);
 303   background-color: rgba(0, 0, 0, 0.4);
 304   border-bottom-left-radius: 0.25rem !important;
 305   border-top-right-radius: 0.25rem !important;
 306 }
 307
 308 .link-overlay:hover {
 309   transition: 0.1s;
 310   -webkit-transition: 0.1s;
 311   opacity: 1;
 312 }
 313
 314 .link-overlay {
 315   transition: opacity 0.1s ease-in-out;
 316   -webkit-transition: opacity 0.1s ease-in-out;
 317   position: absolute;
 318   opacity: 0;
 319   left: 0;
 320   height: 100%;
 321   width: 100%;
 322   padding: 10px;
 323   background: rgba(0, 0, 0, 0.6);
 324   background-color: rgba(0, 0, 0, 0.6);
 325 }
 326
 327 .placeholder {
 328   height: 50px;
 329   width: 50px;
 330 }
 331
 332 .unselectable {
 333   -webkit-touch-callout: none;
 334   -webkit-user-select: none;
 335   -khtml-user-select: none;
 336   -moz-user-select: none;
 337   -ms-user-select: none;
 338   user-select: none;
 339 }
 340
 341 .list-inline-item-action {
 342   display: inline-block;
 343 }
 344
 345 .list-inline-item-action:not(:last-child) {
 346   margin-right: 1.2rem;
 347 }
 348
 349 pre {
 350   white-space: pre-wrap;
 351   word-break: keep-all;
 352 }
 353
 354 .form-control.search-input {
 355   float: right !important;
 356   transition: width 0.2s ease-out 0s !important;
 357 }
 358
 359 br.big {
 360   display: block;
 361   content: "";
 362   margin-top: 1rem;
 363 }
 364
 365 .banner {
 366   object-fit: cover;
 367   width: 100%;
 368   max-height: 240px;
 369 }
 370
 371 .avatar-overlay {
 372   width: 20%;
 373   height: 20%;
 374   max-width: 120px;
 375   max-height: 120px;
 376 }
 377
 378 .avatar-pushup {
 379   margin-top: -60px;
 380 }
 381
 382 .img-icon {
 383   width: 2rem;
 384   height: 2rem;
 385 }
 386
 387 .tribute-container ul {
 388   margin: 0;
 389   margin-top: 2px;
 390   padding: 0;
 391   list-style: none;
 392   background: var(--light);
 393 }
 394
 395 .tribute-container li {
 396   padding: 5px 5px;
 397   cursor: pointer;
 398 }
 399
 400 .tribute-container li.highlight {
 401   background: var(--primary);
 402 }
 403
 404 .tribute-container li span {
 405   font-weight: bold;
 406 }
 407
 408 .tribute-container li.no-match {
 409   cursor: default;
 410 }
 411
 412 .tribute-container .menu-highlighted {
 413   font-weight: bold;
 414 }
 415
 416 .honeypot {
 417   display: none !important;
 418 }
 419
 420 .slight-radius {
 421   border-radius: 4px;
 422 }
 423
 424 .modlog-choices-font-size {
 425   font-size: 0.9375rem !important;
 426 }
 427
 428 .preview-lines {
 429   overflow: hidden;
 430   text-overflow: ellipsis;
 431   display: -webkit-box;
 432   -webkit-line-clamp: 3;
 433   -webkit-box-orient: vertical;
 434 }
 435 .lang-select-action {
 436   width: 100px;
 437 }
 438
 439 .lang-select-action:focus {
 440   width: auto;
 441 }
 442 em-emoji-picker {
 443   width: 100%;
 444 }