view/global.css

   1 /* General style rules .*/
   2 .pull-right { float: right }
   3
   4 details > summary {
   5   cursor: pointer;
   6 }
   7
   8 /* General design elements */
   9 .btn {
  10   outline: none;
  11   -moz-box-shadow: inset 0px 1px 0px 0px #ffffff;
  12   -webkit-box-shadow: inset 0px 1px 0px 0px #ffffff;
  13   box-shadow: inset 0px 1px 0px 0px #ffffff;
  14   background-color: #ededed;
  15   text-indent: 0;
  16   border: 1px solid #dcdcdc;
  17   display: inline-block;
  18   color: #777777;
  19   padding: 5px 10px;
  20   text-align: center;
  21 }
  22 a.btn, a.btn:hover {
  23   text-decoration: none;
  24   color: inherit;
  25 }
  26
  27 .menu-popup .divider {
  28   height: 1px;
  29   margin: 3px 0;
  30   overflow: hidden;
  31   background-color: #2d2d2d;
  32 }
  33
  34 .overline {
  35   text-decoration: overline;
  36 }
  37
  38 .template-icon {
  39         width: 24px;
  40         height: 24px;
  41 }
  42
  43 /* List of social Networks */
  44 img.connector, img.connector-disabled {
  45   height: 40px;
  46   margin-right: 10px;
  47   border-radius: 10px;
  48 }
  49
  50 img.connector-disabled {
  51   opacity: 0.5;
  52 }
  53
  54 h3.connector {
  55   display: inline-block;
  56   vertical-align: bottom;
  57 }
  58 span.connector {
  59   vertical-align: super;
  60 }
  61
  62 /* Embedded link information */
  63 .type-link, .type-video {
  64   border-top: 1px solid #D2D2D2;
  65   border-bottom: 1px solid #D2D2D2;
  66   display: block;
  67   padding-top: 5px;
  68   padding-bottom: 5px;
  69   margin-top: 10px;
  70 }
  71
  72 .type-link:after, .type-video:after,
  73 .oembed.video:after {
  74   content: ".";
  75   display: block;
  76   height: 0;
  77   clear: both;
  78   visibility: hidden;
  79 }
  80
  81 .type-video .oembed.video:after {
  82   float: left;
  83 }
  84
  85 .wall-item-container .wall-item-content .type-link img,
  86 .type-link img, .type-video img, img.attachment-preview {
  87   max-width: 160px;
  88   max-height: 160px;
  89   float: left;
  90   margin-right: 10px;
  91 }
  92
  93 .wall-item-container .wall-item-content .type-link img.attachment-image,
  94 .type-link img.attachment-image, .type-video img.attachment-image  {
  95   max-width: 100%;
  96   max-height: initial;
  97   float: initial;
  98   margin-right: 0px;
  99 }
 100
 101 .wall-item-emoji {
 102   margin-right: 5px;
 103 }
 104
 105 .wall-item-like-expanded,
 106 .wall-item-dislike-expanded,
 107 .wall-item-attendyes-expanded,
 108 .wall-item-attendno-expanded,
 109 .wall-item-attendmaybe-expanded {
 110   margin: 0;
 111 }
 112
 113 .wall-item-response {
 114   white-space: nowrap;
 115   overflow: hidden;
 116   text-overflow: ellipsis;
 117 }
 118
 119 .type-link blockquote, .type-video blockquote {
 120   margin-left: 0px;
 121   max-height: 160px;
 122   overflow: hidden;
 123   border-left: 0px;
 124   padding-left: 0px;
 125   font-size: 13px;
 126   line-height: normal;
 127 }
 128
 129 .type-link .oembed, .type-video .oembed {
 130   font-size: 18px;
 131   font-weight: 300;
 132   line-height: normal;
 133 }
 134 .type-link img, .type-video img {
 135 }
 136
 137 .type-video .embed_video {
 138   margin: 0em;
 139 }
 140
 141 .type-link span.oembed + br, .type-video span.oembed + br,
 142 .type-link a + br, .type-video a + br,
 143 .type-link img + br, .type-video img + br{
 144   display: none;
 145 }
 146
 147 .embed_video {
 148   float:left;
 149   margin: 1em;
 150   position: relative;
 151 }
 152
 153 .embed_video.active {
 154   float: none;
 155 }
 156
 157 .oembed.video .embed_video > div {
 158   position: absolute;
 159   top: 0px;
 160   left: 0px;
 161 }
 162 .embed_rich {
 163   display: block;
 164   transition: height .75s;
 165 }
 166
 167 /* Shared Messages */
 168
 169 .shared_header {
 170   display: flex;
 171   justify-content: space-between;
 172   min-height: 32px;
 173   color: #999;
 174   border-top: 1px solid #D2D2D2;
 175   padding-top: 5px;
 176   margin-top: 5px;
 177 }
 178 .shared_header > .avatar {
 179   display: block;
 180   flex: 0 0 41px;
 181   margin-inline-end: 9px;
 182 }
 183 .shared_header > .avatar > img {
 184   -webkit-border-radius: 4px;
 185   -moz-border-radius: 4px;
 186   border-radius: 4px;
 187 }
 188 .shared_header > .metadata {
 189   flex: 1 0 auto;
 190 }
 191 .shared_header > .metadata > p {
 192   margin: 0;
 193 }
 194 .shared_header > .preferences {
 195   position: static;
 196   flex: 0 0 auto;
 197 }
 198
 199 .shared_header a {
 200   -webkit-transition: all 0.2s ease-in-out;
 201   -moz-transition: all 0.2s ease-in-out;
 202   -o-transition: all 0.2s ease-in-out;
 203   -ms-transition: all 0.2s ease-in-out;
 204   transition: all 0.2s ease-in-out;
 205 }
 206
 207 blockquote.shared_content {
 208   margin-inline-start: 32px;
 209   color: #000;
 210   border: none;
 211 }
 212
 213 /* Events */
 214 .event-summary {
 215   margin: 0px 0px 10px 0px;
 216   font-weight: bold;
 217 }
 218
 219 .vevent .event-summary {
 220   margin: 0px 0px 10px 0px;
 221 }
 222
 223 .vevent .event-description {
 224   padding: 10px 0;
 225 }
 226
 227 .event-label {
 228   font-weight: bold;
 229 }
 230
 231 .settings-heading a:after{
 232   content: ' »';
 233 }
 234
 235 #profile-photo-wrapper {
 236   clear: both;
 237   overflow: hidden;
 238 }
 239
 240 #newmember-tips {
 241   margin-top: -3px;
 242   font-size: 1.2em;
 243 }
 244
 245 /* headers */
 246 h1, h2, h3, h4, h5, h6 {
 247   margin: 5px 0px 5px 0px;
 248   font-weight: normal;
 249   line-height: normal;
 250   text-rendering: optimizelegibility;
 251 }
 252
 253 h1 {
 254   font-size: 31.5px;
 255 }
 256
 257 h2 {
 258   font-size: 24.5px;
 259 }
 260
 261 h3 {
 262   font-size: 20.5px;
 263 }
 264
 265 h4 {
 266   font-size: 18px;
 267 }
 268
 269 h5 {
 270   font-size: 16.5px;
 271 }
 272
 273 h6 {
 274   font-size: 14.95px;
 275 }
 276
 277 span.oembed, h4 {
 278   margin: 0px 0px 0px 0px;
 279 }
 280
 281 code, key {
 282   display: inline;
 283   background-color: #eee;
 284   color: #666;
 285   padding: 0.2em;
 286   font-size: 0.85em;
 287   font-family: monospace;
 288 }
 289
 290 /* fields help text */
 291 .field .field_help {
 292   clear: left;
 293 }
 294
 295 /* notifications unseen */
 296 .notification-unseen { background-color: #cceeFF; }
 297
 298 /* autocomplete popup */
 299 ul.acpopup {
 300   list-style: none;
 301   float: left;
 302   min-width: 160px;
 303   padding: 5px 0;
 304   margin: 2px 0 0;
 305 }
 306 nav .acpopup {
 307   width: 290px;
 308   max-height: 450px;
 309   max-width: 300px;
 310   overflow-y: auto;
 311   overflow-x: hidden;
 312   margin-top: 0px;
 313 }
 314 img.acpopup-img {
 315   float: left;
 316   width: 36px;
 317   height: 36px;
 318   margin-right: 5px;
 319   vertical-align: middle;
 320 }
 321 .acpopup-contactname {
 322   padding-top: 2px;
 323   font-weight: bold;
 324   line-height: 1em;
 325   white-space: nowrap;
 326   overflow: hidden;
 327   text-overflow: ellipsis;
 328   display: block;
 329 }
 330 .acpopup-sub-text {
 331   color: #777;
 332   font-size: 0.833em;
 333   line-height: 1em;
 334   overflow: hidden;
 335   text-overflow: ellipsis;
 336   display: block;
 337 }
 338 .textcomplete-item a {
 339   color: inherit;
 340   overflow: hidden;
 341   text-overflow: ellipsis;
 342   clear: both;
 343   white-space: nowrap;
 344   padding: 3px 20px;
 345   display: block;
 346 }
 347 .textcomplete-item a:hover {
 348   text-decoration: none;
 349 }
 350
 351 /* plain text editor upload/select popup */
 352
 353 .fbrowser .path a, .fbrowser .path .btn-link { padding: 5px; }
 354 .fbrowser .path a:before, .fbrowser .path .btn-link:before { content: "/"; padding-right: 5px;}
 355 .fbrowser .folders ul { list-style-type: none; padding-left: 10px;}
 356 .fbrowser .list { height: auto; overflow-y: hidden; margin: 10px 0px; }
 357 .fbrowser.photo .photo-album-image-wrapper { float: left; }
 358 .fbrowser.photo a img, .fbrowser.photo .btn-link img { height: 48px; }
 359 .fbrowser.photo a p, .fbrowser.photo .btn-link p { display: none;}
 360 .fbrowser.attachment .photo-album-image-wrapper { float:none;  white-space: nowrap; }
 361 .fbrowser.attachment img { display: inline; }
 362 .fbrowser.attachment p  { display: inline; white-space: nowrap; }
 363 .fbrowser .upload { clear: both; padding-top: 1em;}
 364 .fbrowser .error { background: #ffeeee; border: 1px solid #994444; color: #994444; padding: 0.5em;}
 365 .fbrowser .error .close { float: right; font-weight: bold; }
 366 .fbrowser .error.hidden { display: none; }
 367
 368 a {
 369   cursor: pointer;
 370 }
 371
 372 .sr-only {
 373   position: absolute;
 374   width: 1px;
 375   height: 1px;
 376   padding: 0;
 377   margin: -1px;
 378   overflow: hidden;
 379   clip: rect(0,0,0,0);
 380   border: 0;
 381 }
 382
 383 .identity-match-wrapper {
 384   float: left;
 385   padding: 10px;
 386   width: 120px;
 387   height: 140px;
 388   margin-bottom: 20px;
 389 }
 390
 391 .identity-match-photo {
 392   float: left;
 393   text-align: center;
 394   width: 120px;
 395 }
 396
 397 .identity-match-name {
 398   text-align: center;
 399 }
 400
 401 .identity-match-details {
 402   float: left;
 403   text-align: center;
 404   width: 120px;
 405   overflow: hidden;
 406   font-size: 10px;
 407   font-weight: 500;
 408   color: #999999;
 409 }
 410
 411 .identity-match-break, .identity-match-end {
 412   clear: both;
 413 }
 414
 415 .identity-match-photo button {
 416   border: none;
 417   padding: 0;
 418   margin: 0;
 419   background: none;
 420   height: 80px;
 421   width: 80px;
 422   cursor: pointer;
 423 }
 424
 425 .selected-identity img {
 426   border: 2px solid #ff0000;
 427 }
 428 .version-match {
 429   font-weight: bold;
 430   color: #00a700;
 431 }
 432 .federation-graph {
 433   margin: 0 auto;
 434   float: right;
 435 }
 436 .federation-network-graph {
 437   float: left;
 438   margin: 20px;
 439 }
 440 ul.federation-stats,
 441 ul.credits {
 442   list-style: none;
 443 }
 444 ul.federation-stats li,
 445 ul.credits li {
 446   float: left;
 447   width: 240px;
 448 }
 449 table#federation-stats {
 450   width: 100%;
 451 }
 452 td.federation-data {
 453   border-bottom: 1px solid #000;
 454 }
 455
 456 .contact-entry-photo img {
 457   max-width: 80px;
 458   max-height: 80px;
 459 }
 460
 461 /* group list widget */
 462 .group-list-img {
 463   height: 20px;
 464   width: 20px;
 465   vertical-align: middle;
 466 }
 467
 468 #group-widget-collapse {
 469   opacity: 0.3;
 470 }
 471
 472 /* help widget */
 473 aside .help-aside-wrapper ul {
 474   padding-left: 1em;
 475 }
 476
 477 aside .help-aside-wrapper h1 {
 478   font-size:2em
 479 }
 480
 481 .md_warning {
 482   padding: 1em;
 483   border: #ff0000 solid 2px;
 484   background-color: #f9a3a3;
 485   color: #ffffff;
 486 }
 487
 488 #group-widget-collapse:hover {
 489   opacity: 1.0;
 490 }
 491
 492 .contact-advanced-label {
 493   margin-top: 10px;
 494   float: left;
 495   width: 250px;
 496 }
 497
 498 .contact-advanced-input {
 499   margin-top: 10px;
 500   float: left;
 501   width: 200px;
 502 }
 503
 504 .renderinfo {
 505   clear: both;
 506 }
 507
 508 .p-addr {
 509   clear: both;
 510 }
 511
 512 #live-community {
 513   clear: both;
 514 }
 515
 516 /* contact-edit */
 517 #contact-edit-status-wrapper {
 518   border: 1px solid;
 519   padding: 10px;
 520 }
 521 #contact-edit-actions {
 522   float: right;
 523   display: inline-block;
 524   position: relative;
 525 }
 526 #contact-edit-actions > .menu-popup {
 527   right: 0;
 528   left: auto;
 529 }
 530
 531 #contact-edit-settings-label:after {
 532   content: ' »';
 533 }
 534
 535 #contact-edit-settings {
 536   display: none;
 537   margin: 10px 0;
 538 }
 539
 540 /* settings page */
 541 #settings-form .pageflags {
 542     margin: 0 0 20px 30px;
 543 }
 544
 545 /* admin pending user notes */
 546 td.pendingnote {
 547   padding-left: 20px;
 548   padding-right: 20px;
 549 }
 550 td.pendingnote > p > span {
 551   font-weight: bold;
 552 }
 553
 554 /* warning message */
 555 .contact-advanced-error-message,
 556 .warning-message {
 557   padding: 10px;
 558   margin: 5px;
 559   border-left: 5px solid #f00;
 560   font-weight: bold;
 561 }
 562
 563 /* src/href attributes filter error display */
 564 .invalid-src { border: 1px dotted red;}
 565 .invalid-href { border-bottom: 1px dotted red;}
 566 .invalid-src:after,
 567 .invalid-href:after { content: '⚠️'}
 568 img.invalid-src:after { vertical-align: top;}
 569
 570 /* Tag cloud */
 571 .tag1, .tag1:hover {
 572   font-size: 0.9em ;
 573   color: DarkGray;
 574 }
 575 .tag2, .tag2:hover {
 576   font-size: 1.0em;
 577   color: LawnGreen;
 578 }
 579 .tag3, .tag3:hover {
 580   font-size: 1.1em;
 581   color: DarkOrange;
 582 }
 583 .tag4, .tag4:hover {
 584   font-size: 1.2em;
 585   color: Red;
 586 }
 587 .tag5, .tag5:hover {
 588   font-size: 1.3em;
 589   color: Gold;
 590 }
 591 .tag6, .tag6:hover {
 592   font-size: 1.4em;
 593   color: Teal;
 594 }
 595 .tag7, .tag7:hover {
 596   font-size: 1.5em;
 597   color: DarkMagenta;
 598 }
 599 .tag8, .tag8:hover {
 600   font-size: 1.6em;
 601   color: DarkGoldenRod;
 602 }
 603 .tag9, .tag9:hover {
 604   font-size: 1.7em;
 605   color: DarkBlue;
 606 }
 607 .tag10 .tag10:hover {
 608   font-size: 1.8em;
 609   color: DeepPink;
 610 }
 611 .tags > a:hover {
 612   text-decoration: underline;
 613 }
 614 .tag-cloud {
 615   word-wrap: break-word;
 616 }
 617
 618 #register-explicit-content {
 619   font-weight: bold;
 620 }
 621
 622 span.emoji.mastodon img {
 623   height: 1.2em;
 624   vertical-align: middle;
 625 }
 626
 627 /* Exception page */
 628
 629 #exception {
 630   overflow: hidden;
 631   background-image: url('../images/friendica-404_svg_hare-bottom-light-inside.png');
 632   background-position: 50px bottom;
 633   background-repeat: no-repeat;
 634 }
 635
 636 #exception .hare {
 637   float: right;
 638 }
 639
 640 @media screen and (max-width: 600px) {
 641   #exception .hare {
 642     display: none;
 643   }
 644 }
 645
 646 /* Profile Settings Custom Fields */
 647 body.dragging, body.dragging * {
 648         cursor: ns-resize !important;
 649 }
 650
 651 .dragged {
 652         position: absolute;
 653         opacity: 0.5;
 654         z-index: 2000;
 655 }
 656
 657 #profile-custom-fields > fieldset > legend {
 658         cursor: ns-resize;
 659 }
 660
 661 #profile-custom-fields div.placeholder {
 662         position: relative;
 663         margin: 0;
 664         padding: 0;
 665         border-top: 1px dotted black;
 666 }
 667 #profile-custom-fields div.placeholder:before {
 668         position: absolute;
 669         content: "";
 670         width: 0;
 671         height: 0;
 672         margin-top: -7px;
 673         left: -7px;
 674         top: -1px;
 675         border: 7px solid transparent;
 676         border-left-color: black;
 677         border-right: none;
 678 }
 679
 680 span.required {
 681         color: #c80000;
 682 }
 683
 684 audio {
 685   width: 100%;
 686 }
 687
 688 /**
 689  * Image grid settings START
 690  **/
 691 .imagegrid-row {
 692         display: -ms-flexbox; /* IE10 */
 693         display: flex;
 694         margin-top: 1em;
 695         column-gap: 5px;
 696 }
 697
 698 .imagegrid-column {
 699         -ms-flex: 50%; /* IE10 */
 700         flex: 50%;
 701         display: -ms-flexbox; /* IE10 */
 702         display: flex;
 703         flex-direction: column;
 704         row-gap: 5px;
 705 }
 706
 707 .imagegrid-column img {
 708         -ms-flex: 50%; /* IE10 */
 709         flex: 50%;
 710 }
 711 /**
 712  * Image grid settings END
 713  **/
 714
 715 /* This helps allocating space for image before they are loaded, preventing content shifting once they are.
 716  * Inspired by https://www.smashingmagazine.com/2016/08/ways-to-reduce-content-shifting-on-page-load/
 717  * Please note: The space is effectively allocated using padding-bottom using the image ratio as a value.
 718  * This ratio is never known in advance so no value is set in the stylesheet.
 719  */
 720 figure.img-allocated-height {
 721         position: relative;
 722         background: center / auto rgba(0, 0, 0, 0.05) url(/images/icons/image.png) no-repeat;
 723         margin: 0;
 724 }
 725 figure.img-allocated-height img{
 726         position: absolute;
 727         top: 0;
 728         right: 0;
 729         bottom: 0;
 730         left: 0;
 731         width: 100%;
 732 }
 733
 734 /**
 735  * Horizontal masonry settings START
 736  **/
 737 .masonry-row {
 738         display: -ms-flexbox; /* IE10 */
 739         display: flex;
 740         /* Both the following values should be the same to ensure consistent margins between images in the grid */
 741         column-gap: 5px;
 742         margin-top: 5px;
 743 }
 744 /**
 745  * Horizontal masonry settings AND
 746  **/
 747
 748 #contactblock .icon {
 749         width: 48px;
 750         height: 48px;
 751 }