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