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