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
This commit is contained in:
Sean Harvey 2007-11-05 05:03:05 +00:00
parent d17b4af296
commit 96006c5614
5 changed files with 100 additions and 201 deletions

View File

@ -1,65 +1,42 @@
#TreeActions { #TreeActions {
background-color: #EEE; background: #eee;
border-bottom: 1px #CCC solid; border-bottom: 1px solid #ccc;
padding: 0; padding: 0;
margin: 0; margin: 0;
/* height: 23px; */ /* height: 23px; */
float: left; float: left;
width: 100%; width: 100%;
} }
#TreeActions li {
float: left;
/*#TreeActions li.action { list-style: none;
float: left; list-style-type: none;
margin: 0; }
padding: 2px; #TreeActions li button {
list-style-type: none; cursor: pointer;
} float: left;
#TreeActions li.action button { background-image: url(../images/textures/ToolBar.png);
margin-left: 0; color: #333;
margin-right: 0; overflow: visible;
padding: 0pt 0.1em; width: auto;
overflow: visible; padding: 0;
width: auto; margin: 1px;
}*/ border-color: #ccc rgb(153, 153, 153) rgb(153, 153, 153) rgb(204, 204, 204);
border-style: double;
#TreeActions li { font-weight: bold;
float: left; font-size: 11px;
list-style: none; }
list-style-type: none; #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 { }
cursor: pointer; #TreeActions li button:hover {
float: left; background: #fff;
height: 25px; }
background-image: url(../images/textures/ToolBar.png); #TreeActions li.selected,
color: #333333; #TreeActions li.action:hover {
overflow: visible; background: #ccc;
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;
}
#left form.actionparams { #left form.actionparams {
background-color: #CCC; background-color: #CCC;
@ -88,7 +65,6 @@
color: #666; color: #666;
} }
/** /**
* Selection Groups * Selection Groups
*/ */
@ -102,7 +78,7 @@
clear: left; clear: left;
padding: 0; padding: 0;
margin: 0; margin: 0;
border: 1px #CCC solid; border: 1px solid #ccc;
} }
#left .SelectionGroup li input { #left .SelectionGroup li input {
width: 20px; width: 20px;
@ -204,13 +180,13 @@ ul.tree.multiselect li.selected span.a.unexpanded span.b {
ul.tree span.a a.disabled { ul.tree span.a a.disabled {
color: #999; color: #999;
cursor: default; cursor: pointer;
} }
ul.tree span.a a.disabled * { ul.tree span.a a.disabled * {
padding: 0; padding: 0;
background: none; background: none;
color: #999; color: #999;
cursor: default; cursor: pointer;
} }
@ -223,9 +199,7 @@ ul.tree ins,
#publication_key ins { #publication_key ins {
color: orange; color: orange;
padding-left : 16px; padding-left : 16px;
background-image : url(../../sapphire/images/NewOnStage.png); background: url(../../sapphire/images/NewOnStage.png) no-repeat center left;
background-position : 0px 1px;
background-repeat : no-repeat;
text-decoration : none; text-decoration : none;
} }
/* Deleted on stage */ /* Deleted on stage */
@ -233,25 +207,22 @@ ul.tree del,
#publication_key del { #publication_key del {
color: red; color: red;
padding-left : 16px; padding-left : 16px;
background-image : url(../../sapphire/images/TrashedOnStage.png); background: url(../../sapphire/images/TrashedOnStage.png) no-repeat center left;
background-repeat : no-repeat;
} }
ul.tree span.modified, ul.tree span.modified,
#publication_key span.modified { #publication_key span.modified {
color: green; color: green;
padding-left : 16px; padding-left : 16px;
background-position : 1px 0px; background: url(../../sapphire/images/EditedOnStage.png) no-repeat center left;
background-image : url(../../sapphire/images/EditedOnStage.png);
background-repeat : no-repeat;
text-decoration : none; text-decoration : none;
} }
#left { #left {
background-color: #EEE; background-color: #eee;
} }
#treepanes { #treepanes {
background-color: #FFF; background-color: #fff;
} }
#treepanes h2 { #treepanes h2 {
cursor: pointer; cursor: pointer;

View File

