-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathdraggable-resizable-dialog.css
155 lines (147 loc) · 3.53 KB
/
draggable-resizable-dialog.css
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
/*
* Stylesheet for Draggable and Resizable Dialog Box
*
* Designed by ZulNs, @Gorontalo, Indonesia, 7 June 2017
* Extended by FrankBuchholz, Germany, 2019
* You can change all colors
* You can change some of the sizes without expecting issues, see below
*/
.dialog {
//display: none; /* not visible by default */
font-family: Verdana, sans-serif;
font-size: 12px;
font-weight: 400;
//color: #fff;
background: #666;
//border: 1px solid #fff; /* change allowed; Border to separate multipe dialog boxes */
margin: 0;
position: absolute;
}
.dialog .titlebar {
height: 32px; /* same as .dialog>button height */
line-height: 32px; /* same as .dialog>button height */
vertical-align: middle;
font-size: 1.2em;
padding: 0 8px 0 8px; /* change NOT allowed */
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
cursor: move;
background: black;
color: white;
}
.dialog .content {
position: absolute;
top: 48px; /* change allowed */
left: 16px; /* change NOT allowed */
overflow: auto;
font-size: 1em;
}
.dialog .buttonpane:before {
width: 100%;
height: 0;
border-bottom: 1px solid; /* change allowed */
content: '';
position: absolute;
top: -16px; /* change allowed */
}
.dialog .buttonpane {
width: 100%;
position: absolute;
bottom: 16px; /* change allowed */
right: 16px; /* change NOT allowed */
white-space: nowrap; /* keep buttons on one line */
}
.dialog .buttonset {
float: right;
}
.dialog button {
-webkit-transition: 0.25s;
transition: 0.25s;
color: white;
}
.dialog button::-moz-focus-inner {
border: 0;
}
/* .dialog button.hover, */ /* Let's use standard hover */
.dialog button:hover,
.dialog button.active
{
cursor: pointer;
}
.titlebar ~ .close{
width: 32px; /* change NOT allowed */
height: 32px; /* same as .dialog .titlebar height */
position: absolute;
top: 0;
right: 0;
padding: 0;
border: 0;
font-size: 1.4em;
background: black;
}
.titlebar ~ .minimize{
width: 32px; /* change NOT allowed */
height: 32px; /* same as .dialog .titlebar height */
position: absolute;
top: 0;
right: 32px;
padding: 0;
border: 0;
font-size: 1.4em;
background: black;
}
.titlebar ~ .hideLeft{
width: 32px; /* change NOT allowed */
height: 32px; /* same as .dialog .titlebar height */
position: absolute;
top: 0;
right: 64px;
padding: 0;
border: 0;
font-size: 1.4em;
background: black;
}
/* .dialog>button.hover, */
.dialog>.close:hover,
.dialog>.close.focus
{
box-shadow: inset -16px 0 0 0 #89220b, inset 16px 0 0 0 #89220b;
}
.dialog>.minimize:hover,
.dialog>.minimize.focus
{
box-shadow: inset -16px 0 0 0 #ded115, inset 16px 0 0 0 #ded115;
}
.dialog>.hideLeft:hover,
.dialog>.hideLeft.focus
{
box-shadow: inset -16px 0 0 0 #09931c, inset 16px 0 0 0 #09931c;
}
.dialog .close.active {
background: red; /* irrelevant */
border: 1px solid #ddd; /* irrelevant */
}
.dialog .buttonset button {
height: 32px; /* change allowed */
width: 64px; /* change allowed */
font-size: 1.1em;
padding: 0; /* irrelevant */
border: 2px solid #fff; /* change allowed */
border-radius: 4px; /* change allowed */
margin-left: 16px; /* change NOT allowed */
background: red
}
.dialog .buttonset button:first-child {
margin-left: 0;
}
/* .dialog .buttonset button.hover, */
.dialog .buttonset button:hover,
.dialog .buttonset button.focus
{
box-shadow: inset -32px 0 0 0 #17a, inset 32px 0 0 0 #17a;
}
.dialog .buttonset button.active {
background: red;
border-color: #ddd;
}