← Back to branch summary

~ya-bo-ng/ubuntu-online-tour/13.10

« back to all changes in this revision

Viewing changes to 13.04/12.10/css/systemoverlay.css

  • Committer: Anthony Dillon
  • Date: 2013-10-02 09:35:39 UTC
  • Revision ID: anthony.dillon@canonical.com-20131002093539-ewxr0tx9oi85ppoi
Inishal setup of the 13.10 version of the tour

Show diffs side-by-side

added added

removed removed

Lines of Context:
13.04/12.10/css/systemoverlay.css
 
1
/*
 
2
* System Overlay CSS
 
3
* author: Anthony Dillon
 
4
*/
 
5
 
 
6
#systemOverlay{
 
7
        width:100%;
 
8
        height:100%;
 
9
        position: absolute;
 
10
        /*background:url(../img/dash-bg-60.png);*/
 
11
        background-color:rgba(60, 25, 59, 0.5);
 
12
        top:0px;
 
13
        left:0px;
 
14
        z-index:12;
 
15
        display:none;
 
16
        font-size:17px;
 
17
        color:white;
 
18
}
 
19
 
 
20
#systemOverlay input{
 
21
        background:url(../img/overlay/search-logo.png) no-repeat 10px center;
 
22
        position: relative;
 
23
        width: 88%;
 
24
        height:40px;
 
25
        left:90px;
 
26
        top:30px;
 
27
        color:#eee;
 
28
        font-style:italic;
 
29
        padding:0px 50px;
 
30
        font-size:18px;
 
31
                -moz-border-radius:4px 4px 4px 4px;
 
32
                -webkit-border-radius:4px 4px 4px 4px;
 
33
        border-radius:4px 4px 4px 4px;
 
34
        border:1px solid #fff;
 
35
        background-color:rgba(0,0,0,0.2);
 
36
        outline-style:none;
 
37
}
 
38
 
 
39
#systemOverlay input:active{
 
40
        
 
41
}
 
42
 
 
43
#systemOverlay #shortcuts{
 
44
        position: absolute;
 
45
        left:100px;
 
46
        top:110px;
 
47
}
 
48
 
 
49
#systemOverlay #shortcuts:hover{
 
50
        background-position: 0px -17px;
 
51
}
 
52
#systemOverlay img{
 
53
        vertical-align: text-top;
 
54
        margin-right: 8px;
 
55
}
 
56
#systemOverlay #shortcuts img{
 
57
        vertical-align: middle;
 
58
        margin-right:15px;
 
59
}
 
60
 
 
61
#systemOverlay #shortcuts .shortcut-arrow{
 
62
        width:13px;
 
63
        height:17px;
 
64
        overflow:hidden;
 
65
        background:url(../img/overlay/shoutcurts-down.png) no-repeat;
 
66
        display: inline-block;
 
67
        margin:0px 0px 0px 15px;
 
68
}
 
69
 
 
70
#systemOverlay .app-container{
 
71
        display:none;
 
72
        position:absolute;
 
73
        left:110px;
 
74
        top:100px;
 
75
        width:91%;
 
76
}
 
77
 
 
78
#systemOverlay #overlayContents{
 
79
        margin-top:10px;
 
80
}
 
81
 
 
82
#systemOverlay #overlayContents .bottom{
 
83
        margin-bottom:40px;
 
84
} 
 
85
 
 
86
#systemOverlay .app-container .app-list{
 
87
        width:100%;
 
88
        height:110px;
 
89
        margin:20px;
 
90
        overflow:hidden;
 
91
}
 
92
 
 
93
#systemOverlay .app-container .app-list div{
 
94
        width:200px;
 
95
        height:120px;
 
96
        float:left;
 
97
        text-align:center;
 
98
}
 
99
 
 
100
#systemOverlay .app-container .app-list div img{
 
101
        padding:20px;
 
102
        height:46px;
 
103
}
 
104
 
 
105
#systemOverlay .app-container .app-list div img.hover{
 
106
        background-color:rgba(255,255,255,0.3);
 
107
        -moz-border-radius:4px 4px 4px 4px;
 
108
        -webkit-border-radius:4px 4px 4px 4px;
 
109
        border-radius:4px 4px 4px 4px;
 
110
}
 
111
 
 
112
#systemOverlay .app-container .app-list div p{
 
113
        font-size:14px;
 
114
        margin-top: 0px;
 
115
}
 
116
 
 
117
#systemOverlay #shortcuts .hover{
 
118
        background-position: 0px -17px !important;
 
119
}
 
120
 
 
121
#systemOverlay #shortcuts .closed{
 
122
        background:url(../img/overlay/shoutcurts-right.png) no-repeat;
 
123
}
 
124
 
 
125
#systemOverlay #shortcuts #shortcut-contents{
 
126
        width:870px;
 
127
        position: absolute;
 
