2 commits - skins/chameleon

Thomas Brüderli bruederli at kolabsys.com
Tue Jan 6 12:51:39 CET 2015


 skins/chameleon/colors.less |    7 +
 skins/chameleon/styles.less |  163 +++++++++++++++++++++++++++++++++-----------
 2 files changed, 131 insertions(+), 39 deletions(-)

New commits:
commit e1076fc1d6336c60f2315b1542851ce1adb790a1
Author: Thomas Bruederli <bruederli at kolabsys.com>
Date:   Tue Jan 6 12:51:33 2015 +0100

    Adjust tabbed form/dialog styles to match the suggested screen design

diff --git a/skins/chameleon/styles.less b/skins/chameleon/styles.less
index ebbc122..d3455ab 100644
--- a/skins/chameleon/styles.less
+++ b/skins/chameleon/styles.less
@@ -12,6 +12,8 @@
 
 @import (reference) "colors.less";
 
+ at box-padding: 12px;
+
 body {
 	background: #e7e7e7 url(images/bg.gif) 0 0 repeat-x;
 	color: @text-color;
@@ -420,6 +422,7 @@ h3.boxtitle,
 .records-table thead th,
 .ui-datepicker-calendar thead th,
 .ui-widget-header select,
+#taskselector li,
 a.menuselector {
 	text-transform: uppercase;
 }
@@ -428,7 +431,7 @@ a.menuselector {
 a.button,
 input.button,
 .fc-button-today,
-.ui-dialog-buttonpane button
+.ui-dialog-buttonpane button,
 .contactfieldgroup legend,
 .propform fieldset legend {
 	text-transform: uppercase;
@@ -705,6 +708,7 @@ body.iframe .boxtitle,
 	background: @title-background;
 	color: @title-text;
 	border-bottom: 1px solid #ebebeb;
+	padding-left: 10px;
 }
 
 .listbox .boxfooter {
@@ -1073,15 +1077,10 @@ table.propform td.title {
 	color: #4c4c4c;
 }
 
-.propform fieldset {
-	margin-bottom: 0;
-}
-
 .propform fieldset legend,
 .propform fieldset fieldset legend {
 	font-size: 12px;
 	color: #4c4c4c;
-	padding: 10px;
 }
 
 .contactfieldgroup {
@@ -1089,6 +1088,8 @@ table.propform td.title {
 	border-bottom: 1px solid #ededed;
 	border-radius: 0;
 	margin: 0;
+	padding: @box-padding;
+	box-sizing: border-box;
 }
 
 .contactfieldgroup legend {
@@ -1097,7 +1098,8 @@ table.propform td.title {
 	border-radius: 0;
 	border: 0;
 	text-shadow: none;
-	padding: 10px 12px 0;
+	padding: 10px @box-padding 0 @box-padding;
+	margin: 0 - at box-padding;
 }
 
 #contactsectioncontact .contactfieldgroup .row {
@@ -1115,7 +1117,7 @@ img.skinthumbnail {
 
 body.iframe .footerleft.floating,
 #composeview-bottom .formbuttons.floating {
-	padding: 7px 14px;
+	padding: 7px @box-padding;
 }
 
 body.iframe .footerleft.floating:before,
@@ -1125,9 +1127,22 @@ body.iframe .footerleft.floating:before,
 	padding-top: 7px;
 }
 
+.boxcontent {
+	padding: 10px @box-padding;
+}
+
 #sourcename,
 #contact-details #contactphoto {
-	padding-left: 10px;
+	padding-left: 2px;
+}
+
+#contacttabs {
+	margin-left: - at box-padding;
+	margin-right: - at box-padding;
+}
+
+#contacttabs p.addfield {
+	margin-left: @box-padding;
 }
 
 a.menuselector {
@@ -1438,6 +1453,10 @@ input.button.delete:hover {
 	padding: 0.2em 0.5em;
 }
 
+.ui-dialog .ui-dialog-buttonpane {
+	padding-top: 0.5em;
+}
+
 
 /*** message bar ***/
 
@@ -1644,21 +1663,31 @@ input.button.delete:hover {
 	border-radius: 0;
 }
 
+.uidialog-tabbed {
+	padding: 0 !important;
+	margin: 0 -12px !important;
+}
+
 .ui-tabs .ui-tabs-panel {
 	background: #f9f9f9;
 	border-radius: 0;
+	margin-right: 0;
+	margin-top: 1px;
+	padding-top: 10px;
 }
 
 .ui-tabs .ui-tabs-nav {
 	border-radius: 0;
+	background: #ededed;
+	height: 45px;
 }
 
-.ui-tabs .ui-tabs-nav li {
-	background: #fff;
-}
-
+.ui-tabs .ui-tabs-nav li,
 .ui-tabs .ui-tabs-nav li.tablink a {
 	background: #ededed;
+}
+
+.ui-tabs .ui-tabs-nav li:last-child a {
 	border-right: 0;
 }
 
@@ -1669,6 +1698,9 @@ input.button.delete:hover {
 .ui-tabs .ui-tabs-nav .ui-tabs-anchor {
 	background: #ededed;
 	color: @text-color;
+	box-sizing: border-box;
+	padding-bottom: 10px;
+	height: 45px;
 }
 
 .ui-tabs .ui-tabs-nav li.ui-tabs-active .ui-tabs-anchor {
@@ -2251,6 +2283,11 @@ input.button.delete:hover {
 	background: transparent;
 }
 
+div.calendar-invitebox .folder-select {
+	display: inline-block;
+	padding: 6px 0;
+}
+
 /*** tasklist module styles ***/
 
 #tasksview,


commit c9d7338258b27bc73a682f4407caf68bcc512494
Author: Thomas Bruederli <bruederli at kolabsys.com>
Date:   Tue Jan 6 11:29:04 2015 +0100

    More color variables added; Render headings and titles in uppercase text (#4112)

diff --git a/skins/chameleon/colors.less b/skins/chameleon/colors.less
index 71b5f51..e9c1a00 100644
--- a/skins/chameleon/colors.less
+++ b/skins/chameleon/colors.less
@@ -5,6 +5,13 @@
 @link-color:  #eb594f;
 @light-color: lighten(@main-color, 38%);
 
+ at title-text: @main-color;
+ at title-background: #f9f9f9;
+ at header-text: #000000;
+ at header-background: #f9f9f9;
+ at list-selected-text: @header-text;
+ at list-selected-background: #f9f9f9;
+
 @focus-color: fade(@main-color, 40%);
 @outline-color: fade(@main-color, 60%);
 @highlight-color: @main-color;
diff --git a/skins/chameleon/styles.less b/skins/chameleon/styles.less
index 0ec86fe..ebbc122 100644
--- a/skins/chameleon/styles.less
+++ b/skins/chameleon/styles.less
@@ -409,6 +409,34 @@ html.mozilla #mailboxlist > li:first-child,
 	border-radius: 0;
 }
 
+/** font/text styles **/
+
+h1.boxtitle,
+h2.boxtitle,
+h3.boxtitle,
+.ktaskmenu,
+.ui-widget-header,
+.fc-widget-header,
+.records-table thead th,
+.ui-datepicker-calendar thead th,
+.ui-widget-header select,
+a.menuselector {
+	text-transform: uppercase;
+}
+
+.ui-button,
+a.button,
+input.button,
+.fc-button-today,
+.ui-dialog-buttonpane button
+.contactfieldgroup legend,
+.propform fieldset legend {
+	text-transform: uppercase;
+}
+
+.toolbar a.button {
+	text-transform: none;
+}
 
 /** color style overrides **/
 
@@ -522,8 +550,8 @@ ul.listing.focus .listitem.focused span {
 .listing li.selected > a,
 .messagelist tr.thread.expanded td,
 #calendars .treelist li.selected > div.calendar {
-	color: @text-color;
-	background-color: #f9f9f9;
+	color: @list-selected-text;
+	background-color: @list-selected-background;
 }
 
 .listbox .listitem,
@@ -598,7 +626,7 @@ select.decorated option[selected='selected'],
 .ui-menu .ui-menu-item a.ui-state-focus,
 .ui-menu .ui-menu-item a.ui-state-active {
 	color: @hightlight-text !important;
-	background: @main-color !important;
+	background: @highlight-color !important;
 	text-shadow: none;
 }
 
@@ -609,8 +637,8 @@ select.decorated option[selected='selected'],
 #attendees-freebusy-table h3.boxtitle,
 #schedule-freebusy-times thead th,
 #edit-attendees-table thead th {
-	color: #4c4c4c;
-	background: #f9f9f9;
+	color: @header-text;
+	background: @header-background;
 	border-left: 1px solid #ededed;
 }
 
@@ -621,12 +649,19 @@ select.decorated option[selected='selected'],
 
 .records-table thead th a,
 .records-table thead th span {
-	color: #4c4c4c;
+	color: @header-text;
 	height: 16px;
 	line-height: 16px;
 }
 
 input[type="text"],
+input[type="password"] {
+	padding: 5px;
+	background: #fff;
+	border: 1px solid #dbdbdb;
+}
+
+input[type="text"],
 input[type="password"],
 #login-form input[type="text"],
 #login-form input[type="password"],
@@ -641,13 +676,6 @@ textarea {
 	background: #fff;
 }
 
-input[type="text"],
-input[type="password"] {
-	padding: 5px;
-	background: #fff;
-	border: 1px solid #dbdbdb;
-}
-
 input[type="text"]:focus,
 input[type="password"]:focus,
 input.button:focus,
@@ -663,13 +691,19 @@ input[type="password"]:required {
 	border-color: #e73023;
 }
 
+.searchbox input,
+#quicksearchbar input {
+	padding-left: 34px;
+	padding-right: 30px;
+}
+
 #tasksview .buttonbar,
 body.iframe .boxtitle,
 .uibox .boxtitle,
 .uibox .listing thead th,
 .uibox .listing thead td {
-	background: #f9f9f9;
-	color: @main-color;
+	background: @title-background;
+	color: @title-text;
 	border-bottom: 1px solid #ebebeb;
 }
 
@@ -687,6 +721,11 @@ body.iframe .boxtitle,
 	border-radius: 0;
 }
 
+h2.subject,
+h3.subject {
+	color: @header-text;
+}
+
 #quotadisplay {
 	color: @text-color;
 	background-image: url(images/quota.png);
@@ -701,7 +740,7 @@ body.iframe .boxtitle,
 }
 
 #messagelistfooter {
