ecommun / owncloud_ynh

Blame view

sources/core/css/apps.css 6.99 KB
edit raw normal view history
6d9380f96   Cédric Dupont   Update sources OC... 
1
 
  /* APP STYLING -------------------------------------------------------------- */
31b7f2792   Kload   Upgrade to ownclo... 
2
3
4
5
6
7
8
9
 
  
  #app {
  	height: 100%;
  	width: 100%;
  }
  #app * {
  	-moz-box-sizing: border-box; box-sizing: border-box;
  }
6d9380f96   Cédric Dupont   Update sources OC... 
10
11
12
13
14
 
  
  
  
  
  /* APP-NAVIGATION ------------------------------------------------------------*/
31b7f2792   Kload   Upgrade to ownclo... 
15
16
 
  /* Navigation: folder like structure */
  #app-navigation {
6d9380f96   Cédric Dupont   Update sources OC... 
17
 
  	width: 250px;
31b7f2792   Kload   Upgrade to ownclo... 
18
19
20
21
22
23
 
  	height: 100%;
  	float: left;
  	-moz-box-sizing: border-box; box-sizing: border-box;
  	background-color: #f8f8f8;
  	border-right: 1px solid #ccc;
  	padding-bottom: 44px;
6d9380f96   Cédric Dupont   Update sources OC... 
24
25
26
27
 
  	-webkit-user-select: none;
  	-moz-user-select: none;
  	-ms-user-select: none;
  	user-select: none;
31b7f2792   Kload   Upgrade to ownclo... 
28
29
 
  }
  #app-navigation > ul {
6d9380f96   Cédric Dupont   Update sources OC... 
30
 
  	position: relative;
31b7f2792   Kload   Upgrade to ownclo... 
31
32
33
34
35
36
37
38
39
40
 
  	height: 100%;
  	overflow: auto;
  	-moz-box-sizing: border-box; box-sizing: border-box;
  }
  #app-navigation li {
  	position: relative;
  	width: 100%;
  	-moz-box-sizing: border-box; box-sizing: border-box;
  }
  #app-navigation .active,
6d9380f96   Cédric Dupont   Update sources OC... 
41
 
  #app-navigation .active a {
31b7f2792   Kload   Upgrade to ownclo... 
42
43
 
  	background-color: #ddd;
  }
6d9380f96   Cédric Dupont   Update sources OC... 
44
45
46
47
48
 
  #app-navigation li:hover > a,
  #app-navigation .selected,
  #app-navigation .selected a {
  	background-color: #ccc;
  }
