← Back to branch summary

~jstys-z/helioviewer.org/client5

« back to all changes in this revision

Viewing changes to resources/css/zoom-control.css

  • Committer: Keith Hughitt
  • Date: 2012-08-10 18:15:41 UTC
  • mfrom: (402.4.61 hv)
  • Revision ID: keith.hughitt@nasa.gov-20120810181541-4zkdf7td1igj55lw
Merged in development changes

Show diffs side-by-side

added added

removed removed

Lines of Context:
resources/css/zoom-control.css
1
1
/* Zoom Level Slider */
2
2
#zoomControls {
3
3
    position: absolute;
4
 
    left: 2.5em;
5
 
    top: 2em;
 
4
    left: 16px;
 
5
    top:39px;
6
6
    z-index:20;
7
7
}
8
8
 
9
9
#zoomControlSlider {
10
10
    background: transparent none repeat scroll 0 0;
11
11
    width: 100%;
12
 
    height: 190px;
13
 
    margin-top: 8px;
 
12
    height: 197px;
 
13
    margin-top: 2px;
14
14
    border: none;
15
15
        border-radius: 0px;
16
16
    -moz-border-radius: 0px;
17
17
    -webkit-border-radius: 0px;
18
18
}
19
 
 
 
19
    
20
20
#zoomSliderContainer {
21
21
    position: absolute;
22
 
        left:8px;
23
 
        top:22px;
24
 
        height:212px;
25
 
        width:4px;
26
 
    background-color: rgba(255,255,255,0.5);
27
 
    color: black;
28
 
    border: 2px solid rgba(0,0,0,1);
 
22
        left:10px;
 
23
        top:24px;
 
24
        height:209px;
 
25
        width:6px;
 
26
        background: url(../../resources/images/blackGlass/glass_slider_trough_vertical_white.png) repeat-y;
29
27
        text-align:center;
30
 
        z-index: 9999;
 
28
        z-index:10000;
31
29
}
32
30
 
33
31
#zoomControlSlider > .ui-slider-handle {
34
 
        left:-10px;
35
 
        width:20px;
36
 
        height:10px;
37
 
    background-image: none;
38
 
    background-color: rgba(230,230,230,1);
39
 
    color: black;
40
 
    border: 2px solid rgba(0,0,0,1);
41
 
    border-radius: 0.2em;
42
 
    -moz-border-radius-bottomleft: 0.2em;
43
 
    -webkit-border-bottom-left-radius: 0.2em;
44
 
        cursor: pointer;
 
32
        left:-8px;
 
33
        width:21px;
 
34
        height:12px;
 
35
        background:url(../../resources/images/blackGlass/glass_slider_handle_white.png);
 
36
    border: none;
 
37
        cursor:pointer;
45
38
        text-align:center;
46
39
        font-weight:bold;
47
 
        z-index: 10000;
 
40
        z-index:10000;
48
41
}
49
42
 
50
43
#zoomControlZoomOut, #zoomControlZoomIn {
51
 
    position: absolute;
52
 
        background-color: rgba(230,230,230,1);
53
 
        color: black;
54
 
    border: 2px solid rgba(0,0,0,1);
55
 
    border-radius: 2em;
56
 
    -moz-border-radius-bottomleft: 2em;
57
 
    -webkit-border-bottom-left-radius: 2em;
58
 
        left: 0px;
 
44
        background: url(../../resources/images/blackGlass/glass_button_square_24px_white.png);
 
45
        position: absolute;
 
46
        color:white;
 
47
        left:0px;
59
48
        cursor:pointer;
60
 
        text-align: center;
61
 
        font-size: 2em;
62
 
        font-weight: 400;
63
 
        z-index: 10000;
64
 
    width: 0.8em;
65
 
    height: 0.8em;
66
 
    line-height: 0.6em;
67
 
    -webkit-touch-callout: none;
68
 
    -webkit-user-select: none;
69
 
    -khtml-user-select: none;
70
 
    -moz-user-select: none;
71
 
    -ms-user-select: none;
72
 
    user-select: none;
73
 
}
74
 
 
75
 
#zoomControlZoomOut {
76
 
    top:235px;
77
 
    line-height: 0.66em;
78
 
}
79
 
#zoomControlZoomIn  {
80
 
    top: 0px;
81
 
}
82
 
 
83
 
#zoomControlZoomOut:hover, #zoomControlZoomIn:hover, #zoomControlSlider > .ui-slider-handle:hover {
84
 
    background-color: rgba(255,255,255,1);
85
 
    border: 2px solid rgba(0,0,0,1);
86
 
}
87
 
 
88
 
#zoomControlZoomOut:active, #zoomControlZoomIn:active, #zoomControlSlider > .ui-slider-handle:active {
89
 
    background-color: yellow;
90
 
    border: 2px solid rgba(0,0,0,1);
91
 
}
 
49
        width:24px;
 
50
        height:24px;
 
51
        text-align:center;
 
52
        font-size:20px;
 
53
        font-weight:bold;
 
54
        z-index:10000;
 
55
}
 
56
 
 
57
#zoomControlZoomOut {top:233px;}
 
58
#zoomControlZoomIn  {top:0px;}