Statistics
| Branch: | Tag: | Revision:

root / snf-cyclades-app / synnefo / ui / new_ui / ui / stylesheets / styles.css @ 20082534

History | View | Annotate | Download (5.2 kB)

1

    
2
/* styles for selection window (used for vm_list_v1.html) */
3

    
4
.vm_options{
5
        display: none;
6
        border: 1px solid #ff7bac;
7
        position: absolute;
8
        top: -20%;
9
        width: 100%;
10
        height: 100%;
11
        font-size: 27px;
12
        font-weight: bold;
13
        text-align: left;
14
        background-color: white;
15
        line-height: 45px;
16
        padding-left: 1em;
17
        padding-top: 0.65em;
18
}
19

    
20
.vm_options .custom_checkbox{
21
        display: inline-block;
22
        margin: 0;
23
        padding-left: 1em;        
24
        color: #ff7bac;
25
}
26

    
27
a.option:hover{
28
        color: #ff7bac;
29
}
30

    
31
.vm_container{
32
        width: 200px;
33
        display: inline-block;
34
        height: 187px;
35
        position: relative;
36

    
37
}
38

    
39

    
40
/* styles for the detailed info of each vm (used for vm_details_v1.html) */
41

    
42

    
43
.graph_container{
44
        padding-bottom: 2em;
45

    
46
}
47

    
48

    
49
.wrap{
50
        position: relative;
51
}
52

    
53
.section_header{
54
        float: left;
55
        width:22%;
56
        margin-right: 2%;
57
        font-weight: bold;
58
}
59

    
60
.right_side{
61
        overflow: hidden;
62
        width: 76%;
63
}
64

    
65

    
66

    
67
.info_simple{
68
        display: inline-block;
69
        margin-right: 10px;
70
}
71

    
72

    
73
.action_links{
74
        display: inline-block;
75
        
76
}
77
.action_links a:hover {
78
        text-decoration: underline;
79
}
80

    
81
.btn_pinkb{
82
        width: 11.5em;
83
        height: 3.8em;
84
        line-height: 3.8em;
85
        border: 1px solid #ff7bac;
86
        position: absolute;
87
        top: 0;
88
        right: 0;
89
}
90

    
91
.btn_pinkb a{
92
        display: block;
93
        padding-left: 1em;
94
}
95

    
96
.btn_pinkb a:hover, a.black:hover{
97
        color: #ff7bac;
98
}
99

    
100

    
101
.btn_pinkb a img{
102
        position: absolute;
103
        right: 0.6em;
104
        top: 0.6em;
105
        height: 2.5em;
106
}
107

    
108

    
109
.action_links span:first-child{
110
        margin-right: 5px;
111
}
112

    
113
.action_links a{
114
        color: #ff7bac;
115
        margin-right: 5px;
116
}
117

    
118
.row{
119
        margin: 0 0 0.4em 0;
120
}
121
.middle_side{
122
        max-width: 70%;
123
}
124

    
125
.txt_size{
126
        height: 0.8em;
127
        vertical-align: baseline;
128
}
129

    
130
a.black{
131
        color: black;
132
}
133

    
134
a.black:hover{
135
        color: #ff7bac;
136
}
137

    
138
.wrapper .details dl .editable input
139
{
140
        width: 150px;
141
}
142

    
143
.wrapper .details dl .editable .editbuttons
144
{
145
        left: 80px;
146
}
147

    
148
.wrapper .details dl .editable .editbuttons .save {
149
        position: absolute;
150
        left:70px;
151
}
152

    
153
.wrapper .details dl .editable .editbuttons .cancel {
154
        position: absolute;
155
        left:90px;
156
}
157

    
158

    
159
 /* styles for network details */
160

    
161
 .big{
162
         width: 60%;
163
 }
164

    
165
 .small{
166
         width: 170px;
167
 }
