From e83859cc53d7976fc63e63846fdf1f72a9bf6686 Mon Sep 17 00:00:00 2001 From: RaNaN Date: Mon, 17 Sep 2012 21:40:21 +0200 Subject: added less / moved style --- module/web/static/css/default/style.css | 312 ------------------------------ module/web/static/css/default/style.less | 318 +++++++++++++++++++++++++++++++ 2 files changed, 318 insertions(+), 312 deletions(-) delete mode 100644 module/web/static/css/default/style.css create mode 100644 module/web/static/css/default/style.less (limited to 'module/web/static/css/default') diff --git a/module/web/static/css/default/style.css b/module/web/static/css/default/style.css deleted file mode 100644 index 4694605da..000000000 --- a/module/web/static/css/default/style.css +++ /dev/null @@ -1,312 +0,0 @@ - -/* - General - */ - -* { - margin: 0; -} - -html, body { - height: 100%; -} - -body { - margin: 0; - padding: 0; - font-family: 'Abel', sans-serif; - font-size: 16px; - color: #757575; - background: url("../../img/default/bgpattern.png") repeat scroll 0 0 transparent; - min-width: 1000px; -} - -h1, h2, h3 { - margin: 0; - padding: 0; - font-weight: normal; - color: #221D1D; -} - -p, ul, ol { - margin-top: 0; - line-height: 180%; -} - -ul, ol { -} - -a { - text-decoration: none; - color: #3a79aa; -} - -a:hover { - text-decoration: none; - color: #FF7637; -} - -#wrap { - min-height: 100%; -} - -#content { - margin-left: 150px; - margin-right: 150px; - padding-bottom: 100px; /* Height of footer */ -} - -#content:before { - display: block; - content: " "; - height: 70px; /* Pushes content down with height of header */ -} - -/* - Header -*/ - -header { - background: url("../../img/default/main-wrapper-bg.png") repeat-x; - height: 70px; - position: fixed; - top: 0; - vertical-align: top; - width: 100%; - z-index: 10; - min-width: 1000px; - color: #ffffff; -} - -header a { - color: #ffffff; -} - -header:before { - position: absolute; - content: ' '; - top: 0; - right: 0; - bottom: 0; - left: 0; - background-color: transparent; - box-shadow: 0 0 5px black; - z-index: -1; -} - -header div.center { - position: relative; - padding-left: 20px; - padding-right: 20px; -} -header div.center span.title { - color: white; - float: left; - font-family: SansationRegular, sans-serif; - font-size: 40px; - cursor: default; - margin-top: 24px; -} -header .logo { - float: left; - margin-right: 10px; - margin-top: 6px; - width: 120px; - height: 120px; - background: url("../../img/default/logo.png")no-repeat; -} - -.header_block { - float: right; - margin: 12px 12px 0; - font-family: SansationRegular, sans-serif; -} -.header_icon { - padding-top: 2px; - padding-bottom: 5px; - padding-left: 25px; - height: 20px; -} - -.header_text { - text-align: center; -} - -.icon_info img { - margin-bottom: -4px; - padding-right: 5px; -} - -#notification_div { - position: absolute; - left: 50%; - width: 28%; - height: 45px; - margin-left: -14%; - margin-top: 12px; - text-align: center; -} - -#globalprogress { - height: 8px; - margin: 8px 5px 0; -} - -#globalprogress .bar { - background-color: #fee247; -} - -#speedgraph { - float: right; - height: 45px; - width: 14%; - margin-top: 12px; - font-family: sans-serif -} - -#header_user { - background: url("../../img/default/icon_user_small_white.png")no-repeat; -} - -#header_speed { - background: url("../../img/default/icon_speed_small_white.png")no-repeat; -} - -#header_qeuue { - background: url("../../img/default/icon_clock_small_white.png")no-repeat; -} - -/* - Login -*/ -.login { - vertical-align: middle; - border: 2px solid #000000; - padding: 15px 50px; - font-size: 17px; - border-radius: 15px; - -moz-border-radius: 15px; - -webkit-border-radius: 15px; -} -/* - Footer -*/ -footer { - background: url("../../img/default/main-wrapper-bg.png") repeat-x; - height: 100px; - margin-top: -100px; - position: relative; - width: 100%; - line-height: 16px; - z-index: 10; -} - -footer .logo { - background: url(../../img/default/logo_grey.png) no-repeat; - float: left; - width: 60px; - height: 60px; - margin-top: 12px; - margin-right: 12px; -} - -footer div.center { - padding-top: 8px; - width: 900px; - margin-left: auto; - margin-right: auto; -} - -footer:before { - position: absolute; - content: ' '; - top: 0; - right: 0; - bottom: 0; - left: 0; - background-color: transparent; - box-shadow: 0 0 5px black; - z-index: -1; -} - -footer .block { - font-size: 12px; - float: left; - margin: 0; - width: 150px; - padding-top: 6px; - padding-right: 30px; -} - -footer .copyright { - text-align: center; - width: auto; - padding-top: 22px; -} - -footer h2 { - background: url("../../img/default/double-line.gif") repeat-x scroll center bottom transparent !important; - color: #FFFFFF; - font-family: SansationLight, sans-serif; - font-size: 16px; - font-weight: normal; - line-height: 16px; - margin: 0; - padding-bottom: 6px; -} - -/* - Modal Overlay -*/ -#modal-overlay { - content: " "; - height: 100%; - width: 100%; - position: absolute; - left: 0; - top: 0; /* TODO change gradient at all browser */ - background: -moz-radial-gradient(center, ellipse cover, rgba(236,208,66,0) 0%, rgba(40,119,171,0.9) 100%); - /*background: -moz-radial-gradient(center, ellipse cover, rgba(127,127,0,0) 0%, rgba(127,127,127,0.9) 100%);*/ - background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%,rgba(127,127,127,0)), color-stop(100%,rgba(127,127,127,0.9))); - background: -webkit-radial-gradient(center, ellipse cover, rgba(127,127,127,0) 0%,rgba(127,127,127,0.9) 100%); - background: -o-radial-gradient(center, ellipse cover, rgba(127,127,127,0) 0%,rgba(127,127,127,0.9) 100%); - background: -ms-radial-gradient(center, ellipse cover, rgba(127,127,127,0) 0%,rgba(127,127,127,0.9) 100%); - background: radial-gradient(center, ellipse cover, rgba(127,127,127,0) 0%,rgba(127,127,127,0.9) 100%); - filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#007f7f7f', endColorstr='#e67f7f7f',GradientType=1 ); - z-index: 50; - opacity: 0; -} - -/* - Dashboard -*/ - -.nav > li > a:hover { - color: #3a79aa; -} - -#dash-nav { - border-bottom: 1px dashed #E5E5E5; - padding-bottom: 2px; - margin-bottom: 5px; -} - -#dash-nav li > a { - margin-top: 5px; -} - -#dash-nav .breadcrumb { - margin: 0; - padding-top: 6px; - padding-bottom: 0; -} - -#dash-nav form { - margin-top: 8px; - margin-bottom: 0; -} - -#dash-nav input, #dash-nav button { - padding-top: 2px; - padding-bottom: 2px; -} \ No newline at end of file diff --git a/module/web/static/css/default/style.less b/module/web/static/css/default/style.less new file mode 100644 index 000000000..08ae11f9e --- /dev/null +++ b/module/web/static/css/default/style.less @@ -0,0 +1,318 @@ + +/* + General + */ + +@width: 1000px; +@header-height: 70px; +@footer-height: 100px; +@margin-side: 150px; + +@dark: #333333; +@grey: #757575; +@yellow: #fee247; +@blue: #3a79aa; +@emph: #FF7637; + + +* { + margin: 0; +} + +html, body { + height: 100%; +} + +body { + margin: 0; + padding: 0; + font-family: 'Abel', sans-serif; + font-size: 16px; + background: url("../../img/default/bgpattern.png") repeat scroll 0 0 transparent; + min-width: @width; +} + +h1, h2, h3 { + margin: 0; + padding: 0; + font-weight: normal; +} + +a { + text-decoration: none; + color: @blue; +} + +a:hover { + text-decoration: none; + color: @emph; +} + +#wrap { + min-height: 100%; +} + +#content { + margin-left: @margin-side; + margin-right: @margin-side; + padding-bottom: @footer-height; +} + +#content:before { + display: block; + content: " "; + height: @header-height; +} + +/* + Header +*/ + +header { + background: url("../../img/default/main-wrapper-bg.png") repeat-x; + height: @header-height; + position: fixed; + top: 0; + vertical-align: top; + width: 100%; + z-index: 10; + min-width: @width; + color: #ffffff; +} + +header a { + color: #ffffff; +} + +header:before { + position: absolute; + content: ' '; + top: 0; + right: 0; + bottom: 0; + left: 0; + background-color: transparent; + box-shadow: 0 0 5px black; + z-index: -1; +} + +header div.center { + position: relative; + padding-left: 20px; + padding-right: 20px; +} +header div.center span.title { + color: white; + float: left; + font-family: SansationRegular, sans-serif; + font-size: 40px; + cursor: default; + margin-top: 24px; +} +header .logo { + float: left; + margin-right: 10px; + margin-top: 6px; + width: 120px; + height: 120px; + background: url("../../img/default/logo.png")no-repeat; +} + +.header_block { + float: right; + margin: 12px 12px 0; + font-family: SansationRegular, sans-serif; +} +.header_icon { + padding-top: 2px; + padding-bottom: 5px; + padding-left: 25px; + height: 20px; +} + +.header_text { + text-align: center; +} + +.icon_info img { + margin-bottom: -4px; + padding-right: 5px; +} + +#notification_div { + position: absolute; + left: 50%; + width: 28%; + height: 45px; + margin-left: -14%; + margin-top: 12px; + text-align: center; +} + +#globalprogress { + height: 8px; + margin: 8px 5px 0; +} + +#globalprogress .bar { + background-color: @yellow; +} + +#speedgraph { + float: right; + height: 45px; + width: 14%; + margin-top: 12px; + font-family: sans-serif +} + +#header_user { + background: url("../../img/default/icon_user_small_white.png")no-repeat; +} + +#header_speed { + background: url("../../img/default/icon_speed_small_white.png")no-repeat; +} + +#header_qeuue { + background: url("../../img/default/icon_clock_small_white.png")no-repeat; +} + +/* + Login +*/ +.login { + vertical-align: middle; + border: 2px solid @dark; + padding: 15px 50px; + font-size: 17px; + border-radius: 15px; + -moz-border-radius: 15px; + -webkit-border-radius: 15px; +} +/* + Footer +*/ +footer { + background: url("../../img/default/main-wrapper-bg.png") repeat-x; + color: @grey; + height: @footer-height; + margin-top: -@footer-height; + position: relative; + width: 100%; + line-height: 16px; + z-index: 10; +} + +footer .logo { + background: url(../../img/default/logo_grey.png) no-repeat; + float: left; + width: 60px; + height: 60px; + margin-top: 12px; + margin-right: 12px; +} + +footer div.center { + padding-top: 8px; + width: 900px; + margin-left: auto; + margin-right: auto; +} + +footer:before { + position: absolute; + content: ' '; + top: 0; + right: 0; + bottom: 0; + left: 0; + background-color: transparent; + box-shadow: 0 0 5px black; + z-index: -1; +} + +footer .block { + font-size: 12px; + float: left; + margin: 0; + width: 150px; + padding-top: 6px; + padding-right: 30px; +} + +footer .copyright { + text-align: center; + width: auto; + padding-top: 22px; +} + +footer h2 { + background: url("../../img/default/double-line.gif") repeat-x scroll center bottom transparent !important; + color: #FFFFFF; + font-family: SansationLight, sans-serif; + font-size: 16px; + font-weight: normal; + line-height: 16px; + margin: 0; + padding-bottom: 6px; +} + +/* + Modal Overlay +*/ +#modal-overlay { + content: " "; + height: 100%; + width: 100%; + position: absolute; + left: 0; + top: 0; + background: -moz-radial-gradient(center, ellipse cover, rgba(236,208,66,0) 0%, rgba(40,119,171,0.9) 100%); + background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%,rgba(236,208,66,0)), color-stop(100%,rgba(40,119,171,0.9))); + background: -webkit-radial-gradient(center, ellipse cover, rgba(236,208,66,0) 0%,rgba(40,119,171,0.9) 100%); + background: -o-radial-gradient(center, ellipse cover, rgba(236,208,66,0) 0%,rgba(40,119,171,0.9) 100%); + background: -ms-radial-gradient(center, ellipse cover, rgba(236,208,66,0) 0%,rgba(40,119,171,0.9) 100%); + background: radial-gradient(center, ellipse cover, rgba(236,208,66,0) 0%,rgba(40,119,171,0.9) 100%); + z-index: 50; + opacity: 0; +} + +/* + Dashboard +*/ + +.nav > li > a:hover { + color: @blue; +} + +#dash-nav { + border-bottom: 1px dashed @grey; + padding-bottom: 2px; + margin-bottom: 5px; +} + +#dash-nav li > a { + margin-top: 5px; +} + +#dash-nav .breadcrumb { + margin: 0; + padding-top: 10px; + padding-bottom: 0; + + .active { + color: @grey; + } + +} + +#dash-nav form { + margin-top: 8px; + margin-bottom: 0; +} + +#dash-nav input, #dash-nav button { + padding-top: 2px; + padding-bottom: 2px; +} \ No newline at end of file -- cgit v1.2.3