git.squeep.com Git - akkoma/blob - priv/static/static-fe/static-fe.css

   1 /* pleroma-light and pleroma-dark themes from pleroma-fe */
   2 :root {
   3     --icon-filter: invert(38%) sepia(11%) saturate(209%) hue-rotate(179deg) brightness(99%) contrast(89%);
   4     --wallpaper: rgba(11, 16, 23, 1);
   5     --alertNeutral: rgba(185, 185, 186, 0.5);
   6     --alertNeutralText: rgba(255, 255, 255, 1);
   7     --avatarShadow: 0px 1px 8px 0px rgba(0, 0, 0, 0.7);
   8     --loadPostsSelected: rgba(23, 34, 46, 1);
   9     --loadPostsSelectedText: rgba(185, 185, 186, 1);
  10     --profileBg: rgba(7, 12, 17, 1);
  11     --profileTint: rgba(15, 22, 30, 0.5);
  12     --btnText: rgba(185, 185, 186, 1);
  13     --btn: rgba(21, 30, 43, 1);
  14     --btnShadow: 0px 0px 2px 0px rgba(0, 0, 0, 1), 0px 1px 0px 0px rgba(255, 255, 255, 0.2) inset, 0px -1px 0px 0px rgba(0, 0, 0, 0.2) inset;
  15     --btnHoverShadow: 0px 0px 1px 2px rgba(185, 185, 186, 0.4) inset, 0px 1px 0px 0px rgba(255, 255, 255, 0.2) inset, 0px -1px 0px 0px rgba(0, 0, 0, 0.2) inset;
  16     --lightText: rgba(236, 236, 236, 1);
  17     --panelShadow: 0px 0px 3px 0px rgba(0, 0, 0, 0.5), 0px 4px 6px 3px rgba(0, 0, 0, 0.3);
  18     --panelHeaderShadow: 0px 1px 3px 0px rgba(0, 0, 0, 0.4), 0px 1px 0px 0px rgba(255, 255, 255, 0.2) inset;
  19     --topBar: rgba(21, 30, 43, 1);
  20     --topBarText: rgba(159, 159, 161, 1);
  21     --topBarShadow: 0px 1px 4px 0px rgba(0, 0, 0, 0.4), 0px 2px 7px 0px rgba(0, 0, 0, 0.3);
  22     --underlay: rgba(9, 14, 20, 0.6);
  23     --background: rgba(15, 22, 30, 1);
  24     --faint: rgba(185, 185, 186, 0.5);
  25     --selectedPost: rgba(23, 34, 46, 1);
  26     --link: rgba(226, 177, 136, 1);
  27     --text: rgba(185, 185, 186, 1);
  28     --border: rgba(26, 37, 53, 1);
  29     --poll: rgba(99, 84, 72, 1);
  30 }
  31
  32 @media (prefers-color-scheme: light) {
  33     :root {
  34         --icon-filter: invert(67%) sepia(7%) saturate(525%) hue-rotate(173deg) brightness(90%) contrast(92%);
  35         ;
  36         --wallpaper: rgba(248, 250, 252, 1);
  37         --alertNeutral: rgba(48, 64, 85, 0.5);
  38         --alertNeutralText: rgba(0, 0, 0, 1);
  39         --avatarShadow: 0px 1px 8px 0px rgba(0, 0, 0, 0.7);
  40         --loadPostsSelected: rgba(224, 233, 240, 1);
  41         --loadPostsSelectedText: rgba(48, 64, 85, 1);
  42         --profileBg: rgba(128, 137, 146, 1);
  43         --profileTint: rgba(242, 246, 249, 0.5);
  44         --btnText: rgba(48, 64, 85, 1);
  45         --btn: rgba(214, 223, 237, 1);
  46         --btnShadow: 0px 0px 2px 0px rgba(0, 0, 0, 0.2), 0px 1px 0px 0px rgba(255, 255, 255, 0.5) inset, 0px -1px 0px 0px rgba(0, 0, 0, 0.2) inset;
  47         --btnHoverShadow: 0px 0px 2px 0px rgba(0, 0, 0, 0.2), 0px 0px 1px 2px rgba(255, 195, 159, 1) inset, 0px -1px 0px 0px rgba(0, 0, 0, 0.2) inset;
  48         --lightText: rgba(11, 14, 19, 1);
  49         --panelShadow: 0px 1px 3px 0px rgba(0, 0, 0, 0.5), 0px 3px 6px 1px rgba(0, 0, 0, 0.2);
  50         --panelHeaderShadow: 0px 1px 0px 0px rgba(255, 255, 255, 0.5) inset, 0px 1px 3px 0px rgba(0, 0, 0, 0.3);
  51         --topBar: rgba(214, 223, 237, 1);
  52         --topBarText: rgba(48, 64, 85, 1);
  53         --topBarShadow: 0px 0px 4px 0px rgba(0, 0, 0, 0.6);
  54         --underlay: rgba(93, 96, 134, 0.4);
  55         --background: rgba(242, 246, 249, 1);
  56         --faint: rgba(48, 64, 85, 0.5);
  57         --selectedPost: rgba(224, 233, 240, 1);
  58         --link: rgba(245, 91, 27, 1);
  59         --text: rgba(48, 64, 85, 1);
  60         --border: rgba(216, 230, 249, 1);
  61         --poll: rgba(243, 184, 160, 1);
  62     }
  63 }
  64
  65 html {
  66     height: 100%;
  67     overflow-y: auto;
  68 }
  69
  70 body {
  71     overflow: auto;
  72     margin: 0;
  73     height: 100%;
  74     font-family: sans-serif;
  75     color: var(--text);
  76 }
  77
  78 .background-image {
  79     position: fixed;
  80     height: 100%;
  81     top: 3.5em;
  82     z-index: -1000;
  83     left: 0;
  84     right: -20px;
  85     background-size: cover;
  86     background-repeat: no-repeat;
  87     background-color: var(--wallpaper);
  88     background-image: var(--background-image);
  89     background-position: 50%;
  90 }
  91
  92 a {
  93     text-decoration: none;
  94     color: var(--link);
  95 }
  96
  97 nav {
  98     position: sticky;
  99     top: 0;
 100     width: 100%;
 101     height: 3.5em;
 102     background-color: var(--topBar);
 103     box-shadow: var(--topBarShadow);
 104     z-index: 2000;
 105 }
 106
 107 .inner-nav {
 108     padding: 0 1.2em;
 109     margin: auto;
 110     max-width: 1110px;
 111 }
 112
 113 .inner-nav a {
 114     line-height: 3.5em;
 115     color: var(--topBarText);
 116 }
 117
 118 .inner-nav img {
 119     height: 28px;
 120     vertical-align: middle;
 121     padding-right: 5px
 122 }
 123
 124 body>.container {
 125     display: grid;
 126     grid-template-columns: minmax(25em, 45em) 25em;
 127     grid-template-areas: "content sidebar";
 128     height: calc(100vh - 3.5em);
 129     justify-content: center;
 130 }
 131
 132 .underlay {
 133     grid-column-start: 1;
 134     grid-column-end: span 2;
 135     grid-row-start: 1;
 136     grid-row-end: 1;
 137     background-color: var(--underlay);
 138     z-index: -1000;
 139 }
 140
 141 .column {
 142     padding: 1em;
 143     margin: -0.5em;
 144 }
 145
 146 .panel {
 147     background-color: var(--background);
 148     border-radius: 3px;
 149     box-shadow: var(--panelShadow);
 150 }
 151
 152 .panel-heading {
 153     background-color: var(--topBar);
 154     font-size: 1.3em;
 155     padding: 0.6em;
 156     border-radius: 3px 3px 0 0;
 157     box-shadow: var(--panelHeaderShadow);
 158 }
 159
 160 .panel-content {
 161     padding: 1em;
 162 }
 163
 164 .about-content {
 165     padding: 0.6em;
 166 }
 167
 168 .main {
 169     grid-area: content;
 170     position: relative;
 171 }
 172
 173 .sidebar {
 174     grid-area: sidebar;
 175     padding-left: 0.5em;
 176 }
 177
 178 .column.flex {
 179     grid-column-end: sidebar-end;
 180 }
 181
 182 .scopes-input {
 183     display: flex;
 184     flex-direction: column;
 185     margin: 1em 0;
 186     color: var(--muted-text-color);
 187 }
 188
 189
 190 .status-container,
 191 .repeat-header,
 192 .user-card {
 193     display: flex;
 194     padding: 0.75em;
 195 }
 196
 197 .left-side {
 198     margin-right: 0.75em;
 199 }
 200
 201 .right-side {
 202     flex: 1;
 203     min-width: 0;
 204 }
 205
 206 .repeat-header {
 207     padding: 0.4em 0.75em;
 208     margin-bottom: -0.75em;
 209 }
 210
 211 .repeat-header .right-side {
 212     color: var(--faint);
 213 }
 214
 215 .repeat-header .u-photo {
 216     height: 20px;
 217     width: 20px;
 218     margin-left: 28px;
 219 }
 220
 221 .status-heading {
 222     margin-bottom: 0.5em;
 223     line-height: 1.3;
 224 }
 225
 226 .status-heading a {
 227     display: inline-block;
 228     word-break: break-all;
 229 }
 230
 231 .heading-left {
 232     display: flex;
 233     flex: 1;
 234     overflow: hidden;
 235 }
 236
 237 .heading-right {
 238     display: flex;
 239     align-items: center;
 240 }
 241
 242 .heading-name-row .account-name {
 243     min-width: 1.6em;
 244     margin-right: 0.4em;
 245     white-space: nowrap;
 246     overflow: hidden;
 247     text-overflow: ellipsis;
 248     flex: 1 1 0;
 249 }
 250
 251 .heading-name-row .username,
 252 .repeat-header .username {
 253     white-space: nowrap;
 254     overflow: hidden;
 255     max-width: 85%;
 256     font-weight: bold;
 257     flex-shrink: 1;
 258     margin: 0;
 259     margin-right: 0.4em;
 260     text-overflow: ellipsis;
 261 }
 262
 263 .heading-name-row {
 264     display: flex;
 265     justify-content: space-between;
 266 }
 267
 268 .heading-edited-row,
 269 .heading-reply-row {
 270     font-size: 0.85em;
 271     margin-top: 0.2em;
 272 }
 273
 274 .reply-to-link {
 275     color: var(--faint);
 276 }
 277
 278 .reply-to-link:hover {
 279     text-decoration: underline;
 280 }
 281
 282 #selected {
 283     background-color: var(--selectedPost);
 284 }
 285
 286 .timeago {
 287     color: var(--faint);
 288 }
 289
 290 #selected .timeago {
 291     color: var(--text);
 292 }
 293
 294 .timeago :hover {
 295     text-decoration: underline;
 296 }
 297
 298 .h-card {
 299     min-height: 48px;
 300     margin-bottom: 8px;
 301 }
 302
 303 header a,
 304 .h-card a {
 305     text-decoration: none;
 306 }
 307
 308 header a:hover,
 309 .h-card a:hover {
 310     text-decoration: underline;
 311 }
 312
 313 .attachments {
 314     margin-top: 0.5em;
 315     flex-direction: row;
 316     display: flex;
 317     flex-wrap: nowrap;
 318     align-content: stretch;
 319     max-height: 24em;
 320 }
 321
 322 .attachment {
 323     border: 1px solid var(--border);
 324     border-radius: 3px;
 325     display: flex;
 326     flex-grow: 1;
 327     justify-content: center;
 328     position: relative;
 329     min-width: 0;
 330 }
 331
 332 .attachment>* {
 333     width: 100%;
 334     object-fit: contain;
 335 }
 336
 337 .attachment:not(:last-child) {
 338     margin-right: 0.5em;
 339 }
 340
 341 .nsfw-banner {
 342     position: absolute;
 343     height: 100%;
 344     display: flex;
 345     align-items: center;
 346 }
 347
 348 .nsfw-banner div {
 349     width: 100%;
 350     text-align: center;
 351 }
 352
 353 .nsfw-banner:not(:hover) {
 354     background-color: var(--background);
 355 }
 356
 357 .nsfw-banner:hover div {
 358     display: none;
 359 }
 360
 361 .poll-option {
 362     position: relative;
 363     display: flex;
 364     margin: 0.75em 0.5em;
 365     padding: 0.1em 0.25em;
 366     word-break: break-word;
 367     z-index: 1;
 368 }
 369
 370 .poll-option .percentage {
 371     width: 3.5em;
 372     flex-shrink: 0;
 373 }
 374
 375 .poll-option .fill {
 376     height: 100%;
 377     position: absolute;
 378     background-color: var(--poll);
 379     border-radius: 3px;
 380     top: 0;
 381     left: 0;
 382     z-index: -1;
 383 }
 384
 385 .status-actions {
 386     position: relative;
 387     width: 100%;
 388     display: flex;
 389     margin-top: 0.75em;
 390 }
 391
 392 .status-actions>* {
 393     max-width: 4em;
 394     flex: 1;
 395     display: flex;
 396 }
 397
 398 .status-summary {
 399     display: block;
 400     font-style: italic;
 401     padding-bottom: 0.5em;
 402     margin-bottom: 0.5em;
 403     border-style: solid;
 404     border-width: 0 0 1px 0;
 405     border-color: var(--border, #222);
 406 }
 407
 408 summary {
 409     text-align: center;
 410     color: var(--link);
 411     cursor: pointer;
 412 }
 413
 414 .status-body {
 415     word-wrap: break-word;
 416     word-break: break-word;
 417     line-height: 1.4;
 418 }
 419
 420 .user-info {
 421     padding: 0.5em 26px;
 422 }
 423
 424 .user-info .container {
 425     padding: 18px 0 6px 0;
 426     display: flex;
 427     align-items: flex-start;
 428     max-height: 56px;
 429 }
 430
 431 .user-info a {
 432     color: var(--lightText);
 433 }
 434
 435 .user-info .avatar img {
 436     height: 56px;
 437     width: 56px;
 438 }
 439
 440 .avatar img {
 441     border-radius: 3px;
 442     box-shadow: var(--avatarShadow);
 443 }
 444
 445 .user-summary {
 446     display: block;
 447     margin-left: 0.6em;
 448     text-align: left;
 449     text-overflow: ellipsis;
 450     white-space: nowrap;
 451     flex: 1 1 0;
 452     z-index: 1;
 453     line-height: 2em;
 454     color: var(--lightText);
 455 }
 456
 457 .button-default {
 458     user-select: none;
 459     color: var(--btnText);
 460     background-color: var(--btn);
 461     border: none;
 462     border-radius: 4px;
 463     box-shadow: var(--btnShadow);
 464     font-size: 1em;
 465     min-height: 2em;
 466 }
 467
 468 .button-default:hover {
 469     box-shadow: var(--btnHoverShadow);
 470     cursor: pointer;
 471 }
 472
 473 .user-bio {
 474     text-align: center;
 475     display: block;
 476     line-height: 1.3;
 477     padding: 1em;
 478     margin: 0;
 479 }
 480
 481 .user-banner {
 482     position: absolute;
 483     top: 0;
 484     left: 0;
 485     right: 0;
 486     bottom: 0;
 487     background-image: linear-gradient(to bottom, var(--profileTint), var(--profileTint)),
 488         var(--user-banner);
 489     background-size: cover;
 490     background-color: var(--profileBg);
 491     -webkit-mask: linear-gradient(to top, white, transparent) bottom no-repeat,
 492         linear-gradient(to top, white, white);
 493     -webkit-mask-composite: xor;
 494     -webkit-mask-size: 100% 60%;
 495     z-index: -2;
 496 }
 497
 498 .user-header {
 499     position: relative;
 500     z-index: 1;
 501 }
 502
 503 .user-role {
 504     color: var(--alertNeutralText);
 505     background-color: var(--alertNeutral);
 506     margin: 0 0.35em;
 507     padding: 0 0.25em;
 508     border-radius: 2px;
 509 }
 510
 511 .user-profile-fields {
 512     margin: 0 0.5em;
 513 }
 514
 515 .user-profile-field {
 516     display: flex;
 517     margin: 0.25em;
 518     border: 1px solid var(--border, #222);
 519     border-radius: 3px;
 520     line-height: 1.3;
 521     text-overflow: ellipsis;
 522     white-space: nowrap;
 523     overflow: hidden;
 524 }
 525
 526 .user-profile-field dt {
 527     padding: 0.5em 1.5em;
 528     box-sizing: border-box;
 529     flex: 0 1 30%;
 530     font-weight: 500;
 531     color: var(--lightText);
 532     border-right: 1px solid var(--border);
 533     text-align: right;
 534 }
 535
 536 .user-profile-field dd {
 537     padding: 0.5em 1.5em;
 538     box-sizing: border-box;
 539     flex: 1 1 30%;
 540     margin: 0 0 0 0.25em;
 541 }
 542
 543 .user-counts {
 544     display: flex;
 545     line-height: 1em;
 546     padding: 0.5em 1.5em 0 1.5em;
 547     text-align: center;
 548     justify-content: space-between;
 549     color: var(--lightText);
 550     flex-wrap: wrap;
 551 }
 552
 553 .user-count {
 554     flex: 1 0 auto;
 555     padding: 0.5em 0;
 556     margin: 0 0.5em;
 557 }
 558
 559 .user-count h5 {
 560     font-size: 1em;
 561     font-weight: bolder;
 562     margin: 0 0 0.25em;
 563 }
 564
 565 .tab-switcher {
 566     display: flex;
 567     padding-top: 5px;
 568     overflow-x: auto;
 569     overflow-y: hidden;
 570     border-bottom: 1px solid var(--border);
 571 }
 572
 573 .tab-switcher::before,
 574 .tab-switcher::after {
 575     flex: 1 1 auto;
 576     content: '';
 577 }
 578
 579 .tab {
 580     flex: 0 0 auto;
 581     padding: 6px 1em;
 582     border-bottom-left-radius: 0;
 583     border-bottom-right-radius: 0;
 584 }
 585
 586 .tab.active {
 587     background: transparent;
 588 }
 589
 590 .profile .status-container {
 591     border-bottom: 1px solid var(--border);
 592 }
 593
 594 .bottom-line {
 595     display: flex;
 596 }
 597
 598 .load-posts {
 599     display: block;
 600     box-sizing: border-box;
 601     height: 3.5em;
 602     line-height: 3.5em;
 603     padding: 0 1em;
 604     width: 100%;
 605     text-align: center;
 606 }
 607
 608 .load-posts:hover {
 609     background-color: var(--loadPostsSelected);
 610     color: var(--loadPostsSelectedText);
 611 }
 612
 613
 614 .fa-icon {
 615     height: 0.875em;
 616     margin: 0 0.3em;
 617     filter: var(--icon-filter);
 618     align-self: center;
 619 }
 620
 621 .status-actions .fa-icon {
 622     height: 1.1em;
 623 }
 624
 625 .reply-to-link .fa-icon {
 626     transform: scale(-1, 1);
 627 }
 628
 629 @media (max-width: 800px) {
 630     body>.container {
 631         display: block;
 632     }
 633
 634     .column {
 635         padding: 0;
 636         margin: 0;
 637     }
 638
 639     .sidebar {
 640         display: none;
 641     }
 642 }
 643
 644 img:not(.u-photo, .fa-icon) {
 645     width: 32px;
 646     height: 32px;
 647     padding: 0;
 648     vertical-align: middle;
 649 }
 650
 651 .username img:not(.u-photo) {
 652     width: 16px;
 653     height: 16px;
 654 }