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