mirror of
https://github.com/glitch-soc/mastodon.git
synced 2025-12-20 13:48:09 +00:00
Replace old glitch-soc themes by the new ones
This commit is contained in:
Claire
@@ -1,31 +0,0 @@
|
|||||||
@use 'sass:color';
|
|
||||||
@use 'sass:string';
|
|
||||||
@use 'sass:meta';
|
|
||||||
|
|
||||||
$darken-multiplier: -1 !default;
|
|
||||||
$lighten-multiplier: 1 !default;
|
|
||||||
|
|
||||||
// Invert darkened and lightened colors
|
|
||||||
@function darken($color, $amount) {
|
|
||||||
@return color.adjust(
|
|
||||||
$color,
|
|
||||||
$lightness: $amount * $darken-multiplier,
|
|
||||||
$space: hsl
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
@function lighten($color, $amount) {
|
|
||||||
@return color.adjust(
|
|
||||||
$color,
|
|
||||||
$lightness: $amount * $lighten-multiplier,
|
|
||||||
$space: hsl
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
@function hex-color($color) {
|
|
||||||
@if meta.type-of($color) == 'color' {
|
|
||||||
$color: string.slice(color.ie-hex-str($color), 4);
|
|
||||||
}
|
|
||||||
|
|
||||||
@return '%23' + string.unquote($color);
|
|
||||||
}
|
|
||||||
@@ -1,58 +0,0 @@
|
|||||||
@use 'sass:color';
|
|
||||||
@use 'variables' as *;
|
|
||||||
|
|
||||||
@mixin fullwidth-gallery {
|
|
||||||
&.full-width {
|
|
||||||
margin-left: -14px;
|
|
||||||
margin-right: -14px;
|
|
||||||
width: inherit;
|
|
||||||
max-width: none;
|
|
||||||
border-radius: 0;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
@mixin search-input {
|
|
||||||
outline: 0;
|
|
||||||
box-sizing: border-box;
|
|
||||||
width: 100%;
|
|
||||||
box-shadow: none;
|
|
||||||
font-family: inherit;
|
|
||||||
background: var(--input-background-color);
|
|
||||||
color: $darker-text-color;
|
|
||||||
border-radius: 4px;
|
|
||||||
border: 1px solid var(--background-border-color);
|
|
||||||
font-size: 17px;
|
|
||||||
line-height: normal;
|
|
||||||
margin: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
@mixin search-popout {
|
|
||||||
background: $simple-background-color;
|
|
||||||
border-radius: 4px;
|
|
||||||
padding: 10px 14px;
|
|
||||||
padding-bottom: 14px;
|
|
||||||
margin-top: 10px;
|
|
||||||
color: $light-text-color;
|
|
||||||
box-shadow: 2px 4px 15px color.change($base-shadow-color, $alpha: 0.4);
|
|
||||||
|
|
||||||
h4 {
|
|
||||||
text-transform: uppercase;
|
|
||||||
color: $light-text-color;
|
|
||||||
font-size: 13px;
|
|
||||||
font-weight: 500;
|
|
||||||
margin-bottom: 10px;
|
|
||||||
}
|
|
||||||
|
|
||||||
li {
|
|
||||||
padding: 4px 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
ul {
|
|
||||||
margin-bottom: 10px;
|
|
||||||
}
|
|
||||||
|
|
||||||
em {
|
|
||||||
font-weight: 500;
|
|
||||||
color: $inverted-text-color;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@@ -1,115 +0,0 @@
|
|||||||
@use 'sass:color';
|
|
||||||
@use 'functions' as *;
|
|
||||||
|
|
||||||
// Commonly used web colors
|
|
||||||
$black: #000; // Black
|
|
||||||
$white: #fff; // White
|
|
||||||
$red-600: #b7253d !default; // Deep Carmine
|
|
||||||
$red-500: #df405a !default; // Cerise
|
|
||||||
$blurple-600: #563acc; // Iris
|
|
||||||
$blurple-500: #6364ff; // Brand purple
|
|
||||||
$blurple-400: #7477fd; // Medium slate blue
|
|
||||||
$blurple-300: #858afa; // Faded Blue
|
|
||||||
$grey-600: hsl(240deg, 8%, 33%); // Trout
|
|
||||||
$grey-100: hsl(240deg, 51%, 90%); // Topaz
|
|
||||||
|
|
||||||
$success-green: #79bd9a !default; // Padua
|
|
||||||
$error-red: $red-500 !default; // Cerise
|
|
||||||
$warning-red: #ff5050 !default; // Sunset Orange
|
|
||||||
$gold-star: #ca8f04 !default; // Dark Goldenrod
|
|
||||||
|
|
||||||
$red-bookmark: $warning-red;
|
|
||||||
|
|
||||||
// Values from the classic Mastodon UI
|
|
||||||
$classic-base-color: hsl(240deg, 16%, 19%);
|
|
||||||
$classic-primary-color: hsl(240deg, 29%, 70%);
|
|
||||||
$classic-secondary-color: hsl(255deg, 25%, 88%);
|
|
||||||
$classic-highlight-color: $blurple-500;
|
|
||||||
|
|
||||||
// Variables for defaults in UI
|
|
||||||
$base-shadow-color: $black !default;
|
|
||||||
$base-overlay-background: $black !default;
|
|
||||||
$base-border-color: $white !default;
|
|
||||||
$simple-background-color: $white !default;
|
|
||||||
$valid-value-color: $success-green !default;
|
|
||||||
$error-value-color: $error-red !default;
|
|
||||||
|
|
||||||
// Tell UI to use selected colors
|
|
||||||
$ui-base-color: $classic-base-color !default; // Darkest
|
|
||||||
$ui-base-lighter-color: lighten(
|
|
||||||
$ui-base-color,
|
|
||||||
26%
|
|
||||||
) !default; // Lighter darkest
|
|
||||||
$ui-primary-color: $classic-primary-color !default; // Lighter
|
|
||||||
$ui-secondary-color: $classic-secondary-color !default; // Lightest
|
|
||||||
$ui-highlight-color: $classic-highlight-color !default;
|
|
||||||
$ui-button-color: $white !default;
|
|
||||||
$ui-button-background-color: $blurple-500 !default;
|
|
||||||
$ui-button-focus-background-color: $blurple-600 !default;
|
|
||||||
$ui-button-focus-outline-color: $blurple-400 !default;
|
|
||||||
$ui-button-focus-outline: solid 2px $ui-button-focus-outline-color !default;
|
|
||||||
|
|
||||||
$ui-button-disabled-color: color.adjust(
|
|
||||||
$ui-button-background-color,
|
|
||||||
$alpha: -0.3
|
|
||||||
) !default;
|
|
||||||
|
|
||||||
$ui-button-secondary-color: $blurple-500 !default;
|
|
||||||
$ui-button-secondary-border-color: $blurple-500 !default;
|
|
||||||
$ui-button-secondary-focus-border-color: $blurple-300 !default;
|
|
||||||
$ui-button-secondary-focus-color: $blurple-300 !default;
|
|
||||||
|
|
||||||
$ui-button-tertiary-color: $blurple-300 !default;
|
|
||||||
$ui-button-tertiary-border-color: $blurple-300 !default;
|
|
||||||
$ui-button-tertiary-focus-background-color: $blurple-600 !default;
|
|
||||||
$ui-button-tertiary-focus-color: $white !default;
|
|
||||||
|
|
||||||
$ui-button-destructive-background-color: $red-500 !default;
|
|
||||||
$ui-button-destructive-focus-background-color: $red-600 !default;
|
|
||||||
|
|
||||||
$ui-button-icon-focus-outline: $ui-button-focus-outline !default;
|
|
||||||
$ui-button-icon-hover-background-color: rgba(140, 141, 255, 40%) !default;
|
|
||||||
|
|
||||||
// Variables for texts
|
|
||||||
$primary-text-color: $white !default;
|
|
||||||
$darker-text-color: $ui-primary-color !default;
|
|
||||||
$dark-text-color: $ui-base-lighter-color !default;
|
|
||||||
$secondary-text-color: $ui-secondary-color !default;
|
|
||||||
$highlight-text-color: lighten($ui-highlight-color, 8%) !default;
|
|
||||||
$action-button-color: $ui-base-lighter-color !default;
|
|
||||||
$action-button-focus-color: lighten($ui-base-lighter-color, 4%) !default;
|
|
||||||
$passive-text-color: $gold-star !default;
|
|
||||||
$active-passive-text-color: $success-green !default;
|
|
||||||
|
|
||||||
// For texts on inverted backgrounds
|
|
||||||
$inverted-text-color: $ui-base-color !default;
|
|
||||||
$lighter-text-color: $ui-base-lighter-color !default;
|
|
||||||
$light-text-color: $ui-primary-color !default;
|
|
||||||
|
|
||||||
// Keep this filter a SCSS variable rather than
|
|
||||||
// a CSS Custom Property due to this Safari bug:
|
|
||||||
// https://github.com/mdn/browser-compat-data/issues/25914#issuecomment-2676190245
|
|
||||||
$backdrop-blur-filter: blur(10px) saturate(180%) contrast(75%) brightness(70%);
|
|
||||||
|
|
||||||
// Language codes that uses CJK fonts
|
|
||||||
$cjk-langs: ja, ko, zh-CN, zh-HK, zh-TW;
|
|
||||||
|
|
||||||
// Variables for components
|
|
||||||
$media-modal-media-max-width: 100%;
|
|
||||||
|
|
||||||
// put margins on top and bottom of image to avoid the screen covered by image.
|
|
||||||
$media-modal-media-max-height: 80%;
|
|
||||||
|
|
||||||
$no-gap-breakpoint: 1175px;
|
|
||||||
$mobile-menu-breakpoint: 760px;
|
|
||||||
$mobile-breakpoint: 630px;
|
|
||||||
$no-columns-breakpoint: 600px;
|
|
||||||
|
|
||||||
$font-sans-serif: 'mastodon-font-sans-serif' !default;
|
|
||||||
$font-display: 'mastodon-font-display' !default;
|
|
||||||
$font-monospace: 'mastodon-font-monospace' !default;
|
|
||||||
|
|
||||||
$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;
|
|
||||||
@@ -1,145 +0,0 @@
|
|||||||
@use 'variables' as *;
|
|
||||||
@use 'functions' as *;
|
|
||||||
|
|
||||||
$maximum-width: 1235px;
|
|
||||||
$fluid-breakpoint: $maximum-width + 20px;
|
|
||||||
|
|
||||||
.container {
|
|
||||||
box-sizing: border-box;
|
|
||||||
max-width: $maximum-width;
|
|
||||||
margin: 0 auto;
|
|
||||||
position: relative;
|
|
||||||
|
|
||||||
@media screen and (max-width: $fluid-breakpoint) {
|
|
||||||
width: 100%;
|
|
||||||
padding: 0 10px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.brand {
|
|
||||||
position: relative;
|
|
||||||
text-decoration: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
.rules-list {
|
|
||||||
font-size: 15px;
|
|
||||||
line-height: 22px;
|
|
||||||
counter-reset: list-counter;
|
|
||||||
|
|
||||||
li {
|
|
||||||
position: relative;
|
|
||||||
border-bottom: 1px solid var(--background-border-color);
|
|
||||||
padding: 1em 1.75em;
|
|
||||||
padding-inline-start: 3em;
|
|
||||||
font-weight: 500;
|
|
||||||
counter-increment: list-counter;
|
|
||||||
min-height: 4ch;
|
|
||||||
|
|
||||||
button {
|
|
||||||
background: transparent;
|
|
||||||
border: 0;
|
|
||||||
padding: 0;
|
|
||||||
margin: 0;
|
|
||||||
text-align: start;
|
|
||||||
font: inherit;
|
|
||||||
|
|
||||||
&:hover,
|
|
||||||
&:focus,
|
|
||||||
&:active {
|
|
||||||
background: transparent;
|
|
||||||
}
|
|
||||||
|
|
||||||
&[aria-expanded='false'] .rules-list__hint {
|
|
||||||
white-space: nowrap;
|
|
||||||
overflow: hidden;
|
|
||||||
text-overflow: ellipsis;
|
|
||||||
|
|
||||||
@supports (-webkit-line-clamp: 2) {
|
|
||||||
display: -webkit-box;
|
|
||||||
-webkit-line-clamp: 2;
|
|
||||||
-webkit-box-orient: vertical;
|
|
||||||
white-space: normal;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
&::before {
|
|
||||||
content: counter(list-counter);
|
|
||||||
position: absolute;
|
|
||||||
inset-inline-start: 0;
|
|
||||||
top: 1em;
|
|
||||||
background: $highlight-text-color;
|
|
||||||
color: $ui-base-color;
|
|
||||||
border-radius: 50%;
|
|
||||||
width: 4ch;
|
|
||||||
height: 4ch;
|
|
||||||
font-weight: 500;
|
|
||||||
display: flex;
|
|
||||||
justify-content: center;
|
|
||||||
align-items: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
&:last-child {
|
|
||||||
border-bottom: 0;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
&__text {
|
|
||||||
color: $primary-text-color;
|
|
||||||
}
|
|
||||||
|
|
||||||
&__hint {
|
|
||||||
font-size: 14px;
|
|
||||||
font-weight: 400;
|
|
||||||
color: $darker-text-color;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.rules-languages {
|
|
||||||
display: flex;
|
|
||||||
gap: 1rem;
|
|
||||||
align-items: center;
|
|
||||||
position: relative;
|
|
||||||
|
|
||||||
> label {
|
|
||||||
font-size: 14px;
|
|
||||||
font-weight: 600;
|
|
||||||
color: $primary-text-color;
|
|
||||||
}
|
|
||||||
|
|
||||||
> select {
|
|
||||||
appearance: none;
|
|
||||||
box-sizing: border-box;
|
|
||||||
font-size: 14px;
|
|
||||||
color: $primary-text-color;
|
|
||||||
display: block;
|
|
||||||
width: 100%;
|
|
||||||
outline: 0;
|
|
||||||
font-family: inherit;
|
|
||||||
resize: vertical;
|
|
||||||
background: $ui-base-color;
|
|
||||||
border: 1px solid var(--background-border-color);
|
|
||||||
border-radius: 4px;
|
|
||||||
padding-inline-start: 10px;
|
|
||||||
padding-inline-end: 30px;
|
|
||||||
height: 41px;
|
|
||||||
|
|
||||||
@media screen and (width <= 600px) {
|
|
||||||
font-size: 16px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
&::after {
|
|
||||||
display: block;
|
|
||||||
position: absolute;
|
|
||||||
width: 15px;
|
|
||||||
height: 15px;
|
|
||||||
content: '';
|
|
||||||
mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14.933' height='18.467' viewBox='0 0 14.933 18.467'><path d='M3.467 14.967l-3.393-3.5H14.86l-3.392 3.5c-1.866 1.925-3.666 3.5-4 3.5-.335 0-2.135-1.575-4-3.5zm.266-11.234L7.467 0 11.2 3.733l3.733 3.734H0l3.733-3.734z' fill='currentColor' /></svg>")
|
|
||||||
no-repeat 50% 50%;
|
|
||||||
mask-size: contain;
|
|
||||||
right: 8px;
|
|
||||||
background-color: lighten($ui-base-color, 12%);
|
|
||||||
pointer-events: none;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@@ -1,35 +0,0 @@
|
|||||||
@use 'variables' as *;
|
|
||||||
|
|
||||||
%emoji-color-inversion {
|
|
||||||
filter: invert(1);
|
|
||||||
}
|
|
||||||
|
|
||||||
.emojione {
|
|
||||||
@each $emoji in $emojis-requiring-inversion {
|
|
||||||
&[title=':#{$emoji}:'] {
|
|
||||||
@extend %emoji-color-inversion;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.hicolor-privacy-icons {
|
|
||||||
.status__visibility-icon.icon-globe,
|
|
||||||
.privacy-dropdown__option .icon-globe {
|
|
||||||
color: #1976d2;
|
|
||||||
}
|
|
||||||
|
|
||||||
.status__visibility-icon.icon-unlock,
|
|
||||||
.privacy-dropdown__option .icon-unlock {
|
|
||||||
color: #388e3c;
|
|
||||||
}
|
|
||||||
|
|
||||||
.status__visibility-icon.icon-lock,
|
|
||||||
.privacy-dropdown__option .icon-lock {
|
|
||||||
color: #ffa000;
|
|
||||||
}
|
|
||||||
|
|
||||||
.status__visibility-icon.icon-envelope,
|
|
||||||
.privacy-dropdown__option .icon-envelope {
|
|
||||||
color: #d32f2f;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@@ -1,411 +0,0 @@
|
|||||||
@use 'sass:color';
|
|
||||||
@use 'variables' as *;
|
|
||||||
@use 'functions' as *;
|
|
||||||
|
|
||||||
.card {
|
|
||||||
& > a {
|
|
||||||
display: block;
|
|
||||||
text-decoration: none;
|
|
||||||
color: inherit;
|
|
||||||
overflow: hidden;
|
|
||||||
border-radius: 4px;
|
|
||||||
|
|
||||||
&:hover,
|
|
||||||
&:active,
|
|
||||||
&:focus {
|
|
||||||
.card__bar {
|
|
||||||
background: $ui-base-color;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
&__img {
|
|
||||||
height: 130px;
|
|
||||||
position: relative;
|
|
||||||
background: $ui-base-color;
|
|
||||||
border: 1px solid var(--background-border-color);
|
|
||||||
border-bottom: none;
|
|
||||||
|
|
||||||
img {
|
|
||||||
display: block;
|
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
margin: 0;
|
|
||||||
object-fit: cover;
|
|
||||||
}
|
|
||||||
|
|
||||||
@media screen and (width <= 600px) {
|
|
||||||
height: 200px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
&__bar {
|
|
||||||
position: relative;
|
|
||||||
padding: 15px;
|
|
||||||
display: flex;
|
|
||||||
justify-content: flex-start;
|
|
||||||
align-items: center;
|
|
||||||
background: var(--background-color);
|
|
||||||
border: 1px solid var(--background-border-color);
|
|
||||||
border-top: none;
|
|
||||||
|
|
||||||
.avatar {
|
|
||||||
flex: 0 0 auto;
|
|
||||||
width: 48px;
|
|
||||||
height: 48px;
|
|
||||||
padding-top: 2px;
|
|
||||||
|
|
||||||
img {
|
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
display: block;
|
|
||||||
margin: 0;
|
|
||||||
border-radius: 4px;
|
|
||||||
background: darken($ui-base-color, 8%);
|
|
||||||
object-fit: cover;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.display-name {
|
|
||||||
margin-inline-start: 15px;
|
|
||||||
text-align: start;
|
|
||||||
|
|
||||||
svg[data-hidden] {
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
strong {
|
|
||||||
font-size: 15px;
|
|
||||||
color: $primary-text-color;
|
|
||||||
font-weight: 500;
|
|
||||||
overflow: hidden;
|
|
||||||
text-overflow: ellipsis;
|
|
||||||
}
|
|
||||||
|
|
||||||
span {
|
|
||||||
display: block;
|
|
||||||
font-size: 14px;
|
|
||||||
color: $darker-text-color;
|
|
||||||
font-weight: 400;
|
|
||||||
overflow: hidden;
|
|
||||||
text-overflow: ellipsis;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.pagination {
|
|
||||||
padding: 30px 0;
|
|
||||||
text-align: center;
|
|
||||||
overflow: hidden;
|
|
||||||
|
|
||||||
a,
|
|
||||||
.current,
|
|
||||||
.newer,
|
|
||||||
.older,
|
|
||||||
.page,
|
|
||||||
.gap {
|
|
||||||
font-size: 14px;
|
|
||||||
color: $primary-text-color;
|
|
||||||
font-weight: 500;
|
|
||||||
display: inline-block;
|
|
||||||
padding: 6px 10px;
|
|
||||||
text-decoration: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
.current {
|
|
||||||
background: $simple-background-color;
|
|
||||||
border-radius: 100px;
|
|
||||||
color: $inverted-text-color;
|
|
||||||
cursor: default;
|
|
||||||
margin: 0 10px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.gap {
|
|
||||||
cursor: default;
|
|
||||||
}
|
|
||||||
|
|
||||||
.older,
|
|
||||||
.newer {
|
|
||||||
text-transform: uppercase;
|
|
||||||
color: $secondary-text-color;
|
|
||||||
}
|
|
||||||
|
|
||||||
.older {
|
|
||||||
float: left;
|
|
||||||
padding-inline-start: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.newer {
|
|
||||||
float: right;
|
|
||||||
padding-inline-end: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.disabled {
|
|
||||||
cursor: default;
|
|
||||||
color: lighten($inverted-text-color, 10%);
|
|
||||||
}
|
|
||||||
|
|
||||||
@media screen and (width <= 700px) {
|
|
||||||
padding: 30px 20px;
|
|
||||||
|
|
||||||
.page {
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
.newer,
|
|
||||||
.older {
|
|
||||||
display: inline-block;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.nothing-here {
|
|
||||||
background: $ui-base-color;
|
|
||||||
box-shadow: 0 0 15px color.change($base-shadow-color, $alpha: 0.2);
|
|
||||||
color: $darker-text-color;
|
|
||||||
font-size: 14px;
|
|
||||||
font-weight: 500;
|
|
||||||
text-align: center;
|
|
||||||
display: flex;
|
|
||||||
justify-content: center;
|
|
||||||
align-items: center;
|
|
||||||
cursor: default;
|
|
||||||
border-radius: 4px;
|
|
||||||
padding: 20px;
|
|
||||||
min-height: 30vh;
|
|
||||||
|
|
||||||
&--under-tabs {
|
|
||||||
border-radius: 0 0 4px 4px;
|
|
||||||
}
|
|
||||||
|
|
||||||
&--flexible {
|
|
||||||
box-sizing: border-box;
|
|
||||||
min-height: 100%;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.information-badge,
|
|
||||||
.simple_form .overridden,
|
|
||||||
.simple_form .recommended,
|
|
||||||
.simple_form .not_recommended,
|
|
||||||
.simple_form .glitch_only {
|
|
||||||
display: inline-block;
|
|
||||||
padding: 4px 6px;
|
|
||||||
cursor: default;
|
|
||||||
border-radius: 4px;
|
|
||||||
font-size: 12px;
|
|
||||||
line-height: 12px;
|
|
||||||
font-weight: 500;
|
|
||||||
color: $ui-secondary-color;
|
|
||||||
text-overflow: ellipsis;
|
|
||||||
white-space: nowrap;
|
|
||||||
overflow: hidden;
|
|
||||||
}
|
|
||||||
|
|
||||||
.information-badge,
|
|
||||||
.simple_form .overridden,
|
|
||||||
.simple_form .recommended,
|
|
||||||
.simple_form .not_recommended {
|
|
||||||
background-color: color.change($ui-secondary-color, $alpha: 0.1);
|
|
||||||
border: 1px solid color.change($ui-secondary-color, $alpha: 0.5);
|
|
||||||
}
|
|
||||||
|
|
||||||
.account-role {
|
|
||||||
display: inline-flex;
|
|
||||||
padding: 4px;
|
|
||||||
padding-inline-end: 8px;
|
|
||||||
border: 1px solid $highlight-text-color;
|
|
||||||
color: $highlight-text-color;
|
|
||||||
font-weight: 500;
|
|
||||||
font-size: 12px;
|
|
||||||
letter-spacing: 0.5px;
|
|
||||||
line-height: 16px;
|
|
||||||
gap: 4px;
|
|
||||||
border-radius: 6px;
|
|
||||||
align-items: center;
|
|
||||||
|
|
||||||
svg {
|
|
||||||
width: auto;
|
|
||||||
height: 15px;
|
|
||||||
opacity: 0.85;
|
|
||||||
fill: currentColor;
|
|
||||||
}
|
|
||||||
|
|
||||||
&__domain {
|
|
||||||
font-weight: 400;
|
|
||||||
opacity: 0.75;
|
|
||||||
letter-spacing: 0;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.information-badge {
|
|
||||||
&.superapp {
|
|
||||||
color: $success-green;
|
|
||||||
background-color: color.change($success-green, $alpha: 0.1);
|
|
||||||
border-color: color.change($success-green, $alpha: 0.5);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.simple_form .not_recommended {
|
|
||||||
color: lighten($error-red, 12%);
|
|
||||||
background-color: rgba(lighten($error-red, 12%), 0.1);
|
|
||||||
border-color: rgba(lighten($error-red, 12%), 0.5);
|
|
||||||
}
|
|
||||||
|
|
||||||
.simple_form .glitch_only {
|
|
||||||
color: lighten($warning-red, 12%);
|
|
||||||
background-color: rgba(lighten($warning-red, 12%), 0.1);
|
|
||||||
border-color: rgba(lighten($warning-red, 12%), 0.5);
|
|
||||||
}
|
|
||||||
|
|
||||||
.account__header__fields {
|
|
||||||
max-width: 100vw;
|
|
||||||
padding: 0;
|
|
||||||
margin: 15px -15px -15px;
|
|
||||||
border: 0 none;
|
|
||||||
border-top: 1px solid lighten($ui-base-color, 12%);
|
|
||||||
border-bottom: 1px solid lighten($ui-base-color, 12%);
|
|
||||||
font-size: 14px;
|
|
||||||
line-height: 20px;
|
|
||||||
|
|
||||||
dl {
|
|
||||||
display: flex;
|
|
||||||
border-bottom: 1px solid lighten($ui-base-color, 12%);
|
|
||||||
}
|
|
||||||
|
|
||||||
dt,
|
|
||||||
dd {
|
|
||||||
box-sizing: border-box;
|
|
||||||
padding: 14px;
|
|
||||||
text-align: center;
|
|
||||||
max-height: 48px;
|
|
||||||
overflow: hidden;
|
|
||||||
white-space: nowrap;
|
|
||||||
text-overflow: ellipsis;
|
|
||||||
}
|
|
||||||
|
|
||||||
dt {
|
|
||||||
font-weight: 500;
|
|
||||||
width: 120px;
|
|
||||||
flex: 0 0 auto;
|
|
||||||
color: $secondary-text-color;
|
|
||||||
background: rgba(darken($ui-base-color, 8%), 0.5);
|
|
||||||
}
|
|
||||||
|
|
||||||
dd {
|
|
||||||
flex: 1 1 auto;
|
|
||||||
color: $darker-text-color;
|
|
||||||
}
|
|
||||||
|
|
||||||
a {
|
|
||||||
color: $highlight-text-color;
|
|
||||||
text-decoration: none;
|
|
||||||
|
|
||||||
&:hover,
|
|
||||||
&:focus,
|
|
||||||
&:active {
|
|
||||||
text-decoration: underline;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.verified {
|
|
||||||
border: 1px solid color.change($valid-value-color, $alpha: 0.5);
|
|
||||||
background: color.change($valid-value-color, $alpha: 0.25);
|
|
||||||
|
|
||||||
a {
|
|
||||||
color: $valid-value-color;
|
|
||||||
font-weight: 500;
|
|
||||||
}
|
|
||||||
|
|
||||||
&__mark {
|
|
||||||
color: $valid-value-color;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
dl:last-child {
|
|
||||||
border-bottom: 0;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.directory__tag .trends__item__current {
|
|
||||||
width: auto;
|
|
||||||
}
|
|
||||||
|
|
||||||
.pending-account {
|
|
||||||
&__header {
|
|
||||||
color: $darker-text-color;
|
|
||||||
|
|
||||||
a {
|
|
||||||
color: $ui-secondary-color;
|
|
||||||
text-decoration: none;
|
|
||||||
|
|
||||||
&:hover,
|
|
||||||
&:active,
|
|
||||||
&:focus {
|
|
||||||
text-decoration: underline;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
strong {
|
|
||||||
color: $primary-text-color;
|
|
||||||
font-weight: 700;
|
|
||||||
}
|
|
||||||
|
|
||||||
.warning-hint {
|
|
||||||
font-weight: normal !important;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
&__body {
|
|
||||||
margin-top: 10px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.batch-table__row--muted {
|
|
||||||
color: lighten($ui-base-color, 26%);
|
|
||||||
}
|
|
||||||
|
|
||||||
.batch-table__row--muted .pending-account__header,
|
|
||||||
.batch-table__row--muted .accounts-table,
|
|
||||||
.batch-table__row--muted .name-tag {
|
|
||||||
&,
|
|
||||||
a,
|
|
||||||
strong {
|
|
||||||
color: lighten($ui-base-color, 26%);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.batch-table__row--muted .name-tag .avatar {
|
|
||||||
opacity: 0.5;
|
|
||||||
}
|
|
||||||
|
|
||||||
.batch-table__row--muted .accounts-table {
|
|
||||||
tbody td.accounts-table__extra,
|
|
||||||
&__count,
|
|
||||||
&__count small {
|
|
||||||
color: lighten($ui-base-color, 26%);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.batch-table__row--attention {
|
|
||||||
color: $gold-star;
|
|
||||||
}
|
|
||||||
|
|
||||||
.batch-table__row--attention .pending-account__header,
|
|
||||||
.batch-table__row--attention .accounts-table,
|
|
||||||
.batch-table__row--attention .name-tag {
|
|
||||||
&,
|
|
||||||
a,
|
|
||||||
strong {
|
|
||||||
color: $gold-star;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.batch-table__row--attention .accounts-table {
|
|
||||||
tbody td.accounts-table__extra,
|
|
||||||
&__count,
|
|
||||||
&__count small {
|
|
||||||
color: $gold-star;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
File diff suppressed because it is too large
Load Diff
@@ -1,342 +0,0 @@
|
|||||||
@use 'variables' as *;
|
|
||||||
|
|
||||||
:root {
|
|
||||||
--indigo-1: #17063b;
|
|
||||||
--indigo-2: #2f0c7a;
|
|
||||||
--indigo-3: #562cfc;
|
|
||||||
--indigo-5: #858afa;
|
|
||||||
--indigo-6: #cccfff;
|
|
||||||
--lime: #baff3b;
|
|
||||||
--goldenrod-2: #ffc954;
|
|
||||||
}
|
|
||||||
|
|
||||||
.annual-report {
|
|
||||||
flex: 0 0 auto;
|
|
||||||
background: var(--indigo-1);
|
|
||||||
padding: 24px;
|
|
||||||
|
|
||||||
&__header {
|
|
||||||
margin-bottom: 16px;
|
|
||||||
|
|
||||||
h1 {
|
|
||||||
font-size: 25px;
|
|
||||||
font-weight: 600;
|
|
||||||
line-height: 30px;
|
|
||||||
color: var(--lime);
|
|
||||||
margin-bottom: 8px;
|
|
||||||
}
|
|
||||||
|
|
||||||
p {
|
|
||||||
font-size: 16px;
|
|
||||||
font-weight: 600;
|
|
||||||
line-height: 20px;
|
|
||||||
color: var(--indigo-6);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
&__bento {
|
|
||||||
display: grid;
|
|
||||||
gap: 8px;
|
|
||||||
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr);
|
|
||||||
grid-template-rows: minmax(0, auto) minmax(0, 1fr) minmax(0, auto) minmax(
|
|
||||||
0,
|
|
||||||
auto
|
|
||||||
);
|
|
||||||
|
|
||||||
&__box {
|
|
||||||
padding: 16px;
|
|
||||||
border-radius: 8px;
|
|
||||||
background: var(--indigo-2);
|
|
||||||
color: var(--indigo-5);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
&__summary {
|
|
||||||
&__most-boosted-post {
|
|
||||||
grid-column: span 2;
|
|
||||||
grid-row: span 2;
|
|
||||||
padding: 0;
|
|
||||||
|
|
||||||
.status__content,
|
|
||||||
.content-warning {
|
|
||||||
color: var(--indigo-6);
|
|
||||||
}
|
|
||||||
|
|
||||||
.detailed-status {
|
|
||||||
border: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.content-warning {
|
|
||||||
border: 0;
|
|
||||||
background: var(--indigo-1);
|
|
||||||
|
|
||||||
.link-button {
|
|
||||||
color: var(--indigo-5);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.detailed-status__meta__line {
|
|
||||||
border-bottom-color: var(--indigo-3);
|
|
||||||
}
|
|
||||||
|
|
||||||
.detailed-status__meta {
|
|
||||||
text-overflow: ellipsis;
|
|
||||||
overflow: hidden;
|
|
||||||
white-space: nowrap;
|
|
||||||
}
|
|
||||||
|
|
||||||
.detailed-status__meta,
|
|
||||||
.poll__footer,
|
|
||||||
.poll__link,
|
|
||||||
.detailed-status .logo,
|
|
||||||
.detailed-status__display-name {
|
|
||||||
color: var(--indigo-5);
|
|
||||||
}
|
|
||||||
|
|
||||||
.detailed-status__meta .animated-number,
|
|
||||||
.detailed-status__display-name strong {
|
|
||||||
color: var(--indigo-6);
|
|
||||||
}
|
|
||||||
|
|
||||||
.poll__chart {
|
|
||||||
background-color: var(--indigo-3);
|
|
||||||
|
|
||||||
&.leading {
|
|
||||||
background-color: var(--goldenrod-2);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.status-card,
|
|
||||||
.hashtag-bar {
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
&__followers {
|
|
||||||
grid-column: span 1;
|
|
||||||
text-align: center;
|
|
||||||
position: relative;
|
|
||||||
overflow: hidden;
|
|
||||||
padding-block-start: 24px;
|
|
||||||
padding-block-end: 24px;
|
|
||||||
|
|
||||||
--sparkline-gradient-top: rgba(86, 44, 252, 50%);
|
|
||||||
--sparkline-gradient-bottom: rgba(86, 44, 252, 0%);
|
|
||||||
|
|
||||||
&__foreground {
|
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
gap: 8px;
|
|
||||||
position: relative;
|
|
||||||
z-index: 1;
|
|
||||||
}
|
|
||||||
|
|
||||||
&__number {
|
|
||||||
font-size: 31px;
|
|
||||||
font-weight: 600;
|
|
||||||
line-height: 37px;
|
|
||||||
color: var(--lime);
|
|
||||||
}
|
|
||||||
|
|
||||||
&__label {
|
|
||||||
font-size: 14px;
|
|
||||||
font-weight: 600;
|
|
||||||
line-height: 17px;
|
|
||||||
color: var(--indigo-6);
|
|
||||||
}
|
|
||||||
|
|
||||||
&__footnote {
|
|
||||||
display: block;
|
|
||||||
font-weight: 400;
|
|
||||||
opacity: 0.5;
|
|
||||||
}
|
|
||||||
|
|
||||||
svg {
|
|
||||||
position: absolute;
|
|
||||||
bottom: 0;
|
|
||||||
inset-inline-end: 0;
|
|
||||||
pointer-events: none;
|
|
||||||
z-index: 0;
|
|
||||||
height: 70%;
|
|
||||||
width: auto;
|
|
||||||
|
|
||||||
path:first-child {
|
|
||||||
fill: url('#gradient') !important;
|
|
||||||
fill-opacity: 1 !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
path:last-child {
|
|
||||||
stroke: var(--indigo-3) !important;
|
|
||||||
fill: none !important;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
&__archetype {
|
|
||||||
grid-column: span 1;
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
text-align: center;
|
|
||||||
gap: 8px;
|
|
||||||
padding: 0;
|
|
||||||
|
|
||||||
img {
|
|
||||||
display: block;
|
|
||||||
width: 100%;
|
|
||||||
height: auto;
|
|
||||||
border-radius: 8px;
|
|
||||||
}
|
|
||||||
|
|
||||||
&__label {
|
|
||||||
padding: 16px;
|
|
||||||
padding-bottom: 8px;
|
|
||||||
font-size: 14px;
|
|
||||||
line-height: 17px;
|
|
||||||
font-weight: 600;
|
|
||||||
color: var(--lime);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
&__most-used-app {
|
|
||||||
grid-column: span 1;
|
|
||||||
text-align: center;
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
gap: 8px;
|
|
||||||
box-sizing: border-box;
|
|
||||||
|
|
||||||
&__label {
|
|
||||||
font-size: 14px;
|
|
||||||
line-height: 17px;
|
|
||||||
font-weight: 600;
|
|
||||||
color: var(--indigo-6);
|
|
||||||
}
|
|
||||||
|
|
||||||
&__icon {
|
|
||||||
font-size: 14px;
|
|
||||||
line-height: 17px;
|
|
||||||
font-weight: 600;
|
|
||||||
color: var(--goldenrod-2);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
&__percentile {
|
|
||||||
grid-row: span 2;
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: space-between;
|
|
||||||
text-align: center;
|
|
||||||
text-wrap: balance;
|
|
||||||
padding: 16px 8px;
|
|
||||||
|
|
||||||
&__label {
|
|
||||||
font-size: 14px;
|
|
||||||
line-height: 17px;
|
|
||||||
}
|
|
||||||
|
|
||||||
&__number {
|
|
||||||
font-size: 54px;
|
|
||||||
font-weight: 600;
|
|
||||||
line-height: 73px;
|
|
||||||
color: var(--goldenrod-2);
|
|
||||||
}
|
|
||||||
|
|
||||||
&__footnote {
|
|
||||||
font-size: 11px;
|
|
||||||
line-height: 14px;
|
|
||||||
opacity: 0.5;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
&__new-posts {
|
|
||||||
grid-column: span 2;
|
|
||||||
text-align: center;
|
|
||||||
position: relative;
|
|
||||||
overflow: hidden;
|
|
||||||
|
|
||||||
&__label {
|
|
||||||
font-size: 20px;
|
|
||||||
font-weight: 600;
|
|
||||||
line-height: 24px;
|
|
||||||
color: var(--indigo-6);
|
|
||||||
z-index: 1;
|
|
||||||
position: relative;
|
|
||||||
}
|
|
||||||
|
|
||||||
&__number {
|
|
||||||
font-size: 76px;
|
|
||||||
font-weight: 600;
|
|
||||||
line-height: 91px;
|
|
||||||
color: var(--goldenrod-2);
|
|
||||||
z-index: 1;
|
|
||||||
position: relative;
|
|
||||||
}
|
|
||||||
|
|
||||||
svg {
|
|
||||||
position: absolute;
|
|
||||||
inset-inline-start: -7px;
|
|
||||||
top: -4px;
|
|
||||||
z-index: 0;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
&__most-used-hashtag {
|
|
||||||
grid-column: span 2;
|
|
||||||
text-align: center;
|
|
||||||
overflow: hidden;
|
|
||||||
|
|
||||||
&__hashtag {
|
|
||||||
font-size: 42px;
|
|
||||||
font-weight: 600;
|
|
||||||
line-height: 58px;
|
|
||||||
color: var(--indigo-6);
|
|
||||||
margin-inline-start: -100%;
|
|
||||||
margin-inline-end: -100%;
|
|
||||||
}
|
|
||||||
|
|
||||||
&__label {
|
|
||||||
font-size: 14px;
|
|
||||||
font-weight: 600;
|
|
||||||
line-height: 17px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.annual-report-modal {
|
|
||||||
max-width: 600px;
|
|
||||||
background: var(--indigo-1);
|
|
||||||
border-radius: 16px;
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
overflow-y: auto;
|
|
||||||
|
|
||||||
.loading-indicator .circular-progress {
|
|
||||||
color: var(--lime);
|
|
||||||
}
|
|
||||||
|
|
||||||
@media screen and (max-width: $no-columns-breakpoint) {
|
|
||||||
border-bottom: 0;
|
|
||||||
border-radius: 16px 16px 0 0;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.notification-group--annual-report {
|
|
||||||
.notification-group__icon {
|
|
||||||
color: var(--lime);
|
|
||||||
}
|
|
||||||
|
|
||||||
.notification-group__main .link-button {
|
|
||||||
font-weight: 500;
|
|
||||||
color: var(--lime);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@@ -1,29 +1,7 @@
|
|||||||
@use 'functions';
|
@use 'mastodon/css_variables';
|
||||||
@use 'mixins';
|
@use 'mastodon/variables';
|
||||||
@use 'variables';
|
@use 'common';
|
||||||
@use 'css_variables';
|
|
||||||
@use '@/styles/fonts/roboto';
|
|
||||||
@use '@/styles/fonts/roboto-mono';
|
|
||||||
|
|
||||||
@use 'reset';
|
html {
|
||||||
@use 'basics';
|
color-scheme: dark;
|
||||||
@use 'branding';
|
}
|
||||||
@use 'containers';
|
|
||||||
@use 'lists';
|
|
||||||
@use 'widgets';
|
|
||||||
@use 'forms';
|
|
||||||
@use 'accounts';
|
|
||||||
@use 'components';
|
|
||||||
@use 'polls';
|
|
||||||
@use 'modal';
|
|
||||||
@use 'emoji_picker';
|
|
||||||
@use 'annual_reports';
|
|
||||||
@use 'about';
|
|
||||||
@use 'tables';
|
|
||||||
@use 'admin';
|
|
||||||
@use 'dashboard';
|
|
||||||
@use 'rtl';
|
|
||||||
@use 'accessibility';
|
|
||||||
@use 'rich_text';
|
|
||||||
@use 'glitch_local_settings';
|
|
||||||
@use 'glitch_doodle';
|
|
||||||
|
|||||||
@@ -1,300 +0,0 @@
|
|||||||
@use 'variables' as *;
|
|
||||||
@use 'functions' as *;
|
|
||||||
|
|
||||||
html.has-modal {
|
|
||||||
&,
|
|
||||||
body {
|
|
||||||
touch-action: none;
|
|
||||||
overscroll-behavior: none;
|
|
||||||
-webkit-overflow-scrolling: auto;
|
|
||||||
scrollbar-gutter: stable;
|
|
||||||
}
|
|
||||||
|
|
||||||
body {
|
|
||||||
overflow: hidden !important;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
body {
|
|
||||||
font-family: $font-sans-serif, sans-serif;
|
|
||||||
background: var(--background-color);
|
|
||||||
font-size: 13px;
|
|
||||||
line-height: 18px;
|
|
||||||
font-weight: 400;
|
|
||||||
color: $primary-text-color;
|
|
||||||
text-rendering: optimizelegibility;
|
|
||||||
|
|
||||||
// Disable kerning for Japanese text to preserve monospaced alignment for readability
|
|
||||||
&:not(:lang(ja)) {
|
|
||||||
font-feature-settings: 'kern';
|
|
||||||
}
|
|
||||||
|
|
||||||
text-size-adjust: none;
|
|
||||||
-webkit-tap-highlight-color: rgba(0, 0, 0, 0%);
|
|
||||||
-webkit-tap-highlight-color: transparent;
|
|
||||||
|
|
||||||
&.system-font {
|
|
||||||
// system-ui => standard property (Chrome/Android WebView 56+, Opera 43+, Safari 11+)
|
|
||||||
// -apple-system => Safari <11 specific
|
|
||||||
// BlinkMacSystemFont => Chrome <56 on macOS specific
|
|
||||||
// Segoe UI => Windows 7/8/10
|
|
||||||
// Oxygen => KDE
|
|
||||||
// Ubuntu => Unity/Ubuntu
|
|
||||||
// Cantarell => GNOME
|
|
||||||
// Fira Sans => Firefox OS
|
|
||||||
// Droid Sans => Older Androids (<4.0)
|
|
||||||
// Helvetica Neue => Older macOS <10.11
|
|
||||||
// $font-sans-serif => web-font (Roboto) fallback and newer Androids (>=4.0)
|
|
||||||
font-family:
|
|
||||||
system-ui,
|
|
||||||
-apple-system,
|
|
||||||
BlinkMacSystemFont,
|
|
||||||
'Segoe UI',
|
|
||||||
Oxygen,
|
|
||||||
Ubuntu,
|
|
||||||
Cantarell,
|
|
||||||
'Fira Sans',
|
|
||||||
'Droid Sans',
|
|
||||||
'Helvetica Neue',
|
|
||||||
$font-sans-serif,
|
|
||||||
sans-serif;
|
|
||||||
}
|
|
||||||
|
|
||||||
&.app-body {
|
|
||||||
padding: 0;
|
|
||||||
padding-left: env(safe-area-inset-left);
|
|
||||||
padding-right: env(safe-area-inset-right);
|
|
||||||
box-sizing: border-box;
|
|
||||||
|
|
||||||
&.layout-single-column {
|
|
||||||
height: auto;
|
|
||||||
min-height: 100vh;
|
|
||||||
min-height: 100dvh;
|
|
||||||
overflow-y: scroll;
|
|
||||||
}
|
|
||||||
|
|
||||||
&.layout-multiple-columns {
|
|
||||||
position: absolute;
|
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
padding-bottom: env(safe-area-inset-bottom);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
&.player {
|
|
||||||
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 {
|
|
||||||
margin: 0;
|
|
||||||
padding-bottom: 0;
|
|
||||||
overflow: hidden;
|
|
||||||
}
|
|
||||||
|
|
||||||
&.admin {
|
|
||||||
padding: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
&.error {
|
|
||||||
position: absolute;
|
|
||||||
text-align: center;
|
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
padding: 0;
|
|
||||||
display: flex;
|
|
||||||
justify-content: center;
|
|
||||||
align-items: center;
|
|
||||||
|
|
||||||
.dialog {
|
|
||||||
vertical-align: middle;
|
|
||||||
margin: 20px;
|
|
||||||
|
|
||||||
&__illustration {
|
|
||||||
img {
|
|
||||||
display: block;
|
|
||||||
max-width: 470px;
|
|
||||||
width: 100%;
|
|
||||||
height: auto;
|
|
||||||
margin-top: -120px;
|
|
||||||
margin-bottom: -45px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
h1 {
|
|
||||||
font-size: 20px;
|
|
||||||
line-height: 28px;
|
|
||||||
font-weight: 400;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
a {
|
|
||||||
&:focus {
|
|
||||||
border-radius: 4px;
|
|
||||||
outline: $ui-button-focus-outline;
|
|
||||||
}
|
|
||||||
|
|
||||||
&:focus:not(:focus-visible) {
|
|
||||||
outline: none;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
button {
|
|
||||||
font-family: inherit;
|
|
||||||
cursor: pointer;
|
|
||||||
|
|
||||||
&:focus:not(:focus-visible) {
|
|
||||||
outline: none;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.app-holder {
|
|
||||||
&,
|
|
||||||
& > div,
|
|
||||||
& > noscript {
|
|
||||||
display: flex;
|
|
||||||
width: 100%;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
outline: 0 !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
& > noscript {
|
|
||||||
min-height: 100vh;
|
|
||||||
min-height: 100dvh;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.layout-single-column .app-holder {
|
|
||||||
&,
|
|
||||||
& > div {
|
|
||||||
min-height: 100vh;
|
|
||||||
min-height: 100dvh;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.layout-multiple-columns .app-holder {
|
|
||||||
&,
|
|
||||||
& > div {
|
|
||||||
height: 100%;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.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;
|
|
||||||
|
|
||||||
& > div {
|
|
||||||
max-width: 500px;
|
|
||||||
}
|
|
||||||
|
|
||||||
p {
|
|
||||||
margin-bottom: 0.85em;
|
|
||||||
|
|
||||||
&:last-child {
|
|
||||||
margin-bottom: 0;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
a {
|
|
||||||
color: $highlight-text-color;
|
|
||||||
|
|
||||||
&: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;
|
|
||||||
}
|
|
||||||
|
|
||||||
&.copied {
|
|
||||||
color: $valid-value-color;
|
|
||||||
transition: none;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.logo-resources {
|
|
||||||
// Not using display: none because of https://bugs.chromium.org/p/chromium/issues/detail?id=258029
|
|
||||||
visibility: hidden;
|
|
||||||
user-select: none;
|
|
||||||
pointer-events: none;
|
|
||||||
width: 0;
|
|
||||||
height: 0;
|
|
||||||
overflow: hidden;
|
|
||||||
position: absolute;
|
|
||||||
top: 0;
|
|
||||||
inset-inline-start: 0;
|
|
||||||
z-index: -1000;
|
|
||||||
}
|
|
||||||
|
|
||||||
// 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;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@@ -1,5 +0,0 @@
|
|||||||
@use 'variables' as *;
|
|
||||||
|
|
||||||
.logo {
|
|
||||||
color: $primary-text-color;
|
|
||||||
}
|
|
||||||
File diff suppressed because it is too large
Load Diff
@@ -1,166 +0,0 @@
|
|||||||
@use 'variables' as *;
|
|
||||||
|
|
||||||
.container-alt {
|
|
||||||
width: 700px;
|
|
||||||
margin: 0 auto;
|
|
||||||
|
|
||||||
@media screen and (width <= 740px) {
|
|
||||||
width: 100%;
|
|
||||||
margin: 0;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.logo-container {
|
|
||||||
margin: 50px auto;
|
|
||||||
|
|
||||||
h1 {
|
|
||||||
display: flex;
|
|
||||||
justify-content: center;
|
|
||||||
align-items: center;
|
|
||||||
|
|
||||||
.logo {
|
|
||||||
height: 42px;
|
|
||||||
margin-inline-end: 10px;
|
|
||||||
}
|
|
||||||
|
|
||||||
a {
|
|
||||||
display: flex;
|
|
||||||
justify-content: center;
|
|
||||||
align-items: center;
|
|
||||||
color: $primary-text-color;
|
|
||||||
text-decoration: none;
|
|
||||||
outline: 0;
|
|
||||||
padding: 12px 16px;
|
|
||||||
line-height: 32px;
|
|
||||||
font-weight: 500;
|
|
||||||
font-size: 14px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.compose-standalone {
|
|
||||||
.compose-form {
|
|
||||||
width: 400px;
|
|
||||||
margin: 0 auto;
|
|
||||||
padding: 10px 0;
|
|
||||||
padding-bottom: 20px;
|
|
||||||
box-sizing: border-box;
|
|
||||||
|
|
||||||
@media screen and (width <= 400px) {
|
|
||||||
width: 100%;
|
|
||||||
padding: 20px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.account-header {
|
|
||||||
width: 400px;
|
|
||||||
margin: 0 auto;
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
gap: 10px;
|
|
||||||
font-size: 14px;
|
|
||||||
line-height: 20px;
|
|
||||||
box-sizing: border-box;
|
|
||||||
padding: 20px 0;
|
|
||||||
margin-top: 40px;
|
|
||||||
margin-bottom: 10px;
|
|
||||||
border-bottom: 1px solid var(--background-border-color);
|
|
||||||
|
|
||||||
@media screen and (width <= 440px) {
|
|
||||||
width: 100%;
|
|
||||||
margin: 0;
|
|
||||||
padding: 20px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.avatar {
|
|
||||||
width: 48px;
|
|
||||||
height: 48px;
|
|
||||||
flex: 0 0 auto;
|
|
||||||
|
|
||||||
img {
|
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
display: block;
|
|
||||||
margin: 0;
|
|
||||||
border-radius: var(--avatar-border-radius);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.name {
|
|
||||||
flex: 1 1 auto;
|
|
||||||
color: $secondary-text-color;
|
|
||||||
|
|
||||||
.username {
|
|
||||||
display: block;
|
|
||||||
font-size: 16px;
|
|
||||||
line-height: 24px;
|
|
||||||
text-overflow: ellipsis;
|
|
||||||
overflow: hidden;
|
|
||||||
color: $primary-text-color;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.logout-link {
|
|
||||||
display: block;
|
|
||||||
font-size: 32px;
|
|
||||||
line-height: 40px;
|
|
||||||
flex: 0 0 auto;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.redirect {
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
height: 100vh;
|
|
||||||
font-size: 14px;
|
|
||||||
line-height: 18px;
|
|
||||||
|
|
||||||
&__logo {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
margin-bottom: 30px;
|
|
||||||
|
|
||||||
img {
|
|
||||||
height: 48px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
&__message {
|
|
||||||
text-align: center;
|
|
||||||
|
|
||||||
h1 {
|
|
||||||
font-size: 17px;
|
|
||||||
line-height: 22px;
|
|
||||||
font-weight: 700;
|
|
||||||
margin-bottom: 30px;
|
|
||||||
}
|
|
||||||
|
|
||||||
p {
|
|
||||||
margin-bottom: 30px;
|
|
||||||
|
|
||||||
&:last-child {
|
|
||||||
margin-bottom: 0;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
a {
|
|
||||||
color: $highlight-text-color;
|
|
||||||
font-weight: 500;
|
|
||||||
text-decoration: none;
|
|
||||||
|
|
||||||
&:hover,
|
|
||||||
&:focus,
|
|
||||||
&:active {
|
|
||||||
text-decoration: underline;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
&__link {
|
|
||||||
margin-top: 15px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@@ -1,3 +1,8 @@
|
|||||||
@use 'contrast/variables';
|
@use 'mastodon/css_variables';
|
||||||
@use 'application';
|
@use 'mastodon/variables';
|
||||||
|
@use 'common';
|
||||||
@use 'contrast/diff';
|
@use 'contrast/diff';
|
||||||
|
|
||||||
|
html {
|
||||||
|
color-scheme: dark;
|
||||||
|
}
|
||||||
|
|||||||
@@ -1,4 +1,16 @@
|
|||||||
@use '../variables' as *;
|
:root {
|
||||||
|
/* TEXT TOKENS */
|
||||||
|
|
||||||
|
--color-text-primary: var(--color-grey-50);
|
||||||
|
--color-text-secondary: var(--color-grey-300);
|
||||||
|
--color-text-tertiary: var(--color-grey-400);
|
||||||
|
--color-text-brand: var(--color-indigo-300);
|
||||||
|
--color-text-status-links: var(--color-text-brand);
|
||||||
|
|
||||||
|
/* BORDER TOKENS */
|
||||||
|
|
||||||
|
--border-strength-primary: 18%;
|
||||||
|
}
|
||||||
|
|
||||||
.status__content a,
|
.status__content a,
|
||||||
.reply-indicator__content a,
|
.reply-indicator__content a,
|
||||||
@@ -31,16 +43,6 @@
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.status__content a,
|
|
||||||
.reply-indicator__content a,
|
|
||||||
.edit-indicator__content a {
|
|
||||||
color: $highlight-text-color;
|
|
||||||
}
|
|
||||||
|
|
||||||
.report-dialog-modal__textarea::placeholder {
|
|
||||||
color: $inverted-text-color;
|
|
||||||
}
|
|
||||||
|
|
||||||
.link-button:disabled {
|
.link-button:disabled {
|
||||||
cursor: not-allowed;
|
cursor: not-allowed;
|
||||||
|
|
||||||
|
|||||||
@@ -1,25 +0,0 @@
|
|||||||
@use '../functions' as *;
|
|
||||||
|
|
||||||
// Dependent colors
|
|
||||||
$black: #000;
|
|
||||||
|
|
||||||
$classic-base-color: hsl(240deg, 16%, 19%);
|
|
||||||
$classic-primary-color: hsl(240deg, 29%, 70%);
|
|
||||||
$classic-secondary-color: hsl(255deg, 25%, 88%);
|
|
||||||
$classic-highlight-color: hsl(240deg, 100%, 69%);
|
|
||||||
|
|
||||||
$ui-base-color: $classic-base-color !default;
|
|
||||||
$ui-primary-color: $classic-primary-color !default;
|
|
||||||
$ui-secondary-color: $classic-secondary-color !default;
|
|
||||||
$ui-highlight-color: $classic-highlight-color !default;
|
|
||||||
|
|
||||||
@use '../variables' with (
|
|
||||||
$darker-text-color: lighten($ui-primary-color, 20%),
|
|
||||||
$dark-text-color: lighten($ui-primary-color, 12%),
|
|
||||||
$secondary-text-color: lighten($ui-secondary-color, 6%),
|
|
||||||
$highlight-text-color: lighten($ui-highlight-color, 10%),
|
|
||||||
$action-button-color: lighten($ui-base-color, 50%),
|
|
||||||
$inverted-text-color: $black,
|
|
||||||
$lighter-text-color: darken($ui-base-color, 6%),
|
|
||||||
$light-text-color: $classic-primary-color
|
|
||||||
);
|
|
||||||
@@ -1,49 +0,0 @@
|
|||||||
@use 'sass:color';
|
|
||||||
@use 'functions' as *;
|
|
||||||
@use 'variables' as *;
|
|
||||||
|
|
||||||
:root {
|
|
||||||
--dropdown-border-color: #{lighten($ui-base-color, 4%)};
|
|
||||||
--dropdown-background-color: #{rgba(darken($ui-base-color, 8%), 0.9)};
|
|
||||||
--dropdown-shadow:
|
|
||||||
0 20px 25px -5px #{color.change($base-shadow-color, $alpha: 0.25)},
|
|
||||||
0 8px 10px -6px #{color.change($base-shadow-color, $alpha: 0.25)};
|
|
||||||
--modal-background-color: #{rgba(darken($ui-base-color, 8%), 0.7)};
|
|
||||||
--modal-background-variant-color: #{color.change($ui-base-color, $alpha: 0.7)};
|
|
||||||
--modal-border-color: #{lighten($ui-base-color, 4%)};
|
|
||||||
--background-border-color: #{lighten($ui-base-color, 4%)};
|
|
||||||
--background-color: #{darken($ui-base-color, 8%)};
|
|
||||||
--background-color-tint: #{rgba(darken($ui-base-color, 8%), 0.9)};
|
|
||||||
--surface-background-color: #{darken($ui-base-color, 4%)};
|
|
||||||
--surface-variant-background-color: #{$ui-base-color};
|
|
||||||
--surface-variant-active-background-color: #{lighten($ui-base-color, 4%)};
|
|
||||||
--surface-border-color: #{lighten($ui-base-color, 8%)};
|
|
||||||
--on-surface-color: #{color.adjust($ui-base-color, $alpha: -0.5)};
|
|
||||||
--avatar-border-radius: 8px;
|
|
||||||
--media-outline-color: #{rgba(#fcf8ff, 0.15)};
|
|
||||||
--overlay-icon-shadow: drop-shadow(
|
|
||||||
0 0 8px #{color.change($base-shadow-color, $alpha: 0.35)}
|
|
||||||
);
|
|
||||||
--error-background-color: #{darken($error-red, 16%)};
|
|
||||||
--error-active-background-color: #{darken($error-red, 12%)};
|
|
||||||
--on-error-color: #fff;
|
|
||||||
--rich-text-container-color: rgba(87, 24, 60, 100%);
|
|
||||||
--rich-text-text-color: rgba(255, 175, 212, 100%);
|
|
||||||
--rich-text-decorations-color: rgba(128, 58, 95, 100%);
|
|
||||||
--nested-card-background: color(from #{$ui-highlight-color} srgb r g b / 5%);
|
|
||||||
--nested-card-text: #{$secondary-text-color};
|
|
||||||
--nested-card-border: 1px solid
|
|
||||||
color(from #{$ui-highlight-color} srgb r g b / 15%);
|
|
||||||
--input-placeholder-color: #{$dark-text-color};
|
|
||||||
--input-background-color: var(--surface-variant-background-color);
|
|
||||||
--on-input-color: #{$secondary-text-color};
|
|
||||||
}
|
|
||||||
|
|
||||||
body {
|
|
||||||
// Variable for easily inverting directional UI elements,
|
|
||||||
--text-x-direction: 1;
|
|
||||||
|
|
||||||
&.rtl {
|
|
||||||
--text-x-direction: -1;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@@ -1,121 +0,0 @@
|
|||||||
@use 'functions' as *;
|
|
||||||
@use 'variables' as *;
|
|
||||||
|
|
||||||
.dashboard__counters {
|
|
||||||
display: flex;
|
|
||||||
flex-wrap: wrap;
|
|
||||||
margin: 0 -5px;
|
|
||||||
margin-bottom: 20px;
|
|
||||||
|
|
||||||
& > div {
|
|
||||||
box-sizing: border-box;
|
|
||||||
flex: 0 0 33.333%;
|
|
||||||
padding: 0 5px;
|
|
||||||
margin-bottom: 10px;
|
|
||||||
|
|
||||||
& > div,
|
|
||||||
& > a {
|
|
||||||
padding: 20px;
|
|
||||||
background: var(--background-color);
|
|
||||||
border-radius: 4px;
|
|
||||||
border: 1px solid var(--background-border-color);
|
|
||||||
box-sizing: border-box;
|
|
||||||
height: 100%;
|
|
||||||
}
|
|
||||||
|
|
||||||
& > a {
|
|
||||||
text-decoration: none;
|
|
||||||
color: inherit;
|
|
||||||
display: block;
|
|
||||||
|
|
||||||
&:hover,
|
|
||||||
&:focus,
|
|
||||||
&:active {
|
|
||||||
background: $ui-base-color;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
&__num,
|
|
||||||
&__text {
|
|
||||||
text-align: center;
|
|
||||||
font-weight: 500;
|
|
||||||
font-size: 24px;
|
|
||||||
color: $primary-text-color;
|
|
||||||
margin-bottom: 20px;
|
|
||||||
line-height: 30px;
|
|
||||||
}
|
|
||||||
|
|
||||||
&__text {
|
|
||||||
font-size: 18px;
|
|
||||||
}
|
|
||||||
|
|
||||||
&__label {
|
|
||||||
font-size: 14px;
|
|
||||||
color: $darker-text-color;
|
|
||||||
text-align: center;
|
|
||||||
font-weight: 500;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.dashboard {
|
|
||||||
display: grid;
|
|
||||||
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr);
|
|
||||||
gap: 10px;
|
|
||||||
|
|
||||||
@media screen and (width <= 1350px) {
|
|
||||||
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
|
|
||||||
}
|
|
||||||
|
|
||||||
&__item {
|
|
||||||
&--span-double-column {
|
|
||||||
grid-column: span 2;
|
|
||||||
}
|
|
||||||
|
|
||||||
&--span-double-row {
|
|
||||||
grid-row: span 2;
|
|
||||||
}
|
|
||||||
|
|
||||||
h4 {
|
|
||||||
padding-top: 20px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
&__quick-access {
|
|
||||||
display: flex;
|
|
||||||
align-items: baseline;
|
|
||||||
border-radius: 4px;
|
|
||||||
background: $ui-button-background-color;
|
|
||||||
color: $primary-text-color;
|
|
||||||
transition: all 100ms ease-in;
|
|
||||||
font-size: 14px;
|
|
||||||
padding: 8px 16px;
|
|
||||||
text-decoration: none;
|
|
||||||
margin-bottom: 4px;
|
|
||||||
|
|
||||||
&:active,
|
|
||||||
&:focus,
|
|
||||||
&:hover {
|
|
||||||
background-color: $ui-button-focus-background-color;
|
|
||||||
transition: all 200ms ease-out;
|
|
||||||
}
|
|
||||||
|
|
||||||
&.positive {
|
|
||||||
background: lighten($ui-base-color, 4%);
|
|
||||||
color: $valid-value-color;
|
|
||||||
}
|
|
||||||
|
|
||||||
&.negative {
|
|
||||||
background: lighten($ui-base-color, 4%);
|
|
||||||
color: $error-value-color;
|
|
||||||
}
|
|
||||||
|
|
||||||
span {
|
|
||||||
flex: 1 1 auto;
|
|
||||||
}
|
|
||||||
|
|
||||||
strong {
|
|
||||||
font-weight: 700;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@@ -1,245 +0,0 @@
|
|||||||
@use 'variables' as *;
|
|
||||||
@use 'functions' as *;
|
|
||||||
|
|
||||||
.emoji-mart {
|
|
||||||
font-size: 13px;
|
|
||||||
display: inline-block;
|
|
||||||
|
|
||||||
&,
|
|
||||||
* {
|
|
||||||
box-sizing: border-box;
|
|
||||||
line-height: 1.15;
|
|
||||||
}
|
|
||||||
|
|
||||||
.emoji-mart-emoji {
|
|
||||||
padding: 6px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.emoji-mart-bar {
|
|
||||||
&:first-child {
|
|
||||||
background: var(--dropdown-border-color);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.emoji-mart-anchors {
|
|
||||||
display: flex;
|
|
||||||
justify-content: space-between;
|
|
||||||
padding: 0 6px;
|
|
||||||
line-height: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.emoji-mart-anchor {
|
|
||||||
position: relative;
|
|
||||||
flex: 1;
|
|
||||||
text-align: center;
|
|
||||||
padding: 12px 4px;
|
|
||||||
overflow: hidden;
|
|
||||||
transition: color 0.1s ease-out;
|
|
||||||
cursor: pointer;
|
|
||||||
background: transparent;
|
|
||||||
border: 0;
|
|
||||||
color: $darker-text-color;
|
|
||||||
|
|
||||||
&:hover {
|
|
||||||
color: lighten($darker-text-color, 4%);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.emoji-mart-anchor-selected {
|
|
||||||
color: $highlight-text-color;
|
|
||||||
|
|
||||||
&:hover {
|
|
||||||
color: lighten($highlight-text-color, 4%);
|
|
||||||
}
|
|
||||||
|
|
||||||
.emoji-mart-anchor-bar {
|
|
||||||
bottom: -1px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.emoji-mart-anchor-bar {
|
|
||||||
position: absolute;
|
|
||||||
bottom: -5px;
|
|
||||||
inset-inline-start: 0;
|
|
||||||
width: 100%;
|
|
||||||
height: 4px;
|
|
||||||
background-color: $highlight-text-color;
|
|
||||||
}
|
|
||||||
|
|
||||||
.emoji-mart-anchors {
|
|
||||||
i {
|
|
||||||
display: inline-block;
|
|
||||||
width: 100%;
|
|
||||||
max-width: 22px;
|
|
||||||
}
|
|
||||||
|
|
||||||
svg {
|
|
||||||
fill: currentColor;
|
|
||||||
max-height: 18px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.emoji-mart-scroll {
|
|
||||||
overflow-y: scroll;
|
|
||||||
height: 270px;
|
|
||||||
max-height: 35vh;
|
|
||||||
padding: 0 6px 6px;
|
|
||||||
will-change: transform;
|
|
||||||
}
|
|
||||||
|
|
||||||
.emoji-mart-search {
|
|
||||||
padding: 10px;
|
|
||||||
padding-inline-end: 45px;
|
|
||||||
position: relative;
|
|
||||||
|
|
||||||
input {
|
|
||||||
font-size: 16px;
|
|
||||||
font-weight: 400;
|
|
||||||
padding: 7px 9px;
|
|
||||||
padding-inline-end: 25px;
|
|
||||||
font-family: inherit;
|
|
||||||
display: block;
|
|
||||||
width: 100%;
|
|
||||||
background: $ui-base-color;
|
|
||||||
color: $darker-text-color;
|
|
||||||
border: 1px solid var(--background-border-color);
|
|
||||||
border-radius: 4px;
|
|
||||||
|
|
||||||
&::-moz-focus-inner {
|
|
||||||
border: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
&:active,
|
|
||||||
&:focus {
|
|
||||||
outline: none !important;
|
|
||||||
border-width: 1px !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
&::-webkit-search-cancel-button {
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.emoji-mart-search-icon {
|
|
||||||
position: absolute;
|
|
||||||
top: 18px;
|
|
||||||
inset-inline-end: 45px + 5px;
|
|
||||||
z-index: 2;
|
|
||||||
padding: 2px 5px 1px;
|
|
||||||
border: 0;
|
|
||||||
background: none;
|
|
||||||
transition: all 100ms linear;
|
|
||||||
transition-property: opacity;
|
|
||||||
pointer-events: auto;
|
|
||||||
opacity: 0.7;
|
|
||||||
|
|
||||||
&:disabled {
|
|
||||||
cursor: default;
|
|
||||||
pointer-events: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
svg {
|
|
||||||
fill: $darker-text-color;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.emoji-mart-category .emoji-mart-emoji {
|
|
||||||
cursor: pointer;
|
|
||||||
|
|
||||||
span {
|
|
||||||
z-index: 1;
|
|
||||||
position: relative;
|
|
||||||
text-align: center;
|
|
||||||
display: inline-flex !important;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
&:hover::before {
|
|
||||||
z-index: -1;
|
|
||||||
content: '';
|
|
||||||
position: absolute;
|
|
||||||
top: 0;
|
|
||||||
inset-inline-start: 0;
|
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
background-color: var(--dropdown-border-color);
|
|
||||||
border-radius: 100%;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.emoji-mart-category-label {
|
|
||||||
z-index: 2;
|
|
||||||
position: relative;
|
|
||||||
position: -webkit-sticky;
|
|
||||||
position: sticky;
|
|
||||||
top: 0;
|
|
||||||
|
|
||||||
span {
|
|
||||||
display: block;
|
|
||||||
width: 100%;
|
|
||||||
font-weight: 500;
|
|
||||||
padding: 5px 6px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
/* For screenreaders only, via https://stackoverflow.com/a/19758620 */
|
|
||||||
.emoji-mart-sr-only {
|
|
||||||
position: absolute;
|
|
||||||
width: 1px;
|
|
||||||
height: 1px;
|
|
||||||
padding: 0;
|
|
||||||
margin: -1px;
|
|
||||||
overflow: hidden;
|
|
||||||
clip-path: inset(50%);
|
|
||||||
border: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.emoji-mart-category-list {
|
|
||||||
margin: 0;
|
|
||||||
padding: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.emoji-mart-category-list li {
|
|
||||||
list-style: none;
|
|
||||||
margin: 0;
|
|
||||||
padding: 0;
|
|
||||||
display: inline-block;
|
|
||||||
}
|
|
||||||
|
|
||||||
.emoji-mart-emoji {
|
|
||||||
position: relative;
|
|
||||||
display: inline-block;
|
|
||||||
background: transparent;
|
|
||||||
border: 0;
|
|
||||||
padding: 0;
|
|
||||||
font-size: 0;
|
|
||||||
|
|
||||||
span {
|
|
||||||
width: 22px;
|
|
||||||
height: 22px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.emoji-mart-no-results {
|
|
||||||
font-size: 14px;
|
|
||||||
color: $dark-text-color;
|
|
||||||
text-align: center;
|
|
||||||
padding: 5px 6px;
|
|
||||||
padding-top: 70px;
|
|
||||||
|
|
||||||
.emoji-mart-no-results-label {
|
|
||||||
margin-top: 0.2em;
|
|
||||||
}
|
|
||||||
|
|
||||||
.emoji-mart-emoji:hover::before {
|
|
||||||
cursor: default;
|
|
||||||
content: none;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.emoji-mart-preview {
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
File diff suppressed because it is too large
Load Diff
@@ -1,86 +0,0 @@
|
|||||||
$doodle-background: #d9e1e8;
|
|
||||||
|
|
||||||
.doodle-modal {
|
|
||||||
width: unset;
|
|
||||||
}
|
|
||||||
|
|
||||||
.doodle-modal__container {
|
|
||||||
background: $doodle-background;
|
|
||||||
text-align: center;
|
|
||||||
line-height: 0; // remove weird gap under canvas
|
|
||||||
canvas {
|
|
||||||
border: 5px solid $doodle-background;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.doodle-modal__action-bar {
|
|
||||||
.filler {
|
|
||||||
flex-grow: 1;
|
|
||||||
margin: 0;
|
|
||||||
padding: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.doodle-toolbar {
|
|
||||||
line-height: 1;
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
flex-grow: 0;
|
|
||||||
justify-content: space-around;
|
|
||||||
|
|
||||||
&.with-inputs {
|
|
||||||
label {
|
|
||||||
display: inline-block;
|
|
||||||
width: 70px;
|
|
||||||
text-align: end;
|
|
||||||
margin-inline-end: 2px;
|
|
||||||
}
|
|
||||||
|
|
||||||
input[type='number'],
|
|
||||||
input[type='text'] {
|
|
||||||
width: 40px;
|
|
||||||
}
|
|
||||||
|
|
||||||
span.val {
|
|
||||||
display: inline-block;
|
|
||||||
text-align: start;
|
|
||||||
width: 50px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.doodle-palette {
|
|
||||||
padding-inline-end: 0 !important;
|
|
||||||
border: 1px solid black;
|
|
||||||
line-height: 0.2rem;
|
|
||||||
flex-grow: 0;
|
|
||||||
background: white;
|
|
||||||
|
|
||||||
button {
|
|
||||||
appearance: none;
|
|
||||||
width: 1rem;
|
|
||||||
height: 1rem;
|
|
||||||
margin: 0;
|
|
||||||
padding: 0;
|
|
||||||
text-align: center;
|
|
||||||
color: black;
|
|
||||||
text-shadow: 0 0 1px white;
|
|
||||||
cursor: pointer;
|
|
||||||
box-shadow: inset 0 0 1px rgba(white, 0.5);
|
|
||||||
border: 1px solid black;
|
|
||||||
outline-offset: -1px;
|
|
||||||
|
|
||||||
&.foreground {
|
|
||||||
outline: 1px dashed white;
|
|
||||||
}
|
|
||||||
|
|
||||||
&.background {
|
|
||||||
outline: 1px dashed red;
|
|
||||||
}
|
|
||||||
|
|
||||||
&.foreground.background {
|
|
||||||
outline: 1px dashed red;
|
|
||||||
border-color: white;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@@ -1,174 +0,0 @@
|
|||||||
@use 'functions' as *;
|
|
||||||
@use 'variables' as *;
|
|
||||||
|
|
||||||
.glitch.local-settings {
|
|
||||||
position: relative;
|
|
||||||
display: flex;
|
|
||||||
flex-direction: row;
|
|
||||||
background: $ui-secondary-color;
|
|
||||||
color: $inverted-text-color;
|
|
||||||
border-radius: 8px;
|
|
||||||
height: 80vh;
|
|
||||||
width: 80vw;
|
|
||||||
max-width: 740px;
|
|
||||||
max-height: 450px;
|
|
||||||
overflow: hidden;
|
|
||||||
|
|
||||||
label,
|
|
||||||
legend {
|
|
||||||
display: block;
|
|
||||||
font-size: 14px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.boolean label,
|
|
||||||
.radio_buttons label {
|
|
||||||
position: relative;
|
|
||||||
padding-inline-start: 28px;
|
|
||||||
padding-top: 3px;
|
|
||||||
|
|
||||||
input {
|
|
||||||
position: absolute;
|
|
||||||
inset-inline-start: 0;
|
|
||||||
top: 0;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
span.hint {
|
|
||||||
display: block;
|
|
||||||
color: $lighter-text-color;
|
|
||||||
}
|
|
||||||
|
|
||||||
h1 {
|
|
||||||
font-size: 18px;
|
|
||||||
font-weight: 500;
|
|
||||||
line-height: 24px;
|
|
||||||
margin-bottom: 20px;
|
|
||||||
}
|
|
||||||
|
|
||||||
h2 {
|
|
||||||
font-size: 15px;
|
|
||||||
font-weight: 500;
|
|
||||||
line-height: 20px;
|
|
||||||
margin-top: 20px;
|
|
||||||
margin-bottom: 10px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.glitch.local-settings__navigation__item {
|
|
||||||
display: flex;
|
|
||||||
gap: 5px;
|
|
||||||
align-items: center;
|
|
||||||
padding: 15px 20px;
|
|
||||||
color: inherit;
|
|
||||||
background: lighten($ui-secondary-color, 8%);
|
|
||||||
border: 0;
|
|
||||||
border-bottom: 1px $ui-secondary-color solid;
|
|
||||||
cursor: pointer;
|
|
||||||
text-decoration: none;
|
|
||||||
outline: none;
|
|
||||||
transition: background 0.3s;
|
|
||||||
box-sizing: border-box;
|
|
||||||
width: 100%;
|
|
||||||
text-align: start;
|
|
||||||
font-size: inherit;
|
|
||||||
|
|
||||||
.text-icon-button {
|
|
||||||
color: inherit;
|
|
||||||
transition: unset;
|
|
||||||
unicode-bidi: embed;
|
|
||||||
}
|
|
||||||
|
|
||||||
&:hover {
|
|
||||||
background: $ui-secondary-color;
|
|
||||||
}
|
|
||||||
|
|
||||||
&.active {
|
|
||||||
background: $ui-highlight-color;
|
|
||||||
color: $primary-text-color;
|
|
||||||
}
|
|
||||||
|
|
||||||
&.close,
|
|
||||||
&.close:hover {
|
|
||||||
background: $error-value-color;
|
|
||||||
color: $primary-text-color;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.glitch.local-settings__navigation {
|
|
||||||
background: lighten($ui-secondary-color, 8%);
|
|
||||||
width: 212px;
|
|
||||||
font-size: 15px;
|
|
||||||
line-height: 20px;
|
|
||||||
overflow-y: auto;
|
|
||||||
}
|
|
||||||
|
|
||||||
.glitch.local-settings__page {
|
|
||||||
display: block;
|
|
||||||
flex: auto;
|
|
||||||
padding: 15px 20px;
|
|
||||||
width: 360px;
|
|
||||||
overflow-y: auto;
|
|
||||||
}
|
|
||||||
|
|
||||||
.glitch.local-settings__page__item {
|
|
||||||
margin-bottom: 2px;
|
|
||||||
|
|
||||||
.hint a {
|
|
||||||
color: $lighter-text-color;
|
|
||||||
font-weight: 500;
|
|
||||||
text-decoration: underline;
|
|
||||||
|
|
||||||
&:active,
|
|
||||||
&:focus,
|
|
||||||
&:hover {
|
|
||||||
text-decoration: none;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.glitch.local-settings__page__item.string,
|
|
||||||
.glitch.local-settings__page__item.radio_buttons {
|
|
||||||
margin-top: 10px;
|
|
||||||
margin-bottom: 10px;
|
|
||||||
}
|
|
||||||
|
|
||||||
@media screen and (width <= 630px) {
|
|
||||||
.glitch.local-settings__navigation {
|
|
||||||
width: 40px;
|
|
||||||
flex-shrink: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.glitch.local-settings__navigation__item {
|
|
||||||
padding: 10px;
|
|
||||||
|
|
||||||
span:last-of-type {
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.deprecated-settings-label {
|
|
||||||
white-space: nowrap;
|
|
||||||
}
|
|
||||||
|
|
||||||
.deprecated-settings-info {
|
|
||||||
text-align: start;
|
|
||||||
|
|
||||||
ul {
|
|
||||||
padding: 10px;
|
|
||||||
margin-inline-start: 12px;
|
|
||||||
list-style: disc inside;
|
|
||||||
}
|
|
||||||
|
|
||||||
a {
|
|
||||||
color: $lighter-text-color;
|
|
||||||
font-weight: 500;
|
|
||||||
text-decoration: underline;
|
|
||||||
|
|
||||||
&:active,
|
|
||||||
&:focus,
|
|
||||||
&:hover {
|
|
||||||
text-decoration: none;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@@ -1,5 +0,0 @@
|
|||||||
/* This is a compat file so that third-party themes do not have to immediately
|
|
||||||
update their implementation, as the previous `index.scss` has been renamed
|
|
||||||
to `application.scss`. */
|
|
||||||
|
|
||||||
@import 'application';
|
|
||||||
@@ -1,4 +1,9 @@
|
|||||||
@use 'mastodon-light/variables';
|
|
||||||
@use 'mastodon-light/css_variables';
|
@use 'mastodon-light/css_variables';
|
||||||
@use 'application';
|
@use 'mastodon/variables' with (
|
||||||
@use 'mastodon-light/diff';
|
$emojis-requiring-inversion: 'chains'
|
||||||
|
);
|
||||||
|
@use 'common';
|
||||||
|
|
||||||
|
html {
|
||||||
|
color-scheme: light;
|
||||||
|
}
|
||||||
|
|||||||
@@ -1,23 +1,214 @@
|
|||||||
@use 'sass:color';
|
@use '../mastodon/theme_utils' as utils;
|
||||||
@use '../variables' as *;
|
|
||||||
@use 'variables' as *;
|
|
||||||
@use '../functions' as *;
|
|
||||||
|
|
||||||
body {
|
:root {
|
||||||
--dropdown-border-color: hsl(240deg, 25%, 88%);
|
--color-black: #000;
|
||||||
--dropdown-background-color: #fff;
|
--color-grey-950: #181821;
|
||||||
--modal-border-color: hsl(240deg, 25%, 88%);
|
--color-grey-800: #292938;
|
||||||
--modal-background-color: var(--background-color);
|
--color-grey-700: #444664;
|
||||||
--background-border-color: hsl(240deg, 25%, 88%);
|
--color-grey-600: #545778;
|
||||||
--background-color: #fff;
|
--color-grey-500: #696d91;
|
||||||
--background-color-tint: rgba(255, 255, 255, 80%);
|
--color-grey-400: #8b8dac;
|
||||||
--background-filter: blur(10px);
|
--color-grey-300: #b4b6cb;
|
||||||
--surface-variant-background-color: #f1ebfb;
|
--color-grey-200: #d8d9e3;
|
||||||
--surface-border-color: #cac4d0;
|
--color-grey-100: #f0f0f5;
|
||||||
--on-surface-color: #{color.adjust($ui-base-color, $alpha: -0.65)};
|
--color-grey-50: #f0f1ff;
|
||||||
--rich-text-container-color: rgba(255, 216, 231, 100%);
|
--color-white: #fff;
|
||||||
--rich-text-text-color: rgba(114, 47, 83, 100%);
|
--color-indigo-600: #6147e6;
|
||||||
--rich-text-decorations-color: rgba(255, 175, 212, 100%);
|
--color-indigo-400: #8886ff;
|
||||||
--input-placeholder-color: #{color.adjust($dark-text-color, $alpha: -0.5)};
|
--color-indigo-300: #a5abfd;
|
||||||
--input-background-color: #{darken($ui-base-color, 10%)};
|
--color-indigo-200: #c8cdfe;
|
||||||
|
--color-indigo-100: #e0e3ff;
|
||||||
|
--color-indigo-50: #f0f1ff;
|
||||||
|
--color-red-500: #ff637e;
|
||||||
|
--color-red-600: #ec003f;
|
||||||
|
--color-yellow-400: #ffb900;
|
||||||
|
--color-yellow-600: #e17100;
|
||||||
|
--color-green-400: #05df72;
|
||||||
|
--color-green-600: #00a63e;
|
||||||
|
|
||||||
|
/* TEXT TOKENS */
|
||||||
|
|
||||||
|
--color-text-primary: var(--color-grey-950);
|
||||||
|
--color-text-secondary: var(--color-grey-600);
|
||||||
|
--color-text-tertiary: var(--color-grey-500);
|
||||||
|
--color-text-on-inverted: var(--color-white);
|
||||||
|
--color-text-brand: var(--color-indigo-600);
|
||||||
|
--color-text-brand-soft: color-mix(
|
||||||
|
in oklab,
|
||||||
|
var(--color-text-primary),
|
||||||
|
var(--color-text-brand)
|
||||||
|
);
|
||||||
|
--color-text-on-brand-base: var(--color-white);
|
||||||
|
--color-text-error: var(--color-red-600);
|
||||||
|
--color-text-on-error-base: var(--color-white);
|
||||||
|
--color-text-warning: var(--color-yellow-600);
|
||||||
|
--color-text-on-warning-base: var(--color-white);
|
||||||
|
--color-text-success: var(--color-green-600);
|
||||||
|
--color-text-on-success-base: var(--color-white);
|
||||||
|
--color-text-disabled: var(--color-grey-300);
|
||||||
|
--color-text-on-disabled: var(--color-grey-200);
|
||||||
|
--color-text-bookmark-highlight: var(--color-text-error);
|
||||||
|
--color-text-favourite-highlight: var(--color-text-warning);
|
||||||
|
--color-text-on-media: var(--color-white);
|
||||||
|
--color-text-status-links: var(--color-text-brand);
|
||||||
|
|
||||||
|
/* BACKGROUND TOKENS */
|
||||||
|
|
||||||
|
// Neutrals
|
||||||
|
--color-bg-primary: var(--color-white);
|
||||||
|
--overlay-strength-secondary: 5%;
|
||||||
|
--color-bg-secondary-base: var(--color-grey-600);
|
||||||
|
--color-bg-secondary: #{color-mix(
|
||||||
|
in oklab,
|
||||||
|
var(--color-bg-primary),
|
||||||
|
var(--color-bg-secondary-base) var(--overlay-strength-secondary)
|
||||||
|
)};
|
||||||
|
--color-bg-secondary-solid: #{color-mix(
|
||||||
|
in srgb,
|
||||||
|
var(--color-bg-primary),
|
||||||
|
var(--color-bg-secondary-base) var(--overlay-strength-secondary)
|
||||||
|
)};
|
||||||
|
--color-bg-tertiary: #{color-mix(
|
||||||
|
in oklab,
|
||||||
|
var(--color-bg-primary),
|
||||||
|
var(--color-bg-secondary-base) calc(2 * var(--overlay-strength-secondary))
|
||||||
|
)};
|
||||||
|
|
||||||
|
// Utility
|
||||||
|
--color-bg-ambient: var(--color-bg-primary);
|
||||||
|
--color-bg-elevated: var(--color-bg-primary);
|
||||||
|
--color-bg-inverted: var(--color-grey-950);
|
||||||
|
--color-bg-media-base: var(--color-black);
|
||||||
|
--color-bg-media-strength: 65%;
|
||||||
|
--color-bg-media: #{utils.css-alpha(
|
||||||
|
var(--color-bg-media-base),
|
||||||
|
var(--color-bg-media-strength)
|
||||||
|
)};
|
||||||
|
--color-bg-overlay: var(--color-bg-primary);
|
||||||
|
--color-bg-disabled: var(--color-grey-400);
|
||||||
|
|
||||||
|
// Brand
|
||||||
|
--overlay-strength-brand: 8%;
|
||||||
|
--color-bg-brand-base: var(--color-indigo-600);
|
||||||
|
--color-bg-brand-base-hover: color-mix(
|
||||||
|
in oklab,
|
||||||
|
var(--color-bg-brand-base),
|
||||||
|
black var(--overlay-strength-brand)
|
||||||
|
);
|
||||||
|
--color-bg-brand-soft: #{utils.css-alpha(
|
||||||
|
var(--color-bg-brand-base),
|
||||||
|
calc(var(--overlay-strength-brand) * 1.5)
|
||||||
|
)};
|
||||||
|
--color-bg-brand-softer: #{utils.css-alpha(
|
||||||
|
var(--color-bg-brand-base),
|
||||||
|
var(--overlay-strength-brand)
|
||||||
|
)};
|
||||||
|
|
||||||
|
// Error
|
||||||
|
--overlay-strength-error: 12%;
|
||||||
|
--color-bg-error-base: var(--color-red-600);
|
||||||
|
--color-bg-error-base-hover: color-mix(
|
||||||
|
in oklab,
|
||||||
|
var(--color-bg-error-base),
|
||||||
|
black var(--overlay-strength-error)
|
||||||
|
);
|
||||||
|
--color-bg-error-soft: #{utils.css-alpha(
|
||||||
|
var(--color-bg-error-base),
|
||||||
|
calc(var(--overlay-strength-error) * 1.5)
|
||||||
|
)};
|
||||||
|
--color-bg-error-softer: #{utils.css-alpha(
|
||||||
|
var(--color-bg-error-base),
|
||||||
|
var(--overlay-strength-error)
|
||||||
|
)};
|
||||||
|
|
||||||
|
// Warning
|
||||||
|
--overlay-strength-warning: 10%;
|
||||||
|
--color-bg-warning-base: var(--color-yellow-600);
|
||||||
|
--color-bg-warning-base-hover: color-mix(
|
||||||
|
in oklab,
|
||||||
|
var(--color-bg-warning-base),
|
||||||
|
black var(--overlay-strength-warning)
|
||||||
|
);
|
||||||
|
--color-bg-warning-soft: #{utils.css-alpha(
|
||||||
|
var(--color-bg-warning-base),
|
||||||
|
calc(var(--overlay-strength-warning) * 1.5)
|
||||||
|
)};
|
||||||
|
--color-bg-warning-softer: #{utils.css-alpha(
|
||||||
|
var(--color-bg-warning-base),
|
||||||
|
var(--overlay-strength-warning)
|
||||||
|
)};
|
||||||
|
|
||||||
|
// Success
|
||||||
|
--overlay-strength-success: 15%;
|
||||||
|
--color-bg-success-base: var(--color-green-600);
|
||||||
|
--color-bg-success-base-hover: color-mix(
|
||||||
|
in oklab,
|
||||||
|
var(--color-bg-success-base),
|
||||||
|
black var(--overlay-strength-success)
|
||||||
|
);
|
||||||
|
--color-bg-success-soft: #{utils.css-alpha(
|
||||||
|
var(--color-bg-success-base),
|
||||||
|
calc(var(--overlay-strength-success) * 1.5)
|
||||||
|
)};
|
||||||
|
--color-bg-success-softer: #{utils.css-alpha(
|
||||||
|
var(--color-bg-success-base),
|
||||||
|
var(--overlay-strength-success)
|
||||||
|
)};
|
||||||
|
|
||||||
|
/* BORDER TOKENS */
|
||||||
|
|
||||||
|
--border-strength-primary: 15%;
|
||||||
|
--color-border-primary: color-mix(
|
||||||
|
in oklab,
|
||||||
|
var(--color-bg-primary),
|
||||||
|
var(--color-grey-950) var(--border-strength-primary)
|
||||||
|
);
|
||||||
|
--color-border-media: rgb(252 248 255 / 15%);
|
||||||
|
--color-border-on-bg-secondary: var(--color-grey-200);
|
||||||
|
--color-border-on-bg-brand-softer: var(--color-indigo-200);
|
||||||
|
--color-border-on-bg-error-softer: #{utils.css-alpha(
|
||||||
|
var(--color-text-error),
|
||||||
|
50%
|
||||||
|
)};
|
||||||
|
--color-border-on-bg-warning-softer: #{utils.css-alpha(
|
||||||
|
var(--color-text-warning),
|
||||||
|
50%
|
||||||
|
)};
|
||||||
|
--color-border-on-bg-success-softer: #{utils.css-alpha(
|
||||||
|
var(--color-text-success),
|
||||||
|
50%
|
||||||
|
)};
|
||||||
|
--color-border-on-bg-inverted: var(--color-border-primary);
|
||||||
|
|
||||||
|
/* SHADOW TOKENS */
|
||||||
|
|
||||||
|
--shadow-strength-primary: 30%;
|
||||||
|
--color-shadow-primary: #{utils.css-alpha(
|
||||||
|
var(--color-black),
|
||||||
|
var(--shadow-strength-primary)
|
||||||
|
)};
|
||||||
|
--dropdown-shadow:
|
||||||
|
0 20px 25px -5px var(--color-shadow-primary),
|
||||||
|
0 8px 10px -6px var(--color-shadow-primary);
|
||||||
|
--overlay-icon-shadow: drop-shadow(0 0 8px var(--color-shadow-primary));
|
||||||
|
|
||||||
|
/* GRAPHS/CHARTS TOKENS */
|
||||||
|
|
||||||
|
--color-graph-primary-stroke: var(--color-text-brand);
|
||||||
|
--color-graph-primary-fill: var(--color-bg-brand-softer);
|
||||||
|
--color-graph-warning-stroke: var(--color-text-warning);
|
||||||
|
--color-graph-warning-fill: var(--color-bg-warning-softer);
|
||||||
|
--color-graph-disabled-stroke: var(--color-text-disabled);
|
||||||
|
--color-graph-disabled-fill: var(--color-bg-disabled);
|
||||||
|
|
||||||
|
/* LEGACY TOKENS */
|
||||||
|
|
||||||
|
--rich-text-container-color: rgb(255 216 231 / 100%);
|
||||||
|
--rich-text-text-color: rgb(114 47 83 / 100%);
|
||||||
|
--rich-text-decorations-color: rgb(255 175 212 / 100%);
|
||||||
|
|
||||||
|
/* MISCELLANEOUS */
|
||||||
|
|
||||||
|
--outline-focus-default: 2px solid var(--color-text-brand);
|
||||||
|
--avatar-border-radius: 8px;
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -1,591 +0,0 @@
|
|||||||
// Notes!
|
|
||||||
// Sass color functions, "darken" and "lighten" are automatically replaced.
|
|
||||||
@use 'sass:color';
|
|
||||||
@use '../functions' as *;
|
|
||||||
@use '../variables' as *;
|
|
||||||
|
|
||||||
.simple_form .button.button-tertiary {
|
|
||||||
color: $highlight-text-color;
|
|
||||||
|
|
||||||
&:hover,
|
|
||||||
&:focus,
|
|
||||||
&:active {
|
|
||||||
color: $white;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.status-card__actions button,
|
|
||||||
.status-card__actions a {
|
|
||||||
color: color.change($white, $alpha: 0.8);
|
|
||||||
|
|
||||||
&:hover,
|
|
||||||
&:active,
|
|
||||||
&:focus {
|
|
||||||
color: $white;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// Change default background colors of columns
|
|
||||||
.interaction-modal {
|
|
||||||
background: $white;
|
|
||||||
border: 1px solid var(--background-border-color);
|
|
||||||
}
|
|
||||||
|
|
||||||
.rules-list li::before {
|
|
||||||
background: $ui-highlight-color;
|
|
||||||
}
|
|
||||||
|
|
||||||
.directory__card__img {
|
|
||||||
background: lighten($ui-base-color, 12%);
|
|
||||||
}
|
|
||||||
|
|
||||||
.account__header {
|
|
||||||
background: $white;
|
|
||||||
}
|
|
||||||
|
|
||||||
.column-header__button.active {
|
|
||||||
color: $ui-highlight-color;
|
|
||||||
|
|
||||||
&:hover,
|
|
||||||
&:active,
|
|
||||||
&:focus {
|
|
||||||
color: $ui-highlight-color;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.icon-button:disabled {
|
|
||||||
color: darken($action-button-color, 25%);
|
|
||||||
}
|
|
||||||
|
|
||||||
.getting-started__footer a {
|
|
||||||
color: $ui-secondary-color;
|
|
||||||
text-decoration: underline;
|
|
||||||
}
|
|
||||||
|
|
||||||
.confirmation-modal__secondary-button,
|
|
||||||
.confirmation-modal__cancel-button,
|
|
||||||
.mute-modal__cancel-button,
|
|
||||||
.block-modal__cancel-button {
|
|
||||||
color: lighten($ui-base-color, 26%);
|
|
||||||
|
|
||||||
&:hover,
|
|
||||||
&:focus,
|
|
||||||
&:active {
|
|
||||||
color: $primary-text-color;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.getting-started .navigation-bar {
|
|
||||||
border-top: 1px solid var(--background-border-color);
|
|
||||||
border-bottom: 1px solid var(--background-border-color);
|
|
||||||
|
|
||||||
@media screen and (max-width: $no-gap-breakpoint) {
|
|
||||||
border-top: 0;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.search__input,
|
|
||||||
.search__popout,
|
|
||||||
.setting-text,
|
|
||||||
.report-dialog-modal__textarea,
|
|
||||||
.audio-player {
|
|
||||||
border: 1px solid var(--background-border-color);
|
|
||||||
}
|
|
||||||
|
|
||||||
.report-dialog-modal .dialog-option .poll__input {
|
|
||||||
color: $white;
|
|
||||||
}
|
|
||||||
|
|
||||||
.upload-progress__backdrop {
|
|
||||||
background: $ui-base-color;
|
|
||||||
}
|
|
||||||
|
|
||||||
// Change the background colors of statuses
|
|
||||||
.focusable:focus-visible {
|
|
||||||
background: lighten($white, 4%);
|
|
||||||
}
|
|
||||||
|
|
||||||
.account-gallery__item a {
|
|
||||||
background-color: $ui-base-color;
|
|
||||||
}
|
|
||||||
|
|
||||||
// Change the text colors on inverted background
|
|
||||||
.actions-modal ul li:not(:empty) a.active,
|
|
||||||
.actions-modal ul li:not(:empty) a.active button,
|
|
||||||
.actions-modal ul li:not(:empty) a:active,
|
|
||||||
.actions-modal ul li:not(:empty) a:active button,
|
|
||||||
.actions-modal ul li:not(:empty) a:focus,
|
|
||||||
.actions-modal ul li:not(:empty) a:focus button,
|
|
||||||
.actions-modal ul li:not(:empty) a:hover,
|
|
||||||
.actions-modal ul li:not(:empty) a:hover button,
|
|
||||||
.simple_form button:not(.button, .link-button) {
|
|
||||||
color: $white;
|
|
||||||
}
|
|
||||||
|
|
||||||
.compare-history-modal .report-modal__target,
|
|
||||||
.report-dialog-modal .poll__option.dialog-option {
|
|
||||||
border-bottom-color: lighten($ui-base-color, 4%);
|
|
||||||
}
|
|
||||||
|
|
||||||
.report-dialog-modal__container {
|
|
||||||
border-top-color: lighten($ui-base-color, 4%);
|
|
||||||
}
|
|
||||||
|
|
||||||
.dialog-modal__content__preview {
|
|
||||||
background: #fff;
|
|
||||||
border-bottom: 1px solid var(--modal-border-color);
|
|
||||||
}
|
|
||||||
|
|
||||||
.reactions-bar__item:hover,
|
|
||||||
.reactions-bar__item:focus,
|
|
||||||
.reactions-bar__item:active {
|
|
||||||
background-color: $ui-base-color;
|
|
||||||
}
|
|
||||||
|
|
||||||
.reactions-bar__item.active {
|
|
||||||
background-color: color.mix($white, $ui-highlight-color, 80%);
|
|
||||||
border-color: color.mix(
|
|
||||||
lighten($ui-base-color, 8%),
|
|
||||||
$ui-highlight-color,
|
|
||||||
80%
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
.media-modal__overlay .picture-in-picture__footer {
|
|
||||||
border: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.picture-in-picture__header {
|
|
||||||
border-bottom: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.announcements,
|
|
||||||
.picture-in-picture__footer {
|
|
||||||
border-top: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.icon-with-badge__badge {
|
|
||||||
border-color: $white;
|
|
||||||
color: $white;
|
|
||||||
}
|
|
||||||
|
|
||||||
.column-settings__hashtags .column-select__option {
|
|
||||||
color: $white;
|
|
||||||
}
|
|
||||||
|
|
||||||
.dashboard__quick-access,
|
|
||||||
.focal-point__preview strong,
|
|
||||||
.admin-wrapper .content__heading__tabs a.selected {
|
|
||||||
color: $white;
|
|
||||||
}
|
|
||||||
|
|
||||||
.flash-message.warning {
|
|
||||||
color: lighten($gold-star, 16%);
|
|
||||||
}
|
|
||||||
|
|
||||||
.boost-modal__action-bar,
|
|
||||||
.confirmation-modal__action-bar,
|
|
||||||
.mute-modal__action-bar,
|
|
||||||
.block-modal__action-bar,
|
|
||||||
.onboarding-modal__paginator,
|
|
||||||
.error-modal__footer {
|
|
||||||
background: darken($ui-base-color, 6%);
|
|
||||||
|
|
||||||
.onboarding-modal__nav,
|
|
||||||
.error-modal__nav {
|
|
||||||
&:hover,
|
|
||||||
&:focus,
|
|
||||||
&:active {
|
|
||||||
background-color: darken($ui-base-color, 12%);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.display-case__case {
|
|
||||||
background: $white;
|
|
||||||
}
|
|
||||||
|
|
||||||
.embed-modal .embed-modal__container .embed-modal__html {
|
|
||||||
background: $white;
|
|
||||||
border: 1px solid var(--background-border-color);
|
|
||||||
|
|
||||||
&:focus {
|
|
||||||
border-color: lighten($ui-base-color, 12%);
|
|
||||||
background: $white;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.react-toggle-track {
|
|
||||||
background: $ui-primary-color;
|
|
||||||
}
|
|
||||||
|
|
||||||
.react-toggle:hover:not(.react-toggle--disabled) .react-toggle-track {
|
|
||||||
background: lighten($ui-primary-color, 10%);
|
|
||||||
}
|
|
||||||
|
|
||||||
.react-toggle.react-toggle--checked:hover:not(.react-toggle--disabled)
|
|
||||||
.react-toggle-track {
|
|
||||||
background: lighten($ui-highlight-color, 10%);
|
|
||||||
}
|
|
||||||
|
|
||||||
// Change the default color used for the text in an empty column or on the error column
|
|
||||||
.empty-column-indicator,
|
|
||||||
.error-column {
|
|
||||||
color: $primary-text-color;
|
|
||||||
background: $white;
|
|
||||||
}
|
|
||||||
|
|
||||||
// Change the default colors used on some parts of the profile pages
|
|
||||||
.activity-stream-tabs {
|
|
||||||
background: $white;
|
|
||||||
border-bottom-color: lighten($ui-base-color, 8%);
|
|
||||||
}
|
|
||||||
|
|
||||||
.nothing-here,
|
|
||||||
.page-header,
|
|
||||||
.directory__tag > a,
|
|
||||||
.directory__tag > div {
|
|
||||||
background: $white;
|
|
||||||
border: 1px solid var(--background-border-color);
|
|
||||||
}
|
|
||||||
|
|
||||||
.picture-in-picture-placeholder {
|
|
||||||
background: $white;
|
|
||||||
border-color: lighten($ui-base-color, 8%);
|
|
||||||
color: lighten($ui-base-color, 8%);
|
|
||||||
}
|
|
||||||
|
|
||||||
.directory__tag > a {
|
|
||||||
&:hover,
|
|
||||||
&:active,
|
|
||||||
&:focus {
|
|
||||||
background: $ui-base-color;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.batch-table {
|
|
||||||
&__toolbar,
|
|
||||||
&__row,
|
|
||||||
.nothing-here {
|
|
||||||
border-color: lighten($ui-base-color, 8%);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.accounts-grid {
|
|
||||||
.account-grid-card {
|
|
||||||
.controls {
|
|
||||||
.icon-button {
|
|
||||||
color: $darker-text-color;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.name {
|
|
||||||
a {
|
|
||||||
color: $primary-text-color;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.username {
|
|
||||||
color: $darker-text-color;
|
|
||||||
}
|
|
||||||
|
|
||||||
.account__header__content {
|
|
||||||
color: $primary-text-color;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.simple_form {
|
|
||||||
.warning {
|
|
||||||
box-shadow: none;
|
|
||||||
background: color.change($error-red, $alpha: 0.5);
|
|
||||||
text-shadow: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
.recommended {
|
|
||||||
border-color: $ui-highlight-color;
|
|
||||||
color: $ui-highlight-color;
|
|
||||||
background-color: color.change($ui-highlight-color, $alpha: 0.1);
|
|
||||||
}
|
|
||||||
|
|
||||||
input[type='text'],
|
|
||||||
input[type='number'],
|
|
||||||
input[type='email'],
|
|
||||||
input[type='password'],
|
|
||||||
input[type='url'],
|
|
||||||
input[type='datetime-local'],
|
|
||||||
textarea {
|
|
||||||
background: darken($ui-base-color, 10%);
|
|
||||||
}
|
|
||||||
|
|
||||||
select {
|
|
||||||
background: darken($ui-base-color, 10%)
|
|
||||||
url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14.933 18.467' height='19.698' width='15.929'><path d='M3.467 14.967l-3.393-3.5H14.86l-3.392 3.5c-1.866 1.925-3.666 3.5-4 3.5-.335 0-2.135-1.575-4-3.5zm.266-11.234L7.467 0 11.2 3.733l3.733 3.734H0l3.733-3.734z' fill='#{hex-color(lighten($ui-base-color, 12%))}'/></svg>")
|
|
||||||
no-repeat right 8px center / auto 14px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.compose-form .compose-form__warning {
|
|
||||||
border-color: $ui-highlight-color;
|
|
||||||
background-color: color.change($ui-highlight-color, $alpha: 0.1);
|
|
||||||
|
|
||||||
&,
|
|
||||||
a {
|
|
||||||
color: $ui-highlight-color;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.status__content,
|
|
||||||
.reply-indicator__content {
|
|
||||||
a {
|
|
||||||
color: $highlight-text-color;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.notification__filter-bar button.active::after,
|
|
||||||
.account__section-headline a.active::after {
|
|
||||||
border-color: transparent transparent $white;
|
|
||||||
}
|
|
||||||
|
|
||||||
.activity-stream,
|
|
||||||
.nothing-here,
|
|
||||||
.directory__tag > a,
|
|
||||||
.directory__tag > div,
|
|
||||||
.card > a,
|
|
||||||
.page-header,
|
|
||||||
.compose-form,
|
|
||||||
.compose-form__warning {
|
|
||||||
box-shadow: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
.card {
|
|
||||||
&__img {
|
|
||||||
background: darken($ui-base-color, 10%);
|
|
||||||
}
|
|
||||||
|
|
||||||
& > a {
|
|
||||||
&:hover,
|
|
||||||
&:active,
|
|
||||||
&:focus {
|
|
||||||
.card__bar {
|
|
||||||
background: darken($ui-base-color, 10%);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.status__wrapper-direct {
|
|
||||||
background-color: color.change($ui-highlight-color, $alpha: 0.1);
|
|
||||||
|
|
||||||
&:focus {
|
|
||||||
background-color: color.change($ui-highlight-color, $alpha: 0.15);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// Glitch-soc-specific changes
|
|
||||||
|
|
||||||
.pillbar-button {
|
|
||||||
background: $ui-secondary-color;
|
|
||||||
|
|
||||||
&:not([disabled]) {
|
|
||||||
&:hover,
|
|
||||||
&:focus {
|
|
||||||
background: darken($ui-secondary-color, 10%);
|
|
||||||
}
|
|
||||||
|
|
||||||
&.active {
|
|
||||||
background-color: darken($ui-highlight-color, 2%);
|
|
||||||
|
|
||||||
&:hover,
|
|
||||||
&:focus {
|
|
||||||
background: lighten($ui-highlight-color, 10%);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.glitch.local-settings {
|
|
||||||
background: $ui-base-color;
|
|
||||||
border: 1px solid lighten($ui-base-color, 8%);
|
|
||||||
}
|
|
||||||
|
|
||||||
.glitch.local-settings__navigation {
|
|
||||||
background: darken($ui-base-color, 8%);
|
|
||||||
}
|
|
||||||
|
|
||||||
.glitch.local-settings__navigation__item {
|
|
||||||
background: darken($ui-base-color, 8%);
|
|
||||||
border-bottom: 1px lighten($ui-base-color, 8%) solid;
|
|
||||||
|
|
||||||
&:hover {
|
|
||||||
background: $ui-base-color;
|
|
||||||
}
|
|
||||||
|
|
||||||
&.active {
|
|
||||||
background: $ui-highlight-color;
|
|
||||||
color: $white;
|
|
||||||
}
|
|
||||||
|
|
||||||
&.close,
|
|
||||||
&.close:hover {
|
|
||||||
background: $error-value-color;
|
|
||||||
color: $primary-text-color;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.drawer__inner__mastodon {
|
|
||||||
background: $white
|
|
||||||
url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 234.80078 31.757813" width="234.80078" height="31.757812"><path d="M19.599609 0c-1.05 0-2.10039.375-2.90039 1.125L0 16.925781v14.832031h234.80078V17.025391l-16.5-15.900391c-1.6-1.5-4.20078-1.5-5.80078 0l-13.80078 13.099609c-1.6 1.5-4.19883 1.5-5.79883 0L179.09961 1.125c-1.6-1.5-4.19883-1.5-5.79883 0L159.5 14.224609c-1.6 1.5-4.20078 1.5-5.80078 0L139.90039 1.125c-1.6-1.5-4.20078-1.5-5.80078 0l-13.79883 13.099609c-1.6 1.5-4.20078 1.5-5.80078 0L100.69922 1.125c-1.600001-1.5-4.198829-1.5-5.798829 0l-13.59961 13.099609c-1.6 1.5-4.200781 1.5-5.800781 0L61.699219 1.125c-1.6-1.5-4.198828-1.5-5.798828 0L42.099609 14.224609c-1.6 1.5-4.198828 1.5-5.798828 0L22.5 1.125C21.7.375 20.649609 0 19.599609 0z" fill="#{hex-color($ui-base-color)}"/></svg>')
|
|
||||||
no-repeat bottom / 100% auto !important;
|
|
||||||
|
|
||||||
.mastodon {
|
|
||||||
filter: contrast(75%) brightness(75%) !important;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.compose-form__actions .icon-button.active,
|
|
||||||
.dropdown-button.active,
|
|
||||||
.language-dropdown__dropdown__results__item:focus,
|
|
||||||
.language-dropdown__dropdown__results__item.active,
|
|
||||||
.language-dropdown__dropdown__results__item:focus
|
|
||||||
.language-dropdown__dropdown__results__item__common-name,
|
|
||||||
.language-dropdown__dropdown__results__item.active
|
|
||||||
.language-dropdown__dropdown__results__item__common-name {
|
|
||||||
color: $white;
|
|
||||||
}
|
|
||||||
|
|
||||||
.privacy-dropdown__option,
|
|
||||||
.visibility-dropdown__option {
|
|
||||||
&:focus,
|
|
||||||
&.active {
|
|
||||||
--dropdown-text-color: #{$white};
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.compose-form .spoiler-input__input {
|
|
||||||
color: lighten($ui-highlight-color, 8%);
|
|
||||||
}
|
|
||||||
|
|
||||||
.emoji-mart-search input,
|
|
||||||
.language-dropdown__dropdown .emoji-mart-search input,
|
|
||||||
.poll__option input[type='text'] {
|
|
||||||
background: darken($ui-base-color, 10%);
|
|
||||||
}
|
|
||||||
|
|
||||||
.dropdown-button.warning {
|
|
||||||
border-color: #b3261e;
|
|
||||||
color: #b3261e;
|
|
||||||
|
|
||||||
&.active {
|
|
||||||
background-color: #f9dedc;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.search__popout__menu__item {
|
|
||||||
&:hover,
|
|
||||||
&:active,
|
|
||||||
&:focus,
|
|
||||||
&.active {
|
|
||||||
color: $white;
|
|
||||||
|
|
||||||
mark,
|
|
||||||
.icon-button {
|
|
||||||
color: $white;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.inline-follow-suggestions {
|
|
||||||
background-color: color.change($ui-highlight-color, $alpha: 0.1);
|
|
||||||
border-bottom-color: color.change($ui-highlight-color, $alpha: 0.3);
|
|
||||||
|
|
||||||
&.focusable:focus-visible {
|
|
||||||
background: color.change($ui-highlight-color, $alpha: 0.1);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.inline-follow-suggestions__body__scrollable__card {
|
|
||||||
background: $white;
|
|
||||||
}
|
|
||||||
|
|
||||||
.inline-follow-suggestions__body__scroll-button__icon {
|
|
||||||
color: $white;
|
|
||||||
}
|
|
||||||
|
|
||||||
a.sparkline {
|
|
||||||
&:hover,
|
|
||||||
&:focus,
|
|
||||||
&:active {
|
|
||||||
background: darken($ui-base-color, 10%);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.dashboard__counters {
|
|
||||||
& > div {
|
|
||||||
& > a {
|
|
||||||
&:hover,
|
|
||||||
&:focus,
|
|
||||||
&:active {
|
|
||||||
background: darken($ui-base-color, 10%);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.directory {
|
|
||||||
&__tag {
|
|
||||||
& > a {
|
|
||||||
&:hover,
|
|
||||||
&:focus,
|
|
||||||
&:active {
|
|
||||||
background: darken($ui-base-color, 10%);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.strike-entry {
|
|
||||||
&:hover,
|
|
||||||
&:focus,
|
|
||||||
&:active {
|
|
||||||
background: darken($ui-base-color, 10%);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.setting-text {
|
|
||||||
background: darken($ui-base-color, 10%);
|
|
||||||
}
|
|
||||||
|
|
||||||
.report-dialog-modal__textarea {
|
|
||||||
background: darken($ui-base-color, 10%);
|
|
||||||
}
|
|
||||||
|
|
||||||
.autosuggest-account {
|
|
||||||
.display-name__account {
|
|
||||||
color: $dark-text-color;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.notification-group--annual-report {
|
|
||||||
.notification-group__icon,
|
|
||||||
.notification-group__main .link-button {
|
|
||||||
color: var(--indigo-3);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
@supports not selector(::-webkit-scrollbar) {
|
|
||||||
html {
|
|
||||||
scrollbar-color: color.change($action-button-color, $alpha: 0.25)
|
|
||||||
var(--background-border-color);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.custom-scrollbars {
|
|
||||||
::-webkit-scrollbar-thumb {
|
|
||||||
opacity: 0.25;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
kbd {
|
|
||||||
background-color: color.change($ui-highlight-color, $alpha: 0.1);
|
|
||||||
}
|
|
||||||
@@ -1,46 +0,0 @@
|
|||||||
@use 'sass:color';
|
|
||||||
|
|
||||||
@use '../functions' with (
|
|
||||||
$darken-multiplier: 1,
|
|
||||||
$lighten-multiplier: -1
|
|
||||||
);
|
|
||||||
|
|
||||||
$black: #000; // Black
|
|
||||||
$white: #fff; // White
|
|
||||||
$blurple-500: #6364ff; // Brand purple
|
|
||||||
$grey-600: hsl(240deg, 8%, 33%); // Trout
|
|
||||||
$grey-100: hsl(240deg, 51%, 90%); // Topaz
|
|
||||||
|
|
||||||
$classic-base-color: hsl(240deg, 16%, 19%);
|
|
||||||
$classic-secondary-color: hsl(255deg, 25%, 88%);
|
|
||||||
$classic-highlight-color: $blurple-500;
|
|
||||||
|
|
||||||
@use '../variables' with (
|
|
||||||
$success-green: color.adjust(
|
|
||||||
hsl(138deg, 32%, 35%),
|
|
||||||
$lightness: 8%,
|
|
||||||
$space: hsl
|
|
||||||
),
|
|
||||||
$base-overlay-background: $white,
|
|
||||||
|
|
||||||
$ui-base-color: $classic-secondary-color,
|
|
||||||
$ui-base-lighter-color: hsl(250deg, 24%, 75%),
|
|
||||||
$ui-secondary-color: $classic-base-color,
|
|
||||||
|
|
||||||
$ui-button-secondary-color: $grey-600,
|
|
||||||
$ui-button-secondary-border-color: $grey-600,
|
|
||||||
$ui-button-secondary-focus-color: $white,
|
|
||||||
$ui-button-tertiary-color: $blurple-500,
|
|
||||||
$ui-button-tertiary-border-color: $blurple-500,
|
|
||||||
|
|
||||||
$primary-text-color: $black,
|
|
||||||
$darker-text-color: $classic-base-color,
|
|
||||||
$lighter-text-color: $classic-base-color,
|
|
||||||
$highlight-text-color: $classic-highlight-color,
|
|
||||||
$dark-text-color: hsl(240deg, 16%, 32%),
|
|
||||||
$light-text-color: hsl(240deg, 16%, 32%),
|
|
||||||
$inverted-text-color: $black,
|
|
||||||
|
|
||||||
$action-button-color: hsl(240deg, 16%, 45%),
|
|
||||||
$emojis-requiring-inversion: 'chains'
|
|
||||||
);
|
|
||||||
139
app/javascript/flavours/glitch/styles/mastodon/reset.scss
Normal file
139
app/javascript/flavours/glitch/styles/mastodon/reset.scss
Normal file
@@ -0,0 +1,139 @@
|
|||||||
|
/* http://meyerweb.com/eric/tools/css/reset/
|
||||||
|
v2.0 | 20110126
|
||||||
|
License: none (public domain)
|
||||||
|
*/
|
||||||
|
|
||||||
|
html,
|
||||||
|
body,
|
||||||
|
div,
|
||||||
|
span,
|
||||||
|
applet,
|
||||||
|
object,
|
||||||
|
iframe,
|
||||||
|
h1,
|
||||||
|
h2,
|
||||||
|
h3,
|
||||||
|
h4,
|
||||||
|
h5,
|
||||||
|
h6,
|
||||||
|
p,
|
||||||
|
blockquote,
|
||||||
|
pre,
|
||||||
|
a,
|
||||||
|
abbr,
|
||||||
|
acronym,
|
||||||
|
address,
|
||||||
|
big,
|
||||||
|
cite,
|
||||||
|
code,
|
||||||
|
del,
|
||||||
|
dfn,
|
||||||
|
em,
|
||||||
|
img,
|
||||||
|
ins,
|
||||||
|
kbd,
|
||||||
|
q,
|
||||||
|
s,
|
||||||
|
samp,
|
||||||
|
small,
|
||||||
|
strike,
|
||||||
|
strong,
|
||||||
|
sub,
|
||||||
|
sup,
|
||||||
|
tt,
|
||||||
|
var,
|
||||||
|
b,
|
||||||
|
u,
|
||||||
|
i,
|
||||||
|
center,
|
||||||
|
dl,
|
||||||
|
dt,
|
||||||
|
dd,
|
||||||
|
ol,
|
||||||
|
ul,
|
||||||
|
li,
|
||||||
|
fieldset,
|
||||||
|
form,
|
||||||
|
label,
|
||||||
|
legend,
|
||||||
|
table,
|
||||||
|
caption,
|
||||||
|
tbody,
|
||||||
|
tfoot,
|
||||||
|
thead,
|
||||||
|
tr,
|
||||||
|
th,
|
||||||
|
td,
|
||||||
|
article,
|
||||||
|
aside,
|
||||||
|
canvas,
|
||||||
|
details,
|
||||||
|
embed,
|
||||||
|
figure,
|
||||||
|
figcaption,
|
||||||
|
footer,
|
||||||
|
header,
|
||||||
|
hgroup,
|
||||||
|
menu,
|
||||||
|
nav,
|
||||||
|
output,
|
||||||
|
ruby,
|
||||||
|
section,
|
||||||
|
summary,
|
||||||
|
time,
|
||||||
|
mark,
|
||||||
|
audio,
|
||||||
|
video {
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
border: 0;
|
||||||
|
font-size: 100%;
|
||||||
|
font: inherit;
|
||||||
|
vertical-align: baseline;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* HTML5 display-role reset for older browsers */
|
||||||
|
article,
|
||||||
|
aside,
|
||||||
|
details,
|
||||||
|
figcaption,
|
||||||
|
figure,
|
||||||
|
footer,
|
||||||
|
header,
|
||||||
|
hgroup,
|
||||||
|
menu,
|
||||||
|
nav,
|
||||||
|
section {
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
|
||||||
|
body {
|
||||||
|
line-height: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
ol,
|
||||||
|
ul {
|
||||||
|
list-style: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
blockquote,
|
||||||
|
q {
|
||||||
|
quotes: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
blockquote:before,
|
||||||
|
blockquote:after,
|
||||||
|
q:before,
|
||||||
|
q:after {
|
||||||
|
content: '';
|
||||||
|
content: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
table {
|
||||||
|
border-collapse: collapse;
|
||||||
|
border-spacing: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
html:has(body.custom-scrollbars) {
|
||||||
|
scrollbar-color: var(--color-text-secondary) var(--color-bg-secondary);
|
||||||
|
}
|
||||||
@@ -1,40 +0,0 @@
|
|||||||
@use 'variables' as *;
|
|
||||||
@use 'functions' as *;
|
|
||||||
|
|
||||||
.modal-layout {
|
|
||||||
background: darken($ui-base-color, 4%)
|
|
||||||
url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 234.80078 31.757813" width="234.80078" height="31.757812"><path d="M19.599609 0c-1.05 0-2.10039.375-2.90039 1.125L0 16.925781v14.832031h234.80078V17.025391l-16.5-15.900391c-1.6-1.5-4.20078-1.5-5.80078 0l-13.80078 13.099609c-1.6 1.5-4.19883 1.5-5.79883 0L179.09961 1.125c-1.6-1.5-4.19883-1.5-5.79883 0L159.5 14.224609c-1.6 1.5-4.20078 1.5-5.80078 0L139.90039 1.125c-1.6-1.5-4.20078-1.5-5.80078 0l-13.79883 13.099609c-1.6 1.5-4.20078 1.5-5.80078 0L100.69922 1.125c-1.600001-1.5-4.198829-1.5-5.798829 0l-13.59961 13.099609c-1.6 1.5-4.200781 1.5-5.800781 0L61.699219 1.125c-1.6-1.5-4.198828-1.5-5.798828 0L42.099609 14.224609c-1.6 1.5-4.198828 1.5-5.798828 0L22.5 1.125C21.7.375 20.649609 0 19.599609 0z" fill="#{hex-color($ui-base-lighter-color)}33"/></svg>')
|
|
||||||
repeat-x bottom fixed;
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
height: 100vh;
|
|
||||||
padding: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.modal-layout__mastodon {
|
|
||||||
display: flex;
|
|
||||||
flex: 1;
|
|
||||||
flex-direction: column;
|
|
||||||
justify-content: flex-end;
|
|
||||||
|
|
||||||
> div {
|
|
||||||
flex: 1;
|
|
||||||
max-height: 235px;
|
|
||||||
position: relative;
|
|
||||||
|
|
||||||
img {
|
|
||||||
max-height: 100%;
|
|
||||||
max-width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
position: absolute;
|
|
||||||
bottom: 0;
|
|
||||||
inset-inline-start: 0;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
@media screen and (width <= 600px) {
|
|
||||||
.account-header {
|
|
||||||
margin-top: 0;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@@ -1,233 +0,0 @@
|
|||||||
@use 'sass:color';
|
|
||||||
@use 'variables' as *;
|
|
||||||
@use 'functions' as *;
|
|
||||||
|
|
||||||
.poll {
|
|
||||||
margin-top: 16px;
|
|
||||||
font-size: 14px;
|
|
||||||
|
|
||||||
li {
|
|
||||||
margin-bottom: 10px;
|
|
||||||
position: relative;
|
|
||||||
}
|
|
||||||
|
|
||||||
&__chart {
|
|
||||||
border-radius: 4px;
|
|
||||||
display: block;
|
|
||||||
background: darken($ui-primary-color, 5%);
|
|
||||||
height: 5px;
|
|
||||||
min-width: 1%;
|
|
||||||
|
|
||||||
&.leading {
|
|
||||||
background: $ui-highlight-color;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
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%);
|
|
||||||
}
|
|
||||||
|
|
||||||
&::-webkit-progress-value {
|
|
||||||
border-radius: 4px;
|
|
||||||
background: darken($ui-primary-color, 5%);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
&__option {
|
|
||||||
position: relative;
|
|
||||||
display: flex;
|
|
||||||
align-items: flex-start;
|
|
||||||
gap: 8px;
|
|
||||||
padding: 6px 0;
|
|
||||||
line-height: 18px;
|
|
||||||
cursor: default;
|
|
||||||
overflow: hidden;
|
|
||||||
|
|
||||||
&__text {
|
|
||||||
display: inline-block;
|
|
||||||
overflow-wrap: break-word;
|
|
||||||
max-width: calc(100% - 45px - 25px);
|
|
||||||
}
|
|
||||||
|
|
||||||
input[type='radio'],
|
|
||||||
input[type='checkbox'] {
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
.autosuggest-input {
|
|
||||||
flex: 1 1 auto;
|
|
||||||
}
|
|
||||||
|
|
||||||
input[type='text'] {
|
|
||||||
display: block;
|
|
||||||
box-sizing: border-box;
|
|
||||||
width: 100%;
|
|
||||||
font-size: 14px;
|
|
||||||
color: $secondary-text-color;
|
|
||||||
outline: 0;
|
|
||||||
font-family: inherit;
|
|
||||||
background: $ui-base-color;
|
|
||||||
border: 1px solid $darker-text-color;
|
|
||||||
border-radius: 4px;
|
|
||||||
padding: 8px 12px;
|
|
||||||
|
|
||||||
&:focus {
|
|
||||||
border-color: $ui-highlight-color;
|
|
||||||
}
|
|
||||||
|
|
||||||
@media screen and (width <= 600px) {
|
|
||||||
font-size: 16px;
|
|
||||||
line-height: 24px;
|
|
||||||
letter-spacing: 0.5px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
&.selectable {
|
|
||||||
cursor: pointer;
|
|
||||||
}
|
|
||||||
|
|
||||||
&.editable,
|
|
||||||
&.disabled {
|
|
||||||
align-items: center;
|
|
||||||
overflow: visible;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
&__input {
|
|
||||||
display: block;
|
|
||||||
position: relative;
|
|
||||||
border: 1px solid $ui-primary-color;
|
|
||||||
box-sizing: border-box;
|
|
||||||
width: 17px;
|
|
||||||
height: 17px;
|
|
||||||
border-radius: 50%;
|
|
||||||
flex: 0 0 auto;
|
|
||||||
|
|
||||||
&.checkbox {
|
|
||||||
border-radius: 4px;
|
|
||||||
}
|
|
||||||
|
|
||||||
&:active,
|
|
||||||
&:focus,
|
|
||||||
&:hover {
|
|
||||||
border-color: lighten($valid-value-color, 15%);
|
|
||||||
border-width: 4px;
|
|
||||||
}
|
|
||||||
|
|
||||||
&.active {
|
|
||||||
background-color: $valid-value-color;
|
|
||||||
border-color: $valid-value-color;
|
|
||||||
}
|
|
||||||
|
|
||||||
&::-moz-focus-inner {
|
|
||||||
outline: 0 !important;
|
|
||||||
border: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
&:focus,
|
|
||||||
&:active {
|
|
||||||
outline: 0 !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
&.disabled {
|
|
||||||
border-color: $dark-text-color;
|
|
||||||
|
|
||||||
&.active {
|
|
||||||
background: $dark-text-color;
|
|
||||||
}
|
|
||||||
|
|
||||||
&:active,
|
|
||||||
&:focus,
|
|
||||||
&:hover {
|
|
||||||
border-color: $dark-text-color;
|
|
||||||
border-width: 1px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
&__option.editable &__input,
|
|
||||||
&__option.disabled &__input {
|
|
||||||
&:active,
|
|
||||||
&:focus,
|
|
||||||
&:hover {
|
|
||||||
border-color: $ui-primary-color;
|
|
||||||
border-width: 1px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
&__number {
|
|
||||||
display: inline-block;
|
|
||||||
width: 45px;
|
|
||||||
font-weight: 700;
|
|
||||||
flex: 0 0 45px;
|
|
||||||
}
|
|
||||||
|
|
||||||
&__voted {
|
|
||||||
padding: 0 5px;
|
|
||||||
display: inline-block;
|
|
||||||
|
|
||||||
&__mark {
|
|
||||||
font-size: 18px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
&__footer {
|
|
||||||
padding-top: 6px;
|
|
||||||
padding-bottom: 5px;
|
|
||||||
color: $dark-text-color;
|
|
||||||
}
|
|
||||||
|
|
||||||
&__link {
|
|
||||||
display: inline;
|
|
||||||
background: transparent;
|
|
||||||
padding: 0;
|
|
||||||
margin: 0;
|
|
||||||
border: 0;
|
|
||||||
color: $dark-text-color;
|
|
||||||
text-decoration: underline;
|
|
||||||
font-size: inherit;
|
|
||||||
|
|
||||||
&:hover {
|
|
||||||
text-decoration: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
&:active,
|
|
||||||
&:focus {
|
|
||||||
background-color: color.change($dark-text-color, $alpha: 0.1);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.button {
|
|
||||||
height: 36px;
|
|
||||||
padding: 0 16px;
|
|
||||||
margin-inline-end: 10px;
|
|
||||||
font-size: 14px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.muted .poll {
|
|
||||||
color: $dark-text-color;
|
|
||||||
|
|
||||||
&__chart {
|
|
||||||
background: rgba(darken($ui-primary-color, 14%), 0.7);
|
|
||||||
|
|
||||||
&.leading {
|
|
||||||
background: color.change($ui-highlight-color, $alpha: 0.5);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@@ -1,86 +0,0 @@
|
|||||||
@use 'variables' as *;
|
|
||||||
|
|
||||||
/* http://meyerweb.com/eric/tools/css/reset/
|
|
||||||
v2.0 | 20110126
|
|
||||||
License: none (public domain)
|
|
||||||
*/
|
|
||||||
|
|
||||||
html, body, div, span, applet, object, iframe,
|
|
||||||
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
|
|
||||||
a, abbr, acronym, address, big, cite, code,
|
|
||||||
del, dfn, em, img, ins, kbd, q, s, samp,
|
|
||||||
small, strike, strong, sub, sup, tt, var,
|
|
||||||
b, u, i, center,
|
|
||||||
dl, dt, dd, ol, ul, li,
|
|
||||||
fieldset, form, label, legend,
|
|
||||||
table, caption, tbody, tfoot, thead, tr, th, td,
|
|
||||||
article, aside, canvas, details, embed,
|
|
||||||
figure, figcaption, footer, header, hgroup,
|
|
||||||
menu, nav, output, ruby, section, summary,
|
|
||||||
time, mark, audio, video {
|
|
||||||
margin: 0;
|
|
||||||
padding: 0;
|
|
||||||
border: 0;
|
|
||||||
font-size: 100%;
|
|
||||||
font: inherit;
|
|
||||||
vertical-align: baseline;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* HTML5 display-role reset for older browsers */
|
|
||||||
article, aside, details, figcaption, figure,
|
|
||||||
footer, header, hgroup, menu, nav, section {
|
|
||||||
display: block;
|
|
||||||
}
|
|
||||||
|
|
||||||
body {
|
|
||||||
line-height: 1;
|
|
||||||
}
|
|
||||||
|
|
||||||
ol, ul {
|
|
||||||
list-style: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
blockquote, q {
|
|
||||||
quotes: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
blockquote:before, blockquote:after,
|
|
||||||
q:before, q:after {
|
|
||||||
content: '';
|
|
||||||
content: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
table {
|
|
||||||
border-collapse: collapse;
|
|
||||||
border-spacing: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
@supports not selector(::-webkit-scrollbar) {
|
|
||||||
html {
|
|
||||||
scrollbar-color: $action-button-color var(--background-border-color);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.custom-scrollbars {
|
|
||||||
::-webkit-scrollbar {
|
|
||||||
width: 8px;
|
|
||||||
height: 8px;
|
|
||||||
}
|
|
||||||
|
|
||||||
::-webkit-scrollbar-thumb {
|
|
||||||
background-color: $action-button-color;
|
|
||||||
border: 2px var(--background-border-color);
|
|
||||||
border-radius: 12px;
|
|
||||||
width: 6px;
|
|
||||||
box-shadow: inset 0 0 0 2px var(--background-border-color);
|
|
||||||
}
|
|
||||||
|
|
||||||
::-webkit-scrollbar-track {
|
|
||||||
background-color: var(--background-border-color);
|
|
||||||
border-radius: 0px;
|
|
||||||
}
|
|
||||||
|
|
||||||
::-webkit-scrollbar-corner {
|
|
||||||
background: transparent;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@@ -1,100 +0,0 @@
|
|||||||
@use 'functions' as *;
|
|
||||||
@use 'variables' as *;
|
|
||||||
|
|
||||||
body.rtl {
|
|
||||||
direction: rtl;
|
|
||||||
|
|
||||||
.reactions-bar {
|
|
||||||
direction: rtl;
|
|
||||||
}
|
|
||||||
|
|
||||||
.drawer__inner__mastodon > img {
|
|
||||||
transform: scaleX(-1);
|
|
||||||
}
|
|
||||||
|
|
||||||
.boost-modal__status-time {
|
|
||||||
float: left;
|
|
||||||
}
|
|
||||||
|
|
||||||
.compose-form .autosuggest-textarea__textarea {
|
|
||||||
padding-right: 10px;
|
|
||||||
padding-left: 10px + 22px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.columns-area {
|
|
||||||
direction: rtl;
|
|
||||||
}
|
|
||||||
|
|
||||||
.react-swipeable-view-container > * {
|
|
||||||
direction: rtl;
|
|
||||||
}
|
|
||||||
|
|
||||||
.account__avatar-wrapper {
|
|
||||||
float: right;
|
|
||||||
}
|
|
||||||
|
|
||||||
.column-header__setting-arrows {
|
|
||||||
float: left;
|
|
||||||
}
|
|
||||||
|
|
||||||
.setting-meta__label {
|
|
||||||
float: left;
|
|
||||||
}
|
|
||||||
|
|
||||||
.status__info .status__display-name {
|
|
||||||
padding-left: 25px;
|
|
||||||
padding-right: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.account__header__tabs__buttons > .icon-button {
|
|
||||||
margin-right: 0;
|
|
||||||
margin-left: 8px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.status__relative-time,
|
|
||||||
.activity-stream .status.light .status__header .status__meta {
|
|
||||||
float: left;
|
|
||||||
text-align: left;
|
|
||||||
}
|
|
||||||
|
|
||||||
.status__action-bar-button {
|
|
||||||
float: right;
|
|
||||||
}
|
|
||||||
|
|
||||||
.status__action-bar-dropdown {
|
|
||||||
float: right;
|
|
||||||
}
|
|
||||||
|
|
||||||
.detailed-status__display-name .display-name {
|
|
||||||
text-align: right;
|
|
||||||
}
|
|
||||||
|
|
||||||
.detailed-status__display-avatar {
|
|
||||||
float: right;
|
|
||||||
}
|
|
||||||
|
|
||||||
.admin-wrapper {
|
|
||||||
direction: rtl;
|
|
||||||
}
|
|
||||||
|
|
||||||
.react-swipeable-view-container > * {
|
|
||||||
direction: rtl;
|
|
||||||
}
|
|
||||||
|
|
||||||
.column-back-button__icon {
|
|
||||||
transform: scale(-1, 1);
|
|
||||||
}
|
|
||||||
|
|
||||||
.simple_form select {
|
|
||||||
background: $ui-base-color
|
|
||||||
url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14.933 18.467' height='19.698' width='15.929'><path d='M3.467 14.967l-3.393-3.5H14.86l-3.392 3.5c-1.866 1.925-3.666 3.5-4 3.5-.335 0-2.135-1.575-4-3.5zm.266-11.234L7.467 0 11.2 3.733l3.733 3.734H0l3.733-3.734z' fill='#{hex-color(lighten($ui-base-color, 12%))}'/></svg>")
|
|
||||||
no-repeat left 8px center / auto 16px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.dismissable-banner,
|
|
||||||
.warning-banner {
|
|
||||||
&__action {
|
|
||||||
float: left;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@@ -1,391 +0,0 @@
|
|||||||
@use 'variables' as *;
|
|
||||||
@use 'functions' as *;
|
|
||||||
|
|
||||||
.table {
|
|
||||||
width: 100%;
|
|
||||||
max-width: 100%;
|
|
||||||
border-spacing: 0;
|
|
||||||
border-collapse: collapse;
|
|
||||||
|
|
||||||
th,
|
|
||||||
td {
|
|
||||||
padding: 8px;
|
|
||||||
line-height: 18px;
|
|
||||||
vertical-align: top;
|
|
||||||
border-bottom: 1px solid var(--background-border-color);
|
|
||||||
text-align: start;
|
|
||||||
background: var(--background-color);
|
|
||||||
|
|
||||||
&.critical {
|
|
||||||
font-weight: 700;
|
|
||||||
color: $gold-star;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
& > thead > tr > th {
|
|
||||||
vertical-align: bottom;
|
|
||||||
font-weight: 500;
|
|
||||||
}
|
|
||||||
|
|
||||||
& > tbody > tr > th {
|
|
||||||
font-weight: 500;
|
|
||||||
}
|
|
||||||
|
|
||||||
& > tbody > tr:nth-child(odd) > td,
|
|
||||||
& > tbody > tr:nth-child(odd) > th {
|
|
||||||
background: var(--background-color);
|
|
||||||
}
|
|
||||||
|
|
||||||
& > tbody > tr:last-child > td,
|
|
||||||
& > tbody > tr:last-child > th {
|
|
||||||
border-bottom: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
a {
|
|
||||||
color: $darker-text-color;
|
|
||||||
text-decoration: none;
|
|
||||||
|
|
||||||
&:hover {
|
|
||||||
color: $highlight-text-color;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
strong {
|
|
||||||
font-weight: 500;
|
|
||||||
|
|
||||||
@each $lang in $cjk-langs {
|
|
||||||
&:lang(#{$lang}) {
|
|
||||||
font-weight: 700;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
&.inline-table {
|
|
||||||
& > tbody > tr:nth-child(odd) {
|
|
||||||
& > td,
|
|
||||||
& > th {
|
|
||||||
background: transparent;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
& > tbody > tr:first-child {
|
|
||||||
& > td,
|
|
||||||
& > th {
|
|
||||||
border-top: 0;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
&.horizontal-table {
|
|
||||||
border-collapse: collapse;
|
|
||||||
border-style: hidden;
|
|
||||||
|
|
||||||
& > tbody > tr > th,
|
|
||||||
& > tbody > tr > td {
|
|
||||||
padding: 11px 10px;
|
|
||||||
background: transparent;
|
|
||||||
border: 1px solid var(--background-border-color);
|
|
||||||
color: $secondary-text-color;
|
|
||||||
}
|
|
||||||
|
|
||||||
& > tbody > tr > th {
|
|
||||||
color: $darker-text-color;
|
|
||||||
font-weight: 600;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
&.batch-table {
|
|
||||||
& > thead > tr > th {
|
|
||||||
background: var(--background-color);
|
|
||||||
border-top: 1px solid var(--background-border-color);
|
|
||||||
border-bottom: 1px solid var(--background-border-color);
|
|
||||||
|
|
||||||
&:first-child {
|
|
||||||
border-radius: 4px 0 0;
|
|
||||||
border-inline-start: 1px solid var(--background-border-color);
|
|
||||||
}
|
|
||||||
|
|
||||||
&:last-child {
|
|
||||||
border-radius: 0 4px 0 0;
|
|
||||||
border-inline-end: 1px solid var(--background-border-color);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
&--invites tbody td {
|
|
||||||
vertical-align: middle;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.table-wrapper {
|
|
||||||
overflow: auto;
|
|
||||||
margin-bottom: 20px;
|
|
||||||
}
|
|
||||||
|
|
||||||
samp {
|
|
||||||
font-family: $font-monospace, monospace;
|
|
||||||
}
|
|
||||||
|
|
||||||
button.table-action-link {
|
|
||||||
background: transparent;
|
|
||||||
border: 0;
|
|
||||||
font: inherit;
|
|
||||||
}
|
|
||||||
|
|
||||||
button.table-action-link,
|
|
||||||
a.table-action-link {
|
|
||||||
text-decoration: none;
|
|
||||||
display: inline-block;
|
|
||||||
margin-inline-end: 5px;
|
|
||||||
padding: 0 10px;
|
|
||||||
color: $darker-text-color;
|
|
||||||
font-weight: 500;
|
|
||||||
white-space: nowrap;
|
|
||||||
|
|
||||||
&:hover {
|
|
||||||
color: $highlight-text-color;
|
|
||||||
}
|
|
||||||
|
|
||||||
&:first-child {
|
|
||||||
padding-inline-start: 0;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.batch-table {
|
|
||||||
&--no-toolbar {
|
|
||||||
.batch-table__toolbar {
|
|
||||||
position: static;
|
|
||||||
height: 4px;
|
|
||||||
border-bottom: none;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
&__toolbar,
|
|
||||||
&__row {
|
|
||||||
display: flex;
|
|
||||||
|
|
||||||
&__select {
|
|
||||||
box-sizing: border-box;
|
|
||||||
padding: 8px 16px;
|
|
||||||
cursor: pointer;
|
|
||||||
min-height: 100%;
|
|
||||||
|
|
||||||
input {
|
|
||||||
margin-top: 8px;
|
|
||||||
}
|
|
||||||
|
|
||||||
&--aligned {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
|
|
||||||
input {
|
|
||||||
margin-top: 0;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
&__actions,
|
|
||||||
&__content {
|
|
||||||
padding: 8px 0;
|
|
||||||
padding-inline-end: 16px;
|
|
||||||
flex: 1 1 auto;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
&__toolbar {
|
|
||||||
position: sticky;
|
|
||||||
top: 0;
|
|
||||||
z-index: 200;
|
|
||||||
border: 1px solid var(--background-border-color);
|
|
||||||
background: var(--background-color);
|
|
||||||
border-radius: 4px 4px 0 0;
|
|
||||||
height: 47px;
|
|
||||||
align-items: center;
|
|
||||||
|
|
||||||
&__actions {
|
|
||||||
text-align: end;
|
|
||||||
padding-inline-end: 16px - 5px;
|
|
||||||
|
|
||||||
.table-action-link {
|
|
||||||
padding: 0;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
&__select-all {
|
|
||||||
background: var(--background-color);
|
|
||||||
height: 47px;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
border: 1px solid var(--background-border-color);
|
|
||||||
border-top: 0;
|
|
||||||
color: $secondary-text-color;
|
|
||||||
display: none;
|
|
||||||
|
|
||||||
&.active {
|
|
||||||
display: flex;
|
|
||||||
}
|
|
||||||
|
|
||||||
.selected,
|
|
||||||
.not-selected {
|
|
||||||
display: none;
|
|
||||||
|
|
||||||
&.active {
|
|
||||||
display: block;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
strong {
|
|
||||||
font-weight: 700;
|
|
||||||
}
|
|
||||||
|
|
||||||
span {
|
|
||||||
padding: 8px;
|
|
||||||
display: inline-block;
|
|
||||||
}
|
|
||||||
|
|
||||||
button {
|
|
||||||
background: transparent;
|
|
||||||
border: 0;
|
|
||||||
font: inherit;
|
|
||||||
color: $highlight-text-color;
|
|
||||||
border-radius: 4px;
|
|
||||||
font-weight: 700;
|
|
||||||
padding: 8px;
|
|
||||||
|
|
||||||
&:hover,
|
|
||||||
&:focus,
|
|
||||||
&:active {
|
|
||||||
background: lighten($ui-base-color, 8%);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
&__form {
|
|
||||||
padding: 16px;
|
|
||||||
border: 1px solid var(--background-border-color);
|
|
||||||
border-top: 0;
|
|
||||||
background: var(--background-color);
|
|
||||||
|
|
||||||
.fields-row {
|
|
||||||
padding-top: 0;
|
|
||||||
margin-bottom: 0;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
&__row {
|
|
||||||
border: 1px solid var(--background-border-color);
|
|
||||||
border-top: 0;
|
|
||||||
background: var(--background-color);
|
|
||||||
|
|
||||||
@media screen and (max-width: $no-gap-breakpoint) {
|
|
||||||
.optional &:first-child {
|
|
||||||
border-top: 1px solid var(--background-border-color);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
&:last-child {
|
|
||||||
border-radius: 0 0 4px 4px;
|
|
||||||
}
|
|
||||||
|
|
||||||
&__content {
|
|
||||||
padding-top: 12px;
|
|
||||||
padding-bottom: 16px;
|
|
||||||
overflow: hidden;
|
|
||||||
|
|
||||||
&--unpadded {
|
|
||||||
padding: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
&--padded {
|
|
||||||
padding: 12px 16px 16px;
|
|
||||||
}
|
|
||||||
|
|
||||||
&--with-image {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
&__image {
|
|
||||||
flex: 0 0 auto;
|
|
||||||
display: flex;
|
|
||||||
justify-content: center;
|
|
||||||
align-items: center;
|
|
||||||
margin-inline-end: 10px;
|
|
||||||
|
|
||||||
.emojione {
|
|
||||||
width: 32px;
|
|
||||||
height: 32px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
&__text {
|
|
||||||
flex: 1 1 auto;
|
|
||||||
}
|
|
||||||
|
|
||||||
&__quote {
|
|
||||||
padding: 12px;
|
|
||||||
padding-top: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
&__extra {
|
|
||||||
flex: 0 0 auto;
|
|
||||||
text-align: end;
|
|
||||||
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;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// Reset the status card to not have borders, background or padding when
|
|
||||||
// inline in the table of statuses
|
|
||||||
.batch-table__row__content > .status__card {
|
|
||||||
border: none;
|
|
||||||
background: none;
|
|
||||||
padding: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.nothing-here {
|
|
||||||
border: 1px solid var(--background-border-color);
|
|
||||||
border-top: 0;
|
|
||||||
box-shadow: none;
|
|
||||||
background: var(--background-color);
|
|
||||||
|
|
||||||
@media screen and (max-width: $no-gap-breakpoint) {
|
|
||||||
border-top: 1px solid var(--background-border-color);
|
|
||||||
}
|
|
||||||
|
|
||||||
&--no-toolbar {
|
|
||||||
border-top: 1px solid var(--background-border-color);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
@media screen and (width <= 870px) {
|
|
||||||
.accounts-table tbody td.optional {
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.one-liner {
|
|
||||||
white-space: nowrap;
|
|
||||||
overflow: hidden;
|
|
||||||
text-overflow: ellipsis;
|
|
||||||
}
|
|
||||||
@@ -1,179 +0,0 @@
|
|||||||
@use 'sass:color';
|
|
||||||
@use 'variables' as *;
|
|
||||||
@use 'functions' as *;
|
|
||||||
|
|
||||||
.directory {
|
|
||||||
&__tag {
|
|
||||||
box-sizing: border-box;
|
|
||||||
margin-bottom: 10px;
|
|
||||||
|
|
||||||
& > a,
|
|
||||||
& > div {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: space-between;
|
|
||||||
border: 1px solid var(--background-border-color);
|
|
||||||
border-radius: 4px;
|
|
||||||
padding: 15px;
|
|
||||||
text-decoration: none;
|
|
||||||
color: inherit;
|
|
||||||
box-shadow: 0 0 15px color.change($base-shadow-color, $alpha: 0.2);
|
|
||||||
}
|
|
||||||
|
|
||||||
& > a {
|
|
||||||
&:hover,
|
|
||||||
&:active,
|
|
||||||
&:focus {
|
|
||||||
background: $ui-base-color;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
&.active > a {
|
|
||||||
background: $ui-highlight-color;
|
|
||||||
cursor: default;
|
|
||||||
}
|
|
||||||
|
|
||||||
&.disabled > div {
|
|
||||||
opacity: 0.5;
|
|
||||||
cursor: default;
|
|
||||||
}
|
|
||||||
|
|
||||||
h4 {
|
|
||||||
flex: 1 1 auto;
|
|
||||||
font-size: 18px;
|
|
||||||
font-weight: 700;
|
|
||||||
color: $primary-text-color;
|
|
||||||
white-space: nowrap;
|
|
||||||
overflow: hidden;
|
|
||||||
text-overflow: ellipsis;
|
|
||||||
|
|
||||||
small {
|
|
||||||
display: block;
|
|
||||||
font-weight: 400;
|
|
||||||
font-size: 15px;
|
|
||||||
margin-top: 8px;
|
|
||||||
color: $darker-text-color;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
&.active h4 {
|
|
||||||
&,
|
|
||||||
small,
|
|
||||||
.trends__item__current {
|
|
||||||
color: $primary-text-color;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.avatar-stack {
|
|
||||||
flex: 0 0 auto;
|
|
||||||
width: (36px + 4px) * 3;
|
|
||||||
}
|
|
||||||
|
|
||||||
&.active .avatar-stack .account__avatar {
|
|
||||||
border-color: $ui-highlight-color;
|
|
||||||
}
|
|
||||||
|
|
||||||
.trends__item__current {
|
|
||||||
padding-inline-end: 0;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.accounts-table {
|
|
||||||
width: 100%;
|
|
||||||
|
|
||||||
.account {
|
|
||||||
max-width: calc(56px + 30ch);
|
|
||||||
padding: 0;
|
|
||||||
border: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
strong {
|
|
||||||
font-weight: 700;
|
|
||||||
}
|
|
||||||
|
|
||||||
thead th {
|
|
||||||
text-align: center;
|
|
||||||
text-transform: uppercase;
|
|
||||||
color: $darker-text-color;
|
|
||||||
font-weight: 700;
|
|
||||||
padding: 10px;
|
|
||||||
|
|
||||||
&:first-child {
|
|
||||||
text-align: start;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
tbody td {
|
|
||||||
padding: 15px 0;
|
|
||||||
vertical-align: middle;
|
|
||||||
border-bottom: 1px solid lighten($ui-base-color, 8%);
|
|
||||||
}
|
|
||||||
|
|
||||||
tbody tr:last-child td {
|
|
||||||
border-bottom: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
&__count {
|
|
||||||
width: 120px;
|
|
||||||
text-align: center;
|
|
||||||
font-size: 15px;
|
|
||||||
font-weight: 500;
|
|
||||||
color: $primary-text-color;
|
|
||||||
|
|
||||||
small {
|
|
||||||
display: block;
|
|
||||||
color: $darker-text-color;
|
|
||||||
font-weight: 400;
|
|
||||||
font-size: 14px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
tbody td.accounts-table__extra {
|
|
||||||
width: 120px;
|
|
||||||
text-align: end;
|
|
||||||
color: $darker-text-color;
|
|
||||||
padding-inline-end: 16px;
|
|
||||||
|
|
||||||
a {
|
|
||||||
text-decoration: none;
|
|
||||||
color: inherit;
|
|
||||||
|
|
||||||
&:focus,
|
|
||||||
&:hover,
|
|
||||||
&:active {
|
|
||||||
color: $highlight-text-color;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
&__comment {
|
|
||||||
width: 50%;
|
|
||||||
vertical-align: initial !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
tbody td.accounts-table__interrelationships {
|
|
||||||
width: 21px;
|
|
||||||
padding-inline-end: 16px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.icon {
|
|
||||||
&.active {
|
|
||||||
color: $highlight-text-color;
|
|
||||||
}
|
|
||||||
|
|
||||||
&.passive {
|
|
||||||
color: $passive-text-color;
|
|
||||||
}
|
|
||||||
|
|
||||||
&.active.passive {
|
|
||||||
color: $active-passive-text-color;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
@media screen and (max-width: $no-gap-breakpoint) {
|
|
||||||
tbody td.optional {
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@@ -1,7 +0,0 @@
|
|||||||
@use 'mastodon/css_variables';
|
|
||||||
@use 'mastodon/variables';
|
|
||||||
@use 'common';
|
|
||||||
|
|
||||||
html {
|
|
||||||
color-scheme: dark;
|
|
||||||
}
|
|
||||||
@@ -1,8 +0,0 @@
|
|||||||
@use 'mastodon/css_variables';
|
|
||||||
@use 'mastodon/variables';
|
|
||||||
@use 'common';
|
|
||||||
@use 'contrast/diff';
|
|
||||||
|
|
||||||
html {
|
|
||||||
color-scheme: dark;
|
|
||||||
}
|
|
||||||
@@ -1,54 +0,0 @@
|
|||||||
:root {
|
|
||||||
/* TEXT TOKENS */
|
|
||||||
|
|
||||||
--color-text-primary: var(--color-grey-50);
|
|
||||||
--color-text-secondary: var(--color-grey-300);
|
|
||||||
--color-text-tertiary: var(--color-grey-400);
|
|
||||||
--color-text-brand: var(--color-indigo-300);
|
|
||||||
--color-text-status-links: var(--color-text-brand);
|
|
||||||
|
|
||||||
/* BORDER TOKENS */
|
|
||||||
|
|
||||||
--border-strength-primary: 18%;
|
|
||||||
}
|
|
||||||
|
|
||||||
.status__content a,
|
|
||||||
.reply-indicator__content a,
|
|
||||||
.edit-indicator__content a,
|
|
||||||
.link-footer a,
|
|
||||||
.status__content__read-more-button,
|
|
||||||
.status__content__translate-button {
|
|
||||||
text-decoration: underline;
|
|
||||||
|
|
||||||
&:hover,
|
|
||||||
&:focus,
|
|
||||||
&:active {
|
|
||||||
text-decoration: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
&.mention {
|
|
||||||
text-decoration: none;
|
|
||||||
|
|
||||||
span {
|
|
||||||
text-decoration: underline;
|
|
||||||
}
|
|
||||||
|
|
||||||
&:hover,
|
|
||||||
&:focus,
|
|
||||||
&:active {
|
|
||||||
span {
|
|
||||||
text-decoration: none;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.link-button:disabled {
|
|
||||||
cursor: not-allowed;
|
|
||||||
|
|
||||||
&:hover,
|
|
||||||
&:focus,
|
|
||||||
&:active {
|
|
||||||
text-decoration: none !important;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@@ -1,9 +0,0 @@
|
|||||||
@use 'mastodon-light/css_variables';
|
|
||||||
@use 'mastodon/variables' with (
|
|
||||||
$emojis-requiring-inversion: 'chains'
|
|
||||||
);
|
|
||||||
@use 'common';
|
|
||||||
|
|
||||||
html {
|
|
||||||
color-scheme: light;
|
|
||||||
}
|
|
||||||
@@ -1,214 +0,0 @@
|
|||||||
@use '../mastodon/theme_utils' as utils;
|
|
||||||
|
|
||||||
:root {
|
|
||||||
--color-black: #000;
|
|
||||||
--color-grey-950: #181821;
|
|
||||||
--color-grey-800: #292938;
|
|
||||||
--color-grey-700: #444664;
|
|
||||||
--color-grey-600: #545778;
|
|
||||||
--color-grey-500: #696d91;
|
|
||||||
--color-grey-400: #8b8dac;
|
|
||||||
--color-grey-300: #b4b6cb;
|
|
||||||
--color-grey-200: #d8d9e3;
|
|
||||||
--color-grey-100: #f0f0f5;
|
|
||||||
--color-grey-50: #f0f1ff;
|
|
||||||
--color-white: #fff;
|
|
||||||
--color-indigo-600: #6147e6;
|
|
||||||
--color-indigo-400: #8886ff;
|
|
||||||
--color-indigo-300: #a5abfd;
|
|
||||||
--color-indigo-200: #c8cdfe;
|
|
||||||
--color-indigo-100: #e0e3ff;
|
|
||||||
--color-indigo-50: #f0f1ff;
|
|
||||||
--color-red-500: #ff637e;
|
|
||||||
--color-red-600: #ec003f;
|
|
||||||
--color-yellow-400: #ffb900;
|
|
||||||
--color-yellow-600: #e17100;
|
|
||||||
--color-green-400: #05df72;
|
|
||||||
--color-green-600: #00a63e;
|
|
||||||
|
|
||||||
/* TEXT TOKENS */
|
|
||||||
|
|
||||||
--color-text-primary: var(--color-grey-950);
|
|
||||||
--color-text-secondary: var(--color-grey-600);
|
|
||||||
--color-text-tertiary: var(--color-grey-500);
|
|
||||||
--color-text-on-inverted: var(--color-white);
|
|
||||||
--color-text-brand: var(--color-indigo-600);
|
|
||||||
--color-text-brand-soft: color-mix(
|
|
||||||
in oklab,
|
|
||||||
var(--color-text-primary),
|
|
||||||
var(--color-text-brand)
|
|
||||||
);
|
|
||||||
--color-text-on-brand-base: var(--color-white);
|
|
||||||
--color-text-error: var(--color-red-600);
|
|
||||||
--color-text-on-error-base: var(--color-white);
|
|
||||||
--color-text-warning: var(--color-yellow-600);
|
|
||||||
--color-text-on-warning-base: var(--color-white);
|
|
||||||
--color-text-success: var(--color-green-600);
|
|
||||||
--color-text-on-success-base: var(--color-white);
|
|
||||||
--color-text-disabled: var(--color-grey-300);
|
|
||||||
--color-text-on-disabled: var(--color-grey-200);
|
|
||||||
--color-text-bookmark-highlight: var(--color-text-error);
|
|
||||||
--color-text-favourite-highlight: var(--color-text-warning);
|
|
||||||
--color-text-on-media: var(--color-white);
|
|
||||||
--color-text-status-links: var(--color-text-brand);
|
|
||||||
|
|
||||||
/* BACKGROUND TOKENS */
|
|
||||||
|
|
||||||
// Neutrals
|
|
||||||
--color-bg-primary: var(--color-white);
|
|
||||||
--overlay-strength-secondary: 5%;
|
|
||||||
--color-bg-secondary-base: var(--color-grey-600);
|
|
||||||
--color-bg-secondary: #{color-mix(
|
|
||||||
in oklab,
|
|
||||||
var(--color-bg-primary),
|
|
||||||
var(--color-bg-secondary-base) var(--overlay-strength-secondary)
|
|
||||||
)};
|
|
||||||
--color-bg-secondary-solid: #{color-mix(
|
|
||||||
in srgb,
|
|
||||||
var(--color-bg-primary),
|
|
||||||
var(--color-bg-secondary-base) var(--overlay-strength-secondary)
|
|
||||||
)};
|
|
||||||
--color-bg-tertiary: #{color-mix(
|
|
||||||
in oklab,
|
|
||||||
var(--color-bg-primary),
|
|
||||||
var(--color-bg-secondary-base) calc(2 * var(--overlay-strength-secondary))
|
|
||||||
)};
|
|
||||||
|
|
||||||
// Utility
|
|
||||||
--color-bg-ambient: var(--color-bg-primary);
|
|
||||||
--color-bg-elevated: var(--color-bg-primary);
|
|
||||||
--color-bg-inverted: var(--color-grey-950);
|
|
||||||
--color-bg-media-base: var(--color-black);
|
|
||||||
--color-bg-media-strength: 65%;
|
|
||||||
--color-bg-media: #{utils.css-alpha(
|
|
||||||
var(--color-bg-media-base),
|
|
||||||
var(--color-bg-media-strength)
|
|
||||||
)};
|
|
||||||
--color-bg-overlay: var(--color-bg-primary);
|
|
||||||
--color-bg-disabled: var(--color-grey-400);
|
|
||||||
|
|
||||||
// Brand
|
|
||||||
--overlay-strength-brand: 8%;
|
|
||||||
--color-bg-brand-base: var(--color-indigo-600);
|
|
||||||
--color-bg-brand-base-hover: color-mix(
|
|
||||||
in oklab,
|
|
||||||
var(--color-bg-brand-base),
|
|
||||||
black var(--overlay-strength-brand)
|
|
||||||
);
|
|
||||||
--color-bg-brand-soft: #{utils.css-alpha(
|
|
||||||
var(--color-bg-brand-base),
|
|
||||||
calc(var(--overlay-strength-brand) * 1.5)
|
|
||||||
)};
|
|
||||||
--color-bg-brand-softer: #{utils.css-alpha(
|
|
||||||
var(--color-bg-brand-base),
|
|
||||||
var(--overlay-strength-brand)
|
|
||||||
)};
|
|
||||||
|
|
||||||
// Error
|
|
||||||
--overlay-strength-error: 12%;
|
|
||||||
--color-bg-error-base: var(--color-red-600);
|
|
||||||
--color-bg-error-base-hover: color-mix(
|
|
||||||
in oklab,
|
|
||||||
var(--color-bg-error-base),
|
|
||||||
black var(--overlay-strength-error)
|
|
||||||
);
|
|
||||||
--color-bg-error-soft: #{utils.css-alpha(
|
|
||||||
var(--color-bg-error-base),
|
|
||||||
calc(var(--overlay-strength-error) * 1.5)
|
|
||||||
)};
|
|
||||||
--color-bg-error-softer: #{utils.css-alpha(
|
|
||||||
var(--color-bg-error-base),
|
|
||||||
var(--overlay-strength-error)
|
|
||||||
)};
|
|
||||||
|
|
||||||
// Warning
|
|
||||||
--overlay-strength-warning: 10%;
|
|
||||||
--color-bg-warning-base: var(--color-yellow-600);
|
|
||||||
--color-bg-warning-base-hover: color-mix(
|
|
||||||
in oklab,
|
|
||||||
var(--color-bg-warning-base),
|
|
||||||
black var(--overlay-strength-warning)
|
|
||||||
);
|
|
||||||
--color-bg-warning-soft: #{utils.css-alpha(
|
|
||||||
var(--color-bg-warning-base),
|
|
||||||
calc(var(--overlay-strength-warning) * 1.5)
|
|
||||||
)};
|
|
||||||
--color-bg-warning-softer: #{utils.css-alpha(
|
|
||||||
var(--color-bg-warning-base),
|
|
||||||
var(--overlay-strength-warning)
|
|
||||||
)};
|
|
||||||
|
|
||||||
// Success
|
|
||||||
--overlay-strength-success: 15%;
|
|
||||||
--color-bg-success-base: var(--color-green-600);
|
|
||||||
--color-bg-success-base-hover: color-mix(
|
|
||||||
in oklab,
|
|
||||||
var(--color-bg-success-base),
|
|
||||||
black var(--overlay-strength-success)
|
|
||||||
);
|
|
||||||
--color-bg-success-soft: #{utils.css-alpha(
|
|
||||||
var(--color-bg-success-base),
|
|
||||||
calc(var(--overlay-strength-success) * 1.5)
|
|
||||||
)};
|
|
||||||
--color-bg-success-softer: #{utils.css-alpha(
|
|
||||||
var(--color-bg-success-base),
|
|
||||||
var(--overlay-strength-success)
|
|
||||||
)};
|
|
||||||
|
|
||||||
/* BORDER TOKENS */
|
|
||||||
|
|
||||||
--border-strength-primary: 15%;
|
|
||||||
--color-border-primary: color-mix(
|
|
||||||
in oklab,
|
|
||||||
var(--color-bg-primary),
|
|
||||||
var(--color-grey-950) var(--border-strength-primary)
|
|
||||||
);
|
|
||||||
--color-border-media: rgb(252 248 255 / 15%);
|
|
||||||
--color-border-on-bg-secondary: var(--color-grey-200);
|
|
||||||
--color-border-on-bg-brand-softer: var(--color-indigo-200);
|
|
||||||
--color-border-on-bg-error-softer: #{utils.css-alpha(
|
|
||||||
var(--color-text-error),
|
|
||||||
50%
|
|
||||||
)};
|
|
||||||
--color-border-on-bg-warning-softer: #{utils.css-alpha(
|
|
||||||
var(--color-text-warning),
|
|
||||||
50%
|
|
||||||
)};
|
|
||||||
--color-border-on-bg-success-softer: #{utils.css-alpha(
|
|
||||||
var(--color-text-success),
|
|
||||||
50%
|
|
||||||
)};
|
|
||||||
--color-border-on-bg-inverted: var(--color-border-primary);
|
|
||||||
|
|
||||||
/* SHADOW TOKENS */
|
|
||||||
|
|
||||||
--shadow-strength-primary: 30%;
|
|
||||||
--color-shadow-primary: #{utils.css-alpha(
|
|
||||||
var(--color-black),
|
|
||||||
var(--shadow-strength-primary)
|
|
||||||
)};
|
|
||||||
--dropdown-shadow:
|
|
||||||
0 20px 25px -5px var(--color-shadow-primary),
|
|
||||||
0 8px 10px -6px var(--color-shadow-primary);
|
|
||||||
--overlay-icon-shadow: drop-shadow(0 0 8px var(--color-shadow-primary));
|
|
||||||
|
|
||||||
/* GRAPHS/CHARTS TOKENS */
|
|
||||||
|
|
||||||
--color-graph-primary-stroke: var(--color-text-brand);
|
|
||||||
--color-graph-primary-fill: var(--color-bg-brand-softer);
|
|
||||||
--color-graph-warning-stroke: var(--color-text-warning);
|
|
||||||
--color-graph-warning-fill: var(--color-bg-warning-softer);
|
|
||||||
--color-graph-disabled-stroke: var(--color-text-disabled);
|
|
||||||
--color-graph-disabled-fill: var(--color-bg-disabled);
|
|
||||||
|
|
||||||
/* LEGACY TOKENS */
|
|
||||||
|
|
||||||
--rich-text-container-color: rgb(255 216 231 / 100%);
|
|
||||||
--rich-text-text-color: rgb(114 47 83 / 100%);
|
|
||||||
--rich-text-decorations-color: rgb(255 175 212 / 100%);
|
|
||||||
|
|
||||||
/* MISCELLANEOUS */
|
|
||||||
|
|
||||||
--outline-focus-default: 2px solid var(--color-text-brand);
|
|
||||||
--avatar-border-radius: 8px;
|
|
||||||
}
|
|
||||||
@@ -1,19 +0,0 @@
|
|||||||
.no-list {
|
|
||||||
list-style: none;
|
|
||||||
|
|
||||||
li {
|
|
||||||
display: inline-block;
|
|
||||||
margin: 0 5px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.recovery-codes {
|
|
||||||
list-style: none;
|
|
||||||
margin: 0 auto;
|
|
||||||
|
|
||||||
li {
|
|
||||||
font-size: 125%;
|
|
||||||
line-height: 1.5;
|
|
||||||
letter-spacing: 1px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@@ -1,58 +0,0 @@
|
|||||||
/* http://meyerweb.com/eric/tools/css/reset/
|
|
||||||
v2.0 | 20110126
|
|
||||||
License: none (public domain)
|
|
||||||
*/
|
|
||||||
|
|
||||||
html, body, div, span, applet, object, iframe,
|
|
||||||
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
|
|
||||||
a, abbr, acronym, address, big, cite, code,
|
|
||||||
del, dfn, em, img, ins, kbd, q, s, samp,
|
|
||||||
small, strike, strong, sub, sup, tt, var,
|
|
||||||
b, u, i, center,
|
|
||||||
dl, dt, dd, ol, ul, li,
|
|
||||||
fieldset, form, label, legend,
|
|
||||||
table, caption, tbody, tfoot, thead, tr, th, td,
|
|
||||||
article, aside, canvas, details, embed,
|
|
||||||
figure, figcaption, footer, header, hgroup,
|
|
||||||
menu, nav, output, ruby, section, summary,
|
|
||||||
time, mark, audio, video {
|
|
||||||
margin: 0;
|
|
||||||
padding: 0;
|
|
||||||
border: 0;
|
|
||||||
font-size: 100%;
|
|
||||||
font: inherit;
|
|
||||||
vertical-align: baseline;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* HTML5 display-role reset for older browsers */
|
|
||||||
article, aside, details, figcaption, figure,
|
|
||||||
footer, header, hgroup, menu, nav, section {
|
|
||||||
display: block;
|
|
||||||
}
|
|
||||||
|
|
||||||
body {
|
|
||||||
line-height: 1;
|
|
||||||
}
|
|
||||||
|
|
||||||
ol, ul {
|
|
||||||
list-style: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
blockquote, q {
|
|
||||||
quotes: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
blockquote:before, blockquote:after,
|
|
||||||
q:before, q:after {
|
|
||||||
content: '';
|
|
||||||
content: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
table {
|
|
||||||
border-collapse: collapse;
|
|
||||||
border-spacing: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
html:has(body.custom-scrollbars) {
|
|
||||||
scrollbar-color: var(--color-text-secondary) var(--color-bg-secondary);
|
|
||||||
}
|
|
||||||
@@ -1,151 +0,0 @@
|
|||||||
.status__content__text,
|
|
||||||
.e-content,
|
|
||||||
.edit-indicator__content,
|
|
||||||
.reply-indicator__content {
|
|
||||||
code {
|
|
||||||
background: var(--rich-text-container-color);
|
|
||||||
padding: 4px;
|
|
||||||
border-radius: 4px;
|
|
||||||
color: var(--rich-text-text-color);
|
|
||||||
font-size: 0.85em;
|
|
||||||
}
|
|
||||||
|
|
||||||
pre {
|
|
||||||
background: var(--rich-text-container-color);
|
|
||||||
padding: 8px;
|
|
||||||
border-radius: 4px;
|
|
||||||
color: var(--rich-text-text-color);
|
|
||||||
|
|
||||||
code {
|
|
||||||
padding: 0;
|
|
||||||
background: transparent;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
pre,
|
|
||||||
blockquote {
|
|
||||||
margin-bottom: 22px;
|
|
||||||
white-space: pre-wrap;
|
|
||||||
unicode-bidi: plaintext;
|
|
||||||
|
|
||||||
&:last-child {
|
|
||||||
margin-bottom: 0;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
blockquote {
|
|
||||||
padding-inline-start: 32px;
|
|
||||||
color: var(--rich-text-text-color);
|
|
||||||
white-space: normal;
|
|
||||||
position: relative;
|
|
||||||
|
|
||||||
&::before {
|
|
||||||
display: block;
|
|
||||||
content: '';
|
|
||||||
width: 24px;
|
|
||||||
height: 20px;
|
|
||||||
mask-image: url('@/images/quote.svg');
|
|
||||||
background-color: var(--rich-text-decorations-color);
|
|
||||||
position: absolute;
|
|
||||||
inset-inline-start: 0;
|
|
||||||
top: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
blockquote {
|
|
||||||
margin-top: 4px;
|
|
||||||
border-inline-start: 3px solid var(--rich-text-decorations-color);
|
|
||||||
padding-inline-start: 16px;
|
|
||||||
|
|
||||||
&::before {
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
p:last-of-type {
|
|
||||||
margin-bottom: 0;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
& > ul,
|
|
||||||
& > ol {
|
|
||||||
margin-bottom: 22px;
|
|
||||||
|
|
||||||
&:last-child {
|
|
||||||
margin-bottom: 0;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
h1,
|
|
||||||
h2,
|
|
||||||
h3,
|
|
||||||
h4,
|
|
||||||
h5 {
|
|
||||||
margin-top: 20px;
|
|
||||||
margin-bottom: 20px;
|
|
||||||
}
|
|
||||||
|
|
||||||
h1,
|
|
||||||
h2 {
|
|
||||||
font-weight: 700;
|
|
||||||
font-size: 1.2em;
|
|
||||||
}
|
|
||||||
|
|
||||||
h2 {
|
|
||||||
font-size: 1.1em;
|
|
||||||
}
|
|
||||||
|
|
||||||
h3,
|
|
||||||
h4,
|
|
||||||
h5 {
|
|
||||||
font-weight: 500;
|
|
||||||
}
|
|
||||||
|
|
||||||
b,
|
|
||||||
strong {
|
|
||||||
font-weight: 700;
|
|
||||||
}
|
|
||||||
|
|
||||||
em,
|
|
||||||
i {
|
|
||||||
font-style: italic;
|
|
||||||
}
|
|
||||||
|
|
||||||
sub {
|
|
||||||
font-size: smaller;
|
|
||||||
vertical-align: sub;
|
|
||||||
}
|
|
||||||
|
|
||||||
sup {
|
|
||||||
font-size: smaller;
|
|
||||||
vertical-align: super;
|
|
||||||
}
|
|
||||||
|
|
||||||
ul,
|
|
||||||
ol {
|
|
||||||
padding-inline-start: 24px;
|
|
||||||
|
|
||||||
li {
|
|
||||||
padding-inline-start: 8px;
|
|
||||||
|
|
||||||
&::marker {
|
|
||||||
text-align: end;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
p {
|
|
||||||
margin: 0;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
ul {
|
|
||||||
list-style-type: '•';
|
|
||||||
|
|
||||||
li::marker {
|
|
||||||
text-align: start;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
ol {
|
|
||||||
list-style-type: decimal;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@@ -1 +0,0 @@
|
|||||||
@use '@/flavours/glitch/styles_new/contrast';
|
|
||||||
@@ -1,4 +0,0 @@
|
|||||||
en:
|
|
||||||
skins:
|
|
||||||
glitch:
|
|
||||||
contrast_new: Experimental High contrast
|
|
||||||
@@ -1 +0,0 @@
|
|||||||
@use '@/flavours/glitch/styles_new/application';
|
|
||||||
@@ -1,4 +0,0 @@
|
|||||||
en:
|
|
||||||
skins:
|
|
||||||
glitch:
|
|
||||||
default_new: Experimental Mastodon (default)
|
|
||||||
@@ -1 +0,0 @@
|
|||||||
@use '@/flavours/glitch/styles_new/mastodon-light';
|
|
||||||
@@ -1,4 +0,0 @@
|
|||||||
en:
|
|
||||||
skins:
|
|
||||||
glitch:
|
|
||||||
mastodon-light_new: Experimental Mastodon (light)
|
|
||||||
Reference in New Issue
Block a user