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 .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 .md-div h2 {
  62   font-size: 1.8rem;
  63 }
  64 .md-div h3 {
  65   font-size: 1.6rem;
  66 }
  67 .md-div h4 {
  68   font-size: 1.4rem;
  69 }
  70 .md-div h5 {
  71   font-size: 1.2rem;
  72 }
  73
  74 .md-div table {
  75   border-collapse: collapse;
  76   width: 100%;
  77   margin-bottom: 1rem;
  78   border: 1px solid var(--dark);
  79 }
  80
  81 .md-div table th,
  82 .md-div table td {
  83   padding: 0.3rem;
  84   vertical-align: top;
  85   border-top: 1px solid var(--dark);
  86   border: 1px solid var(--dark);
  87 }
  88
  89 .md-div table thead th {
  90   vertical-align: bottom;
  91   border-bottom: 2px solid var(--dark);
  92 }
  93
  94 .md-div table tbody + tbody {
  95   border-top: 2px solid var(--dark);
  96 }
  97
  98 .vote-bar {
  99   margin-top: -6.5px;
 100 }
 101
 102 .post-title {
 103   line-height: 1;
 104 }
 105
 106 .post-title a:visited {
 107   color: var(--gray) !important;
 108 }
 109
 110 .icon {
 111   display: inline-flex;
 112   width: 1em;
 113   height: 1em;
 114   stroke-width: 0;
 115   stroke: currentColor;
 116   fill: currentColor;
 117   vertical-align: middle;
 118   align-self: center;
 119   -webkit-touch-callout: none;
 120   -webkit-user-select: none;
 121   -khtml-user-select: none;
 122   -moz-user-select: none;
 123   -ms-user-select: none;
 124   user-select: none;
 125 }
 126
 127 .icon-inline {
 128   margin-bottom: 2px;
 129 }
 130
 131 .spin {
 132   animation: spins 2s linear infinite;
 133 }
 134
 135 @keyframes spins {
 136   0% {
 137     transform: rotate(0deg);
 138   }
 139   100% {
 140     transform: rotate(359deg);
 141   }
 142 }
 143
 144 .dropdown-menu {
 145   z-index: 2000;
 146 }
 147
 148 blockquote {
 149   border-left: 2px solid var(--secondary);
 150   margin: 0.5em 5px;
 151   padding: 0.1em 5px;
 152 }
 153
 154 .mouse-icon {
 155   margin-top: -4px;
 156 }
 157
 158 .new-comments {
 159   max-height: 50vh;
 160   overflow-x: hidden;
 161   overflow-y: auto;
 162 }
 163
 164 .thumbnail {
 165   object-fit: cover;
 166   min-height: 60px;
 167   max-height: 80px;
 168   width: 100%;
 169 }
 170
 171 .thumbnail svg {
 172   height: 1.25rem;
 173   width: 1.25rem;
 174 }
 175
 176 .no-s-hows {
 177   position: absolute !important;
 178   top: -9999px !important;
 179   left: -9999px !important;
 180 }
 181
 182 hr {
 183   border-top: 1px solid var(--light);
 184 }
 185
 186 .emoji {
 187   max-height: 1.2em !important;
 188 }
 189
 190 .text-wrap-truncate {
 191   overflow: hidden;
 192   text-overflow: ellipsis;
 193 }
 194
 195 #app {
 196   display: flex;
 197   flex-direction: column;
 198   min-height: 100vh;
 199 }
 200
 201 .fl-1 {
 202   flex: 1;
 203 }
 204
 205 .img-blur {
 206   filter: blur(10px);
 207   -webkit-filter: blur(10px);
 208   -moz-filter: blur(10px);
 209   -o-filter: blur(10px);
 210   -ms-filter: blur(10px);
 211 }
 212
 213 .img-expanded {
 214   max-height: 90vh;
 215 }
 216
 217 .btn-animate:active {
 218   transform: scale(1.2);
 219   -webkit-transform: scale(1.2);
 220   -ms-transform: scale(1.2);
 221 }
 222
 223 .mini-overlay {
 224   position: absolute;
 225   top: 0;
 226   right: 0;
 227   padding: 2px;
 228   height: 1.5em;
 229   width: 1.5em;
 230   background: rgba(0, 0, 0, 0.4);
 231   border-bottom-left-radius: 0.25rem !important;
 232   border-top-right-radius: 0.25rem !important;
 233 }
 234
 235 .link-overlay:hover {
 236   transition: 0.1s;
 237   opacity: 1;
 238 }
 239
 240 .link-overlay {
 241   transition: opacity 0.1s ease-in-out;
 242   position: absolute;
 243   opacity: 0;
 244   left: 0;
 245   height: 100%;
 246   width: 100%;
 247   padding: 10px;
 248   background: rgba(0, 0, 0, 0.6);
 249 }
 250
 251 .placeholder {
 252   height: 50px;
 253   width: 50px;
 254 }
 255
 256 .unselectable {
 257   -webkit-touch-callout: none;
 258   -webkit-user-select: none;
 259   -khtml-user-select: none;
 260   -moz-user-select: none;
 261   -ms-user-select: none;
 262   user-select: none;
 263 }
 264
 265 .list-inline-item-action {
 266   display: inline-block;
 267 }
 268
 269 .list-inline-item-action:not(:last-child) {
 270   margin-right: 1.2rem;
 271 }
 272
 273 pre {
 274   white-space: pre-wrap;
 275   word-break: keep-all;
 276 }
 277
 278 .form-control.search-input {
 279   float: right !important;
 280   transition: width 0.2s ease-out 0s !important;
 281 }
 282
 283 .show-input {
 284   width: 13em !important;
 285 }
 286 .hide-input {
 287   background: transparent !important;
 288   width: 0px !important;
 289   padding: 0 !important;
 290 }
 291
 292 br.big {
 293   display: block;
 294   content: "";
 295   margin-top: 1rem;
 296 }
 297
 298 .banner {
 299   object-fit: cover;
 300   width: 100%;
 301   max-height: 240px;
 302 }
 303
 304 .avatar-overlay {
 305   width: 20%;
 306   height: 20%;
 307   max-width: 120px;
 308   max-height: 120px;
 309 }
 310
 311 .avatar-pushup {
 312   margin-top: -60px;
 313 }
 314
 315 .img-icon {
 316   width: 2rem;
 317   height: 2rem;
 318 }
 319
 320 .tribute-container ul {
 321   margin: 0;
 322   margin-top: 2px;
 323   padding: 0;
 324   list-style: none;
 325   background: var(--light);
 326 }
 327 .tribute-container li {
 328   padding: 5px 5px;
 329   cursor: pointer;
 330 }
 331 .tribute-container li.highlight {
 332   background: var(--primary);
 333 }
 334 .tribute-container li span {
 335   font-weight: bold;
 336 }
 337 .tribute-container li.no-match {
 338   cursor: default;
 339 }
 340 .tribute-container .menu-highlighted {
 341   font-weight: bold;
 342 }