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     height: 167px;
   8     position: relative;
   9     overflow: hidden;
  10     border-radius: 4px 4px 0 0;
  11     background: $base-shadow-color;
  12
  13     img {
  14       object-fit: cover;
  15       display: block;
  16       width: 100%;
  17       height: 100%;
  18       margin: 0;
  19       border-radius: 4px 4px 0 0;
  20     }
  21   }
  22
  23   &__text {
  24     background: $ui-base-color;
  25     padding: 20px;
  26     border-radius: 0 0 4px 4px;
  27     font-size: 15px;
  28     color: $darker-text-color;
  29     line-height: 20px;
  30     word-wrap: break-word;
  31     font-weight: 400;
  32
  33     .emojione {
  34       width: 20px;
  35       height: 20px;
  36       margin: -3px 0 0;
  37     }
  38
  39     p {
  40       margin-bottom: 20px;
  41
  42       &:last-child {
  43         margin-bottom: 0;
  44       }
  45     }
  46
  47     em {
  48       display: inline;
  49       margin: 0;
  50       padding: 0;
  51       font-weight: 700;
  52       background: transparent;
  53       font-family: inherit;
  54       font-size: inherit;
  55       line-height: inherit;
  56       color: lighten($darker-text-color, 10%);
  57     }
  58
  59     a {
  60       color: $secondary-text-color;
  61       text-decoration: none;
  62
  63       &:hover {
  64         text-decoration: underline;
  65       }
  66     }
  67   }
  68
  69   @media screen and (max-width: $no-gap-breakpoint) {
  70     display: none;
  71   }
  72 }
  73
  74 .endorsements-widget {
  75   margin-bottom: 10px;
  76   padding-bottom: 10px;
  77
  78   h4 {
  79     padding: 10px;
  80     text-transform: uppercase;
  81     font-weight: 700;
  82     font-size: 13px;
  83     color: $darker-text-color;
  84   }
  85
  86   .account {
  87     padding: 10px 0;
  88
  89     &:last-child {
  90       border-bottom: 0;
  91     }
  92
  93     .account__display-name {
  94       display: flex;
  95       align-items: center;
  96     }
  97
  98     .account__avatar {
  99       width: 44px;
 100       height: 44px;
 101       background-size: 44px 44px;
 102     }
 103   }
 104 }
 105
 106 .box-widget {
 107   padding: 20px;
 108   border-radius: 4px;
 109   background: $ui-base-color;
 110   box-shadow: 0 0 15px rgba($base-shadow-color, 0.2);
 111 }
 112
 113 .contact-widget,
 114 .landing-page__information.contact-widget {
 115   box-sizing: border-box;
 116   padding: 20px;
 117   min-height: 100%;
 118   border-radius: 4px;
 119   background: $ui-base-color;
 120   box-shadow: 0 0 15px rgba($base-shadow-color, 0.2);
 121 }
 122
 123 .contact-widget {
 124   font-size: 15px;
 125   color: $darker-text-color;
 126   line-height: 20px;
 127   word-wrap: break-word;
 128   font-weight: 400;
 129
 130   strong {
 131     font-weight: 500;
 132   }
 133
 134   p {
 135     margin-bottom: 10px;
 136
 137     &:last-child {
 138       margin-bottom: 0;
 139     }
 140   }
 141
 142   &__mail {
 143     margin-top: 10px;
 144
 145     a {
 146       color: $primary-text-color;
 147       text-decoration: none;
 148     }
 149   }
 150 }
 151
 152 .moved-account-widget {
 153   padding: 15px;
 154   padding-bottom: 20px;
 155   border-radius: 4px;
 156   background: $ui-base-color;
 157   box-shadow: 0 0 15px rgba($base-shadow-color, 0.2);
 158   color: $secondary-text-color;
 159   font-weight: 400;
 160   margin-bottom: 10px;
 161
 162   strong,
 163   a {
 164     font-weight: 500;
 165
 166     @each $lang in $cjk-langs {
 167       &:lang(#{$lang}) {
 168         font-weight: 700;
 169       }
 170     }
 171   }
 172
 173   a {
 174     color: inherit;
 175     text-decoration: underline;
 176
 177     &.mention {
 178       text-decoration: none;
 179
 180       span {
 181         text-decoration: none;
 182       }
 183
 184       &:focus,
 185       &:hover,
 186       &:active {
 187         text-decoration: none;
 188
 189         span {
 190           text-decoration: underline;
 191         }
 192       }
 193     }
 194   }
 195
 196   &__message {
 197     margin-bottom: 15px;
 198
 199     .fa {
 200       margin-right: 5px;
 201       color: $darker-text-color;
 202     }
 203   }
 204
 205   &__card {
 206     .detailed-status__display-avatar {
 207       position: relative;
 208       cursor: pointer;
 209     }
 210
 211     .detailed-status__display-name {
 212       margin-bottom: 0;
 213       text-decoration: none;
 214
 215       span {
 216         font-weight: 400;
 217       }
 218     }
 219   }
 220 }
 221
 222 .memoriam-widget {
 223   padding: 20px;
 224   border-radius: 4px;
 225   background: $base-shadow-color;
 226   box-shadow: 0 0 15px rgba($base-shadow-color, 0.2);
 227   font-size: 14px;
 228   color: $darker-text-color;
 229   margin-bottom: 10px;
 230 }
 231
 232 .page-header {
 233   background: lighten($ui-base-color, 8%);
 234   box-shadow: 0 0 15px rgba($base-shadow-color, 0.2);
 235   border-radius: 4px;
 236   padding: 60px 15px;
 237   text-align: center;
 238   margin: 10px 0;
 239
 240   h1 {
 241     color: $primary-text-color;
 242     font-size: 36px;
 243     line-height: 1.1;
 244     font-weight: 700;
 245     margin-bottom: 10px;
 246   }
 247
 248   p {
 249     font-size: 15px;
 250     color: $darker-text-color;
 251   }
 252
 253   @media screen and (max-width: $no-gap-breakpoint) {
 254     margin-top: 0;
 255     background: lighten($ui-base-color, 4%);
 256
 257     h1 {
 258       font-size: 24px;
 259     }
 260   }
 261 }
 262
 263 .directory {
 264   background: $ui-base-color;
 265   border-radius: 4px;
 266   box-shadow: 0 0 15px rgba($base-shadow-color, 0.2);
 267
 268   &__tag {
 269     box-sizing: border-box;
 270     margin-bottom: 10px;
 271
 272     a {
 273       display: flex;
 274       align-items: center;
 275       justify-content: space-between;
 276       background: $ui-base-color;
 277       border-radius: 4px;
 278       padding: 15px;
 279       text-decoration: none;
 280       color: inherit;
 281       box-shadow: 0 0 15px rgba($base-shadow-color, 0.2);
 282
 283       &:hover,
 284       &:active,
 285       &:focus {
 286         background: lighten($ui-base-color, 8%);
 287       }
 288     }
 289
 290     &.active a {
 291       background: $ui-highlight-color;
 292       cursor: default;
 293     }
 294
 295     h4 {
 296       flex: 1 1 auto;
 297       font-size: 18px;
 298       font-weight: 700;
 299       color: $primary-text-color;
 300       white-space: nowrap;
 301       overflow: hidden;
 302       text-overflow: ellipsis;
 303
 304       .fa {
 305         color: $darker-text-color;
 306       }
 307
 308       small {
 309         display: block;
 310         font-weight: 400;
 311         font-size: 15px;
 312         margin-top: 8px;
 313         color: $darker-text-color;
 314       }
 315     }
 316
 317     &.active h4 {
 318       &,
 319       .fa,
 320       small {
 321         color: $primary-text-color;
 322       }
 323     }
 324
 325     .avatar-stack {
 326       flex: 0 0 auto;
 327       width: (36px + 4px) * 3;
 328     }
 329
 330     &.active .avatar-stack .account__avatar {
 331       border-color: $ui-highlight-color;
 332     }
 333   }
 334 }
 335
 336 .avatar-stack {
 337   display: flex;
 338   justify-content: flex-end;
 339
 340   .account__avatar {
 341     flex: 0 0 auto;
 342     width: 36px;
 343     height: 36px;
 344     border-radius: 50%;
 345     position: relative;
 346     margin-left: -10px;
 347     border: 2px solid $ui-base-color;
 348
 349     &:nth-child(1) {
 350       z-index: 1;
 351     }
 352
 353     &:nth-child(2) {
 354       z-index: 2;
 355     }
 356
 357     &:nth-child(3) {
 358       z-index: 3;
 359     }
 360   }
 361 }
 362
 363 .accounts-table {
 364   width: 100%;
 365
 366   .account {
 367     padding: 0;
 368     border: 0;
 369   }
 370
 371   thead th {
 372     text-align: center;
 373     text-transform: uppercase;
 374     color: $darker-text-color;
 375     font-weight: 700;
 376     padding: 10px;
 377
 378     &:first-child {
 379       text-align: left;
 380     }
 381   }
 382
 383   tbody td {
 384     padding: 15px 0;
 385     vertical-align: middle;
 386     border-bottom: 1px solid lighten($ui-base-color, 8%);
 387   }
 388
 389   tbody tr:last-child td {
 390     border-bottom: 0;
 391   }
 392
 393   &__count {
 394     width: 120px;
 395     text-align: center;
 396     font-size: 15px;
 397     font-weight: 500;
 398     color: $primary-text-color;
 399
 400     small {
 401       display: block;
 402       color: $darker-text-color;
 403       font-weight: 400;
 404       font-size: 14px;
 405     }
 406   }
 407
 408   @media screen and (max-width: $no-gap-breakpoint) {
 409     tbody td.optional {
 410       display: none;
 411     }
 412   }
 413 }
 414
 415 .moved-account-widget,
 416 .memoriam-widget,
 417 .box-widget,
 418 .contact-widget,
 419 .landing-page__information.contact-widget,
 420 .directory,
 421 .page-header {
 422   @media screen and (max-width: $no-gap-breakpoint) {
 423     margin-bottom: 0;
 424     box-shadow: none;
 425     border-radius: 0;
 426   }
 427 }
 428
 429 $maximum-width: 1235px;
 430 $fluid-breakpoint: $maximum-width + 20px;
 431
 432 .statuses-grid {
 433   min-height: 600px;
 434
 435   &__item {
 436     width: (960px - 20px) / 3;
 437
 438     @media screen and (max-width: $fluid-breakpoint) {
 439       width: (940px - 20px) / 3;
 440     }
 441
 442     @media screen and (max-width: $no-gap-breakpoint) {
 443       width: 100vw;
 444     }
 445   }
 446
 447   .detailed-status {
 448     border-radius: 4px;
 449
 450     @media screen and (max-width: $no-gap-breakpoint) {
 451       border-bottom: 1px solid lighten($ui-base-color, 12%);
 452     }
 453   }
 454 }