/********************************************************************************************* * * * This is the css for the High Contrast 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 top menu bar * ================================ ********************************************************************************************/ body #zarafa-mainmenu.zarafa-maintabbar > .x-toolbar-ct .x-btn button.x-btn-text, body #zarafa-mainmenu.zarafa-maintabbar > .x-toolbar-ct .x-btn.x-btn-over button.x-btn-text, body #zarafa-mainmenu.zarafa-maintabbar > .x-toolbar-ct .x-btn.x-btn-over.x-btn-click button.x-btn-text, body #zarafa-mainmenu.zarafa-maintabbar > .x-toolbar-ct #mainmenu-logintext { opacity: 1; } /********************************************************************* * 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: #cfd2dc !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: #cfd2dc; } /* 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: #c3c7d3 !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: #c3c7d3; } /********************************************************************* * 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 .x-grid3-row-selected .zarafa-grid-button-container, .x-grid3-row.x-grid3-row-selected, /* 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: #b9dcf5 !important; border-color: #b9dcf5; } /************************************************************************* * 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: #cfd2dc; } /* Tab strip */ ul.x-tab-strip li, ul.x-tab-strip li.x-tab-strip-active, /* Tiny MCE */ .mce-panel { border-color: #cfd2dc !important; } /* Date picker */ .x-date-picker .x-date-inner td.x-date-weeknumber { border-right-color: #cfd2dc; } /* 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: #cfd2dc; } /* 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: #cfd2dc !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(207, 210, 220, 0) 0%, #cfd2dc 50%, #cfd2dc 100%); }