view/global.css

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