diff --git a/styles/notification-center.css b/styles/notification-center.css index 6cbe787..96f5950 100644 --- a/styles/notification-center.css +++ b/styles/notification-center.css @@ -2,7 +2,7 @@ background-color: transparent; /* border: 1px solid alpha(#111, 0.3); */ - border-radius: 10px; + border-radius: 20px; margin-right: 10px; /* padding: 20px; */ /* margin: 6px; */ @@ -10,13 +10,14 @@ #noti-clear-button label { /* min-width: 10px; */ - background-color: alpha(#202828, 0.8); + background-color: alpha(#1c2328, 0.05); + min-height: 25px; min-width: 70px; font-size: 15px; - font-weight: 500; + /* font-weight: bol; */ font-family: "SF Pro Rounded"; - border: 1.5px solid #525155; + border: 1px solid #525155; border-radius: 15px; margin-top: 10px; } @@ -32,7 +33,7 @@ /* Single notification (no stacking) */ #single-notification-content { - background-color: alpha(#202828, 0.8); + background-color: alpha(#1c2328, 0.05); border: 1.5px solid #525155; border-radius: 12px; padding: 12px; @@ -52,32 +53,34 @@ /* Bottom shadow layer (deepest) - offset to show stacking from below */ #stack-shadow-bottom { - background-color: alpha(#202828, 0.9); - border: 1.5px solid #525155; + background-color: alpha(#1c2328, 0.05); + border-top: 1px solid #525155; border-radius: 12px; opacity: 1; min-height: 16px; margin-left: 20px; margin-right: -4px; - margin-bottom: -8px; + margin-bottom: -10px; } /* Middle shadow layer */ #stack-shadow-middle { - background-color: alpha(#202828, 0.9); - border: 1.5px solid #525155; + background-color: alpha(#1c2328, 0.05); + + border-top: 1px solid #525155; border-radius: 12px; opacity: 1; min-height: 20px; margin-left: 10px; margin-right: -2px; - margin-bottom: -12px; + margin-bottom: -14px; } /* Main notification content (top layer) */ #stack-main-notification { - background-color: alpha(#202828, 1); - border: 1.5px solid #525155; + background-color: alpha(#1c2328, 0.05); + + border: 1.2px solid #525155; border-radius: 12px; padding: 12px; transition: all 0.2s ease; @@ -235,7 +238,7 @@ } #notification-show-less { font-family: "SF Pro Rounded"; - background-color: alpha(#111, 0.9); + background-color: alpha(#1c2328, 0.05); font-size: 12px; margin: 10px; border-radius: 15px; @@ -243,7 +246,7 @@ #notification-close-all { margin: 10px 10px 10px 0; - background-color: alpha(#111, 0.9); + background-color: alpha(#1c2328, 0.05); border-radius: 15px; } @@ -266,10 +269,10 @@ font-size: 13px; } #notification-centre-notifs { - background-color: alpha(#1c2328, 0.8); + background-color: alpha(#1c2328, 0.05); min-height: 40px; padding: 10px; - border: 1.5px solid #525155; + border: 1px solid #525155; border-radius: 12px; } @@ -282,7 +285,6 @@ } #notification-close, #notification-close-header { - background-color: alpha(#444, 0.8); min-width: 23px; min-height: 23px; border-radius: 50%; diff --git a/styles/widgets.css b/styles/widgets.css index 1ab6318..9a3377d 100644 --- a/styles/widgets.css +++ b/styles/widgets.css @@ -1,6 +1,7 @@ /* Weather Widget CSS */ #weather-container { background: linear-gradient(to bottom, #202020, #141414); + margin: 5px 5px 20px 5px; min-width: 170px; min-height: 170px; border-radius: 16px; @@ -14,7 +15,7 @@ #city { margin-top: 10px; - color: #6fb4c3; + color: #859aff; font-weight: 600; font-size: 20px; } @@ -41,7 +42,7 @@ /* Calendar Widget */ #calendar-box-widget { background: linear-gradient(to bottom, #202020, #141414); - margin: 20px 20px 20px 10px; + margin: 5px 20px 20px 10px; min-width: 170px; min-height: 170px; border-radius: 16px; @@ -55,7 +56,7 @@ #calendar-month { font-size: 16px; font-weight: 600; - color: #6fb4c3; + color: #859aff; margin-bottom: 8px; } @@ -100,7 +101,7 @@ font-size: 12px; font-weight: 700; color: #191919; - background-color: #6fb4c3; + background-color: #859aff; border-radius: 50%; min-width: 18px; min-height: 16px; @@ -139,12 +140,12 @@ font-weight: 600; } #day label { - color: alpha(#6fb4c3, 0.9); + color: alpha(#859aff, 0.9); } #date-container { background: linear-gradient(to bottom, #202020, #141414); - margin: 20px 10px 20px 5px; + margin: 5px 10px 20px 5px; min-width: 170px; min-height: 170px; border-radius: 16px; @@ -170,14 +171,14 @@ } #progress { font-family: "SF Pro Rounded"; - border: solid 8px #6fb4c3; + border: solid 8px #859aff; color: alpha(#aaaaaa, 0.7); } /* Color indicators for memory usage */ #used-color-indicator { - color: #6fb4c3; + color: #859aff; font-size: 10px; font-weight: 900; } @@ -189,7 +190,7 @@ } #temp-color-indicator { - color: #6fb4c3; + color: #859aff; font-size: 10px; font-weight: 900; }