M1ngdaXie/MingdaOS
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(pixel): restyle window — sharp corners, opaque bg, cyan title, hard shadow

Browse Source
This commit is contained in:
M1ngdaXie
2026-03-26 15:18:48 -07:00
parent f70c258d98
commit 50cb8d50ac
1 changed files with 19 additions and 14 deletions
Download Patch File Download Diff File Expand all files Collapse all files

33
src/components/Window/Window.css
View File

@@ -1,27 +1,30 @@
.window { .window {
background: var(--glass-bg); background: #0d0d1a;
backdrop-filter: var(--glass-blur); border: 2px solid #333333;
-webkit-backdrop-filter: var(--glass-blur); border-radius: 0;
border: 1px solid var(--glass-border); box-shadow: var(--pixel-shadow);
border-radius: var(--radius-window);
box-shadow: var(--glass-shadow);
display: flex; display: flex;
flex-direction: column; flex-direction: column;
overflow: hidden; overflow: hidden;
transition: opacity 0.15s; transition: opacity 0.15s;
} }
.window--focused {
border-color: rgba(0, 255, 255, 0.4);
}
.window--unfocused { .window--unfocused {
opacity: 0.72; opacity: 0.72;
} }
.window-titlebar { .window-titlebar {
height: var(--titlebar-height); height: var(--titlebar-height);
background: #111122;
display: flex; display: flex;
align-items: center; align-items: center;
padding: 0 12px; padding: 0 12px;
cursor: move; cursor: move;
border-bottom: 1px solid var(--glass-border); border-bottom: 2px solid #333333;
flex-shrink: 0; flex-shrink: 0;
gap: 8px; gap: 8px;
position: relative; position: relative;
@@ -36,15 +39,15 @@
.traffic-light { .traffic-light {
width: 12px; width: 12px;
height: 12px; height: 12px;
border-radius: 50%; border-radius: 0;
border: none; border: 1px solid rgba(0,0,0,0.5);
cursor: pointer; cursor: pointer;
position: relative; position: relative;
transition: filter 0.1s; transition: filter 0.1s;
} }
.window--unfocused .traffic-light { .window--unfocused .traffic-light {
background: #666 !important; background: #444 !important;
} }
.traffic-light--close { background: var(--accent-red); } .traffic-light--close { background: var(--accent-red); }
@@ -63,20 +66,22 @@
justify-content: center; justify-content: center;
font-size: 8px; font-size: 8px;
font-weight: 700; font-weight: 700;
color: rgba(0,0,0,0.6); color: rgba(0,0,0,0.7);
line-height: 1; line-height: 1;
} }
.window-title { .window-title {
flex: 1; flex: 1;
text-align: center; text-align: center;
font-size: 13px; font-size: 9px;
font-weight: 500; font-weight: 400;
color: rgba(255,255,255,0.85); color: var(--pixel-cyan);
pointer-events: none; pointer-events: none;
position: absolute; position: absolute;
left: 50%; left: 50%;
transform: translateX(-50%); transform: translateX(-50%);
letter-spacing: 1px;
white-space: nowrap;
} }
.window-content { .window-content {