egroupware/kdots/css/kdots.css

/**
 * kDots main styles
 *
 * Note that light / dark colors should go in kdots_light.less & kdots_dark.less
 */
/** Theme customisations **/
:root,
:host,
html,
.sl-theme-light {
  /*
  color token generator using #0053c9
  https://codepen.io/claviska/full/QWveRgL
   */
  --sl-color-primary-50: #f7fafd;
  --sl-color-primary-100: #e4edf9;
  --sl-color-primary-200: #d0dff5;
  --sl-color-primary-300: #bad0f0;
  --sl-color-primary-400: #9cbcea;
  --sl-color-primary-500: #75a2e2;
  --sl-color-primary-600: #4984d8;
  --sl-color-primary-700: #2169d0;
  --sl-color-primary-800: #0051c5;
  --sl-color-primary-900: #003a8d;
  --sl-color-primary-950: #002458;
}
html[data-darkmode="1"],
.sl-theme-dark {
  background-color: black;
  color: var(--sl-color-neutral-700);
  --sl-color-primary-950: hsl(from var(--primary-color) h s calc(l + 18));
  --sl-color-primary-900: hsl(from var(--primary-color) h s calc(l + 16));
  --sl-color-primary-800: hsl(from var(--primary-color) h s calc(l + 12));
  --sl-color-primary-700: hsl(from var(--primary-color) h s calc(l + 8));
  --sl-color-primary-600: hsl(from var(--primary-color) h s calc(l + 4));
  --sl-color-primary-500: var(--primary-color);
  --sl-color-primary-400: hsl(from var(--primary-color) h s calc(l - 4));
  --sl-color-primary-300: hsl(from var(--primary-color) h s calc(l - 8));
  --sl-color-primary-200: hsl(from var(--primary-color) h s calc(l - 12));
  --sl-color-primary-100: hsl(from var(--primary-color) h s calc(l - 16));
  --sl-color-primary-50: hsl(from var(--primary-color) h s calc(l - 18));
  /*** HEADER ***/
  /*** APPLICATION ***/
  /*** End APPLICATION ***/
  /*** WIDGETS ***/
  /* This should mostly go away with webcomponents */
  /** End WIDGETS **/
}
html[data-darkmode="1"] #egw_fw_topmenu_info_items #topmenu_info_timer:before,
.sl-theme-dark #egw_fw_topmenu_info_items #topmenu_info_timer:before {
  filter: initial;
}
html[data-darkmode="1"] egw-app,
.sl-theme-dark egw-app {
  --application-header-text-color: var(--sl-color-neutral-700);
}
html[data-darkmode="1"] .et2_container,
.sl-theme-dark .et2_container {
  background-color: initial;
}
html[data-darkmode="1"] .dialogFooterToolbar et2-button::part(base):not(:hover),
.sl-theme-dark .dialogFooterToolbar et2-button::part(base):not(:hover),
html[data-darkmode="1"] et2-dialog et2-button[variant='default'][slot='footer']::part(base):not(:hover),
.sl-theme-dark et2-dialog et2-button[variant='default'][slot='footer']::part(base):not(:hover) {
  background-color: var(--sl-input-background-color);
}
html[data-darkmode="1"] .nextmatch_sortheader,
.sl-theme-dark .nextmatch_sortheader {
  color: #96bcd9;
}
/** End theme customisations **/
html,
body {
  width: 100vw;
  height: 100vh;
  overflow: clip;
  padding: 0px;
  margin: 0px;
  /** Messages **/
  /** end messages **/
}
html .sl-toast-stack,
body .sl-toast-stack {
  top: auto;
  bottom: 0px;
}
html .sl-toast-stack sl-alert et2-checkbox,
body .sl-toast-stack sl-alert et2-checkbox {
  padding-top: var(--sl-spacing-large);
}
html #egw_message,
body #egw_message {
  display: none;
}
.egw_menu::part(popup) {
  z-index: var(--sl-z-index-dropdown);
}
egw-framework#egw_fw_basecontainer {
  --icon-size: 32px;
  --sl-tooltip-arrow-size: 0;
  /* Internals */
  /* Content slotted inside */
}
egw-framework#egw_fw_basecontainer::part(status-split) {
  /* This limits the max size of the status panel */
  --max: 32px;
}
egw-framework#egw_fw_basecontainer::part(header) {
  --icon-size: 32px;
  --tab-icon-size: var(--icon-size);
  --tab-icon-size-active: 40px;
  color: var(--primary-background-color);
  gap: var(--sl-spacing-medium);
  font-size: var(--icon-size);
}
egw-framework#egw_fw_basecontainer [slot="logo"] img {
  max-width: 220px;
  max-height: var(--icon-size);
  display: block;
  text-align: center;
}
egw-framework#egw_fw_basecontainer sl-icon-button[slot="header"],
egw-framework#egw_fw_basecontainer et2-image[slot="header"] {
  font-size: var(--icon-size);
  color: inherit;
}
egw-framework#egw_fw_basecontainer div#egw_fw_toggler {
  position: initial;
  display: none;
}
egw-framework#egw_fw_basecontainer #egw_fw_topmenu_info_items {
  position: relative;
  order: 99;
  margin-left: auto;
  display: flex;
}
egw-framework#egw_fw_basecontainer #egw_fw_topmenu_info_items .topmenu_info_item {
  min-width: 1em;
  min-height: 1em;
}
egw-framework#egw_fw_basecontainer div#egw_fw_sidebar_r {
  position: initial;
  top: initial;
}
egw-framework#egw_fw_basecontainer div#egw_fw_sidebar_r et2-avatar,
egw-framework#egw_fw_basecontainer div#egw_fw_sidebar_r et2-lavatar {
  --size: 26px;
}
egw-framework#egw_fw_basecontainer .egw_fw_ui_sidemenu_entry_header {
  display: flex;
  gap: var(--sl-spacing-medium);
  padding-left: 1em;
}
/*** HEADER ***/
#egw_fw_topmenu_info_items {
  display: flex;
  flex-direction: row-reverse;
}
#egw_fw_topmenu_info_items > * {
  border: none;
  background: transparent;
}
#egw_fw_topmenu_info_items et2-avatar {
  --size: var(--icon-size);
}
#egw_fw_topmenu_info_items et2-avatar::part(base) {
  vertical-align: initial;
}
#egw_fw_topmenu_info_items .topmenu_info_item {
  height: var(--icon-size);
  width: var(--icon-size);
  display: inline-block;
  padding-left: 0px;
  background-size: 20px;
  background-position: center center;
  background-repeat: no-repeat;
  cursor: pointer;
}
#egw_fw_topmenu_info_items .topmenu_info_item:hover {
  background-color: var(--sl-input-background-color-hover);
}
#egw_fw_topmenu_info_items #topmenu_info_timer {
  order: 1;
  position: relative;
  display: flex;
  align-items: center;
  padding: 0px;
}
#egw_fw_topmenu_info_items #topmenu_info_timer #topmenu_timer {
  display: block;
  width: 100%;
  z-index: 2;
}
#egw_fw_topmenu_info_items #topmenu_info_timer:hover {
  cursor: pointer;
}
#egw_fw_topmenu_info_items #topmenu_info_timer:before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: url(../../timesheet/templates/default/images/navbar.svg);
  background-repeat: no-repeat;
  background-size: 32px;
  background-position: center center;
  filter: opacity(0.3);
}
#egw_fw_topmenu_info_items #topmenu_info_quick_add {
  position: relative;
}
#egw_fw_topmenu_info_items #topmenu_info_quick_add span#quick_add {
  display: block;
  background-image: url(../../api/templates/default/images/add.svg);
  background-repeat: no-repeat;
  background-size: 24px;
  background-position: center;
  width: 100%;
  height: 100%;
  padding-right: 3px;
}
#egw_fw_topmenu_info_items #topmenu_info_quick_add span#quick_add:before {
  content: " ";
  font-size: 2em;
  line-height: 0.6em;
  background-color: white;
}
#egw_fw_topmenu_info_items #topmenu_info_quick_add #quick_add_selectbox {
  height: 0px;
  display: inline-block;
  text-align: initial;
}
#egw_fw_topmenu_info_items #topmenu_info_quick_add #quick_add_selectbox sl-option {
  white-space: nowrap;
}
#egw_fw_topmenu_info_items #topmenu_info_quick_add #quick_add_selectbox::part(emptyLabel) {
  /* do NOT show empty label, required for clearing value */
  display: none;
}
#egw_fw_topmenu_info_items #topmenu_info_quick_add #quick_add_selectbox::part(form-control-input),
#egw_fw_topmenu_info_items #topmenu_info_quick_add #timer_selectbox::part(form-control-input) {
  border: none !important;
}
#egw_fw_topmenu_info_items #topmenu_info_quick_add #quick_add_selectbox::part(form-control),
#egw_fw_topmenu_info_items #topmenu_info_quick_add #timer_selectbox::part(form-control) {
  margin-left: -3em;
}
#egw_fw_topmenu_info_items #topmenu_info_quick_add #quick_add_selectbox::part(listbox),
#egw_fw_topmenu_info_items #topmenu_info_quick_add #timer_selectbox::part(menu) {
  max-height: 60vh;
}
#egw_fw_topmenu_info_items #topmenu_info_quick_add #quick_add_selectbox {
  height: 0px;
  overflow: hidden;
}
#egw_fw_topmenu_info_items #topmenu_info_quick_add #quick_add_selectbox::part(combobox) {
  visibility: hidden;
}
#egw_fw_topmenu_info_items #topmenu_info_user_avatar sl-menu-item et2-image {
  width: 1em;
}
#egw_fw_topmenu_info_items button#topmenu_info_search {
  background-image: url(../../api/templates/default/images/topmenu_items/search.svg);
}
#topmenu_info_print_title {
  background-image: url(../../../api/templates/default/images/print.svg);
}
#topmenu_info_print_title span {
  width: 45px;
  height: 45px;
  display: inline-block;
}
/*** END HEADER ***/
/*** APPLICATION ***/
egw-app::part(name) {
  display: flex;
  align-items: center;
  text-wrap: nowrap;
}
egw-app::part(content) {
  flex-direction: column;
  overflow-y: hidden;
}
egw-app > div[id] > div {
  height: 100%;
}
/* Individual application colors, should go in each app's CSS */
body,
:root {
  --addressbook-color: #003366;
  --admin-color: #333333;
  --bookmarks-color: #CC6633;
  --calendar-color: #CC0033;
  --filemanager-color: #ff9933;
  --infolog-color: #660033;
  --mail-color: #006699;
  --projectmanager-color: #669999;
  --resources-color: #003333;
  --timesheet-color: #330066;
  --tracker-color: #009966;
  --wiki-color: #797979;
  --ranking-color: #404040;
  --default-color: #797979;
  --kanban-color: #4663c8;
}
body egw-app[name="addressbook"],
:root egw-app[name="addressbook"] {
  --application-color: var(--addressbook-color);
}
body egw-app[name="admin"],
:root egw-app[name="admin"] {
  --application-color: var(--admin-color);
}
body egw-app[name="bookmarks"],
:root egw-app[name="bookmarks"] {
  --application-color: var(--bookmarks-color);
}
body egw-app[name="calendar"],
:root egw-app[name="calendar"] {
  --application-color: var(--calendar-color);
}
body egw-app[name="filemanager"],
:root egw-app[name="filemanager"] {
  --application-color: var(--filemanager-color);
}
body egw-app[name="infolog"],
:root egw-app[name="infolog"] {
  --application-color: var(--infolog-color);
}
body egw-app[name="mail"],
:root egw-app[name="mail"] {
  --application-color: var(--mail-color);
}
body egw-app[name="projectmanager"],
:root egw-app[name="projectmanager"] {
  --application-color: var(--projectmanager-color);
}
body egw-app[name="resources"],
:root egw-app[name="resources"] {
  --application-color: var(--resources-color);
}
body egw-app[name="timesheet"],
:root egw-app[name="timesheet"] {
  --application-color: var(--timesheet-color);
}
body egw-app[name="tracker"],
:root egw-app[name="tracker"] {
  --application-color: var(--tracker-color);
}
body egw-app[name="wiki"],
:root egw-app[name="wiki"] {
  --application-color: var(--wiki-color);
}
body egw-app[name="ranking"],
:root egw-app[name="ranking"] {
  --application-color: var(--ranking-color);
}
/*** END APPLICATION ***/
/*** WIDGETS ***/
/* This should mostly go away with webcomponents */
/* Get nextmatch sizing more nicely without messing with dynheight */
div.et2_nextmatch {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  height: 100%;
  width: 100%;
  overflow: hidden;
}
div.et2_nextmatch > div:not(:first-child) {
  flex: 1 1 100%;
  max-height: 100%;
}
div.et2_nextmatch .egwGridView_outer {
  height: 100%;
  border-collapse: collapse;
}
div.et2_nextmatch .egwGridView_outer thead > tr {
  background-color: var(--sl-color-neutral-50);
  border-bottom: var(--sl-panel-border-width) solid var(--sl-color-neutral-200);
}
div.et2_nextmatch .egwGridView_outer thead > tr th {
  border-right: var(--sl-panel-border-width) solid var(--sl-color-neutral-200);
}
div.et2_nextmatch .egwGridView_outer thead > tr th div.innerContainer {
  max-height: 10em;
  overflow-x: hidden;
  overflow-y: auto;
}
div.et2_nextmatch .egwGridView_outer thead > tr th.optcol span.selectcols {
  height: 9px;
  padding: 4px 14px 0 2px;
  margin-top: 4px;
  background-image: url(../../api/templates/default/images/selectcols.svg);
  background-repeat: no-repeat;
  background-size: 10px 10px;
  display: inline-block;
  background-position: top;
}
div.et2_nextmatch .egwGridView_outer .egwGridView_scrollarea {
  overflow-x: hidden;
  overflow-y: auto;
}
div.et2_nextmatch .egwGridView_outer .egwGridView_scrollarea table {
  border-collapse: collapse;
}
div.et2_nextmatch .egwGridView_outer .egwGridView_scrollarea table tr {
  border-bottom: var(--sl-panel-border-width) solid var(--sl-color-neutral-200);
}
div.et2_nextmatch .egwGridView_outer .egwGridView_scrollarea table tr.selected {
  background-color: var(--highlight-background-color);
}
/*** END WIDGETS ***/