hak8or/blog
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Don't set cursor on hover

Browse Source
This commit is contained in:
daudix
2024-09-15 18:25:01 +03:00
parent 75d2e5476c
commit 955de008c5
9 changed files with 21 additions and 40 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
CHANGELOG.md
View File

@ -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

5
sass/_buttons.scss
View File

@ -11,11 +11,8 @@ a.inline-button {
button.inline-button {
appearance: none;
cursor: pointer;
border: none;
&:hover {
cursor: pointer;
}
}
a.inline-button,

4
sass/_comments.scss
View File

@ -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;
}
}

2
sass/_external.scss
View File

@ -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: "";

19
sass/_input.scss
View File

@ -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;

5
sass/_media.scss
View File

@ -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;
}

6
sass/_nav.scss
View File

@ -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 {

6
sass/_pre-container.scss
View File

@ -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;

10
sass/_typography.scss
View File

@ -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);