view/global.css

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