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