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