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