Statistics
| Branch: | Tag: | Revision:

one / src / sunstone / public / scss / app.scss @ d20f93c7

History | View | Annotate | Download (20.5 KB)

1
@import "../bower_components/fontawesome/css/font-awesome.min.css";
2
@import "../bower_components/jgrowl/jquery.jgrowl.min.css";
3
@import "settings";
4
@import "foundation";
5

    
6
// Or selectively include components
7
// @import
8
//   "foundation/components/accordion",
9
//   "foundation/components/alert-boxes",
10
//   "foundation/components/block-grid",
11
//   "foundation/components/breadcrumbs",
12
//   "foundation/components/button-groups",
13
//   "foundation/components/buttons",
14
//   "foundation/components/clearing",
15
//   "foundation/components/dropdown",
16
//   "foundation/components/dropdown-buttons",
17
//   "foundation/components/flex-video",
18
//   "foundation/components/forms",
19
//   "foundation/components/grid",
20
//   "foundation/components/inline-lists",
21
//   "foundation/components/joyride",
22
//   "foundation/components/keystrokes",
23
//   "foundation/components/labels",
24
//   "foundation/components/magellan",
25
//   "foundation/components/orbit",
26
//   "foundation/components/pagination",
27
//   "foundation/components/panels",
28
//   "foundation/components/pricing-tables",
29
//   "foundation/components/progress-bars",
30
//   "foundation/components/reveal",
31
//   "foundation/components/side-nav",
32
//   "foundation/components/split-buttons",
33
//   "foundation/components/sub-nav",
34
//   "foundation/components/switch",
35
//   "foundation/components/tables",
36
//   "foundation/components/tabs",
37
//   "foundation/components/thumbs",
38
//   "foundation/components/tooltips",
39
//   "foundation/components/top-bar",
40
//   "foundation/components/type",
41
//   "foundation/components/offcanvas",
42
//   "foundation/components/visibility";
43

    
44
@font-face {
45
  font-family: 'Open Sans';
46
  font-style: normal;
47
  font-weight: 400;
48
  font-stretch: condensed;
49
  src: local('Open Sans'), local('OpenSans'), url('opensans/opensans.woff') format('woff');
50
}
51

    
52
.hidden {
53
  display: none;
54
}
55

    
56
#footer {
57
  margin-top: 20px;
58
  margin-bottom: 10px;
59
  font-size: 12px;
60
  color: #999;
61

    
62
  a {
63
    color: #999;
64
  }
65

    
66
  a:hover {
67
    color: #333;
68
  }
