From dc35e2d7569a293bbda92ee3ecba8d2d4e6a7b64 Mon Sep 17 00:00:00 2001 From: Cytrogen Date: Thu, 26 Mar 2026 19:01:21 -0400 Subject: [PATCH] =?UTF-8?q?Rename=20.scss=20=E2=86=92=20.css=20and=20remov?= =?UTF-8?q?e=20sass=20dependency=20(Phase=209-10)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Rename all 93 .scss files to .css, inline remaining Sass-only syntax (// comments → /* */, arithmetic → pre-calculated values, local $vars → hardcoded), update JS entry point imports, remove sass-loader from webpack, remove sass/sass-loader/stylelint-config- standard-scss packages, and clean up extraction scripts. --- app/javascript/core/mailer.js | 2 +- .../flavours/glitch/packs/common.js | 2 +- app/javascript/flavours/glitch/packs/login.js | 2 +- .../glitch/styles/{about.scss => about.css} | 0 .../{accessibility.scss => accessibility.css} | 2 +- .../styles/{accounts.scss => accounts.css} | 2 +- .../glitch/styles/{admin.scss => admin.css} | 0 .../glitch/styles/{basics.scss => basics.css} | 32 +- .../styles/{branding.scss => branding.css} | 0 .../components/{about.scss => about.css} | 0 .../{accounts.scss => accounts.css} | 0 .../{announcements.scss => announcements.css} | 0 ...mark_folders.scss => bookmark_folders.css} | 0 .../components/{boost.scss => boost.css} | 0 .../components/{columns.scss => columns.css} | 0 .../{compose_form.scss => compose_form.css} | 2 +- .../{directory.scss => directory.css} | 0 .../components/{domains.scss => domains.css} | 0 .../components/{doodle.scss => doodle.css} | 2 +- .../components/{drawer.scss => drawer.css} | 0 .../components/{emoji.scss => emoji.css} | 0 .../{emoji_picker.scss => emoji_picker.css} | 2 +- .../components/{explore.scss => explore.css} | 0 .../components/{index.scss => index.css} | 0 .../components/{lists.scss => lists.css} | 0 ...local_settings.scss => local_settings.css} | 0 .../components/{media.scss => media.css} | 0 .../styles/components/{misc.scss => misc.css} | 4 +- .../components/{modal.scss => modal.css} | 0 ...privacy_policy.scss => privacy_policy.css} | 0 ...icator.scss => regeneration_indicator.css} | 0 .../{scrollbars.scss => scrollbars.css} | 0 .../components/{search.scss => search.css} | 0 .../{sensitive.scss => sensitive.css} | 0 .../{signed_out.scss => signed_out.css} | 0 .../{single_column.scss => single_column.css} | 0 .../components/{status.scss => status.css} | 0 .../{containers.scss => containers.css} | 0 .../styles/{contrast.scss => contrast.css} | 0 .../styles/contrast/{diff.scss => diff.css} | 0 .../{variables.scss => variables.css} | 2 +- .../styles/{dashboard.scss => dashboard.css} | 0 .../glitch/styles/{forms.scss => forms.css} | 4 +- .../glitch/styles/{index.scss => index.css} | 0 .../glitch/styles/{lists.scss => lists.css} | 0 .../glitch/styles/{login.scss => login.css} | 0 ...mastodon-light.scss => mastodon-light.css} | 0 .../mastodon-light/{diff.scss => diff.css} | 26 +- .../{variables.scss => variables.css} | 2 +- .../glitch/styles/{modal.scss => modal.css} | 0 .../glitch/styles/{polls.scss => polls.css} | 4 +- .../glitch/styles/{reset.scss => reset.css} | 0 .../styles/{rich_text.scss => rich_text.css} | 0 .../glitch/styles/{rtl.scss => rtl.css} | 2 +- .../styles/{statuses.scss => statuses.css} | 8 +- .../glitch/styles/{tables.scss => tables.css} | 2 +- .../styles/{variables.scss => variables.css} | 2 +- .../styles/{widgets.scss => widgets.css} | 0 app/javascript/packs/common.js | 2 +- .../contrast/{common.scss => common.css} | 0 .../{common.scss => common.css} | 0 .../contrast/{common.scss => common.css} | 0 .../{common.scss => common.css} | 0 .../vanilla/win95/{common.scss => common.css} | 0 .../{application.scss => application.css} | 0 .../styles/{contrast.scss => contrast.css} | 0 .../styles/contrast/{diff.scss => diff.css} | 0 .../{variables.scss => variables.css} | 2 +- .../{roboto-mono.scss => roboto-mono.css} | 0 .../styles/fonts/{roboto.scss => roboto.css} | 0 .../styles/{mailer.scss => mailer.css} | 0 ...mastodon-light.scss => mastodon-light.css} | 0 .../mastodon-light/{diff.scss => diff.css} | 24 +- .../{variables.scss => variables.css} | 2 +- .../styles/mastodon/{about.scss => about.css} | 0 .../{accessibility.scss => accessibility.css} | 0 .../mastodon/{accounts.scss => accounts.css} | 2 +- .../styles/mastodon/{admin.scss => admin.css} | 38 +- .../mastodon/{basics.scss => basics.css} | 32 +- .../styles/mastodon/{boost.scss => boost.css} | 0 .../mastodon/{branding.scss => branding.css} | 0 .../{components.scss => components.css} | 109 +-- .../{containers.scss => containers.css} | 0 .../{dashboard.scss => dashboard.css} | 0 .../{emoji_picker.scss => emoji_picker.css} | 2 +- .../styles/mastodon/{forms.scss => forms.css} | 8 +- .../styles/mastodon/{lists.scss => lists.css} | 0 .../styles/mastodon/{modal.scss => modal.css} | 0 .../styles/mastodon/{polls.scss => polls.css} | 4 +- .../styles/mastodon/{reset.scss => reset.css} | 0 .../{rich_text.scss => rich_text.css} | 0 .../styles/mastodon/{rtl.scss => rtl.css} | 2 +- .../mastodon/{statuses.scss => statuses.css} | 6 +- .../mastodon/{tables.scss => tables.css} | 2 +- .../{variables.scss => variables.css} | 2 +- .../mastodon/{widgets.scss => widgets.css} | 0 .../styles/{win95.scss => win95.css} | 835 +++++++++++------- config/webpack/rules/css.js | 57 +- config/webpacker.yml | 4 - package.json | 14 +- scripts/extract-colors-mastodon.js | 330 ------- scripts/extract-colors.js | 334 ------- stylelint.config.js | 13 +- yarn.lock | 321 +------ 104 files changed, 720 insertions(+), 1529 deletions(-) rename app/javascript/flavours/glitch/styles/{about.scss => about.css} (100%) rename app/javascript/flavours/glitch/styles/{accessibility.scss => accessibility.css} (94%) rename app/javascript/flavours/glitch/styles/{accounts.scss => accounts.css} (99%) rename app/javascript/flavours/glitch/styles/{admin.scss => admin.css} (100%) rename app/javascript/flavours/glitch/styles/{basics.scss => basics.css} (81%) rename app/javascript/flavours/glitch/styles/{branding.scss => branding.css} (100%) rename app/javascript/flavours/glitch/styles/components/{about.scss => about.css} (100%) rename app/javascript/flavours/glitch/styles/components/{accounts.scss => accounts.css} (100%) rename app/javascript/flavours/glitch/styles/components/{announcements.scss => announcements.css} (100%) rename app/javascript/flavours/glitch/styles/components/{bookmark_folders.scss => bookmark_folders.css} (100%) rename app/javascript/flavours/glitch/styles/components/{boost.scss => boost.css} (100%) rename app/javascript/flavours/glitch/styles/components/{columns.scss => columns.css} (100%) rename app/javascript/flavours/glitch/styles/components/{compose_form.scss => compose_form.css} (99%) rename app/javascript/flavours/glitch/styles/components/{directory.scss => directory.css} (100%) rename app/javascript/flavours/glitch/styles/components/{domains.scss => domains.css} (100%) rename app/javascript/flavours/glitch/styles/components/{doodle.scss => doodle.css} (96%) rename app/javascript/flavours/glitch/styles/components/{drawer.scss => drawer.css} (100%) rename app/javascript/flavours/glitch/styles/components/{emoji.scss => emoji.css} (100%) rename app/javascript/flavours/glitch/styles/components/{emoji_picker.scss => emoji_picker.css} (99%) rename app/javascript/flavours/glitch/styles/components/{explore.scss => explore.css} (100%) rename app/javascript/flavours/glitch/styles/components/{index.scss => index.css} (100%) rename app/javascript/flavours/glitch/styles/components/{lists.scss => lists.css} (100%) rename app/javascript/flavours/glitch/styles/components/{local_settings.scss => local_settings.css} (100%) rename app/javascript/flavours/glitch/styles/components/{media.scss => media.css} (100%) rename app/javascript/flavours/glitch/styles/components/{misc.scss => misc.css} (99%) rename app/javascript/flavours/glitch/styles/components/{modal.scss => modal.css} (100%) rename app/javascript/flavours/glitch/styles/components/{privacy_policy.scss => privacy_policy.css} (100%) rename app/javascript/flavours/glitch/styles/components/{regeneration_indicator.scss => regeneration_indicator.css} (100%) rename app/javascript/flavours/glitch/styles/components/{scrollbars.scss => scrollbars.css} (100%) rename app/javascript/flavours/glitch/styles/components/{search.scss => search.css} (100%) rename app/javascript/flavours/glitch/styles/components/{sensitive.scss => sensitive.css} (100%) rename app/javascript/flavours/glitch/styles/components/{signed_out.scss => signed_out.css} (100%) rename app/javascript/flavours/glitch/styles/components/{single_column.scss => single_column.css} (100%) rename app/javascript/flavours/glitch/styles/components/{status.scss => status.css} (100%) rename app/javascript/flavours/glitch/styles/{containers.scss => containers.css} (100%) rename app/javascript/flavours/glitch/styles/{contrast.scss => contrast.css} (100%) rename app/javascript/flavours/glitch/styles/contrast/{diff.scss => diff.css} (100%) rename app/javascript/flavours/glitch/styles/contrast/{variables.scss => variables.css} (98%) rename app/javascript/flavours/glitch/styles/{dashboard.scss => dashboard.css} (100%) rename app/javascript/flavours/glitch/styles/{forms.scss => forms.css} (99%) rename app/javascript/flavours/glitch/styles/{index.scss => index.css} (100%) rename app/javascript/flavours/glitch/styles/{lists.scss => lists.css} (100%) rename app/javascript/flavours/glitch/styles/{login.scss => login.css} (100%) rename app/javascript/flavours/glitch/styles/{mastodon-light.scss => mastodon-light.css} (100%) rename app/javascript/flavours/glitch/styles/mastodon-light/{diff.scss => diff.css} (95%) rename app/javascript/flavours/glitch/styles/mastodon-light/{variables.scss => variables.css} (98%) rename app/javascript/flavours/glitch/styles/{modal.scss => modal.css} (100%) rename app/javascript/flavours/glitch/styles/{polls.scss => polls.css} (98%) rename app/javascript/flavours/glitch/styles/{reset.scss => reset.css} (100%) rename app/javascript/flavours/glitch/styles/{rich_text.scss => rich_text.css} (100%) rename app/javascript/flavours/glitch/styles/{rtl.scss => rtl.css} (98%) rename app/javascript/flavours/glitch/styles/{statuses.scss => statuses.css} (95%) rename app/javascript/flavours/glitch/styles/{tables.scss => tables.css} (99%) rename app/javascript/flavours/glitch/styles/{variables.scss => variables.css} (98%) rename app/javascript/flavours/glitch/styles/{widgets.scss => widgets.css} (100%) rename app/javascript/skins/glitch/contrast/{common.scss => common.css} (100%) rename app/javascript/skins/glitch/mastodon-light/{common.scss => common.css} (100%) rename app/javascript/skins/vanilla/contrast/{common.scss => common.css} (100%) rename app/javascript/skins/vanilla/mastodon-light/{common.scss => common.css} (100%) rename app/javascript/skins/vanilla/win95/{common.scss => common.css} (100%) rename app/javascript/styles/{application.scss => application.css} (100%) rename app/javascript/styles/{contrast.scss => contrast.css} (100%) rename app/javascript/styles/contrast/{diff.scss => diff.css} (100%) rename app/javascript/styles/contrast/{variables.scss => variables.css} (98%) rename app/javascript/styles/fonts/{roboto-mono.scss => roboto-mono.css} (100%) rename app/javascript/styles/fonts/{roboto.scss => roboto.css} (100%) rename app/javascript/styles/{mailer.scss => mailer.css} (100%) rename app/javascript/styles/{mastodon-light.scss => mastodon-light.css} (100%) rename app/javascript/styles/mastodon-light/{diff.scss => diff.css} (95%) rename app/javascript/styles/mastodon-light/{variables.scss => variables.css} (99%) rename app/javascript/styles/mastodon/{about.scss => about.css} (100%) rename app/javascript/styles/mastodon/{accessibility.scss => accessibility.css} (100%) rename app/javascript/styles/mastodon/{accounts.scss => accounts.css} (99%) rename app/javascript/styles/mastodon/{admin.scss => admin.css} (97%) rename app/javascript/styles/mastodon/{basics.scss => basics.css} (82%) rename app/javascript/styles/mastodon/{boost.scss => boost.css} (100%) rename app/javascript/styles/mastodon/{branding.scss => branding.css} (100%) rename app/javascript/styles/mastodon/{components.scss => components.css} (98%) rename app/javascript/styles/mastodon/{containers.scss => containers.css} (100%) rename app/javascript/styles/mastodon/{dashboard.scss => dashboard.css} (100%) rename app/javascript/styles/mastodon/{emoji_picker.scss => emoji_picker.css} (99%) rename app/javascript/styles/mastodon/{forms.scss => forms.css} (99%) rename app/javascript/styles/mastodon/{lists.scss => lists.css} (100%) rename app/javascript/styles/mastodon/{modal.scss => modal.css} (100%) rename app/javascript/styles/mastodon/{polls.scss => polls.css} (98%) rename app/javascript/styles/mastodon/{reset.scss => reset.css} (100%) rename app/javascript/styles/mastodon/{rich_text.scss => rich_text.css} (100%) rename app/javascript/styles/mastodon/{rtl.scss => rtl.css} (97%) rename app/javascript/styles/mastodon/{statuses.scss => statuses.css} (95%) rename app/javascript/styles/mastodon/{tables.scss => tables.css} (99%) rename app/javascript/styles/mastodon/{variables.scss => variables.css} (98%) rename app/javascript/styles/mastodon/{widgets.scss => widgets.css} (100%) rename app/javascript/styles/{win95.scss => win95.css} (73%) delete mode 100644 scripts/extract-colors-mastodon.js delete mode 100644 scripts/extract-colors.js diff --git a/app/javascript/core/mailer.js b/app/javascript/core/mailer.js index 016bbb8d829f0adebabcb867a5f19f796830e52d..ea1f3ee19c3cd97c82d8e806f3a3ae486e199a3a 100644 --- a/app/javascript/core/mailer.js +++ b/app/javascript/core/mailer.js @@ -1,3 +1,3 @@ -import "../styles/mailer.scss"; +import "../styles/mailer.css"; require.context("../icons"); diff --git a/app/javascript/flavours/glitch/packs/common.js b/app/javascript/flavours/glitch/packs/common.js index 4c0f0ec4e00f07389afaa260519b7666619a1b9a..313e7e1d6be5dd9bfaff7210eb4a704cd0a7031d 100644 --- a/app/javascript/flavours/glitch/packs/common.js +++ b/app/javascript/flavours/glitch/packs/common.js @@ -1,6 +1,6 @@ import "packs/public-path"; import Rails from "@rails/ujs"; -import "flavours/glitch/styles/index.scss"; +import "flavours/glitch/styles/index.css"; Rails.start(); diff --git a/app/javascript/flavours/glitch/packs/login.js b/app/javascript/flavours/glitch/packs/login.js index d578a99a5f1ee3f246c244810a7d500bf9964c6c..5d83d405dd50bdf917ded82e752973b738921224 100644 --- a/app/javascript/flavours/glitch/packs/login.js +++ b/app/javascript/flavours/glitch/packs/login.js @@ -1,6 +1,6 @@ import "packs/public-path"; import Rails from "@rails/ujs"; -import "flavours/glitch/styles/login.scss"; +import "flavours/glitch/styles/login.css"; Rails.start(); diff --git a/app/javascript/flavours/glitch/styles/about.scss b/app/javascript/flavours/glitch/styles/about.css similarity index 100% rename from app/javascript/flavours/glitch/styles/about.scss rename to app/javascript/flavours/glitch/styles/about.css diff --git a/app/javascript/flavours/glitch/styles/accessibility.scss b/app/javascript/flavours/glitch/styles/accessibility.css similarity index 94% rename from app/javascript/flavours/glitch/styles/accessibility.scss rename to app/javascript/flavours/glitch/styles/accessibility.css index 268eb214160ec56f7d2a57ac2b6f62a21dba574f..e5a2e0986329689d8d9337b15a33523be724b1ad 100644 --- a/app/javascript/flavours/glitch/styles/accessibility.scss +++ b/app/javascript/flavours/glitch/styles/accessibility.css @@ -22,7 +22,7 @@ } } -// Display a checkmark on active UI elements otherwise differing only by color +/* Display a checkmark on active UI elements otherwise differing only by color */ .status__action-bar-button, .detailed-status__button .icon-button { position: relative; diff --git a/app/javascript/flavours/glitch/styles/accounts.scss b/app/javascript/flavours/glitch/styles/accounts.css similarity index 99% rename from app/javascript/flavours/glitch/styles/accounts.scss rename to app/javascript/flavours/glitch/styles/accounts.css index dd1dc5273660fa4e67ab3dbdfeb0bbf9283c098a..ff84ad1c48c1a7be73bafe16cb156ad316386855 100644 --- a/app/javascript/flavours/glitch/styles/accounts.scss +++ b/app/javascript/flavours/glitch/styles/accounts.css @@ -238,7 +238,7 @@ .account__header__fields { max-width: 100vw; padding: 0; - margin: 15px -15px -15px; + margin: -15px; border: 0 none; border-top: 1px solid var(--ui-base-color-lighten-12); border-bottom: 1px solid var(--ui-base-color-lighten-12); diff --git a/app/javascript/flavours/glitch/styles/admin.scss b/app/javascript/flavours/glitch/styles/admin.css similarity index 100% rename from app/javascript/flavours/glitch/styles/admin.scss rename to app/javascript/flavours/glitch/styles/admin.css diff --git a/app/javascript/flavours/glitch/styles/basics.scss b/app/javascript/flavours/glitch/styles/basics.css similarity index 81% rename from app/javascript/flavours/glitch/styles/basics.scss rename to app/javascript/flavours/glitch/styles/basics.css index 0b6166ce6bf225916d66c54da60f6a3c1647365a..6646387a1e2ebc9998461f369869e4c566bf7752 100644 --- a/app/javascript/flavours/glitch/styles/basics.scss +++ b/app/javascript/flavours/glitch/styles/basics.css @@ -12,17 +12,17 @@ body { -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 - // var(--font-sans-serif) => web-font (Roboto) fallback and newer Androids (>=4.0) + /* 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 */ + /* var(--font-sans-serif) => web-font (Roboto) fallback and newer Androids (>=4.0) */ font-family: system-ui, -apple-system, @@ -260,7 +260,7 @@ button { } .logo-resources { - // Not using display: none because of https://bugs.chromium.org/p/chromium/issues/detail?id=258029 + /* Not using display: none because of https://bugs.chromium.org/p/chromium/issues/detail?id=258029 */ visibility: hidden; user-select: none; pointer-events: none; @@ -273,10 +273,10 @@ button { 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. +/* 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 { diff --git a/app/javascript/flavours/glitch/styles/branding.scss b/app/javascript/flavours/glitch/styles/branding.css similarity index 100% rename from app/javascript/flavours/glitch/styles/branding.scss rename to app/javascript/flavours/glitch/styles/branding.css diff --git a/app/javascript/flavours/glitch/styles/components/about.scss b/app/javascript/flavours/glitch/styles/components/about.css similarity index 100% rename from app/javascript/flavours/glitch/styles/components/about.scss rename to app/javascript/flavours/glitch/styles/components/about.css diff --git a/app/javascript/flavours/glitch/styles/components/accounts.scss b/app/javascript/flavours/glitch/styles/components/accounts.css similarity index 100% rename from app/javascript/flavours/glitch/styles/components/accounts.scss rename to app/javascript/flavours/glitch/styles/components/accounts.css diff --git a/app/javascript/flavours/glitch/styles/components/announcements.scss b/app/javascript/flavours/glitch/styles/components/announcements.css similarity index 100% rename from app/javascript/flavours/glitch/styles/components/announcements.scss rename to app/javascript/flavours/glitch/styles/components/announcements.css diff --git a/app/javascript/flavours/glitch/styles/components/bookmark_folders.scss b/app/javascript/flavours/glitch/styles/components/bookmark_folders.css similarity index 100% rename from app/javascript/flavours/glitch/styles/components/bookmark_folders.scss rename to app/javascript/flavours/glitch/styles/components/bookmark_folders.css diff --git a/app/javascript/flavours/glitch/styles/components/boost.scss b/app/javascript/flavours/glitch/styles/components/boost.css similarity index 100% rename from app/javascript/flavours/glitch/styles/components/boost.scss rename to app/javascript/flavours/glitch/styles/components/boost.css diff --git a/app/javascript/flavours/glitch/styles/components/columns.scss b/app/javascript/flavours/glitch/styles/components/columns.css similarity index 100% rename from app/javascript/flavours/glitch/styles/components/columns.scss rename to app/javascript/flavours/glitch/styles/components/columns.css diff --git a/app/javascript/flavours/glitch/styles/components/compose_form.scss b/app/javascript/flavours/glitch/styles/components/compose_form.css similarity index 99% rename from app/javascript/flavours/glitch/styles/components/compose_form.scss rename to app/javascript/flavours/glitch/styles/components/compose_form.css index b3131af2cf7525d4db76f3e084db6993ba1696c3..ceeccf1da2d5a4a110549a7264cd8a8799696815 100644 --- a/app/javascript/flavours/glitch/styles/components/compose_form.scss +++ b/app/javascript/flavours/glitch/styles/components/compose_form.css @@ -259,7 +259,7 @@ .auto-columns &, .single-column & { @media screen and (max-width: 600px) { - height: 100px !important; // prevent auto-resize textarea + height: 100px !important; /* prevent auto-resize textarea */ resize: vertical; } } diff --git a/app/javascript/flavours/glitch/styles/components/directory.scss b/app/javascript/flavours/glitch/styles/components/directory.css similarity index 100% rename from app/javascript/flavours/glitch/styles/components/directory.scss rename to app/javascript/flavours/glitch/styles/components/directory.css diff --git a/app/javascript/flavours/glitch/styles/components/domains.scss b/app/javascript/flavours/glitch/styles/components/domains.css similarity index 100% rename from app/javascript/flavours/glitch/styles/components/domains.scss rename to app/javascript/flavours/glitch/styles/components/domains.css diff --git a/app/javascript/flavours/glitch/styles/components/doodle.scss b/app/javascript/flavours/glitch/styles/components/doodle.css similarity index 96% rename from app/javascript/flavours/glitch/styles/components/doodle.scss rename to app/javascript/flavours/glitch/styles/components/doodle.css index 09b30547fca09eb70cd36d2cb437324a1df37328..8d9ad6d543bbb69dd05ce91049d2b1d67f0697e3 100644 --- a/app/javascript/flavours/glitch/styles/components/doodle.scss +++ b/app/javascript/flavours/glitch/styles/components/doodle.css @@ -5,7 +5,7 @@ .doodle-modal__container { background: #d9e1e8; text-align: center; - line-height: 0; // remove weird gap under canvas + line-height: 0; /* remove weird gap under canvas */ canvas { border: 5px solid #d9e1e8; } diff --git a/app/javascript/flavours/glitch/styles/components/drawer.scss b/app/javascript/flavours/glitch/styles/components/drawer.css similarity index 100% rename from app/javascript/flavours/glitch/styles/components/drawer.scss rename to app/javascript/flavours/glitch/styles/components/drawer.css diff --git a/app/javascript/flavours/glitch/styles/components/emoji.scss b/app/javascript/flavours/glitch/styles/components/emoji.css similarity index 100% rename from app/javascript/flavours/glitch/styles/components/emoji.scss rename to app/javascript/flavours/glitch/styles/components/emoji.css diff --git a/app/javascript/flavours/glitch/styles/components/emoji_picker.scss b/app/javascript/flavours/glitch/styles/components/emoji_picker.css similarity index 99% rename from app/javascript/flavours/glitch/styles/components/emoji_picker.scss rename to app/javascript/flavours/glitch/styles/components/emoji_picker.css index d377a34490c53c1d25334b41b1c6465c7b7ea668..df880800d3b5d76dc6dfc220e33e2b185bc9ab15 100644 --- a/app/javascript/flavours/glitch/styles/components/emoji_picker.scss +++ b/app/javascript/flavours/glitch/styles/components/emoji_picker.css @@ -142,7 +142,7 @@ .emoji-mart-search-icon { position: absolute; top: 18px; - inset-inline-end: 45px + 5px; + inset-inline-end: 50px; z-index: 2; padding: 2px 5px 1px; border: 0; diff --git a/app/javascript/flavours/glitch/styles/components/explore.scss b/app/javascript/flavours/glitch/styles/components/explore.css similarity index 100% rename from app/javascript/flavours/glitch/styles/components/explore.scss rename to app/javascript/flavours/glitch/styles/components/explore.css diff --git a/app/javascript/flavours/glitch/styles/components/index.scss b/app/javascript/flavours/glitch/styles/components/index.css similarity index 100% rename from app/javascript/flavours/glitch/styles/components/index.scss rename to app/javascript/flavours/glitch/styles/components/index.css diff --git a/app/javascript/flavours/glitch/styles/components/lists.scss b/app/javascript/flavours/glitch/styles/components/lists.css similarity index 100% rename from app/javascript/flavours/glitch/styles/components/lists.scss rename to app/javascript/flavours/glitch/styles/components/lists.css diff --git a/app/javascript/flavours/glitch/styles/components/local_settings.scss b/app/javascript/flavours/glitch/styles/components/local_settings.css similarity index 100% rename from app/javascript/flavours/glitch/styles/components/local_settings.scss rename to app/javascript/flavours/glitch/styles/components/local_settings.css diff --git a/app/javascript/flavours/glitch/styles/components/media.scss b/app/javascript/flavours/glitch/styles/components/media.css similarity index 100% rename from app/javascript/flavours/glitch/styles/components/media.scss rename to app/javascript/flavours/glitch/styles/components/media.css diff --git a/app/javascript/flavours/glitch/styles/components/misc.scss b/app/javascript/flavours/glitch/styles/components/misc.css similarity index 99% rename from app/javascript/flavours/glitch/styles/components/misc.scss rename to app/javascript/flavours/glitch/styles/components/misc.css index ae46c773b7be5ca12cc33c13be62b3e971fdee9d..74e600810873600ce97ee69eb119074974af3ec9 100644 --- a/app/javascript/flavours/glitch/styles/components/misc.scss +++ b/app/javascript/flavours/glitch/styles/components/misc.css @@ -1647,8 +1647,8 @@ button.icon-button.active i.fa-retweet { backdrop-filter: blur(8px); border: 1px solid color-mix(in srgb, var(--ui-base-color-lighten-4) 85%, transparent); border-radius: 8px; - box-shadow: 0 10px 15px -3px var(--base-shadow-color-a25), - 0 4px 6px -4px var(--base-shadow-color-a25); + box-shadow: 0 10px 12px var(--base-shadow-color-a25), + 0 4px 2px var(--base-shadow-color-a25); cursor: default; transition: 0.5s cubic-bezier(0.89, 0.01, 0.5, 1.1); transform: translateZ(0); diff --git a/app/javascript/flavours/glitch/styles/components/modal.scss b/app/javascript/flavours/glitch/styles/components/modal.css similarity index 100% rename from app/javascript/flavours/glitch/styles/components/modal.scss rename to app/javascript/flavours/glitch/styles/components/modal.css diff --git a/app/javascript/flavours/glitch/styles/components/privacy_policy.scss b/app/javascript/flavours/glitch/styles/components/privacy_policy.css similarity index 100% rename from app/javascript/flavours/glitch/styles/components/privacy_policy.scss rename to app/javascript/flavours/glitch/styles/components/privacy_policy.css diff --git a/app/javascript/flavours/glitch/styles/components/regeneration_indicator.scss b/app/javascript/flavours/glitch/styles/components/regeneration_indicator.css similarity index 100% rename from app/javascript/flavours/glitch/styles/components/regeneration_indicator.scss rename to app/javascript/flavours/glitch/styles/components/regeneration_indicator.css diff --git a/app/javascript/flavours/glitch/styles/components/scrollbars.scss b/app/javascript/flavours/glitch/styles/components/scrollbars.css similarity index 100% rename from app/javascript/flavours/glitch/styles/components/scrollbars.scss rename to app/javascript/flavours/glitch/styles/components/scrollbars.css diff --git a/app/javascript/flavours/glitch/styles/components/search.scss b/app/javascript/flavours/glitch/styles/components/search.css similarity index 100% rename from app/javascript/flavours/glitch/styles/components/search.scss rename to app/javascript/flavours/glitch/styles/components/search.css diff --git a/app/javascript/flavours/glitch/styles/components/sensitive.scss b/app/javascript/flavours/glitch/styles/components/sensitive.css similarity index 100% rename from app/javascript/flavours/glitch/styles/components/sensitive.scss rename to app/javascript/flavours/glitch/styles/components/sensitive.css diff --git a/app/javascript/flavours/glitch/styles/components/signed_out.scss b/app/javascript/flavours/glitch/styles/components/signed_out.css similarity index 100% rename from app/javascript/flavours/glitch/styles/components/signed_out.scss rename to app/javascript/flavours/glitch/styles/components/signed_out.css diff --git a/app/javascript/flavours/glitch/styles/components/single_column.scss b/app/javascript/flavours/glitch/styles/components/single_column.css similarity index 100% rename from app/javascript/flavours/glitch/styles/components/single_column.scss rename to app/javascript/flavours/glitch/styles/components/single_column.css diff --git a/app/javascript/flavours/glitch/styles/components/status.scss b/app/javascript/flavours/glitch/styles/components/status.css similarity index 100% rename from app/javascript/flavours/glitch/styles/components/status.scss rename to app/javascript/flavours/glitch/styles/components/status.css diff --git a/app/javascript/flavours/glitch/styles/containers.scss b/app/javascript/flavours/glitch/styles/containers.css similarity index 100% rename from app/javascript/flavours/glitch/styles/containers.scss rename to app/javascript/flavours/glitch/styles/containers.css diff --git a/app/javascript/flavours/glitch/styles/contrast.scss b/app/javascript/flavours/glitch/styles/contrast.css similarity index 100% rename from app/javascript/flavours/glitch/styles/contrast.scss rename to app/javascript/flavours/glitch/styles/contrast.css diff --git a/app/javascript/flavours/glitch/styles/contrast/diff.scss b/app/javascript/flavours/glitch/styles/contrast/diff.css similarity index 100% rename from app/javascript/flavours/glitch/styles/contrast/diff.scss rename to app/javascript/flavours/glitch/styles/contrast/diff.css diff --git a/app/javascript/flavours/glitch/styles/contrast/variables.scss b/app/javascript/flavours/glitch/styles/contrast/variables.css similarity index 98% rename from app/javascript/flavours/glitch/styles/contrast/variables.scss rename to app/javascript/flavours/glitch/styles/contrast/variables.css index 322623a5d897b4f9e044877db6a61cc9fa543e5d..74d86880762d7edc4f03fc1c42d824643f5235cb 100644 --- a/app/javascript/flavours/glitch/styles/contrast/variables.scss +++ b/app/javascript/flavours/glitch/styles/contrast/variables.css @@ -236,7 +236,7 @@ --dismiss-overlay-width: 4rem; --dropdown-border-color: #42485a; --dropdown-background-color: #313543; - --dropdown-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.25), 0 8px 10px -6px rgba(0, 0, 0, 0.25); + --dropdown-shadow: 0 20px 20px rgba(0, 0, 0, 0.25), 0 8px 4px rgba(0, 0, 0, 0.25); --modal-background-color: #1f232b; --modal-border-color: #313543; } diff --git a/app/javascript/flavours/glitch/styles/dashboard.scss b/app/javascript/flavours/glitch/styles/dashboard.css similarity index 100% rename from app/javascript/flavours/glitch/styles/dashboard.scss rename to app/javascript/flavours/glitch/styles/dashboard.css diff --git a/app/javascript/flavours/glitch/styles/forms.scss b/app/javascript/flavours/glitch/styles/forms.css similarity index 99% rename from app/javascript/flavours/glitch/styles/forms.scss rename to app/javascript/flavours/glitch/styles/forms.css index 40d4fc598e096d80c7954238e0bf247c0533e60b..1c5979e5880a05a96774995d8a9695f77a0ad8c2 100644 --- a/app/javascript/flavours/glitch/styles/forms.scss +++ b/app/javascript/flavours/glitch/styles/forms.css @@ -1088,8 +1088,8 @@ code { } } -// Only remove padding when listing applications, to prevent styling issues on -// the Authorization page. +/* Only remove padding when listing applications, to prevent styling issues on */ +/* the Authorization page. */ .applications-list { .permissions-list__item:last-child { padding-bottom: 0; diff --git a/app/javascript/flavours/glitch/styles/index.scss b/app/javascript/flavours/glitch/styles/index.css similarity index 100% rename from app/javascript/flavours/glitch/styles/index.scss rename to app/javascript/flavours/glitch/styles/index.css diff --git a/app/javascript/flavours/glitch/styles/lists.scss b/app/javascript/flavours/glitch/styles/lists.css similarity index 100% rename from app/javascript/flavours/glitch/styles/lists.scss rename to app/javascript/flavours/glitch/styles/lists.css diff --git a/app/javascript/flavours/glitch/styles/login.scss b/app/javascript/flavours/glitch/styles/login.css similarity index 100% rename from app/javascript/flavours/glitch/styles/login.scss rename to app/javascript/flavours/glitch/styles/login.css diff --git a/app/javascript/flavours/glitch/styles/mastodon-light.scss b/app/javascript/flavours/glitch/styles/mastodon-light.css similarity index 100% rename from app/javascript/flavours/glitch/styles/mastodon-light.scss rename to app/javascript/flavours/glitch/styles/mastodon-light.css diff --git a/app/javascript/flavours/glitch/styles/mastodon-light/diff.scss b/app/javascript/flavours/glitch/styles/mastodon-light/diff.css similarity index 95% rename from app/javascript/flavours/glitch/styles/mastodon-light/diff.scss rename to app/javascript/flavours/glitch/styles/mastodon-light/diff.css index 1f20827658dfcc1dedb98d4abe27a3e96c04ffd2..8f6bddf6f76fbc9bd45f11457408500adb17e57d 100644 --- a/app/javascript/flavours/glitch/styles/mastodon-light/diff.scss +++ b/app/javascript/flavours/glitch/styles/mastodon-light/diff.css @@ -1,5 +1,5 @@ -// Notes! -// Sass color functions, "darken" and "lighten" are automatically replaced. +/* Notes! */ +/* Sass color functions, "darken" and "lighten" are automatically replaced. */ html { scrollbar-color: var(--ui-base-color) var(--ui-base-color-a25); @@ -20,7 +20,7 @@ html { } } -// Change default background colors of columns +/* Change default background colors of columns */ .column > .scrollable, .getting-started, .column-inline-form, @@ -202,7 +202,7 @@ html { no-repeat bottom / 100% auto; } -// Change the colors used in compose-form +/* Change the colors used in compose-form */ .compose-form { .compose-form__modifiers { .compose-form__upload__actions .icon-button, @@ -252,7 +252,7 @@ html { background: var(--ui-base-color); } -// Change the background colors of statuses +/* Change the background colors of statuses */ .focusable:focus { background: var(--white-lighten-4); } @@ -262,7 +262,7 @@ html { background: var(--white); } -// Change the background colors of status__content__spoiler-link +/* Change the background colors of status__content__spoiler-link */ .reply-indicator__content .status__content__spoiler-link, .status__content .status__content__spoiler-link { background: var(--ui-base-color); @@ -273,7 +273,7 @@ html { } } -// Change the background colors of media and video spoilers +/* Change the background colors of media and video spoilers */ .media-spoiler, .video-player__spoiler { background: var(--ui-base-color); @@ -287,7 +287,7 @@ html { background-color: var(--ui-base-color); } -// Change the colors used in the dropdown menu +/* Change the colors used in the dropdown menu */ .dropdown-menu { background: var(--white); @@ -304,7 +304,7 @@ html { } } -// Change the text colors on inverted background +/* Change the text colors on inverted background */ .privacy-dropdown__option.active, .privacy-dropdown__option:hover, .privacy-dropdown__option.active .privacy-dropdown__option__content, @@ -352,7 +352,7 @@ html { border-top-color: var(--ui-base-color-lighten-4); } -// Change the background colors of modals +/* Change the background colors of modals */ .actions-modal, .boost-modal, .confirmation-modal, @@ -479,14 +479,14 @@ html { background: var(--ui-highlight-color-lighten-10); } -// Change the default color used for the text in an empty column or on the error column +/* Change the default color used for the text in an empty column or on the error column */ .empty-column-indicator, .error-column { color: var(--primary-text-color); background: var(--white); } -// Change the default colors used on some parts of the profile pages +/* Change the default colors used on some parts of the profile pages */ .activity-stream-tabs { background: var(--white); border-bottom-color: var(--ui-base-color-lighten-8); @@ -659,7 +659,7 @@ html { no-repeat right 8px center / auto 16px; } -// Glitch-soc-specific changes +/* Glitch-soc-specific changes */ .pillbar-button { background: var(--ui-secondary-color); diff --git a/app/javascript/flavours/glitch/styles/mastodon-light/variables.scss b/app/javascript/flavours/glitch/styles/mastodon-light/variables.css similarity index 98% rename from app/javascript/flavours/glitch/styles/mastodon-light/variables.scss rename to app/javascript/flavours/glitch/styles/mastodon-light/variables.css index ee7f18a5be0c818fda98a5e598e5383e60e3a19d..d77fcc391fadd24a287d617057b4f1c81ee1ec18 100644 --- a/app/javascript/flavours/glitch/styles/mastodon-light/variables.scss +++ b/app/javascript/flavours/glitch/styles/mastodon-light/variables.css @@ -236,7 +236,7 @@ --dismiss-overlay-width: 4rem; --dropdown-border-color: #b3c3d1; --dropdown-background-color: #ccd7e0; - --dropdown-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.25), 0 8px 10px -6px rgba(0, 0, 0, 0.25); + --dropdown-shadow: 0 20px 20px rgba(0, 0, 0, 0.25), 0 8px 4px rgba(0, 0, 0, 0.25); --modal-background-color: #e6ebf0; --modal-border-color: #ccd7e0; } diff --git a/app/javascript/flavours/glitch/styles/modal.scss b/app/javascript/flavours/glitch/styles/modal.css similarity index 100% rename from app/javascript/flavours/glitch/styles/modal.scss rename to app/javascript/flavours/glitch/styles/modal.css diff --git a/app/javascript/flavours/glitch/styles/polls.scss b/app/javascript/flavours/glitch/styles/polls.css similarity index 98% rename from app/javascript/flavours/glitch/styles/polls.scss rename to app/javascript/flavours/glitch/styles/polls.css index 3ad25a3922d2111b0ca1b79b29fdcdef87bfe153..b93e110323aef97168b5224423e70553ba4122e3 100644 --- a/app/javascript/flavours/glitch/styles/polls.scss +++ b/app/javascript/flavours/glitch/styles/polls.css @@ -37,8 +37,8 @@ background: transparent; } - // Those rules need to be entirely separate or they won't work, hence the - // duplication + /* Those rules need to be entirely separate or they won't work, hence the */ + /* duplication */ &::-moz-progress-bar { border-radius: 4px; background: var(--ui-primary-color-darken-5); diff --git a/app/javascript/flavours/glitch/styles/reset.scss b/app/javascript/flavours/glitch/styles/reset.css similarity index 100% rename from app/javascript/flavours/glitch/styles/reset.scss rename to app/javascript/flavours/glitch/styles/reset.css diff --git a/app/javascript/flavours/glitch/styles/rich_text.scss b/app/javascript/flavours/glitch/styles/rich_text.css similarity index 100% rename from app/javascript/flavours/glitch/styles/rich_text.scss rename to app/javascript/flavours/glitch/styles/rich_text.css diff --git a/app/javascript/flavours/glitch/styles/rtl.scss b/app/javascript/flavours/glitch/styles/rtl.css similarity index 98% rename from app/javascript/flavours/glitch/styles/rtl.scss rename to app/javascript/flavours/glitch/styles/rtl.css index b488c51496b46d89baf55140e84fbac684f3a74a..f03d626c5cf8519e5b9c73aae590d89c645cb889 100644 --- a/app/javascript/flavours/glitch/styles/rtl.scss +++ b/app/javascript/flavours/glitch/styles/rtl.css @@ -15,7 +15,7 @@ body.rtl { .compose-form .autosuggest-textarea__textarea { padding-right: 10px; - padding-left: 10px + 22px; + padding-left: 32px; } .columns-area { diff --git a/app/javascript/flavours/glitch/styles/statuses.scss b/app/javascript/flavours/glitch/styles/statuses.css similarity index 95% rename from app/javascript/flavours/glitch/styles/statuses.scss rename to app/javascript/flavours/glitch/styles/statuses.css index d56e2ffc962b824f5f7e64dda762a0db495c920c..0f94cd90703ad0a7a390f398ea5d22e72048ab24 100644 --- a/app/javascript/flavours/glitch/styles/statuses.scss +++ b/app/javascript/flavours/glitch/styles/statuses.css @@ -107,8 +107,8 @@ .status { padding: 15px; - padding-inline-start: (48px + 15px * 2); - min-height: 48px + 2px; + padding-inline-start: (78px); + min-height: 50px; &__avatar { inset-inline-start: 15px; @@ -128,7 +128,7 @@ padding: 8px 0; padding-bottom: 2px; margin: initial; - margin-inline-start: 48px + 15px * 2; + margin-inline-start: 78px; padding-top: 15px; } @@ -155,7 +155,7 @@ } } -// Styling from upstream's WebUI, as public pages use the same layout +/* Styling from upstream's WebUI, as public pages use the same layout */ .embed { .status { .status__info { diff --git a/app/javascript/flavours/glitch/styles/tables.scss b/app/javascript/flavours/glitch/styles/tables.css similarity index 99% rename from app/javascript/flavours/glitch/styles/tables.scss rename to app/javascript/flavours/glitch/styles/tables.css index c5143e492ffcec4a53fc81786ef6b0d0856f7c86..054a534b56125b7239744aada396298f53443a12 100644 --- a/app/javascript/flavours/glitch/styles/tables.scss +++ b/app/javascript/flavours/glitch/styles/tables.css @@ -192,7 +192,7 @@ a.table-action-link { &__actions { text-align: end; - padding-inline-end: 16px - 5px; + padding-inline-end: 11px; } } diff --git a/app/javascript/flavours/glitch/styles/variables.scss b/app/javascript/flavours/glitch/styles/variables.css similarity index 98% rename from app/javascript/flavours/glitch/styles/variables.scss rename to app/javascript/flavours/glitch/styles/variables.css index 89b990bc8fcb0d6b6cba04bbd6beeaa55432f9bf..7dc3637f97e96766b1a079b33dfb6d01eb5bc605 100644 --- a/app/javascript/flavours/glitch/styles/variables.scss +++ b/app/javascript/flavours/glitch/styles/variables.css @@ -236,7 +236,7 @@ --dismiss-overlay-width: 4rem; --dropdown-border-color: #42485a; --dropdown-background-color: #313543; - --dropdown-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.25), 0 8px 10px -6px rgba(0, 0, 0, 0.25); + --dropdown-shadow: 0 20px 20px rgba(0, 0, 0, 0.25), 0 8px 4px rgba(0, 0, 0, 0.25); --modal-background-color: #1f232b; --modal-border-color: #313543; } diff --git a/app/javascript/flavours/glitch/styles/widgets.scss b/app/javascript/flavours/glitch/styles/widgets.css similarity index 100% rename from app/javascript/flavours/glitch/styles/widgets.scss rename to app/javascript/flavours/glitch/styles/widgets.css diff --git a/app/javascript/packs/common.js b/app/javascript/packs/common.js index 26ba486d5155684acfccaf4174ada020874b54c2..f9e0e443d6bb3c898665b09177b9491ebb5de5d6 100644 --- a/app/javascript/packs/common.js +++ b/app/javascript/packs/common.js @@ -1,2 +1,2 @@ import "./public-path"; -import "styles/application.scss"; +import "styles/application.css"; diff --git a/app/javascript/skins/glitch/contrast/common.scss b/app/javascript/skins/glitch/contrast/common.css similarity index 100% rename from app/javascript/skins/glitch/contrast/common.scss rename to app/javascript/skins/glitch/contrast/common.css diff --git a/app/javascript/skins/glitch/mastodon-light/common.scss b/app/javascript/skins/glitch/mastodon-light/common.css similarity index 100% rename from app/javascript/skins/glitch/mastodon-light/common.scss rename to app/javascript/skins/glitch/mastodon-light/common.css diff --git a/app/javascript/skins/vanilla/contrast/common.scss b/app/javascript/skins/vanilla/contrast/common.css similarity index 100% rename from app/javascript/skins/vanilla/contrast/common.scss rename to app/javascript/skins/vanilla/contrast/common.css diff --git a/app/javascript/skins/vanilla/mastodon-light/common.scss b/app/javascript/skins/vanilla/mastodon-light/common.css similarity index 100% rename from app/javascript/skins/vanilla/mastodon-light/common.scss rename to app/javascript/skins/vanilla/mastodon-light/common.css diff --git a/app/javascript/skins/vanilla/win95/common.scss b/app/javascript/skins/vanilla/win95/common.css similarity index 100% rename from app/javascript/skins/vanilla/win95/common.scss rename to app/javascript/skins/vanilla/win95/common.css diff --git a/app/javascript/styles/application.scss b/app/javascript/styles/application.css similarity index 100% rename from app/javascript/styles/application.scss rename to app/javascript/styles/application.css diff --git a/app/javascript/styles/contrast.scss b/app/javascript/styles/contrast.css similarity index 100% rename from app/javascript/styles/contrast.scss rename to app/javascript/styles/contrast.css diff --git a/app/javascript/styles/contrast/diff.scss b/app/javascript/styles/contrast/diff.css similarity index 100% rename from app/javascript/styles/contrast/diff.scss rename to app/javascript/styles/contrast/diff.css diff --git a/app/javascript/styles/contrast/variables.scss b/app/javascript/styles/contrast/variables.css similarity index 98% rename from app/javascript/styles/contrast/variables.scss rename to app/javascript/styles/contrast/variables.css index d75c6a5180a78f16e5d80d4f5f4b97206728b142..3d4c8e18fab9defe2968bccc3dae81884513c2ce 100644 --- a/app/javascript/styles/contrast/variables.scss +++ b/app/javascript/styles/contrast/variables.css @@ -242,7 +242,7 @@ --dismiss-overlay-width: 4rem; --dropdown-border-color: #42485a; --dropdown-background-color: #313543; - --dropdown-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.25), 0 8px 10px -6px rgba(0, 0, 0, 0.25); + --dropdown-shadow: 0 20px 20px rgba(0, 0, 0, 0.25), 0 8px 4px rgba(0, 0, 0, 0.25); --modal-background-color: #1f232b; --modal-border-color: #313543; } diff --git a/app/javascript/styles/fonts/roboto-mono.scss b/app/javascript/styles/fonts/roboto-mono.css similarity index 100% rename from app/javascript/styles/fonts/roboto-mono.scss rename to app/javascript/styles/fonts/roboto-mono.css diff --git a/app/javascript/styles/fonts/roboto.scss b/app/javascript/styles/fonts/roboto.css similarity index 100% rename from app/javascript/styles/fonts/roboto.scss rename to app/javascript/styles/fonts/roboto.css diff --git a/app/javascript/styles/mailer.scss b/app/javascript/styles/mailer.css similarity index 100% rename from app/javascript/styles/mailer.scss rename to app/javascript/styles/mailer.css diff --git a/app/javascript/styles/mastodon-light.scss b/app/javascript/styles/mastodon-light.css similarity index 100% rename from app/javascript/styles/mastodon-light.scss rename to app/javascript/styles/mastodon-light.css diff --git a/app/javascript/styles/mastodon-light/diff.scss b/app/javascript/styles/mastodon-light/diff.css similarity index 95% rename from app/javascript/styles/mastodon-light/diff.scss rename to app/javascript/styles/mastodon-light/diff.css index 0060fdce108c04822d869dcf711e3563dda892d9..162ff30c559f7d106fec0866bb870b181d0dc652 100644 --- a/app/javascript/styles/mastodon-light/diff.scss +++ b/app/javascript/styles/mastodon-light/diff.css @@ -1,5 +1,5 @@ -// Notes! -// Sass color functions, "darken" and "lighten" are automatically replaced. +/* Notes! */ +/* Sass color functions, "darken" and "lighten" are automatically replaced. */ html { scrollbar-color: var(--ui-base-color) var(--ui-base-color-a25); @@ -20,7 +20,7 @@ html { } } -// Change default background colors of columns +/* Change default background colors of columns */ .column > .scrollable, .getting-started, .column-inline-form, @@ -206,7 +206,7 @@ html { no-repeat bottom / 100% auto; } -// Change the colors used in compose-form +/* Change the colors used in compose-form */ .compose-form { .compose-form__modifiers { .compose-form__upload__actions .icon-button, @@ -256,7 +256,7 @@ html { background: var(--ui-base-color); } -// Change the background colors of statuses +/* Change the background colors of statuses */ .focusable:focus { background: var(--white-lighten-4); } @@ -266,7 +266,7 @@ html { background: var(--white); } -// Change the background colors of status__content__spoiler-link +/* Change the background colors of status__content__spoiler-link */ .reply-indicator__content .status__content__spoiler-link, .status__content .status__content__spoiler-link { background: var(--ui-base-color); @@ -277,7 +277,7 @@ html { } } -// Change the background colors of media and video spoilers +/* Change the background colors of media and video spoilers */ .media-spoiler, .video-player__spoiler { background: var(--ui-base-color); @@ -291,7 +291,7 @@ html { background-color: var(--ui-base-color); } -// Change the colors used in the dropdown menu +/* Change the colors used in the dropdown menu */ .dropdown-menu { background: var(--white); @@ -308,7 +308,7 @@ html { } } -// Change the text colors on inverted background +/* Change the text colors on inverted background */ .privacy-dropdown__option.active, .privacy-dropdown__option:hover, .privacy-dropdown__option.active .privacy-dropdown__option__content, @@ -356,7 +356,7 @@ html { border-top-color: var(--ui-base-color-lighten-4); } -// Change the background colors of modals +/* Change the background colors of modals */ .actions-modal, .boost-modal, .confirmation-modal, @@ -483,14 +483,14 @@ html { background: var(--ui-highlight-color-lighten-10); } -// Change the default color used for the text in an empty column or on the error column +/* Change the default color used for the text in an empty column or on the error column */ .empty-column-indicator, .error-column { color: var(--primary-text-color); background: var(--white); } -// Change the default colors used on some parts of the profile pages +/* Change the default colors used on some parts of the profile pages */ .activity-stream-tabs { background: var(--white); border-bottom-color: var(--ui-base-color-lighten-8); diff --git a/app/javascript/styles/mastodon-light/variables.scss b/app/javascript/styles/mastodon-light/variables.css similarity index 99% rename from app/javascript/styles/mastodon-light/variables.scss rename to app/javascript/styles/mastodon-light/variables.css index 07cfd205f7378269a5874580bc635138d8b0b683..1bae6be06bcaaa4b8e31bd272f8e7b0b53508c08 100644 --- a/app/javascript/styles/mastodon-light/variables.scss +++ b/app/javascript/styles/mastodon-light/variables.css @@ -242,7 +242,7 @@ --dismiss-overlay-width: 4rem; --dropdown-border-color: #b3c3d1; --dropdown-background-color: #ccd7e0; - --dropdown-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.25), 0 8px 10px -6px rgba(0, 0, 0, 0.25); + --dropdown-shadow: 0 20px 20px rgba(0, 0, 0, 0.25), 0 8px 4px rgba(0, 0, 0, 0.25); --modal-background-color: #e6ebf0; --modal-border-color: #ccd7e0; } diff --git a/app/javascript/styles/mastodon/about.scss b/app/javascript/styles/mastodon/about.css similarity index 100% rename from app/javascript/styles/mastodon/about.scss rename to app/javascript/styles/mastodon/about.css diff --git a/app/javascript/styles/mastodon/accessibility.scss b/app/javascript/styles/mastodon/accessibility.css similarity index 100% rename from app/javascript/styles/mastodon/accessibility.scss rename to app/javascript/styles/mastodon/accessibility.css diff --git a/app/javascript/styles/mastodon/accounts.scss b/app/javascript/styles/mastodon/accounts.css similarity index 99% rename from app/javascript/styles/mastodon/accounts.scss rename to app/javascript/styles/mastodon/accounts.css index 543cc8946cd5bb3a7af1dd7f07b654a729330e7f..c1c2e7c4e6606187112df762b876bd73f1b95ba7 100644 --- a/app/javascript/styles/mastodon/accounts.scss +++ b/app/javascript/styles/mastodon/accounts.css @@ -257,7 +257,7 @@ .account__header__fields { max-width: 100vw; padding: 0; - margin: 15px -15px -15px; + margin: -15px; border: 0 none; border-top: 1px solid var(--ui-base-color-lighten-12); border-bottom: 1px solid var(--ui-base-color-lighten-12); diff --git a/app/javascript/styles/mastodon/admin.scss b/app/javascript/styles/mastodon/admin.css similarity index 97% rename from app/javascript/styles/mastodon/admin.scss rename to app/javascript/styles/mastodon/admin.css index f7d421a832dbb4b6b3b1c2038e314bf56548a45e..071d0bd51654e5e0ab1f7563229e7c54e35a3489 100644 --- a/app/javascript/styles/mastodon/admin.scss +++ b/app/javascript/styles/mastodon/admin.css @@ -1,7 +1,3 @@ -$no-columns-breakpoint: 600px; -$sidebar-width: 240px; -$content-width: 840px; - .admin-wrapper { display: flex; justify-content: center; @@ -23,7 +19,7 @@ $content-width: 840px; } .sidebar { - width: $sidebar-width; + width: 240px; padding: 0; pointer-events: auto; @@ -86,7 +82,7 @@ $content-width: 840px; height: 25px; } - @media screen and (max-width: $no-columns-breakpoint) { + @media screen and (max-width: 600px) { & > a:first-child { display: none; } @@ -98,7 +94,7 @@ $content-width: 840px; overflow: hidden; margin-bottom: 20px; - @media screen and (max-width: $no-columns-breakpoint) { + @media screen and (max-width: 600px) { margin-bottom: 0; } @@ -162,22 +158,22 @@ $content-width: 840px; .content-wrapper { box-sizing: border-box; width: 100%; - max-width: $content-width; + max-width: 840px; flex: 1 1 auto; } - @media screen and (max-width: $content-width + $sidebar-width) { + @media screen and (max-width: 1080px) { .sidebar-wrapper--empty { display: none; } .sidebar-wrapper { - width: $sidebar-width; + width: 240px; flex: 0 0 auto; } } - @media screen and (max-width: $no-columns-breakpoint) { + @media screen and (max-width: 600px) { .sidebar-wrapper { width: 100%; } @@ -189,7 +185,7 @@ $content-width: 840px; padding-inline-start: 25px; padding-inline-end: 15px; - @media screen and (max-width: $no-columns-breakpoint) { + @media screen and (max-width: 600px) { max-width: none; padding: 15px; padding-top: 30px; @@ -262,7 +258,7 @@ $content-width: 840px; line-height: 18px; } - @media screen and (max-width: $no-columns-breakpoint) { + @media screen and (max-width: 600px) { border-bottom: 0; padding-bottom: 0; } @@ -354,7 +350,7 @@ $content-width: 840px; } } - @media screen and (max-width: $no-columns-breakpoint) { + @media screen and (max-width: 600px) { display: block; .sidebar-wrapper { @@ -556,7 +552,7 @@ body, & > strong { display: block; - margin: 0 0 10px -5px; + margin: 0 0 5px; font-weight: 500; font-size: 14px; line-height: 18px; @@ -676,7 +672,7 @@ body, display: block; line-height: 20px; padding: 15px; - padding-inline-start: 15px * 2 + 40px; + padding-inline-start: 70px; background: var(--ui-base-color); border-bottom: 1px solid var(--ui-base-color-darken-8); position: relative; @@ -1180,7 +1176,7 @@ a.name-tag, border-radius: 4px; padding: 0; position: relative; - padding-bottom: 55px + 20px; + padding-bottom: 75px; overflow: hidden; &__value { @@ -1446,7 +1442,7 @@ a.sparkline { } &__title { - margin-top: -(15px + 8px); + margin-top: -23px; display: flex; align-items: flex-end; @@ -1485,7 +1481,7 @@ a.sparkline { overflow: hidden; text-overflow: ellipsis; word-wrap: break-word; - max-height: 21px * 2; + max-height: 42px; position: relative; font-size: 15px; line-height: 21px; @@ -1549,7 +1545,7 @@ a.sparkline { grid-auto-columns: minmax(0, 1fr); grid-auto-flow: column; max-width: 340px; - min-width: 65px * 3; + min-width: 195px; &__item { padding: 15px 0; @@ -1577,7 +1573,7 @@ a.sparkline { background: var(--ui-base-color); position: relative; padding: 15px; - padding-inline-start: 15px * 2 + 40px; + padding-inline-start: 70px; border-bottom: 1px solid var(--ui-base-color-darken-8); &:first-child { diff --git a/app/javascript/styles/mastodon/basics.scss b/app/javascript/styles/mastodon/basics.css similarity index 82% rename from app/javascript/styles/mastodon/basics.scss rename to app/javascript/styles/mastodon/basics.css index 1d439622870f954f82345704da2170a79313940b..45021a1cc44ea660bfe44684d135fab80f99faf6 100644 --- a/app/javascript/styles/mastodon/basics.scss +++ b/app/javascript/styles/mastodon/basics.css @@ -12,17 +12,17 @@ body { -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 - // var(--font-sans-serif) => web-font (Roboto) fallback and newer Androids (>=4.0) + /* 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 */ + /* var(--font-sans-serif) => web-font (Roboto) fallback and newer Androids (>=4.0) */ font-family: system-ui, -apple-system, @@ -271,7 +271,7 @@ button { } .logo-resources { - // Not using display: none because of https://bugs.chromium.org/p/chromium/issues/detail?id=258029 + /* Not using display: none because of https://bugs.chromium.org/p/chromium/issues/detail?id=258029 */ visibility: hidden; user-select: none; pointer-events: none; @@ -284,10 +284,10 @@ button { 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. +/* 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 { diff --git a/app/javascript/styles/mastodon/boost.scss b/app/javascript/styles/mastodon/boost.css similarity index 100% rename from app/javascript/styles/mastodon/boost.scss rename to app/javascript/styles/mastodon/boost.css diff --git a/app/javascript/styles/mastodon/branding.scss b/app/javascript/styles/mastodon/branding.css similarity index 100% rename from app/javascript/styles/mastodon/branding.scss rename to app/javascript/styles/mastodon/branding.css diff --git a/app/javascript/styles/mastodon/components.scss b/app/javascript/styles/mastodon/components.css similarity index 98% rename from app/javascript/styles/mastodon/components.scss rename to app/javascript/styles/mastodon/components.css index e9b1a61dcc0f3c6014420b351fa9279e31e15991..cf78e8e5d1565faf102ff780d42316bdd501bea9 100644 --- a/app/javascript/styles/mastodon/components.scss +++ b/app/javascript/styles/mastodon/components.css @@ -477,7 +477,7 @@ body > [data-popper-placement] { min-height: 100px; border-radius: 4px 4px 0 0; padding-bottom: 0; - padding-right: 10px + 22px; // Cannot use inline-end because of dir=auto + padding-right: 32px; /* Cannot use inline-end because of dir=auto */ resize: none; scrollbar-color: initial; @@ -486,7 +486,7 @@ body > [data-popper-placement] { } @media screen and (width <= 600px) { - height: 100px !important; // Prevent auto-resize textarea + height: 100px !important; /* Prevent auto-resize textarea */ resize: vertical; } } @@ -951,7 +951,7 @@ body > [data-popper-placement] { } .status__content.status__content--collapsed { - max-height: 22px * 15; // 15 lines is roughly above 500 characters + max-height: 330px; /* 15 lines is roughly above 500 characters */ } .status__content__read-more-button, @@ -1101,8 +1101,6 @@ body > [data-popper-placement] { } &--in-thread { - $thread-margin: 46px + 10px; - border-bottom: 0; .status__content, @@ -1114,12 +1112,12 @@ body > [data-popper-placement] { .picture-in-picture-placeholder, .status-card, .hashtag-bar { - margin-inline-start: $thread-margin; - width: calc(100% - ($thread-margin)); + margin-inline-start: 56px; + width: calc(100% - 56px); } .status__content__read-more-button { - margin-inline-start: $thread-margin; + margin-inline-start: 56px; } } @@ -1128,12 +1126,12 @@ body > [data-popper-placement] { } &__line { - height: 16px - 4px; + height: 12px; border-inline-start: 2px solid var(--ui-base-color-lighten-8); width: 0; position: absolute; top: 0; - inset-inline-start: 16px + ((46px - 2px) * 0.5); + inset-inline-start: 16px + (22px); &--full { top: 0; @@ -1143,8 +1141,8 @@ body > [data-popper-placement] { content: ''; display: block; position: absolute; - top: 16px - 4px; - height: 46px + 4px + 4px; + top: 12px; + height: 54px; width: 2px; background: var(--ui-base-color); inset-inline-start: -2px; @@ -1152,7 +1150,7 @@ body > [data-popper-placement] { } &--first { - top: 16px + 46px + 4px; + top: 66px; height: calc(100% - (16px + 46px + 4px)); &::before { @@ -2142,12 +2140,10 @@ a.account__display-name { } } -$ui-header-height: 55px; - .ui__header { display: none; box-sizing: border-box; - height: $ui-header-height; + height: 55px; position: sticky; top: 0; z-index: 3; @@ -2159,7 +2155,7 @@ $ui-header-height: 55px; padding: 15px; .logo { - height: $ui-header-height - 30px; + height: 25px; width: auto; } @@ -2198,7 +2194,7 @@ $ui-header-height: 55px; .tabs-bar__wrapper { background: var(--ui-base-color-darken-8); position: sticky; - top: $ui-header-height; + top: 55px; z-index: 2; padding-top: 0; @@ -2441,22 +2437,20 @@ $ui-header-height: 55px; } } -@media screen and (max-width: 1175px - 1px) { - $sidebar-width: 285px; - +@media screen and (max-width: 1174px) { .columns-area__panels__main { - width: calc(100% - $sidebar-width); + width: calc(100% - 285px); } .columns-area__panels { - min-height: calc(100vh - $ui-header-height); + min-height: calc(100vh - 55px); } .columns-area__panels__pane--navigational { - min-width: $sidebar-width; + min-width: 285px; .columns-area__panels__pane__inner { - width: $sidebar-width; + width: 285px; } .navigation-panel { @@ -2491,18 +2485,16 @@ $ui-header-height: 55px; } } -@media screen and (max-width: 1175px - 285px - 1px) { - $sidebar-width: 55px; - +@media screen and (max-width: 889px) { .columns-area__panels__main { - width: calc(100% - $sidebar-width); + width: calc(100% - 55px); } .columns-area__panels__pane--navigational { - min-width: $sidebar-width; + min-width: 55px; .columns-area__panels__pane__inner { - width: $sidebar-width; + width: 55px; } .column-link span { @@ -2519,7 +2511,7 @@ $ui-header-height: 55px; display: none; } -@media screen and (max-width: 1175px - 1px) { +@media screen and (max-width: 1174px) { .columns-area__panels__pane--compositional { display: none; } @@ -3076,7 +3068,7 @@ $ui-header-height: 55px; } @supports (display: grid) { - // hack to fix Chrome <57 + /* hack to fix Chrome <57 */ contain: strict; } @@ -3098,7 +3090,7 @@ $ui-header-height: 55px; .scrollable.fullscreen { @supports (display: grid) { - // hack to fix Chrome <57 + /* hack to fix Chrome <57 */ contain: none; } } @@ -3634,8 +3626,8 @@ a.status-card { } .status-card-video { - // Firefox has a bug where frameborder=0 iframes add some extra blank space - // see https://bugzilla.mozilla.org/show_bug.cgi?id=155174 + /* Firefox has a bug where frameborder=0 iframes add some extra blank space */ + /* see https://bugzilla.mozilla.org/show_bug.cgi?id=155174 */ overflow: hidden; iframe { @@ -3851,7 +3843,7 @@ a.status-card { } &--without-header { - padding-top: 20px + 48px; + padding-top: 68px; } &__label { @@ -4535,7 +4527,7 @@ a.status-card { justify-content: center; @supports (display: grid) { - // hack to fix Chrome <57 + /* hack to fix Chrome <57 */ contain: strict; } @@ -4981,7 +4973,7 @@ a.status-card { } .emoji-mart-search-icon { - inset-inline-end: 10px + 5px; + inset-inline-end: 15px; } .emoji-mart-scroll { @@ -5944,7 +5936,7 @@ a.status-card { } .emoji-mart-search-icon { - inset-inline-end: 10px + 5px; + inset-inline-end: 15px; } } @@ -7030,47 +7022,44 @@ noscript { } @media screen and (width <= 630px) and (height <= 400px) { - $duration: 400ms; - $delay: 100ms; - .tabs-bar, .search { will-change: margin-top; - transition: margin-top $duration $delay; + transition: margin-top 400ms 100ms; } .navigation-bar { will-change: padding-bottom; - transition: padding-bottom $duration $delay; + transition: padding-bottom 400ms 100ms; } .navigation-bar { & > a:first-child { will-change: margin-top, margin-inline-start, margin-inline-end, width; transition: - margin-top $duration $delay, - margin-inline-start $duration ($duration + $delay), - margin-inline-end $duration ($duration + $delay); + margin-top 400ms 100ms, + margin-inline-start 400ms 500ms, + margin-inline-end 400ms 500ms; } & > .navigation-bar__profile-edit { will-change: margin-top; - transition: margin-top $duration $delay; + transition: margin-top 400ms 100ms; } .navigation-bar__actions { & > .icon-button.close { will-change: opacity transform; transition: - opacity $duration * 0.5 $delay, - transform $duration $delay; + opacity 200ms 100ms, + transform 400ms 100ms; } & > .compose__action-bar .icon-button { will-change: opacity transform; transition: - opacity $duration * 0.5 $delay + $duration * 0.5, - transform $duration $delay; + opacity 200ms 300ms, + transform 400ms 100ms; } } } @@ -7515,7 +7504,7 @@ noscript { padding-top: 10px; gap: 8px; overflow: hidden; - margin-inline-start: -2px; // aligns the pfp with content below + margin-inline-start: -2px; /* aligns the pfp with content below */ &__buttons { display: flex; @@ -7981,7 +7970,7 @@ noscript { width: 124px; flex: 0 0 auto; - @media screen and (max-width: 124px + 300px) { + @media screen and (max-width: 424px) { display: none; } } @@ -7991,7 +7980,7 @@ noscript { flex: 0 0 auto; position: relative; - @media screen and (max-width: 124px + 300px) { + @media screen and (max-width: 424px) { width: 100%; } } @@ -8595,7 +8584,7 @@ noscript { color: inherit; font: inherit; border: 0; - padding: 15px - 4px 15px - 6px; + padding: 11px 9px; flex: 1 1 auto; &::placeholder { @@ -8665,7 +8654,7 @@ noscript { } } - @media screen and (max-width: 1175px - 1px) { + @media screen and (max-width: 1174px) { &__choices { flex-direction: column; @@ -9344,8 +9333,8 @@ noscript { border: 1px solid #313543d9; border-radius: 8px; box-shadow: - 0 10px 15px -3px var(--base-shadow-color-a25), - 0 4px 6px -4px var(--base-shadow-color-a25); + 0 10px 12px var(--base-shadow-color-a25), + 0 4px 2px var(--base-shadow-color-a25); cursor: default; font-size: 15px; line-height: 21px; diff --git a/app/javascript/styles/mastodon/containers.scss b/app/javascript/styles/mastodon/containers.css similarity index 100% rename from app/javascript/styles/mastodon/containers.scss rename to app/javascript/styles/mastodon/containers.css diff --git a/app/javascript/styles/mastodon/dashboard.scss b/app/javascript/styles/mastodon/dashboard.css similarity index 100% rename from app/javascript/styles/mastodon/dashboard.scss rename to app/javascript/styles/mastodon/dashboard.css diff --git a/app/javascript/styles/mastodon/emoji_picker.scss b/app/javascript/styles/mastodon/emoji_picker.css similarity index 99% rename from app/javascript/styles/mastodon/emoji_picker.scss rename to app/javascript/styles/mastodon/emoji_picker.css index 9608c3a4477b10ff5dba129a394db876957a1b55..b43eb24a030be54e572e631382b9d449cee1fa37 100644 --- a/app/javascript/styles/mastodon/emoji_picker.scss +++ b/app/javascript/styles/mastodon/emoji_picker.css @@ -142,7 +142,7 @@ .emoji-mart-search-icon { position: absolute; top: 18px; - inset-inline-end: 45px + 5px; + inset-inline-end: 50px; z-index: 2; padding: 2px 5px 1px; border: 0; diff --git a/app/javascript/styles/mastodon/forms.scss b/app/javascript/styles/mastodon/forms.css similarity index 99% rename from app/javascript/styles/mastodon/forms.scss rename to app/javascript/styles/mastodon/forms.css index d3c00092d2d5377f37fddd33adc65d540469a746..d17e9efc2d81343ee044c2f11d20080786b21bb1 100644 --- a/app/javascript/styles/mastodon/forms.scss +++ b/app/javascript/styles/mastodon/forms.css @@ -1,5 +1,3 @@ -$no-columns-breakpoint: 600px; - code { font-family: var(--font-monospace), monospace; font-weight: 400; @@ -354,7 +352,7 @@ code { margin-bottom: 0; } - @media screen and (max-width: $no-columns-breakpoint) { + @media screen and (max-width: 600px) { display: block; margin-bottom: 0; @@ -1088,8 +1086,8 @@ code { } } -// Only remove padding when listing applications, to prevent styling issues on -// the Authorization page. +/* Only remove padding when listing applications, to prevent styling issues on */ +/* the Authorization page. */ .applications-list { .permissions-list__item:last-child { padding-bottom: 0; diff --git a/app/javascript/styles/mastodon/lists.scss b/app/javascript/styles/mastodon/lists.css similarity index 100% rename from app/javascript/styles/mastodon/lists.scss rename to app/javascript/styles/mastodon/lists.css diff --git a/app/javascript/styles/mastodon/modal.scss b/app/javascript/styles/mastodon/modal.css similarity index 100% rename from app/javascript/styles/mastodon/modal.scss rename to app/javascript/styles/mastodon/modal.css diff --git a/app/javascript/styles/mastodon/polls.scss b/app/javascript/styles/mastodon/polls.css similarity index 98% rename from app/javascript/styles/mastodon/polls.scss rename to app/javascript/styles/mastodon/polls.css index 468eb0053a2ff4f49998432b949328f6e86b5bb6..72b0918f66a404ecc6aa63d8ad13e8b676b6e111 100644 --- a/app/javascript/styles/mastodon/polls.scss +++ b/app/javascript/styles/mastodon/polls.css @@ -31,8 +31,8 @@ background: transparent; } - // Those rules need to be entirely separate or they won't work, hence the - // duplication + /* Those rules need to be entirely separate or they won't work, hence the */ + /* duplication */ &::-moz-progress-bar { border-radius: 4px; background: var(--ui-primary-color-darken-5); diff --git a/app/javascript/styles/mastodon/reset.scss b/app/javascript/styles/mastodon/reset.css similarity index 100% rename from app/javascript/styles/mastodon/reset.scss rename to app/javascript/styles/mastodon/reset.css diff --git a/app/javascript/styles/mastodon/rich_text.scss b/app/javascript/styles/mastodon/rich_text.css similarity index 100% rename from app/javascript/styles/mastodon/rich_text.scss rename to app/javascript/styles/mastodon/rich_text.css diff --git a/app/javascript/styles/mastodon/rtl.scss b/app/javascript/styles/mastodon/rtl.css similarity index 97% rename from app/javascript/styles/mastodon/rtl.scss rename to app/javascript/styles/mastodon/rtl.css index c2559936c41508c8046f6b74f230a6907ecb9db2..1f361b4666f6390f4d89c1cf7cca5084ecb62257 100644 --- a/app/javascript/styles/mastodon/rtl.scss +++ b/app/javascript/styles/mastodon/rtl.css @@ -12,7 +12,7 @@ body.rtl { .compose-form .autosuggest-textarea__textarea { padding-right: 10px; - padding-left: 10px + 22px; + padding-left: 32px; } .columns-area { diff --git a/app/javascript/styles/mastodon/statuses.scss b/app/javascript/styles/mastodon/statuses.css similarity index 95% rename from app/javascript/styles/mastodon/statuses.scss rename to app/javascript/styles/mastodon/statuses.css index 72fc635261c8810e3230b6b09ba6db141cc365db..e72370be2d760ad4562ee5d719458824bcd376f3 100644 --- a/app/javascript/styles/mastodon/statuses.scss +++ b/app/javascript/styles/mastodon/statuses.css @@ -110,8 +110,8 @@ } .status { - padding: 15px 15px 15px (48px + 15px * 2); - min-height: 48px + 2px; + padding: 15px 15px 15px (78px); + min-height: 50px; &__avatar { inset-inline-start: 15px; @@ -128,7 +128,7 @@ } &__prepend { - margin-inline-start: 48px + 15px * 2; + margin-inline-start: 78px; padding-top: 15px; } diff --git a/app/javascript/styles/mastodon/tables.scss b/app/javascript/styles/mastodon/tables.css similarity index 99% rename from app/javascript/styles/mastodon/tables.scss rename to app/javascript/styles/mastodon/tables.css index 33b6ac3cfb1b3733eaefeaf88eae246d5b5a4016..fc7be8a66101d05acb775d377e7d97694fd3802a 100644 --- a/app/javascript/styles/mastodon/tables.scss +++ b/app/javascript/styles/mastodon/tables.css @@ -192,7 +192,7 @@ a.table-action-link { &__actions { text-align: end; - padding-inline-end: 16px - 5px; + padding-inline-end: 11px; } } diff --git a/app/javascript/styles/mastodon/variables.scss b/app/javascript/styles/mastodon/variables.css similarity index 98% rename from app/javascript/styles/mastodon/variables.scss rename to app/javascript/styles/mastodon/variables.css index 61a34532ce2b4cdac62a6f215759f29304d61b26..746a39c5544d1863dbf8e355a2b8e13eb268e2e5 100644 --- a/app/javascript/styles/mastodon/variables.scss +++ b/app/javascript/styles/mastodon/variables.css @@ -241,7 +241,7 @@ --dismiss-overlay-width: 4rem; --dropdown-border-color: #42485a; --dropdown-background-color: #313543; - --dropdown-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.25), 0 8px 10px -6px rgba(0, 0, 0, 0.25); + --dropdown-shadow: 0 20px 20px rgba(0, 0, 0, 0.25), 0 8px 4px rgba(0, 0, 0, 0.25); --modal-background-color: #1f232b; --modal-border-color: #313543; } diff --git a/app/javascript/styles/mastodon/widgets.scss b/app/javascript/styles/mastodon/widgets.css similarity index 100% rename from app/javascript/styles/mastodon/widgets.scss rename to app/javascript/styles/mastodon/widgets.css diff --git a/app/javascript/styles/win95.scss b/app/javascript/styles/win95.css similarity index 73% rename from app/javascript/styles/win95.scss rename to app/javascript/styles/win95.css index ea080672d19cde551a62b897e2e7ecbac253d9cf..28f2e9f476cf151d1fc89f5cf0acc96db5f500c3 100644 --- a/app/javascript/styles/win95.scss +++ b/app/javascript/styles/win95.css @@ -1,99 +1,7 @@ -// win95 theme from cybrespace. +/* win95 theme from cybrespace. */ -// Modified by kibi! to use webpack package syntax for urls (eg, -// `url(~images/…)`) for easy importing into skins. - -// Theme vars needed by win95 (from dark defaults) -$ui-base-color: #282c37; -$dark-text-color: #606984; -$gold-star: #ca8f04; - -$win95-bg: #bfbfbf; -$win95-dark-grey: #404040; -$win95-mid-grey: #808080; -$win95-window-header: #00007f; -$win95-tooltip-yellow: #ffffcc; -$win95-blue: blue; -$win95-cyan: #008080; - -$ui-base-lighter-color: $win95-dark-grey; -$ui-highlight-color: $win95-window-header; - -@mixin win95-border-outset() { - border-left: 2px solid #efefef; - border-top: 2px solid #efefef; - border-right: 2px solid #404040; - border-bottom: 2px solid #404040; - border-radius:0px; -} - -@mixin win95-border-outset-sides-only() { - border-left: 2px solid #efefef; - border-right: 2px solid #404040; - border-radius:0px; -} - -@mixin win95-outset() { - box-shadow: inset -1px -1px 0px #000000, - inset 1px 1px 0px #ffffff, - inset -2px -2px 0px #808080, - inset 2px 2px 0px #dfdfdf; - border-radius:0px; -} - -@mixin win95-outset-no-highlight() { - box-shadow: inset -1px -1px 0px #000000, - inset -2px -2px 0px #808080; - border-radius:0px; -} - -@mixin win95-border-inset() { - border-left: 2px solid #404040; - border-top: 2px solid #404040; - border-right: 2px solid #efefef; - border-bottom: 2px solid #efefef; - border-radius:0px; -} - -@mixin win95-border-slight-inset() { - border-left: 1px solid #404040; - border-top: 1px solid #404040; - border-right: 1px solid #efefef; - border-bottom: 1px solid #efefef; - border-radius:0px; -} - -@mixin win95-inset() { - box-shadow: inset 1px 1px 0px #000000, - inset -1px -1px 0px #ffffff, - inset 2px 2px 0px #808080, - inset -2px -2px 0px #dfdfdf; - border-width:0px; - border-radius:0px; -} - - -@mixin win95-tab() { - box-shadow: inset -1px 0px 0px #000000, - inset 1px 0px 0px #ffffff, - inset 0px 1px 0px #ffffff, - inset 0px 2px 0px #dfdfdf, - inset -2px 0px 0px #808080, - inset 2px 0px 0px #dfdfdf; - border-radius:0px; - border-top-left-radius: 1px; - border-top-right-radius: 1px; -} - -@mixin win95-border-groove() { - border-radius: 0px; - border: 2px groove #bfbfbf; -} - -@mixin win95-reset() { - box-shadow: unset; - border: 0px solid transparent; -} +/* Modified by kibi! to use webpack package syntax for urls (eg, */ +/* `url(~images/…)`) for easy importing into skins. */ @font-face { font-family:"premillenium"; @@ -128,7 +36,7 @@ $ui-highlight-color: $win95-window-header; /* Less emphatic show more */ .status__content__read-more-button { font-size: 14px; - color: $dark-text-color; + color: #606984; .status__prepend-icon { padding-right: 4px; @@ -163,7 +71,7 @@ $ui-highlight-color: $win95-window-header; /* Put a reasonable background on the single-column compose form */ .layout-single-column .compose-panel { - background-color: $ui-base-color; + background-color: #282c37; height: auto; max-height: 100%; overflow-y: visible; @@ -194,7 +102,7 @@ $ui-highlight-color: $win95-window-header; /* main win95 style */ html { - scrollbar-color: $win95-mid-grey transparent; + scrollbar-color: #808080 transparent; } body { @@ -206,7 +114,7 @@ body { .ui, .ui .columns-area, body.admin { - background: $win95-cyan; + background: #008080; } .loading-bar { @@ -215,18 +123,22 @@ body.admin { } .tabs-bar__wrapper { - background-color: $win95-cyan; + background-color: #008080; } .tabs-bar { - background: $win95-bg; - @include win95-outset(); + background: #bfbfbf; + box-shadow: inset -0px 0px #000000, + inset 1px 1px 0px #ffffff, + inset -0px 0px #808080, + inset 2px 2px 0px #dfdfdf; + border-radius:0px; height: 30px; } .tabs-bar__link { color:black; - border:2px outset $win95-bg; + border:2px outset #bfbfbf; border-top-width: 1px; border-left-width: 1px; margin:2px; @@ -234,7 +146,12 @@ body.admin { } .tabs-bar__link.active { - @include win95-inset(); + box-shadow: inset 1px 1px 0px #000000, + inset -0px 0px #ffffff, + inset 2px 2px 0px #808080, + inset -0px 0px #dfdfdf; + border-width:0px; + border-radius:0px; color:black; } @@ -253,7 +170,7 @@ body.admin { position:relative; flex-basis:60px !important; font-size:0px; - color:$win95-bg; + color:#bfbfbf; background-image: url("~images/start.png"); background-repeat:no-repeat; @@ -265,7 +182,7 @@ body.admin { .drawer .drawer__inner { overflow: visible; height:inherit; - background:$win95-bg; + background:#bfbfbf; } .drawer:after { @@ -293,8 +210,12 @@ body.admin { } .column > .scrollable { - background: $win95-bg; - @include win95-border-outset(); + background: #bfbfbf; + border-left: 2px solid #efefef; + border-top: 2px solid #efefef; + border-right: 2px solid #404040; + border-bottom: 2px solid #404040; + border-radius:0px; border-top-width:0px; } @@ -308,7 +229,11 @@ body.admin { padding:0px; font-size:13px; background:#7f7f7f; - @include win95-border-outset(); + border-left: 2px solid #efefef; + border-top: 2px solid #efefef; + border-right: 2px solid #404040; + border-bottom: 2px solid #404040; + border-radius:0px; border-bottom-width:0px; color:white; font-weight:bold; @@ -322,7 +247,7 @@ body.admin { } .column-header__wrapper.active { - background:$win95-window-header; + background:#00007f; } .column-header__wrapper.active::before { @@ -330,7 +255,7 @@ body.admin { } .column-header.active { box-shadow:unset; - background:$win95-window-header; + background:#00007f; } .column-header.active .column-header__icon { @@ -348,9 +273,13 @@ body.admin { } .column-header__button { - background: $win95-bg; + background: #bfbfbf; color: black; - @include win95-outset(); + box-shadow: inset -0px 0px #000000, + inset 1px 1px 0px #ffffff, + inset -0px 0px #808080, + inset 2px 2px 0px #dfdfdf; + border-radius:0px; line-height:0px; font-size:14px; @@ -362,20 +291,29 @@ body.admin { } .column-header__button.active, .column-header__button.active:hover { - @include win95-inset(); + box-shadow: inset 1px 1px 0px #000000, + inset -0px 0px #ffffff, + inset 2px 2px 0px #808080, + inset -0px 0px #dfdfdf; + border-width:0px; + border-radius:0px; background-color:#7f7f7f; } -// selectivity -- needs to override .column-header > button +/* selectivity -- needs to override .column-header > button */ .column-header .column-header__back-button { - background: $win95-bg; + background: #bfbfbf; color: black; padding:2px; padding-right: 4px; max-height: 20px; min-height: unset; margin: 2px; - @include win95-outset(); + box-shadow: inset -0px 0px #000000, + inset 1px 1px 0px #ffffff, + inset -0px 0px #808080, + inset 2px 2px 0px #dfdfdf; + border-radius:0px; font-size: 13px; line-height: 17px; font-weight:bold; @@ -386,9 +324,13 @@ body.admin { } .column-back-button { - background:$win95-bg; + background:#bfbfbf; color:black; - @include win95-outset(); + box-shadow: inset -0px 0px #000000, + inset 1px 1px 0px #ffffff, + inset -0px 0px #808080, + inset 2px 2px 0px #dfdfdf; + border-radius:0px; font-size:13px; font-weight:bold; @@ -411,12 +353,12 @@ body.admin { } .column-header__collapsible { - border-left:2px outset $win95-bg; - border-right:2px outset $win95-bg; + border-left:2px outset #bfbfbf; + border-right:2px outset #bfbfbf; } .column-header__collapsible-inner { - background:$win95-bg; + background:#bfbfbf; color:black; } @@ -431,8 +373,12 @@ body.admin { } .column-inline-form { - background-color: $win95-bg; - @include win95-border-outset(); + background-color: #bfbfbf; + border-left: 2px solid #efefef; + border-top: 2px solid #efefef; + border-right: 2px solid #404040; + border-bottom: 2px solid #404040; + border-radius:0px; border-bottom-width:0px; border-top-width:0px; @@ -457,7 +403,7 @@ body.admin { [role="group"] .column-settings__section { display:inline-block; - background-color:$win95-bg; + background-color:#bfbfbf; position:relative; top: -14px; @@ -487,7 +433,11 @@ body.admin { .react-toggle .react-toggle-track { border-radius:0px; background-color:white; - @include win95-border-inset(); + border-left: 2px solid #404040; + border-top: 2px solid #404040; + border-right: 2px solid #efefef; + border-bottom: 2px solid #efefef; + border-radius:0px; width:12px; height:12px; @@ -516,8 +466,12 @@ body.admin { } .text-btn { - background-color:$win95-bg; - @include win95-outset(); + background-color:#bfbfbf; + box-shadow: inset -0px 0px #000000, + inset 1px 1px 0px #ffffff, + inset -0px 0px #808080, + inset 2px 2px 0px #dfdfdf; + border-radius:0px; padding:4px; } @@ -527,13 +481,23 @@ body.admin { } .text-btn:active { - @include win95-inset(); + box-shadow: inset 1px 1px 0px #000000, + inset -0px 0px #ffffff, + inset 2px 2px 0px #808080, + inset -0px 0px #dfdfdf; + border-width:0px; + border-radius:0px; } .setting-text { color:black; background-color:white; - @include win95-inset(); + box-shadow: inset 1px 1px 0px #000000, + inset -0px 0px #ffffff, + inset 2px 2px 0px #808080, + inset -0px 0px #dfdfdf; + border-width:0px; + border-radius:0px; font-size:13px; padding:2px; } @@ -541,7 +505,7 @@ body.admin { .setting-text:active, .setting-text:focus, .setting-text.light:active, .setting-text.light:focus { color:black; - border-bottom:2px inset $win95-bg; + border-bottom:2px inset #bfbfbf; } .column-header__setting-arrows .column-header__setting-btn { @@ -553,9 +517,13 @@ body.admin { } .missing-indicator { - background-color:$win95-bg; + background-color:#bfbfbf; color:black; - @include win95-outset(); + box-shadow: inset -0px 0px #000000, + inset 1px 1px 0px #ffffff, + inset -0px 0px #808080, + inset 2px 2px 0px #dfdfdf; + border-radius:0px; } .missing-indicator > div { @@ -565,13 +533,15 @@ body.admin { .empty-column-indicator, .error-column { - background: $win95-bg; + background: #bfbfbf; color: black; } .notification__filter-bar { - background: $win95-bg; - @include win95-border-outset-sides-only(); + background: #bfbfbf; + border-left: 2px solid #efefef; + border-right: 2px solid #404040; + border-radius:0px; padding-top: 10px; padding-left: 10px; padding-right: 10px; @@ -583,12 +553,20 @@ body.admin { color: black; padding: 8px 0; align-self: end; - @include win95-tab(); + box-shadow: inset -1px 0px 0px #000000, + inset 1px 0px 0px #ffffff, + inset 0px 1px 0px #ffffff, + inset 0px 2px 0px #dfdfdf, + inset -2px 0px 0px #808080, + inset 2px 0px 0px #dfdfdf; + border-radius:0px; + border-top-left-radius: 1px; + border-top-right-radius: 1px; &.active { color: black; top: 2px; - background-color: $win95-bg; + background-color: #bfbfbf; &::before, &::after { display:none; @@ -598,12 +576,16 @@ body.admin { } .status__wrapper { - border: 2px groove $win95-bg; + border: 2px groove #bfbfbf; margin:4px; } .status { - @include win95-border-slight-inset(); + border-left: 1px solid #404040; + border-top: 1px solid #404040; + border-right: 1px solid #efefef; + border-bottom: 1px solid #efefef; + border-radius:0px; background-color:white; margin:4px; padding-bottom:40px; @@ -611,9 +593,9 @@ body.admin { } .status.status-direct { - background:$win95-bg; + background:#bfbfbf; &:focus, &:active { - background:$win95-bg; + background:#bfbfbf; } &:not(.read) { @@ -621,13 +603,13 @@ body.admin { } } .focusable:focus .status.status-direct { - background:$win95-bg; + background:#bfbfbf; } [data-whatinput="mouse"], [data-whatinput="touch"] { .status__content:focus, .status:focus, .status__wrapper:focus, .status__content__text:focus { - background-color: $win95-bg; + background-color: #bfbfbf; } .status.status-direct, .detailed-status { @@ -654,13 +636,13 @@ body.admin { position:absolute; bottom:-1px; left:-1px; - background:$win95-bg; + background:#bfbfbf; width:calc(100% + 2px); padding-left:10px; padding: 4px 2px; padding-bottom:4px; - border-bottom:2px groove $win95-bg; - border-top:1px outset $win95-bg; + border-bottom:2px groove #bfbfbf; + border-top:1px outset #bfbfbf; text-align: right; } @@ -685,14 +667,14 @@ body.admin { } .focusable:focus { - background: $win95-bg; + background: #bfbfbf; .detailed-status__action-bar { - background: $win95-bg; + background: #bfbfbf; } .status, .detailed-status { background: white; - outline:2px dotted $win95-mid-grey; + outline:2px dotted #808080; } } @@ -708,7 +690,7 @@ body.admin { background:white; background-clip:padding-box; margin:4px; - border: 2px groove $win95-bg; + border: 2px groove #bfbfbf; padding:4px; } @@ -724,23 +706,31 @@ body.admin { .account__avatar-overlay-base, .account__header__avatar, .account__avatar-overlay-overlay { - @include win95-border-slight-inset(); + border-left: 1px solid #404040; + border-top: 1px solid #404040; + border-right: 1px solid #efefef; + border-bottom: 1px solid #efefef; + border-radius:0px; clip-path:none; filter: saturate(1.8) brightness(1.1); } .detailed-status__action-bar { - background-color:$win95-bg; + background-color:#bfbfbf; border:0px; - border-bottom:2px groove $win95-bg; + border-bottom:2px groove #bfbfbf; margin-bottom:8px; justify-items:left; padding-left:4px; } .icon-button { - background:$win95-bg; - @include win95-border-outset(); + background:#bfbfbf; + border-left: 2px solid #efefef; + border-top: 2px solid #efefef; + border-right: 2px solid #404040; + border-bottom: 2px solid #404040; + border-radius:0px; padding:0px 0px 0px 0px; margin-right:4px; @@ -751,7 +741,11 @@ body.admin { } .icon-button:active { - @include win95-border-inset(); + border-left: 2px solid #404040; + border-top: 2px solid #404040; + border-right: 2px solid #efefef; + border-bottom: 2px solid #efefef; + border-radius:0px; } .status__action-bar > .icon-button { @@ -766,24 +760,32 @@ body.admin { } .icon-button.star-icon.active { - color: $gold-star; + color: #ca8f04; &:active, &:hover, &:focus { - color: $gold-star; + color: #ca8f04; } } .icon-button.star-icon > i { - background:$win95-bg; - @include win95-border-outset(); + background:#bfbfbf; + border-left: 2px solid #efefef; + border-top: 2px solid #efefef; + border-right: 2px solid #404040; + border-bottom: 2px solid #404040; + border-radius:0px; padding-bottom:3px; } .icon-button.star-icon:active > i { - @include win95-border-inset(); + border-left: 2px solid #404040; + border-top: 2px solid #404040; + border-right: 2px solid #efefef; + border-bottom: 2px solid #efefef; + border-radius:0px; } .text-icon-button { - color:$win95-dark-grey; + color:#404040; } .detailed-status__action-bar-dropdown { @@ -821,13 +823,17 @@ body.admin { .load-more { width:auto; margin:5px auto; - background: $win95-bg; - @include win95-outset(); + background: #bfbfbf; + box-shadow: inset -0px 0px #000000, + inset 1px 1px 0px #ffffff, + inset -0px 0px #808080, + inset 2px 2px 0px #dfdfdf; + border-radius:0px; color:black; padding: 2px 5px; &:hover { - background: $win95-bg; + background: #bfbfbf; color:black; } } @@ -850,16 +856,25 @@ body.admin { } .reply-indicator__content .status__content__spoiler-link, .status__content .status__content__spoiler-link { - background:$win95-bg; - @include win95-outset(); + background:#bfbfbf; + box-shadow: inset -0px 0px #000000, + inset 1px 1px 0px #ffffff, + inset -0px 0px #808080, + inset 2px 2px 0px #dfdfdf; + border-radius:0px; } .reply-indicator__content .status__content__spoiler-link:hover, .status__content .status__content__spoiler-link:hover { - background:$win95-bg; + background:#bfbfbf; } .reply-indicator__content .status__content__spoiler-link:active, .status__content .status__content__spoiler-link:active { - @include win95-inset(); + box-shadow: inset 1px 1px 0px #000000, + inset -0px 0px #ffffff, + inset 2px 2px 0px #808080, + inset -0px 0px #dfdfdf; + border-width:0px; + border-radius:0px; } .reply-indicator__content a, .status__content a { @@ -867,7 +882,7 @@ body.admin { } .notification { - border: 2px groove $win95-bg; + border: 2px groove #bfbfbf; margin:4px; } @@ -882,17 +897,25 @@ body.admin { .drawer__header { - background: $win95-bg; - @include win95-border-outset(); + background: #bfbfbf; + border-left: 2px solid #efefef; + border-top: 2px solid #efefef; + border-right: 2px solid #404040; + border-bottom: 2px solid #404040; + border-radius:0px; justify-content:left; margin-bottom:0px; padding-bottom:2px; - border-bottom:2px groove $win95-bg; + border-bottom:2px groove #bfbfbf; } .drawer__tab { color:black; - @include win95-outset(); + box-shadow: inset -0px 0px #000000, + inset 1px 1px 0px #ffffff, + inset -0px 0px #808080, + inset 2px 2px 0px #dfdfdf; + border-radius:0px; padding:5px; margin:2px; flex: 0 0 auto; @@ -915,7 +938,7 @@ body.admin { padding:5px 15px; width:40px; font-size:0px; - color:$win95-bg; + color:#bfbfbf; background-image: url("~images/start.png"); background-repeat:no-repeat; @@ -942,19 +965,23 @@ body.admin { } .search { - background:$win95-bg; + background:#bfbfbf; padding-top:2px; padding:2px; - border:2px outset $win95-bg; + border:2px outset #bfbfbf; border-top-width:0px; - border-bottom: 2px groove $win95-bg; + border-bottom: 2px groove #bfbfbf; margin-bottom:0px; } .search input { background-color:white; color:black; - @include win95-border-slight-inset(); + border-left: 1px solid #404040; + border-top: 1px solid #404040; + border-right: 1px solid #efefef; + border-bottom: 1px solid #efefef; + border-radius:0px; } .search__input:focus { @@ -965,7 +992,7 @@ body.admin { box-shadow: unset; color:black; border-radius:0px; - background-color:$win95-tooltip-yellow; + background-color:#ffffcc; border:1px solid black; h4 { @@ -976,9 +1003,9 @@ body.admin { } .search-results__header { - background-color: $win95-bg; + background-color: #bfbfbf; color:black; - border-bottom:2px groove $win95-bg; + border-bottom:2px groove #bfbfbf; } .search-results__hashtag { @@ -1006,7 +1033,7 @@ body.admin { .search-results__section .account:hover .account__display-name, .search-results__section .account:hover .account__display-name strong, .search-results__section .search-results__hashtag:hover { - background-color:$win95-window-header; + background-color:#00007f; color:white; } @@ -1029,8 +1056,8 @@ body.admin { .drawer__inner, .drawer__inner.darker { - background-color:$win95-bg; - border: 2px outset $win95-bg; + background-color:#bfbfbf; + border: 2px outset #bfbfbf; border-top-width:0px; } @@ -1046,7 +1073,11 @@ body.admin { .compose-form .autosuggest-textarea__textarea, .compose-form .spoiler-input__input { border-radius:0px; - @include win95-border-slight-inset(); + border-left: 1px solid #404040; + border-top: 1px solid #404040; + border-right: 1px solid #efefef; + border-bottom: 1px solid #efefef; + border-radius:0px; } .compose-form .autosuggest-textarea__textarea { @@ -1055,54 +1086,54 @@ body.admin { .compose-form__uploads-wrapper { border-radius:0px; - border-bottom:1px inset $win95-bg; + border-bottom:1px inset #bfbfbf; border-top-width:0px; } .compose-form__upload-wrapper { - border-left:1px inset $win95-bg; - border-right:1px inset $win95-bg; + border-left:1px inset #bfbfbf; + border-right:1px inset #bfbfbf; } .compose-form .compose-form__buttons-wrapper { - background-color: $win95-bg; - border:2px groove $win95-bg; + background-color: #bfbfbf; + border:2px groove #bfbfbf; margin-top:4px; padding:4px 8px; } .compose-form__buttons { - background-color:$win95-bg; + background-color:#bfbfbf; border-radius:0px; box-shadow:unset; } .compose-form__buttons-separator { - border-left: 2px groove $win95-bg; + border-left: 2px groove #bfbfbf; } .compose-form__poll-wrapper .icon-button.disabled { - color: $win95-mid-grey; + color: #808080; } .privacy-dropdown.active .privacy-dropdown__value.active, .advanced-options-dropdown.open .advanced-options-dropdown__value { - background: $win95-bg; + background: #bfbfbf; } .privacy-dropdown.active .privacy-dropdown__value.active .icon-button { - color: $win95-dark-grey; + color: #404040; } .privacy-dropdown.active .privacy-dropdown__value { - background: $win95-bg; + background: #bfbfbf; box-shadow:unset; } .privacy-dropdown__option.active, .privacy-dropdown__option:hover, .privacy-dropdown__option.active:hover { - background:$win95-window-header; + background:#00007f; } .privacy-dropdown__dropdown, @@ -1112,8 +1143,12 @@ body.admin { { box-shadow:unset; color:black; - @include win95-outset(); - background: $win95-bg; + box-shadow: inset -0px 0px #000000, + inset 1px 1px 0px #ffffff, + inset -0px 0px #808080, + inset 2px 2px 0px #dfdfdf; + border-radius:0px; + background: #bfbfbf; } .privacy-dropdown__option__content { @@ -1131,7 +1166,7 @@ body.admin { display:block; position:absolute; top:-10px; - background-color:$win95-bg; + background-color:#bfbfbf; font-size:11px; padding: 0px 5px; } @@ -1139,8 +1174,8 @@ body.admin { .compose-form__warning { position:relative; box-shadow:unset; - border:2px groove $win95-bg; - background-color:$win95-bg; + border:2px groove #bfbfbf; + background-color:#bfbfbf; color:black; } @@ -1155,15 +1190,19 @@ body.admin { } .compose-form__buttons button.active:last-child { - @include win95-border-inset(); + border-left: 2px solid #404040; + border-top: 2px solid #404040; + border-right: 2px solid #efefef; + border-bottom: 2px solid #efefef; + border-radius:0px; background: #dfdfdf; color:#7f7f7f; } .compose-form__upload-thumbnail { border-radius:0px; - border:2px groove $win95-bg; - background-color:$win95-bg; + border:2px groove #bfbfbf; + background-color:#bfbfbf; padding:2px; box-sizing:border-box; } @@ -1192,7 +1231,7 @@ body.admin { .emoji-dialog.with-search { box-shadow:unset; border-radius:0px; - background-color:$win95-bg; + background-color:#bfbfbf; border:1px solid black; box-sizing:content-box; @@ -1202,11 +1241,16 @@ body.admin { color:black; background-color:white; border-radius:0px; - @include win95-inset(); + box-shadow: inset 1px 1px 0px #000000, + inset -0px 0px #ffffff, + inset 2px 2px 0px #808080, + inset -0px 0px #dfdfdf; + border-width:0px; + border-radius:0px; } .emoji-dialog .emoji-search-wrapper { - border-bottom:2px groove $win95-bg; + border-bottom:2px groove #bfbfbf; } .emoji-dialog .emoji-category-title { @@ -1215,24 +1259,33 @@ body.admin { } .reply-indicator { - background-color:$win95-bg; + background-color:#bfbfbf; border-radius:3px; - border:2px groove $win95-bg; + border:2px groove #bfbfbf; } .button { - background-color:$win95-bg; - @include win95-outset(); + background-color:#bfbfbf; + box-shadow: inset -0px 0px #000000, + inset 1px 1px 0px #ffffff, + inset -0px 0px #808080, + inset 2px 2px 0px #dfdfdf; + border-radius:0px; border-radius:0px; color:black; font-weight:bold; &:hover, &:focus, &:disabled { - background-color:$win95-bg; + background-color:#bfbfbf; } &:active { - @include win95-inset(); + box-shadow: inset 1px 1px 0px #000000, + inset -0px 0px #ffffff, + inset 2px 2px 0px #808080, + inset -0px 0px #dfdfdf; + border-width:0px; + border-radius:0px; } &:disabled { @@ -1240,21 +1293,25 @@ body.admin { text-shadow: 1px 1px 0px #efefef; &:active { - @include win95-outset(); + box-shadow: inset -0px 0px #000000, + inset 1px 1px 0px #ffffff, + inset -0px 0px #808080, + inset 2px 2px 0px #dfdfdf; + border-radius:0px; } } } .button.button-secondary { - background-color: $win95-bg; + background-color: #bfbfbf; } .column-link { background-color:transparent; color:black; &:hover { - background-color: $win95-window-header; + background-color: #00007f; color:white; } } @@ -1281,9 +1338,11 @@ body.admin { } .column-subheading { - background-color:$win95-bg; + background-color:#bfbfbf; color:black; - @include win95-border-outset-sides-only; + border-left: 2px solid #efefef; + border-right: 2px solid #404040; + border-radius:0px; } .column { @@ -1297,7 +1356,7 @@ body.admin { padding-top:30px; z-index:10; overflow-y:auto; - background-color: $win95-cyan; + background-color: #008080; } .getting-started__wrapper { @@ -1309,8 +1368,8 @@ body.admin { inset 2px 2px 0px #dfdfdf; border-radius:0px; - background-color:$win95-bg; - border-bottom: 2px groove $win95-bg; + background-color:#bfbfbf; + border-bottom: 2px groove #bfbfbf; height: unset !important; @@ -1324,7 +1383,7 @@ body.admin { padding:0px; background-color: transparent; color:black; - border-bottom: 2px groove $win95-bg; + border-bottom: 2px groove #bfbfbf; text-transform: none; } @@ -1361,7 +1420,7 @@ body.admin { width:50px; font-size:16px; padding-left:25px; - background-color:$win95-bg; + background-color:#bfbfbf; z-index:12; background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAOCAIAAACpTQvdAAAACXBIWXMAAC4jAAAuIwF4pT92AAAAF3pUWHRBdXRob3IAAAiZS84oys9LzAEAC5oC6A7BY/IAAACWSURBVCiRhVJJDsQgDEuqOfRZ7a1P5gbP4uaJaEjTADMWQhHYjlk4p0wLnNdptdF4KvBUDyGzVwc2xO+uKtH+1o0ytEEmqFpuxlvFCGCxKbNIT56QCi2MzaA/2Mz+mERSOeqzJG2RUxkjdTabgPtFoZ1bZxcKvgPcLZVufAyR9Ni8v5dWDzfFx0giC1RvZFv6l35QQ/Mvv39XXgGzQpoAAAAASUVORK5CYII="); @@ -1370,7 +1429,11 @@ body.admin { background-clip:padding-box; background-size:auto 50%; - @include win95-border-inset(); + border-left: 2px solid #404040; + border-top: 2px solid #404040; + border-right: 2px solid #efefef; + border-bottom: 2px solid #efefef; + border-radius:0px; } @@ -1392,13 +1455,15 @@ body.admin { } .getting-started__footer { - background-color: $win95-bg; + background-color: #bfbfbf; padding:0px; padding-bottom:10px; position:relative; top:0px; - @include win95-outset-no-highlight(); + box-shadow: inset -0px 0px #000000, + inset -0px 0px #808080; + border-radius:0px; p { margin-left: 45px; @@ -1428,7 +1493,7 @@ body.admin { } &:hover { - background-color: $win95-window-header; + background-color: #00007f; a { color:white; } @@ -1576,7 +1641,7 @@ body.admin { } .keyboard-shortcuts kbd { - background-color: $win95-bg; + background-color: #bfbfbf; } .account__header { @@ -1592,15 +1657,15 @@ body.admin { border-top: 1px solid black; dt { - background-color:$win95-bg; + background-color:#bfbfbf; color:black; border-top: 1px solid #ffffff; - border-bottom: 1px solid $win95-mid-grey; - border-right: 1px solid $win95-mid-grey; + border-bottom: 1px solid #808080; + border-right: 1px solid #808080; } dd { background-color:white; - border: 1px solid $win95-bg; + border: 1px solid #bfbfbf; color:black; } dd,dt { @@ -1609,7 +1674,7 @@ body.admin { } .account-authorize__wrapper { - border: 2px groove $win95-bg; + border: 2px groove #bfbfbf; margin: 2px; padding:2px; } @@ -1619,9 +1684,9 @@ body.admin { } .account--panel { - background-color: $win95-bg; + background-color: #bfbfbf; border:0px; - border-top: 2px groove $win95-bg; + border-top: 2px groove #bfbfbf; } .account-authorize .account__header__content { @@ -1643,25 +1708,43 @@ body.admin { } .account__action-bar__tab { - border: 1px outset $win95-bg; + border: 1px outset #bfbfbf; } .account__action-bar__tab:active { - @include win95-inset(); + box-shadow: inset 1px 1px 0px #000000, + inset -0px 0px #ffffff, + inset 2px 2px 0px #808080, + inset -0px 0px #dfdfdf; + border-width:0px; + border-radius:0px; } .account__section-headline { - background: $win95-bg; + background: #bfbfbf; margin-top: 5px; & > a { - @include win95-tab(); + box-shadow: inset -1px 0px 0px #000000, + inset 1px 0px 0px #ffffff, + inset 0px 1px 0px #ffffff, + inset 0px 2px 0px #dfdfdf, + inset -2px 0px 0px #808080, + inset 2px 0px 0px #dfdfdf; + border-radius:0px; + border-top-left-radius: 1px; + border-top-right-radius: 1px; color: black; padding: 5px; &.active { - background: $win95-bg; - @include win95-inset(); + background: #bfbfbf; + box-shadow: inset 1px 1px 0px #000000, + inset -0px 0px #ffffff, + inset 2px 2px 0px #808080, + inset -0px 0px #dfdfdf; + border-width:0px; + border-radius:0px; color: black; &:before, &:after { @@ -1673,7 +1756,7 @@ body.admin { .dropdown--active .dropdown__content > ul, .dropdown-menu { - background:$win95-tooltip-yellow; + background:#ffffcc; border-radius:0px; border:1px solid black; box-shadow:unset; @@ -1686,11 +1769,11 @@ body.admin { .dropdown-menu__arrow { &.bottom { - border-bottom-color: $win95-tooltip-yellow; + border-bottom-color: #ffffcc; } &.top { - border-top-color: $win95-tooltip-yellow; + border-top-color: #ffffcc; } &:before { @@ -1725,7 +1808,12 @@ body.admin { .dropdown--active .icon-button { color:black; - @include win95-inset(); + box-shadow: inset 1px 1px 0px #000000, + inset -0px 0px #ffffff, + inset 2px 2px 0px #808080, + inset -0px 0px #dfdfdf; + border-width:0px; + border-radius:0px; } .dropdown--active .dropdown__content > ul > li > a { @@ -1807,8 +1895,12 @@ body.admin { .embed-modal, .error-modal, .onboarding-modal, .actions-modal, .boost-modal, .confirmation-modal, .report-modal { - @include win95-outset(); - background:$win95-bg; + box-shadow: inset -0px 0px #000000, + inset 1px 1px 0px #ffffff, + inset -0px 0px #808080, + inset 2px 2px 0px #dfdfdf; + border-radius:0px; + background:#bfbfbf; } .actions-modal::before, @@ -1817,7 +1909,7 @@ body.admin { .report-modal::before { content: "Confirmation"; display:block; - background:$win95-window-header; + background:#00007f; color:white; font-weight:bold; padding-left:2px; @@ -1833,12 +1925,12 @@ body.admin { } .boost-modal__action-bar, .confirmation-modal__action-bar, .report-modal__action-bar { - background:$win95-bg; + background:#bfbfbf; margin-top:-15px; } .embed-modal h4, .error-modal h4, .onboarding-modal h4 { - background:$win95-window-header; + background:#00007f; color:white; font-weight:bold; padding:2px; @@ -1864,7 +1956,12 @@ body.admin { } &:active { - @include win95-inset(); + box-shadow: inset 1px 1px 0px #000000, + inset -0px 0px #ffffff, + inset 2px 2px 0px #808080, + inset -0px 0px #dfdfdf; + border-width:0px; + border-radius:0px; } } } @@ -1873,7 +1970,12 @@ body.admin { .embed-modal .embed-modal__container .embed-modal__html:focus { background:white; color:black; - @include win95-inset(); + box-shadow: inset 1px 1px 0px #000000, + inset -0px 0px #ffffff, + inset 2px 2px 0px #808080, + inset -0px 0px #dfdfdf; + border-width:0px; + border-radius:0px; } .report-modal__target .media-modal__close { @@ -1917,7 +2019,7 @@ body.admin { top:0px; content:"Control Panel"; color:white; - background-color:$win95-window-header; + background-color:#00007f; font-size:13px; font-weight:bold; width:calc(100%); @@ -1930,8 +2032,12 @@ body.admin { .admin-wrapper { position:relative; - background: $win95-bg; - @include win95-outset(); + background: #bfbfbf; + box-shadow: inset -0px 0px #000000, + inset 1px 1px 0px #ffffff, + inset -0px 0px #808080, + inset 2px 2px 0px #dfdfdf; + border-radius:0px; width:70vw; height:80vh; min-height:80vh; @@ -1971,7 +2077,11 @@ body.admin { flex: 1 1 auto; width:calc(100% - 20px); max-width:calc(100% - 20px); - @include win95-border-outset(); + border-left: 2px solid #efefef; + border-top: 2px solid #efefef; + border-right: 2px solid #404040; + border-bottom: 2px solid #404040; + border-radius:0px; position:relative; margin-left:10px; margin-right:10px; @@ -1982,7 +2092,7 @@ body.admin { } .admin-wrapper .content { - background-color: $win95-bg; + background-color: #bfbfbf; width: 100%; max-width:100%; min-height:100%; @@ -1995,7 +2105,7 @@ body.admin { .admin-wrapper .sidebar { position:static; - background: $win95-bg; + background: #bfbfbf; color:black; width: 100%; height:auto; @@ -2012,7 +2122,7 @@ body.admin { } .admin-wrapper .sidebar > ul { - background: $win95-bg; + background: #bfbfbf; margin:0px; margin-left:8px; color:black; @@ -2028,14 +2138,22 @@ body.admin { &#logout { position:absolute; - @include win95-outset(); + box-shadow: inset -0px 0px #000000, + inset 1px 1px 0px #ffffff, + inset -0px 0px #808080, + inset 2px 2px 0px #dfdfdf; + border-radius:0px; right:12px; bottom:10px; } &#web { display:inline-block; - @include win95-outset(); + box-shadow: inset -0px 0px #000000, + inset 1px 1px 0px #ffffff, + inset -0px 0px #808080, + inset 2px 2px 0px #dfdfdf; + border-radius:0px; position:absolute; left: 12px; bottom: 10px; @@ -2043,21 +2161,29 @@ body.admin { & > a { display:inline-block; - @include win95-tab(); + box-shadow: inset -1px 0px 0px #000000, + inset 1px 0px 0px #ffffff, + inset 0px 1px 0px #ffffff, + inset 0px 2px 0px #dfdfdf, + inset -2px 0px 0px #808080, + inset 2px 0px 0px #dfdfdf; + border-radius:0px; + border-top-left-radius: 1px; + border-top-right-radius: 1px; padding:2px 5px; margin:0px; color:black; vertical-align:baseline; &.selected { - background: $win95-bg; + background: #bfbfbf; color:black; padding-top: 4px; padding-bottom:4px; } &:hover { - background: $win95-bg; + background: #bfbfbf; color:black; } } @@ -2071,20 +2197,28 @@ body.admin { z-index:3; & > li { - background: $win95-bg; + background: #bfbfbf; display: inline-block; vertical-align:baseline; & > a { - background: $win95-bg; - @include win95-tab(); + background: #bfbfbf; + box-shadow: inset -1px 0px 0px #000000, + inset 1px 0px 0px #ffffff, + inset 0px 1px 0px #ffffff, + inset 0px 2px 0px #dfdfdf, + inset -2px 0px 0px #808080, + inset 2px 0px 0px #dfdfdf; + border-radius:0px; + border-top-left-radius: 1px; + border-top-right-radius: 1px; color:black; padding:2px 5px; position:relative; z-index:3; &.selected { - background: $win95-bg; + background: #bfbfbf; color:black; padding-bottom:4px; padding-top: 4px; @@ -2105,7 +2239,7 @@ body.admin { } &:hover { - background: $win95-bg; + background: #bfbfbf; color:black; } } @@ -2115,7 +2249,7 @@ body.admin { } .admin-wrapper .sidebar ul .simple-navigation-active-leaf a:hover { - background: $win95-bg; + background: #bfbfbf; } @media screen and (max-width: 1520px) { @@ -2149,7 +2283,7 @@ body.admin { } .flash-message { - background-color:$win95-tooltip-yellow; + background-color:#ffffcc; color:black; border:1px solid black; border-radius:0px; @@ -2161,7 +2295,11 @@ body.admin { .admin-wrapper table { background-color: white; - @include win95-border-slight-inset(); + border-left: 1px solid #404040; + border-top: 1px solid #404040; + border-right: 1px solid #efefef; + border-bottom: 1px solid #efefef; + border-radius:0px; } .admin-wrapper .table th, .table td { @@ -2224,7 +2362,7 @@ a.table-action-link:hover, } .simple_form .hint code { - background: $win95-bg; + background: #bfbfbf; border-radius: 0px; } @@ -2245,7 +2383,11 @@ a.table-action-link:hover, .simple_form textarea { color:black; background-color:white; - @include win95-border-slight-inset(); + border-left: 1px solid #404040; + border-top: 1px solid #404040; + border-right: 1px solid #efefef; + border-bottom: 1px solid #efefef; + border-radius:0px; &:active, &:focus { background-color:white; @@ -2256,19 +2398,23 @@ a.table-action-link:hover, .simple_form .button, .simple_form .block-button { - background: $win95-bg; - @include win95-outset(); + background: #bfbfbf; + box-shadow: inset -0px 0px #000000, + inset 1px 1px 0px #ffffff, + inset -0px 0px #808080, + inset 2px 2px 0px #dfdfdf; + border-radius:0px; color:black; font-weight: normal; &:hover { - background: $win95-bg; + background: #bfbfbf; } } .simple_form .warning, .table-form .warning { - background: $win95-tooltip-yellow; + background: #ffffcc; color:black; box-shadow: unset; text-shadow:unset; @@ -2284,7 +2430,7 @@ a.table-action-link:hover, .simple_form .button.negative, .simple_form .block-button.negative { - background: $win95-bg; + background: #bfbfbf; } .simple_form select { @@ -2294,7 +2440,7 @@ a.table-action-link:hover, } .filters .filter-subset { - border: 2px groove $win95-bg; + border: 2px groove #bfbfbf; padding:2px; } @@ -2340,12 +2486,21 @@ a.table-action-link:hover, } .list-editor { - @include win95-border-outset(); + border-left: 2px solid #efefef; + border-top: 2px solid #efefef; + border-right: 2px solid #404040; + border-bottom: 2px solid #404040; + border-radius:0px; box-shadow: unset; } .list-editor .drawer__inner { - @include win95-inset(); + box-shadow: inset 1px 1px 0px #000000, + inset -0px 0px #ffffff, + inset 2px 2px 0px #808080, + inset -0px 0px #dfdfdf; + border-width:0px; + border-radius:0px; border-radius: 0; } @@ -2370,13 +2525,13 @@ a.table-action-link:hover, .dashboard__counters > div > div, .dashboard__counters > div > a { - background-color: $win95-bg; + background-color: #bfbfbf; border: 1px solid black; border-radius: 1px; color:black; &:hover { - background-color: $win95-bg; + background-color: #bfbfbf; } } @@ -2396,8 +2551,12 @@ a.table-action-link:hover, } .card__bar { - @include win95-outset(); - background-color: $win95-bg; + box-shadow: inset -0px 0px #000000, + inset 1px 1px 0px #ffffff, + inset -0px 0px #808080, + inset 2px 2px 0px #dfdfdf; + border-radius:0px; + background-color: #bfbfbf; .display-name { strong, span { @@ -2410,19 +2569,27 @@ a.table-action-link:hover, /* Public layout stuff */ body { - background: $win95-cyan; + background: #008080; } .public-layout { max-width: 960px; margin:10px auto; - background: $win95-bg; + background: #bfbfbf; padding:0px; - @include win95-outset(); + box-shadow: inset -0px 0px #000000, + inset 1px 1px 0px #ffffff, + inset -0px 0px #808080, + inset 2px 2px 0px #dfdfdf; + border-radius:0px; .header { - background: $win95-window-header; - @include win95-border-outset(); + background: #00007f; + border-left: 2px solid #efefef; + border-top: 2px solid #efefef; + border-right: 2px solid #404040; + border-bottom: 2px solid #404040; + border-radius:0px; height: 22px; margin: 0px; padding:0px; @@ -2433,13 +2600,17 @@ body { } .nav-button { - @include win95-outset(); - background: $win95-bg; + box-shadow: inset -0px 0px #000000, + inset 1px 1px 0px #ffffff, + inset -0px 0px #808080, + inset 2px 2px 0px #dfdfdf; + border-radius:0px; + background: #bfbfbf; color:black; margin: 2px; margin-bottom: 0px; &:hover { - background: $win95-bg; + background: #bfbfbf; color:black; } } @@ -2452,11 +2623,15 @@ body { } .button.logo-button { - @include win95-outset(); - background: $win95-bg; + box-shadow: inset -0px 0px #000000, + inset 1px 1px 0px #ffffff, + inset -0px 0px #808080, + inset 2px 2px 0px #dfdfdf; + border-radius:0px; + background: #bfbfbf; color:black; &:hover { - background: $win95-bg; + background: #bfbfbf; color:black; } svg { @@ -2472,10 +2647,15 @@ body { } .public-account-header { - @include win95-reset(); + box-shadow: unset; + border: 0px solid transparent; padding: 4px; .public-account-header__image { - @include win95-border-slight-inset(); + border-left: 1px solid #404040; + border-top: 1px solid #404040; + border-right: 1px solid #efefef; + border-bottom: 1px solid #efefef; + border-radius:0px; border-radius: 0px; } } @@ -2485,10 +2665,14 @@ body { background: transparent; } .avatar img { - @include win95-border-slight-inset(); + border-left: 1px solid #404040; + border-top: 1px solid #404040; + border-right: 1px solid #efefef; + border-bottom: 1px solid #efefef; + border-radius:0px; filter: saturate(1.8) brightness(1.1); border-radius: 0px; - background: darken($win95-bg, 9.09%); + background: #a8a8a8; } } .public-account-header__extra__links { @@ -2505,7 +2689,7 @@ body { .public-account-header__tabs__name { display: inline-block; position: relative; - background: $win95-tooltip-yellow; + background: #ffffcc; border: 1px solid black; padding: 4px; @@ -2525,7 +2709,7 @@ body { bottom: -20px; width: 0px; height: 0px; - border-left: 20px solid $win95-tooltip-yellow; + border-left: 20px solid #ffffcc; border-bottom: 20px solid transparent; } &:before { @@ -2543,7 +2727,8 @@ body { .public-account-header__tabs__tabs { .details-counters { - @include win95-border-groove(); + border-radius: 0px; + border: 2px groove #bfbfbf; .counter { .counter-number, .counter-label { color: black; @@ -2552,16 +2737,22 @@ body { border-bottom-width: 0px; } &.active { - @include win95-border-slight-inset(); + border-left: 1px solid #404040; + border-top: 1px solid #404040; + border-right: 1px solid #efefef; + border-bottom: 1px solid #efefef; + border-radius:0px; } } } } .public-account-bio { - @include win95-reset(); - @include win95-border-groove(); - background: $win95-bg; + box-shadow: unset; + border: 0px solid transparent; + border-radius: 0px; + border: 2px groove #bfbfbf; + background: #bfbfbf; margin-right: 10px; .account__header__content, .roles { color: black; @@ -2577,7 +2768,7 @@ body { .status__content , .reply-indicator__content { .status__content__spoiler-link { - color: $win95-dark-grey; + color: #404040; } } .account__section-headline { @@ -2600,8 +2791,9 @@ body { .hero-widget { box-shadow: none; - @include win95-border-groove(); - background: $win95-bg; + border-radius: 0px; + border: 2px groove #bfbfbf; + background: #bfbfbf; padding: 8px; margin-right: 10px; margin-top: 10px; @@ -2620,10 +2812,12 @@ body { } .activity-stream { - @include win95-reset(); - @include win95-border-groove(); + box-shadow: unset; + border: 0px solid transparent; + border-radius: 0px; + border: 2px groove #bfbfbf; - background: $win95-bg; + background: #bfbfbf; margin-top: 10px; margin-left: 10px; .entry { @@ -2637,19 +2831,20 @@ body { } .nothing-here { - @include win95-reset(); + box-shadow: unset; + border: 0px solid transparent; background: transparent; color: black; } .flash-message.notice { border: 1px solid black; - background: $win95-tooltip-yellow; + background: #ffffcc; color:black; } .layout-single-column .compose-panel { - background: $win95-bg; + background: #bfbfbf; } .layout-single-column .status__wrapper .status { diff --git a/config/webpack/rules/css.js b/config/webpack/rules/css.js index ad611285538debdf72b64e87c9db333fe6efc90c..7066da56326a0beed068d73f659c5d56c2a90d7e 100644 --- a/config/webpack/rules/css.js +++ b/config/webpack/rules/css.js @@ -1,44 +1,23 @@ const MiniCssExtractPlugin = require("mini-css-extract-plugin"); -const cssLoaders = [ - MiniCssExtractPlugin.loader, +module.exports = [ { - loader: "css-loader", - options: { - sourceMap: true, - importLoaders: 2, - }, - }, - { - loader: "postcss-loader", - options: { - sourceMap: true, - }, - }, -]; - -// Pure CSS files: skip sass-loader -const cssRule = { - test: /\.css$/i, - use: cssLoaders, -}; - -// SCSS files: include sass-loader -const scssRule = { - test: /\.scss$/i, - use: [ - ...cssLoaders, - { - loader: "sass-loader", - options: { - sassOptions: { - includePaths: ["app/javascript"], + test: /\.css$/i, + use: [ + MiniCssExtractPlugin.loader, + { + loader: "css-loader", + options: { + sourceMap: true, + importLoaders: 1, }, - implementation: require("sass"), - sourceMap: true, }, - }, - ], -}; - -module.exports = [cssRule, scssRule]; + { + loader: "postcss-loader", + options: { + sourceMap: true, + }, + }, + ], + }, +]; diff --git a/config/webpacker.yml b/config/webpacker.yml index 7a097047e913039ce4152fd6cbac2905a814050d..8d24257e22688ded5e6cd58ffd844170fcbbee82 100644 --- a/config/webpacker.yml +++ b/config/webpacker.yml @@ -39,11 +39,7 @@ default: &default - .jsx - .ts - .tsx - - .sass - - .scss - .css - - .module.sass - - .module.scss - .module.css - .png - .svg diff --git a/package.json b/package.json index ca21a43c9dbd635b521e918fbd7842b61626f693..005ec589fc23a0a56942ba250507024dc37175eb 100644 --- a/package.json +++ b/package.json @@ -12,17 +12,17 @@ "fix:js": "yarn lint:js --fix", "fix:json": "prettier --write \"**/*.{json,json5}\"", "fix:md": "prettier --write \"**/*.md\"", - "fix:sass": "stylelint --fix \"**/*.{css,scss}\" && prettier --write \"**/*.{css,scss}\"", + "fix:css": "stylelint --fix \"**/*.css\" && prettier --write \"**/*.css\"", "fix:yml": "prettier --write \"**/*.{yaml,yml}\"", - "fix": "yarn fix:js && yarn fix:json && yarn fix:sass && yarn fix:yml", + "fix": "yarn fix:js && yarn fix:json && yarn fix:css && yarn fix:yml", "i18n:extract": "formatjs extract 'app/javascript/**/*.{js,jsx,ts,tsx}' '--ignore=**/*.d.ts' --out-file app/javascript/flavours/glitch/locales/en.json --format config/formatjs-formatter.js", "jest": "cross-env NODE_ENV=test jest", "lint:js": "eslint . --ext=.js,.jsx,.ts,.tsx --cache --report-unused-disable-directives", "lint:json": "prettier --check \"**/*.{json,json5}\"", "lint:md": "prettier --check \"**/*.md\"", - "lint:sass": "stylelint \"**/*.{css,scss}\" && prettier --check \"**/*.{css,scss}\"", + "lint:css": "stylelint \"**/*.css\" && prettier --check \"**/*.css\"", "lint:yml": "prettier --check \"**/*.{yaml,yml}\"", - "lint": "yarn lint:js && yarn lint:json && yarn lint:sass && yarn lint:yml", + "lint": "yarn lint:js && yarn lint:json && yarn lint:css && yarn lint:yml", "postversion": "git push --tags", "prepare": "husky install", "start": "node ./streaming/index.js", @@ -130,8 +130,6 @@ "requestidlecallback": "^0.3.0", "reselect": "^4.1.8", "rimraf": "^5.0.1", - "sass": "^1.62.1", - "sass-loader": "^10.2.0", "stacktrace-js": "^2.0.2", "stringz": "^2.1.0", "substring-trie": "^1.0.2", @@ -214,7 +212,7 @@ "prettier": "3.6.2", "react-test-renderer": "^18.2.0", "stylelint": "^15.10.1", - "stylelint-config-standard-scss": "^11.0.0", + "stylelint-config-standard": "^40.0.0", "typescript": "^5.0.4", "webpack-dev-server": "^4.15.2", "yargs": "^17.7.2" @@ -232,7 +230,7 @@ "*": "prettier --ignore-unknown --write", "Capfile|Gemfile|*.{rb,ruby,ru,rake}": "bundle exec rubocop --force-exclusion -a", "*.{js,jsx,ts,tsx}": "eslint --fix", - "*.{css,scss}": "stylelint --fix" + "*.css": "stylelint --fix" }, "packageManager": "yarn@4.10.3" } diff --git a/scripts/extract-colors-mastodon.js b/scripts/extract-colors-mastodon.js deleted file mode 100644 index de02aa0e8fade80b622110a4a53cbb99862ae0fc..0000000000000000000000000000000000000000 --- a/scripts/extract-colors-mastodon.js +++ /dev/null @@ -1,330 +0,0 @@ -#!/usr/bin/env node -/** - * Extract all SCSS variable values and derived colors for mastodon (vanilla) flavour. - * Reuses the same derived color patterns as glitch, plus mastodon-specific vars. - */ -const sass = require("sass"); -const path = require("path"); - -const stylesDir = path.resolve(__dirname, "../app/javascript/styles/mastodon"); - -// All SCSS variables we need to extract (same as glitch + mastodon-specific) -const baseVars = [ - "black", "white", - "red-600", "red-500", - "blurple-600", "blurple-500", "blurple-400", "blurple-300", - "grey-600", "grey-100", - "success-green", "error-red", "warning-red", "gold-star", "red-bookmark", - "classic-base-color", "classic-primary-color", "classic-secondary-color", "classic-highlight-color", - "base-shadow-color", "base-overlay-background", "base-border-color", - "simple-background-color", "valid-value-color", "error-value-color", - "ui-base-color", "ui-base-lighter-color", "ui-primary-color", "ui-secondary-color", - "ui-highlight-color", "ui-button-color", - "ui-button-background-color", "ui-button-focus-background-color", - "ui-button-focus-outline-color", - "ui-button-secondary-color", "ui-button-secondary-border-color", - "ui-button-secondary-focus-background-color", "ui-button-secondary-focus-color", - "ui-button-tertiary-color", "ui-button-tertiary-border-color", - "ui-button-tertiary-focus-background-color", "ui-button-tertiary-focus-color", - "ui-button-destructive-background-color", "ui-button-destructive-focus-background-color", - "primary-text-color", "darker-text-color", "dark-text-color", - "secondary-text-color", "highlight-text-color", - "action-button-color", "action-button-focus-color", - "passive-text-color", "active-passive-text-color", - "inverted-text-color", "lighter-text-color", "light-text-color", -]; - -// Derived colors: [variable, function, amount] -const derivedColors = [ - ["action-button-color", "lighten", 7], - ["action-button-color", "lighten", 13], - ["darker-text-color", "lighten", 4], - ["darker-text-color", "lighten", 7], - ["darker-text-color", "lighten", 8], - ["darker-text-color", "lighten", 10], - ["dark-text-color", "lighten", 4], - ["dark-text-color", "lighten", 7], - ["error-red", "lighten", 4], - ["error-red", "lighten", 12], - ["error-value-color", "lighten", 12], - ["gold-star", "lighten", 6], - ["gold-star", "lighten", 16], - ["highlight-text-color", "lighten", 4], - ["highlight-text-color", "lighten", 6], - ["highlight-text-color", "lighten", 8], - ["highlight-text-color", "lighten", 13], - ["inverted-text-color", "lighten", 4], - ["inverted-text-color", "lighten", 10], - ["inverted-text-color", "lighten", 15], - ["inverted-text-color", "lighten", 16], - ["lighter-text-color", "lighten", 7], - ["lighter-text-color", "lighten", 20], - ["secondary-text-color", "lighten", 4], - ["secondary-text-color", "lighten", 7], - ["secondary-text-color", "lighten", 8], - ["ui-base-color", "lighten", 2], - ["ui-base-color", "lighten", 3], - ["ui-base-color", "lighten", 4], - ["ui-base-color", "lighten", 5], - ["ui-base-color", "lighten", 6], - ["ui-base-color", "lighten", 8], - ["ui-base-color", "lighten", 11], - ["ui-base-color", "lighten", 12], - ["ui-base-color", "lighten", 13], - ["ui-base-color", "lighten", 14], - ["ui-base-color", "lighten", 16], - ["ui-base-color", "lighten", 18], - ["ui-base-color", "lighten", 20], - ["ui-base-color", "lighten", 26], - ["ui-base-color", "lighten", 27], - ["ui-base-color", "lighten", 29], - ["ui-base-color", "lighten", 30], - ["ui-base-color", "lighten", 33], - ["ui-base-color", "lighten", 34], - ["ui-base-color", "lighten", 50], - ["ui-base-lighter-color", "lighten", 4], - ["ui-base-lighter-color", "lighten", 7], - ["ui-highlight-color", "lighten", 4], - ["ui-highlight-color", "lighten", 8], - ["ui-highlight-color", "lighten", 10], - ["ui-highlight-color", "lighten", 12], - ["ui-primary-color", "lighten", 8], - ["ui-primary-color", "lighten", 12], - ["ui-primary-color", "lighten", 20], - ["ui-secondary-color", "lighten", 6], - ["ui-secondary-color", "lighten", 8], - ["valid-value-color", "lighten", 8], - ["valid-value-color", "lighten", 15], - ["warning-red", "lighten", 12], - ["white", "lighten", 4], - ["white", "lighten", 7], - - // darken calls - ["action-button-color", "darken", 13], - ["darker-text-color", "darken", 13], - ["highlight-text-color", "darken", 4], - ["lighter-text-color", "darken", 4], - ["lighter-text-color", "darken", 7], - ["simple-background-color", "darken", 2], - ["simple-background-color", "darken", 8], - ["simple-background-color", "darken", 14], - ["simple-background-color", "darken", 24], - ["ui-base-color", "darken", 2], - ["ui-base-color", "darken", 4], - ["ui-base-color", "darken", 5], - ["ui-base-color", "darken", 6], - ["ui-base-color", "darken", 7], - ["ui-base-color", "darken", 8], - ["ui-base-color", "darken", 10], - ["ui-base-color", "darken", 12], - ["ui-base-color", "darken", 13], - ["ui-base-color", "darken", 14], - ["ui-base-color", "darken", 20], - ["ui-highlight-color", "darken", 2], - ["ui-highlight-color", "darken", 3], - ["ui-highlight-color", "darken", 5], - ["ui-highlight-color", "darken", 8], - ["ui-primary-color", "darken", 5], - ["ui-primary-color", "darken", 14], - ["ui-primary-color", "darken", 40], - ["ui-secondary-color", "darken", 8], - ["ui-secondary-color", "darken", 10], - ["ui-secondary-color", "darken", 16], - ["ui-secondary-color", "darken", 18], - ["ui-secondary-color", "darken", 24], - - // rgba calls - ["action-button-color", "rgba", 0.15], - ["action-button-color", "rgba", 0.3], - ["base-overlay-background", "rgba", 0], - ["base-overlay-background", "rgba", 0.1], - ["base-overlay-background", "rgba", 0.3], - ["base-overlay-background", "rgba", 0.5], - ["base-overlay-background", "rgba", 0.6], - ["base-overlay-background", "rgba", 0.7], - ["base-overlay-background", "rgba", 0.8], - ["base-overlay-background", "rgba", 0.9], - ["base-shadow-color", "rgba", 0.1], - ["base-shadow-color", "rgba", 0.2], - ["base-shadow-color", "rgba", 0.25], - ["base-shadow-color", "rgba", 0.3], - ["base-shadow-color", "rgba", 0.35], - ["base-shadow-color", "rgba", 0.4], - ["base-shadow-color", "rgba", 0.45], - ["base-shadow-color", "rgba", 0.6], - ["base-shadow-color", "rgba", 0.65], - ["base-shadow-color", "rgba", 0.75], - ["base-shadow-color", "rgba", 0.8], - ["base-shadow-color", "rgba", 0.85], - ["black", "rgba", 0.45], - ["black", "rgba", 0.65], - ["black", "rgba", 0.85], - ["black", "rgba", 0.9], - ["darker-text-color", "rgba", 0.15], - ["darker-text-color", "rgba", 0.3], - ["dark-text-color", "rgba", 0.1], - ["error-red", "rgba", 0.5], - ["error-value-color", "rgba", 0.1], - ["error-value-color", "rgba", 0.5], - ["gold-star", "rgba", 0.15], - ["gold-star", "rgba", 0.25], - ["gold-star", "rgba", 0.3], - ["gold-star", "rgba", 0.5], - ["highlight-text-color", "rgba", 0.15], - ["highlight-text-color", "rgba", 0.25], - ["highlight-text-color", "rgba", 0.3], - ["highlight-text-color", "rgba", 0.4], - ["lighter-text-color", "rgba", 0.15], - ["lighter-text-color", "rgba", 0.3], - ["primary-text-color", "rgba", 0.7], - ["primary-text-color", "rgba", 0.8], - ["success-green", "rgba", 0.1], - ["success-green", "rgba", 0.5], - ["ui-base-color", "rgba", 0], - ["ui-base-color", "rgba", 0.15], - ["ui-base-color", "rgba", 0.25], - ["ui-base-color", "rgba", 0.3], - ["ui-base-color", "rgba", 0.85], - ["ui-base-color", "rgba", 1], - ["ui-base-lighter-color", "rgba", 0.6], - ["ui-highlight-color", "rgba", 0], - ["ui-highlight-color", "rgba", 0.1], - ["ui-highlight-color", "rgba", 0.15], - ["ui-highlight-color", "rgba", 0.23], - ["ui-highlight-color", "rgba", 0.4], - ["ui-highlight-color", "rgba", 0.5], - ["ui-secondary-color", "rgba", 0.1], - ["ui-secondary-color", "rgba", 0.3], - ["ui-secondary-color", "rgba", 0.4], - ["ui-secondary-color", "rgba", 0.5], - ["ui-secondary-color", "rgba", 0.7], - ["valid-value-color", "rgba", 0.25], - ["valid-value-color", "rgba", 0.5], - ["warning-red", "rgba", 0.15], - ["white", "rgba", 0.15], - ["white", "rgba", 0.2], - ["white", "rgba", 0.3], - ["white", "rgba", 0.35], - ["white", "rgba", 0.7], - ["white", "rgba", 0.75], - ["white", "rgba", 0.8], -]; - -// Mix calls -const mixColors = [ - ["mix-ui-base-highlight-95", "mix($ui-base-color, $ui-highlight-color, 95%)"], - ["mix-white-highlight-80", "mix($white, $ui-highlight-color, 80%)"], - ["mix-ui-base-lighten4-highlight-95", "mix(lighten($ui-base-color, 4%), $ui-highlight-color, 95%)"], - ["mix-ui-base-lighten8-highlight-95", "mix(lighten($ui-base-color, 8%), $ui-highlight-color, 95%)"], - ["mix-ui-base-lighten12-highlight-80", "mix(lighten($ui-base-color, 12%), $ui-highlight-color, 80%)"], -]; - -function generateScss(themeImport) { - let scss = ""; - if (themeImport) { - scss += `@import '${themeImport}';\n`; - } - scss += `@import 'variables';\n\n`; - - scss += `:root {\n`; - for (const v of baseVars) { - scss += ` --extract-${v}: #{$${v}};\n`; - } - for (const [varName, fn, amount] of derivedColors) { - if (fn === "lighten") { - scss += ` --extract-${varName}-lighten-${amount}: #{lighten($${varName}, ${amount}%)};\n`; - } else if (fn === "darken") { - scss += ` --extract-${varName}-darken-${amount}: #{darken($${varName}, ${amount}%)};\n`; - } else if (fn === "rgba") { - scss += ` --extract-${varName}-a${Math.round(amount * 100)}: #{rgba($${varName}, ${amount})};\n`; - } - } - for (const [name, expr] of mixColors) { - scss += ` --extract-${name}: #{${expr}};\n`; - } - scss += `}\n`; - return scss; -} - -function rgbToHex(r, g, b) { - return '#' + [r, g, b].map(c => { - const hex = Math.round(c).toString(16).padStart(2, '0'); - return hex; - }).join(''); -} - -function rgbaToHex(r, g, b, a) { - const alpha = Math.round(a * 255).toString(16).padStart(2, '0'); - return rgbToHex(r, g, b) + alpha; -} - -function normalizeColor(value) { - // Convert rgb(r, g, b) to hex - const rgbMatch = value.match(/^rgb\(([\d.]+),\s*([\d.]+),\s*([\d.]+)\)$/); - if (rgbMatch) { - return rgbToHex(parseFloat(rgbMatch[1]), parseFloat(rgbMatch[2]), parseFloat(rgbMatch[3])); - } - // Convert rgba(r, g, b, a) to hex with alpha - const rgbaMatch = value.match(/^rgba\(([\d.]+),\s*([\d.]+),\s*([\d.]+),\s*([\d.]+)\)$/); - if (rgbaMatch) { - return rgbaToHex(parseFloat(rgbaMatch[1]), parseFloat(rgbaMatch[2]), parseFloat(rgbaMatch[3]), parseFloat(rgbaMatch[4])); - } - return value; -} - -function extractValues(css) { - const values = {}; - const regex = /--extract-([\w-]+):\s*([^;]+);/g; - let match; - while ((match = regex.exec(css)) !== null) { - values[match[1]] = normalizeColor(match[2].trim()); - } - return values; -} - -function toCssProperties(values) { - let css = ":root {\n"; - for (const [name, value] of Object.entries(values)) { - css += ` --${name}: ${value};\n`; - } - css += "}\n"; - return css; -} - -const parentDir = path.resolve(stylesDir, ".."); - -const themes = { - dark: null, - light: "../mastodon-light/variables", - contrast: "../contrast/variables", -}; - -const results = {}; - -for (const [name, themeImport] of Object.entries(themes)) { - const scss = generateScss(themeImport); - try { - const result = sass.compileString(scss, { - loadPaths: [stylesDir, parentDir], - }); - results[name] = extractValues(result.css); - } catch (err) { - console.error(`Error compiling ${name} theme:`, err.message); - results[name] = { error: err.message }; - } -} - -// Output as CSS properties files -const fs = require("fs"); -const outDir = stylesDir; - -for (const [name, values] of Object.entries(results)) { - if (values.error) { - console.error(`Skipping ${name}: ${values.error}`); - continue; - } - const suffix = name === "dark" ? "" : `-${name}`; - const filename = `properties${suffix}.css`; - fs.writeFileSync(path.join(outDir, filename), toCssProperties(values)); - console.log(`Wrote ${filename} (${Object.keys(values).length} properties)`); -} diff --git a/scripts/extract-colors.js b/scripts/extract-colors.js deleted file mode 100644 index c2f57d32404b6f14722a574f57626aa78bd75556..0000000000000000000000000000000000000000 --- a/scripts/extract-colors.js +++ /dev/null @@ -1,334 +0,0 @@ -#!/usr/bin/env node -/** - * Extract all SCSS variable values and derived colors for each theme. - * Outputs JSON with pre-calculated hex values for CSS custom properties. - */ -const sass = require("sass"); -const path = require("path"); - -const stylesDir = path.resolve(__dirname, "../app/javascript/flavours/glitch/styles"); - -// All SCSS variables we need to extract -const baseVars = [ - "black", "white", - "red-600", "red-500", - "blurple-600", "blurple-500", "blurple-300", - "grey-600", "grey-100", - "success-green", "error-red", "warning-red", "gold-star", "red-bookmark", - "classic-base-color", "classic-primary-color", "classic-secondary-color", "classic-highlight-color", - "base-shadow-color", "base-overlay-background", "base-border-color", - "simple-background-color", "valid-value-color", "error-value-color", - "ui-base-color", "ui-base-lighter-color", "ui-primary-color", "ui-secondary-color", - "ui-highlight-color", "ui-button-color", - "ui-button-background-color", "ui-button-focus-background-color", - "ui-button-secondary-color", "ui-button-secondary-border-color", - "ui-button-secondary-focus-background-color", "ui-button-secondary-focus-color", - "ui-button-tertiary-color", "ui-button-tertiary-border-color", - "ui-button-tertiary-focus-background-color", "ui-button-tertiary-focus-color", - "ui-button-destructive-background-color", "ui-button-destructive-focus-background-color", - "primary-text-color", "darker-text-color", "dark-text-color", - "secondary-text-color", "highlight-text-color", - "action-button-color", "action-button-focus-color", - "passive-text-color", "active-passive-text-color", - "inverted-text-color", "lighter-text-color", "light-text-color", -]; - -// Derived colors: [variable, function, amount] -// ALL unique lighten/darken/rgba calls found across the SCSS codebase -const derivedColors = [ - // === lighten calls (61 unique) === - // action-button-color - ["action-button-color", "lighten", 7], - ["action-button-color", "lighten", 13], - // darker-text-color - ["darker-text-color", "lighten", 4], - ["darker-text-color", "lighten", 7], - ["darker-text-color", "lighten", 8], - ["darker-text-color", "lighten", 10], - // dark-text-color - ["dark-text-color", "lighten", 4], - ["dark-text-color", "lighten", 7], - // error-red - ["error-red", "lighten", 4], - ["error-red", "lighten", 12], - // error-value-color - ["error-value-color", "lighten", 12], - // gold-star - ["gold-star", "lighten", 6], - ["gold-star", "lighten", 16], - // highlight-text-color - ["highlight-text-color", "lighten", 4], - ["highlight-text-color", "lighten", 6], - ["highlight-text-color", "lighten", 8], - ["highlight-text-color", "lighten", 13], - // inverted-text-color - ["inverted-text-color", "lighten", 4], - ["inverted-text-color", "lighten", 10], - ["inverted-text-color", "lighten", 15], - ["inverted-text-color", "lighten", 16], - // lighter-text-color - ["lighter-text-color", "lighten", 7], - ["lighter-text-color", "lighten", 20], - // secondary-text-color - ["secondary-text-color", "lighten", 4], - ["secondary-text-color", "lighten", 7], - ["secondary-text-color", "lighten", 8], - // ui-base-color - ["ui-base-color", "lighten", 2], - ["ui-base-color", "lighten", 3], - ["ui-base-color", "lighten", 4], - ["ui-base-color", "lighten", 5], - ["ui-base-color", "lighten", 6], - ["ui-base-color", "lighten", 8], - ["ui-base-color", "lighten", 11], - ["ui-base-color", "lighten", 12], - ["ui-base-color", "lighten", 13], - ["ui-base-color", "lighten", 14], - ["ui-base-color", "lighten", 16], - ["ui-base-color", "lighten", 20], - ["ui-base-color", "lighten", 26], - ["ui-base-color", "lighten", 27], - ["ui-base-color", "lighten", 29], - ["ui-base-color", "lighten", 30], - ["ui-base-color", "lighten", 33], - ["ui-base-color", "lighten", 34], - ["ui-base-color", "lighten", 50], - // ui-base-lighter-color - ["ui-base-lighter-color", "lighten", 4], - ["ui-base-lighter-color", "lighten", 7], - // ui-highlight-color - ["ui-highlight-color", "lighten", 4], - ["ui-highlight-color", "lighten", 8], - ["ui-highlight-color", "lighten", 10], - ["ui-highlight-color", "lighten", 12], - // ui-primary-color - ["ui-primary-color", "lighten", 8], - ["ui-primary-color", "lighten", 12], - ["ui-primary-color", "lighten", 20], - // ui-secondary-color - ["ui-secondary-color", "lighten", 6], - ["ui-secondary-color", "lighten", 8], - // valid-value-color - ["valid-value-color", "lighten", 8], - ["valid-value-color", "lighten", 15], - // warning-red - ["warning-red", "lighten", 12], - // white - ["white", "lighten", 4], - ["white", "lighten", 7], - - // === darken calls (33 unique) === - // action-button-color - ["action-button-color", "darken", 13], - // darker-text-color - ["darker-text-color", "darken", 13], - // highlight-text-color - ["highlight-text-color", "darken", 4], - // lighter-text-color - ["lighter-text-color", "darken", 4], - ["lighter-text-color", "darken", 7], - // simple-background-color - ["simple-background-color", "darken", 2], - ["simple-background-color", "darken", 8], - ["simple-background-color", "darken", 14], - ["simple-background-color", "darken", 24], - // ui-base-color - ["ui-base-color", "darken", 2], - ["ui-base-color", "darken", 4], - ["ui-base-color", "darken", 5], - ["ui-base-color", "darken", 6], - ["ui-base-color", "darken", 7], - ["ui-base-color", "darken", 8], - ["ui-base-color", "darken", 10], - ["ui-base-color", "darken", 12], - ["ui-base-color", "darken", 13], - ["ui-base-color", "darken", 14], - ["ui-base-color", "darken", 20], - // ui-highlight-color - ["ui-highlight-color", "darken", 2], - ["ui-highlight-color", "darken", 3], - ["ui-highlight-color", "darken", 5], - ["ui-highlight-color", "darken", 8], - // ui-primary-color - ["ui-primary-color", "darken", 5], - ["ui-primary-color", "darken", 14], - ["ui-primary-color", "darken", 40], - // ui-secondary-color - ["ui-secondary-color", "darken", 8], - ["ui-secondary-color", "darken", 10], - ["ui-secondary-color", "darken", 16], - ["ui-secondary-color", "darken", 18], - ["ui-secondary-color", "darken", 24], - - // === rgba calls (74 unique) === - // action-button-color - ["action-button-color", "rgba", 0.15], - ["action-button-color", "rgba", 0.3], - // base-overlay-background - ["base-overlay-background", "rgba", 0], - ["base-overlay-background", "rgba", 0.1], - ["base-overlay-background", "rgba", 0.3], - ["base-overlay-background", "rgba", 0.5], - ["base-overlay-background", "rgba", 0.6], - ["base-overlay-background", "rgba", 0.7], - ["base-overlay-background", "rgba", 0.8], - ["base-overlay-background", "rgba", 0.9], - // base-shadow-color - ["base-shadow-color", "rgba", 0.1], - ["base-shadow-color", "rgba", 0.2], - ["base-shadow-color", "rgba", 0.25], - ["base-shadow-color", "rgba", 0.3], - ["base-shadow-color", "rgba", 0.35], - ["base-shadow-color", "rgba", 0.4], - ["base-shadow-color", "rgba", 0.45], - ["base-shadow-color", "rgba", 0.6], - ["base-shadow-color", "rgba", 0.65], - ["base-shadow-color", "rgba", 0.75], - ["base-shadow-color", "rgba", 0.8], - ["base-shadow-color", "rgba", 0.85], - // black - ["black", "rgba", 0.45], - ["black", "rgba", 0.65], - ["black", "rgba", 0.85], - ["black", "rgba", 0.9], - // darker-text-color - ["darker-text-color", "rgba", 0.15], - ["darker-text-color", "rgba", 0.3], - // dark-text-color - ["dark-text-color", "rgba", 0.1], - // error-red - ["error-red", "rgba", 0.5], - // error-value-color - ["error-value-color", "rgba", 0.1], - ["error-value-color", "rgba", 0.5], - // gold-star - ["gold-star", "rgba", 0.15], - ["gold-star", "rgba", 0.25], - ["gold-star", "rgba", 0.3], - ["gold-star", "rgba", 0.5], - // highlight-text-color - ["highlight-text-color", "rgba", 0.15], - ["highlight-text-color", "rgba", 0.25], - ["highlight-text-color", "rgba", 0.3], - ["highlight-text-color", "rgba", 0.4], - // lighter-text-color - ["lighter-text-color", "rgba", 0.15], - ["lighter-text-color", "rgba", 0.3], - // primary-text-color - ["primary-text-color", "rgba", 0.7], - ["primary-text-color", "rgba", 0.8], - // success-green - ["success-green", "rgba", 0.1], - ["success-green", "rgba", 0.5], - // ui-base-color - ["ui-base-color", "rgba", 0], - ["ui-base-color", "rgba", 0.15], - ["ui-base-color", "rgba", 0.25], - ["ui-base-color", "rgba", 0.3], - ["ui-base-color", "rgba", 0.85], - ["ui-base-color", "rgba", 1], - // ui-base-lighter-color - ["ui-base-lighter-color", "rgba", 0.6], - // ui-highlight-color - ["ui-highlight-color", "rgba", 0], - ["ui-highlight-color", "rgba", 0.1], - ["ui-highlight-color", "rgba", 0.15], - ["ui-highlight-color", "rgba", 0.23], - ["ui-highlight-color", "rgba", 0.4], - ["ui-highlight-color", "rgba", 0.5], - // ui-secondary-color - ["ui-secondary-color", "rgba", 0.1], - ["ui-secondary-color", "rgba", 0.3], - ["ui-secondary-color", "rgba", 0.4], - ["ui-secondary-color", "rgba", 0.5], - ["ui-secondary-color", "rgba", 0.7], - // valid-value-color - ["valid-value-color", "rgba", 0.25], - ["valid-value-color", "rgba", 0.5], - // warning-red - ["warning-red", "rgba", 0.15], - // white - ["white", "rgba", 0.15], - ["white", "rgba", 0.2], - ["white", "rgba", 0.3], - ["white", "rgba", 0.35], - ["white", "rgba", 0.7], - ["white", "rgba", 0.75], - ["white", "rgba", 0.8], -]; - -// Mix calls: [name, scssExpression] -const mixColors = [ - ["mix-ui-base-highlight-95", "mix($ui-base-color, $ui-highlight-color, 95%)"], - ["mix-white-highlight-80", "mix($white, $ui-highlight-color, 80%)"], - ["mix-ui-base-lighten4-highlight-95", "mix(lighten($ui-base-color, 4%), $ui-highlight-color, 95%)"], - ["mix-ui-base-lighten8-highlight-95", "mix(lighten($ui-base-color, 8%), $ui-highlight-color, 95%)"], - ["mix-ui-base-lighten12-highlight-80", "mix(lighten($ui-base-color, 12%), $ui-highlight-color, 80%)"], -]; - -function generateScss(themeImport) { - let scss = ""; - if (themeImport) { - scss += `@import '${themeImport}';\n`; - } - scss += `@import 'variables';\n\n`; - - // Output base variables - scss += `:root {\n`; - for (const v of baseVars) { - scss += ` --extract-${v}: #{$${v}};\n`; - } - - // Output derived colors - for (const [varName, fn, amount] of derivedColors) { - if (fn === "lighten") { - scss += ` --extract-${varName}-lighten-${amount}: #{lighten($${varName}, ${amount}%)};\n`; - } else if (fn === "darken") { - scss += ` --extract-${varName}-darken-${amount}: #{darken($${varName}, ${amount}%)};\n`; - } else if (fn === "rgba") { - scss += ` --extract-${varName}-a${Math.round(amount * 100)}: #{rgba($${varName}, ${amount})};\n`; - } - } - - // Output mix colors - for (const [name, expr] of mixColors) { - scss += ` --extract-${name}: #{${expr}};\n`; - } - - scss += `}\n`; - - return scss; -} - -function extractValues(css) { - const values = {}; - const regex = /--extract-([\w-]+):\s*([^;]+);/g; - let match; - while ((match = regex.exec(css)) !== null) { - values[match[1]] = match[2].trim(); - } - return values; -} - -const themes = { - dark: null, - light: "mastodon-light/variables", - contrast: "contrast/variables", -}; - -const results = {}; - -for (const [name, themeImport] of Object.entries(themes)) { - const scss = generateScss(themeImport); - try { - const result = sass.compileString(scss, { - loadPaths: [stylesDir, path.resolve(__dirname, "../app/javascript")], - }); - results[name] = extractValues(result.css); - } catch (err) { - console.error(`Error compiling ${name} theme:`, err.message); - results[name] = { error: err.message }; - } -} - -console.log(JSON.stringify(results, null, 2)); diff --git a/stylelint.config.js b/stylelint.config.js index a1044ebf242465d3ee766c96daaa33092ba2fe59..e67b4e84573311d3380c6ff8f69ee150a8a5fcec 100644 --- a/stylelint.config.js +++ b/stylelint.config.js @@ -1,9 +1,9 @@ module.exports = { - extends: ["stylelint-config-standard-scss"], + extends: ["stylelint-config-standard"], ignoreFiles: [ - "app/javascript/styles/mastodon/reset.scss", - "app/javascript/flavours/glitch/styles/reset.scss", - "app/javascript/styles/win95.scss", + "app/javascript/styles/mastodon/reset.css", + "app/javascript/flavours/glitch/styles/reset.css", + "app/javascript/styles/win95.css", "coverage/**/*", "node_modules/**/*", "public/assets/**/*", @@ -27,13 +27,10 @@ module.exports = { "selector-id-pattern": null, "value-keyword-case": null, "value-no-vendor-prefix": null, - - "scss/dollar-variable-empty-line-before": null, - "scss/no-global-function-names": null, }, overrides: [ { - "files": ["app/javascript/styles/mailer.scss"], + "files": ["app/javascript/styles/mailer.css"], rules: { "property-no-unknown": [ true, diff --git a/yarn.lock b/yarn.lock index 561ad776f1dac3ddb50c6178bee26e73f4714b96..9433a20dc185de64e148eb7f7e7869b742b2127e 100644 --- a/yarn.lock +++ b/yarn.lock @@ -2570,12 +2570,10 @@ __metadata: requestidlecallback: "npm:^0.3.0" reselect: "npm:^4.1.8" rimraf: "npm:^5.0.1" - sass: "npm:^1.62.1" - sass-loader: "npm:^10.2.0" stacktrace-js: "npm:^2.0.2" stringz: "npm:^2.1.0" stylelint: "npm:^15.10.1" - stylelint-config-standard-scss: "npm:^11.0.0" + stylelint-config-standard: "npm:^40.0.0" substring-trie: "npm:^1.0.2" terser-webpack-plugin: "npm:^5.0.0" tesseract.js: "npm:^2.1.5" @@ -2702,150 +2700,6 @@ __metadata: languageName: node linkType: hard -"@parcel/watcher-android-arm64@npm:2.5.1": - version: 2.5.1 - resolution: "@parcel/watcher-android-arm64@npm:2.5.1" - conditions: os=android & cpu=arm64 - languageName: node - linkType: hard - -"@parcel/watcher-darwin-arm64@npm:2.5.1": - version: 2.5.1 - resolution: "@parcel/watcher-darwin-arm64@npm:2.5.1" - conditions: os=darwin & cpu=arm64 - languageName: node - linkType: hard - -"@parcel/watcher-darwin-x64@npm:2.5.1": - version: 2.5.1 - resolution: "@parcel/watcher-darwin-x64@npm:2.5.1" - conditions: os=darwin & cpu=x64 - languageName: node - linkType: hard - -"@parcel/watcher-freebsd-x64@npm:2.5.1": - version: 2.5.1 - resolution: "@parcel/watcher-freebsd-x64@npm:2.5.1" - conditions: os=freebsd & cpu=x64 - languageName: node - linkType: hard - -"@parcel/watcher-linux-arm-glibc@npm:2.5.1": - version: 2.5.1 - resolution: "@parcel/watcher-linux-arm-glibc@npm:2.5.1" - conditions: os=linux & cpu=arm & libc=glibc - languageName: node - linkType: hard - -"@parcel/watcher-linux-arm-musl@npm:2.5.1": - version: 2.5.1 - resolution: "@parcel/watcher-linux-arm-musl@npm:2.5.1" - conditions: os=linux & cpu=arm & libc=musl - languageName: node - linkType: hard - -"@parcel/watcher-linux-arm64-glibc@npm:2.5.1": - version: 2.5.1 - resolution: "@parcel/watcher-linux-arm64-glibc@npm:2.5.1" - conditions: os=linux & cpu=arm64 & libc=glibc - languageName: node - linkType: hard - -"@parcel/watcher-linux-arm64-musl@npm:2.5.1": - version: 2.5.1 - resolution: "@parcel/watcher-linux-arm64-musl@npm:2.5.1" - conditions: os=linux & cpu=arm64 & libc=musl - languageName: node - linkType: hard - -"@parcel/watcher-linux-x64-glibc@npm:2.5.1": - version: 2.5.1 - resolution: "@parcel/watcher-linux-x64-glibc@npm:2.5.1" - conditions: os=linux & cpu=x64 & libc=glibc - languageName: node - linkType: hard - -"@parcel/watcher-linux-x64-musl@npm:2.5.1": - version: 2.5.1 - resolution: "@parcel/watcher-linux-x64-musl@npm:2.5.1" - conditions: os=linux & cpu=x64 & libc=musl - languageName: node - linkType: hard - -"@parcel/watcher-win32-arm64@npm:2.5.1": - version: 2.5.1 - resolution: "@parcel/watcher-win32-arm64@npm:2.5.1" - conditions: os=win32 & cpu=arm64 - languageName: node - linkType: hard - -"@parcel/watcher-win32-ia32@npm:2.5.1": - version: 2.5.1 - resolution: "@parcel/watcher-win32-ia32@npm:2.5.1" - conditions: os=win32 & cpu=ia32 - languageName: node - linkType: hard - -"@parcel/watcher-win32-x64@npm:2.5.1": - version: 2.5.1 - resolution: "@parcel/watcher-win32-x64@npm:2.5.1" - conditions: os=win32 & cpu=x64 - languageName: node - linkType: hard - -"@parcel/watcher@npm:^2.4.1": - version: 2.5.1 - resolution: "@parcel/watcher@npm:2.5.1" - dependencies: - "@parcel/watcher-android-arm64": "npm:2.5.1" - "@parcel/watcher-darwin-arm64": "npm:2.5.1" - "@parcel/watcher-darwin-x64": "npm:2.5.1" - "@parcel/watcher-freebsd-x64": "npm:2.5.1" - "@parcel/watcher-linux-arm-glibc": "npm:2.5.1" - "@parcel/watcher-linux-arm-musl": "npm:2.5.1" - "@parcel/watcher-linux-arm64-glibc": "npm:2.5.1" - "@parcel/watcher-linux-arm64-musl": "npm:2.5.1" - "@parcel/watcher-linux-x64-glibc": "npm:2.5.1" - "@parcel/watcher-linux-x64-musl": "npm:2.5.1" - "@parcel/watcher-win32-arm64": "npm:2.5.1" - "@parcel/watcher-win32-ia32": "npm:2.5.1" - "@parcel/watcher-win32-x64": "npm:2.5.1" - detect-libc: "npm:^1.0.3" - is-glob: "npm:^4.0.3" - micromatch: "npm:^4.0.5" - node-addon-api: "npm:^7.0.0" - node-gyp: "npm:latest" - dependenciesMeta: - "@parcel/watcher-android-arm64": - optional: true - "@parcel/watcher-darwin-arm64": - optional: true - "@parcel/watcher-darwin-x64": - optional: true - "@parcel/watcher-freebsd-x64": - optional: true - "@parcel/watcher-linux-arm-glibc": - optional: true - "@parcel/watcher-linux-arm-musl": - optional: true - "@parcel/watcher-linux-arm64-glibc": - optional: true - "@parcel/watcher-linux-arm64-musl": - optional: true - "@parcel/watcher-linux-x64-glibc": - optional: true - "@parcel/watcher-linux-x64-musl": - optional: true - "@parcel/watcher-win32-arm64": - optional: true - "@parcel/watcher-win32-ia32": - optional: true - "@parcel/watcher-win32-x64": - optional: true - checksum: 10c0/8f35073d0c0b34a63d4c8d2213482f0ebc6a25de7b2cdd415d19cb929964a793cb285b68d1d50bfb732b070b3c82a2fdb4eb9c250eab709a1cd9d63345455a82 - languageName: node - linkType: hard - "@pkgjs/parseargs@npm:^0.11.0": version: 0.11.0 resolution: "@pkgjs/parseargs@npm:0.11.0" @@ -5611,15 +5465,6 @@ __metadata: languageName: node linkType: hard -"chokidar@npm:^4.0.0": - version: 4.0.3 - resolution: "chokidar@npm:4.0.3" - dependencies: - readdirp: "npm:^4.0.1" - checksum: 10c0/a58b9df05bb452f7d105d9e7229ac82fa873741c0c40ddcc7bb82f8a909fbe3f7814c9ebe9bc9a2bef9b737c0ec6e2d699d179048ef06ad3ec46315df0ebe6ad - languageName: node - linkType: hard - "chownr@npm:^2.0.0": version: 2.0.0 resolution: "chownr@npm:2.0.0" @@ -6611,15 +6456,6 @@ __metadata: languageName: node linkType: hard -"detect-libc@npm:^1.0.3": - version: 1.0.3 - resolution: "detect-libc@npm:1.0.3" - bin: - detect-libc: ./bin/detect-libc.js - checksum: 10c0/4da0deae9f69e13bc37a0902d78bf7169480004b1fed3c19722d56cff578d16f0e11633b7fbf5fb6249181236c72e90024cbd68f0b9558ae06e281f47326d50d - languageName: node - linkType: hard - "detect-newline@npm:^3.0.0": version: 3.1.0 resolution: "detect-newline@npm:3.1.0" @@ -8857,13 +8693,6 @@ __metadata: languageName: node linkType: hard -"immutable@npm:^5.0.2": - version: 5.1.3 - resolution: "immutable@npm:5.1.3" - checksum: 10c0/f094891dcefb9488a84598376c9218ebff3a130c8b807bda3f6b703c45fe7ef238b8bf9a1eb9961db0523c8d7eb116ab6f47166702e4bbb1927ff5884157cd97 - languageName: node - linkType: hard - "import-fresh@npm:^3.2.1, import-fresh@npm:^3.3.0": version: 3.3.1 resolution: "import-fresh@npm:3.3.1" @@ -11263,15 +11092,6 @@ __metadata: languageName: node linkType: hard -"node-addon-api@npm:^7.0.0": - version: 7.1.1 - resolution: "node-addon-api@npm:7.1.1" - dependencies: - node-gyp: "npm:latest" - checksum: 10c0/fb32a206276d608037fa1bcd7e9921e177fe992fc610d098aa3128baca3c0050fc1e014fa007e9b3874cf865ddb4f5bd9f43ccb7cbbbe4efaff6a83e920b17e9 - languageName: node - linkType: hard - "node-fetch@npm:^2.6.0": version: 2.7.0 resolution: "node-fetch@npm:2.7.0" @@ -12099,13 +11919,6 @@ __metadata: languageName: node linkType: hard -"postcss-media-query-parser@npm:^0.2.3": - version: 0.2.3 - resolution: "postcss-media-query-parser@npm:0.2.3" - checksum: 10c0/252c8cf24f0e9018516b0d70b7b3d6f5b52e81c4bab2164b49a4e4c1b87bb11f5dbe708c0076990665cb24c70d5fd2f3aee9c922b0f67c7c619e051801484688 - languageName: node - linkType: hard - "postcss-merge-longhand@npm:^6.0.5": version: 6.0.5 resolution: "postcss-merge-longhand@npm:6.0.5" @@ -12373,15 +12186,6 @@ __metadata: languageName: node linkType: hard -"postcss-scss@npm:^4.0.9": - version: 4.0.9 - resolution: "postcss-scss@npm:4.0.9" - peerDependencies: - postcss: ^8.4.29 - checksum: 10c0/f917ecfd4b9113a6648e966a41f027ff7e14238393914978d44596e227a50f084667dc8818742348dc7d8b20130b30d4259aca1d4db86754a9c141202ae03714 - languageName: node - linkType: hard - "postcss-selector-parser@npm:^6.0.11, postcss-selector-parser@npm:^6.0.13, postcss-selector-parser@npm:^6.0.16": version: 6.1.2 resolution: "postcss-selector-parser@npm:6.1.2" @@ -13191,13 +12995,6 @@ __metadata: languageName: node linkType: hard -"readdirp@npm:^4.0.1": - version: 4.1.2 - resolution: "readdirp@npm:4.1.2" - checksum: 10c0/60a14f7619dec48c9c850255cd523e2717001b0e179dc7037cfa0895da7b9e9ab07532d324bfb118d73a710887d1e35f79c495fa91582784493e085d18c72c62 - languageName: node - linkType: hard - "readdirp@npm:~3.6.0": version: 3.6.0 resolution: "readdirp@npm:3.6.0" @@ -13668,48 +13465,6 @@ __metadata: languageName: node linkType: hard -"sass-loader@npm:^10.2.0": - version: 10.5.2 - resolution: "sass-loader@npm:10.5.2" - dependencies: - klona: "npm:^2.0.4" - loader-utils: "npm:^2.0.0" - neo-async: "npm:^2.6.2" - schema-utils: "npm:^3.0.0" - semver: "npm:^7.3.2" - peerDependencies: - fibers: ">= 3.1.0" - node-sass: ^4.0.0 || ^5.0.0 || ^6.0.0 || ^7.0.0 || ^8.0.0 || ^9.0.0 - sass: ^1.3.0 - webpack: ^4.36.0 || ^5.0.0 - peerDependenciesMeta: - fibers: - optional: true - node-sass: - optional: true - sass: - optional: true - checksum: 10c0/5ba4a83459fbb50e21d4f4b1b59baf1ddf8dd404099b6d1f2ec887c6903659e505879915030dd9efb1c6dd5fde2d515a19f418487b73d1cc59f6aad60c79bcf5 - languageName: node - linkType: hard - -"sass@npm:^1.62.1": - version: 1.93.2 - resolution: "sass@npm:1.93.2" - dependencies: - "@parcel/watcher": "npm:^2.4.1" - chokidar: "npm:^4.0.0" - immutable: "npm:^5.0.2" - source-map-js: "npm:>=0.6.2 <2.0.0" - dependenciesMeta: - "@parcel/watcher": - optional: true - bin: - sass: sass.js - checksum: 10c0/5a19f12dbe8c142e40c1e0473d1e624898242b1c21010301e169b528be8c580df6356329c798522b525eb11eda4b04b9b77422badc55c47889600f8477201d2b - languageName: node - linkType: hard - "sax@npm:~1.2.4": version: 1.2.4 resolution: "sax@npm:1.2.4" @@ -13805,7 +13560,7 @@ __metadata: languageName: node linkType: hard -"semver@npm:^7.3.2, semver@npm:^7.3.4, semver@npm:^7.3.5, semver@npm:^7.5.3, semver@npm:^7.5.4, semver@npm:^7.6.0, semver@npm:^7.7.1, semver@npm:^7.7.2, semver@npm:^7.7.3": +"semver@npm:^7.3.4, semver@npm:^7.3.5, semver@npm:^7.5.3, semver@npm:^7.5.4, semver@npm:^7.6.0, semver@npm:^7.7.1, semver@npm:^7.7.2, semver@npm:^7.7.3": version: 7.7.3 resolution: "semver@npm:7.7.3" bin: @@ -14138,7 +13893,7 @@ __metadata: languageName: node linkType: hard -"source-map-js@npm:>=0.6.2 <2.0.0, source-map-js@npm:^1.0.1, source-map-js@npm:^1.2.1": +"source-map-js@npm:^1.0.1, source-map-js@npm:^1.2.1": version: 1.2.1 resolution: "source-map-js@npm:1.2.1" checksum: 10c0/7bda1fc4c197e3c6ff17de1b8b2c20e60af81b63a52cb32ec5a5d67a20a7d42651e2cb34ebe93833c5a2a084377e17455854fee3e21e7925c64a51b6a52b0faf @@ -14655,71 +14410,23 @@ __metadata: languageName: node linkType: hard -"stylelint-config-recommended-scss@npm:^13.1.0": - version: 13.1.0 - resolution: "stylelint-config-recommended-scss@npm:13.1.0" - dependencies: - postcss-scss: "npm:^4.0.9" - stylelint-config-recommended: "npm:^13.0.0" - stylelint-scss: "npm:^5.3.0" +"stylelint-config-recommended@npm:^18.0.0": + version: 18.0.0 + resolution: "stylelint-config-recommended@npm:18.0.0" peerDependencies: - postcss: ^8.3.3 - stylelint: ^15.10.0 - peerDependenciesMeta: - postcss: - optional: true - checksum: 10c0/e07d0172c7936b4f644138e4129df2f187d297f1f96ce5865ab21ccd1c22caf94220f7caf9d6985e93e515de4c0356f6cb9c924d00df2eee5b3bc237f7e5bb48 + stylelint: ^17.0.0 + checksum: 10c0/c7f8ff45c76ec23f4c8c0438894726976fd5e872c59d489f959b728d9879bba20dbf0040cd29ad3bbc00eb32befd95f5b6ca150002bb8aea74b0797bc42ccc17 languageName: node linkType: hard -"stylelint-config-recommended@npm:^13.0.0": - version: 13.0.0 - resolution: "stylelint-config-recommended@npm:13.0.0" - peerDependencies: - stylelint: ^15.10.0 - checksum: 10c0/80420a1ab616e8637b66223f88c597388990d9991cd6a28b8372049b83329d893412f83029bb253a82b52387e497b62e042bc898064a2f22574b0d8921f01dd2 - languageName: node - linkType: hard - -"stylelint-config-standard-scss@npm:^11.0.0": - version: 11.1.0 - resolution: "stylelint-config-standard-scss@npm:11.1.0" - dependencies: - stylelint-config-recommended-scss: "npm:^13.1.0" - stylelint-config-standard: "npm:^34.0.0" - peerDependencies: - postcss: ^8.3.3 - stylelint: ^15.10.0 - peerDependenciesMeta: - postcss: - optional: true - checksum: 10c0/22d00e75c1eacce9883fd48c3d67b1107b0e39d7d86e9f73deaa332b11c39a9678c947ae2c34cd5159a452ec9a857694ed58b5a851087480d3c9a66dab629415 - languageName: node - linkType: hard - -"stylelint-config-standard@npm:^34.0.0": - version: 34.0.0 - resolution: "stylelint-config-standard@npm:34.0.0" +"stylelint-config-standard@npm:^40.0.0": + version: 40.0.0 + resolution: "stylelint-config-standard@npm:40.0.0" dependencies: - stylelint-config-recommended: "npm:^13.0.0" - peerDependencies: - stylelint: ^15.10.0 - checksum: 10c0/2494468af2359490b6ebb9723d9653f9e31db3a0772b8d9f0e081018b0079ef84ae6f90dcf94c879a3c374f299e334941e3dcff1afb603c2284d3103085b71fb - languageName: node - linkType: hard - -"stylelint-scss@npm:^5.3.0": - version: 5.3.2 - resolution: "stylelint-scss@npm:5.3.2" - dependencies: - known-css-properties: "npm:^0.29.0" - postcss-media-query-parser: "npm:^0.2.3" - postcss-resolve-nested-selector: "npm:^0.1.1" - postcss-selector-parser: "npm:^6.0.13" - postcss-value-parser: "npm:^4.2.0" + stylelint-config-recommended: "npm:^18.0.0" peerDependencies: - stylelint: ^14.5.1 || ^15.0.0 - checksum: 10c0/d2cf3c9b3d2fad386f781ddf8056cdc12794048809f1f9dd7b87dba28c908ff37a9fb21f0fb6681a53cdbbe58614178a6ff78dce93180d3c4738144e0cf34062 + stylelint: ^17.0.0 + checksum: 10c0/d8942552d53a3afda59b64d0c49503bb626fe5cef39a9e8c9583fcd60869f21431125ef4480ff27a59f7f2cf0da8af810d377129ef1d670ddc5def4defe2880c languageName: node linkType: hard