diff --git a/gadjo/static/css/_forms.scss b/gadjo/static/css/_forms.scss index eae3152..1a79f16 100644 --- a/gadjo/static/css/_forms.scss +++ b/gadjo/static/css/_forms.scss @@ -1,4 +1,4 @@ -$button-color: #5B616B; +$button-color: $primary-color; $button-cancel-color: grayscale($button-color); $button-delete-color: #CD2026; $button-submit-color: #215D9C; @@ -10,6 +10,7 @@ input, select, button, textarea { label { margin-bottom: 0; + font-weight: normal; } form div.widget { @@ -67,7 +68,7 @@ a.button { line-height: 2.5em; } -a.button, button, input[type=submit], div.buttons input { +%button { padding: 5px 15px; cursor: pointer; border: 0px solid #aaa; @@ -75,18 +76,23 @@ a.button, button, input[type=submit], div.buttons input { vertical-align: baseline; border-radius: 3px; font-weight: bold; + background: white; + border: 1px solid $button-color; + color: $button-color; + &:hover { + background: $button-color; + color: white; + border-color: darken($button-color, 20%); + } + &:active { border-color: darken($button-color, 10%); } + &:focus { + border-color: darken($button-color, 20%); + } + @include vendor-prefix('transition', 'border-color 0.2s ease, box-shadow 0.2s linear'); } a.button, button, input[type=submit], div.buttons input { - background: $button-color; - border: 1px solid $button-color; - color: text-color($button-color); - &:hover { background: darken($button-color, 20%); } - &:active { background: darken($button-color, 10%); } - &:focus { - box-shadow: 0 0 3px #2e444f, 0 0 7px #2e444f; - }; - @include vendor-prefix('transition', 'background 0.2s ease, box-shadow 0.2s linear'); + @extend %button; } input[type=submit] { @@ -94,24 +100,35 @@ input[type=submit] { } a.cancel-button, button.cancel-button, div.buttons .cancel-button input, div.buttons .cancel-button button { - background: $button-cancel-color; + color: $button-cancel-color; border-color: $button-cancel-color; - &:hover { background: darken($button-cancel-color, 20%); } - &:active { background: darken($button-cancel-color, 10%); } + &:hover { + background: white; + border-color: darken($button-cancel-color, 20%); + } + &:active { border-color: darken($button-cancel-color, 10%); } } a.delete-button, button.delete-button, div.buttons .delete-button input, div.buttons .delete-button button { - background: $button-delete-color; + color: $button-delete-color; border-color: $button-delete-color; - &:hover { background: darken($button-delete-color, 20%); } - &:active { background: darken($button-delete-color, 10%); } + &:hover { + background: $button-delete-color; + color: white; + border-color: darken($button-delete-color, 20%); + } + &:active { border-color: darken($button-delete-color, 10%); } } a.submit-button, button.submit-button, div.buttons .submit-button input, div.buttons .submit-button button { - background: $button-submit-color; + color: $button-submit-color; border-color: $button-submit-color; - &:hover { background: darken($button-submit-color, 20%); } - &:active { background: darken($button-submit-color, 10%); } + &:hover { + color: white; + background: $button-submit-color; + border-color: darken($button-submit-color, 20%); + } + &:active { border-color: darken($button-submit-color, 10%); } } form.disabled-during-submit { @@ -145,9 +162,10 @@ input, input[type="text"], input[type="url"], input[type="email"], input[type="p outline: medium none; padding: 0.7ex 0.7em; max-width: 100%; - @include vendor-prefix('transition', 'box-shadow 0.1s linear'); + @include vendor-prefix('transition', 'background-size 0.2s ease'); + background: white; &:focus { - box-shadow: 0 0 0px 1px #1999cd; + border-bottom-color: $button-submit-color; } &.disabled, &[disabled] { @@ -265,7 +283,7 @@ fieldset.gadjo-foldable legend.gadjo-foldable-widget:after { content: "▼"; @include vendor-prefix('transition', 'transform 0.1s ease'); position: absolute; - right: 0; + right: 1ex; } fieldset.gadjo-foldable.gadjo-folded legend.gadjo-foldable-widget:after { transform: rotate(-90deg); diff --git a/gadjo/static/css/_hacks.scss b/gadjo/static/css/_hacks.scss new file mode 100644 index 0000000..8e5a8eb --- /dev/null +++ b/gadjo/static/css/_hacks.scss @@ -0,0 +1,34 @@ +/* temporary hacks for applications */ + +div.form-inner-container, // authentic +div#pages-list, // combo +div.placeholder, // combo +table.agenda-table, // chrono +div#appbar + form, // misc +div#main-content > h2:first-child + form, // w.c.s. +div.form-validation form, // w.c.s. +div#appbar + div#description // passerelle +{ + background: white; + padding: 0.5rem; + border-radius: 3px; + box-sizing: border-box; +} + +div.other_actions { // authentic + margin-left: 71%; + width: 29%; +} + +div div.bo-block ul.biglist { // w.c.s. + margin: -1ex; +} + +div div.bo-block ul.biglist p.details.badge { // w.c.s. + background: $primary-color; +} + +body.welco-home div#main-content { + background: white; + margin: 0; +} diff --git a/gadjo/static/css/_jqueryui.scss b/gadjo/static/css/_jqueryui.scss index ec3ddd8..afc62ac 100644 --- a/gadjo/static/css/_jqueryui.scss +++ b/gadjo/static/css/_jqueryui.scss @@ -109,7 +109,7 @@ div.ui-widget-overlay { left: 0; width: 100%; height: 100%; - opacity: 0.3; + opacity: 0.7; z-index: 1000; } @@ -132,16 +132,16 @@ div.ui-dialog { position: absolute; .ui-dialog-titlebar { - background: #eee; + background: white; border-radius: 0; border: none; position: relative; - padding: 0.4em 1em; + padding: 0.7em 1em; cursor: move; text-align: left; .ui-dialog-title { - font-size: 130%; + font-size: 140%; font-weight: normal; } @@ -156,9 +156,8 @@ div.ui-dialog { color: transparent; .ui-icon-closethick::after { color: #333; - content: "\f00d"; /* fa-times */ - font-family: FontAwesome; - padding-top: 5px; + content: "×"; + font-size: 120%; display: block; } .ui-button-text { @@ -186,8 +185,7 @@ div.ui-dialog { .ui-dialog-buttonpane { position: relative; - background: #eee; - border-top: 1px solid #aaaaaa; + background: white; margin-top: 0.5em; padding: 0.3em 1em 0.5em 0.4em; .ui-dialog-buttonset { diff --git a/gadjo/static/css/_opensans.scss b/gadjo/static/css/_opensans.scss index dcbcc50..9b0b368 100644 --- a/gadjo/static/css/_opensans.scss +++ b/gadjo/static/css/_opensans.scss @@ -1,13 +1,35 @@ -@font-face { - font-family: 'Open Sans'; - src: url('../xstatic/fonts/Regular/OpenSans-Regular.eot?#iefix') format('embedded-opentype'), url('../xstatic/fonts/Regular/OpenSans-Regular.woff') format('woff'), url('../xstatic/fonts/Regular/OpenSans-Regular.ttf') format('truetype'), url('../xstatic/fonts/Regular/OpenSans-Regular.svg#fontawesomeregular') format('svg'); - font-weight: normal; - font-style: normal; +$font-path: '../xstatic/fonts' !default; + +@mixin font($type, $weight) { + @font-face { + font-family: 'Open Sans'; + src: url('#{$font-path}/#{$type}/OpenSans-#{$type}.woff2') format('woff2'), + url('#{$font-path}/#{$type}/OpenSans-#{$type}.woff') format('woff'), + url('#{$font-path}/#{$type}/OpenSans-#{$type}.eot?#iefix') format('embedded-opentype'), + url('#{$font-path}/#{$type}/OpenSans-#{$type}.ttf?#iefix') format('truetype'); + font-weight: $weight; + font-style: normal; + } + @font-face { + font-family: 'Open Sans'; + @if $type == Regular { // not RegularItalic + src: url('#{$font-path}/Italic/OpenSans-Italic.woff2') format('woff2'), + url('#{$font-path}/Italic/OpenSans-Italic.woff') format('woff'), + url('#{$font-path}/Italic/OpenSans-Italic.eot?#iefix') format('embedded-opentype'), + url('#{$font-path}/Italic/OpenSans-Italic.ttf?#iefix') format('truetype'); + } @else { + src: url('#{$font-path}/#{$type}Italic/OpenSans-#{$type}Italic.woff2') format('woff2'), + url('#{$font-path}/#{$type}Italic/OpenSans-#{$type}Italic.woff') format('woff'), + url('#{$font-path}/#{$type}Italic/OpenSans-#{$type}Italic.eot?#iefix') format('embedded-opentype'), + url('#{$font-path}/#{$type}Italic/OpenSans-#{$type}Italic.ttf?#iefix') format('truetype'); + } + font-weight: $weight; + font-style: italic; + } } -@font-face { - font-family: 'Open Sans'; - src: url('../xstatic/fonts/Bold/OpenSans-Bold.eot?#iefix') format('embedded-opentype'), url('../xstatic/fonts/Bold/OpenSans-Bold.woff') format('woff'), url('../xstatic/fonts/Bold/OpenSans-Bold.ttf') format('truetype'), url('../xstatic/fonts/Bold/OpenSans-Bold.svg#fontawesomeregular') format('svg'); - font-weight: bold; - font-style: normal; -} +@include font('Light', 300); +@include font('Regular', 400); +@include font('Semibold', 600); +@include font('Bold', 700); +@include font('ExtraBold', 800); diff --git a/gadjo/static/css/_portal.scss b/gadjo/static/css/_portal.scss new file mode 100644 index 0000000..c8ebd68 --- /dev/null +++ b/gadjo/static/css/_portal.scss @@ -0,0 +1,37 @@ +div.cell.shown-because-admin { + opacity: 0.5; + background-image: repeating-linear-gradient(-45deg, #eee 0px, #eee 14px, transparent 15px, transparent 30px); + &:hover { + opacity: 1; + background-image: inherit; + } +} + +div#portal-agent-content { + div.searchcell { + font-size: 110%; + } + div.cell { + background: white; + padding: 1rem; + margin-bottom: 1rem; + border-radius: 3px; + &.transparent { + background: transparent; + } + &.highlight { + background: linear-gradient(to right, $primary-color 0%, $secondary-color 130vh); + color: white; + h2 { + color: white; + } + } + } +} + +div.combo-search-results { + a.nolink { + color: $font-color; + border-bottom-color: transparent; + } +} diff --git a/gadjo/static/css/_wcs.scss b/gadjo/static/css/_wcs.scss new file mode 100644 index 0000000..7b751f6 --- /dev/null +++ b/gadjo/static/css/_wcs.scss @@ -0,0 +1,77 @@ +$actions: add, duplicate, edit, remove; + +#sidebar div#sticky-sidebar { + width: calc(100% - 2rem); +} + +div#side { // w.c.s. steps in backoffice submission + background: white; + padding: 0.5rem; + border-radius: 3px 3px 0 0; + & + form { + background: white; + padding: 0.5rem; + border-radius: 0 0 3px 3px; + } + #steps ol { + background: transparent; + .current span.marker { + background: $primary-color; + border-color: darken($primary-color, 20%); + } + } +} + +#main ul#fields-list li { + padding-top: 6px; +} + +#main ul.biglist li p.commands span { + padding: 0; + box-shadow: none; + border: none; + a { + @extend %button; + font-weight: normal; + } + &.view { + margin-top: 2px; + } + &.remove, &.add, &.edit, &.duplicate { + padding: 0; + border: 0; + background: transparent; + box-shadow: none; + a { + border: none; + padding: 6px; + display: inline-block; + text-indent: -10000px; + overflow: hidden; + width: 30px; + } + } + @each $action in $actions { + &.#{$action} a { + background: url(icons/action-#{$action}.small.#{$string-color}.png) center center no-repeat; + &:hover { + background-image: url(icons/action-#{$action}.hover.png); + } + } + } +} + +div.form-validation form div.page { + border: none; +} + +div.workflow-messages > div, +div.workflow-messages > p { + background: white; + margin: 1ex 0; + padding: 1ex; +} + +div.buttons > div.widget { + margin-right: 1rem; +} diff --git a/gadjo/static/css/gadjo.scss b/gadjo/static/css/gadjo.scss index 8930851..ea1d643 100644 --- a/gadjo/static/css/gadjo.scss +++ b/gadjo/static/css/gadjo.scss @@ -1,8 +1,26 @@ @import 'opensans'; @import 'utils'; +$font-color: #3c3c33; $mobile-limit: 760px; $font-family: "Open Sans", sans-serif; +$sidepage-background: white; +$sidepage-left-space: 36px; +$sidepage-icon-width: 48px; +$sidepage-width: 210px; +$header-height: 60px; +$sidepage-border-width: 4px; + +// blue +$primary-color: #386ede; $secondary-color: #00d6eb; + +// red/orange +//$primary-color: #ff375e; $secondary-color: #ff5a47; + +// purple +//$primary-color: #6f2b92; $secondary-color: #e72588; + +$link-color: $primary-color; /* generalities */ @@ -13,8 +31,9 @@ html, body { @media screen and (min-width: 1260px) { font-size: 13px; } - background: #f2f2f2; - color: #3c3c33; + color: $font-color; + background: #ecf0f3; + background: linear-gradient(#ecf0f3, white); } html { @@ -27,10 +46,10 @@ body { } a { - color: #0066cc; + color: $link-color; text-decoration: none; border-width: 0; - border-bottom: 1px dotted #ff9900; + border-bottom: 1px dotted $link-color; @include vendor-prefix('transition', 'color 200ms ease-out'); &:hover { color: #003388; @@ -74,47 +93,86 @@ span.warning { /* top bar */ div#top { - color: #eee; height: 0px; } -div#top a { - color: #aaa; - font-weight: normal; - border: 0; - &:hover { - color: #888; - } -} - ul.user-info { + box-sizing: border-box; margin: 0; padding: 0; - padding-right: 3em; - font-size: 85%; + font-size: 100%; font-weight: bold; position: absolute; top: 0px; right: 0px; - z-index: 10; - background: #23282d url(texture.png); - height: 40px; - line-height: 40px; + z-index: 100; + background: $secondary-color; li { - display: inline; + display: inline-block; + vertical-align: middle; + padding-left: 1em; + color: white; + height: $header-height; + line-height: $header-height; + } + a { + color: white; + } + .ui-help { padding-left: 3em; } + .ui-avatar { + color: $primary-color; + vertical-align: middle; + font-size: $header-height * 0.35; + background: white; + border-radius: $header-height * 0.6 / 2; + height: $header-height * 0.6; + width: $header-height * 0.6; + line-height: $header-height * 0.6; + display: inline-block; + text-align: center; + padding: 0; + margin-left: 1em; + } + .ui-logout { + padding-left: 1rem; + font-size: 150%; + a { + display: block; + padding: 0 2rem; + margin-left: 1rem; + } + a::before { + font-family: FontAwesome; + font-weight: normal; + content: "\f05c"; // times-circle-o + } + } + .ui-platform-name { + background: white; + color: black; + padding: 0 2em; + text-transform: uppercase; + } + @media screen and (max-width: $mobile-limit) { + .ui-platform-name, .ui-avatar, .ui-name, .ui-help { + display: none; + } + .ui-logout { + padding-left: 0; + a { + margin-left: 0; + } + } + } } /* header */ -$header-height: 40px; - div#header { - background: #C2D1CC url(header-03.jpeg); - background-size: 100% 500px; + background: $primary-color; padding-left: 0px; - border-bottom: 1px solid #888; position: relative; height: $header-height; } @@ -122,27 +180,27 @@ div#header { div#header h1 { height: $header-height; line-height: $header-height; - padding: 0 ($header-height + 1px) 0 20px; + padding: 0 0 0 1rem; + box-sizing: border-box; margin: 0; font-weight: normal; - color: black; - text-shadow: 0 0 2px white; + color: white; display: inline-block; z-index: 100; max-width: 80%; width: 80%; - max-width: calc(100% - #{$header-height} - 21px); + max-width: calc(100% - #{$sidepage-width} - 21px); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; @include vendor-prefix('transition', 'all ease 200ms'); - opacity: 0.5; a { + opacity: 0.8; color: inherit; border-bottom: none; display: inline-block; - padding: 0 11px; + padding: 0 15px; position: relative; margin-left: -5px; padding-left: 20px; @@ -151,45 +209,64 @@ div#header h1 { } } - &:hover { - opacity: 0.7; - } - a:hover { opacity: 1; - text-shadow: 0 0 0px #333; + } + + &.breadcrumbs { + a:last-child { + /* hide last breadcrumb item (== current page) */ + display: none; + } + + span.separator { + display: none; + } + + a::after { + content: ""; + height: $header-height + 2px; + width: $header-height + 2px; + @include vendor-prefix('transform', 'scale(0.4, 0.707) rotate(45deg)'); + display: inline-block; + position: absolute; + top: 0px; + right: -21px; + z-index: 100; + border: 1px solid white; + border-width: 2px 2px 0 0; + } } } -div#header h1.breadcrumbs { - a:last-child { - /* hide last breadcrumb item (== current page) */ - display: none; +body[data-environment-label] div#header { + background-image: url(../images/work-bg.png); + background-position: 230px 0; + background-repeat: no-repeat; + h1 { + // + picture width + padding-left: $sidepage-width + $sidepage-left-space + 70px; } +} - span.separator { - display: none; - } - - a::after { +span#applabel { + text-indent: -1000px; + &::after { content: ""; - height: 42px; - width: 42px; - @include vendor-prefix('transform', 'scale(0.4, 0.707) rotate(45deg)'); - display: inline-block; + background: transparent url(../images/logo-publik.png) top left no-repeat; position: absolute; - top: 0px; - right: -21px; - box-shadow: 1px -1px 0px 1px #bbb, 2px -2px 0px 2px white; - z-index: 100; - border-width: 1px 1px 0 0; + top: 4px; + left: 24px; + height: 50px; + width: 183px; + @media screen and (max-width: $mobile-limit) { + left: $header-height + 5px; + } + @include vendor-prefix('transition', 'opacity 100ms ease-out'); + } + &:hover::after { + opacity: 0.8; } -} - -body[data-environment-label] span#applabel { - background-image: repeating-linear-gradient(-45deg, #333, black 14px, #ffe761 15px, #ffe761 29px, black 30px); - color: white; - text-shadow: 0 0 1px black; } /* notifications */ @@ -206,8 +283,8 @@ ul.messages { background: #fafafa; margin: 1ex 0; padding: 1ex; + padding-left: 25px; border: 1px solid transparent; - border-left-width: 25px; &:before { position: absolute; left: 0; @@ -217,21 +294,22 @@ ul.messages { font-family: FontAwesome; color: white; } + color: white; &.success { &:before { content: "\f058"; } /* check-circle */ - border-color: #00b000; + background: linear-gradient(to right, darken(adjust-hue(#f64474, 120deg), 20%), darken(adjust-hue(#f4635e, 120deg), 20%)); } &.info { &:before { content: "\f05a"; } /* info-circle */ - border-color: #0000b0; + background: linear-gradient(to right, adjust-hue(#f64474, 220deg), adjust-hue(#f4635e, 220deg)); } &.warning { &:before { content: "\f071"; } /* exclamation-triangle */ - border-color: #ffb000; + background: linear-gradient(to right, darken(adjust-hue(#f64474, 45deg), 10%), darken(adjust-hue(#f4635e, 45deg), 10%)); } &.error { &:before { content: "\f06a"; } /* exclamation-circle */ - border-color: #b00000; + background: linear-gradient(to right, #f64474, #f4635e); } .close { float: right; @@ -249,9 +327,10 @@ div.warningnotice, div.errornotice { position: relative; font-size: 110%; - background: #fafafa; + background: white; color: #3c3c33; font-weight: normal; + border-radius: 3px; margin: 1ex 0; padding: 1ex; border: 1px solid transparent; @@ -267,23 +346,36 @@ div.errornotice { color: white; } &.successnotice { - &:before { content: "\f058"; } /* check-circle */ + &:before { content: "\f058"; } // check-circle border-color: #00b000; + border-image: linear-gradient(#27eb00, #78ff31) 27; } &.infonotice { - &:before { content: "\f05a"; } /* info-circle */ + &:before { content: "\f05a"; } // info-circle border-color: #0000b0; + border-image: linear-gradient(#386ede, #00d6eb) 27; } &.warningnotice { - &:before { content: "\f06a"; } /* exclamation-circle */ + &:before { content: "\f06a"; } //exclamation-circle border-color: #ffb000; + border-image: linear-gradient(#ff7831, #ebd600) 27; } &.errornotice { - &:before { content: "\f071"; } /* exclamation-triangle */ - border-color: #b00000; + &:before { content: "\f071"; } // exclamation-triangle + background: linear-gradient(to right, #f64474, #f4635e); + color: white; } } +div.workflow-messages > div.errornotice { + // slightly different style for error notices in workflow messages as + // the messages can be longer. + background: white; + border-color: #f4635e; + border-image: linear-gradient(#f64474, #f4635e) 27; + color: inherit; +} + /* main content */ #main { @@ -302,33 +394,40 @@ div#main-content { -ms-flex: 1 1 auto; flex: 1 1 auto; width: 100%; - margin-left: 0; - padding: 1em 6px 0 16px; - border: 1px solid #ccc; - border-width: 0 1px 1px 0; - background: white; + margin: 1rem; + min-height: 90vh; position: relative; overflow-x: auto; overflow-y: hidden; box-sizing: border-box; @media screen and (max-width: $mobile-limit) { border-width: 0 0 1px 0; + margin: 0; + padding: 1rem; } } #sidebar { -ms-flex: 0 0 auto; flex: 0 0 auto; - margin-left: 1rem; - margin-right: 1rem; - width: 23rem; - max-width: 23rem; + width: 24rem; + box-sizing: border-box; + padding: 0 1rem; + background: white; + max-width: 24rem; @media screen and (max-width: $mobile-limit) { width: auto; max-width: 100%; } color: #666; position: relative; + #sidebar-toggle { + left: -10px; + width: 10px; + background: #d4cbff; + border-bottom-right-radius: 0px; + border-bottom-left-radius: 10px; + } } @@ -336,73 +435,16 @@ div#main-content h2 { font-weight: normal; } -/* breadcrumb */ - -div#more-user-links { - font-size: 110%; -} - -div#more-user-links a, -div#more-user-links a:after { - background: #ccc; - text-shadow: 0 1px 1px rgba(255, 255, 255, 0.75); - border: 1px solid #bbb; - @include vendor-prefix('transition', 'background 0.5s'); -} - -div#more-user-links a { - box-shadow: inset 0 1px 0 rgba(255,255,255,.2), 0 1px 2px rgba(0,0,0,.05); - padding: 4px 12px; - border-radius: 2px; - text-decoration: none; - font-size: 90%; - color: black; -} - -span#breadcrumb { - display: inline-block; - margin: 1ex 0; -} - -span#breadcrumb a { - display: inline-block; - padding-left: 20px; - position: relative; - height: 14px; - margin-left: -4px; -} - -span#breadcrumb a:first-child { - margin-left: 0; - padding-left: 16px; -} - -span#breadcrumb a:after { - content: ""; - height: 22px; - width: 22px; - @include vendor-prefix('transform', 'scale(0.4, 0.707) rotate(45deg)'); - display: inline-block; - position: absolute; - top: 0px; - right: -11px; - box-shadow: 1px -1px 0px 1px #bbb, 2px -2px 0px 2px white; - z-index: 100; - border-width: 1px 1px 0 0; -} - -div#more-user-links a:hover, -div#more-user-links a:hover:after { - text-decoration: underline; - background: #aaa; -} - /* page content */ div#content { - margin: 0 1ex 1em 0; - padding: 0px; + padding: 0; position: relative; + &::after { + content: ""; + display: block; + clear: both; + } } div#main-content > h2, @@ -411,7 +453,7 @@ div#main-content .top-title h2, div#content h2 { margin-top: 0; font-weight: normal; - color: #656551; + color: #161c2a; font-size: 200%; letter-spacing: -1px; line-height: 25px; @@ -419,26 +461,26 @@ div#content h2 { padding: 0 0 10px 0px; position: relative; top: 4px; - border-bottom: 1px dotted #d8d8d8; } table.main { width: 100%; - border: 1px solid #bcbcbc; + background: white; + border: 1px solid #f3f3f3; border-collapse: collapse; } table.main th { font-weight: normal; padding: 1em 1ex; - border-bottom: 1px solid #bcbcbc; - background: #f0f0f0; + border-bottom: 1px solid #f3f3f3; + background: #f7f7f7; } table.main td { text-align: center; padding: 1em 1ex; - border-bottom: 1px solid #bcbcbc; + border-bottom: 1px solid #f3f3f3; @include vendor-prefix('transition', 'background ease 0.2s'); } @@ -447,11 +489,11 @@ table.main tr td.checkbox { } table.main tr:nth-child(even) td { - background: #f8f8f8; + background: #fdfdfd; } table.main tr:hover td { - background: #eee; + background: #dde; cursor: pointer; } @@ -484,7 +526,7 @@ ul.apps li { } ul.apps li a { - background-color: transparent; + background-color: white; background-repeat: no-repeat; background-position: 50% 50%; display: table-cell; @@ -498,25 +540,16 @@ ul.apps li a { border: 1px solid #ccc; text-decoration: none; @include vendor-prefix('transition', 'all .2s ease-in-out'); - color: #FF7800; + color: $primary-color; border-radius: 15px; } ul.apps li a:hover { border: 1px solid #333; - color: #FF7800; + color: $primary-color; border-radius: 25px; } -/* Combo specific class */ -div.cell.shown-because-admin { - opacity: 0.5; - background-image: repeating-linear-gradient(-45deg, #eee 0px, #eee 14px, transparent 15px, transparent 30px); - &:hover { - opacity: 1; - background-image: inherit; - } -} /* footer */ @@ -561,10 +594,13 @@ div#content div.bo-block { div.bo-block { border: 1px solid #e4e4e4; - background: #fcfcfc; color: #505050; margin: 1em 0; padding: 1ex; + background: white; + padding: 0.5rem; + border-radius: 3px; + box-sizing: border-box; } div.bo-block h2 { @@ -583,16 +619,17 @@ div.bo-block ul { } div.big-msg-info { - background: transparent url(../images/info-icon.png) 5px 5px no-repeat; + background: white url(../images/info-icon.png) 5px 15px no-repeat; width: 30em; - padding-left: 90px; + padding: 2rem 1rem 1rem 90px; margin: 3em auto; min-height: 90px; padding-top: 20px; + border-radius: 3px; } p.paginator { - margin: 4ex 0; + margin: 4ex 1px; } p.paginator *:first-child { @@ -611,7 +648,7 @@ p.paginator span { } p.paginator span.this-page { - background: #5B616B; + background: $primary-color; border-color: #5B616B; color: white; } @@ -630,6 +667,7 @@ ul.objects-list { } ul.objects-list li { + background: white; list-style: none; margin: 0 0 -1px 0; padding: 0 0.5ex 0 2ex; @@ -680,45 +718,39 @@ ul.objects-list li span.badge { box-sizing: border-box; border-radius: 1ex; padding: 0 1ex; - background: #ad7c6d; + background: $secondary-color; color: white; line-height: 2em; } -/* widgets & dialogs */ - -input[type="submit"][name="submit"] { - background: #283c54; - background-image: linear-gradient(to bottom, #1cabe7, #1999cd); - color: white; - border-color: #267dae; -} - -input[type=submit]:hover { - border-color: #666; -} - #sidepage { position: absolute; top: 0px; z-index: 100; - width: 36px; + width: $sidepage-icon-width; height: 2em; text-align: left; @include vendor-prefix('transition', 'width 0ms ease-in'); height: 100%; overflow: initial; - background: #23282d url(texture.png); + color: white; + li a { + } +} + +body[data-has-sidepage] #header { + margin-left: #{$sidepage-left-space}; + h1 { + padding-left: $sidepage-width + $sidepage-left-space; + } } -body[data-has-sidepage] #header, body[data-has-sidepage] #main { - margin-left: 36px; + margin-left: calc(#{$sidepage-left-space} + #{$sidepage-icon-width}); } -body.sidepage-expanded #header, body.sidepage-expanded #main { - margin-left: 30ex; + margin-left: calc(#{$sidepage-icon-width} + #{$sidepage-width}); } body.enable-transitions { @@ -727,6 +759,7 @@ body.enable-transitions { #main div#header h1, #sidepage ul#sidepage-menu, #sidepage span#applabel, + #sidepage span#applabel::before, #sidepage { @include vendor-prefix('transition-duration', '400ms'); } @@ -735,11 +768,7 @@ body.enable-transitions { body.sidepage-expanded #sidepage { height: 100%; overflow: initial; - width: 30ex; -} - -#sidepage ul#sidepage-menu { - transform: scale(1); + width: $sidepage-width + $sidepage-icon-width - $sidepage-left-space + $sidepage-border-width / 2; } #header, @@ -756,119 +785,133 @@ body.sidepage-expanded #sidepage { cursor: pointer; display: block; position: relative; - overflow: hidden; - @include vendor-prefix('transition', 'max-width 0ms ease-in'); - height: 40px; - line-height: 40px; + height: $header-height; + line-height: $header-height; font-weight: normal; font-size: 20px; - border-bottom: 1px solid #666; - - &:hover { - color: #fff; - } + border-bottom: 1px solid #7F8F9E; + background: white; + box-sizing: border-box; + width: calc(#{$sidepage-icon-width} + #{$sidepage-width}); } #sidepage span#applabel::before { + text-indent: 2px; font-family: FontAwesome; - content: "\f18e"; /* fa-arrow-circle-o-right */ - padding-left: 2px; - padding-right: 12px; + content: "\f054"; // chevron-right + padding-left: 0; + padding-right: 0; + position: absolute; + top: 50px; + right: $sidepage-width - $sidepage-left-space - 10px + $sidepage-border-width / 2; + background: $primary-color; + color: white; + height: 20px; + width: 20px; + font-size: 14px; + text-align: center; + line-height: 20px; + border-radius: 10px; + z-index: 100; + @include vendor-prefix('transition', 'all 0ms ease-in'); + @media screen and (max-width: $mobile-limit) { + border-radius: 0; + left: 0; + top: 0; + right: auto; + width: $header-height; + height: $header-height; + line-height: $header-height; + display: block; + } } body.sidepage-expanded #sidepage span#applabel::before { - content: "\f190"; /* fa-arrow-circle-o-left */ -} - -body.sidepage-expanded #sidepage span#applabel { - overflow: hidden; - max-width: 100%; + right: -10px; + transform: rotate(180deg); } #sidepage ul#sidepage-menu { + background: white; + position: relative; + left: $sidepage-left-space; + @media screen and (max-width: $mobile-limit) { + left: 0; + } list-style: none; padding: 0; padding-top: 1em; margin: 0; - background: #23282d url(texture.png); min-height: 100%; - min-height: calc(100% - 41px); /* #top 40px + border 1px */ + min-height: calc(100% - #{$header-height} - 1px); /* #top 40px + border 1px */ box-sizing: border-box; + border-right: $sidepage-border-width solid $primary-color; @include vendor-prefix('transition', 'all 0ms ease'); -} - -#sidepage ul#sidepage-menu a { - border: none; - display: block; - white-space: nowrap; - text-overflow: ellipsis; - overflow: hidden; + &::before { + content: ""; + position: absolute; + left: -$sidepage-left-space; + width: $sidepage-left-space; + background: linear-gradient(to bottom, $primary-color 0%, $secondary-color 130vh); + height: 100%; + top: 0px; + } + li { + @include vendor-prefix('transition', 'all 200ms ease'); + a { + @include vendor-prefix('transition', 'all 200ms ease'); + } + } + li a { + border: none; + display: block; + white-space: nowrap; + text-overflow: ellipsis; + overflow: hidden; + color: $primary-color; + } } #sidepage ul#sidepage-menu li { position: relative; - line-height: 24px; + line-height: $sidepage-icon-width * 2 / 3; } ul#sidepage-menu li a { - background: transparent no-repeat 7px 50%; - padding: 5px 0 5px 37px; + background: transparent no-repeat $sidepage-icon-width / 2 - 12px 50%; + padding: 5px 0 5px $sidepage-icon-width + 1px; } +#sidepage ul#sidepage-menu li:hover a, #sidepage ul#sidepage-menu .active a { - color: #eee; + color: darken($primary-color, 30%); + filter: none; } +#sidepage ul#sidepage-menu li:hover, #sidepage ul#sidepage-menu li.active, #sidepage ul#sidepage-menu li.active:hover { - background: #215D9C; -} - -#sidepage ul#sidepage-menu li:after { - background: rgba(0, 0, 0, 0.3); - content: ""; - position: absolute; - z-index: -1; - @include vendor-prefix('transition', 'all 0.2s ease'); - box-sizing: border-box; - width: 0; - width: 0%; height: 100%; top: 0; left: 0; -} - -#sidepage ul#sidepage-menu li:hover:after { - width: 100%; - height: 100%; -} - -#sidepage ul#sidepage-menu li.active:after { - content: ""; - position: absolute; - display: block; - top: 0; - background: white; - z-index: 5; - right: -17px; - left: auto; - width: 34px; - height: 34px; - @include vendor-prefix('transform', 'scale(0.2, 0.2) rotate(45deg)'); + &::after { + content: ""; + display: block; + width: 7px; + height: 7px; + background: white; + position: absolute; + right: -3px; + top: $sidepage-icon-width / 2 - 3px; + transform: rotate(45deg); + } } @media screen and (max-width: $mobile-limit) { - body #main { - margin-top: 0px; - } - ul.user-info { - z-index: 100; - } #sidepage { @include vendor-prefix('transition', 'height 400ms ease-in'); - height: 41px; + height: $header-height; width: 100%; overflow: hidden; span#applabel::before { content: "\f0c9"; /* fa-bars */ - width: 1em; display: inline-block; } } @@ -924,10 +967,12 @@ div.old-ie-warning p { line-height: 150%; } +$string-color: str-slice($primary-color + '', 2); + $appicons: add, announces, book, calendar, categories, clock, counter, facturier, forms, gis, grid, home, mail, management, organizational-units, passerelle, password, phone, portal, portal-agent, porte-doc, roles, security, services, settings, statistics, submission, system, texts, theme, users, workflows; @each $appicon in $appicons { - ul#sidepage-menu li a.icon-#{$appicon} { background-image: url(icons/#{$appicon}.small.png); } + ul#sidepage-menu li a.icon-#{$appicon} { background-image: url(icons/#{$appicon}.small.#{$string-color}.png); } ul.apps li.icon-#{$appicon} a { background-image: url(icons/#{$appicon}.large.png); } ul.apps li.icon-#{$appicon} a:hover { background-image: url(icons/#{$appicon}.large-hover.png); } } @@ -956,66 +1001,82 @@ $appicons: add, announces, book, calendar, categories, clock, counter, facturier } span.actions { position: absolute; - bottom: 8px; + bottom: 0px; right: 0; a { float: right; margin-left: 2em; } } - .extra-actions-menu-opener { - border: none; + & > a, + span.actions > a { + @extend %button; + &.disabled { + border-color: #aaa; + color: #aaa; + background: #eee; + pointer-events: none; + &:hover { + background: #eee; + color: #aaa; + } + } + } + border-radius: 3px 3px 0 0; + span.actions a.extra-actions-menu-opener, + a.extra-actions-menu-opener { + border: 1px solid transparent; + color: $primary-color; &::before { + border-radius: 3px; cursor: pointer; content: "\f142"; /* ellipsis-v */ font-family: FontAwesome; - font-size: 140%; - padding: 2px 1ex; - margin-right: -0.5ex; - border: 1px solid transparent; border-bottom: 0; position: relative; z-index: 200; top: 2px; } - &.open::before { - background: #fafafa; - border-color: #d0d0d0; + &.open, &.open:hover { + background: $primary-color; + color: white; + border: 1px solid transparent; + border-radius: 3px 3px 0 0; } } .extra-actions-menu { - background: white; padding: 0px; list-style: none; position: absolute; - right: -7px; - margin-top: -24px; - border: 1px solid #d0d0d0; - background: #fafafa; + right: 0px; + margin-top: -20px; + background: $primary-color; box-shadow: 0px 1px 1px 2px rgba(0, 0, 0, 0.04); z-index: 100; display: none; min-width: 12em; &.open { + border-radius: 3px 0 3px 3px; display: block; } li { margin: 0; a { + color: white; float: none; display: block; margin: 0; padding: 5px 10px; - border: none; + border: 0; &:hover { - background: #ccc; + background: lighten($primary-color, 20%); } } } } span.actions { .extra-actions-menu { - margin-top: 2px; + margin-top: 0px; top: 100%; } } @@ -1023,14 +1084,19 @@ $appicons: add, announces, book, calendar, categories, clock, counter, facturier div.section { margin: 1em 0; - border: 1px solid #bcbcbc; + &:first-child { + margin-top: 0; + } + border: 1px solid transparent; + border-radius: 3px; + background: white; > h2, > h3 { font-weight: normal; font-size: 120%; color: #444; - background: #FCFCFC; - border-bottom: 1px solid #bcbcbc; - padding: 1rem; + background: white; + border-bottom: 1px solid transparent; + padding: 1rem 1rem 0rem 1rem; margin-top: 0; margin-bottom: 0; } @@ -1062,6 +1128,7 @@ div.section { &.folded { > h2, > h3 { border-bottom: none; + padding-bottom: 1rem; &::after { transform: rotate(-90deg); } @@ -1071,15 +1138,62 @@ div.section { } } } - > div > ul.objects-list:first-child:last-child { // single child - margin: calc(-1rem - 1px); - } } .varname { color: #444; } +div.cke { // adaptations to ckeditor style + box-shadow: none; + .cke_top, .cke_bottom { + background: #eee; + } + a.cke_button, span.cke_combo a.cke_combo_button { + background: white; + &:hover { + background: #eee; + } + } + a.cke_button.cke_button_on, span.cke_combo.cke_combo_on a.cke_combo_button { + background: #ccc; + box-shadow: none; + } + .cke_toolgroup { + background: white; + } +} +div.cke_reset_all .cke_dialog .cke_dialog_body { + * { + font-family: $font-family; + } + .cke_dialog_title { + background: white; + } + input.cke_dialog_ui_input_text, input.cke_dialog_ui_input_password, textarea.cke_dialog_ui_input_textarea { + box-shadow: none; + } + .cke_dialog_footer { + border: none; + background: white; + a.cke_dialog_ui_button { + @extend %button; + box-shadow: none; + &:active, &:hover { + box-shadow: none; + padding: 5px 15px; + span { + padding: 0 12px; + text-shadow: none; + } + } + } + } +} + @import 'grid'; @import 'jqueryui'; @import 'forms'; +@import 'portal'; +@import 'wcs'; +@import 'hacks'; diff --git a/gadjo/static/images/logo-publik.png b/gadjo/static/images/logo-publik.png new file mode 100644 index 0000000..ff55716 Binary files /dev/null and b/gadjo/static/images/logo-publik.png differ diff --git a/gadjo/static/images/work-bg.png b/gadjo/static/images/work-bg.png new file mode 100644 index 0000000..dcd8e22 Binary files /dev/null and b/gadjo/static/images/work-bg.png differ diff --git a/gadjo/static/js/gadjo.js b/gadjo/static/js/gadjo.js index 0a14e8a..ef962a8 100644 --- a/gadjo/static/js/gadjo.js +++ b/gadjo/static/js/gadjo.js @@ -366,12 +366,6 @@ var gadjo_js = gadjo_js || {}; if ($('#sidepage').length == 1) { $('body').attr('data-has-sidepage', 'true'); } - if ($('body[data-no-moving-header]').length == 0) { - /* 440 is header image height (500px) - header height (60px) */ - var timestamp = ((new Date().getTime() / 1000) % 86400 ) / (86400 / 440); - $('div#header').css('background-position', '0 -' + timestamp + 'px'); - } - /* add × to close notification messages */ $('.messages > li').each(function(idx, elem) { var elem = $(''); diff --git a/gadjo/templates/gadjo/root.html b/gadjo/templates/gadjo/root.html index 97eaa04..0bb0f41 100644 --- a/gadjo/templates/gadjo/root.html +++ b/gadjo/templates/gadjo/root.html @@ -23,15 +23,17 @@
{% block sidepage %} -
- -
{% endblock %} {% block user-links %}