rev |
line source |
pankso@528
|
1 /* Tiny/Mobile screens CSS style for SliTaz */
|
pankso@528
|
2
|
pankso@528
|
3 @media (max-width: 680px) {
|
pankso@528
|
4
|
pankso@528
|
5 body { font: 100% sans-serif, vernada, arial; }
|
pankso@528
|
6 #header, #logo, nav p { display: none !important; }
|
pankso@528
|
7 #user { top: 65px; background-color: #ddd; }
|
pankso@528
|
8 #user a { color: #444; } #user a:hover { color: #000; }
|
pankso@528
|
9 #account-info { width: auto; height: 120px; float: none; }
|
pankso@528
|
10 #login { width: auto; float: none; height: 120px; margin-top: 20px; }
|
pankso@528
|
11 .mobile { display: block !important; }
|
pankso@528
|
12 .mobile span { display: inline !important; }
|
pankso@528
|
13
|
pankso@528
|
14 body {
|
pankso@528
|
15 width: auto;
|
pankso@528
|
16 margin: 0;
|
pankso@528
|
17 padding: 0;
|
pankso@528
|
18 }
|
pankso@528
|
19 img, table, td, blockquote, code, pre, textarea, input, iframe,
|
pankso@528
|
20 object, embed, video {
|
pankso@528
|
21 max-width: 100%;
|
pankso@528
|
22 }
|
pankso@528
|
23
|
pankso@528
|
24 /* Keep images ratio */
|
pankso@528
|
25 img {
|
pankso@528
|
26 height: auto;
|
pankso@528
|
27 -webkit-box-sizing: border-box;
|
pankso@528
|
28 -moz-box-sizing: border-box;
|
pankso@528
|
29 box-sizing: border-box;
|
pankso@528
|
30 }
|
pankso@528
|
31 textarea, table, td, th, code, pre, samp {
|
pankso@528
|
32 word-wrap: break-word;
|
pankso@528
|
33 -webkit-hyphens: auto;
|
pankso@528
|
34 -moz-hyphens: auto;
|
pankso@528
|
35 hyphens: auto;
|
pankso@528
|
36 }
|
pankso@528
|
37 code, pre, samp { white-space: pre-wrap; }
|
pankso@528
|
38
|
pankso@528
|
39 /* Navigation */
|
pankso@528
|
40
|
pankso@528
|
41 nav {
|
pankso@528
|
42 min-height: 0;
|
pankso@528
|
43 max-height: 0;
|
pankso@528
|
44 font-size: 116%;
|
pankso@528
|
45 padding: 0;
|
pankso@528
|
46 text-align: left;
|
pankso@528
|
47 color: #222;
|
pankso@528
|
48 border-bottom: 1px solid #afafaf;
|
pankso@528
|
49 margin-bottom: 20px;
|
pankso@528
|
50 top: 0;
|
pankso@528
|
51 display: block;
|
pankso@528
|
52 }
|
pankso@528
|
53
|
pankso@528
|
54 nav:before {
|
pankso@528
|
55 content: "Menu \25BC";
|
pankso@528
|
56 display: block;
|
pankso@528
|
57 padding: .8em;
|
pankso@528
|
58 background: #333;
|
pankso@528
|
59 color: #fff;
|
pankso@528
|
60 border-bottom: 4px solid #afafaf;
|
pankso@528
|
61 background: #222 url(images/logo.png) no-repeat right;
|
pankso@528
|
62 }
|
pankso@528
|
63 nav ul {
|
pankso@528
|
64 max-height: 0;
|
pankso@528
|
65 overflow: hidden;
|
pankso@528
|
66 margin: 0; padding: 0;
|
pankso@528
|
67 list-style: none;
|
pankso@528
|
68 }
|
pankso@528
|
69 nav a {
|
pankso@528
|
70 display: block;
|
pankso@528
|
71 padding: 0.8em;
|
pankso@528
|
72 background: #4A7377;
|
pankso@528
|
73 color: #fff;
|
pankso@528
|
74 text-decoration: none;
|
pankso@528
|
75 background-color: #000;
|
pankso@528
|
76 opacity: 0.95;
|
pankso@528
|
77 border-radius: 0px;
|
pankso@528
|
78 }
|
pankso@528
|
79 nav:not(:focus) ul {
|
pankso@528
|
80 max-height: 0;
|
pankso@528
|
81 }
|
pankso@528
|
82 nav:focus ul {
|
pankso@528
|
83 margin-bottom: 25em;
|
pankso@528
|
84 }
|
pankso@528
|
85 nav ul {
|
pankso@528
|
86 /* number of <li> x5 */
|
pankso@528
|
87 max-height: 25em;
|
pankso@528
|
88 -webkit-transition: max-height .4s;
|
pankso@528
|
89 transition: max-height .4s;
|
pankso@528
|
90 }
|
pankso@528
|
91
|
pankso@528
|
92 /* Content */
|
pankso@528
|
93
|
pankso@528
|
94 #content {
|
pankso@528
|
95 margin: 65px 0 0 0;
|
pankso@528
|
96 padding: 2%;
|
pankso@528
|
97 text-align: justify;
|
pankso@528
|
98 max-width: auto;
|
pankso@528
|
99 }
|
pankso@528
|
100 pre, .box-dl, .box-rpi { overflow: hidden; }
|
pankso@528
|
101 }
|
pankso@528
|
102
|
pankso@528
|
103 @media (max-device-width:768px) and (orientation: landscape) {
|
pankso@528
|
104 html {
|
pankso@528
|
105 -webkit-text-size-adjust: 100%;
|
pankso@528
|
106 }
|
pankso@528
|
107 }
|