src/assets/css/main.css

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