egroupware_official/kdots/js/EgwFrameworkApp.styles.ts

267 lines
5.1 KiB
TypeScript
Raw Normal View History

2024-04-25 19:35:34 +02:00
import {css} from 'lit';
export default css`
/* Layout */
:host {
position: relative;
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
--application-color: var(--primary-background-color);
2024-04-25 19:35:34 +02:00
}
:host > * {
position: relative;
display: flex;
}
.egw_fw_app__name {
max-width: 20vw;
flex: 1 1 20vw;
}
.egw_fw_app__name h2 {
margin: 0;
margin-inline-start: var(--sl-spacing-medium);
font-size: 1em;
}
.egw_fw_app__header {
justify-content: flex-start;
align-items: center;
justify-items: stretch;
flex: 1 0 2em;
max-height: 3em;
background-color: var(--application-color, var(--primary-background-color));
2024-07-10 23:48:50 +02:00
color: var(--application-header-text-color, var(--sl-color-neutral-0));
font-size: 1.8em;
}
.egw_fw_app__header sl-icon-button::part(base), .egw_fw_app__header et2-button-icon {
font-size: inherit;
2024-07-10 23:48:50 +02:00
color: var(--application-header-text-color, var(--sl-color-neutral-0));
}
.egw_fw_app__header et2-button-icon {
margin: 0 var(--sl-spacing-medium);
}
.egw_fw_app__header sl-icon-button::part(base):hover, .egw_fw_app__header et2-button-icon::part(base):hover {
2024-07-10 23:48:50 +02:00
color: var(--application-header-text-color, var(--sl-color-neutral-0));
filter: brightness(70%);
}
.egw_fw_app__menu > div {
margin-left: var(--sl-spacing-medium);
margin-right: var(--sl-spacing-medium);
display: flex;
align-items: center;
}
.egw_fw_app__menu > div > sl-icon-button {
margin-left: var(--sl-spacing-medium);
margin-right: var(--sl-spacing-medium);
}
2024-04-30 22:21:35 +02:00
.egw_fw_app__outerSplit {
grid-column: start / end;
grid-row: start / end;
grid-template-rows: subgrid;
--min: var(--left-min, 0px);
--max: var(--left-max, 20%);
2024-04-30 22:21:35 +02:00
}
.egw_fw_app__innerSplit {
grid-template-rows: subgrid;
grid-column-end: -1;
grid-row: start / end;
--max: calc(100% - var(--right-min, 0px));
--min: calc(100% - var(--right-max, 50%));
}
.egw_fw_app__innerSplit.no-content {
--min: 100%;
2024-04-30 22:21:35 +02:00
}
sl-split-panel::part(divider) {
grid-row: start / end;
font-size: var(--sl-font-size-medium);
}
sl-split-panel > sl-icon {
position: absolute;
border-radius: var(--sl-border-radius-small);
background-color: var(--application-color);
color: var(--sl-color-neutral-0);
padding: 0.5rem 0.125rem;
z-index: var(--sl-z-index-drawer);
}
sl-split-panel.no-content {
--divider-width: 0px;
}
sl-split-panel.no-content::part(divider) {
display: none;
2024-04-30 22:21:35 +02:00
}
.egw_fw_app__aside {
2024-04-25 19:35:34 +02:00
overflow-x: hidden;
overflow-y: auto;
display: grid;
grid-template-rows: subgrid;
grid-row: start / end;
}
.egw_fw_app__aside_header {
grid-row: sub-header / main;
}
.egw_fw_app__aside_content {
height: 100%;
grid-row: main / footer;
}
.egw_fw_app__aside_footer {
grid-row: footer / end;
}
2024-04-25 19:35:34 +02:00
.egw_fw_app__main {
flex: 1 1 100%;
display: grid;
align-items: stretch;
justify-content: stretch;
2024-04-25 19:35:34 +02:00
overflow: hidden;
}
.egw_fw_app__header {
grid-row: sub-header / main;
2024-04-25 19:35:34 +02:00
}
.egw_fw_app__main_content {
grid-row: main / footer;
}
2024-04-25 19:35:34 +02:00
.egw_fw_app__footer {
grid-row: footer / end;
2024-04-25 19:35:34 +02:00
}
2024-04-30 22:21:35 +02:00
.header, .footer {
overflow: hidden;
}
2024-05-08 21:46:09 +02:00
.egw_fw_app__loading {
text-align: center;
2024-07-09 19:43:45 +02:00
margin: auto;
2024-05-08 21:46:09 +02:00
sl-spinner {
--track-width: 1rem;
font-size: 10rem;
--indicator-color: var(--application-color, var(--primary-background-color, var(--sl-color-primary-600)));
}
}
@media (min-width: 600px) {
.egw_fw_app__main {
2024-04-30 22:21:35 +02:00
grid-template-columns: [start left] min-content [ main] 1fr [right] min-content [end];
grid-template-rows: [start sub-header] fit-content(2em) [main] auto [footer] fit-content(4em) [end];
}
.egw_fw_app__aside {
overflow-y: hidden;
}
.egw_fw_app__aside_content, .egw_fw_app__main_content {
overflow-x: hidden;
overflow-y: auto;
display: flex;
flex-direction: column;
}
.egw_fw_app__main_content {
flex-direction: column;
align-items: stretch;
}
::slotted(*) {
flex: 1 1 auto;
2024-04-25 19:35:34 +02:00
}
::slotted(iframe) {
width: 100%;
}
2024-04-25 19:35:34 +02:00
}
@media (max-width: 599px) {
.egw_fw_app__main {
grid-template-columns: [start left main-start] fit-content(50%) [right] auto [main-end end];
grid-template-rows:
[start sub-header] fit-content(2em)
[main] auto
[aside-header] fit-content(2em)
[aside] min-content
[aside-footer] fit-content(4em)
[footer] fit-content(4em)
[end];
}
sl-split-panel {
display: contents
}
sl-split-panel::part(divider) {
display: none;
}
.egw_fw_app__header {
grid-column: start / end;
}
.egw_fw_app__main_content {
grid-row: main / aside-header;
grid-column: start / end;
}
.egw_fw_app__aside {
grid-row: aside-header / footer;
}
.egw_fw_app__aside_header {
grid-row: aside-header / aside;
}
.egw_fw_app__aside_content {
grid-row: aside / aside-footer;
}
.egw_fw_app__aside_footer {
grid-row: aside-footer / footer;
}
.egw_fw_app__footer {
grid-column: start / end;
2024-04-25 19:35:34 +02:00
}
}
/* End layout */
/* Styling */
.egw_fw_app__header sl-icon[name="three-dots-vertical"] {
padding: var(--sl-spacing-small);
}
sl-details.favorites::part(content) {
padding: 0px;
}
sl-details.favorites et2-favorites-menu::part(menu) {
border: none;
}
2024-04-25 19:35:34 +02:00
`