-	background: #f9f9f9;
+	background: @header-background;
 	border: none;
 	height: 26px;
 	padding: 6px 6px 2px;
@@ -719,7 +758,7 @@ body.iframe .boxtitle,
 .filelist thead tr th.sortedDESC a,
 .messagelist thead tr th.sortedASC a,
 .messagelist thead tr th.sortedDESC a {
-	color: #4c4c4c;
+	color: @header-text;
 	background-image: url(images/listicons.png);
 }
 
@@ -993,7 +1032,7 @@ body.tasklistview #searchmenulink {
 }
 
 #composebodycontainer .mce-panel {
-	background: #f9f9f9;
+	background: @header-background;
 	border-color: #ededed !important;
 	margin-top: 0;
 }
@@ -1011,6 +1050,15 @@ ul.treelist li div.treetoggle.expanded {
 	background-position: -3px -166px;
 }
 
+div.calendar-invitebox,
+div.tasklist-invitebox,
+#message-objects div.notice,
+.event-dialog-message,
+.event-update-confirm .message {
+	border: 0;
+	background-color: #fefba2;
+}
+
 
 /*** form styles ***/
 
@@ -1108,8 +1156,8 @@ a.menuselector .handle {
 #foldersubscriptions thead th,
 #delegatefolders thead th {
 	border-bottom: 1px solid #ededed;
-	background-color: #f9f9f9;
-	color: @main-color;
+	background-color: @title-background;
+	color: @title-text;
 }
 
 a.menuselector:focus,
