From 96006c56142a08904304a5eb54134b2c224f87a8 Mon Sep 17 00:00:00 2001 From: Sean Harvey Date: Mon, 5 Nov 2007 05:03:05 +0000 Subject: [PATCH] Ticket #1498 - CSS cleanup and template tweak git-svn-id: svn://svn.silverstripe.com/silverstripe/open/modules/cms/trunk@44267 467b73ca-7a2a-4603-9d3b-597d59a354a9 --- css/cms_left.css | 109 ++++++++++---------------- css/cms_right.css | 33 ++------ css/layout.css | 118 +++++++++++------------------ css/typography.css | 35 ++------- templates/Includes/CMSMain_left.ss | 6 +- 5 files changed, 100 insertions(+), 201 deletions(-) diff --git a/css/cms_left.css b/css/cms_left.css index 05ff70ad..561e4e6f 100644 --- a/css/cms_left.css +++ b/css/cms_left.css @@ -1,65 +1,42 @@ #TreeActions { - background-color: #EEE; - border-bottom: 1px #CCC solid; + background: #eee; + border-bottom: 1px solid #ccc; padding: 0; margin: 0; /* height: 23px; */ float: left; width: 100%; } - - -/*#TreeActions li.action { - float: left; - margin: 0; - padding: 2px; - list-style-type: none; -} -#TreeActions li.action button { - margin-left: 0; - margin-right: 0; - padding: 0pt 0.1em; - overflow: visible; - width: auto; -}*/ - -#TreeActions li { - float: left; - list-style: none; - list-style-type: none; -} - -#TreeActions li button { - cursor: pointer; - float: left; - height: 25px; - background-image: url(../images/textures/ToolBar.png); - color: #333333; - overflow: visible; - width: auto; - padding: 0; - margin: 0 2px; - border-color: #CCCCCC rgb(153, 153, 153) rgb(153, 153, 153) rgb(204, 204, 204); - border-style: double; - font-weight: bold; - font-size: 11px; -} - -#TreeActions li button:active { - background: #F4F4F4 none repeat scroll 0%; - border-color: #999999 rgb(204, 204, 204) rgb(204, 204, 204) rgb(153, 153, 153); -} - -#TreeActions li button:hover { - background: #fff; -} - -#TreeActions li.selected { - background-color: #CCC; -} -#TreeActions li.action:hover { - background-color: #CCC; -} + #TreeActions li { + float: left; + list-style: none; + list-style-type: none; + } + #TreeActions li button { + cursor: pointer; + float: left; + background-image: url(../images/textures/ToolBar.png); + color: #333; + overflow: visible; + width: auto; + padding: 0; + margin: 1px; + border-color: #ccc rgb(153, 153, 153) rgb(153, 153, 153) rgb(204, 204, 204); + border-style: double; + font-weight: bold; + font-size: 11px; + } + #TreeActions li button:active { + background: #F4F4F4 none repeat scroll 0%; + border-color: #999 rgb(204, 204, 204) rgb(204, 204, 204) rgb(153, 153, 153); + } + #TreeActions li button:hover { + background: #fff; + } + #TreeActions li.selected, + #TreeActions li.action:hover { + background: #ccc; + } #left form.actionparams { background-color: #CCC; @@ -88,7 +65,6 @@ color: #666; } - /** * Selection Groups */ @@ -102,7 +78,7 @@ clear: left; padding: 0; margin: 0; - border: 1px #CCC solid; + border: 1px solid #ccc; } #left .SelectionGroup li input { width: 20px; @@ -204,13 +180,13 @@ ul.tree.multiselect li.selected span.a.unexpanded span.b { ul.tree span.a a.disabled { color: #999; - cursor: default; + cursor: pointer; } ul.tree span.a a.disabled * { padding: 0; background: none; color: #999; - cursor: default; + cursor: pointer; } @@ -223,9 +199,7 @@ ul.tree ins, #publication_key ins { color: orange; padding-left : 16px; - background-image : url(../../sapphire/images/NewOnStage.png); - background-position : 0px 1px; - background-repeat : no-repeat; + background: url(../../sapphire/images/NewOnStage.png) no-repeat center left; text-decoration : none; } /* Deleted on stage */ @@ -233,25 +207,22 @@ ul.tree del, #publication_key del { color: red; padding-left : 16px; - background-image : url(../../sapphire/images/TrashedOnStage.png); - background-repeat : no-repeat; + background: url(../../sapphire/images/TrashedOnStage.png) no-repeat center left; } ul.tree span.modified, #publication_key span.modified { color: green; padding-left : 16px; - background-position : 1px 0px; - background-image : url(../../sapphire/images/EditedOnStage.png); - background-repeat : no-repeat; + background: url(../../sapphire/images/EditedOnStage.png) no-repeat center left; text-decoration : none; } #left { - background-color: #EEE; + background-color: #eee; } #treepanes { - background-color: #FFF; + background-color: #fff; } #treepanes h2 { cursor: pointer; diff --git a/css/cms_right.css b/css/cms_right.css index b875222f..0fc6286c 100644 --- a/css/cms_right.css +++ b/css/cms_right.css @@ -187,11 +187,8 @@ input.delete:hover, } input.loading { - background-color: #fff; - background-image: url(../images/network-save.gif); - background-position: center left; - background-repeat: no-repeat; padding-left: 16px; + background: #fff url(../images/network-save.gif) no-repeat center left; } /** @@ -401,16 +398,6 @@ input.loading { max-height: 300px; overflow: auto; } - /*.pageStatusMessage { - position: absolute; - top: 0; - right: 0; - background-color: #F9F9E3; - font-weight: bold; - font-size: 12px; - padding: 5px; - border: 1px solid #cc9; - }*/ /** * TableField Subclasses @@ -467,25 +454,17 @@ div.CommentFilter { } - - /** * i18n */ div.originallang_holder.field.CompositeField.nolabel { - border: 1px dashed #AAAAAA; + border: 1px dashed #aaa; margin-bottom: 10px; - margin-left: 0px; - padding-top: 8px; - padding-bottom: 6px; - padding-left: 5px; -} - -.originallang { - color: #666666; - font-style: italic; + margin-left: 0; + padding: 8px 0 6px 5px; } +.originallang, #Form_EditForm_URLSegment_original { color: #666; font-style: italic; @@ -493,8 +472,8 @@ div.originallang_holder.field.CompositeField.nolabel { .right form div.languageDropdown { clear: right; - padding-right: 4pt; float: left; + padding-right: 4px; } .right form div.createTranslationButton { diff --git a/css/layout.css b/css/layout.css index d3ef88f2..640e8cd9 100644 --- a/css/layout.css +++ b/css/layout.css @@ -1,32 +1,14 @@ -/* - Tenative color scheme: - #0074C6 #95B2C6 #639DC6 #162F42 #2C5F84 - 4A7695 819BAD - */ - html { margin: 0; height: 100%; - overflow:hidden; + overflow:hidden; } body { height: 100%; margin: 0; - font-size: 62.5%; background-color: #ccdef3; } -#top, -#left, -#bottom, -div.title, -div.mceToolbarExternal, -ul.tabstrip, -div.field label, -#separator { - /*-moz-user-select: none;*/ /*need to explicitly allow input box selection becuase of this */ -} - form#Form_EditForm fieldset { height: 100%; } @@ -41,7 +23,7 @@ body.stillLoading select { height: 33px; padding: 0; background: #474855 url(../images/mainmenu/top-bg.gif) top left repeat-x; - color: #FFF; + color: #fff; overflow: hidden; } #left { @@ -51,8 +33,8 @@ body.stillLoading select { width: 205px; height: 91%; z-index: 50; - border : 1px #acbbcc solid; - background-color:#FFFFFF; + border: 1px solid #acbbcc; + background: #fff; } #right, #rightbottom { position: absolute; @@ -62,9 +44,9 @@ body.stillLoading select { width: 600px; overflow: auto; z-index: 50; - border: 1px #acbbcc solid; - background-color: #eee; - margin-right : 3px; + border: 1px solid #acbbcc; + background: #eee; + margin-right: 3px; } #rightbottom { @@ -80,7 +62,6 @@ body.stillLoading select { cursor: e-resize; } - /** * Hidden left-hand panel */ @@ -97,30 +78,25 @@ body.stillLoading select { } -#left div.title, #right div.title, #rightbottom div.title{ - border-top: 1px #77BBEE solid; - background-image:url(../images/textures/obar.gif); - height : 22px !important; - background-color : #0075C9; - background-repeat : repeat-x !important; - background-position: 0px 0px; +#left div.title, #right div.title, #rightbottom div.title { + border-top: 1px solid #77BBEE; + height: 22px !important; + background: #0075C9 url(../images/texture/obar.gif) repeat-x 0 0; } #rightbottom div.light { background-image: url(../images/textures/obar-light.png) !important; } - -#left div.title div, #right div.title div, #rightbottom div.title div{ - font-size : 14px; - font-weight : bold; - color: white; +#left div.title div, #right div.title div, #rightbottom div.title div { + font-size: 14px; + font-weight: bold; + color: #fff; padding: 2px 0 0 4px; background-position: 2px 2px; - background-repeat:no-repeat; - padding-left : 20px; - border-top: 1px #77BBEE solid; - + background-repeat: no-repeat; + padding-left: 20px; + border-top: 1px solid #77BBEE; } #left h2 { @@ -133,8 +109,6 @@ body.stillLoading select { padding-left: 3px; } - - /** TOP PANEL **/ #top #MainMenu { margin: 0 0 0 6px; @@ -142,10 +116,8 @@ body.stillLoading select { } #top #MainMenu li { margin: 0px 4px; - /* Do not want to do padding: 0 0; you'll see why */ - padding-top: 0px; - padding-bottom: 0px; - + padding-top: 0; + padding-bottom: 0; list-style-type: none; float: left; height: 33px; @@ -159,7 +131,7 @@ body.stillLoading select { padding: 0 6px; font-size: 14px; letter-spacing: -0.1px; - font-family: "Helvetica Neue", Helvetica, Arial, Sans-serif; + font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; font-weight: normal; line-height: 32px; color: #fff; @@ -178,9 +150,9 @@ body.stillLoading select { background: #cddef3 url(../images/mainmenu/currentHover.gif) repeat-x left top; } -#top #MainMenu .current A:link,#top #MainMenu .current A:visited { +#top #MainMenu .current a:link, +#top #MainMenu .current a:visited { color : #2f383f; - } #top #Logo { @@ -199,13 +171,13 @@ body.stillLoading select { padding-right: 34px; background: url(../images/mainmenu/logo.gif) right top no-repeat; } -html>body #top #Logo { - padding-bottom: 0; -} - -#top #Logo a { - color: white; -} + html > body #top #Logo { + padding-bottom: 0; + } + + #top #Logo a { + color: #fff; + } #bottom { width: 100%; @@ -213,17 +185,17 @@ html>body #top #Logo { bottom: 0; left: 0; height: 23px; - overflow:hidden; + overflow: hidden; background: #4d4e5a url(../images/textures/footerBg.gif) repeat-x left top; } #bottom .holder { text-align: center; padding-top: 5px; - padding-left : 3px; - padding-right : 6px; + padding-left: 3px; + padding-right: 6px; font-size: 10px; - color: white; + color: #fff; } #bottom #logInStatus { @@ -237,13 +209,12 @@ html>body #top #Logo { color: #fff; text-decoration: none; } - #bottom #logInStatus a#LogoutLink { - background: url(../images/logout.gif) no-repeat right bottom; + #bottom #logInStatus #LogoutLink { + background: url(../images/logout.gif) no-repeat right center; padding-right: 20px; } #bottom #switchView { float: left; - } #bottom .bottomTabs a { @@ -252,15 +223,15 @@ html>body #top #Logo { #bottom .bottomTabs div.blank { display: block; - float : left; - cursor:pointer; + float: left; + cursor: pointer; background-color: transparent; padding-right: 4px; font-weight: bold; line-height: 13px; font-size: 11px; padding-left: 2px; - color:#FFFFFF; + color: #fff; } #bottom .bottomTabs a.current { cursor: auto; @@ -271,7 +242,6 @@ html>body #top #Logo { /** LEFT PANEL **/ - #sitetree_holder { height: 80%; width: 100%; @@ -282,10 +252,9 @@ html>body #top #Logo { margin-top: 2px; width: 500px; /* IE's chocking right now */ } - -html>body #sitetree { - width: auto; -} + html>body #sitetree { + width: auto; + } div.spacer, li.spacer { list-style-type: none; @@ -300,7 +269,6 @@ div.spacer, li.spacer { width: auto; } /** RIGHT PANEL **/ - .mceToolbarExternal { background-color: #eee; /*border-bottom: 1px #CCC solid;*/ @@ -351,7 +319,7 @@ div.spacer, li.spacer { white-space: nowrap; width: 100%; float: left; - border : 1px solid #AAAAAA; + border: 1px solid #aaa; } .thumbnailstrip ul { diff --git a/css/typography.css b/css/typography.css index 44b9223c..d16b4403 100644 --- a/css/typography.css +++ b/css/typography.css @@ -1,31 +1,18 @@ -body { - font-size: 62.5%; -} * { - font-family: Arial; - font-size: 1em; - + font-family: Arial, Helvetica, sans-serif; + font-size: 10px; } + p, ul, td, th { - font-size: 1.2em; + font-size: 12px; } - /* overrides (to avoid larger font-sizing) */ - ul ul, - th p, - td p, - div ul.optionset { - font-size: 1em; - } -ul ul { - font-size: 1em; -} h1 { - font-size: 2em; + font-size: 20px; color: #0074C6; } h2 { - font-size: 1.8em; + font-size: 18px; color: #0074C6; } @@ -33,18 +20,12 @@ a { color: #162F42; text-decoration: underline; } + a:hover { color: #0074C6; text-decoration: underline; } + a img { border-style: none; } -#Header a, #ProductGroups a, #Products a { - color: white; -} - - -#Header h1 { - color: white; -} diff --git a/templates/Includes/CMSMain_left.ss b/templates/Includes/CMSMain_left.ss index 0b8e68f5..2ea7fef8 100755 --- a/templates/Includes/CMSMain_left.ss +++ b/templates/Includes/CMSMain_left.ss @@ -47,17 +47,17 @@ - + <% control SiteTreeFilterOptions %> - + <% end_control %>