1 | /*GLOBAL CSS STARTS*/ |
2 | * {
|
3 | -webkit-box-sizing: border-box; |
4 | -moz-box-sizing: border-box; |
5 | box-sizing: border-box; |
6 | } |
7 | body {
|
8 | font-family: 'Poppins', sans-serif; |
9 | margin: 0; |
10 | padding: 0; |
11 | font-size: 14px; |
12 | } |
13 | .h4, .h5, .h6, h4, h5, h6 {
|
14 | margin-top: 10px; |
15 | margin-bottom: 10px; |
16 | } |
17 | /*GLOBAL CSS ENDS*/ |
18 | |
19 | .modal {
|
20 | display: none; |
21 | opacity: 0; |
22 | } |
23 | .windowModal {
|
24 | display: block; |
25 | opacity: 1; |
26 | position: fixed; |
27 | top: 0; |
28 | right: 0; |
29 | bottom: 0; |
30 | left: 0; |
31 | z-index: 1050; |
32 | overflow: hidden; |
33 | -webkit-overflow-scrolling: touch; |
34 | outline: 0; |
35 | } |
36 | .windowModal .modal-dialog {
|
37 | position: relative; |
38 | width: auto; |
39 | margin: 10px; |
40 | } |
41 | .modal-frame-ui .windowModal.modal .modal-dialog {
|
42 | -webkit-transform: translate(0,0); |
43 | -ms-transform: translate(0,0); |
44 | -o-transform: translate(0,0); |
45 | transform: translate(0,0); |
46 | } |
47 | @media (min-width: 576px) {
|
48 | .modal-frame-ui .modal-dialog {
|
49 | min-height: calc(100% - 3.5rem); |
50 | display: flex; |
51 | align-items: center; |
52 | max-width: 500px; |
53 | margin: 1.75rem auto; |
54 | } |
55 | } |
56 | .modal-frame-ui .modal-content {
|
57 | border: none; |
58 | box-shadow: 0px 0px 20px rgb(0 0 0 / 5%); |
59 | width: 100%; |
60 | position: relative; |
61 | background-color: #fff; |
62 | background-clip: padding-box; |
63 | border-radius: 6px; |
64 | outline: 0; |
65 | } |
66 | .modal-frame-ui .modal-header {
|
67 | padding: 15px 20px; |
68 | display: flex; |
69 | align-items: center; |
70 | text-align: left; |
71 | border: none; |
72 | box-shadow: 0px 10px 5px -4px rgba(0,0,0,0.05); |
73 | } |
74 | .modal-frame-ui .modal-header .modal-title {
|
75 | font-size: 22px; |
76 | color: #222; |
77 | font-weight: 600; |
78 | margin: 0; |
79 | margin-left: 25px; |
80 | } |
81 | .modal-frame-ui .modal-body {
|
82 | min-height: 250px; |
83 | color: #b8b8b8; |
84 | text-align: center; |
85 | position: relative; |
86 | padding: 15px; |
87 | } |
88 | .modal-frame-ui .modal-body .body-title {
|
89 | font-size: 24px; |
90 | color: #6F36FF; |
91 | margin-top: 25px; |
92 | font-weight: bold; |
93 | } |
94 | .modal-frame-ui .modal-body .body-desc {
|
95 | margin: 0 0 10px; |
96 | } |
97 | .modal-frame-ui .modal-btns-right {
|
98 | margin-left: auto; |
99 | color: #ccc; |
100 | font-size: 20px; |
101 | } |
102 | .btn {
|
103 | cursor: pointer; |
104 | } |
105 | .modal-frame-ui .modal-header-btns .btn {
|
106 | width: 12px; |
107 | height: 12px; |
108 | background: #111; |
109 | border-radius: 3px; |
110 | opacity: 1; |
111 | margin-left: 10px; |
112 | text-align: center; |
113 | display: flex; |
114 | align-items: center; |
115 | justify-content: center; |
116 | float: right; |
117 | font-size: 21px; |
118 | font-weight: 700; |
119 | line-height: 1; |
120 | color: #000; |
121 | padding: 0; |
122 | border: 1px solid transparent; |
123 | text-shadow: 0 1px 0 #fff; |
124 | } |
125 | .modal-frame-ui .modal-header-btns .btn:hover, |
126 | .modal-frame-ui .modal-header-btns .btn:focus {
|
127 | outline: none; |
128 | } |
129 | .modal-frame-ui .modal-header-btns .btn i {
|
130 | color: #00a682; |
131 | margin: 0; |
132 | font-size: 14px; |
133 | } |
134 | .modal-frame-ui .modal-header-btns .btn.red {
|
135 | background: #fc5753; |
136 | } |
137 | .modal-frame-ui .modal-header-btns .btn.yellow {
|
138 | background: #fdbc40; |
139 | } |
140 | .modal-frame-ui .modal-header-btns .btn.green {
|
141 | background: #33c748; |
142 | } |
143 | .modal-frame-ui .modal-frame-ui .btn-open {
|
144 | display: flex; |
145 | align-items: center; |
146 | justify-content: center; |
147 | height: 100vh; |
148 | } |
149 | .modal-frame-ui .btn-primary {
|
150 | background: #6F36FF; |
151 | border: none; |
152 | } |
153 | .modal-frame-ui .modal-header .btnGrp{
|
154 | position: absolute; |
155 | top: 8px; |
156 | right: 10px; |
157 | } |
158 | .modal-frame-ui .minimize{
|
159 | width: auto; |
160 | height: 35px; |
161 | overflow: hidden !important; |
162 | padding: 0px !important; |
163 | margin: 0px; |
164 | float: left; |
165 | bottom: 20px !important; |
166 | left: 20px; |
167 | top: auto; |
168 | box-shadow: 0px 0px 20px rgb(0 0 0 / 5%); |
169 | } |
170 | .modal-frame-ui .minimize .modal-dialog, .modal-frame-ui .minimize .modal-content{
|
171 | height: 100%; |
172 | width: 100%; |
173 | margin: 0px !important; |
174 | padding: 0px !important; |
175 | } |
176 | .modal-frame-ui .minimize .modal-header{
|
177 | height: 100%; |
178 | width: 100%; |
179 | margin: 0px !important; |
180 | padding: 3px 5px !important; |
181 | } |
182 | .modal-frame-ui .minmaxCon{
|
183 | height: 35px; |
184 | bottom: 1px; |
185 | left: 1px; |
186 | position: fixed; |
187 | right: 1px; |
188 | z-index: 9999; |
189 | } |
190 | @media screen and (max-width: 767px) {
|
191 | .windowModal {
|
192 | display: flex; |
193 | align-items: center; |
194 | } |
195 | } |
Travelled to 3 computer(s): bhatertpkbcr, mqqgnosmbjvj, pyentgdyhuwx
No comments. add comment
| Snippet ID: | #1032530 |
| Snippet name: | husain window design css |
| Eternal ID of this version: | #1032530/2 |
| Text MD5: | c56c89dde04690b179a530e1884f6184 |
| Author: | stefan |
| Category: | css |
| Type: | Document |
| Public (visible to everyone): | Yes |
| Archived (hidden from active list): | No |
| Created/modified: | 2021-09-18 16:23:23 |
| Source code size: | 4328 bytes / 195 lines |
| Pitched / IR pitched: | No / No |
| Views / Downloads: | 109 / 53 |
| Version history: | 1 change(s) |
| Referenced in: | [show references] |