From 3dcb693bf3b9df5efcc633cb6d9cffc2cd551ce2 Mon Sep 17 00:00:00 2001 From: RaNaN Date: Sat, 6 Apr 2013 14:43:02 +0200 Subject: separated styles, improved footer --- module/web/static/css/default/base.less | 164 ++++++++++++++++++++ module/web/static/css/default/style.less | 210 ++++---------------------- module/web/static/img/default/double-line.gif | Bin 50 -> 0 bytes module/web/templates/default/base.html | 66 ++++---- 4 files changed, 227 insertions(+), 213 deletions(-) create mode 100644 module/web/static/css/default/base.less delete mode 100644 module/web/static/img/default/double-line.gif (limited to 'module/web') diff --git a/module/web/static/css/default/base.less b/module/web/static/css/default/base.less new file mode 100644 index 000000000..f3be924c6 --- /dev/null +++ b/module/web/static/css/default/base.less @@ -0,0 +1,164 @@ +@import "common"; + +/* + General +*/ + +* { + 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: @min-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 { + padding-bottom: @footer-height; +} + +#content-container:before { + display: block; + content: " "; + height: @header-height; +} + +/* + Additional Responsive Class for larger desktop +*/ + +.visible-large-screen { + display: inherit !important; +} + +@media (max-width: @large-screen) { + .visible-large-screen { + display: none !important; + } +} + +.btn-blue { + background-color: hsl(206, 49%, 35%) !important; + background-repeat: repeat-x; + background-image: -khtml-gradient(linear, left top, left bottom, from(#5493c4), to(#2d5f84)); + background-image: -moz-linear-gradient(top, #5493c4, #2d5f84); + background-image: -ms-linear-gradient(top, #5493c4, #2d5f84); + background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #5493c4), color-stop(100%, #2d5f84)); + background-image: -webkit-linear-gradient(top, #5493c4, #2d5f84); + background-image: -o-linear-gradient(top, #5493c4, #2d5f84); + background-image: linear-gradient(#5493c4, #2d5f84); + border-color: #2d5f84 #2d5f84 hsl(206, 49%, 30%); + color: #fff !important; + text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.33); + -webkit-font-smoothing: antialiased; + + .caret { + border-bottom-color: #FFFFFF; + border-top-color: #FFFFFF; + } + +} + +.btn-yellow { + background-color: hsl(46, 100%, 57%) !important; + background-repeat: repeat-x; + background-image: -khtml-gradient(linear, left top, left bottom, from(#ffe389), to(#fecb23)); + background-image: -moz-linear-gradient(top, #ffe389, #fecb23); + background-image: -ms-linear-gradient(top, #ffe389, #fecb23); + background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #ffe389), color-stop(100%, #fecb23)); + background-image: -webkit-linear-gradient(top, #ffe389, #fecb23); + background-image: -o-linear-gradient(top, #ffe389, #fecb23); + background-image: linear-gradient(#ffe389, #fecb23); + border-color: #fecb23 #fecb23 hsl(46, 100%, 52%); + color: #333 !important; + text-shadow: 0 1px 1px rgba(255, 255, 255, 0.33); + -webkit-font-smoothing: antialiased; + + .caret { + border-bottom-color: #FFFFFF; + border-top-color: #FFFFFF; + } +} + +.iconf-8x { + font-size: 8em; +} + +// Will not work well in buttons/navs, would require more rules +.iconf-larger { + vertical-align: -10%; + font-size: 1.5em; +} + +/* + 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: 100; + opacity: 0; +} + +div.modal-header { + border-top-left-radius: 4px; + border-top-right-radius: 4px; + background-color: @blueDark; + color: #FFFFFF; + + .close { + color: @light; + } + +} + +.select2-container { + min-width: 220px; // same as other input fields +} + +div.modal-body { + max-height: 100%; +} + +div.modal { + width: 600px; + +} \ No newline at end of file diff --git a/module/web/static/css/default/style.less b/module/web/static/css/default/style.less index 4cafb1030..4a195542e 100644 --- a/module/web/static/css/default/style.less +++ b/module/web/static/css/default/style.less @@ -1,122 +1,5 @@ -@import "common.less"; +@import "base.less"; -/* - General -*/ - -* { - 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: @min-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 { - padding-bottom: @footer-height; -} - -#content-container:before { - display: block; - content: " "; - height: @header-height; -} - -/* - Additional Responsive Class for larger desktop -*/ - -.visible-large-screen { - display: inherit !important; -} - -@media (max-width: @large-screen) { - .visible-large-screen { - display: none !important; - } -} - -.btn-blue { - background-color: hsl(206, 49%, 35%) !important; - background-repeat: repeat-x; - background-image: -khtml-gradient(linear, left top, left bottom, from(#5493c4), to(#2d5f84)); - background-image: -moz-linear-gradient(top, #5493c4, #2d5f84); - background-image: -ms-linear-gradient(top, #5493c4, #2d5f84); - background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #5493c4), color-stop(100%, #2d5f84)); - background-image: -webkit-linear-gradient(top, #5493c4, #2d5f84); - background-image: -o-linear-gradient(top, #5493c4, #2d5f84); - background-image: linear-gradient(#5493c4, #2d5f84); - border-color: #2d5f84 #2d5f84 hsl(206, 49%, 30%); - color: #fff !important; - text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.33); - -webkit-font-smoothing: antialiased; - - .caret { - border-bottom-color: #FFFFFF; - border-top-color: #FFFFFF; - } - -} - -.btn-yellow { - background-color: hsl(46, 100%, 57%) !important; - background-repeat: repeat-x; - background-image: -khtml-gradient(linear, left top, left bottom, from(#ffe389), to(#fecb23)); - background-image: -moz-linear-gradient(top, #ffe389, #fecb23); - background-image: -ms-linear-gradient(top, #ffe389, #fecb23); - background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #ffe389), color-stop(100%, #fecb23)); - background-image: -webkit-linear-gradient(top, #ffe389, #fecb23); - background-image: -o-linear-gradient(top, #ffe389, #fecb23); - background-image: linear-gradient(#ffe389, #fecb23); - border-color: #fecb23 #fecb23 hsl(46, 100%, 52%); - color: #333 !important; - text-shadow: 0 1px 1px rgba(255, 255, 255, 0.33); - -webkit-font-smoothing: antialiased; - - .caret { - border-bottom-color: #FFFFFF; - border-top-color: #FFFFFF; - } -} - -.iconf-8x { - font-size: 8em; -} - -// Will not work well in buttons/navs, would require more rules -.iconf-larger { - vertical-align: -10%; - font-size: 1.5em; -} /* Header @@ -435,13 +318,17 @@ header .logo { -webkit-border-radius: 15px; } + /* Footer */ -footer { // background-color: @greyDark; +footer { +// Same gradient as navbar +// .gradient(top, #222222, #111111); background: url("../../img/default/bgpatterndark.png") repeat; color: @grey; - height: @footer-height; + min-height: @footer-height; + min-width: @min-width; margin-top: -@footer-height; position: relative; width: 100%; @@ -454,15 +341,12 @@ footer .logo { 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 hr { + margin: 4px 0; + border-top-color: @greyDarker; + border-bottom-color: @greyDark; } footer:before { @@ -477,73 +361,33 @@ footer:before { z-index: -1; } -footer .block { +footer .span2 { font-size: 12px; - float: left; - margin: 0; - width: 150px; + padding-top: 12px; + padding-bottom: 12px; +} + +// This is the copyright span +footer .offset1 { padding-top: 6px; - padding-right: 30px; + padding-bottom: 0; } footer .copyright { + background: url(../../img/default/logo_grey.png) no-repeat; + background-size: 60px 60px; + background-position: 8px center; + height: 60px; + padding-left: 60px; + padding-top: 24px; 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; + color: @light; 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: 100; - opacity: 0; -} - -div.modal-header { - border-top-left-radius: 4px; - border-top-right-radius: 4px; - background-color: @blueDark; - color: #FFFFFF; - - .close { - color: @light; - } - -} - -.select2-container { - min-width: 220px; // same as other input fields -} - -div.modal-body { - max-height: 100%; -} - -div.modal { - width: 600px; - -} +} \ No newline at end of file diff --git a/module/web/static/img/default/double-line.gif b/module/web/static/img/default/double-line.gif deleted file mode 100644 index e9f4cf971..000000000 Binary files a/module/web/static/img/default/double-line.gif and /dev/null differ diff --git a/module/web/templates/default/base.html b/module/web/templates/default/base.html index bf16f545a..2618b64c0 100644 --- a/module/web/templates/default/base.html +++ b/module/web/templates/default/base.html @@ -198,39 +198,45 @@ -- cgit v1.2.3