/********************************************************************************************* * * * This is the css for the Purple theme for the Kopano WebApp. * * * * (c) 2016 Kopano * * * *********************************************************************************************/ /********************************************************************************************* * The Login screen and the Welcome screen * ======================================= ********************************************************************************************/ /* Background image of the login screen */ body.login, #loading-mask, #bg, /* Background image of the Welcome screen */ body.zarafa-welcome { background: url(../img/background.jpg) no-repeat center center; background-size: cover; } /* The Sign in button of the login screen */ body.login #form-container #submitbutton, #loading-mask #form-container #submitbutton { background: #702277; } /* Hover state and active state of the Sign in button */ body.login #form-container #submitbutton:hover, #loading-mask #form-container #submitbutton:hover, body.login #form-container #submitbutton:active, #loading-mask #form-container #submitbutton:active { background: #541959; } /* The top bar of the Welcome dialog */ .zarafa-welcome-body > .x-panel-bwrap > .x-panel-body div.zarafa-welcome-title { border-left: 1px solid #490e67; border-right: 1px solid #490e67; background: #490e67; } /********************************************************************************************* * The top menu bar * ================================ * We will define the background color of the bar and hover and active colors of the buttons * in the bar. ********************************************************************************************/ /* The border line under the top menu bar */ body #zarafa-mainmenu { border-color: #490e67; } /* The background color of the top menu bar */ body #zarafa-mainmenu.zarafa-maintabbar > .x-toolbar-ct { background-color: #490e67; } /* Background color of the hover state of the buttons in the top menu bar */ body #zarafa-mainmenu.zarafa-maintabbar > .x-toolbar-ct .x-btn.x-btn-over, /* Background color of the active state of the buttons (i.e. when the buttons get clicked) */ body #zarafa-mainmenu.zarafa-maintabbar > .x-toolbar-ct .x-btn.x-btn-over.x-btn-click, /* Background color of the selected button */ body #zarafa-mainmenu.zarafa-maintabbar > .x-toolbar-ct .zarafa-maintabbar-maintab-active, /* Background color of the hover state of selected button */ body #zarafa-mainmenu.zarafa-maintabbar > .x-toolbar-ct .zarafa-maintabbar-maintab-active.x-btn-over, /* Background color of the active state of selected button */ body #zarafa-mainmenu.zarafa-maintabbar > .x-toolbar-ct .zarafa-maintabbar-maintab-active.x-btn-over.x-btn-click { background-color: #702277 !important; } /**************************************************************************** * Action color * =============== * Some elements have a different color than the default color of these elements * to get extra attention, e.g. 'call-to-action' buttons, the current day * in the calendar, etc. ****************************************************************************/ /* normal state */ .x-btn.zarafa-action .x-btn-small, .x-btn.zarafa-action .x-btn-medium, .x-btn.zarafa-action .x-btn-large, /* active state */ .x-btn.zarafa-action.x-btn-over.x-btn-click .x-btn-small, .x-btn.zarafa-action.x-btn-over.x-btn-click .x-btn-medium, .x-btn.zarafa-action.x-btn-over.x-btn-click .x-btn-large, .x-btn.zarafa-action.x-btn-click .x-btn-small, .x-btn.zarafa-action.x-btn-click .x-btn-medium, .x-btn.zarafa-action.x-btn-click .x-btn-large, /* Special case: Popup, Windows, or Messageboxes (first button is by default styled as the action button) */ .x-window .x-panel-footer .x-toolbar-left-row .x-toolbar-cell:not(.x-hide-offsets) .x-btn:not(.zarafa-normal) .x-btn-small, .x-window .x-panel-footer .x-toolbar-left-row .x-toolbar-cell:not(.x-hide-offsets) .x-btn:not(.zarafa-normal) .x-btn-medium, .x-window .x-panel-footer .x-toolbar-left-row .x-toolbar-cell:not(.x-hide-offsets) .x-btn:not(.zarafa-normal) .x-btn-large, .x-window .x-panel-footer .x-toolbar-right-row .x-toolbar-cell:not(.x-hide-offsets) .x-btn:not(.zarafa-normal) .x-btn-small, .x-window .x-panel-footer .x-toolbar-right-row .x-toolbar-cell:not(.x-hide-offsets) .x-btn:not(.zarafa-normal) .x-btn-medium, .x-window .x-panel-footer .x-toolbar-right-row .x-toolbar-cell:not(.x-hide-offsets) .x-btn:not(.zarafa-normal) .x-btn-large, .x-window .x-window-footer .x-toolbar-left-row .x-toolbar-cell:not(.x-hide-offsets) .x-btn:not(.zarafa-normal) .x-btn-small, .x-window .x-window-footer .x-toolbar-left-row .x-toolbar-cell:not(.x-hide-offsets) .x-btn:not(.zarafa-normal) .x-btn-medium, .x-window .x-window-footer .x-toolbar-left-row .x-toolbar-cell:not(.x-hide-offsets) .x-btn:not(.zarafa-normal) .x-btn-large, .x-window .x-window-footer .x-toolbar-right-row .x-toolbar-cell:not(.x-hide-offsets) .x-btn:not(.zarafa-normal) .x-btn-small, .x-window .x-window-footer .x-toolbar-right-row .x-toolbar-cell:not(.x-hide-offsets) .x-btn:not(.zarafa-normal) .x-btn-medium, .x-window .x-window-footer .x-toolbar-right-row .x-toolbar-cell:not(.x-hide-offsets) .x-btn:not(.zarafa-normal) .x-btn-large, .x-window .x-panel-footer .x-toolbar-left-row .x-toolbar-cell:not(.x-hide-offsets) .x-btn.x-btn-click:not(.zarafa-normal) .x-btn-small, .x-window .x-panel-footer .x-toolbar-left-row .x-toolbar-cell:not(.x-hide-offsets) .x-btn.x-btn-click:not(.zarafa-normal) .x-btn-medium, .x-window .x-panel-footer .x-toolbar-left-row .x-toolbar-cell:not(.x-hide-offsets) .x-btn.x-btn-click:not(.zarafa-normal) .x-btn-large, .x-window .x-panel-footer .x-toolbar-right-row .x-toolbar-cell:not(.x-hide-offsets) .x-btn.x-btn-click:not(.zarafa-normal) .x-btn-small, .x-window .x-panel-footer .x-toolbar-right-row .x-toolbar-cell:not(.x-hide-offsets) .x-btn.x-btn-click:not(.zarafa-normal) .x-btn-medium, .x-window .x-panel-footer .x-toolbar-right-row .x-toolbar-cell:not(.x-hide-offsets) .x-btn.x-btn-click:not(.zarafa-normal) .x-btn-large, .x-window .x-window-footer .x-toolbar-left-row .x-toolbar-cell:not(.x-hide-offsets) .x-btn.x-btn-click:not(.zarafa-normal) .x-btn-small, .x-window .x-window-footer .x-toolbar-left-row .x-toolbar-cell:not(.x-hide-offsets) .x-btn.x-btn-click:not(.zarafa-normal) .x-btn-medium, .x-window .x-window-footer .x-toolbar-left-row .x-toolbar-cell:not(.x-hide-offsets) .x-btn.x-btn-click:not(.zarafa-normal) .x-btn-large, .x-window .x-window-footer .x-toolbar-right-row .x-toolbar-cell:not(.x-hide-offsets) .x-btn.x-btn-click:not(.zarafa-normal) .x-btn-small, .x-window .x-window-footer .x-toolbar-right-row .x-toolbar-cell:not(.x-hide-offsets) .x-btn.x-btn-click:not(.zarafa-normal) .x-btn-medium, .x-window .x-window-footer .x-toolbar-right-row .x-toolbar-cell:not(.x-hide-offsets) .x-btn.x-btn-click:not(.zarafa-normal) .x-btn-large, .x-window .x-panel-footer .x-toolbar-left-row .x-toolbar-cell:not(.x-hide-offsets) .x-btn.x-btn-over.x-btn-click:not(.zarafa-normal) .x-btn-small, .x-window .x-panel-footer .x-toolbar-left-row .x-toolbar-cell:not(.x-hide-offsets) .x-btn.x-btn-over.x-btn-click:not(.zarafa-normal) .x-btn-medium, .x-window .x-panel-footer .x-toolbar-left-row .x-toolbar-cell:not(.x-hide-offsets) .x-btn.x-btn-over.x-btn-click:not(.zarafa-normal) .x-btn-large, .x-window .x-panel-footer .x-toolbar-right-row .x-toolbar-cell:not(.x-hide-offsets) .x-btn.x-btn-over.x-btn-click:not(.zarafa-normal) .x-btn-small, .x-window .x-panel-footer .x-toolbar-right-row .x-toolbar-cell:not(.x-hide-offsets) .x-btn.x-btn-over.x-btn-click:not(.zarafa-normal) .x-btn-medium, .x-window .x-panel-footer .x-toolbar-right-row .x-toolbar-cell:not(.x-hide-offsets) .x-btn.x-btn-over.x-btn-click:not(.zarafa-normal) .x-btn-large, .x-window .x-window-footer .x-toolbar-left-row .x-toolbar-cell:not(.x-hide-offsets) .x-btn.x-btn-over.x-btn-click:not(.zarafa-normal) .x-btn-small, .x-window .x-window-footer .x-toolbar-left-row .x-toolbar-cell:not(.x-hide-offsets) .x-btn.x-btn-over.x-btn-click:not(.zarafa-normal) .x-btn-medium, .x-window .x-window-footer .x-toolbar-left-row .x-toolbar-cell:not(.x-hide-offsets) .x-btn.x-btn-over.x-btn-click:not(.zarafa-normal) .x-btn-large, .x-window .x-window-footer .x-toolbar-right-row .x-toolbar-cell:not(.x-hide-offsets) .x-btn.x-btn-over.x-btn-click:not(.zarafa-normal) .x-btn-small, .x-window .x-window-footer .x-toolbar-right-row .x-toolbar-cell:not(.x-hide-offsets) .x-btn.x-btn-over.x-btn-click:not(.zarafa-normal) .x-btn-medium, .x-window .x-window-footer .x-toolbar-right-row .x-toolbar-cell:not(.x-hide-offsets) .x-btn.x-btn-over.x-btn-click:not(.zarafa-normal) .x-btn-large, /* Current day in the calendar */ .zarafa-calendar-container-header .zarafa-canvas-header-background .zarafa-styling-element-active, .zarafa-calendar-container-header .zarafa-canvas-header-background .zarafa-styling-element-current-day, /* Current day in the calendar */ .zarafa-freebusy-panel .x-freebusy-timeline-container .x-freebusy-header .x-freebusy-header-body .x-freebusy-timeline-day.x-freebusy-timeline-day-current table tr.x-freebusy-timeline-day td, /* The date pickers */ .x-date-picker .x-date-inner td.x-date-today a, .x-date-picker .x-date-mp table td.x-date-mp-sel a, .x-date-picker .x-date-mp table tr.x-date-mp-btns td button.x-date-mp-ok { background: #702277 !important; } /* hover state */ .x-btn.zarafa-action.x-btn-over .x-btn-small, .x-btn.zarafa-action.x-btn-over .x-btn-medium, .x-btn.zarafa-action.x-btn-over .x-btn-large, /* Special case: Popup, Windows, or Messageboxes */ .x-window .x-panel-footer .x-toolbar-left-row .x-toolbar-cell:not(.x-hide-offsets) .x-btn.x-btn-over:not(.zarafa-normal) .x-btn-small, .x-window .x-panel-footer .x-toolbar-left-row .x-toolbar-cell:not(.x-hide-offsets) .x-btn.x-btn-over:not(.zarafa-normal) .x-btn-medium, .x-window .x-panel-footer .x-toolbar-left-row .x-toolbar-cell:not(.x-hide-offsets) .x-btn.x-btn-over:not(.zarafa-normal) .x-btn-large, .x-window .x-panel-footer .x-toolbar-right-row .x-toolbar-cell:not(.x-hide-offsets) .x-btn.x-btn-over:not(.zarafa-normal) .x-btn-small, .x-window .x-panel-footer .x-toolbar-right-row .x-toolbar-cell:not(.x-hide-offsets) .x-btn.x-btn-over:not(.zarafa-normal) .x-btn-medium, .x-window .x-panel-footer .x-toolbar-right-row .x-toolbar-cell:not(.x-hide-offsets) .x-btn.x-btn-over:not(.zarafa-normal) .x-btn-large, .x-window .x-window-footer .x-toolbar-left-row .x-toolbar-cell:not(.x-hide-offsets) .x-btn.x-btn-over:not(.zarafa-normal) .x-btn-small, .x-window .x-window-footer .x-toolbar-left-row .x-toolbar-cell:not(.x-hide-offsets) .x-btn.x-btn-over:not(.zarafa-normal) .x-btn-medium, .x-window .x-window-footer .x-toolbar-left-row .x-toolbar-cell:not(.x-hide-offsets) .x-btn.x-btn-over:not(.zarafa-normal) .x-btn-large, .x-window .x-window-footer .x-toolbar-right-row .x-toolbar-cell:not(.x-hide-offsets) .x-btn.x-btn-over:not(.zarafa-normal) .x-btn-small, .x-window .x-window-footer .x-toolbar-right-row .x-toolbar-cell:not(.x-hide-offsets) .x-btn.x-btn-over:not(.zarafa-normal) .x-btn-medium, .x-window .x-window-footer .x-toolbar-right-row .x-toolbar-cell:not(.x-hide-offsets) .x-btn.x-btn-over:not(.zarafa-normal) .x-btn-large, /* The date pickers */ .x-date-picker .x-date-mp table tr.x-date-mp-btns td button.x-date-mp-ok:hover { background: #541959 !important; } /* The borders of the current day in the scheduling panel of metting requests */ .zarafa-freebusy-panel .x-freebusy-timeline-container .x-freebusy-header .x-freebusy-header-body .x-freebusy-timeline-day.x-freebusy-timeline-day-current table tr.x-freebusy-timeline-hour td:first-child, .zarafa-freebusy-panel .x-freebusy-timeline-container .x-freebusy-body .x-freebusy-background .x-freebusy-timeline-day.x-freebusy-timeline-day-current td:first-child { border-left-color: #702277; } .zarafa-freebusy-panel .x-freebusy-timeline-container .x-freebusy-body .x-freebusy-background .x-freebusy-timeline-day.x-freebusy-timeline-day-current { border-right-color: #702277; } /* Counters in the hierarchy */ .zarafa-hierarchy-node-total-count span.zarafa-hierarchy-node-counter, .zarafa-hierarchy-node-unread-count span.zarafa-hierarchy-node-counter, /* Font color of the week numbers in the date pickers */ .x-date-picker .x-date-inner td.x-date-weeknumber a { color: #702277; } /* Current day in the calendar */ .zarafa-freebusy-panel .x-freebusy-timeline-container .x-freebusy-header .x-freebusy-header-body .x-freebusy-timeline-day.x-freebusy-timeline-day-current, /* border colors of the current day and month in the date pickers */ .x-date-picker .x-date-inner td.x-date-today a, .x-date-picker .x-date-mp table td.x-date-mp-sel a { border-color: #702277; } /********************************************************************* * Tabs * ==== * The background color of the inactive tabs of the main panel can be * changed to better suit the theme. *********************************************************************/ /* The border of an inactive tab */ #zarafa-mainpanel > .x-tab-panel-header > .x-tab-strip-wrap > ul.x-tab-strip li:not(.x-tab-strip-active) { border-color: #e2dfe3 !important; } /* The background of an inactive tab */ #zarafa-mainpanel > .x-tab-panel-header > .x-tab-strip-wrap > ul.x-tab-strip li:not(.x-tab-strip-active) .x-tab-right { background: #e2dfe3; } /* The hover state of the border of an inactive tab */ #zarafa-mainpanel > .x-tab-panel-header > .x-tab-strip-wrap > ul.x-tab-strip li:not(.x-tab-strip-active):hover { border-color: #d7d3d9 !important; } /* The hover state of the background of an inactive tab */ #zarafa-mainpanel > .x-tab-panel-header > .x-tab-strip-wrap > ul.x-tab-strip li:not(.x-tab-strip-active):hover .x-tab-right { background: #d7d3d9; } /********************************************************************* * Selected items in grids and trees * ================================= * The background color of the selected items in grids and trees can * be changed to better suit the theme. *********************************************************************/ /* selected item in grids */ .x-grid3-row.x-grid3-row-selected, .x-grid3 .x-grid3-row-selected .zarafa-grid-button-container, /* selected item in tree hierarchies */ .x-tree-node .zarafa-hierarchy-node.x-tree-selected, /* selected items in boxfields (e.g. the recipient fields) */ .x-zarafa-boxfield ul .x-zarafa-boxfield-item-focus, .x-zarafa-boxfield ul .x-zarafa-boxfield-recipient-item.x-zarafa-boxfield-item-focus, /* selected items in card view of Contacts context */ div.zarafa-contact-cardview-selected, /* selected items in icon view of Notes context */ .zarafa-note-iconview-selected, /* selected category in the Settings context */ #zarafa-mainpanel-contentpanel-settings .zarafa-settings-category-panel .zarafa-settings-category-tab-active, /* selected date in date pickers */ .x-date-picker .x-date-inner td.x-date-selected:not(.x-date-today) a, .x-date-picker .x-date-inner td.x-date-selected:not(.x-date-today) a:hover { background-color: #e9ddf1 !important; border-color: #e9ddf1; } /********************************************************************* * Extra information about items * ================================= * Sometimes extra information is shown in opened items. (e.g. 'You replied * to this message etc'). This can be styled with the following rules. *********************************************************************/ .preview-header-extrainfobox, .preview-header-extrainfobox-item, .zarafa-appointmentcreatetab .zarafa-calendar-appointment-extrainfo div { background: #e2dfe3; color: #222222; } .preview-header-extrainfobox{ border: 1px solid #490e67; } /********************************************************************* * Settings * ================================= *********************************************************************/ /* Links in the About text in Settings */ #zarafa-mainpanel-contentpanel-settings .zarafa-settings-category-widget-panel .zarafa-settings-about-text a { background-color: #490e67; } #zarafa-mainpanel-contentpanel-settings .zarafa-settings-category-widget-panel .zarafa-settings-about-text a:hover { background-color: #702277; } /************************************************************************* * Lines * ================================= *************************************************************************/ /* Inputs of the login screen */ body.login #form-container input[type="text"], body.login #form-container input[type="password"], #loading-mask #form-container input[type="text"], #loading-mask #form-container input[type="password"], /* Welcome panel */ .zarafa-welcome-body > .x-panel-bwrap > .x-panel-body > div, .zarafa-welcome-body > .x-panel-bwrap .x-panel-footer, /* Side panels */ #zarafa-navigationpanel, .zarafa-widgetpanel, /* Panels general */ .x-panel, .x-panel .x-panel-header, .x-panel .x-panel-body, /* Tab panels */ .x-tab-panel-body, /* Mail panel with preview on the right */ #zarafa-mainpanel-contentpanel-mail.zarafa-preview-right .zarafa-context-mainpanel, /* Mail preview panel on the right */ #zarafa-mainpanel-contentpanel-mail.zarafa-preview-right #zarafa-main-content-mail-preview, /* Mail panel with preview on the bottom */ #zarafa-mainpanel-contentpanel-mail.zarafa-preview-bottom .zarafa-context-mainpanel, /* Mail preview panel on the bottom */ #zarafa-mainpanel-contentpanel-mail.zarafa-preview-bottom #zarafa-main-content-mail-preview, /* Preview header */ .preview-header, /* Inputs and textareas */ .x-form-text, textarea.x-form-field, /* Trigger buttons */ .x-form-field-trigger-wrap .x-form-trigger, .x-form-field-trigger-wrap .x-form-spinner-trigger, .x-form-field-wrap .x-form-trigger, .x-form-field-wrap .x-form-spinner-trigger, /* Fieldset */ .x-fieldset, /* Grids */ .x-grid3-header, .x-grid3-hd-row td .x-grid3-hd-inner .x-grid3-hd-btn, .x-grid3-hd-row td.sort-desc .x-grid3-hd-inner, .x-grid3-hd-row td.sort-asc .x-grid3-hd-inner, .x-grid3-hd-row td.sort-desc .x-grid3-hd-inner .x-grid3-hd-btn, .x-grid3-hd-row td.sort-asc .x-grid3-hd-inner .x-grid3-hd-btn, .x-grid3-row, .x-grid3-row-over, .x-grid3-row.x-grid3-row-selected, /* Toolbars */ .x-toolbar, .x-panel-noborder .x-panel-tbar-noborder .x-toolbar, .x-panel-bbar .x-toolbar, .x-panel-tbar .x-toolbar, .x-toolbar .x-btn .x-btn-small .x-btn-split button.x-btn-text, /* Menus */ .x-menu .x-menu-item-active, /* Tab strip */ ul.x-tab-strip, /* Hierarchy panel */ .zarafa-hierarchy-treepanel-bottombar, /* Main panel */ #zarafa-mainpanel #zarafa-mainpanel-content > .x-panel, #zarafa-mainpanel > .x-tab-panel-bwrap > .x-tab-panel-body > div > .x-panel, #zarafa-mainpanel > .x-tab-panel-bwrap > .x-tab-panel-body > div > div#zarafa-mainpanel-contentpanel-mail > .x-panel-bwrap > .x-panel-body > .x-panel, /* Boxfields */ .x-zarafa-boxfield ul .x-zarafa-boxfield-item, /* Mail create panel */ .zarafa-mailcreatepanel > .x-panel-bwrap > .x-panel-body .zarafa-mailcreatepanel-field-subject, /* Appointment create panel */ .zarafa-appointmentcreatetab .field-to, .zarafa-appointmentcreatetab .subject-panel, .zarafa-appointmentcreatetab .location-panel, .zarafa-appointmentcreatetab .datetime-panel table tr:nth-child(2), .zarafa-appointmentcreatetab .busystatus-panel, .zarafa-appointmentcreatetab .label-panel, .zarafa-appointmentcreatetab .attachments-panel, /* Contact create panel */ .zarafa-contactcreatepanel .zarafa-contactgeneraltab .contact_photo_box, /* Calendar tooltip */ .zarafa-canvas-quicktip, /* Dialogs */ .x-window .x-window-bwrap .x-window-body > div > .x-panel > .x-panel-header, .x-panel-ghost .x-window-bwrap .x-window-body > div > .x-panel > .x-panel-header, /* Folder properties dialog */ .x-window .x-window-bwrap .x-window-body > div .zarafa-folderproperties.x-panel.tabpanel-container .tab-permissions .userlist-panel, .x-panel-ghost .x-window-bwrap .x-window-body > div .zarafa-folderproperties.x-panel.tabpanel-container .tab-permissions .userlist-panel, /* Scheduling panel */ .zarafa-freebusy-panel .x-freebusy-timeline-container .x-freebusy-header .x-freebusy-header-body div.x-freebusy-timeline-day, .zarafa-freebusy-panel .x-freebusy-timeline-container .x-freebusy-header .x-freebusy-header-body div.x-freebusy-timeline-day table tr.x-freebusy-timeline-hour td, .zarafa-freebusy-panel .x-freebusy-timeline-container .x-freebusy-header .x-freebusy-header-body .x-freebusy-timeline-day.x-freebusy-timeline-day-current table.x-freebusy-timeline-day-sum, .zarafa-freebusy-panel .x-freebusy-timeline-container .x-freebusy-body .x-freebusy-background .x-freebusy-timeline-day, .zarafa-freebusy-panel .x-freebusy-timeline-container .x-freebusy-body .x-freebusy-background .x-freebusy-timeline-day td, .zarafa-freebusy-panel .x-panel.suggestionlist .x-btn.zarafa-freebusy-suggestionrow .x-btn-small, /* Search toolbox */ .zarafa-search-toolbox, /* Settings panel */ #zarafa-mainpanel-contentpanel-settings .zarafa-settings-category-panel, #zarafa-mainpanel-contentpanel-settings .zarafa-settings-category-widget-panel .zarafa-settings-keyboard-shortcut-row, .zarafa-settings-signatures .x-grid3-row, /* Date picker */ .x-date-picker, .x-date-picker .x-date-middle .x-btn-small em, .x-date-picker .x-date-middle .x-btn-small em button, .x-date-picker .x-date-inner th, .x-date-picker .x-date-bottom, .x-date-picker .x-date-mp table td.x-date-mp-sep, .x-date-picker .x-date-mp table tr.x-date-mp-btns td, #zarafa-navigationpanel .x-date-picker .x-date-inner th:first-child { border-color: #e2dfe3; } /* Tab strip */ ul.x-tab-strip li, ul.x-tab-strip li.x-tab-strip-active, /* Tiny MCE */ .mce-panel { border-color: #e2dfe3 !important; } /* Date picker */ .x-date-picker .x-date-inner td.x-date-weeknumber { border-right-color: #e2dfe3; } /* Buttons */ .x-btn .x-btn-small, .x-btn .x-btn-medium, .x-btn .x-btn-large, /* Panels general */ .x-panel .x-panel-header, /* Menus */ .x-menu .x-menu-scroller.x-menu-item-active:active, .x-menu .x-menu-list li.x-menu-list-item.x-menu-item-active:active a, .x-menu .x-menu-list li.x-menu-sep-li .x-menu-sep, /* Tab strip */ ul.x-tab-strip li .x-tab-right, /* Dialogs */ .x-window .x-window-tl, .x-panel-ghost .x-window-tl, /* Scheduling panel */ .zarafa-freebusy-panel .x-freebusy-timeline-container .x-freebusy-header .x-freebusy-header-body div.x-freebusy-timeline-day table tr.x-freebusy-timeline-day td, /* Date picker */ .x-date-picker .x-date-mp table tr.x-date-mp-btns td button { background-color: #e2dfe3; } /* Buttons */ .x-btn.x-btn-over.x-btn-click .x-btn-small, .x-btn.x-btn-over.x-btn-click .x-btn-medium, .x-btn.x-btn-over.x-btn-click .x-btn-large, .x-btn.x-btn-click .x-btn-small, .x-btn.x-btn-click .x-btn-medium, .x-btn.x-btn-click .x-btn-large { background-color: #e2dfe3 !important; } /* Fade block in titlebar of dialog header */ .x-window .x-window-tl .x-window-tr .x-window-tc .x-window-header .fade, .x-panel-ghost .x-window-tl .x-window-tr .x-window-tc .x-window-header .fade { background: linear-gradient(to right, rgba(226, 223, 227, 0) 0%, #e2dfe3 50%, #e2dfe3 100%); } /* Active calendar tab stroke */ .zarafa-calendar-tabarea-stroke.zarafa-calendar-tab-selected { border-top-color: #702277; }