[CSS] Eliminated repeated rules, improved icon alignment, and removed checkbox and radio custom styling

Browser specific quirks made it impossible to stylize checkbox and radio buttons. High DPI, custom default font sizes and/or custom GTK themes make it very difficult to keep it consistent.
This commit is contained in:
Eliseu Amaro 2022-01-28 18:21:04 +00:00
parent 2e6f91f34e
commit 8f8070036c
Signed by: eliseuamaro
GPG Key ID: 96DA09D4B97BC2D5
7 changed files with 19 additions and 76 deletions

View File

@ -14,12 +14,14 @@ hr {
} }
.icon { .icon {
align-self: center; vertical-align: center;
fill: var(--foreground); fill: var(--foreground);
height: 1em;
width: 1em;
} }
.active { .active {
font: 600 1.1em Poppins, sans-serif; font: 600 1em Poppins, sans-serif;
} }
.anchor-hidden { .anchor-hidden {
@ -57,7 +59,7 @@ hr {
} }
.page-header { .page-header {
align-items: baseline; align-items: center;
background: var(--gradient) !important; background: var(--gradient) !important;
box-shadow: var(--shadow); box-shadow: var(--shadow);
display: flex; display: flex;
@ -134,6 +136,10 @@ hr {
right: 0; right: 0;
} }
.panel-left-icon, .panel-right-icon {
display: inherit;
}
.section-panel .panel-content { .section-panel .panel-content {
background: var(--background-hard); background: var(--background-hard);
display: block; display: block;

View File

@ -1,22 +1,3 @@
.button-container {
background-color: var(--foreground);
border: none !important;
display: inline-block;
height: 14px;
opacity: .33;
width: 14px;
}
.button-container:focus, .button-container:hover {
background-color: var(--accent);
border: none !important;
opacity: 1;
}
.button-container:not(:first-of-type) {
margin-left: var(--s);
}
.favourite-button-container { .favourite-button-container {
-moz-mask-image: url(../../icons/heart.svg); -moz-mask-image: url(../../icons/heart.svg);
-o-mask-image: url(../../icons/heart.svg); -o-mask-image: url(../../icons/heart.svg);
@ -83,8 +64,6 @@
.feed-actions-details summary, .note-actions-extra-details summary { .feed-actions-details summary, .note-actions-extra-details summary {
display: block; display: block;
height: var(--unit);
width: var(--unit);
} }
.feed-actions-details-dropdown { .feed-actions-details-dropdown {
@ -275,6 +254,8 @@ embed header {
margin: unset; margin: unset;
} }
.note-actions-extra-details summary { .note-actions-extra-details summary {
width: 1em;
height: 1em;
opacity: 0.5; opacity: 0.5;
} }
.note-actions-extra-details[open] > summary + * > a { .note-actions-extra-details[open] > summary + * > a {

View File

@ -1,36 +1,9 @@
input { label {
all: unset; font-weight: 700;
} }
input[type=checkbox] { input + label {
background: var(--accent) !important; margin-left: 3px;
cursor: pointer;
display: inline-block;
height: 1em !important;
width: 1em !important;
}
input[type=checkbox]:not(:hover,:focus) {
background: var(--foreground) !important;
}
input[type=checkbox] {
border: unset !important;
}
input[type=radio] {
background: var(--border);
border-radius: 50%;
box-shadow: inset 0 0 0 2px var(--background-hard) !important;
display: inline-block;
height: var(--s) !important;
padding-right: 4px !important;
width: var(--s) !important;
}
input[type=radio]:checked {
background: var(--foreground);
box-shadow: inset 0 0 0 2px var(--foreground) !important;
} }
input[type=file] { input[type=file] {
@ -43,22 +16,6 @@ input[type=file] {
padding: unset !important; padding: unset !important;
} }
input[type=checkbox] {
-moz-mask-image: url(../../icons/check-off.svg) !important;
-o-mask-image: url(../../icons/check-off.svg) !important;
-webkit-mask-image: url(../../icons/check-off.svg) !important;
background-size: contain !important;
margin-right: 4px !important;
mask-image: url(../../icons/check-off.svg) !important;
}
input[type=checkbox]:checked {
-moz-mask-image: url(../../icons/check-on.svg) !important;
-o-mask-image: url(../../icons/check-on.svg) !important;
-webkit-mask-image: url(../../icons/check-on.svg) !important;
mask-image: url(../../icons/check-on.svg) !important;
}
input[type=color] { input[type=color] {
appearance: none; appearance: none;
background-color: transparent; background-color: transparent;
@ -123,7 +80,6 @@ button, input, select, textarea {
border-radius: var(--s); border-radius: var(--s);
display: inline-block; display: inline-block;
font-size: inherit; font-size: inherit;
line-height: initial !important;
max-width: border-box !important; max-width: border-box !important;
overflow: hidden; overflow: hidden;
padding: 6px 8px !important; padding: 6px 8px !important;

View File

@ -33,10 +33,10 @@
border: none !important; border: none !important;
display: inline-block; display: inline-block;
height: var(--unit); height: var(--unit);
width: var(--unit);
mask-repeat: no-repeat !important; mask-repeat: no-repeat !important;
mask-size: cover !important; mask-size: cover !important;
opacity: .33; opacity: .33;
width: var(--unit);
} }
.button-container:focus, .button-container:hover { .button-container:focus, .button-container:hover {

View File

@ -1,5 +1,5 @@
<!-- https://github.com/primer/octicons --> <!-- https://github.com/primer/octicons -->
<!-- MIT License --> <!-- MIT License -->
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" width="32" height="32"> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" x="0" y="0" width="24px" height="24px">
<path fill-rule="evenodd" d="M1.5 8a6.5 6.5 0 1113 0 6.5 6.5 0 01-13 0zM0 8a8 8 0 1116 0A8 8 0 010 8zm11.78-1.72a.75.75 0 00-1.06-1.06L6.75 9.19 5.28 7.72a.75.75 0 00-1.06 1.06l2 2a.75.75 0 001.06 0l4.5-4.5z"></path> <path fill-rule="evenodd" d="M1.5 8a6.5 6.5 0 1113 0 6.5 6.5 0 01-13 0zM0 8a8 8 0 1116 0A8 8 0 010 8zm11.78-1.72a.75.75 0 00-1.06-1.06L6.75 9.19 5.28 7.72a.75.75 0 00-1.06 1.06l2 2a.75.75 0 001.06 0l4.5-4.5z"></path>
</svg> </svg>

Before

Width:  |  Height:  |  Size: 376 B

After

Width:  |  Height:  |  Size: 392 B

View File

@ -1,5 +1,5 @@
<!-- https://github.com/primer/octicons --> <!-- https://github.com/primer/octicons -->
<!-- MIT License --> <!-- MIT License -->
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" width="32" height="32"> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" x="0" y="0" width="24px" height="24px">
<path fill-rule="evenodd" d="M8 16A8 8 0 108 0a8 8 0 000 16zm3.78-9.72a.75.75 0 00-1.06-1.06L6.75 9.19 5.28 7.72a.75.75 0 00-1.06 1.06l2 2a.75.75 0 001.06 0l4.5-4.5z"></path> <path fill-rule="evenodd" d="M8 16A8 8 0 108 0a8 8 0 000 16zm3.78-9.72a.75.75 0 00-1.06-1.06L6.75 9.19 5.28 7.72a.75.75 0 00-1.06 1.06l2 2a.75.75 0 001.06 0l4.5-4.5z"></path>
</svg> </svg>

Before

Width:  |  Height:  |  Size: 334 B

After

Width:  |  Height:  |  Size: 350 B

View File

@ -1,6 +1,6 @@
<!-- https://github.com/primer/octicons --> <!-- https://github.com/primer/octicons -->
<!-- MIT License --> <!-- MIT License -->
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" class="{{ iconClass|default('') }}"> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" x="0" y="0" width="16px" height="16px" class="{{ iconClass|default('') }}">
<title>Edit</title> <title>Edit</title>
<path d="M11.013 1.427a1.75 1.75 0 012.474 0l1.086 1.086a1.75 1.75 0 010 2.474l-8.61 8.61c-.21.21-.47.364-.756.445l-3.251.93a.75.75 0 01-.927-.928l.929-3.25a1.75 1.75 0 01.445-.758l8.61-8.61zm1.414 1.06a.25.25 0 00-.354 0L10.811 3.75l1.439 1.44 1.263-1.263a.25.25 0 000-.354l-1.086-1.086zM11.189 6.25L9.75 4.81l-6.286 6.287a.25.25 0 00-.064.108l-.558 1.953 1.953-.558a.249.249 0 00.108-.064l6.286-6.286z"/> <path d="M11.013 1.427a1.75 1.75 0 012.474 0l1.086 1.086a1.75 1.75 0 010 2.474l-8.61 8.61c-.21.21-.47.364-.756.445l-3.251.93a.75.75 0 01-.927-.928l.929-3.25a1.75 1.75 0 01.445-.758l8.61-8.61zm1.414 1.06a.25.25 0 00-.354 0L10.811 3.75l1.439 1.44 1.263-1.263a.25.25 0 000-.354l-1.086-1.086zM11.189 6.25L9.75 4.81l-6.286 6.287a.25.25 0 00-.064.108l-.558 1.953 1.953-.558a.249.249 0 00.108-.064l6.286-6.286z"/>
</svg> </svg>

Before

Width:  |  Height:  |  Size: 627 B

After

Width:  |  Height:  |  Size: 643 B