168

    
169
.wrapper .details .top{
170
        padding: 70px 2.5em;
171
}
172

    
173
.wrapper .details .top .actions ul li{
174
        margin: 0 30px;
175
}
176

    
177
.height_up{
178
        line-height: 1.3em;
179
}
180

    
181
.set{
182
        margin-bottom: 1em;
183
}
184

    
185
/* main icon in details page */
186
.network .top .img {
187
background: url("../images/network-green102x116.png") no-repeat center center;
188
width: 102px;
189
height: 116px;
190
display: inline-block;
191
text-indent: -2000px;
192
overflow: hidden;
193
background-size: 100%;
194
}
195

    
196

    
197
/* scroll bar */
198
.networks .items-list .img {
199
background: url("../images/network-green102x116.png") no-repeat center center;
200
height: 58px;
201
width: 51px;
202
display: inline-block;
203
text-indent: -2000px;
204
overflow: hidden;
205
background-size: 80%;
206
}
207

    
208
.network .close-font{
209
        position: absolute;
210
        right: 0.8em;
211
        top: 2em;
212
        font-size: 2em;
213
        color: #b3b3b3;
214

    
215
}
216

    
217

    
218
/* styles for network list */
219

    
220
.networks .items-list .container .img {
221
background: url("../images/network-green102x116.png") no-repeat center center;
222
height: 58px;
223
width: 51px;
224
text-indent: -2000px;
225
overflow: hidden;
226
background-size: 100%
227
}
228

    
229

    
230

    
231
/* detailed pages: about the gaps that separate the area with the big img and the buttons from the rest of the page */ 
232

    
233

    
234
.details .top .actions ul{
235
        padding: 1em 1em 0;
236
        margin-bottom: 0;
237
} 
238

    
239

    
240
/*
241
to be transfered to sass
242
*/
243

    
244
.items-list li .container .options .wrap a {
245
        width: 50%;
246
}
247
.content {
248
        position: relative;
249
}
250
.content .overlay-modal {
251
        position: absolute;
252
        left:0;
253
        top:0;
254
        width: 100%;
255
        height: 100%;
256
        z-index:98;
257
        background: #ff7bac;
258
}
259

    
260

    
261
.content .overlay-div {
262
        position:absolute; top:20%; left:25%; width:50%;
263
        padding:25px;
264
        background:white;
265
        display:none; z-index:100;
266
}
267

    
268
.content .overlay-div .buttons {
269
        margin-bottom:0;
270
}
271

    
272
.content .overlay-div .buttons a {
273
        margin-right:20px;
274
}
275

    
276
/* line 133, ../sass/app.scss */
277
.btn4 {
278
  color: white;
279
  border-color: #ff7bac;
280
  background: #ff7bac;
281
}
282
/* line 139, ../sass/app.scss */
283
.btn4:hover, .btn4.current {
284
  border-color: #ff7bac;
285
  color:#ff7bac;
286
  background: white;
287
}
288

    
289

    
290
.overlay .lt-sidebar.nav ul li:hover  {
291
        background-color: transparent;
292
}
293

    
294
.lt-sidebar.nav {
295
        font-size: 1em
296
}
297

    
298
.overlay .lt-sidebar.nav  {
299
        overflow: auto;
300
}
301

    
302

    
303
/* styles for close icons (created with fontIcon "snf-font") */
304

    
305
.overlay .close_char {
306
        background: none;
307
        text-indent: 0;
308
        font-size: 1.8em; /* for the the character e (for d we can put 2em) */
309
        color: white;
310
}
311

    
312

    
313

    
314
/* create network styles */
315

    
316
.create-network {
317
        color: white;
318
}
319

    
320
.create-network .check{
321
        color: white;
322
}
323

    
324
.create-network p {
325
        font-size: 0.8em;
326
        font-style: italic;
327
        margin: 5px 0 0;
328
        width: 545px;
329
}
330

    
331

    
332
.create-network li {
333
        list-style: none outside none;
334
}
335

    
336
.subnet_options {
337
        margin: 0;
338
}
339

    
340
.network_options .check {
341
        position: absolute;
342
        right: 0;
343
}
344

    
345
.create-network .custom_checkbox {
346
        font-size: 1.3em;
347
}
348

    
349

    
350
.network_options {
351
        position: relative;
352
        width: 350px;
353
        min-height: 285px;
354
        
355
}
356

    
357
.network_options li {
358
        display: block;
359
        margin-bottom: 13px;
360
}
361

    
362
.subnet_options li {
363
        margin-bottom: 6px;
364
        padding-left: 155px;
365
}
366

    
367

    
368
.network_options li form {
369
        margin: 0;
370
}
371
.network_options li form input {
372
        position: absolute;
373
        display: inline-block;
374
        right: 0;
375
        width: 200px;
376
        height: 20px;
377
        font-size: 0.9em;
378
}
379

    
380
.network_options li.manual form input {
381
        right: -160px;
382
        width: 150px;
383
}
384

    
385

    
386
.network_options li form input.hidden {
387
        display: none;
388
}
389

    
390
span.sub_title {
391
        position: absolute;
392
}