M app/javascript/core/mailer.js => app/javascript/core/mailer.js +1 -1
@@ 1,3 1,3 @@
-import "../styles/mailer.scss";
+import "../styles/mailer.css";
require.context("../icons");
M app/javascript/flavours/glitch/packs/common.js => app/javascript/flavours/glitch/packs/common.js +1 -1
@@ 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();
M app/javascript/flavours/glitch/packs/login.js => app/javascript/flavours/glitch/packs/login.js +1 -1
@@ 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();
R app/javascript/flavours/glitch/styles/about.scss => app/javascript/flavours/glitch/styles/about.css +0 -0
R app/javascript/flavours/glitch/styles/accessibility.scss => app/javascript/flavours/glitch/styles/accessibility.css +1 -1
@@ 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;
R app/javascript/flavours/glitch/styles/accounts.scss => app/javascript/flavours/glitch/styles/accounts.css +1 -1
@@ 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);
R app/javascript/flavours/glitch/styles/admin.scss => app/javascript/flavours/glitch/styles/admin.css +0 -0
R app/javascript/flavours/glitch/styles/basics.scss => app/javascript/flavours/glitch/styles/basics.css +16 -16
@@ 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 {
R app/javascript/flavours/glitch/styles/branding.scss => app/javascript/flavours/glitch/styles/branding.css +0 -0
R app/javascript/flavours/glitch/styles/components/about.scss => app/javascript/flavours/glitch/styles/components/about.css +0 -0
R app/javascript/flavours/glitch/styles/components/accounts.scss => app/javascript/flavours/glitch/styles/components/accounts.css +0 -0
R app/javascript/flavours/glitch/styles/components/announcements.scss => app/javascript/flavours/glitch/styles/components/announcements.css +0 -0
R app/javascript/flavours/glitch/styles/components/bookmark_folders.scss => app/javascript/flavours/glitch/styles/components/bookmark_folders.css +0 -0
R app/javascript/flavours/glitch/styles/components/boost.scss => app/javascript/flavours/glitch/styles/components/boost.css +0 -0
R app/javascript/flavours/glitch/styles/components/columns.scss => app/javascript/flavours/glitch/styles/components/columns.css +0 -0
R app/javascript/flavours/glitch/styles/components/compose_form.scss => app/javascript/flavours/glitch/styles/components/compose_form.css +1 -1
@@ 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;
}
}
R app/javascript/flavours/glitch/styles/components/directory.scss => app/javascript/flavours/glitch/styles/components/directory.css +0 -0
R app/javascript/flavours/glitch/styles/components/domains.scss => app/javascript/flavours/glitch/styles/components/domains.css +0 -0
R app/javascript/flavours/glitch/styles/components/doodle.scss => app/javascript/flavours/glitch/styles/components/doodle.css +1 -1
@@ 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;
}
R app/javascript/flavours/glitch/styles/components/drawer.scss => app/javascript/flavours/glitch/styles/components/drawer.css +0 -0
R app/javascript/flavours/glitch/styles/components/emoji.scss => app/javascript/flavours/glitch/styles/components/emoji.css +0 -0
R app/javascript/flavours/glitch/styles/components/emoji_picker.scss => app/javascript/flavours/glitch/styles/components/emoji_picker.css +1 -1
@@ 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;
R app/javascript/flavours/glitch/styles/components/explore.scss => app/javascript/flavours/glitch/styles/components/explore.css +0 -0
R app/javascript/flavours/glitch/styles/components/index.scss => app/javascript/flavours/glitch/styles/components/index.css +0 -0
R app/javascript/flavours/glitch/styles/components/lists.scss => app/javascript/flavours/glitch/styles/components/lists.css +0 -0
R app/javascript/flavours/glitch/styles/components/local_settings.scss => app/javascript/flavours/glitch/styles/components/local_settings.css +0 -0
R app/javascript/flavours/glitch/styles/components/media.scss => app/javascript/flavours/glitch/styles/components/media.css +0 -0
R app/javascript/flavours/glitch/styles/components/misc.scss => app/javascript/flavours/glitch/styles/components/misc.css +2 -2
@@ 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);
R app/javascript/flavours/glitch/styles/components/modal.scss => app/javascript/flavours/glitch/styles/components/modal.css +0 -0
R app/javascript/flavours/glitch/styles/components/privacy_policy.scss => app/javascript/flavours/glitch/styles/components/privacy_policy.css +0 -0
R app/javascript/flavours/glitch/styles/components/regeneration_indicator.scss => app/javascript/flavours/glitch/styles/components/regeneration_indicator.css +0 -0
R app/javascript/flavours/glitch/styles/components/scrollbars.scss => app/javascript/flavours/glitch/styles/components/scrollbars.css +0 -0
R app/javascript/flavours/glitch/styles/components/search.scss => app/javascript/flavours/glitch/styles/components/search.css +0 -0
R app/javascript/flavours/glitch/styles/components/sensitive.scss => app/javascript/flavours/glitch/styles/components/sensitive.css +0 -0
R app/javascript/flavours/glitch/styles/components/signed_out.scss => app/javascript/flavours/glitch/styles/components/signed_out.css +0 -0
R app/javascript/flavours/glitch/styles/components/single_column.scss => app/javascript/flavours/glitch/styles/components/single_column.css +0 -0
R app/javascript/flavours/glitch/styles/components/status.scss => app/javascript/flavours/glitch/styles/components/status.css +0 -0
R app/javascript/flavours/glitch/styles/containers.scss => app/javascript/flavours/glitch/styles/containers.css +0 -0
R app/javascript/flavours/glitch/styles/contrast.scss => app/javascript/flavours/glitch/styles/contrast.css +0 -0
R app/javascript/flavours/glitch/styles/contrast/diff.scss => app/javascript/flavours/glitch/styles/contrast/diff.css +0 -0
R app/javascript/flavours/glitch/styles/contrast/variables.scss => app/javascript/flavours/glitch/styles/contrast/variables.css +1 -1
@@ 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;
}
R app/javascript/flavours/glitch/styles/dashboard.scss => app/javascript/flavours/glitch/styles/dashboard.css +0 -0
R app/javascript/flavours/glitch/styles/forms.scss => app/javascript/flavours/glitch/styles/forms.css +2 -2
@@ 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;
R app/javascript/flavours/glitch/styles/index.scss => app/javascript/flavours/glitch/styles/index.css +0 -0
R app/javascript/flavours/glitch/styles/lists.scss => app/javascript/flavours/glitch/styles/lists.css +0 -0
R app/javascript/flavours/glitch/styles/login.scss => app/javascript/flavours/glitch/styles/login.css +0 -0
R app/javascript/flavours/glitch/styles/mastodon-light.scss => app/javascript/flavours/glitch/styles/mastodon-light.css +0 -0
R app/javascript/flavours/glitch/styles/mastodon-light/diff.scss => app/javascript/flavours/glitch/styles/mastodon-light/diff.css +13 -13
@@ 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);
R app/javascript/flavours/glitch/styles/mastodon-light/variables.scss => app/javascript/flavours/glitch/styles/mastodon-light/variables.css +1 -1
@@ 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;
}
R app/javascript/flavours/glitch/styles/modal.scss => app/javascript/flavours/glitch/styles/modal.css +0 -0
R app/javascript/flavours/glitch/styles/polls.scss => app/javascript/flavours/glitch/styles/polls.css +2 -2
@@ 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);
R app/javascript/flavours/glitch/styles/reset.scss => app/javascript/flavours/glitch/styles/reset.css +0 -0
R app/javascript/flavours/glitch/styles/rich_text.scss => app/javascript/flavours/glitch/styles/rich_text.css +0 -0
R app/javascript/flavours/glitch/styles/rtl.scss => app/javascript/flavours/glitch/styles/rtl.css +1 -1
@@ 15,7 15,7 @@ body.rtl {
.compose-form .autosuggest-textarea__textarea {
padding-right: 10px;
- padding-left: 10px + 22px;
+ padding-left: 32px;
}
.columns-area {
R app/javascript/flavours/glitch/styles/statuses.scss => app/javascript/flavours/glitch/styles/statuses.css +4 -4
@@ 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 {
R app/javascript/flavours/glitch/styles/tables.scss => app/javascript/flavours/glitch/styles/tables.css +1 -1
@@ 192,7 192,7 @@ a.table-action-link {
&__actions {
text-align: end;
- padding-inline-end: 16px - 5px;
+ padding-inline-end: 11px;
}
}
R app/javascript/flavours/glitch/styles/variables.scss => app/javascript/flavours/glitch/styles/variables.css +1 -1
@@ 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;
}
R app/javascript/flavours/glitch/styles/widgets.scss => app/javascript/flavours/glitch/styles/widgets.css +0 -0
M app/javascript/packs/common.js => app/javascript/packs/common.js +1 -1
@@ 1,2 1,2 @@
import "./public-path";
-import "styles/application.scss";
+import "styles/application.css";
R app/javascript/skins/glitch/contrast/common.scss => app/javascript/skins/glitch/contrast/common.css +0 -0
R app/javascript/skins/glitch/mastodon-light/common.scss => app/javascript/skins/glitch/mastodon-light/common.css +0 -0
R app/javascript/skins/vanilla/contrast/common.scss => app/javascript/skins/vanilla/contrast/common.css +0 -0
R app/javascript/skins/vanilla/mastodon-light/common.scss => app/javascript/skins/vanilla/mastodon-light/common.css +0 -0
R app/javascript/skins/vanilla/win95/common.scss => app/javascript/skins/vanilla/win95/common.css +0 -0
R app/javascript/styles/application.scss => app/javascript/styles/application.css +0 -0
R app/javascript/styles/contrast.scss => app/javascript/styles/contrast.css +0 -0
R app/javascript/styles/contrast/diff.scss => app/javascript/styles/contrast/diff.css +0 -0
R app/javascript/styles/contrast/variables.scss => app/javascript/styles/contrast/variables.css +1 -1
@@ 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;
}
R app/javascript/styles/fonts/roboto-mono.scss => app/javascript/styles/fonts/roboto-mono.css +0 -0
R app/javascript/styles/fonts/roboto.scss => app/javascript/styles/fonts/roboto.css +0 -0
R app/javascript/styles/mailer.scss => app/javascript/styles/mailer.css +0 -0
R app/javascript/styles/mastodon-light.scss => app/javascript/styles/mastodon-light.css +0 -0
R app/javascript/styles/mastodon-light/diff.scss => app/javascript/styles/mastodon-light/diff.css +12 -12
@@ 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);
R app/javascript/styles/mastodon-light/variables.scss => app/javascript/styles/mastodon-light/variables.css +1 -1
@@ 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;
}
R app/javascript/styles/mastodon/about.scss => app/javascript/styles/mastodon/about.css +0 -0
R app/javascript/styles/mastodon/accessibility.scss => app/javascript/styles/mastodon/accessibility.css +0 -0
R app/javascript/styles/mastodon/accounts.scss => app/javascript/styles/mastodon/accounts.css +1 -1
@@ 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);
R app/javascript/styles/mastodon/admin.scss => app/javascript/styles/mastodon/admin.css +17 -21
@@ 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 {
R app/javascript/styles/mastodon/basics.scss => app/javascript/styles/mastodon/basics.css +16 -16
@@ 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 {
R app/javascript/styles/mastodon/boost.scss => app/javascript/styles/mastodon/boost.css +0 -0
R app/javascript/styles/mastodon/branding.scss => app/javascript/styles/mastodon/branding.css +0 -0
R app/javascript/styles/mastodon/components.scss => app/javascript/styles/mastodon/components.css +49 -60
@@ 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;
R app/javascript/styles/mastodon/containers.scss => app/javascript/styles/mastodon/containers.css +0 -0
R app/javascript/styles/mastodon/dashboard.scss => app/javascript/styles/mastodon/dashboard.css +0 -0
R app/javascript/styles/mastodon/emoji_picker.scss => app/javascript/styles/mastodon/emoji_picker.css +1 -1
@@ 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;
R app/javascript/styles/mastodon/forms.scss => app/javascript/styles/mastodon/forms.css +3 -5
@@ 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;
R app/javascript/styles/mastodon/lists.scss => app/javascript/styles/mastodon/lists.css +0 -0
R app/javascript/styles/mastodon/modal.scss => app/javascript/styles/mastodon/modal.css +0 -0
R app/javascript/styles/mastodon/polls.scss => app/javascript/styles/mastodon/polls.css +2 -2
@@ 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);
R app/javascript/styles/mastodon/reset.scss => app/javascript/styles/mastodon/reset.css +0 -0
R app/javascript/styles/mastodon/rich_text.scss => app/javascript/styles/mastodon/rich_text.css +0 -0
R app/javascript/styles/mastodon/rtl.scss => app/javascript/styles/mastodon/rtl.css +1 -1
@@ 12,7 12,7 @@ body.rtl {
.compose-form .autosuggest-textarea__textarea {
padding-right: 10px;
- padding-left: 10px + 22px;
+ padding-left: 32px;
}
.columns-area {
R app/javascript/styles/mastodon/statuses.scss => app/javascript/styles/mastodon/statuses.css +3 -3
@@ 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;
}
R app/javascript/styles/mastodon/tables.scss => app/javascript/styles/mastodon/tables.css +1 -1
@@ 192,7 192,7 @@ a.table-action-link {
&__actions {
text-align: end;
- padding-inline-end: 16px - 5px;
+ padding-inline-end: 11px;
}
}
R app/javascript/styles/mastodon/variables.scss => app/javascript/styles/mastodon/variables.css +1 -1
@@ 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;
}
R app/javascript/styles/mastodon/widgets.scss => app/javascript/styles/mastodon/widgets.css +0 -0
R app/javascript/styles/win95.scss => app/javascript/styles/win95.css +515 -320
@@ 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 {
M config/webpack/rules/css.js => config/webpack/rules/css.js +18 -39
@@ 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,
+ },
+ },
+ ],
+ },
+];
M config/webpacker.yml => config/webpacker.yml +0 -4
@@ 39,11 39,7 @@ default: &default
- .jsx
- .ts
- .tsx
- - .sass
- - .scss
- .css
- - .module.sass
- - .module.scss
- .module.css
- .png
- .svg
M package.json => package.json +6 -8
@@ 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"
}
D => +0 -330
@@ 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)`);
}
D => +0 -334
@@ 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));
M stylelint.config.js => stylelint.config.js +5 -8
@@ 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,
M yarn.lock => yarn.lock +14 -307
@@ 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