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