windows control

This commit is contained in:
Devaev Maxim
2018-07-28 00:08:19 +03:00
parent 34d3e9d637
commit 57ea0c285c
5 changed files with 112 additions and 37 deletions

View File

@@ -110,10 +110,10 @@ div.ctl-dropdown-content button.row50:not(:first-child), button.row25:not(:first
div.ctl-dropdown-content hr {
margin: 0;
display: block;
height: 1px;
border: 0;
height: 0px;
padding: 0;
background-color: var(--bg-color-dark);
border: none;
border-top: var(--dark-border);
}
div.ctl-dropdown-content-text {
margin: 10px 15px 10px 15px;

View File

@@ -1,7 +1,8 @@
:root {
--dark-border: 1px solid #17191d;
--grey-border: 1px solid #202225;
--black-border: 1px solid black;
--dark-border: thin solid #17191d;
--grey-border: thin solid #202225;
--normal-border: thin solid #36393f;
--black-border: thin solid black;
--micro-shadow: 1px 2px 4px 0 rgba(0, 0, 0, 0.4);
--small-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.2);

View File

@@ -2,6 +2,7 @@ div.window {
-webkit-user-select: none;
-moz-user-select: none;
user-select: none;
overflow: hidden;
position: absolute;
border: var(--dark-border);
-webkit-border-radius: 8px;
@@ -11,23 +12,60 @@ div.window {
box-shadow: var(--big-shadow);
display: inline-block;
background-color: var(--bg-color-light);
padding: 3px 10px 10px 10px;
-webkit-transform: translate(-50%);
-moz-transform: translate(-50%);
transform: translate(-50%);
padding: 30px 9px 9px 9px;
-webkit-transform: translate(-50%, -50%);
-moz-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
top: 50%;
left: 50%;
}
div.window-header {
color: var(--fg-color-dark);
font-size: 0.8em;
cursor: move;
padding-left: 6px;
padding-bottom: 4px;
overflow: hidden;
top: 0;
left: 0;
position: absolute;
width: 100%;
padding: 0;
height: 20px;
border-bottom: var(--normal-border);
}
div.window hr.window-sep {
margin: 0 0 6px 0;
display: block;
border: none;
border-top: 1px solid var(--bg-color-normal);
div.window-grab {
overflow: hidden;
font-size: 0.8em;
top: 0;
left: 0;
position: absolute;
width: 100%;
height: 20px;
cursor: move;
padding: 3px 0 2px 20px;
color: var(--fg-color-dark);
}
button.window-button-close {
outline: none;
position: absolute;
top: -2px;
right: -6px;
width: 44px;
height: 24px;
padding-left: 0;
color: var(--fg-color-inactive);
background-color: var(--bg-color-normal);
display: inline-block;
border: none;
cursor: pointer;
}
button.window-button-close:hover {
color: var(--fg-color-intensive);
background-color: var(--bg-color-dark) !important;
}
button.window-button-close:disabled {
color: var(--fg-color-inactive);
cursor: default;
}
button.window-button-close:active {
color: var(--fg-color-selected) !important;
}