Fossil

Check-in [c565732f]
Login

Many hyperlinks are disabled.
Use anonymous login to enable hyperlinks.

Overview
Comment:Changes to the CSS for the default skin so that it works better on mobile.
Downloads: Tarball | ZIP archive | SQL archive
Timelines: family | ancestors | descendants | both | trunk
Files: files | file ages | folders
SHA3-256:c565732f78b03407839c237351295357ee5c22a0270de292ae6330abb43b5227
User & Date: drh 2018-08-31 17:15:29
Context
2018-08-31
19:03
In the default skin, adjust the labels in the menu bar depending on screen width. check-in: 306f8ffd user: drh tags: trunk
17:15
Changes to the CSS for the default skin so that it works better on mobile. check-in: c565732f user: drh tags: trunk
13:05
Improvements to the skin editor. check-in: bd2bf81c user: drh tags: trunk
Changes
Hide Diffs Unified Diffs Ignore Whitespace Patch

Changes to skins/default/css.txt.

1
2
3
4
5
6
7
8
9
10
..
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
..
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
...
208
209
210
211
212
213
214





































body {
    margin: 0 auto;
    padding: 0px 20px;
    background-color: white;
    font-family: sans-serif;
    font-size:14pt;
    -moz-text-size-adjust: none;
    -webkit-text-size-adjust: none;
    -mx-text-size-adjust: none;
}
................................................................................
hr {
    color: #eee;
}

.title {
    color: #4183C4;
    float:left;
    padding-top: 30px;
    padding-bottom: 10px;
}
.title h1 {
    display:inline;
}
.title h1:after {
    content: " / ";
    color: #777;
................................................................................
    display: inline-block;
    margin-right: 1em;
}

.status {
    float:right;
    font-size:.7em;
    padding-top:50px;
}

.mainmenu {
    font-size:.8em;
    clear:both;
    padding:10px;
    background:#eaeaea linear-gradient(#fafafa, #eaeaea) repeat-x;
    border:1px solid #eaeaea;
    border-radius:5px;
    overflow-x: auto;
    white-space: nowrap;
}

.mainmenu a {
    padding: 10px 20px;
    text-decoration:none;
    color: #777;
    border-right:1px solid #eaeaea;
}
.mainmenu a.active,
.mainmenu a:hover {
    color: #000;
................................................................................
}
span.submenuctrl {
  white-space: nowrap;
}
div.submenu label {
  white-space: nowrap;
}







































<







 







<
<







 







<





<








<







 







>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
1
2

3
4
5
6
7
8
9
..
23
24
25
26
27
28
29


30
31
32
33
34
35
36
..
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
...
202
203
204
205
206
207
208
209
210
211
212
213
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
body {
    margin: 0 auto;

    background-color: white;
    font-family: sans-serif;
    font-size:14pt;
    -moz-text-size-adjust: none;
    -webkit-text-size-adjust: none;
    -mx-text-size-adjust: none;
}
................................................................................
hr {
    color: #eee;
}

.title {
    color: #4183C4;
    float:left;


}
.title h1 {
    display:inline;
}
.title h1:after {
    content: " / ";
    color: #777;
................................................................................
    display: inline-block;
    margin-right: 1em;
}

.status {
    float:right;
    font-size:.7em;

}

.mainmenu {
    font-size:.8em;
    clear:both;

    background:#eaeaea linear-gradient(#fafafa, #eaeaea) repeat-x;
    border:1px solid #eaeaea;
    border-radius:5px;
    overflow-x: auto;
    white-space: nowrap;
}

.mainmenu a {

    text-decoration:none;
    color: #777;
    border-right:1px solid #eaeaea;
}
.mainmenu a.active,
.mainmenu a:hover {
    color: #000;
................................................................................
}
span.submenuctrl {
  white-space: nowrap;
}
div.submenu label {
  white-space: nowrap;
}

@media screen and (max-width: 600px) {
  /* Adjustments for mobile */
  body {
    padding-left: 4px;
    padding-right: 4px;
  }
  .title {
    padding-top: 0px;
    padding-bottom: 0px;
  }
  .status {padding-top: 0px;}
  .mainmenu a {
    padding: 10px 10px;
  }
  .mainmenu {
    padding: 10px;
  }
}
@media screen and (min-width: 600px) {
  /* Spacing for desktop */
  body {
    padding-left: 20px;
    padding-right: 20px;
  }
  .title {
    padding-top: 30px;
    padding-bottom: 10px;
  }
  .status {padding-top: 50px;}
  .mainmenu a {
    padding: 10px 20px;
  }
  .mainmenu {
    padding: 10px;
  }
}