SliTaz Repositories

     1.1 --- /dev/null	Thu Jan 01 00:00:00 1970 +0000
     1.2 +++ b/scn/style-tiny.css	Thu Aug 20 08:44:15 2020 +0000
     1.3 @@ -0,0 +1,107 @@
     1.4 +/* Tiny/Mobile screens CSS style for SliTaz */
     1.5 +
     1.6 +@media (max-width: 680px) {
     1.7 +
     1.8 +	body { font: 100% sans-serif, vernada, arial; }
     1.9 +	#header, #logo, nav p { display: none !important; }
    1.10 +	#user { top: 65px; background-color: #ddd; }
    1.11 +	#user a {  color: #444; } #user a:hover { color: #000; }
    1.12 +	#account-info { width: auto; height: 120px; float: none; }
    1.13 +	#login { width: auto; float: none; height: 120px; margin-top: 20px; }
    1.14 +	.mobile { display: block !important; }
    1.15 +	.mobile span { display: inline !important; }
    1.16 +	
    1.17 +	body {
    1.18 +		width: auto;
    1.19 +		margin: 0;
    1.20 +		padding: 0;
    1.21 +	}
    1.22 +	img, table, td, blockquote, code, pre, textarea, input, iframe, 
    1.23 +	object, embed, video {
    1.24 +		max-width: 100%;
    1.25 +	}
    1.26 +	
    1.27 +	/* Keep images ratio */
    1.28 +	img {
    1.29 +		height: auto;
    1.30 +		-webkit-box-sizing: border-box;
    1.31 +		-moz-box-sizing: border-box;
    1.32 +		box-sizing: border-box;
    1.33 +	}
    1.34 +	textarea, table, td, th, code, pre, samp {
    1.35 +		word-wrap: break-word;
    1.36 +		-webkit-hyphens: auto;
    1.37 +		-moz-hyphens: auto;
    1.38 +		hyphens: auto;
    1.39 +	}
    1.40 +	code, pre, samp { white-space: pre-wrap; }
    1.41 +
    1.42 +	/* Navigation */
    1.43 +	
    1.44 +	nav {
    1.45 +		min-height: 0;
    1.46 +		max-height: 0;
    1.47 +		font-size: 116%;
    1.48 +		padding: 0;
    1.49 +		text-align: left;
    1.50 +		color: #222;
    1.51 +		border-bottom: 1px solid #afafaf;
    1.52 +		margin-bottom: 20px;
    1.53 +		top: 0;
    1.54 +		display: block;
    1.55 +	}
    1.56 +
    1.57 +	nav:before {
    1.58 +		content: "Menu \25BC"; 
    1.59 +		display: block;
    1.60 +		padding: .8em;
    1.61 +		background: #333;
    1.62 +		color: #fff;
    1.63 +		border-bottom: 4px solid #afafaf;
    1.64 +		background: #222 url(images/logo.png) no-repeat right;
    1.65 +	}
    1.66 +	nav ul {
    1.67 +	    max-height: 0;
    1.68 +	    overflow: hidden;
    1.69 +	    margin: 0; padding: 0;
    1.70 +	    list-style: none;
    1.71 +	}
    1.72 +	nav a {
    1.73 +		display: block;
    1.74 +		padding: 0.8em;
    1.75 +		background: #4A7377;
    1.76 +		color: #fff;
    1.77 +		text-decoration: none;
    1.78 +		background-color: #000;
    1.79 +		opacity: 0.95;
    1.80 +		border-radius: 0px;
    1.81 +	}
    1.82 +	nav:not(:focus) ul {
    1.83 +		max-height: 0;
    1.84 +	}
    1.85 +	nav:focus ul {
    1.86 +		margin-bottom: 25em;
    1.87 +	}
    1.88 +	nav ul {
    1.89 +		/* number of <li> x5 */
    1.90 +		max-height: 25em;
    1.91 +		-webkit-transition: max-height .4s;
    1.92 +		transition: max-height .4s;
    1.93 +	}
    1.94 +	
    1.95 +	/* Content */
    1.96 +	
    1.97 +	#content {
    1.98 +		margin: 65px 0 0 0;
    1.99 +		padding: 2%;
   1.100 +		text-align: justify;
   1.101 +		max-width: auto;
   1.102 +	}
   1.103 +	pre, .box-dl, .box-rpi { overflow: hidden; }
   1.104 +}
   1.105 +
   1.106 +@media (max-device-width:768px) and (orientation: landscape) {
   1.107 +	html {
   1.108 +		-webkit-text-size-adjust: 100%;
   1.109 +	}
   1.110 +}