69
}
70

    
71
.left-content {
72
  padding-top: 40px;
73
  padding-left: 20px;
74
}
75

    
76
.left-header {
77
}
78

    
79
.right-content {
80
  padding-top: 10px;
81
  padding-left: 50px;
82
  padding-right: 50px;
83
}
84

    
85
.right-info {
86
  margin-top: 15px;
87
}
88

    
89
.log-tab {
90
    background: #6f6f6f;
91
    color: #f2f2f2;
92
    padding: 20px;
93
    font-size: 14px;
94
}
95

    
96
table {
97
    border: 0px;
98
    border-collapse:collapse;
99
    border-spacing:0;
100

    
101

    
102
    th {
103
        font-weight: normal !important;
104
        font-size: 16px !important;
105
        background-color: #fff !important;
106
        border-bottom: 1px solid #efefef !important;;
107
        color: #333 !important;
108
    }
109

    
110
    td {
111
        font-size: rem-calc(13px);
112
        color: #555 !important;
113
    }
114

    
115
    tfoot {
116
        background-color: #fff !important;
117
    }
118
}
119

    
120
table.dataTable {
121
    td, th {
122
        font-size: rem-calc(13px);
123
        text-align: left;
124
        padding: 5px 10px;
125

    
126
        .button {
127
          margin: 0px;
128
        }
129
    }
130
    input[type="checkbox"] {
131
        margin: 3px 0.5ex !important;
132
    }
133
    textarea {
134
      min-height: 33px !important;
135
      height: 33px;
136
      padding: 5px 10px;
137
      margin: 0px !important;
138
    }
139
    select,input[type="text"] {
140
        margin: 0px !important;
141
    }
142
}
143

    
144
table:not(.no-hover) {
145

    
146
    tr.odd:hover td:not(.dataTables_empty) {
147
        background-color: #2ba6cb !important;
148
        cursor: pointer;
149
        color: #FFF !important;
150
    }
151

    
152
    tr.even:hover td:not(.dataTables_empty) {
153
        background-color: #2ba6cb !important;
154
        cursor: pointer;
155
        color: #FFF !important;
156
    }
157
}
158

    
159
td.open-control:hover {
160
    cursor: pointer;
161

    
162
}
163

    
164
input.search {
165
  margin: 0px;
166
}
167

    
168
.markrow { background-color:#cdebf5 !important; }
169
.markrowselected { background-color:#2ba6cb !important; color: #FFF; }
170
.markrowchecked { background-color:#cdebf5; }
171

    
172

    
173
// User settings and zone
174

    
175
.user-zone-info {
176
    .button {
177
        background: #fff;
178
        border: none;
179
    }
180

    
181
    .button:hover {
182
        background: #F5F5F5;
183
    }
184
}
185

    
186
.white_button {
187
    background-color: #fff !important;
188
    border: none;
189

    
190
    &:hover {
191
      color: $primary-color !important;
192
    }
193
}
194

    
195
// Navigation side bar
196
#logo {
197
    margin-top: 10px;
198
}
199

    
200
.side-nav {
201

    
202
    .topTab {
203

    
204
        a {
205
            color: #333 !important;
206
        }
207

    
208
        margin-top: 10px;
209
        margin-bottom: 5px;
210
    }
211

    
212
    .subTab {
213
        margin-left: 25px;
214

    
215
        &:hover {
216
          border-left: 2px solid #999;
217
        }
218

    
219
        border-left: 2px solid #efefef;
220

    
221
        a {
222
            color: #777 !important;
223

    
224
            &:hover {
225
              color: #555 !important;
226
            }
227
        }
228
    }
229

    
230
    li {
231
      font-size: rem-calc(12px);
232

    
233
      a {
234
        padding: 0.2323rem 0.875rem !important;
235
      }
236
    }
237

    
238
    .navigation-active-li {
239
        a {
240
            color: #222 !important;
241
        }
242

    
243
        border-left: 2px solid #008cba !important;
244
    }
245

    
246
    i {
247
        margin-right: 3px
248
    }
249

    
250
    padding-bottom: 5px;
251
    padding-top: 0px;
252
    border-right: 1px solid #efefef
253
}
254

    
255
.header-row {
256
  margin-bottom: 20px !important;
257

    
258
  .resource-id {
259
    color: #999;
260
  }
261

    
262
  .resource-info-header {
263
    color: #777;
264
  }
265
}
266

    
267
// action block
268

    
269
input[type="text"],
270
select {
271
  height: rem-calc(33px) !important;
272
  padding: rem-calc(5px) !important;
273
  color: rgba(0, 0, 0, 0.75) !important;
274
}
275

    
276
.subheader {
277
  color: #555;
278
}
279

    
280
.header-info {
281
  margin-top: -5px;
282
  margin-bottom: 5px;
283

    
284
  input {
285
    //margin-top: -10px !important;
286
  }
287
}
288

    
289
.button.secondary {
290
  color: #555;
291
}
292

    
293
.button {
294
  margin-right: 3px;
295
}
296

    
297
// Dropdown
298
.f-dropdown {
299
  text-align: left;
300
  li {
301
    padding: 0px 10px;
302
  }
303
}
304

    
305
// Form
306
.fa-question-circle {
307
  color: #afafaf !important;
308
}
309

    
310
.value_td {
311
    text-overflow:ellipsis;
312
    word-break: break-all;
313
    width: 100%;
314
}
315

    
316
.key_td {
317
  color: #999 !important;
318
}
319

    
320
.configuration_attrs {
321
  .key_td {
322
    width: 30%;
323
  }
324
}
325

    
326
.reveal-modal {
327
  fieldset {
328
    margin-bottom: 30px !important;
329
  }
330
}
331

    
332
.has-tip {
333
  margin-left: 10px;
334
  color: #555;
335
  font-weight: normal;
336
}
337

    
338
// Totals
339

    
340
.dashboard-widget-footer {
341
  margin-bottom: 50px !important;
342
}
343

    
344
.totals-info {
345
  span {
346
    color: #777;
347

    
348
  }
349

    
350
  a {
351
    color: #777 !important;
352

    
353
    &:hover {
354
      color: #0098c3 !important
355
    }
356
  }
357

    
358
  small {
359
    color: #ACACAC;
360
  }
361
}
362

    
363
.noUiSlider {
364
  border: none;
365
  margin-top: 12px;
366

    
367
  &.horizontal {
368
    width: 100% !important;
369
  }
370
}
371

    
372

    
373
// Dashboard
374

    
375
fieldset {
376
  margin-top: 0px;
377
  margin-bottom: 20px;
378
  -webkit-border-radius: 3px;
379
  border-radius: 3px;
380
  padding: 15px;
381

    
382
  legend {
383
    font-weight: normal !important;
384
    font-size: 16px !important;
385
    color: #555;
386
  }
387
}
388

    
389
.label.allocated {
390
  background-color: rgb(43,166,203);
391
  color: #fff;
392
}
393
.label.real {
394
  background-color: rgb(112,125,133);
395
  color: #fff;
396
}
397
.label.total {
398
  background-color: rgb(172,90,98);
399
  color: #fff;
400
}
401

    
402
.success-color {
403
  color: $success-color !important;
404
}
405

    
406
.alert-color {
407
  color: rgb(172,90,98) !important;
408
}
409

    
410

    
411
// Tabs
412
//.tabs.vertical {
413
//  dd {
414
//    border-right: 1px solid #dfdfdf;//
415

    
416
//  }//
417

    
418
//  dd.active {
419
//    border-left: 1px solid #dfdfdf;
420
//    border-top: 1px solid #dfdfdf;
421
//    border-bottom: 1px solid #dfdfdf;
422
//    border-right: 1px solid #FFFFFF;//
423

    
424
//    a {
425
//      font-weight: bold !important;
426
//    }
427
//  }
428
//}
429

    
430
.tabs {
431
  dd {
432
    border: 1px solid #efefef;
433
  }
434

    
435
  dd.active {
436
    a {
437
      font-weight: bold !important;
438
    }
439
  }
440

    
441
  &.wizard_tabs dd {
442
    border: 1px solid #dfdfdf !important;
443
  }
444
}
445

    
446
.bordered-tabs {
447
  .tabs-content {
448
    border-right: 0px;
449
    border-bottom: 0px;
450
    border-left: 0px;
451
    border-radius: 3px;
452
    min-height: 300px;
453

    
454
    &.vertical {
455
      border-left: 1px solid #cfcfcf;
456
    }
457

    
458
    &:not(.vertical) {
459
      border-top: 1px solid #cfcfcf;
460
      margin-top: -2px
461
    }
462
  }
463

    
464
  dl {
465
    dd {
466
      border: 0px;
467
    }
468

    
469
    &.vertical {
470
      .remove-tab {
471
        float: right !important;
472
        margin-top: 4px;
473
      }
474

    
475
      dd.active {
476
        border-left: 3px solid #008cba;
477
      }
478

    
479
      dd:not(.active) {
480
        border-left: 3px solid #fff;
481

    
482
        &:hover {
483
          border-left: 3px solid #999;
484
        }
485
      }
486
    }
487

    
488
    &:not(.vertical) {
489
      dd.active {
490
        border-bottom: 2px solid #008cba;
491
      }
492

    
493
      dd:not(.active) {
494
        &:hover {
495
          border-bottom: 2px solid #999;
496
        }
497
      }
498
    }
499

    
500
    dd.active {
501
      a {
502
        background: #fff;
503
        color: #222;
504
        font-weight: normal !important;
505
      }
506
    }
507

    
508
    dd:not(.active) {
509
      a {
510
        color: #777 !important;
511
        background: #fff;
512

    
513
        &:hover {
514
          color: #333 !important;
515
        }
516
      }
517
    }
518
  }
519
}
520

    
521
.remove-tab:hover {
522
  color: $alert-color;
523
  cursor: pointer;
524
}
525

    
526
/*.tabs:not(.vertical) {
527
  dd.active {
528
    border-bottom: 0px;
529
  }
530
}
531

    
532
.tabs.vertical {
533
  dd.active {
534
    border-right: 0px;
535
  }
536
}*/
537

    
538
// Right info
539

    
540
.right-info-tabs {
541
  dd {
542
    width: 84px;
543
  }
544

    
545
  i {
546
    font-size: 20px;
547
    margin-bottom: -10px;
548
  }
549

    
550
  a {
551
    color: #555 !important;
552
    padding: 10px 0px !important;
553
    font-size: 12px !important;
554
  }
555

    
556
  dd.active {
557
    a {
558
      color: #333 !important;
559
    }
560
  }
561
}
562

    
563
// Reveal
564

    
565
.reveal-modal h3 {
566
    margin-left: -20px;
567
    margin-bottom: 25px !important;
568
}
569

    
570
.reveal-body {
571
    padding: 5px 20px;
572
}
573

    
574

    
575
.max-height{
576
}
577

    
578
.form_buttons {
579
  padding-top: 30px;
580
}
581

    
582

    
583
// Progress bar
584

    
585
.quotas {
586
  fieldset {
587
    padding-top:  5px;
588
    padding-bottom: 0px;
589
  }
590
}
591

    
592
.provision-bullet-item {
593

    
594
  .progress {
595
    height: 10px;
596
    border: 1px solid #efefef;
597
    margin-bottom: 0px;
598
  }
599

    
600
  .progress-text {
601
  }
602
}
603
.provision-header {
604
  font-size: rem-calc(14px);
605
  border-bottom: 1px solid #efefef;
606

    
607
  li {
608
    padding-bottom: 5px;
609
  }
610

    
611
  li.active {
612
    border-bottom: 2px solid #0098c3;
613
  }
614
}
615

    
616
.quota_table {
617
  margin-top: 0px !important;
618
  margin-bottom: 0px !important;
619
  clear: both;
620
  max-width: none !important;
621
  width: 100%;
622
}
623

    
624
ul.pagination li a {
625
  background: #f5f5f5;
626
  border: 1px solid #efefef;
627
  color: #555;
628
}
629

    
630
ul.pagination li.unavailable a {
631
  background: #fff;
632
  border: 0px;
633
  color: #999;
634
}
635

    
636
ul.pagination li.current a {
637
  background: #fff;
638
  border: 1px solid #efefef;
639
  color: #333;
640

    
641
  &:hover {
642
    background: #fff;
643
    border: 1px solid #efefef;
644
    color: #333;
645
  }
646
}
647

    
648
div.dataTables_length label,
649
div.dataTables_filter label,
650
div.dataTables_info {
651
  color: #999;
652
  font-weight: normal;
653
}
654

    
655
div.dataTables_length label {
656
  float: left;
657
  text-align: left;
658
  margin-bottom: 0;
659
}
660

    
661
div.dataTables_length {
662
  float: right !important;
663
}
664

    
665
div.dataTables_length select {
666
  width: 75px;
667
  margin-bottom: 0;
668
  font-size: 10px !important;
669
  height: 26px !important;
670
  margin-left: 15px;
671
}
672

    
673
div.dataTables_filter label {
674
  float: right;
675
  margin-bottom: 0;
676
}
677
div.dataTables_filter input {
678
  display: inline-block !important;
679
  width: auto !important;
680
  margin-bottom: 0;
681
}
682

    
683
div.dataTables_info {
684
  padding-top: 2px;
685
  font-size: 0.875em;
686
}
687

    
688
div.dataTables_paginate {
689
  float: right;
690
  margin: 0;
691
}
692

    
693
table.dataTable {
694
  clear: both;
695
  margin: 0.5em 0 !important;
696
  max-width: none !important;
697
  width: 100%;
698

    
699
  tr {
700
    background: none !important;
701
  }
702
}
703

    
704
table.dataTable thead .sorting,
705
table.dataTable thead .sorting_asc,
706
table.dataTable thead .sorting_desc,
707
table.dataTable thead .sorting_asc_disabled,
708
table.dataTable thead .sorting_desc_disabled {
709
  cursor: pointer;
710
  *cursor: hand;
711
}
712

    
713
table.dataTable thead .sorting_asc { background: url('../images/sort_asc.png') no-repeat center right; }
714
table.dataTable thead .sorting_desc { background: url('../images/sort_desc.png') no-repeat center right; }
715

    
716
table.dataTable th:active {
717
  outline: none;
718
}
719

    
720
/* Scrolling */
721
div.dataTables_scrollHead table {
722
  margin-bottom: 0 !important;
723
}
724

    
725
div.dataTables_scrollBody table {
726
  border-top: none;
727
  margin-top: 0 !important;
728
  margin-bottom: 0 !important;
729
}
730

    
731
div.dataTables_scrollBody tbody tr:first-child th,
732
div.dataTables_scrollBody tbody tr:first-child td {
733
  border-top: none;
734
}
735

    
736
div.dataTables_scrollFoot table {
737
  margin-top: 0 !important;
738
  border-top: none;
739
}
740

    
741

    
742

    
743

    
744

    
745
/* Growl */
746
.jGrowl-notification h1 {
747
    display: none !important;
748
}
749

    
750
.jGrowl-notification, .jGrowl-notify-submit {
751
    background-color: #dfdfdf!important;
752
    color: #333;
753
    width: 335px !important;
754
}
755

    
756
.jGrowl-notify-error {
757
    background-color: #F39999!important;
758
    color: #660000;
759
}
760

    
761
.jGrowl-closer {
762
    background-color: #555!important;
763
    width: 335px !important;
764
}
765

    
766
.jGrowl-close {
767
  font-size: 1.5em !important;
768
}
769

    
770
.alert-box-error {
771
    border: 0px!important;
772
    background-color: #F39999!important;
773
    color: #660000;
774
}
775

    
776

    
777
.custom-panel {
778
  @include panel();
779

    
780
  border-color: #efefef;
781
  margin-bottom: 0px;
782
}
783

    
784
.provision-pricing-table  {
785
  @include pricing-table-container;
786
  //border: 1px solid #efefef;
787
  //box-shadow: 0px 1px #dfdfdf;
788
  //padding: 5px;
789
  border: 1px solid #efefef !important;
790
  background: #fff !important;
791
  padding-bottom: 5px !important;
792

    
793
  .provision-title  {
794
    @include pricing-table-title;
795
    background-color: #f8f8f8 !important;
796
    border-bottom: 1px solid #efefef;
797
    font-size: rem-calc(14px);
798
    margin-bottom: 5px;
799

    
800
    font-weight: normal;
801
    color: #555;
802
  }
803
  .provision-price  {
804
    @include pricing-table-price;
805
    font-size: rem-calc(13px);
806
  }
807
  .provision-description   {
808
    @include pricing-table-description;
809
    font-size: rem-calc(13px);
810
  }
811
  .provision-bullet-item {
812
    @include pricing-table-bullet;
813
    font-size: rem-calc(13px);
814

    
815
    padding: 5px 10px;
816
  }
817
  .provision-bullet-item-last {
818
    @include pricing-table-bullet;
819
    font-size: rem-calc(13px);
820
    color: #999;
821
    margin-top: 10px;
822
    padding: 5px 10px;
823
  }
824
  .provision-cta    {
825
    @include pricing-table-cta;
826
    font-size: rem-calc(13px);
827
  }
828

    
829

    
830
  -webkit-border-radius: 4px;
831
  -moz-border-radius: 4px;
832
  border-radius: 4px;
833

    
834
  background: #f7f7f7;
835

    
836
  li {
837
    background: none !important;
838
    text-overflow: ellipsis;
839
    overflow: hidden;
840
    white-space: nowrap;
841
  }
842

    
843
  &.hoverable.only-one:not(.selected):hover {
844
    cursor: pointer;
845
  }
846

    
847
  &.hoverable.more-than-one:hover {
848
    cursor: pointer;
849
  }
850

    
851
  .only-on-hover {
852
    color: #cfcfcf !important
853
  }
854

    
855
  &:not(.selected):hover {
856
    border-color: #afafaf !important;
857

    
858
    .only-on-hover {
859
      color: #0099c3 !important
860
    }
861
  }
862

    
863
  &.selected {
864
    //border: 1px solid #0099c3;
865
    border: 1px solid #0099c3 !important;
866
  }
867
}
868

    
869
.provision-pricing-table_vm_info,
870
.provision-pricing-table_flow_info,
871
.provision-pricing-table_user_info {
872
  li {
873
    padding: 5px 0px !important;
874
    font-size: rem-calc(14px) !important;
875
  }
876
}
877

    
878
.deploying-bg {
879
  background-color: #C7731F !important;
880
}
881

    
882
.error-bg {
883
  background-color: #cf280e !important;
884
}
885

    
886

    
887
.powering_off-bg {
888
  background-color: #cf280e !important;
889
}
890

    
891
.off-bg {
892
  background-color: #999;
893
}
894

    
895
.running-bg {
896
  background-color: #368a54 !important;
897
}
898

    
899

    
900
.deploying-color {
901
  color: #C7731F;
902
}
903

    
904
.error-color {
905
  color: #cf280e;
906
}
907

    
908
.powering_off-color {
909
  color: #cf280e;
910
}
911

    
912
.off-color {
913
  color: #555;
914
}
915

    
916
.running-color {
917
  color: #368a54;
918
}
919

    
920
.provision_back,
921
.provision_show_vm_accordion,
922
.provision_show_user_accordion,
923
.provision_show_flow_accordion {
924
  padding: 0px !important;
925
}
926

    
927
.provision-input {
928
  border-color: #dfdfdf;
929
  border-radius: 3px;
930
}
931

    
932
.provision-search-input {
933
  width: 200px !important;
934
  height:34px !important;
935
  border-radius: 3px;
936
  border-color: #efefef;
937
  margin: 0px !important;
938
}
939

    
940
#provision_list_vms_filter select,
941
#provision_list_templates_filter select,
942
#provision_list_flows_filter select  {
943
  width: 200px !important;
944
  height:35px !important;
945
  border-radius: 3px;
946
  border-color: #efefef;
947
  float: right !important;
948
  margin: 5px 10px 0px 0px;
949
}
950

    
951
.accordion {
952
  a.accordion-a {
953
   border: 1px solid #efefef;
954
   background: #f7f7f7;
955
   border-radius: 5px;
956
   color: #555 !important;
957
  }
958
}
959

    
960
.alert-box.secondary {
961
  margin-top: 10px;
962
}
963

    
964
hr {
965
  border-color: #dfdfdf;
966
}
967

    
968

    
969
.provision-logo img {
970
  padding: 10px;
971
  border-radius: 3px;
972
  height: 80px;
973
}
974

    
975
.provision_action_icons {
976
  margin-bottom: 5px;
977
  font-size: 14px;
978

    
979
  .white {
980
    color: #007d9c;
981
    background: #fff ;
982
    //border-width: 1px ;
983
    border-color: $primary-color ;
984
  }
985

    
986
  .button {
987
    margin-right: 3px;
988
  }
989

    
990
  a{
991
    &:hover {
992
      //color: $primary-color;
993
    }
994

    
995
    //color: #007d9c;
996
    font-weight: bold;
997

    
998
    //i {
999
    //  color: #555;
1000
    //}
1001

    
1002
  }
1003
}
1004

    
1005
.policies_table {
1006
  th {
1007
    font-size: 14px !important;
1008
  }
1009
}
1010

    
1011
.accordion_advanced {
1012
    margin-bottom: 10px;
1013
    &>a {
1014
      padding: 10px 20px;
1015
      font-size: 13px;
1016
      color: #555;
1017
      background: #f7f7f7;
1018
      border: 1px solid #f7f7f7;
1019
      //margin-left: 20px;
1020

    
1021

    
1022
      .fa {
1023
        margin-right: 10px;
1024
        color: #777;
1025
      }
1026

    
1027
      &.active {
1028
        background: #fff;
1029
        border: 0px;
1030
        border-bottom: 2px solid #008cba;
1031
        font-weight: bold;
1032

    
1033
        .fa-chevron-down {
1034
          display: none;
1035
        }
1036
      }
1037

    
1038
      &:not(.active){
1039
        border: 1px solid #efefef;
1040
        border-radius: 3px;
1041

    
1042
        .fa-chevron-up {
1043
          display: none;
1044
        }
1045
      }
1046

    
1047
      &:hover {
1048
        background: #dfdfdf;
1049
        color: #333333;
1050
      }
1051
    }
1052

    
1053
    &>.content {
1054
      border-top: 1px solid #cfcfcf;
1055
      //border-radius: 3px;
1056
      padding: 20px;
1057
      margin-top: 8px;
1058
    }
1059
}
1060

    
1061
.accordion {
1062
  dd {
1063
    &.active {
1064
      .only-not-active {
1065
        display: none;
1066
      }
1067
      .only-active {
1068
        display: inline-block;
1069
      }
1070
    }
1071

    
1072
    &:not(.active) {
1073
      .only-active {
1074
        display: none;
1075
      }
1076
      .only-not-active {
1077
        display: inline-block;
1078
      }
1079
    }
1080
  }
1081
}
1082

    
1083
.accordion_list {
1084
  dd {
1085
    &>a {
1086
      padding: 0px;
1087
      background: #fff !important;
1088
    }
1089

    
1090
    &>.content {
1091
      padding-top: 5px !important;
1092
      padding: 0px !important;
1093
    }
1094

    
1095
    &:first-child>h3 {
1096
      border-bottom: 1px solid #efefef;
1097
      padding-bottom: 10px;
1098

    
1099
      .button {
1100
        margin: 0px 3px;
1101
      }
1102

    
1103
      select {
1104
        height: 33px !important;
1105
        margin: 0px 5px 0px 0px !important;
1106
        float: right !important;
1107
        width: auto !important;
1108
      }
1109

    
1110
      input {
1111
        margin: 0px !important;
1112
      }
1113
    }
1114
  }
1115

    
1116
}
1117

    
1118
.vm_info_inline_list {
1119
  .fa:not(.fa-square) {
1120
    color: #afafaf;
1121
  }
1122

    
1123
  li {
1124
    margin-right: 30px;
1125
  }
1126
}
1127

    
1128
.range-slider-active-segment {
1129
  background: #cfcfcf;
1130
}
1131

    
1132
// There is a bug in zurb foundation and the tooltip z-index is < than modal
1133
.tooltip {
1134
  z-index: 2000;
1135
}
1136

    
1137
.flot-tick-label {
1138
  color: #999;
1139
}
1140

    
1141
#li_support-tab {
1142
  background: #f7f7f7;
1143
  border-radius: 3px;
1144
  padding: 5px 0px;
1145
  margin-top: 30px;
1146
  //text-align: center !important;
1147

    
1148
  .support_title {
1149
    color: #333;
1150
  }
1151
  .support_info {
1152
    margin-top: 10px;
1153
    width: 100%;
1154
  }
1155
  .support_pending {
1156
    color: #777;
1157
  }
1158
  .support_open {
1159
    color: #777;
1160
  }
1161
  .support_button {
1162
    margin-top: 15px;
1163
  }
1164
  .support_connect {
1165
    margin-top: 10px;
1166
    width: 100%;
1167
    color: #777;
1168
  }
1169
  .support_connect_button {
1170
    margin-top: 15px;
1171
  }
1172
}
1173

    
1174
#user_ssh_public_key_text, #config_ssh_public_key_text {
1175
  font-size: 0.875rem;