31b7f2792   Kload   Upgrade to ownclo... 
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
 
  
  /* special rules for first-level entries and folders */
  #app-navigation > ul > li {
  	background-color: #f8f8f8;
  }
  
  #app-navigation .with-icon a {
  	padding-left: 44px;
  	background-size: 16px 16px;
  	background-position: 14px center;
  	background-repeat: no-repeat;
  }
  
  #app-navigation li > a {
  	display: block;
  	width: 100%;
  	line-height: 44px;
  	padding: 0 12px;
  	overflow: hidden;
  	-moz-box-sizing: border-box; box-sizing: border-box;
  	white-space: nowrap;
  	text-overflow: ellipsis;
  	color: #333;
  }
  
  #app-navigation .collapse {
  	display: none; /* hide collapse button intially */
  }
  #app-navigation .collapsible > .collapse {
  	position: absolute;
  	height: 44px;
  	width: 44px;
  	margin: 0;
  	padding: 0;
  	background: none; background-image: url('../img/actions/triangle-s.svg');
  	background-size: 16px; background-repeat: no-repeat; background-position: center;
  	border: none;
  	border-radius: 0;
  	outline: none !important;
  	box-shadow: none;
  }
  #app-navigation .collapsible:hover > a {
  	background-image: none;
  }
  #app-navigation .collapsible:hover > .collapse {
  	display: block;
  }
  
  #app-navigation .collapsible .collapse {
  	-moz-transform: rotate(-90deg);
  	-webkit-transform: rotate(-90deg);
  	-ms-transform:rotate(-90deg);
  	-o-transform:rotate(-90deg);
  	transform: rotate(-90deg);
  }
  #app-navigation .collapsible.open .collapse {
  	-moz-transform: rotate(0);
  	-webkit-transform: rotate(0);
  	-ms-transform:rotate(0);
  	-o-transform:rotate(0);
  	transform: rotate(0);
  }
  
  /* Second level nesting for lists */
  #app-navigation > ul ul {
  	display: none;
  }
  #app-navigation > ul ul li > a {
  	padding-left: 32px;
  }
  #app-navigation > .with-icon ul li > a {
  	padding-left: 68px;
  	background-position: 44px center;
  }
  
  #app-navigation .open {
  	background-image: linear-gradient(top, rgb(238,238,238) 0%, rgb(245,245,245) 100%);
  	background-image: -o-linear-gradient(top, rgb(238,238,238) 0%, rgb(245,245,245) 100%);
  	background-image: -moz-linear-gradient(top, rgb(238,238,238) 0%, rgb(245,245,245) 100%);
  	background-image: -webkit-linear-gradient(top, rgb(238,238,238) 0%, rgb(245,245,245) 100%);
  	background-image: -ms-linear-gradient(top, rgb(238,238,238) 0%, rgb(245,245,245) 100%);
  }
  
  #app-navigation > ul .open:hover {
  	box-shadow: inset 0 0 3px #ccc;
  }
  
  #app-navigation > ul .open ul {
  	display: block;
  }
  
  
  /* counter and actions */
  #app-navigation .utils {
  	position: absolute;
  	padding: 7px 7px 0 0;
  	right: 0;
  	top: 0;
  	bottom: 0;
  	font-size: 12px;
  }
  	#app-navigation .utils button,
  	#app-navigation .utils .counter {
  		width: 44px;
  		height: 44px;
  		padding-top: 12px;
  	}
  
  
  /* drag and drop */
  #app-navigation .drag-and-drop {
  	-moz-transition: padding-bottom 500ms ease 0s;
  	-o-transition: padding-bottom 500ms ease 0s;
  	-webkit-transition: padding-bottom 500ms ease 0s;
  	-ms-transition: padding-bottom 500ms ease 0s;
  	transition: padding-bottom 500ms ease 0s;
  	padding-bottom: 40px;
  }
31b7f2792   Kload   Upgrade to ownclo... 
167
168
169
170
171
172
173
 
  #app-navigation .error {
  	color: #dd1144;
  }
  
  #app-navigation .app-navigation-separator {
  	border-bottom: 1px solid #ddd;
  }
6d9380f96   Cédric Dupont   Update sources OC... 
174
175
176
 
  
  
  /* APP-CONTENT ---------------------------------------------------------------*/
31b7f2792   Kload   Upgrade to ownclo... 
177
178
 
  /* Part where the content will be loaded into */
  #app-content {
6d9380f96   Cédric Dupont   Update sources OC... 
179
 
  	position: relative;
31b7f2792   Kload   Upgrade to ownclo... 
180
181
182
 
  	height: 100%;
  	overflow-y: auto;
  }
6d9380f96   Cédric Dupont   Update sources OC... 
183
184
185
 
  
  
  /* APP-SETTINGS ---------------------------------------------------------------*/
31b7f2792   Kload   Upgrade to ownclo... 
186
187
188
 
  /* settings area */
  #app-settings {
  	position: fixed;
6d9380f96   Cédric Dupont   Update sources OC... 
189
 
  	width: 249px;
31b7f2792   Kload   Upgrade to ownclo... 
190
191
192
 
  	bottom: 0;
  	border-top: 1px solid #ccc;
  }
