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