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