tweaks to window-controls under linux

This commit is contained in:
booploops 2022-06-14 05:53:27 -07:00
parent 9bb5ce3e19
commit 95fc0420bd
3 changed files with 113 additions and 101 deletions

View file

@ -153,22 +153,8 @@
} }
.close-btn { .close-btn {
width : 50px; .menu-panel.menu-header-text.close-btn
height : 100%;
background-image : var(--gfx-closeBtn);
background-position: center;
background-repeat : no-repeat;
-webkit-app-region : no-drag;
appearance : none;
border : 0;
background-color : transparent;
position : absolute;
top : 0;
right : 0;
&:hover {
background-color: rgb(196, 43, 28)
}
} }
} }
} }
@ -191,22 +177,7 @@
} }
.close-btn { .close-btn {
width : 50px; .menu-panel.menu-header-text.close-btn
height : 100%;
background-image : var(--gfx-closeBtn);
background-position: center;
background-repeat : no-repeat;
-webkit-app-region : no-drag;
appearance : none;
border : 0;
background-color : transparent;
position : absolute;
top : 0;
right : 0;
&:hover {
background-color: rgb(196, 43, 28)
}
} }
} }
@ -371,23 +342,31 @@
} }
} }
.menu-header-text { .menu-header-text {
margin: 18px 6px; margin: 18px 6px;
.close-btn { .close-btn {
width : 50px; width: 36px;
height : 42px; height: 36px;
background-image : var(--gfx-closeBtn);
background-position: center; background-position: center;
background-repeat : no-repeat; background-repeat: no-repeat;
-webkit-app-region : no-drag; -webkit-app-region: no-drag;
appearance : none; appearance: none;
border : 0; border: 0;
background-color : transparent; background-color: transparent;
position : absolute; position: absolute;
top : 0; top: 10px;
right : 0; right: 10px;
border-radius: 50px;
display: grid;
align-content: center;
&:before {
content: "";
font-family: "codicon";
color: var(--textColor);
font-size: 20px;
}
&:hover { &:hover {
background-color: rgb(196, 43, 28) background-color: rgb(196, 43, 28)

View file

@ -3,4 +3,57 @@ body[platform="linux"] {
#window-controls-container { #window-controls-container {
//display: none; //display: none;
} }
.window-controls {
justify-content: flex-end;
align-items : center;
padding-right : 6px;
>div {
--iconSize: 16px;
&.close,
&.minmax,
&.minimize,
&.minmax.restore {
background-image: unset!important;
position : relative;
display : grid;
align-content : center;
text-align : center;
height : 36px!important;
width : 36px!important;
border-radius : 50px;
transition: background-color .1s ease-in-out;
&:hover {
background: rgb(200 200 200 / 10%)!important;
}
}
&.close::before {
font-family: "codicon";
font-size : var(--iconSize);
content : "";
}
&.minmax::before {
font-family: "codicon";
font-size : var(--iconSize);
content : "";
}
&.minimize::before {
font-family: "codicon";
font-size : var(--iconSize);
content : "";
}
&.restore::before {
font-family: "codicon";
font-size : var(--iconSize);
content : "";
}
}
}
} }

View file

@ -1163,18 +1163,14 @@ input[type=range].web-slider::-webkit-slider-runnable-track {
&-macos { &-macos {
width: 100px; width: 100px;
} }
}
.app-chrome .app-chrome-item > .window-controls > div { > div {
height: 100%; height: 100%;
width: 32px; width: 32px;
} &:hover {
.app-chrome .app-chrome-item > .window-controls > div:hover {
background: rgb(200 200 200 / 10%); background: rgb(200 200 200 / 10%);
} }
&.close {
.app-chrome .app-chrome-item > .window-controls > div.close {
width: 100%; width: 100%;
height: 100%; height: 100%;
background-image: var(--gfx-closeBtn); background-image: var(--gfx-closeBtn);
@ -1185,28 +1181,27 @@ input[type=range].web-slider::-webkit-slider-runnable-track {
&:hover { &:hover {
background-color: rgb(196, 43, 28) background-color: rgb(196, 43, 28)
} }
} }
&.minmax {
.app-chrome .app-chrome-item > .window-controls > div.minmax {
background-image: var(--gfx-maxBtn); background-image: var(--gfx-maxBtn);
background-position: center; background-position: center;
background-repeat: no-repeat; background-repeat: no-repeat;
-webkit-app-region: no-drag; -webkit-app-region: no-drag;
width: 100%; width: 100%;
height: 100%; height: 100%;
} }
&.minmax.restore {
.app-chrome .app-chrome-item > .window-controls > div.minmax.restore {
background-image: var(--gfx-restoreBtn); background-image: var(--gfx-restoreBtn);
} }
&.minimize {
.app-chrome .app-chrome-item > .window-controls > div.minimize {
background-image: var(--gfx-minBtn); background-image: var(--gfx-minBtn);
background-position: center; background-position: center;
background-repeat: no-repeat; background-repeat: no-repeat;
-webkit-app-region: no-drag; -webkit-app-region: no-drag;
width: 100%; width: 100%;
height: 100%; height: 100%;
}
}
} }
body[platform="darwin"] .app-chrome .app-chrome-item > .window-controls > div.minimize { body[platform="darwin"] .app-chrome .app-chrome-item > .window-controls > div.minimize {
@ -3478,22 +3473,7 @@ body.no-gpu {
} }
.close-btn { .close-btn {
width: 50px; .menu-panel.menu-header-text.close-btn
height: 100%;
background-image: var(--gfx-closeBtn);
background-position: center;
background-repeat: no-repeat;
-webkit-app-region: no-drag;
appearance: none;
border: 0;
background-color: transparent;
position: absolute;
top: 0;
right: 0;
&:hover {
background-color: rgb(196, 43, 28)
}
} }
} }