diff --git a/bookwyrm/static/css/bookwyrm.scss b/bookwyrm/static/css/bookwyrm.scss index 437795457..17d6d9119 100644 --- a/bookwyrm/static/css/bookwyrm.scss +++ b/bookwyrm/static/css/bookwyrm.scss @@ -1,4 +1,3 @@ @charset "utf-8"; - -@import "vendor/bulma/bulma.sass"; -@import "bookwyrm/all.scss"; +@import "vendor/bulma/bulma"; +@import "bookwyrm/all"; diff --git a/bookwyrm/static/css/bookwyrm/_all.scss b/bookwyrm/static/css/bookwyrm/_all.scss index 1e8569827..7e50fe3e1 100644 --- a/bookwyrm/static/css/bookwyrm/_all.scss +++ b/bookwyrm/static/css/bookwyrm/_all.scss @@ -16,9 +16,7 @@ @import "components/status"; @import "components/tabs"; @import "components/toggle"; - @import "overrides/bulma_overrides"; - @import "utilities/a11y"; @import "utilities/alignments"; @import "utilities/colors"; @@ -40,10 +38,12 @@ body { width: 12px; height: 12px; } + ::-webkit-scrollbar-thumb { background: $scrollbar-thumb; border-radius: 0.5em; } + ::-webkit-scrollbar-track { background: $scrollbar-track; } @@ -89,7 +89,6 @@ button::-moz-focus-inner { /** Utilities not covered by Bulma ******************************************************************************/ - .tag.is-small { height: auto; } @@ -144,7 +143,6 @@ button.button-paragraph { vertical-align: middle; } - /** States ******************************************************************************/ @@ -159,7 +157,6 @@ button.button-paragraph { cursor: not-allowed; } - /* Notifications page ******************************************************************************/ diff --git a/bookwyrm/static/css/bookwyrm/components/_book_cover.scss b/bookwyrm/static/css/bookwyrm/components/_book_cover.scss index 48b564a0b..db9391cc1 100644 --- a/bookwyrm/static/css/bookwyrm/components/_book_cover.scss +++ b/bookwyrm/static/css/bookwyrm/components/_book_cover.scss @@ -43,7 +43,7 @@ max-height: 100%; /* Useful when stretching under-sized images. */ - image-rendering: optimizeQuality; + image-rendering: optimizequality; image-rendering: smooth; } diff --git a/bookwyrm/static/css/bookwyrm/components/_copy.scss b/bookwyrm/static/css/bookwyrm/components/_copy.scss index 7a47c1dba..2595401cc 100644 --- a/bookwyrm/static/css/bookwyrm/components/_copy.scss +++ b/bookwyrm/static/css/bookwyrm/components/_copy.scss @@ -30,20 +30,20 @@ } .copy-tooltip { - overflow: visible; - visibility: hidden; - width: 140px; - background-color: #555; - color: #fff; - text-align: center; - border-radius: 6px; - padding: 5px; - position: absolute; - z-index: 1; - margin-left: -30px; - margin-top: -45px; - opacity: 0; - transition: opacity 0.3s; + overflow: visible; + visibility: hidden; + width: 140px; + background-color: #555; + color: #fff; + text-align: center; + border-radius: 6px; + padding: 5px; + position: absolute; + z-index: 1; + margin-left: -30px; + margin-top: -45px; + opacity: 0; + transition: opacity 0.3s; } .copy-tooltip::after { @@ -54,5 +54,5 @@ margin-left: -60px; border-width: 5px; border-style: solid; - border-color: #555 transparent transparent transparent; - } + border-color: #555 transparent transparent; +} diff --git a/bookwyrm/static/css/bookwyrm/components/_tabs.scss b/bookwyrm/static/css/bookwyrm/components/_tabs.scss index 2d68a383b..8e00f6a88 100644 --- a/bookwyrm/static/css/bookwyrm/components/_tabs.scss +++ b/bookwyrm/static/css/bookwyrm/components/_tabs.scss @@ -44,12 +44,12 @@ .bw-tabs a:hover { border-bottom-color: transparent; - color: $text + color: $text; } .bw-tabs a.is-active { border-bottom-color: transparent; - color: $link + color: $link; } .bw-tabs.is-left { diff --git a/bookwyrm/static/css/themes/bookwyrm-dark.scss b/bookwyrm/static/css/themes/bookwyrm-dark.scss index c3e8655e3..f5e08e9a0 100644 --- a/bookwyrm/static/css/themes/bookwyrm-dark.scss +++ b/bookwyrm/static/css/themes/bookwyrm-dark.scss @@ -1,4 +1,4 @@ -@import "../vendor/bulma/sass/utilities/initial-variables.sass"; +@import "../vendor/bulma/sass/utilities/initial-variables"; /* Colors ******************************************************************************/ @@ -16,7 +16,7 @@ $danger-light: #481922; $light: #393939; $red: #ffa1b4; $black: #000; -$white-ter: hsl(0, 0%, 90%); +$white-ter: hsl(0deg, 0%, 90%); /* book cover standins */ $no-cover-color: #002549; @@ -79,7 +79,7 @@ $info-dark: #72b6ee; } /* misc */ -$shadow: 0 0.5em 0.5em -0.125em rgba($black, 0.2), 0 0px 0 1px rgba($black, 0.02); +$shadow: 0 0.5em 0.5em -0.125em rgba($black, 0.2), 0 0 0 1px rgba($black, 0.02); $card-header-shadow: 0 0.125em 0.25em rgba($black, 0.1); $invisible-overlay-background-color: rgba($black, 0.66); $progress-value-background-color: $border-light; @@ -97,27 +97,23 @@ $family-secondary: $family-sans-serif; color: $grey-light !important; } - .tabs li:not(.is-active) a { color: #2e7eb9 !important; } - .tabs li:not(.is-active) a:hover { + +.tabs li:not(.is-active) a:hover { border-bottom-color: #2e7eb9 !important; -} - -.tabs li:not(.is-active) a { - color: #2e7eb9 !important; } + .tabs li.is-active a { color: #e6e6e6 !important; - border-bottom-color: #e6e6e6 !important ; + border-bottom-color: #e6e6e6 !important; } - #qrcode svg { background-color: #a6a6a6; } -@import "../bookwyrm.scss"; +@import "../bookwyrm"; @import "../vendor/icons.css"; -@import "../vendor/shepherd.scss"; +@import "../vendor/shepherd"; diff --git a/bookwyrm/static/css/themes/bookwyrm-light.scss b/bookwyrm/static/css/themes/bookwyrm-light.scss index bb7d340a9..37e990127 100644 --- a/bookwyrm/static/css/themes/bookwyrm-light.scss +++ b/bookwyrm/static/css/themes/bookwyrm-light.scss @@ -1,4 +1,4 @@ -@import "../vendor/bulma/sass/utilities/derived-variables.sass"; +@import "../vendor/bulma/sass/utilities/derived-variables"; /* Colors ******************************************************************************/ @@ -68,19 +68,16 @@ $family-secondary: $family-sans-serif; .tabs li:not(.is-active) a { color: #3273dc !important; } - .tabs li:not(.is-active) a:hover { - border-bottom-color: #3273dc !important; -} -.tabs li:not(.is-active) a { - color: #3273dc !important; +.tabs li:not(.is-active) a:hover { + border-bottom-color: #3273dc !important; } + .tabs li.is-active a { color: #4a4a4a !important; - border-bottom-color: #4a4a4a !important ; + border-bottom-color: #4a4a4a !important; } - -@import "../bookwyrm.scss"; +@import "../bookwyrm"; @import "../vendor/icons.css"; -@import "../vendor/shepherd.scss"; +@import "../vendor/shepherd"; diff --git a/bw-dev b/bw-dev index c81fa023b..57441f013 100755 --- a/bw-dev +++ b/bw-dev @@ -188,27 +188,25 @@ case "$CMD" in ;; prettier) prod_error - $DOCKER_COMPOSE run --rm dev-tools npx prettier --write bookwyrm/static/js/*.js + $DOCKER_COMPOSE run --rm dev-tools prettier --write bookwyrm/static/js/*.js ;; eslint) prod_error - $DOCKER_COMPOSE run --rm dev-tools npx eslint bookwyrm/static --ext .js + $DOCKER_COMPOSE run --rm dev-tools eslint bookwyrm/static --ext .js ;; stylelint) prod_error - $DOCKER_COMPOSE run --rm dev-tools npx stylelint \ - bookwyrm/static/css/bookwyrm.scss bookwyrm/static/css/bookwyrm/**/*.scss --fix \ - --config dev-tools/.stylelintrc.js + $DOCKER_COMPOSE run --rm dev-tools stylelint --fix bookwyrm/static/css \ + --config dev-tools/.stylelintrc.js --ignore-path dev-tools/.stylelintignore ;; formatters) prod_error runweb pylint bookwyrm/ $DOCKER_COMPOSE run --rm dev-tools black celerywyrm bookwyrm - $DOCKER_COMPOSE run --rm dev-tools npx prettier --write bookwyrm/static/js/*.js - $DOCKER_COMPOSE run --rm dev-tools npx eslint bookwyrm/static --ext .js - $DOCKER_COMPOSE run --rm dev-tools npx stylelint \ - bookwyrm/static/css/bookwyrm.scss bookwyrm/static/css/bookwyrm/**/*.scss --fix \ - --config dev-tools/.stylelintrc.js + $DOCKER_COMPOSE run --rm dev-tools prettier --write bookwyrm/static/js/*.js + $DOCKER_COMPOSE run --rm dev-tools eslint bookwyrm/static --ext .js + $DOCKER_COMPOSE run --rm dev-tools stylelint --fix bookwyrm/static/css \ + --config dev-tools/.stylelintrc.js --ignore-path dev-tools/.stylelintignore ;; mypy) prod_error diff --git a/dev-tools/.stylelintignore b/dev-tools/.stylelintignore index b2cd33f89..441f5eb72 100644 --- a/dev-tools/.stylelintignore +++ b/dev-tools/.stylelintignore @@ -1 +1,2 @@ **/vendor/** +**/fonts/** diff --git a/dev-tools/.stylelintrc.js b/dev-tools/.stylelintrc.js index 7ab51b9b3..a3403e89c 100644 --- a/dev-tools/.stylelintrc.js +++ b/dev-tools/.stylelintrc.js @@ -1,7 +1,7 @@ /* global module */ module.exports = { - "extends": "stylelint-config-standard", + "extends": "stylelint-config-standard-scss", "plugins": [ "stylelint-order" @@ -18,5 +18,13 @@ module.exports = { "declaration-block-no-redundant-longhand-properties": null, "no-descending-specificity": null, "alpha-value-notation": null - } + }, + "overrides": [ + { + "files": [ "../**/themes/bookwyrm-*.scss" ], + "rules": { + "no-invalid-position-at-import-rule": null + } + } + ] }; diff --git a/dev-tools/Dockerfile b/dev-tools/Dockerfile index 7063aab1b..f6a7bb793 100644 --- a/dev-tools/Dockerfile +++ b/dev-tools/Dockerfile @@ -1,14 +1,17 @@ FROM python:3.9 -WORKDIR /app +WORKDIR /app/dev-tools +ENV PATH="/app/dev-tools/node_modules/.bin:$PATH" ENV PYTHONUNBUFFERED=1 ENV NPM_CONFIG_UPDATE_NOTIFIER=false ENV PIP_ROOT_USER_ACTION=ignore PIP_DISABLE_PIP_VERSION_CHECK=1 COPY nodejs.sources /etc/apt/sources.list.d/ -COPY package.json requirements.txt .stylelintrc.js .stylelintignore /app/ +COPY package.json requirements.txt .stylelintrc.js .stylelintignore /app/dev-tools/ RUN apt-get update && \ apt-get install -y nodejs && \ pip install -r requirements.txt && \ npm install . + +WORKDIR /app diff --git a/dev-tools/package.json b/dev-tools/package.json index 3fbc940cb..f7b996b77 100644 --- a/dev-tools/package.json +++ b/dev-tools/package.json @@ -11,6 +11,7 @@ "stylelint-config-recommended": "^7.0.0", "stylelint-config-standard": "^25.0.0", "stylelint-order": "^5.0.0", + "stylelint-config-standard-scss": "^3.0.0", "watch": "^0.13.0" }, "dependencies": { diff --git a/docker-compose.yml b/docker-compose.yml index c327c10a9..4d4037681 100644 --- a/docker-compose.yml +++ b/docker-compose.yml @@ -101,6 +101,7 @@ services: build: dev-tools env_file: .env volumes: + - /app/dev-tools/ - .:/app volumes: pgdata: