Skip to content

Polishing the window glass effect #82

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
khang-nd merged 4 commits into from
Oct 27, 2023
Merged

Polishing the window glass effect #82

Changes from 3 commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
c1c12c7
Add glass stripes
hohaicongthuan Oct 17, 2023
8b24de0
Fix glass stripes size
hohaicongthuan Oct 18, 2023
9ec967a
Small adjustments to the glass stripes
hohaicongthuan Oct 22, 2023
8f5a6b3
Move glass effects to glass class
hohaicongthuan Oct 26, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
80 changes: 45 additions & 35 deletions gui/_window.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,19 +4,27 @@
--window-border-radius: 6px;
--window-border-color: rgba(0, 0, 0, 0.7);
--window-background-color: #4580c4;
--window-background: linear-gradient(
--window-background-glass-stripes: linear-gradient(135deg,#fff5 70px, transparent 100px),
linear-gradient(225deg, #fff5 70px, transparent 100px),
linear-gradient(54deg,
#0002 0 4%, #6661 6% 6%, #0002 8% 10%, /* 1st stripe */
#0002 15% 16%, #aaa1 17% 18%, #0002 23% 24%, /* 2nd stripe */
#bbb2 25% 26%, #0002 31% 33%, /* 3rd stripe */
#0002 34% 34.5%, #bbb2 36% 40%, /* 4th stripe */
#0002 41% 41.5%, #bbb2 44% 45%, /* 5th stripe */
#bbb2 46% 47%, #0002 48% 49%, #0002 50% 50.5%, /* 6th stripe */
#0002 56% 56.5%, #bbb2 57% 63%, #0002 67% 69%, /* 7th stripe */
#bbb2 69.5% 70%, #0002 73.5% 74%, /* 8th stripe */
#bbb2 74.5% 79%, #0002 80% 84%, /* 9th stripe */
#aaa2 85% 86%, #0002 87%, #bbb1 90% /* 10th stripe */
) left center/100vw 100vh no-repeat fixed;
--window-background: var(--window-background-glass-stripes),
/* linear-gradient(
to right,
rgba(255, 255, 255, 0.4),
rgba(0, 0, 0, 0.1),
rgba(255, 255, 255, 0.2)
),
linear-gradient(
55deg,
transparent,
rgba(0, 0, 0, 0.1) 20%,
rgba(0, 0, 0, 0.1) 50%,
transparent 53%
),
), */
var(--window-background-color);
--control-border-color: rgba(0, 0, 0, 0.3);
--control-border-radius: 5px;
Expand Down Expand Up @@ -57,7 +65,7 @@

.window {
font: var(--font);
box-shadow: 2px 2px 10px 1px var(--window-border-color);
box-shadow: 2px 2px 10px 1px var(--window-border-color), inset 0 0 0 1px #fffa;
border: var(--window-border) var(--window-border-color);
border-radius: var(--window-border-radius);
position: relative;
Expand All @@ -73,19 +81,19 @@
height: 100%;
border-radius: var(--window-border-radius);
background: linear-gradient(
transparent 20%,
rgba(255, 255, 255, 0.7) 40%,
transparent 41%
),
var(--window-background);
transparent 20%,
rgba(255, 255, 255, 0.7) 40%,
transparent 41%
), var(--window-background);
box-shadow: inset 0 0 0 1px #fffd;
}

&-body {
margin: var(--window-spacing);
margin-top: 0;
border: var(--window-border) var(--window-border-color);
background: var(--surface);
box-shadow: 0 0 1px 0.5px #fff;
box-shadow: 0 0 0 1px #fff9;

&.has-space {
padding: var(--window-spacing);
Expand Down Expand Up @@ -126,7 +134,7 @@
.window-footer,
footer {
background: #eee;
box-shadow: inset 0 1px 3px #ddd;
box-shadow: inset 0 1px 3px #ddd, 0 1px 0 #fff9, 1px 1px 0 #fff9, -1px 1px 0 #fff9;

&::before {
content: none;
Expand All @@ -135,31 +143,33 @@
}

&.glass {
backdrop-filter: blur(1.5px);

&::before {
opacity: 0.5;
filter: brightness(1.4);
opacity: 0.6;
/* filter: brightness(1.2); */
}

&::after {
content: "";
position: absolute;
z-index: -10;
top: 0;
left: 0;
width: 100%;
height: 100%;
border-radius: var(--window-border-radius);
border: none;
backdrop-filter: blur(4px);
}

> .title-bar {
background: linear-gradient(
55deg,
transparent 8%,
rgba(255, 255, 255, 0.1) 10%,
rgba(255, 255, 255, 0.3) 30%,
rgba(0, 0, 0, 0.1) 32%,
rgba(0, 0, 0, 0.3) 55%,
transparent 57%,
rgba(255, 255, 255, 0.3) 70%,
transparent 72%
);
background: var(--window-background-glass-stripes);
}
}

> .title-bar {
border: 0;
box-shadow: inset 0 0.5px #fff;
box-shadow: inset 0 1px 0 #fffd, inset 1px 0 0 #fffd, inset -1px 0 0 #fffd;
}

fieldset {
Expand All @@ -186,7 +196,7 @@

.title-bar {
font: var(--font);
box-shadow: inset 0 0 0.5px 0.5px #fff;
box-shadow: inset 0 0 0 1px #fff9;
border: var(--window-border) var(--window-border-color);
border-radius: var(--window-border-radius) var(--window-border-radius) 0 0;
padding: var(--window-spacing);
Expand All @@ -210,7 +220,7 @@
border-top: 0;
border-radius: 0 0 var(--control-border-radius) var(--control-border-radius);
margin-top: -var(--window-spacing);
box-shadow: 0 0 2px #fff;
box-shadow: 0 1px 0 #fff9, 1px 0 0 #fff9, -1px 0 0 #fff9;

button {
position: relative;
Expand Down Expand Up @@ -429,7 +439,7 @@
background: var(--surface);
border: var(--window-border) var(--window-border-color);
border-top: 0;
box-shadow: 0 0.5px 1px 0.5px #fff;
box-shadow: 0 1px 0 #fff9, 1px 0 0 #fff9, -1px 0 0 #fff9;
display: flex;

&-field {
Expand Down