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