6d9380f96   Cédric Dupont   Update sources OC... 
193
194
195
 
  #app-settings.opened #app-settings-content {
  	display: block;
  }
31b7f2792   Kload   Upgrade to ownclo... 
196
197
198
199
200
201
202
203
204
205
 
  #app-settings-header {
  	background-color: #eee;
  }
  #app-settings-content {
  	display: none;
  	padding: 10px;
  	background-color: #eee;
  }
  #app-settings.open #app-settings-content {
  	display: block;
6d9380f96   Cédric Dupont   Update sources OC... 
206
207
208
209
210
211
212
213
 
  	/* restrict height of settings and make scrollable */
  	max-height: 300px;
  	overflow-y: auto;
  }
  
  /* display input fields at full width */
  #app-settings-content input[type='text'] {
  	width: 93%;
31b7f2792   Kload   Upgrade to ownclo... 
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
 
  }
  
  .settings-button {
  	display: block;
  	height: 44px;
  	width: 100%;
  	padding: 0;
  	margin: 0;
  	background-color: transparent; background-image: url('../img/actions/settings.svg');
  	background-position: 10px center; background-repeat: no-repeat;
  	box-shadow: none;
  	border: 0;
  	border-radius: 0;
  }
  .settings-button:hover,
  .settings-button:focus {
  	background-color: #ddd;
  }
  .settings-button.opened:hover,
  .settings-button.opened:focus {
  	background-color: transparent;
  }
  
  /* icons */
  .folder-icon, .delete-icon, .edit-icon, .progress-icon {
  	background-repeat: no-repeat;
  	background-position: center;
  }
  .folder-icon { background-image: url('../img/places/folder.svg'); }
  .delete-icon { background-image: url('../img/actions/delete.svg'); }
  .delete-icon:hover, .delete-icon:focus {
  	background-image: url('../img/actions/delete-hover.svg');
  }
  .edit-icon { background-image: url('../img/actions/rename.svg'); }
  .progress-icon {
  	background-image: url('../img/loading.gif');
  	background-size: 16px;
  	/* force show the loading icon, not only on hover */
  	-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
  	filter:alpha(opacity=100);
  	opacity: 1 !important;
  	display: inline !important;
  }
  
  /* buttons */
  button.loading {
  	background-image: url('../img/loading.gif');
  	background-position: right 10px center; background-repeat: no-repeat;
  	background-size: 16px;
  	padding-right: 30px;
  }
837968727   Kload   [enh] Upgrade to ... 
265
266
267
268
269
270
271
272
273
 
  /* general styles for the content area */
  .section {
  	display: block;
  	padding: 30px;
  	color: #555;
  	border-top: 1px solid #ddd;
  }
  .section h2 {
  	font-size: 20px;
837968727   Kload   [enh] Upgrade to ... 
274
275
 
  	margin-bottom: 7px;
  }
6d9380f96   Cédric Dupont   Update sources OC... 
276
277
278
 
  .section h3 {
  	font-size: 16px;
  }
837968727   Kload   [enh] Upgrade to ... 
279
280
281
282
283
284
 
  /* slight position correction of checkboxes and radio buttons */
  .section input[type="checkbox"],
  .section input[type="radio"] {
  	vertical-align: -2px;
  	margin-right: 4px;
  }
6d9380f96   Cédric Dupont   Update sources OC... 
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
 
  .appear {
  	opacity: 1;
  	transition: opacity 500ms ease 0s;
  	-moz-transition: opacity 500ms ease 0s;
  	-ms-transition: opacity 500ms ease 0s;
  	-o-transition: opacity 500ms ease 0s;
  	-webkit-transition: opacity 500ms ease 0s;
  }
  .appear.transparent {
  	opacity: 0;
  }
  
  
  /* do not use italic typeface style, instead lighter color */
  em {
  	font-style: normal;
  	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
  	filter: alpha(opacity=50);
  	opacity: .5;
  }