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