1176
  color: #777;
1177
  padding: 0px 10px;
1178
  overflow-x:hidden;
1179
  text-overflow:
1180
  ellipsis; height: 120px;
1181
}
1182

    
1183
.vm-action-disabled {
1184
    //color: red !important;
1185
    color: #cfcfcf !important;
1186
/*
1187
    &:hover {
1188
        color: $alert-color !important;
1189
    }
1190
*/
1191
    cursor: default !important;
1192
}
1193
/*
1194
.vm-action-enabled {
1195
    &:hover {
1196
      color: $primary-color !important;
1197
    }
1198
}
1199
*/
1200

    
1201
.inline-list {
1202
  margin: 0px;
1203

    
1204
  li:not(.right) {
1205
    margin-left: 0px;
1206
    margin-right: 1.375rem;
1207
  }
1208

    
1209
  li.right {
1210
    margin-left: 0px;
1211
    margin-right: 0px;
1212
  }
1213
}
1214

    
1215
#loading {
1216
   width: 100%;
1217
   height: 100%;
1218
   top: 0px;
1219
   left: 0px;
1220
   position: fixed;
1221
   display: block;
1222
   opacity: 0.7;
1223
   background-color: #fff;
1224
   z-index: 99;
1225
   text-align: center;
1226
}
1227

    
1228
#loading-content {
1229
  position: absolute;
