X-Git-Url: http://git.datanom.net/qtadmin.git/blobdiff_plain/a753fb8c16995eda2df899df85d5f0c7668bad6c..HEAD:/css/styles.css diff --git a/css/styles.css b/css/styles.css index 6773417..b90178b 100644 --- a/css/styles.css +++ b/css/styles.css @@ -5,6 +5,7 @@ color: navy; } + .user { float: right; font-family: Verdana, Arial, Helvetica, sans-serif; @@ -39,11 +40,142 @@ td { padding: 2px 6px; } -body { - font-family: Verdana, Arial, Helvetica, sans-serif; - font-size: 0.9em; - color: #3D658C; - background: white; +html body { + background-color: #EBE8E4; + color: #222; + font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif; + font-weight: 300; + font-size: 15px; +} + +nav { + background-color: #fff; + border: 1px solid #dedede; + border-radius: 4px; + box-shadow: 0 2px 2px -1px rgba(0, 0, 0, 0.055); + color: #888; + display: block; + margin: 8px 22px 8px 22px; + overflow: hidden; + width: 90%; +} + +nav ul { + margin: 0; + padding: 0; +} + +nav ul li { + display: inline-block; + list-style-type: none; + + -webkit-transition: all 0.2s; + -moz-transition: all 0.2s; + -ms-transition: all 0.2s; + -o-transition: all 0.2s; + transition: all 0.2s; +} + +nav > ul > li > a > .caret, +nav > ul > li > div ul > li > a > .caret { + border-top: 4px solid #aaa; + border-right: 4px solid transparent; + border-left: 4px solid transparent; + content: ""; + display: inline-block; + height: 0; + width: 0; + vertical-align: middle; + + -webkit-transition: color 0.1s linear; + -moz-transition: color 0.1s linear; + -o-transition: color 0.1s linear; + transition: color 0.1s linear; +} + +nav > ul > li > div ul > li > a > .caret { + border-bottom: 4px solid transparent; + border-top: 4px solid transparent; + border-right: 4px solid transparent; + border-left: 4px solid #f2f2f2; + margin: 0 0 0 8px; +} + +nav > ul > li > a { + color: #aaa; + display: block; + line-height: 56px; + padding: 0 24px; + text-decoration: none; +} + +nav > ul > li:hover { + background-color: rgb( 40, 44, 47 ); +} + +nav > ul > li:hover > a { + color: rgb( 255, 255, 255 ); +} + +nav > ul > li:hover > a > .caret { + border-top-color: rgb( 255, 255, 255 ); +} + +nav > ul > li > div ul > li:hover > a > .caret { + border-left-color: rgb(255,255,255); +} + +nav > ul > li > div, +nav > ul > li > div ul > li > div { + background-color: rgb( 40, 44, 47 ); + border-top: 0; + border-radius: 0 0 4px 4px; + box-shadow: 0 2px 2px -1px rgba(0, 0, 0, 0.055); + display: none; + margin: 0; + opacity: 0; + position: absolute; + width: 165px; + visibility: hidden; + + -webkit-transiton: opacity 0.2s; + -moz-transition: opacity 0.2s; + -ms-transition: opacity 0.2s; + -o-transition: opacity 0.2s; + -transition: opacity 0.2s; +} + +nav > ul > li > div ul > li > div { + background-color: rgb( 40, 44, 47 ); + border-radius: 0 4px 4px 4px; + box-shadow: inset 2px 0 5px rgba(0,0,0,.15); + margin-top: -42px; + right: -165px; +} + +nav > ul > li:hover > div, +nav > ul > li > div ul > li:hover > div { + display: block; + opacity: 1; + visibility: visible; +} + +nav > ul > li > div ul > li, +nav > ul > li > div ul > li > div ul > li { + display: block; + position: relative; +} + +nav > ul > li > div ul > li > a, +nav > ul > li > div ul > li > div ul > li > a { + color: #fff; + display: block; + padding: 12px 24px; + text-decoration: none; +} + +nav > ul > li > div ul > li:hover > a { + background-color: rgba( 255, 255, 255, 0.1); } .total-rows { @@ -62,16 +194,16 @@ body { margin-top: 5px; } -.footer { - margin-top: 20px; - margin-bottom: 10px; - bottom:0; - width: 99%; - position: absolute; +#container, #footer { + width: 100%; +} + +#footer{ font-size: 0.7em; background: #ECECAC; color: black; text-align: center; + height: 14px; } .whitefooter { @@ -91,7 +223,7 @@ img { .nav-action { text-align: center; - width: 53px; + width: 58px; } .label {