src/assets/css/main.css

   1 .navbar-toggler {
   2   border: 0px;
   3 }
   4
   5 .navbar-expand-lg .navbar-nav .nav-link {
   6   padding-right: 0.75rem !important;
   7   padding-left: 0.75rem !important;
   8 }
   9
  10 .pointer {
  11   cursor: pointer;
  12 }
  13
  14 .pointer-events {
  15   pointer-events: auto !important;
  16 }
  17
  18 .not-allowed {
  19   cursor: not-allowed;
  20 }
  21
  22 .no-click {
  23   pointer-events: none;
  24   opacity: 0.65;
  25 }
  26
  27 .upvote:hover {
  28   color: var(--info);
  29 }
  30
  31 .upvote {
  32   margin-bottom: -5px;
  33 }
  34
  35 .downvote:hover {
  36   color: var(--danger);
  37 }
  38
  39 .downvote {
  40   margin-top: -10px;
  41 }
  42
  43 .custom-select {
  44   -moz-appearance: none;
  45 }
  46
  47 .md-div p {
  48   overflow: hidden;
  49   text-overflow: ellipsis;
  50 }
  51
  52 .md-div p:last-child {
  53   margin-bottom: 0px;
  54 }
  55
  56 .md-div img {
  57   max-height: 40vh;
  58   max-width: 100%;
  59   height: auto;
  60 }
  61
  62 .md-div h1 {
  63   font-size: 2rem;
  64 }
  65 .md-div h2 {
  66   font-size: 1.8rem;
  67 }
  68 .md-div h3 {
  69   font-size: 1.6rem;
  70 }
  71 .md-div h4 {
  72   font-size: 1.4rem;
  73 }
  74 .md-div h5 {
  75   font-size: 1.2rem;
  76 }
  77
  78 .md-div table {
  79   border-collapse: collapse;
  80   width: 100%;
  81   margin-bottom: 1rem;
  82   border: 1px solid var(--dark);
  83 }
  84
  85 .md-div table th,
  86 .md-div table td {
  87   padding: 0.3rem;
  88   vertical-align: top;
  89   border-top: 1px solid var(--dark);
  90   border: 1px solid var(--dark);
  91 }
  92
  93 .md-div table thead th {
  94   vertical-align: bottom;
  95   border-bottom: 2px solid var(--dark);
  96 }
  97
  98 .md-div table tbody + tbody {
  99   border-top: 2px solid var(--dark);
 100 }
 101
 102 .vote-bar {
 103   margin-top: -6.5px;
 104 }
 105
 106 .post-title {
 107   line-height: 1;
 108 }
 109
 110 .post-title a:visited {
 111   color: var(--gray) !important;
 112 }
 113
 114 .icon {
 115   display: inline-grid;
 116   display: inline-flex;
 117   width: 1em;
 118   height: 1em;
 119   stroke-width: 0;
 120   stroke: currentColor;
 121   fill: currentColor;
 122   vertical-align: middle;
 123   align-self: center;
 124   -webkit-touch-callout: none;
 125   -webkit-user-select: none;
 126   -khtml-user-select: none;
 127   -moz-user-select: none;
 128   -ms-user-select: none;
 129   user-select: none;
 130 }
 131
 132 .icon-inline {
 133   margin-bottom: 2px;
 134 }
 135
 136 .spinner-large {
 137   display: grid;
 138   display: block;
 139   margin: 1em auto;
 140   width: 2em;
 141   height: 2em;
 142 }
 143
 144 .spin {
 145   animation: spins 2s linear infinite;
 146 }
 147
 148 @keyframes spins {
 149   0% {
 150     transform: rotate(0deg);
 151   }
 152   100% {
 153     transform: rotate(359deg);
 154   }
 155 }
 156
 157 .dropdown-content {
 158   position: absolute;
 159   background-color: var(--light);
 160   min-width: 160px;
 161   box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
 162   z-index: 2000;
 163 }
 164
 165 blockquote {
 166   border-left: 2px solid var(--secondary);
 167   margin: 0.5em 5px;
 168   padding: 0.1em 5px;
 169 }
 170
 171 .mouse-icon {
 172   margin-top: -4px;
 173 }
 174
 175 .new-comments {
 176   max-height: 50vh;
 177   overflow-x: hidden;
 178   overflow-y: auto;
 179 }
 180
 181 .thumbnail {
 182   object-fit: cover;
 183   min-height: 60px;
 184   max-height: 80px;
 185   width: 100%;
 186 }
 187
 188 .thumbnail svg {
 189   height: 1.25rem;
 190   width: 1.25rem;
 191 }
 192
 193 .no-s-hows {
 194   position: absolute !important;
 195   top: -9999px !important;
 196   left: -9999px !important;
 197 }
 198
 199 hr {
 200   border-top: 1px solid var(--light);
 201 }
 202
 203 .emoji {
 204   max-height: 1.2em !important;
 205 }
 206
 207 .text-wrap-truncate {
 208   overflow: hidden;
 209   text-overflow: ellipsis;
 210 }
 211
 212 .overflow-wrap-anywhere {
 213   overflow-wrap: anywhere;
 214 }
 215
 216 #app {
 217   display: flex;
 218   flex-direction: column;
 219   min-height: 100vh;
 220 }
 221
 222 .fl-1 {
 223   flex: 1;
 224 }
 225
 226 .img-blur {
 227   filter: blur(10px);
 228   -webkit-filter: blur(10px);
 229   -moz-filter: blur(10px);
 230   -o-filter: blur(10px);
 231   -ms-filter: blur(10px);
 232 }
 233
 234 .img-expanded {
 235   max-height: 90vh;
 236 }
 237
 238 .btn-animate:active {
 239   transform: scale(1.2);
 240   -webkit-transform: scale(1.2);
 241   -ms-transform: scale(1.2);
 242 }
 243
 244 .mini-overlay {
 245   position: absolute;
 246   top: 0;
 247   right: 0;
 248   padding: 2px;
 249   height: 1.5em;
 250   width: 1.5em;
 251   background: rgba(0, 0, 0, 0.4);
 252   background-color: rgba(0, 0, 0, 0.4);
 253   border-bottom-left-radius: 0.25rem !important;
 254   border-top-right-radius: 0.25rem !important;
 255 }
 256
 257 .link-overlay:hover {
 258   transition: 0.1s;
 259   -webkit-transition: 0.1s;
 260   opacity: 1;
 261 }
 262
 263 .link-overlay {
 264   transition: opacity 0.1s ease-in-out;
 265   -webkit-transition: opacity 0.1s ease-in-out;
 266   position: absolute;
 267   opacity: 0;
 268   left: 0;
 269   height: 100%;
 270   width: 100%;
 271   padding: 10px;
 272   background: rgba(0, 0, 0, 0.6);
 273   background-color: rgba(0, 0, 0, 0.6);
 274 }
 275
 276 .placeholder {
 277   height: 50px;
 278   width: 50px;
 279 }
 280
 281 .unselectable {
 282   -webkit-touch-callout: none;
 283   -webkit-user-select: none;
 284   -khtml-user-select: none;
 285   -moz-user-select: none;
 286   -ms-user-select: none;
 287   user-select: none;
 288 }
 289
 290 .list-inline-item-action {
 291   display: inline-block;
 292 }
 293
 294 .list-inline-item-action:not(:last-child) {
 295   margin-right: 1.2rem;
 296 }
 297
 298 pre {
 299   white-space: pre-wrap;
 300   word-break: keep-all;
 301 }
 302
 303 .form-control.search-input {
 304   float: right !important;
 305   transition: width 0.2s ease-out 0s !important;
 306 }
 307
 308 .show-input {
 309   width: 13em !important;
 310 }
 311 .hide-input {
 312   background: transparent !important;
 313   background-color: transparent !important;
 314   width: 0px !important;
 315   padding: 0 !important;
 316 }
 317
 318 br.big {
 319   display: block;
 320   content: "";
 321   margin-top: 1rem;
 322 }
 323
 324 .banner {
 325   object-fit: cover;
 326   width: 100%;
 327   max-height: 240px;
 328 }
 329
 330 .avatar-overlay {
 331   width: 20%;
 332   height: 20%;
 333   max-width: 120px;
 334   max-height: 120px;
 335 }
 336
 337 .avatar-pushup {
 338   margin-top: -60px;
 339 }
 340
 341 .img-icon {
 342   width: 2rem;
 343   height: 2rem;
 344 }
 345
 346 .tribute-container ul {
 347   margin: 0;
 348   margin-top: 2px;
 349   padding: 0;
 350   list-style: none;
 351   background: var(--light);
 352 }
 353 .tribute-container li {
 354   padding: 5px 5px;
 355   cursor: pointer;
 356 }
 357 .tribute-container li.highlight {
 358   background: var(--primary);
 359 }
 360 .tribute-container li span {
 361   font-weight: bold;
 362 }
 363 .tribute-container li.no-match {
 364   cursor: default;
 365 }
 366 .tribute-container .menu-highlighted {
 367   font-weight: bold;
 368 }
 369
 370 .honeypot {
 371   display:none !important;
 372 }
 373
 374 .slight-radius {
 375   border-radius: 4px;
 376 }
 377
 378 .modlog-choices-font-size {
 379   font-size: .9375rem !important;
 380 }
 381
 382 .preview-lines {
 383   overflow: hidden;
 384   text-overflow: ellipsis;
 385   display: -webkit-box;
 386   -webkit-line-clamp: 3;
 387   -webkit-box-orient: vertical;
 388 }