From d3f5d2b6acc9e89699201b945baa52f09fa0fe63 Mon Sep 17 00:00:00 2001 From: tr1x_em Date: Mon, 4 Aug 2025 14:31:07 +0530 Subject: [PATCH] Prettier --- config/assets/dock.json | 20 ++- config/data.py | 2 +- main.css | 319 +-------------------------------- modules/widget.py | 4 +- styles/about.css | 85 ++++----- styles/controlcenter.css | 5 +- styles/dropdown.css | 4 +- styles/launcher.css | 12 +- styles/notification-center.css | 6 +- styles/notification.css | 5 - styles/panel.css | 20 ++- styles/tray.css | 50 ++++++ styles/widgets.css | 226 +++++++++++++++++++++++ 13 files changed, 364 insertions(+), 394 deletions(-) create mode 100644 styles/tray.css create mode 100644 styles/widgets.css diff --git a/config/assets/dock.json b/config/assets/dock.json index 41c04ec..e6d4377 100644 --- a/config/assets/dock.json +++ b/config/assets/dock.json @@ -1,19 +1,25 @@ { "pinned_apps": [ { - "name": "kitty", - "display_name": "kitty", - "executable": "kitty", - "command_line": "kitty", - "icon_name": "kitty" + "name": "Bulk Rename", + "display_name": "Bulk Rename", + "window_class": null, + "executable": "thunar", + "command_line": "thunar --bulk-rename %F" + }, + { + "name": "Ghostty", + "display_name": "Ghostty", + "window_class": "com.mitchellh.ghostty", + "executable": "ghostty", + "command_line": "ghostty" }, { "name": "Zen Browser", "display_name": "Zen Browser", "window_class": "zen", "executable": "/opt/zen-browser-bin/zen-bin", - "command_line": "/opt/zen-browser-bin/zen-bin %u", - "icon_name": "zen-browser" + "command_line": "/opt/zen-browser-bin/zen-bin %u" }, { "name": "Visual Studio Code", diff --git a/config/data.py b/config/data.py index 1a9609a..b4f7c9a 100644 --- a/config/data.py +++ b/config/data.py @@ -56,7 +56,7 @@ CURRENT_WIDTH = screen.get_width() CURRENT_HEIGHT = screen.get_height() -WALLPAPERS_DIR_DEFAULT = get_relative_path("../assets/wallpapers_example") +WALLPAPERS_DIR_DEFAULT = get_relative_path("../../../Pictures/Wallpapers") CONFIG_FILE = get_relative_path("../config/assets/config.json") MATUGEN_STATE_FILE = os.path.join(CONFIG_DIR, "matugen") diff --git a/main.css b/main.css index cd784bb..ab97009 100644 --- a/main.css +++ b/main.css @@ -10,12 +10,14 @@ @import url("./styles/about.css"); @import url("./styles/notification-center.css"); @import url("./styles/player.css"); +@import url("./styles/widgets.css"); +@import url("./styles/tray.css"); * { all: unset; color: var(--foreground); - font-size: 12px; - font-family: unset; + font-size: 13px; + font-family: "SF Pro Rounded"; } #corner { @@ -27,316 +29,3 @@ min-width: 20px; min-height: 20px; } - -tooltip { - border: #474747 solid 1px; - border-radius: 0.75rem; - background-color: alpha(#fff, 0.05); -} - -@keyframes tooltipShow { - from { - opacity: 0; - } - - to { - opacity: 1; - } -} - -tooltip > * { - padding: 3px 10px; - border-radius: 0.75rem; -} - -menu { - border: #474747 solid 1px; - border-radius: 0.75rem; - transition: all 100ms ease-in-out; - background-color: alpha(#fff, 0.05); -} - -menu > menuitem { - padding: 5px 10px; - margin: 1px 2px; - border-bottom: #474747 solid 1px; -} - -menu > menuitem:last-child { - border-bottom: none; -} -menu > menuitem:hover { - transition: all 20ms ease-in-out; - border-radius: 4px; - color: #222; - background-color: alpha(#2369ff, 1); -} - -menu > menuitem:hover > label { - font-size: 12px; - color: #fff; - font-weight: 400; -} - - - - - - - - - - -#box-widget-2{ - /* background-color: alpha(#1C1C1C, 1); */ - background: linear-gradient(to bottom, #202020, #141414); - min-width: 170px; - min-height: 170px; - border-radius: 16px; -} - -#weather-widget label{ - font-family: "SF Pro Rounded"; - /* font-size: 20px; */ - margin-left: 12px; -} - -#city { - margin-top: 10px; - color: #8b92ff; - font-weight: 600; - font-size: 20px; - -} -#temperature { - font-size: 50px; - font-weight: 400; -} - -#condition-emoji{ - margin-top: 5px; - font-size: 16px; -} - -#condition { - font-size: 15px; - font-weight: 600; -} -#feels-like { - - font-weight: 600; - font-size: 15px; -} -/* # */ - -/* Calendar Widget */ -#calendar-box-widget { - background: linear-gradient(to bottom, #202020, #141414); - margin: 20px 20px 20px 10px; - min-width: 170px; - min-height: 170px; - border-radius: 16px; -} - -#calendar-widget { - font-family: "SF Pro Rounded"; - margin: 12px; -} - -#calendar-month { - font-size: 16px; - font-weight: 600; - color: #8b92ff; - margin-bottom: 8px; -} - -#calendar-days-header { - margin-bottom: 6px; -} - -#calendar-day-header { - font-size: 12px; - font-weight: 600; - color: #ffffff; - min-width: 18px; - min-height: 16px; -} - -#calendar-day-header-weekend { - font-size: 12px; - font-weight: 600; - color: #8E8D93; - min-width: 18px; - min-height: 16px; -} - -#calendar-day { - font-size: 12px; - margin:1.4px 0px 1.4px 0px; - font-weight: 500; - color: #ffffff; - min-width: 18px; - min-height: 16px; -} - -#calendar-day-weekend { - font-size: 12px; - font-weight: 500; - color: #8E8D93; - min-width: 18px; - min-height: 16px; -} - -#calendar-day-today { - font-size: 12px; - font-weight: 700; - color: #191919; - background-color: #8b92ff; - border-radius: 50%; - min-width: 18px; - min-height: 16px; - padding: 2px; -} - -#calendar-day-empty { - min-width: 18px; - min-height: 16px; -} - -#calendar-grid { - margin-top: 2px; -} - - - - - - - - - - - - - - - - - -#date-widget label { - font-family: "SF Pro Rounded"; - margin-top: 10px; -} -#day label, -#month label{ - color: var(--foreground); - padding: 5px; - margin-top: 10px; - font-size: 30px; - color: alpha(#fff, 0.9); - font-weight: 600; -} - -#date label{ - color: alpha(#fff, 0.9); - - margin-top: -10px; - font-size: 90px; - font-weight: 600; -} -#day label{ - - color: alpha(#8b92ff, 0.9); -} -#box-widget{ - /* background-color: alpha(#232323, 1); */ - background: linear-gradient(to bottom, #202020, #141414); - margin: 20px 20px 20px 20px; - min-width: 170px; - min-height: 170px; - border-radius: 16px; -} -#info-box-widget{ - /* background-color: alpha(#232323, 1); */ - background: linear-gradient(to bottom, #202020, #000000); - margin: 20px 10px 20px 10px; - min-width: 170px; - min-height: 170px; - border-radius: 16px; -} -#ram-progress{ - font-family: "SF Pro Rounded"; - margin-left: 12px; - color: var(--foreground); - /* background-color: alpha(#72BBCC, 0.9); */ -} -#progress-label{ - /* background-color: alpha(#FFF, 0.9); */ - - font-family: "SF Pro Rounded"; - font-weight:600; - font-size: 13px; -} -#progress{ - font-family: "SF Pro Rounded"; - border: solid 8px #8b92ff; - - /* border-radius: 100px; */ - color: alpha(#AAAAAA, 0.7); -} - -/* Color indicators for memory usage */ -#used-color-indicator { - color: #8b92ff; - font-size: 10px; - font-weight: 900; -} - -#free-color-indicator { - color: #7C7C7C; - font-size: 10px; - font-weight: 900; -} - -#temp-color-indicator { - color: #8b92ff; - font-size: 10px; - font-weight: 900; -} - -/* Info text styling */ -#info-text { - font-family: "SF Pro Rounded"; - font-size: 13px; - font-weight: 500; - color: #8E8E8E; - min-width: 32px; -} - -#info-value { - font-family: "SF Pro Rounded"; - font-size: 12px; - font-weight: 600; - color: #ffffff; -} - -#info-container { - margin-left: -8px; - margin-top: 5px; -} - -#info { - - - font-family: "SF Pro Rounded"; - margin-left: -13px; - margin-top: 5px; - font-size:14px; - font-weight:600; - /* margin-bottom:-10px; */ - /* margin-top:-35px; */ -} -#component-name{ - - font-size: 10px; -} diff --git a/modules/widget.py b/modules/widget.py index 930219c..5746307 100644 --- a/modules/widget.py +++ b/modules/widget.py @@ -156,7 +156,7 @@ class WeatherContainer(Box): def __init__(self, **kwargs): super().__init__( orientation="v", - name="box-widget-2", + name="weather-container", v_expand=True, v_align="center", size=(170, 170), @@ -200,7 +200,7 @@ class DateContainer(Box): def __init__(self, **kwargs): super().__init__( orientation="v", - name="box-widget", + name="date-container", v_expand=True, size=(170, 170), v_align="center", diff --git a/styles/about.css b/styles/about.css index 0f6c718..77ace66 100644 --- a/styles/about.css +++ b/styles/about.css @@ -1,78 +1,79 @@ #about-menu { - background-color: alpha(#000, 0.34); + background-color: alpha(#000, 0.34); - box-shadow: inset 0 -0.5px 0 .5px alpha(#555, 0.7), inset 0 0.5px 0 .5px alpha(#777, 0.7); - border: 1px solid alpha(#111, 0.3); - border-top: none; - border-radius: 1.25rem; - padding: 2rem; + box-shadow: + inset 0 -0.5px 0 0.5px alpha(#555, 0.7), + inset 0 0.5px 0 0.5px alpha(#777, 0.7); + border: 1px solid alpha(#111, 0.3); + border-top: none; + border-radius: 1.25rem; + padding: 2rem; } #about-options { - background-color: alpha(#333, 0.9); - border-radius: 15px; - padding: 2rem; + background-color: alpha(#333, 0.9); + border-radius: 15px; + padding: 2rem; } #about-logo-box { - margin-top: 2rem; - margin-bottom: 2rem; + margin-top: 2rem; + margin-bottom: 2rem; } #about-button-box { - padding: 1rem; + padding: 1rem; } -#vendor-label{ - color: #999999; - margin-top : -1rem; +#vendor-label { + color: #999999; + margin-top: -1rem; } -#info-label{ - color: #888888; +#info-label { + color: #888888; } #about-info-title-box { - padding-left: 4rem; + padding-left: 4rem; } #about-name-label { - font-size: 24px; - margin: 0px; - font-weight: 600; + font-size: 24px; + margin: 0px; + font-weight: 600; } #about-date-label { - font-size: 11px; - margin: 0px; - color: #ddd; - font-weight: 400; - margin-bottom: 2rem; + font-size: 11px; + margin: 0px; + color: #ddd; + font-weight: 400; + margin-bottom: 2rem; } #about-chip-title-label, #about-so-title-label, #about-mem-title-label { - font-size: 12px; - margin: 0px; - margin-right: 10px; - font-weight: 500; + font-size: 12px; + margin: 0px; + margin-right: 10px; + font-weight: 500; } #more-info-button { - background-color: #888888; - border-radius: 5px; - padding: 0px 10px; - margin: 1px 2px; - transition: all 200ms ease-in-out; + background-color: #888888; + border-radius: 5px; + padding: 0px 10px; + margin: 1px 2px; + transition: all 200ms ease-in-out; } #more-info-button:hover { - background-color: rgb(72, 130, 255); - background-color: #2369ff; + background-color: rgb(72, 130, 255); + background-color: #2369ff; } #more-info-button label { - font-size: 12px; - margin: 0px; - font-weight: 400; - color: #fff; + font-size: 12px; + margin: 0px; + font-weight: 400; + color: #fff; } - diff --git a/styles/controlcenter.css b/styles/controlcenter.css index 9e20346..d11b30d 100644 --- a/styles/controlcenter.css +++ b/styles/controlcenter.css @@ -5,7 +5,6 @@ margin: 0; } - #control-center-widgets { background-color: alpha(#fff, 0.09); box-shadow: inset 0 0 0 1px alpha(#aaa, 0.4); @@ -14,7 +13,6 @@ padding: 0.5rem; } - /* Widgets */ #wifi-widget, #bluetooth-widget { @@ -215,7 +213,8 @@ border-radius: 16px; min-width: 16px; min-height: 8px; - transition: background-color 0.1s cubic-bezier(0.5, 0.25, 0, 1.25), + transition: + background-color 0.1s cubic-bezier(0.5, 0.25, 0, 1.25), transform 0.25s cubic-bezier(0.5, 0.25, 0, 1.25); } diff --git a/styles/dropdown.css b/styles/dropdown.css index e0deca2..cc1b507 100644 --- a/styles/dropdown.css +++ b/styles/dropdown.css @@ -1,5 +1,6 @@ #dropdown-menu { background-color: transparent; + border-radius: 0.75rem; margin: 0; } @@ -27,7 +28,8 @@ } #dropdown-option-label { - font-size: 12px; + font-size: 13px; + font-family: "SF Pro Rounded"; margin: 0px; color: #fff; font-weight: 400; diff --git a/styles/launcher.css b/styles/launcher.css index 9b32d41..983bba7 100644 --- a/styles/launcher.css +++ b/styles/launcher.css @@ -1,17 +1,17 @@ #launcher { - background-color: alpha(#000, 0.3); + background-color: alpha(#000, 0.3); padding: 0; border-radius: 12px; min-width: 640px; border: 1px solid rgba(255, 255, 255, 0.1); } -#launcher-search{ - color: #000; +#launcher-search { + color: #000; } #header_box { padding: 0px 20px 0 20px; - color: #000; + color: #000; } #close-button, @@ -38,11 +38,11 @@ } #close-button.focused #close-label { - color: #007AFF; + color: #007aff; } #config-button.focused #config-label { - color: #007AFF; + color: #007aff; } #close-button:active { diff --git a/styles/notification-center.css b/styles/notification-center.css index 4bb5106..4fb3924 100644 --- a/styles/notification-center.css +++ b/styles/notification-center.css @@ -1,5 +1,5 @@ #noti-center-box { - background-color: alpha(#fff, 0.09); + background-color: alpha(#fff, 0.09); border: 1px solid alpha(#111, 0.3); border-radius: 16px; @@ -15,10 +15,10 @@ } #noti-clear-button { - background-color: alpha(#888, 0.09); + background-color: alpha(#888, 0.09); } #noti-clear-button:hover { - background-color: alpha(#fff, 0.09); + background-color: alpha(#fff, 0.09); } /* Stacked notification group styles */ diff --git a/styles/notification.css b/styles/notification.css index 55ed6b0..c88ea95 100644 --- a/styles/notification.css +++ b/styles/notification.css @@ -1,13 +1,8 @@ #notification { padding: 16px; background-color: alpha(#fff, 0.03); - /* border: 0.5px solid alpha(#111, 0.4); */ - /* box-shadow: */ - /* inset 0 0 200px 0 alpha(#111, 0.5), */ - /* inset 0 0 0 0.5px alpha(#aaa, 0.4); */ border-radius: 20px; margin: 4px; - /* transition: all 0.25s cubic-bezier(0.25, 0.46, 0.45, 0.94); */ } #notification-action-buttons button.start-action { diff --git a/styles/panel.css b/styles/panel.css index 78b7f24..0b48f3e 100644 --- a/styles/panel.css +++ b/styles/panel.css @@ -1,19 +1,17 @@ #panel { - background-color: alpha(#fff, 0.05); + background-color: alpha(#fff, 0.05); - font-family: "SF Pro Rounded SemiBold"; border-bottom: 1px solid alpha(#010101, 0.025); - margin-top: -4px; - margin-bottom: -4px; + margin-top: -4px; + margin-bottom: -4px; transition: all 120ms ease-in-out; } #panel-icon { font-size: 18px; } -#global-title-button{ - - font-weight: 600; +#global-title-button { + font-weight: 700; } #panel-button { @@ -26,6 +24,11 @@ background-color: var(--surface-bright); } +#menubar label { + font-family: "SF Pro Rounded"; + font-size: 13px; + /* font-weight: 400; */ +} #battery-button { padding-right: 3px; padding-left: 3px; @@ -69,7 +72,7 @@ #date-time { margin: 0 10px; - font-weight: 500; + font-weight: 500; } #modules-left, @@ -90,7 +93,6 @@ background: radial-gradient(alpha(#aaa, 0.2) 100%, transparent, transparent); } - #modus-button label { font-size: 17px; margin: 0 10px; diff --git a/styles/tray.css b/styles/tray.css new file mode 100644 index 0000000..c4795ea --- /dev/null +++ b/styles/tray.css @@ -0,0 +1,50 @@ +tooltip { + border: #474747 solid 1px; + border-radius: 0.75rem; + background-color: alpha(#fff, 0.05); +} + +@keyframes tooltipShow { + from { + opacity: 0; + } + + to { + opacity: 1; + } +} + +tooltip > * { + padding: 3px 10px; + border-radius: 0.75rem; + font-family: "SF Pro Rounded"; +} + +menu { + border: #474747 solid 1px; + border-radius: 0.75rem; + transition: all 100ms ease-in-out; + background-color: alpha(#fff, 0.05); +} + +menu > menuitem { + padding: 5px 10px; + margin: 1px 2px; + border-bottom: #474747 solid 1px; +} + +menu > menuitem:last-child { + border-bottom: none; +} +menu > menuitem:hover { + transition: all 20ms ease-in-out; + border-radius: 4px; + color: #222; + background-color: alpha(#2369ff, 1); +} + +menu > menuitem:hover > label { + font-size: 12px; + color: #fff; + font-weight: 400; +} diff --git a/styles/widgets.css b/styles/widgets.css new file mode 100644 index 0000000..eccaba1 --- /dev/null +++ b/styles/widgets.css @@ -0,0 +1,226 @@ +/* Weather Widget CSS */ +#weather-container { + background: linear-gradient(to bottom, #202020, #141414); + min-width: 170px; + min-height: 170px; + border-radius: 16px; +} + +#weather-widget label { + font-family: "SF Pro Rounded"; + margin-left: 12px; +} + +#city { + margin-top: 10px; + color: #8b92ff; + font-weight: 600; + font-size: 20px; +} +#temperature { + font-size: 50px; + font-weight: 400; +} + +#condition-emoji { + margin-top: 5px; + font-size: 16px; +} + +#condition { + font-size: 15px; + font-weight: 600; +} +#feels-like { + font-weight: 600; + font-size: 15px; +} +/* # */ + +/* Calendar Widget */ +#calendar-box-widget { + background: linear-gradient(to bottom, #202020, #141414); + margin: 20px 20px 20px 10px; + min-width: 170px; + min-height: 170px; + border-radius: 16px; +} + +#calendar-widget { + font-family: "SF Pro Rounded"; + margin: 12px; +} + +#calendar-month { + font-size: 16px; + font-weight: 600; + color: #8b92ff; + margin-bottom: 8px; +} + +#calendar-days-header { + margin-bottom: 6px; +} + +#calendar-day-header { + font-size: 12px; + font-weight: 600; + color: #ffffff; + min-width: 18px; + min-height: 16px; +} + +#calendar-day-header-weekend { + font-size: 12px; + font-weight: 600; + color: #8e8d93; + min-width: 18px; + min-height: 16px; +} + +#calendar-day { + font-size: 12px; + margin: 1.4px 0px 1.4px 0px; + font-weight: 500; + color: #ffffff; + min-width: 18px; + min-height: 16px; +} + +#calendar-day-weekend { + font-size: 12px; + font-weight: 500; + color: #8e8d93; + min-width: 18px; + min-height: 16px; +} + +#calendar-day-today { + font-size: 12px; + font-weight: 700; + color: #191919; + background-color: #8b92ff; + border-radius: 50%; + min-width: 18px; + min-height: 16px; + padding: 2px; +} + +#calendar-day-empty { + min-width: 18px; + min-height: 16px; +} + +#calendar-grid { + margin-top: 2px; +} + +/* Date Widget CSS */ +#date-widget label { + font-family: "SF Pro Rounded"; + margin-top: 10px; +} +#day label, +#month label { + color: var(--foreground); + padding: 5px; + margin-top: 10px; + font-size: 30px; + color: alpha(#fff, 0.9); + font-weight: 600; +} + +#date label { + color: alpha(#fff, 0.9); + + margin-top: -10px; + font-size: 90px; + font-weight: 600; +} +#day label { + color: alpha(#8b92ff, 0.9); +} + +#date-container { + background: linear-gradient(to bottom, #202020, #141414); + margin: 20px 20px 20px 20px; + min-width: 170px; + min-height: 170px; + border-radius: 16px; +} + +/* System Info Widget CSS */ +#info-box-widget { + background: linear-gradient(to bottom, #202020, #141414); + margin: 20px 10px 20px 10px; + min-width: 170px; + min-height: 170px; + border-radius: 16px; +} +#ram-progress { + font-family: "SF Pro Rounded"; + margin-left: 12px; + color: var(--foreground); +} +#progress-label { + font-family: "SF Pro Rounded"; + font-weight: 600; + font-size: 13px; +} +#progress { + font-family: "SF Pro Rounded"; + border: solid 8px #8b92ff; + + color: alpha(#aaaaaa, 0.7); +} + +/* Color indicators for memory usage */ +#used-color-indicator { + color: #8b92ff; + font-size: 10px; + font-weight: 900; +} + +#free-color-indicator { + color: #7c7c7c; + font-size: 10px; + font-weight: 900; +} + +#temp-color-indicator { + color: #8b92ff; + font-size: 10px; + font-weight: 900; +} + +/* Info text styling */ +#info-text { + font-family: "SF Pro Rounded"; + font-size: 13px; + font-weight: 500; + color: #8e8e8e; + min-width: 32px; +} + +#info-value { + font-family: "SF Pro Rounded"; + font-size: 12px; + font-weight: 600; + color: #ffffff; +} + +#info-container { + margin-left: -8px; + margin-top: 5px; +} + +#info { + font-family: "SF Pro Rounded"; + margin-left: -13px; + margin-top: 5px; + font-size: 14px; + font-weight: 600; +} +#component-name { + font-size: 10px; +}