From 955de008c53616a674d971bc8dc67139462702ea Mon Sep 17 00:00:00 2001 From: daudix Date: Sun, 15 Sep 2024 18:25:01 +0300 Subject: [PATCH] Don't set cursor on hover --- CHANGELOG.md | 4 ++++ sass/_buttons.scss | 5 +---- sass/_comments.scss | 4 ++-- sass/_external.scss | 2 +- sass/_input.scss | 19 +++++-------------- sass/_media.scss | 5 +++-- sass/_nav.scss | 6 +----- sass/_pre-container.scss | 6 ++---- sass/_typography.scss | 10 ++-------- 9 files changed, 21 insertions(+), 40 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index f813b12..c9dd3ad 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -24,10 +24,13 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0 - Add loading animation to "Load Comments" button. - Add margin between comment author name and timestamp. - Add missing edge highlight to active footer navbar links. +- Add open animation to `details`. - Add special `switch` class for checkboxes (#70). - Add spoiler styles. - Add zoom-on-hover to custom comment emojis. - Return the scrollbar styling. +- Show arrow after article heading in article list on hover. +- Style `details` arrow. - Style mentions and hashtags in comments. - Turn "Feed" button to a dropdown if multiple feeds are avaiable (#72). @@ -65,6 +68,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0 - Use PNG instead of GIF for comments QR code to reduce download size. - Use relative colors for `-bg` color variants. - Use separator `div` instead of `::after` on the home button. +- Use the current text color for icons instead of explicitly setting their color. ### Removed diff --git a/sass/_buttons.scss b/sass/_buttons.scss index 51c2c96..857c72d 100644 --- a/sass/_buttons.scss +++ b/sass/_buttons.scss @@ -11,11 +11,8 @@ a.inline-button { button.inline-button { appearance: none; + cursor: pointer; border: none; - - &:hover { - cursor: pointer; - } } a.inline-button, diff --git a/sass/_comments.scss b/sass/_comments.scss index 756157d..837e583 100644 --- a/sass/_comments.scss +++ b/sass/_comments.scss @@ -34,9 +34,9 @@ &:disabled { animation: loading-fill var(--transition-long) ease-in-out alternate infinite; transition: none; + cursor: not-allowed; &:hover { - cursor: not-allowed; background-color: transparent; color: var(--fg-muted-5); } @@ -177,12 +177,12 @@ display: inline-block; vertical-align: middle; transition: var(--transition); + cursor: zoom-in; width: 1.5em; height: 1.5em; &:hover { transform: scale(2); - cursor: zoom-in; } } diff --git a/sass/_external.scss b/sass/_external.scss index da54a6c..db3b1f6 100644 --- a/sass/_external.scss +++ b/sass/_external.scss @@ -4,7 +4,7 @@ a.external::after { mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' %3E%3Cpath d='m6 6 5-5M7 1h4v4M4 2H3a2 2 0 0 0-2 2v5a2 2 0 0 0 2 2h5a2 2 0 0 0 2-2V8' style='fill:none;stroke:black;stroke-linejoin:round;stroke-linecap:round;stroke-width:2;stroke-dasharray:none'/%3E%3C/svg%3E"); mask-size: cover; margin-inline-start: 0.25rem; - background-color: var(--accent-color); + background-color: currentColor; width: max(0.75rem, 0.75em); height: max(0.75rem, 0.75em); content: ""; diff --git a/sass/_input.scss b/sass/_input.scss index 2ed9805..fae5965 100644 --- a/sass/_input.scss +++ b/sass/_input.scss @@ -4,21 +4,21 @@ input[type="color"] { position: relative; appearance: none; transition: var(--transition); + cursor: pointer; border: 0.15rem solid var(--fg-muted-2); background-color: var(--fg-muted-1); width: 1rem; height: 1rem; &:hover { - cursor: pointer; background-color: var(--fg-muted-2); } &:disabled { opacity: var(--disabled-opacity); + cursor: not-allowed; &:hover { - cursor: not-allowed; background-color: var(--fg-muted-1); } } @@ -161,30 +161,24 @@ input[type="color"] { input[type="range"] { appearance: none; transition: var(--transition); + cursor: pointer; box-shadow: var(--edge-highlight); border-radius: 999px; background: var(--accent-color); width: 100%; height: 0.5rem; - &:hover { - cursor: pointer; - } - &::-webkit-slider-thumb { appearance: none; filter: brightness(0.9); transition: var(--transition); + cursor: grab; box-shadow: var(--shadow); border-radius: 999px; background-color: white; width: 1.5rem; height: 1.5rem; - &:hover { - cursor: grab; - } - &:active { transform: var(--active); cursor: grabbing; @@ -194,6 +188,7 @@ input[type="range"] { &::-moz-range-thumb { appearance: none; transition: var(--transition); + cursor: grab; box-shadow: var(--shadow); border: none; border-radius: 999px; @@ -201,10 +196,6 @@ input[type="range"] { width: 1.5rem; height: 1.5rem; - &:hover { - cursor: grab; - } - &:active { transform: var(--active); cursor: grabbing; diff --git a/sass/_media.scss b/sass/_media.scss index f22f650..f876d92 100644 --- a/sass/_media.scss +++ b/sass/_media.scss @@ -78,11 +78,12 @@ img { transition: var(--transition-longer); &:not(.no-hover, .full-bleed, [src*="#no-hover"], [src*="#full-bleed"]) { + cursor: zoom-in; + &:hover { position: relative; transform: var(--hover); z-index: 1; - cursor: zoom-in; box-shadow: var(--edge-highlight), var(--shadow-raised); border-radius: 0; } @@ -113,6 +114,6 @@ img { } } -a img:not(.no-hover, .full-bleed, [src*="#no-hover"], [src*="#full-bleed"]):hover { +a img:not(.no-hover, .full-bleed, [src*="#no-hover"], [src*="#full-bleed"]) { cursor: pointer; } diff --git a/sass/_nav.scss b/sass/_nav.scss index 0b084ed..dd01291 100644 --- a/sass/_nav.scss +++ b/sass/_nav.scss @@ -164,15 +164,11 @@ button { appearance: none; transition: var(--transition); + cursor: pointer; border: none; border-radius: 999px; background-color: transparent; - font-weight: bold; font-size: 1rem; - - &:hover { - cursor: pointer; - } } details { diff --git a/sass/_pre-container.scss b/sass/_pre-container.scss index 98fdcdd..b377763 100644 --- a/sass/_pre-container.scss +++ b/sass/_pre-container.scss @@ -22,6 +22,7 @@ float: inline-end; appearance: none; transition: var(--transition); + cursor: pointer; border: none; border-radius: var(--rounded-corner-small); background-color: transparent; @@ -30,7 +31,6 @@ line-height: 0; &:hover { - cursor: pointer; box-shadow: var(--edge-highlight); background-color: var(--fg-muted-1); color: var(--fg-muted-5); @@ -41,9 +41,7 @@ } &:disabled { - &:hover { - cursor: not-allowed; - } + cursor: not-allowed; &:active { transform: none; diff --git a/sass/_typography.scss b/sass/_typography.scss index 9db5542..05ab422 100644 --- a/sass/_typography.scss +++ b/sass/_typography.scss @@ -42,13 +42,10 @@ small { } abbr[title] { + cursor: help; text-decoration: underline; text-decoration-style: dotted; text-decoration-thickness: max(1px, 0.0625em); - - &:hover { - cursor: help; - } } figcaption { @@ -149,16 +146,13 @@ progress { kbd { display: inline-block; transition: var(--transition); + cursor: pointer; box-shadow: var(--edge-highlight), inset 0 -0.125rem 0 var(--fg-muted-2); border-radius: var(--rounded-corner-small); background-color: var(--fg-muted-1); padding: 0.125rem 0.375rem; font-size: smaller; - &:hover { - cursor: pointer; - } - // Small nice thingy, keys can be pressed! &:active { transform: translateY(0.125rem);