refresh css from master

This commit is contained in:
Baptiste Lemoine 2020-08-15 17:12:00 +02:00
parent 79f60e91c3
commit 5d92840208
19 changed files with 2097 additions and 977 deletions

View File

@ -22,24 +22,6 @@
color: $darker-text-color;
font-size: 14px;
margin: 0;
&::-moz-focus-inner {
border: 0;
}
&::-moz-focus-inner,
&:focus,
&:active {
outline: 0 !important;
}
&:focus {
background: lighten($ui-base-color, 4%);
}
@media screen and (max-width: 600px) {
font-size: 16px;
}
}
@mixin search-popout {

View File

@ -17,117 +17,86 @@ $small-breakpoint: 960px;
.rich-formatting {
font-family: $font-sans-serif, sans-serif;
font-size: 16px;
font-size: 14px;
font-weight: 400;
font-size: 16px;
line-height: 30px;
line-height: 1.7;
word-wrap: break-word;
color: $darker-text-color;
padding-right: 10px;
a {
color: $highlight-text-color;
text-decoration: underline;
&:hover,
&:focus,
&:active {
text-decoration: none;
}
}
p,
li {
font-family: $font-sans-serif, sans-serif;
font-size: 16px;
font-weight: 400;
font-size: 16px;
line-height: 30px;
margin-bottom: 12px;
color: $darker-text-color;
}
a {
color: $highlight-text-color;
text-decoration: underline;
}
p {
margin-top: 0;
margin-bottom: .85em;
&:last-child {
margin-bottom: 0;
}
}
strong,
em {
strong {
font-weight: 700;
color: lighten($darker-text-color, 10%);
color: $secondary-text-color;
}
em {
font-style: italic;
color: $secondary-text-color;
}
code {
font-size: 0.85em;
background: darken($ui-base-color, 8%);
border-radius: 4px;
padding: 0.2em 0.3em;
}
h1,
h2,
h3,
h4,
h5,
h6 {
font-family: $font-display, sans-serif;
margin-top: 1.275em;
margin-bottom: .85em;
font-weight: 500;
color: $secondary-text-color;
}
h1 {
font-family: $font-display, sans-serif;
font-size: 26px;
line-height: 30px;
font-weight: 500;
margin-bottom: 20px;
color: $secondary-text-color;
small {
font-family: $font-sans-serif, sans-serif;
display: block;
font-size: 18px;
font-weight: 400;
color: lighten($darker-text-color, 10%);
}
font-size: 2em;
}
h2 {
font-family: $font-display, sans-serif;
font-size: 22px;
line-height: 26px;
font-weight: 500;
margin-bottom: 20px;
color: $secondary-text-color;
font-size: 1.75em;
}
h3 {
font-family: $font-display, sans-serif;
font-size: 18px;
line-height: 24px;
font-weight: 500;
margin-bottom: 20px;
color: $secondary-text-color;
font-size: 1.5em;
}
h4 {
font-family: $font-display, sans-serif;
font-size: 16px;
line-height: 24px;
font-weight: 500;
margin-bottom: 20px;
color: $secondary-text-color;
}
h5 {
font-family: $font-display, sans-serif;
font-size: 14px;
line-height: 24px;
font-weight: 500;
margin-bottom: 20px;
color: $secondary-text-color;
font-size: 1.25em;
}
h5,
h6 {
font-family: $font-display, sans-serif;
font-size: 12px;
line-height: 24px;
font-weight: 500;
margin-bottom: 20px;
color: $secondary-text-color;
}
ul,
ol {
margin-left: 20px;
&[type='a'] {
list-style-type: lower-alpha;
}
&[type='i'] {
list-style-type: lower-roman;
}
font-size: 1em;
}
ul {
@ -138,23 +107,90 @@ $small-breakpoint: 960px;
list-style: decimal;
}
li > ol,
li > ul {
margin-top: 6px;
ul,
ol {
margin: 0;
padding: 0;
padding-left: 2em;
margin-bottom: 0.85em;
&[type='a'] {
list-style-type: lower-alpha;
}
&[type='i'] {
list-style-type: lower-roman;
}
}
hr {
width: 100%;
height: 0;
border: 0;
border-bottom: 1px solid rgba($ui-base-lighter-color, .6);
margin: 20px 0;
border-bottom: 1px solid lighten($ui-base-color, 4%);
margin: 1.7em 0;
&.spacer {
height: 1px;
border: 0;
}
}
table {
width: 100%;
border-collapse: collapse;
break-inside: auto;
margin-top: 24px;
margin-bottom: 32px;
thead tr,
tbody tr {
border-bottom: 1px solid lighten($ui-base-color, 4%);
font-size: 1em;
line-height: 1.625;
font-weight: 400;
text-align: left;
color: $darker-text-color;
}
thead tr {
border-bottom-width: 2px;
line-height: 1.5;
font-weight: 500;
color: $dark-text-color;
}
th,
td {
padding: 8px;
align-self: start;
align-items: start;
word-break: break-all;
&.nowrap {
width: 25%;
position: relative;
&::before {
content: ' ';
visibility: hidden;
}
span {
position: absolute;
left: 8px;
right: 8px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
}
}
}
& > :first-child {
margin-top: 0;
}
}
.information-board {
@ -416,7 +452,7 @@ $small-breakpoint: 960px;
}
&__call-to-action {
background: darken($ui-base-color, 4%);
background: $ui-base-color;
border-radius: 4px;
padding: 25px 40px;
overflow: hidden;
@ -507,12 +543,6 @@ $small-breakpoint: 960px;
flex: 0 0 auto;
}
&__avatar {
width: 44px;
height: 44px;
background-size: 44px 44px;
}
.display-name {
font-size: 15px;
@ -713,16 +743,15 @@ $small-breakpoint: 960px;
display: flex;
align-items: center;
}
}
.account__avatar {
width: 44px;
height: 44px;
background-size: 44px 44px;
}
&__counters__wrapper {
display: flex;
}
&__counter {
padding: 10px;
width: 50%;
strong {
font-family: $font-display, sans-serif;

View File

@ -1,16 +1,13 @@
$black-emojis: '8ball' 'ant' 'back' 'black_circle' 'black_heart' 'black_large_square' 'black_medium_small_square' 'black_medium_square' 'black_nib' 'black_small_square' 'bomb' 'bowling' 'bust_in_silhouette' 'busts_in_silhouette' 'camera' 'camera_with_flash' 'clubs' 'copyright' 'curly_loop' 'currency_exchange' 'dark_sunglasses' 'eight_pointed_black_star' 'electric_plug' 'end' 'female-guard' 'film_projector' 'fried_egg' 'gorilla' 'guardsman' 'heavy_check_mark' 'heavy_division_sign' 'heavy_dollar_sign' 'heavy_minus_sign' 'heavy_multiplication_x' 'heavy_plus_sign' 'hocho' 'hole' 'joystick' 'kaaba' 'lower_left_ballpoint_pen' 'lower_left_fountain_pen' 'male-guard' 'microphone' 'mortar_board' 'movie_camera' 'musical_score' 'on' 'registered' 'soon' 'spades' 'speaking_head_in_silhouette' 'spider' 'telephone_receiver' 'tm' 'top' 'tophat' 'turkey' 'vhs' 'video_camera' 'video_game' 'water_buffalo' 'waving_black_flag' 'wavy_dash';
$emojis-requiring-inversion: 'back' 'copyright' 'curly_loop' 'currency_exchange' 'end' 'heavy_check_mark' 'heavy_division_sign' 'heavy_dollar_sign' 'heavy_minus_sign' 'heavy_multiplication_x' 'heavy_plus_sign' 'on' 'registered' 'soon' 'spider' 'telephone_receiver' 'tm' 'top' 'wavy_dash' !default;
%white-emoji-outline {
filter: drop-shadow(1px 1px 0 $white) drop-shadow(-1px 1px 0 $white) drop-shadow(1px -1px 0 $white) drop-shadow(-1px -1px 0 $white);
transform: scale(.71);
%emoji-color-inversion {
filter: invert(1);
}
.emojione {
@each $emoji in $black-emojis {
@each $emoji in $emojis-requiring-inversion {
&[title=':#{$emoji}:'] {
@extend %white-emoji-outline;
@extend %emoji-color-inversion;
}
}
}

View File

@ -13,7 +13,7 @@
&:active,
&:focus {
.card__bar {
background: lighten($ui-base-color, 4%);
background: lighten($ui-base-color, 8%);
}
}
}
@ -76,6 +76,10 @@
margin-left: 15px;
text-align: left;
i[data-hidden] {
display: none;
}
strong {
font-size: 15px;
color: $primary-text-color;
@ -224,6 +228,7 @@
}
.account__header__fields {
max-width: 100vw;
padding: 0;
margin: 15px -15px -15px;
border: 0 none;
@ -320,44 +325,3 @@
margin-top: 10px;
}
}
.sidebar__toggle__icon{
margin: 0.5em;
padding: 2em;
margin-left: -2em;
}
.sidebar__toggle{
padding: 2em;
}
.sidebar__toggle__logo, .sidebar__toggle{
display: none;
}
.account--panel{
width: 100%;
}
.account-authorize--more-data{
margin-bottom: 1em;
display: flex;
a{
padding: 1em;
margin-bottom: 1em;
flex: auto;
}
}
@media screen and (max-width: 600px) {
.sidebar__toggle__logo , .sidebar__toggle{
display: block;
}
}
.directory__card{
.u-photo{
max-width: 5em;
}
.directory__card__img{
img{
max-width: 100%;
}
}
}

View File

@ -1,25 +1,70 @@
$no-columns-breakpoint: 600px;
$sidebar-width: 20vw;
$content-width: 80vw;
$sidebar-width: 240px;
$content-width: 840px;
.admin-wrapper {
display: flex;
justify-content: center;
height: 100%;
width: 100%;
min-height: 100vh;
.sidebar-wrapper {
flex: 1 1 $sidebar-width;
height: 100%;
background: $ui-base-color;
display: flex;
justify-content: flex-end;
min-height: 100vh;
overflow: hidden;
pointer-events: none;
flex: 1 1 auto;
&__inner {
display: flex;
justify-content: flex-end;
background: $ui-base-color;
height: 100%;
}
}
.sidebar {
width: $sidebar-width;
height: 100%;
padding: 0;
overflow-y: auto;
pointer-events: auto;
&__toggle {
display: none;
background: lighten($ui-base-color, 8%);
height: 48px;
&__logo {
flex: 1 1 auto;
a {
display: inline-block;
padding: 15px;
}
svg {
fill: $primary-text-color;
height: 20px;
position: relative;
bottom: -2px;
}
}
&__icon {
display: block;
color: $darker-text-color;
text-decoration: none;
flex: 0 0 auto;
font-size: 20px;
padding: 15px;
}
a {
&:hover,
&:focus,
&:active {
background: lighten($ui-base-color, 12%);
}
}
}
.logo {
display: block;
@ -52,6 +97,9 @@ $content-width: 80vw;
transition: all 200ms linear;
transition-property: color, background-color;
border-radius: 4px 0 0 4px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
i.fa {
margin-right: 5px;
@ -99,15 +147,31 @@ $content-width: 80vw;
}
.content-wrapper {
flex: 2 1 $content-width;
overflow: auto;
box-sizing: border-box;
width: 100%;
max-width: $content-width;
flex: 1 1 auto;
}
@media screen and (max-width: $content-width + $sidebar-width) {
.sidebar-wrapper--empty {
display: none;
}
.sidebar-wrapper {
width: $sidebar-width;
flex: 0 0 auto;
}
}
@media screen and (max-width: $no-columns-breakpoint) {
.sidebar-wrapper {
width: 100%;
}
}
.content {
max-width: $content-width;
padding: 20px 15px;
padding-top: 60px;
padding-left: 25px;
padding: 55px 15px 20px 25px;
@media screen and (max-width: $no-columns-breakpoint) {
max-width: none;
@ -115,14 +179,46 @@ $content-width: 80vw;
padding-top: 30px;
}
&-heading {
display: flex;
padding-bottom: 36px;
border-bottom: 1px solid lighten($ui-base-color, 8%);
margin: -15px -15px 40px 0;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
& > * {
margin-top: 15px;
margin-right: 15px;
}
&-actions {
display: inline-flex;
& > :not(:first-child) {
margin-left: 5px;
}
}
@media screen and (max-width: $no-columns-breakpoint) {
border-bottom: 0;
padding-bottom: 0;
}
}
h2 {
color: $secondary-text-color;
font-size: 24px;
line-height: 28px;
line-height: 36px;
font-weight: 400;
padding-bottom: 40px;
border-bottom: 1px solid lighten($ui-base-color, 8%);
margin-bottom: 40px;
@media screen and (max-width: $no-columns-breakpoint) {
font-weight: 700;
}
}
h3 {
@ -147,7 +243,7 @@ $content-width: 80vw;
font-size: 16px;
color: $secondary-text-color;
line-height: 28px;
font-weight: 400;
font-weight: 500;
}
.fields-group h6 {
@ -176,7 +272,7 @@ $content-width: 80vw;
& > p {
font-size: 14px;
line-height: 18px;
line-height: 21px;
color: $secondary-text-color;
margin-bottom: 20px;
@ -208,20 +304,42 @@ $content-width: 80vw;
@media screen and (max-width: $no-columns-breakpoint) {
display: block;
overflow-y: auto;
-webkit-overflow-scrolling: touch;
.sidebar-wrapper,
.content-wrapper {
flex: 0 0 auto;
height: auto;
overflow: initial;
.sidebar-wrapper {
min-height: 0;
}
.sidebar {
width: 100%;
padding: 0;
height: auto;
&__toggle {
display: flex;
}
& > ul {
display: none;
}
ul a,
ul ul a {
border-radius: 0;
border-bottom: 1px solid lighten($ui-base-color, 4%);
transition: none;
&:hover {
transition: none;
}
}
ul ul {
border-radius: 0;
}
ul .simple-navigation-active-leaf a {
border-bottom-color: $ui-highlight-color;
}
}
}
}
@ -233,32 +351,35 @@ hr.spacer {
height: 1px;
}
.muted-hint {
color: $darker-text-color;
body,
.admin-wrapper .content {
.muted-hint {
color: $darker-text-color;
a {
color: $highlight-text-color;
a {
color: $highlight-text-color;
}
}
}
.positive-hint {
color: $valid-value-color;
font-weight: 500;
}
.positive-hint {
color: $valid-value-color;
font-weight: 500;
}
.negative-hint {
color: $error-value-color;
font-weight: 500;
}
.negative-hint {
color: $error-value-color;
font-weight: 500;
}
.neutral-hint {
color: $dark-text-color;
font-weight: 500;
}
.neutral-hint {
color: $dark-text-color;
font-weight: 500;
}
.warning-hint {
color: $gold-star;
font-weight: 500;
.warning-hint {
color: $gold-star;
font-weight: 500;
}
}
.filters {
@ -267,10 +388,10 @@ hr.spacer {
.filter-subset {
flex: 0 0 auto;
margin: 0 40px 10px 0;
margin: 0 40px 20px 0;
&:last-child {
margin-bottom: 20px;
margin-bottom: 30px;
}
ul {
@ -295,6 +416,11 @@ hr.spacer {
}
}
&--with-select strong {
display: block;
margin-bottom: 10px;
}
a {
display: inline-block;
color: $darker-text-color;
@ -384,6 +510,16 @@ hr.spacer {
max-width: 100%;
}
.simple_form {
.actions {
margin-top: 15px;
}
.button {
font-size: 15px;
}
}
.batch-form-box {
display: flex;
flex-wrap: wrap;
@ -423,24 +559,39 @@ hr.spacer {
}
}
.special-action-button,
.back-link {
text-align: right;
flex: 1 1 auto;
}
.action-buttons {
display: flex;
overflow: hidden;
justify-content: space-between;
}
.spacer {
flex: 1 1 auto;
}
.log-entry {
margin-bottom: 20px;
line-height: 20px;
padding: 15px 0;
background: $ui-base-color;
border-bottom: 1px solid lighten($ui-base-color, 4%);
&:last-child {
border-bottom: 0;
}
&__header {
display: flex;
justify-content: flex-start;
align-items: center;
padding: 10px;
background: $ui-base-color;
color: $darker-text-color;
border-radius: 4px 4px 0 0;
font-size: 14px;
position: relative;
padding: 0 10px;
}
&__avatar {
@ -467,44 +618,6 @@ hr.spacer {
color: $dark-text-color;
}
&__extras {
background: lighten($ui-base-color, 6%);
border-radius: 0 0 4px 4px;
padding: 10px;
color: $darker-text-color;
font-family: $font-monospace, monospace;
font-size: 12px;
word-wrap: break-word;
min-height: 20px;
}
&__icon {
font-size: 28px;
margin-right: 10px;
color: $dark-text-color;
}
&__icon__overlay {
position: absolute;
top: 10px;
right: 10px;
width: 10px;
height: 10px;
border-radius: 50%;
&.positive {
background: $success-green;
}
&.negative {
background: lighten($error-red, 12%);
}
&.neutral {
background: $ui-highlight-color;
}
}
a,
.username,
.target {
@ -512,18 +625,6 @@ hr.spacer {
text-decoration: none;
font-weight: 500;
}
.diff-old {
color: lighten($error-red, 12%);
}
.diff-neutral {
color: $secondary-text-color;
}
.diff-new {
color: $success-green;
}
}
a.name-tag,
@ -717,8 +818,101 @@ a.name-tag,
vertical-align: middle;
}
.admin-account-bio {
display: flex;
flex-wrap: wrap;
margin: 0 -5px;
margin-top: 20px;
.administrate-stuff {
margin-right: 1ch;
color: $classic-highlight-color;
> div {
box-sizing: border-box;
padding: 0 5px;
margin-bottom: 10px;
flex: 1 0 50%;
}
.account__header__fields,
.account__header__content {
background: lighten($ui-base-color, 8%);
border-radius: 4px;
height: 100%;
}
.account__header__fields {
margin: 0;
border: 0;
a {
color: lighten($ui-highlight-color, 8%);
}
dl:first-child .verified {
border-radius: 0 4px 0 0;
}
.verified a {
color: $valid-value-color;
}
}
.account__header__content {
box-sizing: border-box;
padding: 20px;
color: $primary-text-color;
}
}
.center-text {
text-align: center;
}
.announcements-list {
border: 1px solid lighten($ui-base-color, 4%);
border-radius: 4px;
&__item {
padding: 15px 0;
background: $ui-base-color;
border-bottom: 1px solid lighten($ui-base-color, 4%);
&__title {
padding: 0 15px;
display: block;
font-weight: 500;
font-size: 18px;
line-height: 1.5;
color: $secondary-text-color;
text-decoration: none;
margin-bottom: 10px;
&:hover,
&:focus,
&:active {
color: $primary-text-color;
}
}
&__meta {
padding: 0 15px;
color: $dark-text-color;
}
&__action-bar {
display: flex;
justify-content: space-between;
align-items: center;
}
&:last-child {
border-bottom: 0;
}
}
}
.account-badges {
margin: -2px 0;
}
.dashboard__counters.admin-account-counters {
margin-top: 10px;
}

View File

@ -68,7 +68,32 @@ body {
}
&.player {
text-align: center;
padding: 0;
margin: 0;
position: absolute;
width: 100%;
height: 100%;
overflow: hidden;
& > div {
height: 100%;
}
.video-player video {
width: 100%;
height: 100%;
max-height: 100vh;
}
.media-gallery {
margin-top: 0;
height: 100% !important;
border-radius: 0;
}
.media-gallery__item {
border-radius: 0;
}
}
&.embed {
@ -86,9 +111,6 @@ body {
&.admin {
background: darken($ui-base-color, 4%);
position: fixed;
width: 100%;
height: 100%;
padding: 0;
}
@ -138,13 +160,18 @@ button {
.app-holder {
&,
& > div {
& > div,
& > noscript {
display: flex;
width: 100%;
align-items: center;
justify-content: center;
outline: 0 !important;
}
& > noscript {
height: 100vh;
}
}
.layout-single-column .app-holder {
@ -161,52 +188,85 @@ button {
}
}
.error-boundary,
.app-holder noscript {
flex-direction: column;
font-size: 16px;
font-weight: 400;
line-height: 1.7;
color: lighten($error-red, 4%);
text-align: center;
.media-gallery {
margin-left: 0;
}
& > div {
max-width: 500px;
}
.debug, .well {
padding: 0.5rem;
border: solid 1px greenyellow;
background: yellow;
color: #222;
p {
margin-bottom: .85em;
}
&:last-child {
margin-bottom: 0;
}
}
.spacer {
display: block;
padding: 1em;
}
a {
color: $highlight-text-color;
.small-texts {
.timelines {
.column-link {
&:hover,
&:focus,
&:active {
text-decoration: none;
}
}
&__footer {
color: $dark-text-color;
font-size: 13px;
a {
color: $dark-text-color;
}
}
button {
display: inline;
border: 0;
background: transparent;
color: $dark-text-color;
font: inherit;
padding: 0;
margin: 0;
line-height: inherit;
cursor: pointer;
outline: 0;
transition: color 300ms linear;
text-decoration: underline;
&:hover,
&:focus,
&:active {
text-decoration: none;
}
span {
display: none;
&.copied {
color: $valid-value-color;
transition: none;
}
}
}
.clickable {
cursor: pointer;
.logo-resources {
display: none;
}
&:hover {
color: $ui-highlight-color;
// NoScript adds a __ns__pop2top class to the full ancestry of blocked elements,
// to set the z-index to a high value, which messes with modals and dropdowns.
// Blocked elements can in theory only be media and frames/embeds, so they
// should only appear in statuses, under divs and articles.
body,
div,
article {
.__ns__pop2top {
z-index: unset !important;
}
}
.pull-right {
float: right;
}
.pull-left {
float: left;
}
.content-heading-actions{
@extend .pull-right;
}

File diff suppressed because one or more lines are too long

File diff suppressed because it is too large Load Diff

View File

@ -21,7 +21,7 @@
justify-content: center;
align-items: center;
svg {
> svg {
fill: $primary-text-color;
height: 42px;
margin-right: 10px;
@ -141,6 +141,63 @@
grid-row: 3;
}
@media screen and (max-width: $no-gap-breakpoint) {
grid-gap: 0;
grid-template-columns: minmax(0, 100%);
.column-0 {
grid-column: 1;
}
.column-1 {
grid-column: 1;
grid-row: 3;
}
.column-2 {
grid-column: 1;
grid-row: 2;
}
.column-3 {
grid-column: 1;
grid-row: 4;
}
}
}
.grid-4 {
display: grid;
grid-gap: 10px;
grid-template-columns: repeat(4, minmax(0, 1fr));
grid-auto-columns: 25%;
grid-auto-rows: max-content;
.column-0 {
grid-column: 1 / 5;
grid-row: 1;
}
.column-1 {
grid-column: 1 / 4;
grid-row: 2;
}
.column-2 {
grid-column: 4;
grid-row: 2;
}
.column-3 {
grid-column: 2 / 5;
grid-row: 3;
}
.column-4 {
grid-column: 1;
grid-row: 3;
}
.landing-page__call-to-action {
min-height: 100%;
}
@ -189,6 +246,11 @@
}
.column-3 {
grid-column: 1;
grid-row: 5;
}
.column-4 {
grid-column: 1;
grid-row: 4;
}
@ -350,6 +412,20 @@
}
}
.directory__card {
border-radius: 4px;
@media screen and (max-width: $no-gap-breakpoint) {
border-radius: 0;
}
}
.page-header {
@media screen and (max-width: $no-gap-breakpoint) {
border-bottom: 0;
}
}
.public-account-header {
overflow: hidden;
margin-bottom: 10px;
@ -570,7 +646,7 @@
}
.counter {
width: 33.3%;
min-width: 33.3%;
box-sizing: border-box;
flex: 0 0 auto;
color: $darker-text-color;
@ -753,14 +829,22 @@
}
}
.static-icon-button {
color: $action-button-color;
font-size: 18px;
.directory__list {
display: grid;
grid-gap: 10px;
grid-template-columns: minmax(0, 50%) minmax(0, 50%);
& > span {
font-size: 14px;
font-weight: 500;
@media screen and (max-width: $no-gap-breakpoint) {
display: block;
}
.icon-button {
font-size: 18px;
}
}
.directory__card {
margin-bottom: 0;
}
.card-grid {

View File

@ -15,6 +15,8 @@
padding: 20px;
background: lighten($ui-base-color, 4%);
border-radius: 4px;
box-sizing: border-box;
height: 100%;
}
& > a {

View File

@ -128,64 +128,10 @@
&:hover,
&:focus,
&:active {
svg path {
svg {
fill: lighten($ui-base-color, 38%);
}
}
}
}
}
*|*:link, *|*:visited {
color: $ui-primary-color !important;
&:hover {
color: $ui-highlight-color !important;
background: $dark-text-color !important;
}
}
.getting-started__footer,
.links-started__footer {
display: block;
//position: fixed;
//bottom: 0;
//left: 1em;
//width: 268px;
z-index: 10;
font-size: 0.85em;
.fa {
margin-right: 1ch;
}
ul {
list-style-type: none;
}
li {
list-style-type: none;
padding: 0.15rem 0;
display: inline-block;
width: auto;
&.tag-element, a {
color: $ui-primary-color !important;
padding: 0.25em;
&:hover {
color: $ui-highlight-color !important;
background: $dark-text-color !important;
}
}
}
i {
margin: 0.5ch;
}
a {
margin-left: 2ch;
}
}

View File

@ -1,40 +1,4 @@
$no-columns-breakpoint: 600px;
table {
thead {
th {
font-weight: 800;
background: $ui-highlight-color;
}
}
td, th {
padding: 1rem;
}
a {
@extend .text-btn
}
}
.table-responsive {
width: 100%;
}
.table-striped {
margin: 1rem 0;
tr {
&:odd {
background: $ui-base-lighter-color;
}
}
}
.group-form {
}
code {
font-family: $font-monospace, monospace;
@ -120,7 +84,7 @@ code {
position: absolute;
margin: 0 4px;
margin-top: -2px;
background: $ui-highlight-color;
color: $white;
}
}
}
@ -149,6 +113,15 @@ code {
padding: 0.2em 0.4em;
background: darken($ui-base-color, 12%);
}
li {
list-style: disc;
margin-left: 18px;
}
}
ul.hint {
margin-bottom: 15px;
}
span.hint {
@ -170,6 +143,10 @@ code {
}
}
.otp-hint {
margin-bottom: 25px;
}
.card {
margin-bottom: 15px;
}
@ -250,6 +227,12 @@ code {
}
}
.input.datetime .label_input select {
display: inline-block;
width: auto;
flex: 0;
}
.required abbr {
text-decoration: none;
color: lighten($error-value-color, 12%);
@ -282,6 +265,10 @@ code {
&-6 {
max-width: 50%;
}
.actions {
margin-top: 27px;
}
}
.fields-group:last-child,
@ -303,6 +290,14 @@ code {
margin-bottom: 25px;
}
}
.fields-group.invited-by {
margin-bottom: 30px;
.hint {
text-align: center;
}
}
}
.input.radio_buttons .radio label {
@ -362,6 +357,10 @@ code {
border-radius: 4px;
padding: 10px;
&::placeholder {
color: lighten($darker-text-color, 4%);
}
&:invalid {
box-shadow: none;
}
@ -533,6 +532,10 @@ code {
&__overlay-area {
position: relative;
&__blurred form {
filter: blur(2px);
}
&__overlay {
position: absolute;
top: 0;
@ -543,8 +546,10 @@ code {
justify-content: center;
align-items: center;
background: rgba($ui-base-color, 0.65);
backdrop-filter: blur(2px);
border-radius: 4px;
margin-left: -4px;
margin-top: -4px;
padding: 4px;
&__content {
text-align: center;
@ -583,7 +588,7 @@ code {
&.alert {
border: 1px solid rgba($error-value-color, 0.5);
background: rgba($error-value-color, 0.25);
background: rgba($error-value-color, 0.1);
color: $error-value-color;
}
@ -643,6 +648,15 @@ code {
@media screen and (max-width: 740px) and (min-width: 441px) {
margin-top: 40px;
}
&.translation-prompt {
text-align: unset;
color: unset;
a {
text-decoration: underline;
}
}
}
.form-footer {
@ -964,8 +978,3 @@ code {
flex-direction: row;
}
}
.compose-form__publish-button-wrapper {
width: 100%;
display: block;
}

View File

@ -3,9 +3,10 @@
flex-direction: column;
justify-content: center;
align-items: center;
height: 100vh;
background: $ui-base-color;
@media screen and (max-width: 920px) {
background: darken($ui-base-color, 8%);
display: block !important;
}

View File

@ -1,135 +0,0 @@
$messagingBoxWidth: 15em;
$messagingBoxHeight: 20em;
.fixed-box {
border: solid 1px white;
padding: 1em;
position: fixed;
bottom: 0;
}
.airmail-border {
border: 0.25em solid transparent;
border-image: 4 repeating-linear-gradient(-45deg, red 0, red 1em, white 0, white 2em,
#58a 0, #58a 3em, white 0, white 4em);
}
.status-direct,
.item-list .conversation {
@extend .airmail-border;
padding: 0.5em 1em;
}
.messaging-box {
@extend .fixed-box;
right: 1em;
width: $messagingBoxWidth;
background: $ui-base-color;
.messager-textarea {
width: 100%;
}
}
.conversation {
.conversation__content {
padding-right: 0;
}
.conversation_reply,
.icon-button {
&:hover {
color: $ui-highlight-color;
background: mix($ui-base-color, $ui-secondary-color);
}
}
.conversation_reply,
.icon-button,
.status__action-bar-dropdown {
display: inline-block;
float: right;
width: 18em;
height: 3.2em;
text-align: center;
}
}
.conversations_list {
right: 1em;
position: absolute;
bottom: 0;
width: 100%;
padding: 0.5em;
background: gray;
}
.conversation-item {
@extend .fixed-box;
width: $messagingBoxWidth;
right: $messagingBoxWidth + 5em;
background: $ui-secondary-color;
&.has-new-message {
background: $ui-highlight-color;
color: $classic-primary-color;
}
}
.conversation_created-at {
margin-right: 1em;
}
.conversation_stream {
padding-top: 1em;
height: $messagingBoxHeight;
overflow: auto;
background: $ui-secondary-color;
.message {
-webkit-border-radius: 0.5rem;
-moz-border-radius: 0.5rem;
border-radius: 0.5rem;
margin-bottom: 0.5em;
padding: 0.5em 1em;
width: 80%;
}
.mine {
text-align: right;
background: $classic-primary-color;
float: right;
.arrow-down {
border-top-color: $classic-primary-color;
left: 1em;
}
}
.theirs {
text-align: left;
background: $ui-highlight-color;
float: left;
.arrow-down {
border-top-color: $ui-highlight-color;
right: 1em;
}
}
.arrow-down {
width: 0;
height: 0;
border-left: 10px solid transparent;
border-right: 20px solid transparent;
border-top: 20px solid $classic-primary-color;
position: relative;
bottom: -1em;
}
}

View File

@ -5,32 +5,64 @@
li {
margin-bottom: 10px;
position: relative;
height: 18px + 12px;
}
&__chart {
position: absolute;
top: 0;
left: 0;
height: 100%;
display: inline-block;
border-radius: 4px;
background: darken($ui-primary-color, 14%);
display: block;
background: darken($ui-primary-color, 5%);
height: 5px;
min-width: 1%;
&.leading {
background: $ui-highlight-color;
}
}
&__text {
progress {
border: 0;
display: block;
width: 100%;
height: 5px;
appearance: none;
background: transparent;
&::-webkit-progress-bar {
background: transparent;
}
// Those rules need to be entirely separate or they won't work, hence the
// duplication
&::-moz-progress-bar {
border-radius: 4px;
background: darken($ui-primary-color, 5%);
}
&::-ms-fill {
border-radius: 4px;
background: darken($ui-primary-color, 5%);
}
&::-webkit-progress-value {
border-radius: 4px;
background: darken($ui-primary-color, 5%);
}
}
&__option {
position: relative;
display: inline-block;
display: flex;
padding: 6px 0;
line-height: 18px;
cursor: default;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
&__text {
display: inline-block;
word-wrap: break-word;
overflow-wrap: break-word;
max-width: calc(100% - 45px - 25px);
}
input[type=radio],
input[type=checkbox] {
@ -82,6 +114,9 @@
top: -1px;
border-radius: 50%;
vertical-align: middle;
margin-top: auto;
margin-bottom: auto;
flex: 0 0 18px;
&.checkbox {
border-radius: 4px;
@ -91,14 +126,39 @@
border-color: $valid-value-color;
background: $valid-value-color;
}
&:active,
&:focus,
&:hover {
border-color: lighten($valid-value-color, 15%);
border-width: 4px;
}
&::-moz-focus-inner {
outline: 0 !important;
border: 0;
}
&:focus,
&:active {
outline: 0 !important;
}
}
&__number {
display: inline-block;
width: 36px;
width: 45px;
font-weight: 700;
padding: 0 10px;
text-align: right;
flex: 0 0 45px;
}
&__voted {
padding: 0 5px;
display: inline-block;
&__mark {
font-size: 18px;
}
}
&__footer {
@ -151,6 +211,10 @@
button,
select {
flex: 1 1 50%;
&:focus {
border-color: $highlight-text-color;
}
}
}
@ -169,7 +233,7 @@
display: flex;
align-items: center;
.poll__text {
.poll__option {
flex: 0 0 auto;
width: calc(100% - (23px + 6px));
margin-right: 6px;

View File

@ -7,6 +7,34 @@ body.rtl {
padding-right: 15px;
}
.radio-button__input {
margin-right: 0;
margin-left: 10px;
}
.directory__card__bar .display-name {
margin-left: 0;
margin-right: 15px;
}
.display-name {
text-align: right;
}
.notification__message {
margin-left: 0;
margin-right: 68px;
}
.drawer__inner__mastodon > img {
transform: scaleX(-1);
}
.notification__favourite-icon-wrapper {
left: auto;
right: -26px;
}
.landing-page__logo {
margin-right: 0;
margin-left: 20px;
@ -130,12 +158,12 @@ body.rtl {
}
.status__relative-time,
.status__visibility-icon,
.activity-stream .status.light .status__header .status__meta {
float: left;
}
.status__action-bar {
&__counter {
margin-right: 0;
margin-left: 11px;
@ -328,6 +356,12 @@ body.rtl {
}
}
.columns-area--mobile .column,
.columns-area--mobile .drawer {
padding-left: 0;
padding-right: 0;
}
.public-layout {
.header {
.nav-button {

View File

@ -19,58 +19,55 @@
margin: 0;
box-shadow: none;
}
.detailed-status,
.status {
border-radius: 0 !important;
img {
max-width: 100%;
}
}
}
div[data-component] {
width: 100%;
}
.status__content__text{
min-height: 3em;
}
.entry {
background: $ui-base-color;
.account__avatar {
max-width: 5em;
}
.detailed-status,
.status,
.load-more {
animation: none;
}
&:last-child {
.detailed-status,
.status,
.load-more {
border-bottom: 0;
border-radius: 0 0 4px 4px;
.status {
border-radius: 0 !important;
}
}
&:first-child {
div[data-component] {
width: 100%;
}
.entry {
background: $ui-base-color;
.detailed-status,
.status,
.load-more {
border-radius: 4px 4px 0 0;
animation: none;
}
&:last-child {
.detailed-status,
.status,
.load-more {
border-radius: 4px;
border-bottom: 0;
border-radius: 0 0 4px 4px;
}
}
&:first-child {
.detailed-status,
.status,
.load-more {
border-radius: 4px 4px 0 0;
}
&:last-child {
.detailed-status,
.status,
.load-more {
border-radius: 4px;
}
}
}
@media screen and (max-width: 740px) {
.detailed-status,
.status,
.load-more {
border-radius: 0 !important;
}
}
}
@ -78,17 +75,8 @@ div[data-component] {
&--highlighted .entry {
background: lighten($ui-base-color, 8%);
}
@media screen and (max-width: 740px) {
.detailed-status,
.status,
.load-more {
border-radius: 0 !important;
}
}
}
.button.logo-button {
flex: 0 auto;
font-size: 14px;
@ -111,8 +99,9 @@ div[data-component] {
&:active,
&:focus,
&:hover {
background: lighten($ui-highlight-color, 4%);
background: lighten($ui-highlight-color, 10%);
}
&:disabled,
&.disabled {
&:active,
@ -139,14 +128,24 @@ div[data-component] {
.embed,
.public-layout {
.detailed-status {
padding: 15px;
.status__content[data-spoiler=folded] {
.e-content {
display: none;
}
.account__avatar {
max-width: 5em;
p:first-child {
margin-bottom: 0;
}
}
.detailed-status {
padding: 15px;
.detailed-status__display-avatar .account__avatar {
width: 48px;
height: 48px;
}
}
.status {
padding: 15px 15px 15px (48px + 15px * 2);
@ -155,6 +154,11 @@ div[data-component] {
&__avatar {
left: 15px;
top: 17px;
.account__avatar {
width: 48px;
height: 48px;
}
}
&__content {
@ -175,5 +179,12 @@ div[data-component] {
.video-player {
margin-top: 10px;
}
&__action-bar-button {
font-size: 18px;
width: 23.1429px;
height: 23.1429px;
line-height: 23.15px;
}
}
}

View File

@ -149,10 +149,6 @@ a.table-action-link {
margin-top: 0;
}
}
@media screen and (max-width: $no-gap-breakpoint) {
display: none;
}
}
&__actions,
@ -174,9 +170,17 @@ a.table-action-link {
text-align: right;
padding-right: 16px - 5px;
}
}
@media screen and (max-width: $no-gap-breakpoint) {
display: none;
&__form {
padding: 16px;
border: 1px solid darken($ui-base-color, 8%);
border-top: 0;
background: $ui-base-color;
.fields-row {
padding-top: 0;
margin-bottom: 0;
}
}
@ -186,7 +190,7 @@ a.table-action-link {
background: darken($ui-base-color, 4%);
@media screen and (max-width: $no-gap-breakpoint) {
&:first-child {
.optional &:first-child {
border-top: 1px solid darken($ui-base-color, 8%);
}
}
@ -210,6 +214,52 @@ a.table-action-link {
&--unpadded {
padding: 0;
}
&--with-image {
display: flex;
align-items: center;
}
&__image {
flex: 0 0 auto;
display: flex;
justify-content: center;
align-items: center;
margin-right: 10px;
.emojione {
width: 32px;
height: 32px;
}
}
&__text {
flex: 1 1 auto;
}
&__extra {
flex: 0 0 auto;
text-align: right;
color: $darker-text-color;
font-weight: 500;
}
}
.directory__tag {
margin: 0;
width: 100%;
a {
background: transparent;
border-radius: 0;
}
}
}
&.optional .batch-table__toolbar,
&.optional .batch-table__row__select {
@media screen and (max-width: $no-gap-breakpoint) {
display: none;
}
}

View File

@ -93,12 +93,16 @@
display: flex;
align-items: center;
}
}
.account__avatar {
width: 44px;
height: 44px;
background-size: 44px 44px;
}
.trends__item {
padding: 10px;
}
}
.trends-widget {
h4 {
color: $darker-text-color;
}
}
@ -109,41 +113,52 @@
box-shadow: 0 0 15px rgba($base-shadow-color, 0.2);
}
.contact-widget,
.landing-page__information.contact-widget {
box-sizing: border-box;
padding: 20px;
min-height: 100%;
.placeholder-widget {
padding: 16px;
border-radius: 4px;
background: $ui-base-color;
box-shadow: 0 0 15px rgba($base-shadow-color, 0.2);
border: 2px dashed $dark-text-color;
text-align: center;
color: $darker-text-color;
margin-bottom: 10px;
}
.contact-widget {
min-height: 100%;
font-size: 15px;
color: $darker-text-color;
line-height: 20px;
word-wrap: break-word;
font-weight: 400;
padding: 0;
strong {
font-weight: 500;
h4 {
padding: 10px;
text-transform: uppercase;
font-weight: 700;
font-size: 13px;
color: $darker-text-color;
}
p {
margin-bottom: 10px;
&:last-child {
margin-bottom: 0;
}
.account {
border-bottom: 0;
padding: 10px 0;
padding-top: 5px;
}
&__mail {
margin-top: 10px;
& > a {
display: inline-block;
padding: 10px;
padding-top: 0;
color: $darker-text-color;
text-decoration: none;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
a {
color: $primary-text-color;
text-decoration: none;
&:hover,
&:focus,
&:active {
text-decoration: underline;
}
}
}
@ -526,6 +541,12 @@ $fluid-breakpoint: $maximum-width + 20px;
a {
font-size: 14px;
line-height: 20px;
}
}
.notice-widget,
.placeholder-widget {
a {
text-decoration: none;
font-weight: 500;
color: $ui-highlight-color;
@ -538,31 +559,37 @@ $fluid-breakpoint: $maximum-width + 20px;
}
}
// christmas snow
.round-button {
cursor: pointer;
margin: 0.5em;
width: 2em;
height: 2em;
display: inline-block;
}
.table-of-contents {
background: darken($ui-base-color, 4%);
min-height: 100%;
font-size: 14px;
border-radius: 4px;
.snow-button {
-webkit-border-radius: 100%;
-moz-border-radius: 100%;
border-radius: 100%;
background: $ui-secondary-color;
@extend .round-button;
li a {
display: block;
font-weight: 500;
padding: 15px;
overflow: hidden;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
text-decoration: none;
color: $primary-text-color;
border-bottom: 1px solid lighten($ui-base-color, 4%);
.icon {
margin: 0.5em;
&:hover,
&:focus,
&:active {
text-decoration: underline;
}
}
&:hover {
background: $ui-primary-color;
li:last-child a {
border-bottom: 0;
}
&.active {
background: $ui-highlight-color;
li ul {
padding-left: 20px;
border-bottom: 1px solid lighten($ui-base-color, 4%);
}
}