@@ -1575,12 +1623,12 @@ input.button.delete:hover {
 
 .ui-dialog .ui-dialog-title {
 	text-shadow: none;
-	color: @main-color;
+	color: @title-text;
 }
 
 .ui-dialog .ui-dialog-titlebar {
 	border-radius: 0;
-	background: #f9f9f9 !important;
+	background: @title-background !important;
 	padding: 10px 1em 12px;
 }
 
@@ -1591,7 +1639,7 @@ input.button.delete:hover {
 #messageheader,
 #mailview-right #messageheader,
 #composeheaders {
-	background: #f9f9f9;
+	background: @header-background;
 	border-bottom: 1px solid #ededed;
 	border-radius: 0;
 }
@@ -1625,7 +1673,7 @@ input.button.delete:hover {
 
 .ui-tabs .ui-tabs-nav li.ui-tabs-active .ui-tabs-anchor {
 	background: @main-color;
-	color: #fff;
+	color: @hightlight-text;
 }
 
 .ui-tabs .tabsbar.ui-tabs-nav {
@@ -1709,7 +1757,7 @@ input.button.delete:hover {
 #tasklistsbox .searchresults .boxtitle,
 #directorylist .searchresults .boxtitle,
 .notesview #notebooksbox .searchresults .boxtitle {
-	background: #f9f9f9;
+	background: @title-background;
 	padding: 7px 8px 6px;
 }
 
@@ -1729,7 +1777,7 @@ input.button.delete:hover {
 	background-image: url(images/listicons.png);
 	background-position: right -5000px;
 	background-repeat: no-repeat;
-	color: #4c4c4c;
+	color: @text-color;
 }
 
 #directorylist li.addressbook.readonly {
@@ -2074,7 +2122,7 @@ input.button.delete:hover {
 }
 
 #agendaoptions {
-	background: #f9f9f9;
+	background: @header-background;
 	border-radius: 0;
 	border: none;
 	padding: 9px 8px;




More information about the commits mailing list