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