Dome/Masto
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

[chore] update scss files for Dart Sass 2.0.0

Browse Source 
https://sass-lang.com/documentation/breaking-changes/import/
https://sass-lang.com/documentation/breaking-changes/color-functions/

# Conflicts:
#	app/javascript/flavours/glitch/styles/basics.scss
This commit is contained in:
Zoë Bijl
2025-10-11 01:23:54 +02:00
parent da628d9417
commit db7fd70ae2
9 changed files with 146 additions and 121 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/javascript/flavours/glitch/styles/about.scss
+3 -1
View File
@@ -1,3 +1,5 @@
@use 'sass:color';
$maximum-width: 1235px;
$fluid-breakpoint: $maximum-width + 20px;
@@ -26,7 +28,7 @@ $fluid-breakpoint: $maximum-width + 20px;
li {
position: relative;
border-bottom: 1px solid lighten($ui-base-color, 8%);
border-bottom: 1px solid color.adjust($ui-base-color, $lightness: 8%);
padding: 1em 1.75em;
padding-inline-start: 3em;
font-weight: 500;
app/javascript/flavours/glitch/styles/accounts.scss
+23 -21
View File
@@ -1,3 +1,5 @@
@use 'sass:color';
.card {
& > a {
display: block;
@@ -10,7 +12,7 @@
&:active,
&:focus {
.card__bar {
background: lighten($ui-base-color, 8%);
background: color.adjust($ui-base-color, $lightness: 8%);
}
}
}
@@ -18,7 +20,7 @@
&__img {
height: 130px;
position: relative;
background: darken($ui-base-color, 12%);
background: color.adjust($ui-base-color, $lightness: -12%);
img {
display: block;
@@ -39,7 +41,7 @@
display: flex;
justify-content: flex-start;
align-items: center;
background: lighten($ui-base-color, 4%);
background: color.adjust($ui-base-color, $lightness: 4%);
.avatar {
flex: 0 0 auto;
@@ -57,7 +59,7 @@
border-radius: 4px;
@include avatar-radius;
background: darken($ui-base-color, 8%);
background: color.adjust($ui-base-color, $lightness: -8%);
object-fit: cover;
}
}
@@ -149,7 +151,7 @@
.disabled {
cursor: default;
color: lighten($inverted-text-color, 10%);
color: color.adjust($inverted-text-color, $lightness: 10%);
}
@media screen and (width <= 700px) {
@@ -215,22 +217,22 @@
}
&.admin {
color: lighten($error-red, 12%);
background-color: rgba(lighten($error-red, 12%), 0.1);
border-color: rgba(lighten($error-red, 12%), 0.5);
color: color.adjust($error-red, $lightness: 12%);
background-color: rgba(color.adjust($error-red, $lightness: 12%), 0.1);
border-color: rgba(color.adjust($error-red, $lightness: 12%), 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);
color: color.adjust($error-red, $lightness: 12%);
background-color: rgba(color.adjust($error-red, $lightness: 12%), 0.1);
border-color: rgba(color.adjust($error-red, $lightness: 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);
color: color.adjust($warning-red, $lightness: 12%);
background-color: rgba(color.adjust($warning-red, $lightness: 12%), 0.1);
border-color: rgba(color.adjust($warning-red, $lightness: 12%), 0.5);
}
.account__header__fields {
@@ -238,14 +240,14 @@
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%);
border-top: 1px solid color.adjust($ui-base-color, $lightness: 12%);
border-bottom: 1px solid color.adjust($ui-base-color, $lightness: 12%);
font-size: 14px;
line-height: 20px;
dl {
display: flex;
border-bottom: 1px solid lighten($ui-base-color, 12%);
border-bottom: 1px solid color.adjust($ui-base-color, $lightness: 12%);
}
dt,
@@ -264,7 +266,7 @@
width: 120px;
flex: 0 0 auto;
color: $secondary-text-color;
background: rgba(darken($ui-base-color, 8%), 0.5);
background: rgba(color.adjust($ui-base-color, $lightness: -8%), 0.5);
}
dd {
@@ -333,7 +335,7 @@
}
.batch-table__row--muted {
color: lighten($ui-base-color, 26%);
color: color.adjust($ui-base-color, $lightness: 26%);
}
.batch-table__row--muted .pending-account__header,
@@ -342,7 +344,7 @@
&,
a,
strong {
color: lighten($ui-base-color, 26%);
color: color.adjust($ui-base-color, $lightness: 26%);
}
}
@@ -354,7 +356,7 @@
tbody td.accounts-table__extra,
&__count,
&__count small {
color: lighten($ui-base-color, 26%);
color: color.adjust($ui-base-color, $lightness: 26%);
}
}
app/javascript/flavours/glitch/styles/admin.scss
+42 -41
View File
@@ -1,3 +1,4 @@
@use "sass:color";
@use "sass:math";
$no-columns-breakpoint: 600px;
@@ -31,8 +32,8 @@ $content-width: 840px;
&__toggle {
display: none;
background: darken($ui-base-color, 4%);
border-bottom: 1px solid lighten($ui-base-color, 4%);
background: color.adjust($ui-base-color, $lightness: -4%);
border-bottom: 1px solid color.adjust($ui-base-color, $lightness: 4%);
align-items: center;
&__logo {
@@ -122,7 +123,7 @@ $content-width: 840px;
&:hover {
color: $primary-text-color;
background-color: darken($ui-base-color, 5%);
background-color: color.adjust($ui-base-color, $lightness: -5%);
transition: all 100ms linear;
transition-property: color, background-color;
}
@@ -133,7 +134,7 @@ $content-width: 840px;
}
ul {
background: darken($ui-base-color, 4%);
background: color.adjust($ui-base-color, $lightness: -4%);
border-radius: 0 0 0 4px;
margin: 0;
@@ -239,7 +240,7 @@ $content-width: 840px;
&:hover,
&:focus,
&:active {
background: lighten($ui-base-color, 4%);
background: color.adjust($ui-base-color, $lightness: 4%);
}
&.selected {
@@ -292,7 +293,7 @@ $content-width: 840px;
color: $darker-text-color;
padding-bottom: 8px;
margin-bottom: 8px;
border-bottom: 1px solid lighten($ui-base-color, 8%);
border-bottom: 1px solid color.adjust($ui-base-color, $lightness: 8%);
}
h6 {
@@ -393,7 +394,7 @@ $content-width: 840px;
ul a,
ul ul a {
border-radius: 0;
border-bottom: 1px solid lighten($ui-base-color, 4%);
border-bottom: 1px solid color.adjust($ui-base-color, $lightness: 4%);
transition: none;
&:hover {
@@ -521,7 +522,7 @@ body,
&:hover {
color: $primary-text-color;
border-bottom: 2px solid lighten($ui-base-color, 5%);
border-bottom: 2px solid color.adjust($ui-base-color, $lightness: 5%);
}
&.selected {
@@ -692,7 +693,7 @@ body,
padding: 15px;
padding-inline-start: 15px * 2 + 40px;
background: $ui-base-color;
border-bottom: 1px solid darken($ui-base-color, 8%);
border-bottom: 1px solid color.adjust($ui-base-color, $lightness: -8%);
position: relative;
text-decoration: none;
color: $darker-text-color;
@@ -712,7 +713,7 @@ body,
&:hover,
&:focus,
&:active {
background: lighten($ui-base-color, 4%);
background: color.adjust($ui-base-color, $lightness: 4%);
}
&__avatar {
@@ -766,7 +767,7 @@ a.inline-name-tag,
&.suspended {
.username {
text-decoration: line-through;
color: lighten($error-red, 12%);
color: color.adjust($error-red, $lightness: 12%);
}
.avatar {
@@ -806,7 +807,7 @@ a.name-tag,
}
&.negative {
border-left-color: lighten($error-red, 12%);
border-left-color: color.adjust($error-red, $lightness: 12%);
}
&.warning {
@@ -871,7 +872,7 @@ a.name-tag,
&:focus,
&:hover,
&:active {
color: lighten($darker-text-color, 8%);
color: color.adjust($darker-text-color, $lightness: 8%);
}
}
@@ -885,10 +886,10 @@ a.name-tag,
&__item {
display: flex;
justify-content: flex-start;
border-top: 1px solid darken($ui-base-color, 4%);
border-top: 1px solid color.adjust($ui-base-color, $lightness: -4%);
&:hover {
background: lighten($ui-base-color, 2%);
background: color.adjust($ui-base-color, $lightness: 2%);
}
&__reported-by,
@@ -960,7 +961,7 @@ a.name-tag,
.account__header__fields,
.account__header__content {
background: lighten($ui-base-color, 8%);
background: color.adjust($ui-base-color, $lightness: 8%);
border-radius: 4px;
height: 100%;
}
@@ -997,7 +998,7 @@ a.name-tag,
.filters-list__item {
padding: 15px 0;
background: $ui-base-color;
border: 1px solid lighten($ui-base-color, 4%);
border: 1px solid color.adjust($ui-base-color, $lightness: 4%);
border-radius: 4px;
margin-top: 15px;
}
@@ -1008,13 +1009,13 @@ a.name-tag,
.announcements-list,
.filters-list {
border: 1px solid lighten($ui-base-color, 4%);
border: 1px solid color.adjust($ui-base-color, $lightness: 4%);
border-radius: 4px;
&__item {
padding: 15px 0;
background: $ui-base-color;
border-bottom: 1px solid lighten($ui-base-color, 4%);
border-bottom: 1px solid color.adjust($ui-base-color, $lightness: 4%);
&__title {
padding: 0 15px;
@@ -1089,7 +1090,7 @@ a.name-tag,
&.expired {
.expiration {
color: lighten($error-red, 12%);
color: color.adjust($error-red, $lightness: 12%);
}
.permissions-list__item__icon {
@@ -1165,7 +1166,7 @@ a.name-tag,
.sparkline {
display: block;
text-decoration: none;
background: lighten($ui-base-color, 4%);
background: color.adjust($ui-base-color, $lightness: 4%);
border-radius: 4px;
padding: 0;
position: relative;
@@ -1228,7 +1229,7 @@ a.name-tag,
}
path:last-child {
stroke: lighten($highlight-text-color, 6%) !important;
stroke: color.adjust($highlight-text-color, $lightness: 6%) !important;
fill: none !important;
}
}
@@ -1238,17 +1239,17 @@ a.sparkline {
&:hover,
&:focus,
&:active {
background: lighten($ui-base-color, 6%);
background: color.adjust($ui-base-color, $lightness: 6%);
}
}
.skeleton {
background-color: lighten($ui-base-color, 8%);
background-color: color.adjust($ui-base-color, $lightness: 8%);
background-image: linear-gradient(
90deg,
lighten($ui-base-color, 8%),
lighten($ui-base-color, 12%),
lighten($ui-base-color, 8%)
color.adjust($ui-base-color, $lightness: 8%),
color.adjust($ui-base-color, $lightness: 12%),
color.adjust($ui-base-color, $lightness: 8%)
);
background-size: 200px 100%;
background-repeat: no-repeat;
@@ -1275,7 +1276,7 @@ a.sparkline {
}
&__item {
border-bottom: 1px solid lighten($ui-base-color, 4%);
border-bottom: 1px solid color.adjust($ui-base-color, $lightness: 4%);
&__key {
font-weight: 500;
@@ -1328,7 +1329,7 @@ a.sparkline {
&__category {
cursor: pointer;
border-bottom: 1px solid darken($ui-base-color, 8%);
border-bottom: 1px solid color.adjust($ui-base-color, $lightness: -8%);
&:last-child {
border-bottom: 0;
@@ -1356,7 +1357,7 @@ a.sparkline {
&__details {
&__item {
border-bottom: 1px solid lighten($ui-base-color, 8%);
border-bottom: 1px solid color.adjust($ui-base-color, $lightness: 8%);
padding: 15px 0;
&:last-child {
@@ -1405,7 +1406,7 @@ a.sparkline {
width: 100%;
height: 100%;
object-fit: cover;
background: darken($ui-base-color, 8%);
background: color.adjust($ui-base-color, $lightness: -8%);
}
}
@@ -1423,7 +1424,7 @@ a.sparkline {
margin: 0;
width: 56px;
height: 56px;
background-color: darken($ui-base-color, 8%);
background-color: color.adjust($ui-base-color, $lightness: -8%);
border-radius: 8px;
border: 1px solid $ui-base-color;
}
@@ -1542,7 +1543,7 @@ a.sparkline {
position: relative;
padding: 15px;
padding-inline-start: 15px * 2 + 40px;
border-bottom: 1px solid darken($ui-base-color, 8%);
border-bottom: 1px solid color.adjust($ui-base-color, $lightness: -8%);
&:first-child {
border-top-left-radius: 4px;
@@ -1556,7 +1557,7 @@ a.sparkline {
}
&:hover {
background-color: lighten($ui-base-color, 4%);
background-color: color.adjust($ui-base-color, $lightness: 4%);
}
&__avatar {
@@ -1634,13 +1635,13 @@ a.sparkline {
}
.report-actions {
border: 1px solid darken($ui-base-color, 8%);
border: 1px solid color.adjust($ui-base-color, $lightness: -8%);
&__item {
display: flex;
align-items: center;
line-height: 18px;
border-bottom: 1px solid darken($ui-base-color, 8%);
border-bottom: 1px solid color.adjust($ui-base-color, $lightness: -8%);
&:last-child {
border-bottom: 0;
@@ -1752,15 +1753,15 @@ a.sparkline {
&__statuses-list {
border-radius: 4px;
border: 1px solid darken($ui-base-color, 8%);
border: 1px solid color.adjust($ui-base-color, $lightness: -8%);
font-size: 13px;
line-height: 18px;
overflow: hidden;
&__item {
padding: 16px;
background: lighten($ui-base-color, 2%);
border-bottom: 1px solid darken($ui-base-color, 8%);
background: color.adjust($ui-base-color, $lightness: 2%);
border-bottom: 1px solid color.adjust($ui-base-color, $lightness: -8%);
&:last-child {
border-bottom: 0;
@@ -1804,7 +1805,7 @@ a.sparkline {
flex: 0 0 auto;
width: 4px;
height: 21px;
background: lighten($ui-base-color, 8%);
background: color.adjust($ui-base-color, $lightness: 8%);
margin: 0 2px;
border-radius: 2px;
@@ -1876,7 +1877,7 @@ a.sparkline {
}
.status {
border: 1px solid lighten($ui-base-color, 4%);
border: 1px solid color.adjust($ui-base-color, $lightness: 4%);
background: $ui-base-color;
border-radius: 4px;
}
app/javascript/flavours/glitch/styles/basics.scss
+7 -3
View File
@@ -1,3 +1,7 @@
@use "sass:meta";
@use "sass:string";
@use 'sass:color';
@function hex-color($color) {
@if type-of($color) == "color" {
$color: str-slice(ie-hex-str($color), 4);
@@ -109,7 +113,7 @@ body {
}
&.embed {
background: lighten($ui-base-color, 4%);
background: color.scale($ui-base-color, $lightness: 4%);
margin: 0;
padding-bottom: 0;
@@ -122,7 +126,7 @@ body {
}
&.admin {
background: darken($ui-base-color, 4%);
background: color.adjust($ui-base-color, $lightness: -4%);
padding: 0;
}
@@ -206,7 +210,7 @@ button {
font-size: 16px;
font-weight: 400;
line-height: 1.7;
color: lighten($error-red, 4%);
color: color.adjust($error-red, $lightness: 4%);
text-align: center;
& > div {
app/javascript/flavours/glitch/styles/dashboard.scss
+6 -4
View File
@@ -1,3 +1,5 @@
@use 'sass:color';
.dashboard__counters {
display: flex;
flex-wrap: wrap;
@@ -13,7 +15,7 @@
& > div,
& > a {
padding: 20px;
background: lighten($ui-base-color, 4%);
background: color.adjust($ui-base-color, $lightness: 4%);
border-radius: 4px;
box-sizing: border-box;
height: 100%;
@@ -27,7 +29,7 @@
&:hover,
&:focus,
&:active {
background: lighten($ui-base-color, 8%);
background: color.adjust($ui-base-color, $lightness: 8%);
}
}
}
@@ -99,12 +101,12 @@
}
&.positive {
background: lighten($ui-base-color, 4%);
background: color.adjust($ui-base-color, $lightness: 4%);
color: $valid-value-color;
}
&.negative {
background: lighten($ui-base-color, 4%);
background: color.adjust($ui-base-color, $lightness: 4%);
color: $error-value-color;
}
app/javascript/flavours/glitch/styles/forms.scss
+24 -23
View File
@@ -1,3 +1,4 @@
@use "sass:color";
$no-columns-breakpoint: 600px;
code {
@@ -164,7 +165,7 @@ code {
code {
border-radius: 3px;
padding: 0.2em 0.4em;
background: darken($ui-base-color, 12%);
background: color.adjust($ui-base-color, $lightness: -12%);
}
li {
@@ -292,7 +293,7 @@ code {
.required abbr {
text-decoration: none;
color: lighten($error-value-color, 12%);
color: color.adjust($error-value-color, $lightness: 12%);
}
.fields-group {
@@ -435,13 +436,13 @@ code {
outline: 0;
font-family: inherit;
resize: vertical;
background: darken($ui-base-color, 10%);
border: 1px solid darken($ui-base-color, 14%);
background: color.adjust($ui-base-color, $lightness: -10%);
border: 1px solid color.adjust($ui-base-color, $lightness: -14%);
border-radius: 4px;
padding: 10px;
&::placeholder {
color: lighten($darker-text-color, 4%);
color: color.adjust($darker-text-color, $lightness: 4%);
}
&:invalid {
@@ -453,13 +454,13 @@ code {
}
&:hover {
border-color: darken($ui-base-color, 20%);
border-color: color.adjust($ui-base-color, $lightness: -20%);
}
&:active,
&:focus {
border-color: $highlight-text-color;
background: darken($ui-base-color, 8%);
background: color.adjust($ui-base-color, $lightness: -8%);
}
}
@@ -470,13 +471,13 @@ code {
input[type="datetime-local"] {
&:focus:invalid:not(:placeholder-shown),
&:required:invalid:not(:placeholder-shown) {
border-color: lighten($error-red, 12%);
border-color: color.adjust($error-red, $lightness: 12%);
}
}
.input.field_with_errors {
label {
color: lighten($error-red, 12%);
color: color.adjust($error-red, $lightness: 12%);
}
input[type="text"],
@@ -486,13 +487,13 @@ code {
input[type="datetime-local"],
textarea,
select {
border-color: lighten($error-red, 12%);
border-color: color.adjust($error-red, $lightness: 12%);
}
.error {
display: block;
font-weight: 500;
color: lighten($error-red, 12%);
color: color.adjust($error-red, $lightness: 12%);
margin-top: 4px;
}
}
@@ -584,10 +585,10 @@ code {
outline: 0;
font-family: inherit;
resize: vertical;
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>")
background: color.adjust($ui-base-color, $lightness: -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(color.adjust($ui-base-color, $lightness: 12%))}'/></svg>")
no-repeat right 8px center / auto 16px;
border: 1px solid darken($ui-base-color, 14%);
border: 1px solid color.adjust($ui-base-color, $lightness: -14%);
border-radius: 4px;
padding-inline-start: 10px;
padding-inline-end: 30px;
@@ -628,8 +629,8 @@ code {
width: 5px;
background-image: linear-gradient(
to right,
rgba(darken($ui-base-color, 10%), 0),
darken($ui-base-color, 10%)
rgba(color.adjust($ui-base-color, $lightness: -10%), 0),
color.adjust($ui-base-color, $lightness: -10%)
);
}
}
@@ -644,7 +645,7 @@ code {
}
.flash-message {
background: lighten($ui-base-color, 8%);
background: color.adjust($ui-base-color, $lightness: 8%);
color: $darker-text-color;
border-radius: 4px;
padding: 15px 10px;
@@ -725,7 +726,7 @@ code {
}
&:focus {
background: lighten($ui-base-color, 4%);
background: color.adjust($ui-base-color, $lightness: 4%);
}
}
@@ -809,7 +810,7 @@ code {
&:hover,
&:focus,
&:active {
color: lighten($highlight-text-color, 8%);
color: color.adjust($highlight-text-color, $lightness: 8%);
}
}
}
@@ -855,7 +856,7 @@ code {
.permissions-list {
border: 1px solid $ui-base-color;
border-radius: 4px;
background: darken($ui-base-color, 4%);
background: color.adjust($ui-base-color, $lightness: -4%);
margin-bottom: 30px;
}
@@ -1005,8 +1006,8 @@ code {
}
.input-copy {
background: darken($ui-base-color, 10%);
border: 1px solid darken($ui-base-color, 14%);
background: color.adjust($ui-base-color, $lightness: -10%);
border: 1px solid color.adjust($ui-base-color, $lightness: -14%);
border-radius: 4px;
display: flex;
align-items: center;
@@ -1067,7 +1068,7 @@ code {
&__item {
padding: 15px;
color: $ui-secondary-color;
border-bottom: 1px solid lighten($ui-base-color, 4%);
border-bottom: 1px solid color.adjust($ui-base-color, $lightness: 4%);
display: flex;
align-items: center;
app/javascript/flavours/glitch/styles/tables.scss
+21 -17
View File
@@ -1,3 +1,5 @@
@use 'sass:color';
.table {
width: 100%;
max-width: 100%;
@@ -11,7 +13,7 @@
vertical-align: top;
border-top: 1px solid $ui-base-color;
text-align: start;
background: darken($ui-base-color, 4%);
background: color.adjust($ui-base-color, $lightness: -4%);
&.critical {
font-weight: 700;
@@ -78,7 +80,7 @@
& > tbody > tr > td {
padding: 11px 10px;
background: transparent;
border: 1px solid lighten($ui-base-color, 8%);
border: 1px solid color.adjust($ui-base-color, $lightness: 8%);
color: $secondary-text-color;
}
@@ -91,17 +93,19 @@
&.batch-table {
& > thead > tr > th {
background: $ui-base-color;
border-top: 1px solid darken($ui-base-color, 8%);
border-bottom: 1px solid darken($ui-base-color, 8%);
border-top: 1px solid color.adjust($ui-base-color, $lightness: -8%);
border-bottom: 1px solid color.adjust($ui-base-color, $lightness: -8%);
&:first-child {
border-radius: 4px 0 0;
border-inline-start: 1px solid darken($ui-base-color, 8%);
border-inline-start: 1px solid
color.adjust($ui-base-color, $lightness: -8%);
}
&:last-child {
border-radius: 0 4px 0 0;
border-inline-end: 1px solid darken($ui-base-color, 8%);
border-inline-end: 1px solid
color.adjust($ui-base-color, $lightness: -8%);
}
}
}
@@ -186,7 +190,7 @@ a.table-action-link {
position: sticky;
top: 0;
z-index: 1;
border: 1px solid darken($ui-base-color, 8%);
border: 1px solid color.adjust($ui-base-color, $lightness: -8%);
background: $ui-base-color;
border-radius: 4px 0 0;
height: 47px;
@@ -203,7 +207,7 @@ a.table-action-link {
height: 47px;
align-items: center;
justify-content: center;
border: 1px solid darken($ui-base-color, 8%);
border: 1px solid color.adjust($ui-base-color, $lightness: -8%);
border-top: 0;
color: $secondary-text-color;
display: none;
@@ -242,14 +246,14 @@ a.table-action-link {
&:hover,
&:focus,
&:active {
background: lighten($ui-base-color, 8%);
background: color.adjust($ui-base-color, $lightness: 8%);
}
}
}
&__form {
padding: 16px;
border: 1px solid darken($ui-base-color, 8%);
border: 1px solid color.adjust($ui-base-color, $lightness: -8%);
border-top: 0;
background: $ui-base-color;
@@ -260,25 +264,25 @@ a.table-action-link {
}
&__row {
border: 1px solid darken($ui-base-color, 8%);
border: 1px solid color.adjust($ui-base-color, $lightness: -8%);
border-top: 0;
background: darken($ui-base-color, 4%);
background: color.adjust($ui-base-color, $lightness: -4%);
@media screen and (max-width: $no-gap-breakpoint) {
.optional &:first-child {
border-top: 1px solid darken($ui-base-color, 8%);
border-top: 1px solid color.adjust($ui-base-color, $lightness: -8%);
}
}
&:hover {
background: darken($ui-base-color, 2%);
background: color.adjust($ui-base-color, $lightness: -2%);
}
&:nth-child(even) {
background: $ui-base-color;
&:hover {
background: lighten($ui-base-color, 2%);
background: color.adjust($ui-base-color, $lightness: 2%);
}
}
@@ -353,12 +357,12 @@ a.table-action-link {
}
.nothing-here {
border: 1px solid darken($ui-base-color, 8%);
border: 1px solid color.adjust($ui-base-color, $lightness: -8%);
border-top: 0;
box-shadow: none;
@media screen and (max-width: $no-gap-breakpoint) {
border-top: 1px solid darken($ui-base-color, 8%);
border-top: 1px solid color.adjust($ui-base-color, $lightness: -8%);
}
}
app/javascript/flavours/glitch/styles/variables.scss
+16 -8
View File
@@ -1,3 +1,5 @@
@use 'sass:color';
// Commonly used web colors
$black: #000000; // Black
$white: #ffffff; // White
@@ -32,9 +34,9 @@ $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-lighter-color: color.scale(
$ui-base-color,
26%
$lightness: 26%
) !default; // Lighter darkest
$ui-primary-color: $classic-primary-color !default; // Lighter
$ui-secondary-color: $classic-secondary-color !default; // Lightest
@@ -61,9 +63,15 @@ $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;
$highlight-text-color: color.scale(
$ui-highlight-color,
$lightness: 8%
) !default;
$action-button-color: $ui-base-lighter-color !default;
$action-button-focus-color: lighten($ui-base-lighter-color, 4%) !default;
$action-button-focus-color: color.scale(
$ui-base-lighter-color,
$lightness: 4%
) !default;
$passive-text-color: $gold-star !default;
$active-passive-text-color: $success-green !default;
@@ -94,11 +102,11 @@ $ui-avatar-border-size: 8%;
$dismiss-overlay-width: 4rem;
:root {
--dropdown-border-color: #{lighten($ui-base-color, 12%)};
--dropdown-background-color: #{lighten($ui-base-color, 4%)};
--dropdown-border-color: #{color.scale($ui-base-color, $lightness: 12%)};
--dropdown-background-color: #{color.scale($ui-base-color, $lightness: 4%)};
--dropdown-shadow:
0 20px 25px -5px #{rgba($base-shadow-color, 0.25)},
0 8px 10px -6px #{rgba($base-shadow-color, 0.25)};
--modal-background-color: #{darken($ui-base-color, 4%)};
--modal-border-color: #{lighten($ui-base-color, 4%)};
--modal-background-color: #{color.scale($ui-base-color, $lightness: -4%)};
--modal-border-color: #{color.scale($ui-base-color, $lightness: 4%)};
}
app/javascript/flavours/glitch/styles/widgets.scss
+4 -3
View File
@@ -1,3 +1,4 @@
@use "sass:color";
@use "sass:math";
.hero-widget {
@@ -54,7 +55,7 @@
font-family: inherit;
font-size: inherit;
line-height: inherit;
color: lighten($darker-text-color, 10%);
color: color.adjust($darker-text-color, $lightness: 10%);
}
a {
@@ -223,7 +224,7 @@
&:hover,
&:active,
&:focus {
background: lighten($ui-base-color, 8%);
background: color.adjust($ui-base-color, $lightness: 8%);
}
}
@@ -305,7 +306,7 @@
tbody td {
padding: 15px 0;
vertical-align: middle;
border-bottom: 1px solid lighten($ui-base-color, 8%);
border-bottom: 1px solid color.adjust($ui-base-color, $lightness: 8%);
}
tbody tr:last-child td {