From 40b05174b69de8b0f8366b49d43a3cbc97563fda Mon Sep 17 00:00:00 2001 From: RaNaN Date: Wed, 30 Jan 2013 22:11:10 +0100 Subject: added actionbar, two-column dashboard --- module/web/static/css/default/admin.less | 2 +- module/web/static/css/default/common.less | 67 +++++++++++++ module/web/static/css/default/dashboard.less | 4 +- module/web/static/css/default/settings.less | 5 +- module/web/static/css/default/style.less | 136 +++++++++++---------------- 5 files changed, 126 insertions(+), 88 deletions(-) create mode 100644 module/web/static/css/default/common.less (limited to 'module/web/static/css/default') diff --git a/module/web/static/css/default/admin.less b/module/web/static/css/default/admin.less index dcd4acda5..604027dda 100644 --- a/module/web/static/css/default/admin.less +++ b/module/web/static/css/default/admin.less @@ -1,4 +1,4 @@ -@import "style.less"; +@import "common.less"; /* Admin diff --git a/module/web/static/css/default/common.less b/module/web/static/css/default/common.less new file mode 100644 index 000000000..990d665c1 --- /dev/null +++ b/module/web/static/css/default/common.less @@ -0,0 +1,67 @@ +/* + Definitions +*/ + +/* + Bootstrap size: Phones to tablets, min value when scrollbar appears +*/ +@min-width: 767px; + +/* + Threshold for slightly larger screen +*/ +@large-screen: 1150px; + +@header-height: 75px; +@actionbar-height: 40px; +@footer-height: 100px; + +@light: #ffffff; +@dark: #333333; + +@grey: #757575; +@greyLight: #E5E5E5; +@greyLighter: #F5F5F5; +@greyDark: #444444; +@greyDarker: #111113; + +@yellow: #ffd856; +@yellowLighter: lighten(spin(@yellow, 10), 20%); +@yellowLightest: lighten(spin(@yellow, 15), 30%); + +@blue: #3571a2; +@blueLight: lighten(spin(@blue, 5), 10%); +@blueLighter: lighten(spin(@blue, 10), 20%); +@blueLightest: lighten(spin(@blue, 20), 40%); +@blueDark: darken(spin(@blue, -5), 10%); +@blueDarker: darken(spin(@blue, -10), 20%); + +@green: #468847; +@greenLight: lighten(spin(@green, 5), 10%); + +@red: #b94a48; +@redLight: lighten(spin(@red, 5), 10%); + +@emph: #FF7637; + + +/* + Mixins +*/ + +.gradient(@origin: left, @start: #ffffff, @stop: #000000) { + background-color: @start; + background-image: -webkit-linear-gradient(@origin, @start, @stop); + background-image: -moz-linear-gradient(@origin, @start, @stop); + background-image: -o-linear-gradient(@origin, @start, @stop); + background-image: -ms-linear-gradient(@origin, @start, @stop); + background-image: linear-gradient(@origin, @start, @stop); +} + +.transition(@prop: all, @time: 0.25s, @ease: linear) { + -webkit-transition: @prop @time @ease; + -moz-transition: @prop @time @ease; + -o-transition: @prop @time @ease; + -ms-transition: @prop @time @ease; + transition: @prop @time @ease; +} \ No newline at end of file diff --git a/module/web/static/css/default/dashboard.less b/module/web/static/css/default/dashboard.less index 0c749eb36..e7e6117da 100644 --- a/module/web/static/css/default/dashboard.less +++ b/module/web/static/css/default/dashboard.less @@ -1,4 +1,4 @@ -@import "style.less"; +@import "common.less"; /* Dashboard @@ -93,7 +93,7 @@ } .package-row.first { - width: 50%; + width: 40%; font-weight: bold; i { diff --git a/module/web/static/css/default/settings.less b/module/web/static/css/default/settings.less index 225152da1..4b4efb423 100644 --- a/module/web/static/css/default/settings.less +++ b/module/web/static/css/default/settings.less @@ -1,4 +1,4 @@ -@import "style.less"; +@import "common.less"; /* Settings @@ -34,9 +34,6 @@ } .setting-box { - - margin-top: 20px; - border: 10px solid @blueDark; box-shadow: 0 0 5px @dark; // .gradient(bottom, @yellowLightest, @light); diff --git a/module/web/static/css/default/style.less b/module/web/static/css/default/style.less index ab79bb89c..ad84804e5 100644 --- a/module/web/static/css/default/style.less +++ b/module/web/static/css/default/style.less @@ -1,71 +1,4 @@ -/* - Definitions -*/ - -/* - Bootstrap size: Phones to tablets, min value when scrollbar appears -*/ -@min-width: 767px; - -/* - Threshold for slightly larger screen -*/ -@large-screen: 1150px; - -@header-height: 75px; -@footer-height: 100px; - -@margin-side: 100px; - -@light: #ffffff; -@dark: #333333; - -@grey: #757575; -@greyLight: #E5E5E5; -@greyLighter: #F5F5F5; -@greyDark: #444444; -@greyDarker: #111113; - -@yellow: #ffd856; -@yellowLighter: lighten(spin(@yellow, 10), 20%); -@yellowLightest: lighten(spin(@yellow, 15), 30%); - -@blue: #3571a2; -@blueLight: lighten(spin(@blue, 5), 10%); -@blueLighter: lighten(spin(@blue, 10), 20%); -@blueLightest: lighten(spin(@blue, 20), 40%); -@blueDark: darken(spin(@blue, -5), 10%); -@blueDarker: darken(spin(@blue, -10), 20%); - -@green: #468847; -@greenLight: lighten(spin(@green, 5), 10%); - -@red: #b94a48; -@redLight: lighten(spin(@red, 5), 10%); - -@emph: #FF7637; - -/* - Mixins -*/ - -.gradient(@origin: left, @start: #ffffff, @stop: #000000) { - background-color: @start; - background-image: -webkit-linear-gradient(@origin, @start, @stop); - background-image: -moz-linear-gradient(@origin, @start, @stop); - background-image: -o-linear-gradient(@origin, @start, @stop); - background-image: -ms-linear-gradient(@origin, @start, @stop); - background-image: linear-gradient(@origin, @start, @stop); -} - -.transition(@prop: all, @time: 0.25s, @ease: linear) { - -webkit-transition: @prop @time @ease; - -moz-transition: @prop @time @ease; - -o-transition: @prop @time @ease; - -ms-transition: @prop @time @ease; - transition: @prop @time @ease; -} - +@import "common.less"; /* General */ @@ -108,17 +41,9 @@ a:hover { } #content { - margin-left: @margin-side; - margin-right: @margin-side; padding-bottom: @footer-height; } -#content:before { - display: block; - content: " "; - height: @header-height; -} - /* Additional Responsive Class for larger desktop */ @@ -131,11 +56,6 @@ a:hover { .visible-large-screen { display: none !important; } - - #content { - margin-left: @margin-side / 2; - margin-right: @margin-side / 2; - } } .btn-blue { @@ -373,6 +293,60 @@ header .logo { font-family: sans-serif } +/* + Actionbar +*/ + +#actionbar-container:before { + display: block; + content: " "; + height: @header-height; +} + +#actionbar-container .row-fluid { + height: @actionbar-height; + + padding-top: 2px; + margin-bottom: 5px; + +} + +#actionbar { + padding-bottom: 3px; + margin-bottom: 0; + border-bottom: 1px dashed @grey; +} + +#actionbar > li > a { + margin-top: 4px; +} + +#actionbar .breadcrumb { + margin: 0; + padding-top: 10px; + padding-bottom: 0; + + .active { + color: @grey; + } + +} + +#actionbar form { + margin-top: 8px; + margin-bottom: 0; +} + +#actionbar input, #actionbar button { + padding-top: 2px; + padding-bottom: 2px; +} + +#actionbar .dropdown-menu i { + margin-top: 4px; + padding-right: 5px; +} + /* Login */ -- cgit v1.2.3