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