fegger/pineNoteShell
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Refactor pinenote-shell CSS for GTK compatibility

Browse Source 
Remove global reset and `window.` element prefixing. Expand shorthand
properties to explicit directional forms and drop unsupported
`border-radius`/`transition`/`animation` rules that break GTK CSS
parsing.
This commit is contained in:
Florian Egger
2026-07-13 14:42:04 +02:00
parent c88527b4bd
commit 2ba6f472ea
1 changed files with 35 additions and 51 deletions
Download Patch File Download Diff File Expand all files Collapse all files
pinenote-shell/style.css
+35 -51
View File
@@ -1,30 +1,10 @@
* { .pinenote-shell-widget {
margin-top: 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 */
transition-property: none;
transition-duration: 0s;
animation: none;
}
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;
margin-top: 16px;
margin-bottom: 16px;
margin-left: 16px;
margin-right: 16px;
} }
window.pinenote-shell-widget .title-big { .pinenote-shell-widget .title-big {
font-size: 24px; font-size: 24px;
font-weight: bold; font-weight: bold;
color: #61afef; color: #61afef;
@@ -34,80 +14,84 @@ window.pinenote-shell-widget .title-big {
margin-right: 16px; margin-right: 16px;
} }
window.pinenote-shell-widget .header { .pinenote-shell-widget .header {
background-color: rgba(0, 0, 0, 0.3); background-color: rgba(0, 0, 0, 0.3);
padding-top: 8px; padding-top: 8px;
padding-bottom: 8px; padding-bottom: 8px;
padding-left: 8px; padding-left: 8px;
padding-right: 8px; padding-right: 8px;
border-bottom: 1px solid rgba(255, 255, 255, 0.1); border-bottom-width: 1px;
border-bottom-style: solid;
border-bottom-color: rgba(255, 255, 255, 0.1);
} }
window.pinenote-shell-widget .section { .pinenote-shell-widget .section {
background-color: rgba(255, 255, 255, 0.05); background-color: rgba(255, 255, 255, 0.05);
padding: 16px; padding-top: 16px;
padding-bottom: 16px;
padding-left: 16px;
padding-right: 16px;
margin-top: 8px; margin-top: 8px;
margin-bottom: 8px; margin-bottom: 8px;
margin-left: 16px; margin-left: 16px;
margin-right: 16px; margin-right: 16px;
border-radius: 6px; border-width: 1px;
border: 1px solid rgba(255, 255, 255, 0.1); border-style: solid;
border-color: rgba(255, 255, 255, 0.1);
} }
window.pinenote-shell-widget .title { .pinenote-shell-widget .title {
font-size: 18px; font-size: 18px;
font-weight: bold; font-weight: bold;
color: #98c379; color: #98c379;
margin-bottom: 12px; margin-bottom: 12px;
} }
window.pinenote-shell-widget .brightness-levelbar { .pinenote-shell-widget .brightness-levelbar {
min-height: 200px; min-height: 200px;
min-width: 20px; min-width: 20px;
margin-top: 0;
margin-bottom: 0;
margin-left: auto;
margin-right: auto;
background-color: rgba(255, 255, 255, 0.05); background-color: rgba(255, 255, 255, 0.05);
border-radius: 10px;
} }
window.pinenote-shell-widget .brightness-levelbar.fill-block { .pinenote-shell-widget .brightness-levelbar.fill-block {
background-color: #e5c07b; background-color: #e5c07b;
} }
window.pinenote-shell-widget .footer { .pinenote-shell-widget .footer {
padding: 16px; padding-top: 16px;
padding-bottom: 16px;
padding-left: 16px;
padding-right: 16px;
background-color: rgba(0, 0, 0, 0.3); background-color: rgba(0, 0, 0, 0.3);
font-size: 12px; font-size: 12px;
color: #7f848f; color: #7f848f;
} }
window.pinenote-shell-widget .status-label { .pinenote-shell-widget .status-label {
padding-left: 16px; padding-left: 16px;
} }
window.pinenote-shell-widget button { .pinenote-shell-widget button {
background-color: rgba(97, 175, 239, 0.2); background-color: rgba(97, 175, 239, 0.2);
border: 1px solid #61afef; border-width: 1px;
border-radius: 6px; border-style: solid;
padding: 12px; border-color: #61afef;
padding-top: 12px;
padding-bottom: 12px;
padding-left: 12px;
padding-right: 12px;
margin-top: 8px; margin-top: 8px;
margin-bottom: 8px; margin-bottom: 8px;
margin-left: 8px; margin-left: 8px;
margin-right: 8px; margin-right: 8px;
color: #ffffff; color: #ffffff;
/* E-ink: no hover transitions */
transition-property: none;
transition-duration: 0s;
} }
window.pinenote-shell-widget button:hover { .pinenote-shell-widget button:hover {
background-color: rgba(97, 175, 239, 0.4); background-color: rgba(97, 175, 239, 0.4);
/* E-ink: avoid transform/scale which causes ghosting */
} }
window.pinenote-shell-widget .brightness-button { .pinenote-shell-widget .brightness-button {
padding-top: 8px; padding-top: 8px;
padding-bottom: 8px; padding-bottom: 8px;
padding-left: 8px; padding-left: 8px;
@@ -115,12 +99,12 @@ window.pinenote-shell-widget .brightness-button {
min-width: 60px; min-width: 60px;
} }
window.pinenote-shell-widget .waveform-label { .pinenote-shell-widget .waveform-label {
font-size: 14px; font-size: 14px;
color: #c678dd; color: #c678dd;
margin-bottom: 8px; margin-bottom: 8px;
} }
window.pinenote-shell-widget icon { .pinenote-shell-widget icon {
color: #61afef; color: #61afef;
} }