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