diff --git a/pinenote-shell/style.css b/pinenote-shell/style.css index 088ec1b..18d9a15 100644 --- a/pinenote-shell/style.css +++ b/pinenote-shell/style.css @@ -1,30 +1,10 @@ -* { - 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 { +.pinenote-shell-widget { background-color: rgba(20, 20, 30, 0.95); color: #ffffff; 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-weight: bold; color: #61afef; @@ -34,80 +14,84 @@ window.pinenote-shell-widget .title-big { margin-right: 16px; } -window.pinenote-shell-widget .header { +.pinenote-shell-widget .header { background-color: rgba(0, 0, 0, 0.3); padding-top: 8px; padding-bottom: 8px; padding-left: 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); - padding: 16px; + padding-top: 16px; + padding-bottom: 16px; + padding-left: 16px; + padding-right: 16px; margin-top: 8px; margin-bottom: 8px; margin-left: 16px; margin-right: 16px; - border-radius: 6px; - border: 1px solid rgba(255, 255, 255, 0.1); + border-width: 1px; + border-style: solid; + border-color: rgba(255, 255, 255, 0.1); } -window.pinenote-shell-widget .title { +.pinenote-shell-widget .title { font-size: 18px; font-weight: bold; color: #98c379; margin-bottom: 12px; } -window.pinenote-shell-widget .brightness-levelbar { +.pinenote-shell-widget .brightness-levelbar { min-height: 200px; min-width: 20px; - margin-top: 0; - margin-bottom: 0; - margin-left: auto; - margin-right: auto; 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; } -window.pinenote-shell-widget .footer { - padding: 16px; +.pinenote-shell-widget .footer { + padding-top: 16px; + padding-bottom: 16px; + padding-left: 16px; + padding-right: 16px; background-color: rgba(0, 0, 0, 0.3); font-size: 12px; color: #7f848f; } -window.pinenote-shell-widget .status-label { +.pinenote-shell-widget .status-label { padding-left: 16px; } -window.pinenote-shell-widget button { +.pinenote-shell-widget button { background-color: rgba(97, 175, 239, 0.2); - border: 1px solid #61afef; - border-radius: 6px; - padding: 12px; + border-width: 1px; + border-style: solid; + border-color: #61afef; + padding-top: 12px; + padding-bottom: 12px; + padding-left: 12px; + padding-right: 12px; margin-top: 8px; margin-bottom: 8px; margin-left: 8px; margin-right: 8px; 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); - /* E-ink: avoid transform/scale which causes ghosting */ } -window.pinenote-shell-widget .brightness-button { +.pinenote-shell-widget .brightness-button { padding-top: 8px; padding-bottom: 8px; padding-left: 8px; @@ -115,12 +99,12 @@ window.pinenote-shell-widget .brightness-button { min-width: 60px; } -window.pinenote-shell-widget .waveform-label { +.pinenote-shell-widget .waveform-label { font-size: 14px; color: #c678dd; margin-bottom: 8px; } -window.pinenote-shell-widget icon { +.pinenote-shell-widget icon { color: #61afef; }