1230
  top: 200px;
1231
  z-index: 100;
1232
}
1233

    
1234
.actions_row {
1235
  input {
1236
    height: 34px;
1237
  }
1238
}
1239

    
1240

    
1241
.nowrap {
1242
  white-space: nowrap;
1243
}
1244

    
1245

    
1246
/* Tree lists */
1247

    
1248
.tree, .tree ul{
1249
  font: inherit;
1250
  list-style-type: none;
1251
  margin-left: 1em;
1252
  padding: 0;
1253
  position: relative;
1254
}
1255

    
1256
.tree li{
1257
  margin: 0;
1258
  padding: 0 1em;
1259
  position: relative;
1260
}
1261

    
1262
.tree li::before, .tree li::after{
1263
  content: '';
1264
  position: absolute;
1265
  left: 0;
1266
}
1267

    
1268
/* horizontal line on inner list items */
1269
.tree li::before{
1270
  border-top: 1px solid #999;
1271
  top: 0.5em;
1272
  width: 10px;
1273
  height: 0;
1274
}
1275

    
1276
/* vertical line on list items */
1277
.tree li:after{
1278
  border-left: 1px solid #999;
1279
  height: 100%;
1280
  width: 0px;
1281
  top: -0.5em;
1282
}
1283

    
1284
/* lower line on list items from the first level because they don't have parents */
1285
.tree > li::after{
1286
  top: 0.5em;
1287
}
1288

    
1289
/* hide line from the last of the first level list items */
1290
.tree > li:last-child::after{
1291
  display: none;
1292
}
1293

    
1294
.tree ul:last-child li:last-child:after{
1295
  height:1em;
1296
}
1297

    
1298
.diskSlider {
1299
  label {
1300
    font-size: 24px;
1301
    color: #777;
1302
    padding: 0 0.5rem;
1303
  }
1304
}
1305

    
1306
.menu-small {
1307
  position: absolute;
1308
  z-index: 20;
1309
  box-shadow: 5px 10px 15px 5px rgba(0,0,0,.1);
1310
}
1311

    
1312
#menu-wrapper {
1313
  padding-top: 5px;
1314
  background-color: white
1315
}
1316

    
1317
#menu-toggle {
1318
  padding: 0px
1319
}