app/javascript/styles/mastodon/widgets.scss

   1 .hero-widget {
   2   margin-bottom: 10px;
   3   box-shadow: 0 0 15px rgba($base-shadow-color, 0.2);
   4
   5   &__img {
   6     width: 100%;
   7     position: relative;
   8     overflow: hidden;
   9     border-radius: 4px 4px 0 0;
  10     background: $base-shadow-color;
  11
  12     img {
  13       object-fit: cover;
  14       display: block;
  15       width: 100%;
  16       height: 100%;
  17       margin: 0;
  18       border-radius: 4px 4px 0 0;
  19     }
  20   }
  21
  22   &__text {
  23     background: $ui-base-color;
  24     padding: 20px;
  25     border-radius: 0 0 4px 4px;
  26     font-size: 15px;
  27     color: $darker-text-color;
  28     line-height: 20px;
  29     word-wrap: break-word;
  30     font-weight: 400;
  31
  32     .emojione {
  33       width: 20px;
  34       height: 20px;
  35       margin: -3px 0 0;
  36     }
  37
  38     p {
  39       margin-bottom: 20px;
  40
  41       &:last-child {
  42         margin-bottom: 0;
  43       }
  44     }
  45
  46     em {
  47       display: inline;
  48       margin: 0;
  49       padding: 0;
  50       font-weight: 700;
  51       background: transparent;
  52       font-family: inherit;
  53       font-size: inherit;
  54       line-height: inherit;
  55       color: lighten($darker-text-color, 10%);
  56     }
  57
  58     a {
  59       color: $secondary-text-color;
  60       text-decoration: none;
  61
  62       &:hover {
  63         text-decoration: underline;
  64       }
  65     }
  66   }
  67
  68   @media screen and (max-width: $no-gap-breakpoint) {
  69     display: none;
  70   }
  71 }
  72
  73 .endorsements-widget {
  74   margin-bottom: 10px;
  75   padding-bottom: 10px;
  76
  77   h4 {
  78     padding: 10px;
  79     text-transform: uppercase;
  80     font-weight: 700;
  81     font-size: 13px;
  82     color: $darker-text-color;
  83   }
  84
  85   .account {
  86     padding: 10px 0;
  87
  88     &:last-child {
  89       border-bottom: 0;
  90     }
  91
  92     .account__display-name {
  93       display: flex;
  94       align-items: center;
  95     }
  96
  97     .account__avatar {
  98       width: 44px;
  99       height: 44px;
 100       background-size: 44px 44px;
 101     }
 102   }
 103
 104   .trends__item {
 105     padding: 10px;
 106   }
 107 }
 108
 109 .trends-widget {
 110   h4 {
 111     color: $darker-text-color;
 112   }
 113 }
 114
 115 .box-widget {
 116   padding: 20px;
 117   border-radius: 4px;
 118   background: $ui-base-color;
 119   box-shadow: 0 0 15px rgba($base-shadow-color, 0.2);
 120 }
 121
 122 .placeholder-widget {
 123   padding: 16px;
 124   border-radius: 4px;
 125   border: 2px dashed $dark-text-color;
 126   text-align: center;
 127   color: $darker-text-color;
 128   margin-bottom: 10px;
 129 }
 130
 131 .contact-widget {
 132   min-height: 100%;
 133   font-size: 15px;
 134   color: $darker-text-color;
 135   line-height: 20px;
 136   word-wrap: break-word;
 137   font-weight: 400;
 138   padding: 0;
 139
 140   h4 {
 141     padding: 10px;
 142     text-transform: uppercase;
 143     font-weight: 700;
 144     font-size: 13px;
 145     color: $darker-text-color;
 146   }
 147
 148   .account {
 149     border-bottom: 0;
 150     padding: 10px 0;
 151     padding-top: 5px;
 152   }
 153
 154   & > a {
 155     display: inline-block;
 156     padding: 10px;
 157     padding-top: 0;
 158     color: $darker-text-color;
 159     text-decoration: none;
 160     white-space: nowrap;
 161     overflow: hidden;
 162     text-overflow: ellipsis;
 163
 164     &:hover,
 165     &:focus,
 166     &:active {
 167       text-decoration: underline;
 168     }
 169   }
 170 }
 171
 172 .moved-account-widget {
 173   padding: 15px;
 174   padding-bottom: 20px;
 175   border-radius: 4px;
 176   background: $ui-base-color;
 177   box-shadow: 0 0 15px rgba($base-shadow-color, 0.2);
 178   color: $secondary-text-color;
 179   font-weight: 400;
 180   margin-bottom: 10px;
 181
 182   strong,
 183   a {
 184     font-weight: 500;
 185
 186     @each $lang in $cjk-langs {
 187       &:lang(#{$lang}) {
 188         font-weight: 700;
 189       }
 190     }
 191   }
 192
 193   a {
 194     color: inherit;
 195     text-decoration: underline;
 196
 197     &.mention {
 198       text-decoration: none;
 199
 200       span {
 201         text-decoration: none;
 202       }
 203
 204       &:focus,
 205       &:hover,
 206       &:active {
 207         text-decoration: none;
 208
 209         span {
 210           text-decoration: underline;
 211         }
 212       }
 213     }
 214   }
 215
 216   &__message {
 217     margin-bottom: 15px;
 218
 219     .fa {
 220       margin-right: 5px;
 221       color: $darker-text-color;
 222     }
 223   }
 224
 225   &__card {
 226     .detailed-status__display-avatar {
 227       position: relative;
 228       cursor: pointer;
 229     }
 230
 231     .detailed-status__display-name {
 232       margin-bottom: 0;
 233       text-decoration: none;
 234
 235       span {
 236         font-weight: 400;
 237       }
 238     }
 239   }
 240 }
 241
 242 .memoriam-widget {
 243   padding: 20px;
 244   border-radius: 4px;
 245   background: $base-shadow-color;
 246   box-shadow: 0 0 15px rgba($base-shadow-color, 0.2);
 247   font-size: 14px;
 248   color: $darker-text-color;
 249   margin-bottom: 10px;
 250 }
 251
 252 .page-header {
 253   background: lighten($ui-base-color, 8%);
 254   box-shadow: 0 0 15px rgba($base-shadow-color, 0.2);
 255   border-radius: 4px;
 256   padding: 60px 15px;
 257   text-align: center;
 258   margin: 10px 0;
 259
 260   h1 {
 261     color: $primary-text-color;
 262     font-size: 36px;
 263     line-height: 1.1;
 264     font-weight: 700;
 265     margin-bottom: 10px;
 266   }
 267
 268   p {
 269     font-size: 15px;
 270     color: $darker-text-color;
 271   }
 272
 273   @media screen and (max-width: $no-gap-breakpoint) {
 274     margin-top: 0;
 275     background: lighten($ui-base-color, 4%);
 276
 277     h1 {
 278       font-size: 24px;
 279     }
 280   }
 281 }
 282
 283 .directory {
 284   background: $ui-base-color;
 285   border-radius: 4px;
 286   box-shadow: 0 0 15px rgba($base-shadow-color, 0.2);
 287
 288   &__tag {
 289     box-sizing: border-box;
 290     margin-bottom: 10px;
 291
 292     & > a,
 293     & > div {
 294       display: flex;
 295       align-items: center;
 296       justify-content: space-between;
 297       background: $ui-base-color;
 298       border-radius: 4px;
 299       padding: 15px;
 300       text-decoration: none;
 301       color: inherit;
 302       box-shadow: 0 0 15px rgba($base-shadow-color, 0.2);
 303     }
 304
 305     & > a {
 306       &:hover,
 307       &:active,
 308       &:focus {
 309         background: lighten($ui-base-color, 8%);
 310       }
 311     }
 312
 313     &.active > a {
 314       background: $ui-highlight-color;
 315       cursor: default;
 316     }
 317
 318     &.disabled > div {
 319       opacity: 0.5;
 320       cursor: default;
 321     }
 322
 323     h4 {
 324       flex: 1 1 auto;
 325       font-size: 18px;
 326       font-weight: 700;
 327       color: $primary-text-color;
 328       white-space: nowrap;
 329       overflow: hidden;
 330       text-overflow: ellipsis;
 331
 332       .fa {
 333         color: $darker-text-color;
 334       }
 335
 336       small {
 337         display: block;
 338         font-weight: 400;
 339         font-size: 15px;
 340         margin-top: 8px;
 341         color: $darker-text-color;
 342       }
 343     }
 344
 345     &.active h4 {
 346       &,
 347       .fa,
 348       small,
 349       .trends__item__current {
 350         color: $primary-text-color;
 351       }
 352     }
 353
 354     .avatar-stack {
 355       flex: 0 0 auto;
 356       width: (36px + 4px) * 3;
 357     }
 358
 359     &.active .avatar-stack .account__avatar {
 360       border-color: $ui-highlight-color;
 361     }
 362
 363     .trends__item__current {
 364       padding-right: 0;
 365     }
 366   }
 367 }
 368
 369 .avatar-stack {
 370   display: flex;
 371   justify-content: flex-end;
 372
 373   .account__avatar {
 374     flex: 0 0 auto;
 375     width: 36px;
 376     height: 36px;
 377     border-radius: 50%;
 378     position: relative;
 379     margin-left: -10px;
 380     background: darken($ui-base-color, 8%);
 381     border: 2px solid $ui-base-color;
 382
 383     &:nth-child(1) {
 384       z-index: 1;
 385     }
 386
 387     &:nth-child(2) {
 388       z-index: 2;
 389     }
 390
 391     &:nth-child(3) {
 392       z-index: 3;
 393     }
 394   }
 395 }
 396
 397 .accounts-table {
 398   width: 100%;
 399
 400   .account {
 401     padding: 0;
 402     border: 0;
 403   }
 404
 405   strong {
 406     font-weight: 700;
 407   }
 408
 409   thead th {
 410     text-align: center;
 411     text-transform: uppercase;
 412     color: $darker-text-color;
 413     font-weight: 700;
 414     padding: 10px;
 415
 416     &:first-child {
 417       text-align: left;
 418     }
 419   }
 420
 421   tbody td {
 422     padding: 15px 0;
 423     vertical-align: middle;
 424     border-bottom: 1px solid lighten($ui-base-color, 8%);
 425   }
 426
 427   tbody tr:last-child td {
 428     border-bottom: 0;
 429   }
 430
 431   &__count {
 432     width: 120px;
 433     text-align: center;
 434     font-size: 15px;
 435     font-weight: 500;
 436     color: $primary-text-color;
 437
 438     small {
 439       display: block;
 440       color: $darker-text-color;
 441       font-weight: 400;
 442       font-size: 14px;
 443     }
 444   }
 445
 446   &__comment {
 447     width: 50%;
 448     vertical-align: initial !important;
 449   }
 450
 451   @media screen and (max-width: $no-gap-breakpoint) {
 452     tbody td.optional {
 453       display: none;
 454     }
 455   }
 456 }
 457
 458 .moved-account-widget,
 459 .memoriam-widget,
 460 .box-widget,
 461 .contact-widget,
 462 .landing-page__information.contact-widget,
 463 .directory,
 464 .page-header {
 465   @media screen and (max-width: $no-gap-breakpoint) {
 466     margin-bottom: 0;
 467     box-shadow: none;
 468     border-radius: 0;
 469   }
 470 }
 471
 472 $maximum-width: 1235px;
 473 $fluid-breakpoint: $maximum-width + 20px;
 474
 475 .statuses-grid {
 476   min-height: 600px;
 477
 478   @media screen and (max-width: 640px) {
 479     width: 100% !important; // Masonry layout is unnecessary at this width
 480   }
 481
 482   &__item {
 483     width: (960px - 20px) / 3;
 484
 485     @media screen and (max-width: $fluid-breakpoint) {
 486       width: (940px - 20px) / 3;
 487     }
 488
 489     @media screen and (max-width: 640px) {
 490       width: 100%;
 491     }
 492
 493     @media screen and (max-width: $no-gap-breakpoint) {
 494       width: 100vw;
 495     }
 496   }
 497
 498   .detailed-status {
 499     border-radius: 4px;
 500
 501     @media screen and (max-width: $no-gap-breakpoint) {
 502       border-top: 1px solid lighten($ui-base-color, 16%);
 503     }
 504
 505     &.compact {
 506       .detailed-status__meta {
 507         margin-top: 15px;
 508       }
 509
 510       .status__content {
 511         font-size: 15px;
 512         line-height: 20px;
 513
 514         .emojione {
 515           width: 20px;
 516           height: 20px;
 517           margin: -3px 0 0;
 518         }
 519
 520         .status__content__spoiler-link {
 521           line-height: 20px;
 522           margin: 0;
 523         }
 524       }
 525
 526       .media-gallery,
 527       .status-card,
 528       .video-player {
 529         margin-top: 15px;
 530       }
 531     }
 532   }
 533 }
 534
 535 .notice-widget {
 536   margin-bottom: 10px;
 537   color: $darker-text-color;
 538
 539   p {
 540     margin-bottom: 10px;
 541
 542     &:last-child {
 543       margin-bottom: 0;
 544     }
 545   }
 546
 547   a {
 548     font-size: 14px;
 549     line-height: 20px;
 550   }
 551 }
 552
 553 .notice-widget,
 554 .placeholder-widget {
 555   a {
 556     text-decoration: none;
 557     font-weight: 500;
 558     color: $ui-highlight-color;
 559
 560     &:hover,
 561     &:focus,
 562     &:active {
 563       text-decoration: underline;
 564     }
 565   }
 566 }
 567
 568 .table-of-contents {
 569   background: darken($ui-base-color, 4%);
 570   min-height: 100%;
 571   font-size: 14px;
 572   border-radius: 4px;
 573
 574   li a {
 575     display: block;
 576     font-weight: 500;
 577     padding: 15px;
 578     overflow: hidden;
 579     white-space: nowrap;
 580     overflow: hidden;
 581     text-overflow: ellipsis;
 582     text-decoration: none;
 583     color: $primary-text-color;
 584     border-bottom: 1px solid lighten($ui-base-color, 4%);
 585
 586     &:hover,
 587     &:focus,
 588     &:active {
 589       text-decoration: underline;
 590     }
 591   }
 592
 593   li:last-child a {
 594     border-bottom: 0;
 595   }
 596
 597   li ul {
 598     padding-left: 20px;
 599     border-bottom: 1px solid lighten($ui-base-color, 4%);
 600   }
 601 }