tweaks to window-controls under linux
This commit is contained in:
parent
9bb5ce3e19
commit
95fc0420bd
3 changed files with 113 additions and 101 deletions
|
@ -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)
|
||||||
|
|
|
@ -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 : "";
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
}
|
}
|
|
@ -1163,52 +1163,47 @@ 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 {
|
||||||
|
background: rgb(200 200 200 / 10%);
|
||||||
|
}
|
||||||
|
&.close {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
background-image: var(--gfx-closeBtn);
|
||||||
|
background-position: center;
|
||||||
|
background-repeat: no-repeat;
|
||||||
|
-webkit-app-region: no-drag;
|
||||||
|
|
||||||
.app-chrome .app-chrome-item > .window-controls > div:hover {
|
&:hover {
|
||||||
background: rgb(200 200 200 / 10%);
|
background-color: rgb(196, 43, 28)
|
||||||
}
|
}
|
||||||
|
}
|
||||||
.app-chrome .app-chrome-item > .window-controls > div.close {
|
&.minmax {
|
||||||
width: 100%;
|
background-image: var(--gfx-maxBtn);
|
||||||
height: 100%;
|
background-position: center;
|
||||||
background-image: var(--gfx-closeBtn);
|
background-repeat: no-repeat;
|
||||||
background-position: center;
|
-webkit-app-region: no-drag;
|
||||||
background-repeat: no-repeat;
|
width: 100%;
|
||||||
-webkit-app-region: no-drag;
|
height: 100%;
|
||||||
|
}
|
||||||
&:hover {
|
&.minmax.restore {
|
||||||
background-color: rgb(196, 43, 28)
|
background-image: var(--gfx-restoreBtn);
|
||||||
|
}
|
||||||
|
&.minimize {
|
||||||
|
background-image: var(--gfx-minBtn);
|
||||||
|
background-position: center;
|
||||||
|
background-repeat: no-repeat;
|
||||||
|
-webkit-app-region: no-drag;
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.app-chrome .app-chrome-item > .window-controls > div.minmax {
|
|
||||||
background-image: var(--gfx-maxBtn);
|
|
||||||
background-position: center;
|
|
||||||
background-repeat: no-repeat;
|
|
||||||
-webkit-app-region: no-drag;
|
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
}
|
|
||||||
|
|
||||||
.app-chrome .app-chrome-item > .window-controls > div.minmax.restore {
|
|
||||||
background-image: var(--gfx-restoreBtn);
|
|
||||||
}
|
|
||||||
|
|
||||||
.app-chrome .app-chrome-item > .window-controls > div.minimize {
|
|
||||||
background-image: var(--gfx-minBtn);
|
|
||||||
background-position: center;
|
|
||||||
background-repeat: no-repeat;
|
|
||||||
-webkit-app-region: no-drag;
|
|
||||||
width: 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 {
|
||||||
display: none;
|
display: none;
|
||||||
}
|
}
|
||||||
|
@ -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)
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
Loading…
Add table
Add a link
Reference in a new issue