Expand CSS shorthand for GTK4 compatibility

Breaks apart margin, padding, and transition shorthand properties into their
component forms and lowercases the `Icon` selector, matching GTK4 CSS
expectations. Also removes an explicit max-width from the brightness levelbar.
This commit is contained in:
2026-07-13 14:39:24 +02:00
parent fe7d25bba9
commit c88527b4bd
+34 -12
View File
@@ -1,29 +1,45 @@
* { * {
margin: 0; margin-top: 0;
padding: 0; margin-bottom: 0;
margin-left: 0;
margin-right: 0;
padding-top: 0;
padding-bottom: 0;
padding-left: 0;
padding-right: 0;
/* E-ink displays ghost badly with animations/transitions */ /* E-ink displays ghost badly with animations/transitions */
transition: none; transition-property: none;
transition-duration: 0s;
animation: none; animation: none;
} }
window.pinenote-shell-widget { window.pinenote-shell-widget {
background-color: rgba(20, 20, 30, 0.95); background-color: rgba(20, 20, 30, 0.95);
color: #ffffff; color: #ffffff;
font-family: "Ubuntu", "Noto Sans", sans-serif; font-family: Ubuntu, "Noto Sans", sans-serif;
border-radius: 8px; border-radius: 8px;
margin: 16px; margin-top: 16px;
margin-bottom: 16px;
margin-left: 16px;
margin-right: 16px;
} }
window.pinenote-shell-widget .title-big { window.pinenote-shell-widget .title-big {
font-size: 24px; font-size: 24px;
font-weight: bold; font-weight: bold;
color: #61afef; color: #61afef;
margin: 16px; margin-top: 16px;
margin-bottom: 16px;
margin-left: 16px;
margin-right: 16px;
} }
window.pinenote-shell-widget .header { window.pinenote-shell-widget .header {
background-color: rgba(0, 0, 0, 0.3); background-color: rgba(0, 0, 0, 0.3);
padding: 8px; padding-top: 8px;
padding-bottom: 8px;
padding-left: 8px;
padding-right: 8px;
border-bottom: 1px solid rgba(255, 255, 255, 0.1); border-bottom: 1px solid rgba(255, 255, 255, 0.1);
} }
@@ -48,7 +64,6 @@ window.pinenote-shell-widget .title {
window.pinenote-shell-widget .brightness-levelbar { window.pinenote-shell-widget .brightness-levelbar {
min-height: 200px; min-height: 200px;
min-width: 20px; min-width: 20px;
max-width: 20px;
margin-top: 0; margin-top: 0;
margin-bottom: 0; margin-bottom: 0;
margin-left: auto; margin-left: auto;
@@ -77,10 +92,14 @@ window.pinenote-shell-widget button {
border: 1px solid #61afef; border: 1px solid #61afef;
border-radius: 6px; border-radius: 6px;
padding: 12px; padding: 12px;
margin: 8px; margin-top: 8px;
margin-bottom: 8px;
margin-left: 8px;
margin-right: 8px;
color: #ffffff; color: #ffffff;
/* E-ink: no hover transitions */ /* E-ink: no hover transitions */
transition: none; transition-property: none;
transition-duration: 0s;
} }
window.pinenote-shell-widget button:hover { window.pinenote-shell-widget button:hover {
@@ -89,7 +108,10 @@ window.pinenote-shell-widget button:hover {
} }
window.pinenote-shell-widget .brightness-button { window.pinenote-shell-widget .brightness-button {
padding: 8px; padding-top: 8px;
padding-bottom: 8px;
padding-left: 8px;
padding-right: 8px;
min-width: 60px; min-width: 60px;
} }
@@ -99,6 +121,6 @@ window.pinenote-shell-widget .waveform-label {
margin-bottom: 8px; margin-bottom: 8px;
} }
window.pinenote-shell-widget Icon { window.pinenote-shell-widget icon {
color: #61afef; color: #61afef;
} }