@ -187,11 +187,8 @@ input.delete:hover,
} }
input.loading { input.loading {
background-color: #fff;
background-image: url(../images/network-save.gif);
background-position: center left;
background-repeat: no-repeat;
padding-left: 16px; padding-left: 16px;
background: #fff url(../images/network-save.gif) no-repeat center left;
} }
/** /**
@ -401,16 +398,6 @@ input.loading {
max-height: 300px; max-height: 300px;
overflow: auto; 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 * TableField Subclasses
@ -467,25 +454,17 @@ div.CommentFilter {
} }
/** /**
* i18n * i18n
*/ */
div.originallang_holder.field.CompositeField.nolabel { div.originallang_holder.field.CompositeField.nolabel {
border: 1px dashed #AAAAAA; border: 1px dashed #aaa;
margin-bottom: 10px; margin-bottom: 10px;
margin-left: 0px; margin-left: 0;
padding-top: 8px; padding: 8px 0 6px 5px;
padding-bottom: 6px;
padding-left: 5px;
}
.originallang {
color: #666666;
font-style: italic;
} }
.originallang,
#Form_EditForm_URLSegment_original { #Form_EditForm_URLSegment_original {
color: #666; color: #666;
font-style: italic; font-style: italic;
@ -493,8 +472,8 @@ div.originallang_holder.field.CompositeField.nolabel {
.right form div.languageDropdown { .right form div.languageDropdown {
clear: right; clear: right;
padding-right: 4pt;
float: left; float: left;
padding-right: 4px;
} }
.right form div.createTranslationButton { .right form div.createTranslationButton {

View File

@ -1,32 +1,14 @@
/*
Tenative color scheme:
#0074C6 #95B2C6 #639DC6 #162F42 #2C5F84
4A7695 819BAD
*/
html { html {
margin: 0; margin: 0;
height: 100%; height: 100%;
overflow:hidden; overflow:hidden;
} }
body { body {
height: 100%; height: 100%;
margin: 0; margin: 0;
font-size: 62.5%;
background-color: #ccdef3; 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 { form#Form_EditForm fieldset {
height: 100%; height: 100%;
} }
@ -41,7 +23,7 @@ body.stillLoading select {
height: 33px; height: 33px;
padding: 0; padding: 0;
background: #474855 url(../images/mainmenu/top-bg.gif) top left repeat-x; background: #474855 url(../images/mainmenu/top-bg.gif) top left repeat-x;
color: #FFF; color: #fff;
overflow: hidden; overflow: hidden;
} }
#left { #left {
@ -51,8 +33,8 @@ body.stillLoading select {
width: 205px; width: 205px;
height: 91%; height: 91%;
z-index: 50; z-index: 50;
border : 1px #acbbcc solid; border: 1px solid #acbbcc;
background-color:#FFFFFF; background: #fff;
} }
#right, #rightbottom { #right, #rightbottom {
position: absolute; position: absolute;
@ -62,9 +44,9 @@ body.stillLoading select {
width: 600px; width: 600px;
overflow: auto; overflow: auto;
z-index: 50; z-index: 50;
border: 1px #acbbcc solid; border: 1px solid #acbbcc;
background-color: #eee; background: #eee;
margin-right : 3px; margin-right: 3px;
} }
#rightbottom { #rightbottom {
@ -80,7 +62,6 @@ body.stillLoading select {
cursor: e-resize; cursor: e-resize;
} }
/** /**
* Hidden left-hand panel * Hidden left-hand panel
*/ */
@ -97,30 +78,25 @@ body.stillLoading select {
} }
#left div.title, #right div.title, #rightbottom div.title{ #left div.title, #right div.title, #rightbottom div.title {
border-top: 1px #77BBEE solid; border-top: 1px solid #77BBEE;
background-image:url(../images/textures/obar.gif); height: 22px !important;
height : 22px !important; background: #0075C9 url(../images/texture/obar.gif) repeat-x 0 0;
background-color : #0075C9;
background-repeat : repeat-x !important;
background-position: 0px 0px;
} }
#rightbottom div.light { #rightbottom div.light {
background-image: url(../images/textures/obar-light.png) !important; background-image: url(../images/textures/obar-light.png) !important;
} }
#left div.title div, #right div.title div, #rightbottom div.title div {
#left div.title div, #right div.title div, #rightbottom div.title div{ font-size: 14px;
font-size : 14px; font-weight: bold;
font-weight : bold; color: #fff;
color: white;
padding: 2px 0 0 4px; padding: 2px 0 0 4px;
background-position: 2px 2px; background-position: 2px 2px;
background-repeat:no-repeat; background-repeat: no-repeat;
padding-left : 20px; padding-left: 20px;
border-top: 1px #77BBEE solid; border-top: 1px solid #77BBEE;
} }
#left h2 { #left h2 {
@ -133,8 +109,6 @@ body.stillLoading select {
padding-left: 3px; padding-left: 3px;
} }
/** TOP PANEL **/ /** TOP PANEL **/
#top #MainMenu { #top #MainMenu {
margin: 0 0 0 6px; margin: 0 0 0 6px;
@ -142,10 +116,8 @@ body.stillLoading select {
} }
#top #MainMenu li { #top #MainMenu li {
margin: 0px 4px; margin: 0px 4px;
/* Do not want to do padding: 0 0; you'll see why */ padding-top: 0;
padding-top: 0px; padding-bottom: 0;
padding-bottom: 0px;
list-style-type: none; list-style-type: none;
float: left; float: left;
height: 33px; height: 33px;
@ -159,7 +131,7 @@ body.stillLoading select {
padding: 0 6px; padding: 0 6px;
font-size: 14px; font-size: 14px;
letter-spacing: -0.1px; letter-spacing: -0.1px;
font-family: "Helvetica Neue", Helvetica, Arial, Sans-serif; font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
font-weight: normal; font-weight: normal;
line-height: 32px; line-height: 32px;
color: #fff; color: #fff;
@ -178,9 +150,9 @@ body.stillLoading select {
background: #cddef3 url(../images/mainmenu/currentHover.gif) repeat-x left top; 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; color : #2f383f;
} }
#top #Logo { #top #Logo {
@ -199,13 +171,13 @@ body.stillLoading select {
padding-right: 34px; padding-right: 34px;
background: url(../images/mainmenu/logo.gif) right top no-repeat; background: url(../images/mainmenu/logo.gif) right top no-repeat;
} }
html>body #top #Logo { html > body #top #Logo {
padding-bottom: 0; padding-bottom: 0;
} }
#top #Logo a { #top #Logo a {
color: white; color: #fff;
} }
#bottom { #bottom {
width: 100%; width: 100%;
@ -213,17 +185,17 @@ html>body #top #Logo {
bottom: 0; bottom: 0;
left: 0; left: 0;
height: 23px; height: 23px;
overflow:hidden; overflow: hidden;
background: #4d4e5a url(../images/textures/footerBg.gif) repeat-x left top; background: #4d4e5a url(../images/textures/footerBg.gif) repeat-x left top;
} }
#bottom .holder { #bottom .holder {
text-align: center; text-align: center;
padding-top: 5px; padding-top: 5px;
padding-left : 3px; padding-left: 3px;
padding-right : 6px; padding-right: 6px;
font-size: 10px; font-size: 10px;
color: white; color: #fff;
} }
#bottom #logInStatus { #bottom #logInStatus {
@ -237,13 +209,12 @@ html>body #top #Logo {
color: #fff; color: #fff;
text-decoration: none; text-decoration: none;
} }
#bottom #logInStatus a#LogoutLink { #bottom #logInStatus #LogoutLink {
background: url(../images/logout.gif) no-repeat right bottom; background: url(../images/logout.gif) no-repeat right center;
padding-right: 20px; padding-right: 20px;
} }
#bottom #switchView { #bottom #switchView {
float: left; float: left;
} }
#bottom .bottomTabs a { #bottom .bottomTabs a {
@ -252,15 +223,15 @@ html>body #top #Logo {
#bottom .bottomTabs div.blank { #bottom .bottomTabs div.blank {
display: block; display: block;
float : left; float: left;
cursor:pointer; cursor: pointer;
background-color: transparent; background-color: transparent;
padding-right: 4px; padding-right: 4px;
font-weight: bold; font-weight: bold;
line-height: 13px; line-height: 13px;
font-size: 11px; font-size: 11px;
padding-left: 2px; padding-left: 2px;
color:#FFFFFF; color: #fff;
} }
#bottom .bottomTabs a.current { #bottom .bottomTabs a.current {
cursor: auto; cursor: auto;
@ -271,7 +242,6 @@ html>body #top #Logo {
/** LEFT PANEL **/ /** LEFT PANEL **/
#sitetree_holder { #sitetree_holder {
height: 80%; height: 80%;
width: 100%; width: 100%;
@ -282,10 +252,9 @@ html>body #top #Logo {
margin-top: 2px; margin-top: 2px;
width: 500px; /* IE's chocking right now */ width: 500px; /* IE's chocking right now */
} }
html>body #sitetree {
html>body #sitetree { width: auto;
width: auto; }
}
div.spacer, li.spacer { div.spacer, li.spacer {
list-style-type: none; list-style-type: none;
@ -300,7 +269,6 @@ div.spacer, li.spacer {
width: auto; width: auto;
} }
/** RIGHT PANEL **/ /** RIGHT PANEL **/
.mceToolbarExternal { .mceToolbarExternal {
background-color: #eee; background-color: #eee;
/*border-bottom: 1px #CCC solid;*/ /*border-bottom: 1px #CCC solid;*/
@ -351,7 +319,7 @@ div.spacer, li.spacer {
white-space: nowrap; white-space: nowrap;
width: 100%; width: 100%;
float: left; float: left;
border : 1px solid #AAAAAA; border: 1px solid #aaa;
} }
.thumbnailstrip ul { .thumbnailstrip ul {

View File

@ -1,31 +1,18 @@
body {
font-size: 62.5%;
}
* { * {
font-family: Arial; font-family: Arial, Helvetica, sans-serif;
font-size: 1em; font-size: 10px;
} }
p, ul, td, th { 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 { h1 {
font-size: 2em; font-size: 20px;
color: #0074C6; color: #0074C6;
} }
h2 { h2 {
font-size: 1.8em; font-size: 18px;
color: #0074C6; color: #0074C6;
} }
@ -33,18 +20,12 @@ a {
color: #162F42; color: #162F42;
text-decoration: underline; text-decoration: underline;
} }
a:hover { a:hover {
color: #0074C6; color: #0074C6;
text-decoration: underline; text-decoration: underline;
} }
a img { a img {
border-style: none; border-style: none;
} }
#Header a, #ProductGroups a, #Products a {
color: white;
}
#Header h1 {
color: white;
}

View File

@ -47,17 +47,17 @@
<input type="hidden" id="SiteTreeIsFiltered" value="0" /> <input type="hidden" id="SiteTreeIsFiltered" value="0" />
<input type="text" id="SiteTreeSearchTerm" name="SiteTreeSearchTerm" /> <input type="text" id="SiteTreeSearchTerm" name="SiteTreeSearchTerm" />
<input type="submit" id="SiteTreeSearchButton" value="<% _t('SEARCH') %>" title="<% _t('SEARCHTITLE','Search through URL, Title, Menu Title, &amp; Content') %>" /> <input type="submit" id="SiteTreeSearchButton" value="<% _t('SEARCH') %>" title="<% _t('SEARCHTITLE','Search through URL, Title, Menu Title, &amp; Content') %>" />
<div style="display:none" id="TextSiteTreeFilterDate" class="SearchCriteria"><b><% _t('EDITEDSINCE','Edited Since') %>:</b></div> <div style="display:none" id="TextSiteTreeFilterDate" class="SearchCriteria"><% _t('EDITEDSINCE','Edited Since') %>:</div>
<div style="display:none" id="InputSiteTreeFilterDate">$SiteTreeFilterDateField</div> <div style="display:none" id="InputSiteTreeFilterDate">$SiteTreeFilterDateField</div>
<% control SiteTreeFilterOptions %> <% control SiteTreeFilterOptions %>
<div style="display:none" id="Text$Column" class="SearchCriteria"><b>$Title:</b></div> <div style="display:none" id="Text$Column" class="SearchCriteria">$Title:</div>
<input style="display:none" id="Input$Column" name="$Column" class="SearchCriteria" /> <input style="display:none" id="Input$Column" name="$Column" class="SearchCriteria" />
<% end_control %> <% end_control %>
<select id="SiteTreeFilterAddCriteria"> <select id="SiteTreeFilterAddCriteria">
<option><% _t('ADDSEARCHCRITERIA','Add Criteria...') %></option> <option><% _t('ADDSEARCHCRITERIA','Add Criteria...') %></option>
<option value="SiteTreeFilterDate"><% _t('EDITEDSINCE','Edited Since') %></option> <option value="SiteTreeFilterDate"><% _t('EDITEDSINCE','Edited Since') %></option>
<% control SiteTreeFilterOptions %> <% control SiteTreeFilterOptions %>
<option value="$Column">$Title</option> <option value="$Column">$Title</option>
<% end_control %> <% end_control %>
</select> </select>
</div> </div>