diff --git a/.stylelintrc b/.stylelintrc index 0161b95..d30a871 100644 --- a/.stylelintrc +++ b/.stylelintrc @@ -9,10 +9,10 @@ "rules": { "declaration-block-no-duplicate-properties": true, - "order/declaration-block-properties-alphabetical-order": true, + "order/properties-alphabetical-order": true, "property-no-unknown": [ true, { - ignoreProperties: + ignoreProperties: ["inset-block-end", "inset-block-start"] }], "property-blacklist": [ diff --git a/package.json b/package.json index b4b98db..4b5ddf8 100644 --- a/package.json +++ b/package.json @@ -22,9 +22,9 @@ "nyc": "^15.0.0", "sinon": "^7.5.0", "sinon-chai": "^3.3.0", - "stylelint": "^7.9.0", - "stylelint-config-standard": "^16.0.0", - "stylelint-order": "^0.3.0", + "stylelint-order": "^4.0.0", + "stylelint": "^13.5.0", + "stylelint-config-standard": "^20.0.0", "web-ext": "^2.9.3", "webextensions-jsdom": "^1.2.1" }, diff --git a/src/css/options.css b/src/css/options.css index fead645..9346afe 100644 --- a/src/css/options.css +++ b/src/css/options.css @@ -21,6 +21,7 @@ label { background: #202023; color: #fff; } + p, label { color: rgb(177, 177, 179); diff --git a/src/css/popup.css b/src/css/popup.css index 2e8ad20..6890da8 100644 --- a/src/css/popup.css +++ b/src/css/popup.css @@ -18,9 +18,18 @@ html { } body { + color: #000; font-family: Roboto, Noto, "San Francisco", Ubuntu, "Segoe UI", "Fira Sans", message-box, Arial, sans-serif; + font-size: 13px; inline-size: calc(var(--overflow-size) + 299px); + + /* inline-size: 320px; */ + letter-spacing: -0.1px; max-inline-size: calc(var(--overflow-size) + 299px); + + --highlight-blue: #1296f8; + --hr-grey: #e3e3e3; + --text-grey: #737373; } html, @@ -46,7 +55,6 @@ body { --inline-start-size: 1.66rem; /* 20px */ --inline-button-size: 5.833rem; /* 70px */ --icon-size: 1.166rem; /* 14px */ - --small-text-size: 0.833rem; /* 10px */ --small-radius: 3px; --icon-button-size: calc(calc(var(--block-line-separation-size) * 2) + 1.66rem); /* 20px */ @@ -107,26 +115,26 @@ table { /* Effect borrowed from tabs in Firefox, ensure that the element flexes to the full width */ .truncate-text { - position: relative; inline-size: 100%; overflow: hidden; + position: relative; white-space: nowrap; } .truncate-text::after { - position: absolute; - mask-image: linear-gradient(to right, transparent, white 70%); - content: " "; - inline-size: 50px; - height: 100%; - inset-inline-end: 0; background: white; + content: " "; + height: 100%; + inline-size: 50px; + inset-inline-end: 0; + mask-image: linear-gradient(to right, transparent, white 70%); + position: absolute; } .hover-highlight:hover .truncate-text::after, .hover-highlight:focus .truncate-text::after { - mask-image: linear-gradient(to right, transparent, var(--highlight-blue) 50%); background: var(--highlight-blue); + mask-image: linear-gradient(to right, transparent, var(--highlight-blue) 50%); } /* Color and icon helpers */ @@ -379,6 +387,13 @@ manage things like container crud */ text-decoration: none; } +.userContext-wrapper { + align-items: center; + display: flex; + flex: 1 1; + transition: background-color 75ms; +} + .edit-containers-panel .userContext-wrapper { max-inline-size: calc(var(--overflow-size) + 203px); } @@ -388,13 +403,6 @@ manage things like container crud */ pointer-events: none; } -.userContext-wrapper { - align-items: center; - display: flex; - flex: 1 1; - transition: background-color 75ms; -} - .userContext-icon-wrapper { block-size: var(--icon-button-size); flex: 0 0 var(--icon-button-size); @@ -655,18 +663,6 @@ manage things like container crud */ background: #0f1126; } -body { - color: #000; - font-family: 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif; - font-size: 13px; - inline-size: 320px; - letter-spacing: -0.1px; - - --highlight-blue: #1296f8; - --hr-grey: #e3e3e3; - --text-grey: #737373; -} - h3.title { block-size: 40px; color: #000; @@ -709,8 +705,8 @@ h3.title { .menu-text { inline-size: calc(100% - 40px); - max-inline-size: 260px; line-height: 24px; + max-inline-size: 260px; } .menu-icon {