fix(widgets): update gaufre CSS layout

This commit is contained in:
2026-03-06 11:41:06 +00:00
parent 0e7ca43028
commit 2399046b1b

View File

@@ -12,10 +12,10 @@
z-index: 1000; z-index: 1000;
width: 340px; width: 340px;
max-height: 480px; max-height: 480px;
background: white; background: var(--c--globals--colors--blue-1-900, #121c2d);
border-radius: 0.25rem; border-radius: 0.25rem;
box-shadow: 0 0px 6px rgba(0, 0, 145, 0.1); box-shadow: 0 0px 6px rgba(0, 0, 0, 0.3);
border: 1px solid #e5e5e5; border: 1px solid rgba(255, 255, 255, 0.1);
overflow: hidden; overflow: hidden;
} }
@@ -25,7 +25,7 @@
align-items: center; align-items: center;
padding: 4px 16px; padding: 4px 16px;
background: transparent; background: transparent;
border-bottom: 1px solid #dfe2ea; border-bottom: 1px solid rgba(255, 255, 255, 0.1);
min-height: 48px; min-height: 48px;
position: relative; position: relative;
} }
@@ -46,7 +46,7 @@
#close { #close {
background: none; background: none;
border: none; border: none;
color: #64748b; color: rgba(255, 255, 255, 0.6);
cursor: pointer; cursor: pointer;
font-size: 36px; font-size: 36px;
width: 36px; width: 36px;
@@ -59,23 +59,23 @@
} }
#close:hover { #close:hover {
background-color: #f0f0f0; background-color: rgba(255, 255, 255, 0.08);
} }
#close:focus { #close:focus {
outline: 2px solid #0a76f6; outline: 2px solid var(--c--globals--colors--brand-500, #0a76f6);
} }
#footer { #footer {
display: none; /* Hidden by default on desktop */ display: none; /* Hidden by default on desktop */
padding: 16px; padding: 16px;
background: transparent; background: transparent;
border-top: 1px solid #dfe2ea; border-top: 1px solid rgba(255, 255, 255, 0.1);
justify-content: flex-end; justify-content: flex-end;
} }
#ok-button { #ok-button {
background: #3e5de7; background: var(--c--globals--colors--brand-500, #3e5de7);
color: white; color: white;
border: none; border: none;
border-radius: 6px; border-radius: 6px;
@@ -88,11 +88,11 @@
} }
#ok-button:hover { #ok-button:hover {
background: #1d4ed8; background: var(--c--globals--colors--brand-600, #1d4ed8);
} }
#ok-button:focus { #ok-button:focus {
outline: 2px solid #0a76f6; outline: 2px solid var(--c--globals--colors--brand-500, #0a76f6);
} }
#content { #content {
@@ -109,7 +109,7 @@
align-items: center; align-items: center;
justify-content: center; justify-content: center;
padding: 40px 20px; padding: 40px 20px;
color: #666; color: rgba(255, 255, 255, 0.5);
font-size: 14px; font-size: 14px;
margin: 16px; margin: 16px;
} }
@@ -158,7 +158,7 @@
/* More apps section */ /* More apps section */
#more-apps { #more-apps {
border-top: 1px solid #dfe2ea; border-top: 1px solid rgba(255, 255, 255, 0.1);
padding: 16px; padding: 16px;
background: transparent; background: transparent;
display: flex; display: flex;
@@ -184,7 +184,7 @@
#show-more-button { #show-more-button {
background: none; background: none;
color: #626A80; color: rgba(255, 255, 255, 0.6);
border: none; border: none;
border-radius: 6px; border-radius: 6px;
padding: 8px 16px; padding: 8px 16px;
@@ -199,8 +199,8 @@
} }
#show-more-button:hover { #show-more-button:hover {
background: #f1f5f9; background: rgba(255, 255, 255, 0.06);
color: #475569; color: rgba(255, 255, 255, 0.8);
} }
#show-more-button:focus { #show-more-button:focus {
@@ -208,7 +208,7 @@
} }
#show-more-button:focus-visible { #show-more-button:focus-visible {
outline: 2px solid #0a76f6; outline: 2px solid var(--c--globals--colors--brand-500, #0a76f6);
outline-offset: 2px; outline-offset: 2px;
} }
@@ -223,7 +223,7 @@
} }
.service-card:hover { .service-card:hover {
background-color: #eef1f4; background-color: rgba(255, 255, 255, 0.06);
border-radius: 6px; border-radius: 6px;
} }
@@ -247,8 +247,8 @@
top: 40px; top: 40px;
left: 50%; left: 50%;
transform: translateX(-50%); transform: translateX(-50%);
background: #eef1f4; background: rgba(255, 255, 255, 0.1);
color: #2845c1; color: var(--c--globals--colors--brand-700, #2845c1);
border-radius: 12px; border-radius: 12px;
padding: 2px 4px; padding: 2px 4px;
font-size: 9px; font-size: 9px;
@@ -271,7 +271,7 @@
.service-name { .service-name {
font-weight: 600; font-weight: 600;
font-size: 14px; font-size: 14px;
color: #1e40af; color: var(--c--globals--colors--brand-400, #fbbf24);
margin-bottom: 2px; margin-bottom: 2px;
line-height: 1.2; line-height: 1.2;
text-align: center; text-align: center;
@@ -301,7 +301,7 @@
#more-services-grid { #more-services-grid {
display: grid !important; display: grid !important;
} }
#show-more-button { #show-more-button {
display: none; display: none;
} }
@@ -355,10 +355,10 @@
} }
#content::-webkit-scrollbar-thumb { #content::-webkit-scrollbar-thumb {
background: #cbd5e1; background: rgba(255, 255, 255, 0.2);
border-radius: 2px; border-radius: 2px;
} }
#content::-webkit-scrollbar-thumb:hover { #content::-webkit-scrollbar-thumb:hover {
background: #94a3b8; background: rgba(255, 255, 255, 0.35);
} }