From 187883fd80675211a022a6e98f6d5d84a796373f Mon Sep 17 00:00:00 2001 From: Alex AUVOLAT Date: Fri, 23 Nov 2012 21:18:17 +0100 Subject: Minor style changes - makes it usable in uzbl --- design/style.css | 117 +++++++++++++++++++++++++++++-------------------------- 1 file changed, 61 insertions(+), 56 deletions(-) (limited to 'design') diff --git a/design/style.css b/design/style.css index 19cacc1..3aaff45 100644 --- a/design/style.css +++ b/design/style.css @@ -1,3 +1,6 @@ + +/* STUFF FOR MOBILE VERSION - MUST BE OVERWRITTEN IN SECTON FOR LARGE SCREENS */ + body { background: #FBFBFB; padding: 0px; @@ -5,26 +8,6 @@ body { width: 400px; } -@media (min-device-width: 400px) and (min-width: 400px) { - body { - width: 100%; - } -} - -a { - color: #007; - text-decoration: none; -} - -h1 { - clear: both; - margin: 0px; - padding: 0px; - font-size: 1.2em; - text-align: center; - text-transform: uppercase; -} - .menu { padding: 4px; margin-bottom: 8px; @@ -32,42 +15,48 @@ h1 { border-bottom: 1px solid #F0F0F0; } -.menu .right { - float: right; +.contents-left, .contents-right { + padding: 2px; } -.menu .right a { - text-align: right; -} - -.menu a { - display: inline-block; - padding: 8px; -} +/* SUTFF FOR LARGE SCREENS */ @media (min-device-width: 400px) and (min-width: 400px) { + body { + width: 100%; + } + + .menu { - padding-left: 20px; - padding-right: 20px; + padding-left: 10px; + padding-right: 10px; + position: fixed; + top: 0px; + left: 0px; + right: 0px; + } + + .menu .right { + float: right; + } + + .menu .right a { + text-align: right; } .menu a { + display: inline-block; padding: 4px; padding-left: 25px; padding-right: 25px; } -} - -.contents-left, .contents-right { - padding: 2px; -} -@media (min-device-width: 400px) and (min-width: 400px) { + .contents-left { - position: absolute; + position: fixed; top: 50px; left: 0px; - bottom: 16px; + bottom: 0px; width: 300px; border-right: 1px solid #ddd; overflow: auto; @@ -75,26 +64,12 @@ h1 { } .contents-right { - position: absolute; - top: 50px; - left: 332px; - bottom: 16px; - right: 0px; - overflow: auto; + margin-top: 50px; + margin-left: 332px; padding: 16px; } -} -dt { - font-weight: bold; -} - -iframe, textarea { - width: 98%; - min-height: 200px; -} -@media (min-device-width: 400px) and (min-width: 400px) { label { border-bottom: 1px dashed gray; } @@ -139,6 +114,36 @@ iframe, textarea { } } +/* GENERAL STUFF */ + + + +a { + color: #007; + text-decoration: none; +} + +h1 { + clear: both; + margin: 0px; + padding: 0px; + font-size: 1.2em; + text-align: center; + text-transform: uppercase; +} + + + +dt { + font-weight: bold; +} + +iframe, textarea { + width: 98%; + min-height: 200px; +} + + .error { margin-top: 8px; margin-bottom: 8px; -- cgit v1.2.3