128
        top:50px;
 
129
}
 
130
#systemOverlay #shortcuts #shortcut-contents .dashClear{
 
131
        clear:both;
 
132
        height:0px;
 
133
        float:none;
 
134
}
 
135
 
 
136
#systemOverlay #shortcuts #shortcut-contents div div{
 
137
        height:104px;
 
138
        margin-bottom: 12px;
 
139
        margin-left:0px;
 
140
    width: 100%;
 
141
}
 
142
 
 
143
#systemOverlay #shortcuts #shortcut-contents div div.hover{
 
144
        background-position: center -104px !important;
 
145
}
 
146
 
 
147
#systemOverlay #shortcuts #shortcut-contents #browse-the-web div{
 
148
        background:url(../img/overlay/browse-the-web.png) no-repeat scroll center 0 transparent;
 
149
}
 
150
#systemOverlay #shortcuts #shortcut-contents #view-photos div{
 
151
        background:url(../img/overlay/view-photos.png) no-repeat scroll center 0 transparent;
 
152
}
 
153
#systemOverlay #shortcuts #shortcut-contents #check-email div{
 
154
        background:url(../img/overlay/check-email.png) no-repeat scroll center 0 transparent;
 
155
}
 
156
#systemOverlay #shortcuts #shortcut-contents #listen-to-music div{
 
157
        background:url(../img/overlay/listen-to-music.png) no-repeat scroll center 0 transparent;
 
158
}
 
159
#systemOverlay #shortcuts #shortcut-contents #media-apps div{
 
160
        background:url(../img/overlay/media-apps.png) no-repeat scroll center 0 transparent;
 
161
}
 
162
#systemOverlay #shortcuts #shortcut-contents #internet-apps div{
 
163
        background:url(../img/overlay/internet-apps.png) no-repeat scroll center 0 transparent;
 
164
}
 
165
#systemOverlay #shortcuts #shortcut-contents #more-apps div{
 
166
        background:url(../img/overlay/more-apps.png) no-repeat scroll center 0 transparent;
 
167
}
 
168
#systemOverlay #shortcuts #shortcut-contents #find-apps div{
 
169
        background:url(../img/overlay/find-files.png) no-repeat scroll center 0 transparent;
 
170
}
 
171
#systemOverlay #shortcuts #shortcut-contents div {
 
172
        margin-left:115px;
 
173
        float:left;
 
174
        text-align:center;
 
175
        margin-bottom:70px;
 
176
        width: 130px;
 
177
}
 
178
#systemOverlay #shortcuts #shortcut-contents div span{
 
179
        display:block;
 
180
        height: 40px;
 
181
}
 
182
 
 
183
#systemOverlay #shortcuts #shortcut-contents div.first{
 
184
        margin-left:0px;
 
185
}
 
186
 
 
187
#systemOverlay #dash-bottom-bar{
 
188
        width:100%;
 
189
        height:44px;
 
190
        position: absolute;
 
191
        background:url(../img/black-bg-30.png);
 
192
        background-color:rgba(0,0,0,0.3);
 
193
        bottom:0px;
 
194
}
 
195
 
 
196
#systemOverlay #dash-bottom-bar .bottom-wrapper div{
 
197
        width:60px;
 
198
        height:44px;
 
199
        float:left;
 
200
}
 
201
#systemOverlay #dash-bottom-bar .bottom-wrapper div.last{
 
202
        margin-right:0px;
 
203
}
 
204
 
 
205
#systemOverlay #dash-bottom-bar .bottom-wrapper{
 
206
        position: absolute;
 
207
}
 
208
 
 
209
#systemOverlay #dash-bottom-bar .home-icon{
 
210
        background:url(../img/dash/dash-home.png) no-repeat scroll 0px -44px;
 
211
}
 
212
#systemOverlay #dash-bottom-bar .applications-icon{
 
213
        background:url(../img/dash/dash-applications.png) no-repeat scroll 0px -44px;
 
214
}
 
215
#systemOverlay #dash-bottom-bar .music-icon{
 
216
        background:url(../img/dash/dash-music.png) no-repeat scroll 0px -44px;
 
217
}
 
218
#systemOverlay #dash-bottom-bar .files-icon{
 
219
        background:url(../img/dash/dash-files.png) no-repeat scroll 0px -44px;
 
220
}
 
221
#systemOverlay #dash-bottom-bar .video-icon{
 
222
        background:url(../img/dash/dash-video.png) no-repeat scroll 0px -44px;
 
223
}
 
224
 
 
225
#systemOverlay #dash-bottom-bar .bottom-wrapper div:hover{
 
226
        background-position: 0px -88px;
 
227
}
 
228
#systemOverlay #dash-bottom-bar div.active,
 
229
#systemOverlay #dash-bottom-bar div.active:hover{
 
230
        background-position: 0px 0px;
 
231
}
 
232
 
 
233