From deea0075ca0d9a346b4b61060a42d061a59721a8 Mon Sep 17 00:00:00 2001 From: Dave Cranwell Date: Wed, 5 Feb 2014 12:38:42 +0000 Subject: [PATCH] merging from ui update branch --- .../wagtailadmin/css/components/explorer.less | 1 + .../css/components/formatters.less | 6 ++- .../wagtailadmin/css/components/forms.less | 5 +-- .../wagtailadmin/css/components/icons.less | 1 + .../wagtailadmin/css/components/listing.less | 22 ++++++++++- .../wagtailadmin/css/components/tabs.less | 29 ++++++-------- .../static/wagtailadmin/css/core.less | 15 ++++--- .../static/wagtailadmin/css/layouts/home.less | 8 +++- .../wagtailadmin/css/layouts/page-editor.less | 39 +++++++++++++------ .../wagtailadmin/css/panels/rich-text.less | 5 ++- .../static/wagtailadmin/css/variables.less | 2 +- .../wagtailadmin/images/bg-dark-diag.svg | 20 ++++++++++ .../wagtailadmin/images/bg-light-diag.svg | 20 ++++++++++ 13 files changed, 127 insertions(+), 46 deletions(-) create mode 100644 wagtail/wagtailadmin/static/wagtailadmin/images/bg-dark-diag.svg create mode 100644 wagtail/wagtailadmin/static/wagtailadmin/images/bg-light-diag.svg diff --git a/wagtail/wagtailadmin/static/wagtailadmin/css/components/explorer.less b/wagtail/wagtailadmin/static/wagtailadmin/css/components/explorer.less index b82109a5a..f1900554c 100644 --- a/wagtail/wagtailadmin/static/wagtailadmin/css/components/explorer.less +++ b/wagtail/wagtailadmin/static/wagtailadmin/css/components/explorer.less @@ -19,6 +19,7 @@ max z-index: unknown; -webkit-perspective-origin: 50% 200%; -moz-perspective-origin: 50% 200%; perspective-origin: 50% 200%; + ul { background: @color-grey-1; padding: 0; diff --git a/wagtail/wagtailadmin/static/wagtailadmin/css/components/formatters.less b/wagtail/wagtailadmin/static/wagtailadmin/css/components/formatters.less index 22c785f69..2f14e0660 100644 --- a/wagtail/wagtailadmin/static/wagtailadmin/css/components/formatters.less +++ b/wagtail/wagtailadmin/static/wagtailadmin/css/components/formatters.less @@ -111,15 +111,17 @@ .border-radius(2px); text-transform:uppercase; padding:0em 0.5em; - border:1px solid @color-grey-3; - color:@color-grey-3; + border:1px solid lighten(@color-grey-2,30%); + color:lighten(@color-grey-2,30%); -webkit-font-smoothing: auto; font-size:0.80em; margin:0 0.5em; + background:white url(/static/verdantadmin/images/bg-dark-diag.svg); &.primary{ color:@color-grey-2; border:1px solid @color-grey-2; + background:white } } diff --git a/wagtail/wagtailadmin/static/wagtailadmin/css/components/forms.less b/wagtail/wagtailadmin/static/wagtailadmin/css/components/forms.less index a1d2e7a32..234acabf3 100644 --- a/wagtail/wagtailadmin/static/wagtailadmin/css/components/forms.less +++ b/wagtail/wagtailadmin/static/wagtailadmin/css/components/forms.less @@ -279,7 +279,7 @@ input[type=submit], input[type=reset], input[type=button], .button, button{ position:absolute; right:1em; top:1em; - color:@color-grey-2; + color:white; overflow:hidden; .border-radius(2px); @@ -299,7 +299,6 @@ input[type=submit], input[type=reset], input[type=button], .button, button{ } .icon:before{ - vertical-align:-1%; line-height:2em; } .icon:hover{ @@ -664,7 +663,7 @@ input[type=submit], input[type=reset], input[type=button], .button, button{ &:before{ width:2.2em; - line-height:2.3em; + line-height:2.35em; } } } diff --git a/wagtail/wagtailadmin/static/wagtailadmin/css/components/icons.less b/wagtail/wagtailadmin/static/wagtailadmin/css/components/icons.less index 08f97a046..98e335c94 100644 --- a/wagtail/wagtailadmin/static/wagtailadmin/css/components/icons.less +++ b/wagtail/wagtailadmin/static/wagtailadmin/css/components/icons.less @@ -230,5 +230,6 @@ width:100%; line-height:1.2em; text-align:center; + vertical-align:0; } } \ No newline at end of file diff --git a/wagtail/wagtailadmin/static/wagtailadmin/css/components/listing.less b/wagtail/wagtailadmin/static/wagtailadmin/css/components/listing.less index 3abaf457a..c008ec9f2 100644 --- a/wagtail/wagtailadmin/static/wagtailadmin/css/components/listing.less +++ b/wagtail/wagtailadmin/static/wagtailadmin/css/components/listing.less @@ -141,13 +141,31 @@ ul.listing{ } .index { + color:white; background-color:@color-header-bg; + .title h2{ - font-size:1.2em; + font-size:1.2em; + color:white; + opacity:1; + a{ + .transition(opacity 0.2s ease); + } + a:hover{ + opacity:0.7; + color:white; + } } a{ color:auto; } + .actions{ + margin-top:1.5em; + + a{ + color:white; + } + } } @@ -230,7 +248,7 @@ ul.listing{ padding:0 !important; border-left:1px dashed @color-input-border; &:hover{ - background-color:@color-header-bg; + background-color:@color-grey-5; } } .children a, diff --git a/wagtail/wagtailadmin/static/wagtailadmin/css/components/tabs.less b/wagtail/wagtailadmin/static/wagtailadmin/css/components/tabs.less index 950a43208..e1ffb1f91 100644 --- a/wagtail/wagtailadmin/static/wagtailadmin/css/components/tabs.less +++ b/wagtail/wagtailadmin/static/wagtailadmin/css/components/tabs.less @@ -1,19 +1,20 @@ .tab-nav{ .clearfix(); - border:1px solid @color-grey-4; - border-width:0 0 1px 1px; padding:0; li{ list-style-type:none; width:48%; float:left; - border:1px solid @color-grey-4; - border-width:0px 1px; - background-color:@color-grey-5; - margin-right:2px; + padding:0; + + &:before,&:after{ + display:none; + } } a{ + .transition(border-color 0.2s ease); + background-color:@color-grey-4; outline:none; line-height:3em; text-transform:uppercase; @@ -23,21 +24,19 @@ display:block; padding:0 20px; color:@color-grey-2; + border-top:0.3em solid darken(@color-grey-4,0%); border-bottom:1px solid transparent; - border-top:0.3em solid @color-grey-3; - margin:0 -1px; &:hover{ color:inherit; - border-top-color:@color-grey-3; + border-top-color:@color-grey-2; } } li.active a{ + color:@color-grey-1; background-color:white; - border-top:0.3em solid @color-grey-1; - border-bottom:2px solid white; - margin-bottom:-1px; + border-top:0.3em solid @color-grey-1; } /* For cases where tab-nav should merge with header */ @@ -59,10 +58,9 @@ @media screen and (min-width: @breakpoint-mobile){ .tab-nav li{ - float:none; width:auto; padding:0; - display:inline-block; + margin-left:0.5em; } .tab-nav a{ @@ -71,9 +69,6 @@ .modal-content .tab-nav li{ padding:0; - min-width:110px; - } - .modal-content .tab-nav li{ min-width:0; } } \ No newline at end of file diff --git a/wagtail/wagtailadmin/static/wagtailadmin/css/core.less b/wagtail/wagtailadmin/static/wagtailadmin/css/core.less index 44da70efa..4ede1a630 100644 --- a/wagtail/wagtailadmin/static/wagtailadmin/css/core.less +++ b/wagtail/wagtailadmin/static/wagtailadmin/css/core.less @@ -219,6 +219,7 @@ img{ font-size:0.9em; font-weight:400; white-space:nowrap; + text-shadow:-1px -1px 0px rgba(0,0,0,0.3); &:before{ margin-right:0.3em; @@ -319,7 +320,8 @@ img{ .explorer{ position:absolute; - margin-top:150px; /* same as .nav-main */ + margin-top:149px; /* same as .nav-main minus 1 pixel for border */ + font-size:0.9em; } .content-wrapper{ @@ -377,12 +379,11 @@ header{ padding-top:1.5em; padding-bottom:1em; background-color: @color-header-bg; - border-bottom:1px solid @color-grey-4; margin-bottom:2em; + color:white; h1, h2{ margin:0; - color:white; } .left, .right{ @@ -403,6 +404,7 @@ header{ } .search-bar input{ width:auto; + border-width:0; } .right{ text-align:right; @@ -432,6 +434,8 @@ header{ footer{ .row(); + .border-radius(3px 3px 0 0); + .box-shadow(0px 0px 2px rgba(255,255,255,0.5)); background: @color-grey-1; position:fixed; bottom:0; @@ -514,7 +518,7 @@ footer{ text-overflow:ellipsis; overflow:hidden; line-height:1.6em; - text-shadow: 1px 1px 0 white; + text-shadow: 1px 1px 0 rgba(255,255,255,0.5); } &:after, &:before{ @@ -537,6 +541,7 @@ footer{ a{ color:white; + text-shadow:none; } } &:hover:after { @@ -821,7 +826,7 @@ footer, .logo{ } } -/* Transitions */ +/* Transitions (resolution agnostic) */ .content-wrapper, .nav-main, #nav-toggle, diff --git a/wagtail/wagtailadmin/static/wagtailadmin/css/layouts/home.less b/wagtail/wagtailadmin/static/wagtailadmin/css/layouts/home.less index 81204c369..d6e43555c 100644 --- a/wagtail/wagtailadmin/static/wagtailadmin/css/layouts/home.less +++ b/wagtail/wagtailadmin/static/wagtailadmin/css/layouts/home.less @@ -12,6 +12,9 @@ header{ margin-right:1em; padding:0; } + h1,h2{ + color:white; + } h2{ text-transform:none; } @@ -23,8 +26,9 @@ header{ .summary{ .row(); - background-color:@color-header-bg; - + background-color:@color-grey-5; + margin-bottom:2em; + h2{ .visuallyhidden(); } diff --git a/wagtail/wagtailadmin/static/wagtailadmin/css/layouts/page-editor.less b/wagtail/wagtailadmin/static/wagtailadmin/css/layouts/page-editor.less index 4ee3252a4..ba2246350 100644 --- a/wagtail/wagtailadmin/static/wagtailadmin/css/layouts/page-editor.less +++ b/wagtail/wagtailadmin/static/wagtailadmin/css/layouts/page-editor.less @@ -6,15 +6,10 @@ } .objects{ - margin-top:-1em; - padding-top:1em; background:url(@{static-root}bg-dark-diag.svg); } .object{ - position:relative; - /*border:1px solid @color-grey-4; - border-width:1px 0 0 0;*/ overflow:hidden; .nice-padding(); @@ -65,11 +60,10 @@ > h2, &.single-field label{ -webkit-font-smoothing: auto; - .border-radius(2px); background:@color-grey-3 url(@{static-root}bg-light-diag.svg); text-transform:uppercase; padding:0.9em 0 0.9em 4em; - font-size:1em; + font-size:0.95em; margin:0 0 0.2em 0; line-height:1.5em; font-weight:normal; @@ -79,6 +73,7 @@ right:0; z-index:1; text-shadow:1px 1px 1px rgba(255,255,255,0.5); + .box-shadow(0 0 7px 0 rgba(0,0,0,0.4)); &:before{ font-family:verdant; @@ -90,7 +85,7 @@ z-index:2; font-size:2em; top:0px; - line-height:1.7em; + line-height:1.6em; left:0px; width:1.7em; opacity:0.15; @@ -100,6 +95,16 @@ } } + .richtext{ + padding-top:1em; /* to provide space for editor buttons */ + padding-bottom:1em; + + &.inEditMode{ + padding-top:5em; /* to provide space for editor buttons */ + padding-bottom:2em; + } + } + &.single-field{ h2, .object-help{ display:none; /* The field label is used instead */ @@ -108,6 +113,8 @@ /* Special full-width, one-off fields i.e a single text or textarea input */ &.full{ + padding-left:0; + h2{ display:none; /* The field label is used instead */ } @@ -136,10 +143,8 @@ input, textarea, .richtext{ .nice-padding(); - .pull-padding(2); - font-family:Bitter, Georgia, serif; .border-radius(0px); - + font-family:Bitter, Georgia, serif; padding-top:2em; padding-bottom:2em; font-size:1.2em; @@ -149,6 +154,12 @@ .richtext{ padding-top:3em; /* to provide space for editor buttons */ + padding-bottom:3em; + + &.inEditMode{ + padding-top:5em; /* to provide space for editor buttons */ + padding-bottom:5em; + } } .error-message{ @@ -228,7 +239,7 @@ position:relative; color:white; padding:0; - line-height:1.9em; /* specific height required as parent 'a' has no height */ + line-height:1.8em; /* specific height required as parent 'a' has no height */ font-size:1.4rem; width:100%; background-color:transparent; @@ -243,6 +254,7 @@ } } + /* styles applied to an element as it is being reordered */ .preview{ padding-top:1em; @@ -279,6 +291,9 @@ padding-left:0; padding-right:0; } + input, textarea, .richtext{ + border-width:0 1px; + } } .multiple{ .column(10); diff --git a/wagtail/wagtailadmin/static/wagtailadmin/css/panels/rich-text.less b/wagtail/wagtailadmin/static/wagtailadmin/css/panels/rich-text.less index b3120ec17..a5359e7b2 100644 --- a/wagtail/wagtailadmin/static/wagtailadmin/css/panels/rich-text.less +++ b/wagtail/wagtailadmin/static/wagtailadmin/css/panels/rich-text.less @@ -5,8 +5,8 @@ position:absolute; left:50px; z-index:5; - margin-top:3em; - margin-left:50px; + margin-top:4em; + margin-left:0em; } .hallotoolbar.affixed{ position:fixed; @@ -73,6 +73,7 @@ } } &.inEditMode { + .rich-text-deletable a.delete-control { display: block; } diff --git a/wagtail/wagtailadmin/static/wagtailadmin/css/variables.less b/wagtail/wagtailadmin/static/wagtailadmin/css/variables.less index 872169144..486aac27c 100644 --- a/wagtail/wagtailadmin/static/wagtailadmin/css/variables.less +++ b/wagtail/wagtailadmin/static/wagtailadmin/css/variables.less @@ -28,7 +28,7 @@ @color-grey-5: #fafafa; @color-thead-bg: @color-grey-5; -@color-header-bg: @color-teal; +@color-header-bg: #ff6a58; @color-fieldset-hover: @color-grey-5; @color-input-border: @color-grey-3; @color-input-focus: #f4fcfc; diff --git a/wagtail/wagtailadmin/static/wagtailadmin/images/bg-dark-diag.svg b/wagtail/wagtailadmin/static/wagtailadmin/images/bg-dark-diag.svg new file mode 100644 index 000000000..ec7a14a60 --- /dev/null +++ b/wagtail/wagtailadmin/static/wagtailadmin/images/bg-dark-diag.svg @@ -0,0 +1,20 @@ + + + + + + + + + + + + + \ No newline at end of file diff --git a/wagtail/wagtailadmin/static/wagtailadmin/images/bg-light-diag.svg b/wagtail/wagtailadmin/static/wagtailadmin/images/bg-light-diag.svg new file mode 100644 index 000000000..2c8e54916 --- /dev/null +++ b/wagtail/wagtailadmin/static/wagtailadmin/images/bg-light-diag.svg @@ -0,0 +1,20 @@ + + + + + + + + + + + + + \ No newline at end of file