mirror of
https://github.com/EGroupware/egroupware.git
synced 2024-11-21 23:43:17 +01:00
WIP of better UI
This commit is contained in:
parent
d521d2aa24
commit
e1a87caf6c
@ -83,7 +83,7 @@ export const ButtonMixin = <T extends Constructor>(superclass : T) => class exte
|
||||
}
|
||||
/* Make hover border match other widgets (select) */
|
||||
.button--standard.button--default:hover:not(.button--disabled) {
|
||||
background-color: var(--sl-input-background-color-hover);
|
||||
background-color: var(--sl-color-gray-100);
|
||||
border-color: var(--sl-input-border-color-hover);
|
||||
color: var(--sl-input-color-hover);
|
||||
}
|
||||
|
@ -57,7 +57,7 @@ export class Et2Favorites extends Et2DropdownButton implements et2_INextmatchHea
|
||||
et2-image {
|
||||
height: 2ex;
|
||||
padding: 0px;
|
||||
margin-top: -5px;
|
||||
margin-top: -13px;
|
||||
vertical-align: middle;
|
||||
}
|
||||
et2-image[src="trash"] {
|
||||
|
@ -13,7 +13,9 @@ export class Et2Tab extends Et2Widget(SlTab)
|
||||
css`
|
||||
.tab {
|
||||
font-size: var(--sl-size-x-small);
|
||||
}
|
||||
}
|
||||
.tab.tab--active:not(.tab--disabled) {color:var(--sl-color-gray-800)}
|
||||
.tab:hover:not(.tab--disabled) {color:var(--sl-color-gray-800)}
|
||||
`
|
||||
];
|
||||
}
|
||||
|
@ -39,10 +39,10 @@ export default [sl_css, css`
|
||||
:root,
|
||||
:host,
|
||||
.sl-theme-light {
|
||||
--sl-font-size-medium: 11px;
|
||||
--sl-font-size-medium: 12px;
|
||||
|
||||
--sl-input-height-small: 18px;
|
||||
--sl-input-height-medium: 24px;
|
||||
--sl-input-height-small: 24px;
|
||||
--sl-input-height-medium: 32px;
|
||||
|
||||
--sl-spacing-small: 0.1rem;
|
||||
--sl-spacing-medium: 0.5rem;
|
||||
|
@ -2194,7 +2194,6 @@ lion-validation-feedback[type] {
|
||||
|
||||
.nextmatch_header .header_count {
|
||||
padding: 0px 10px;
|
||||
height: 22px;
|
||||
border: 1px solid rgb(212, 212, 216); /* --sl-input-border-color */
|
||||
text-align: center;
|
||||
border-radius: 3px;
|
||||
@ -2205,7 +2204,7 @@ lion-validation-feedback[type] {
|
||||
|
||||
.nextmatch_header .header_count span {
|
||||
position: relative;
|
||||
top: 4px;
|
||||
top: 8px;
|
||||
font-size: 11px;
|
||||
color: gray;
|
||||
}
|
||||
@ -2536,7 +2535,6 @@ div.et2_progress {
|
||||
background-color: white;
|
||||
width: 30px;
|
||||
padding: 1px;
|
||||
margin: 2px;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
@ -2810,7 +2808,7 @@ div.et2_toolbar.ui-widget-header {
|
||||
.et2_toolbar_more summary.ui-toolbar-menulistHeader.list_header-short {
|
||||
background-image: url(images/dots.svg);
|
||||
background-size: 16px;
|
||||
height: 24px;
|
||||
height: 32px;
|
||||
width: 20px;
|
||||
margin-top: 0px;
|
||||
background-repeat: no-repeat;
|
||||
@ -2821,7 +2819,7 @@ div.et2_toolbar.ui-widget-header {
|
||||
.et2_toolbar_more summary.ui-toolbar-menulistHeader.list_header-short {
|
||||
padding: 0px !important;
|
||||
width: 40px;
|
||||
height: 24px;
|
||||
height: 32px;
|
||||
margin-top: 0px;
|
||||
}
|
||||
|
||||
@ -2889,7 +2887,7 @@ div.et2_toolbar.ui-widget-header {
|
||||
.et2_toolbar .et2_toolbar_actionlist et2-button,
|
||||
.et2_toolbar .et2_toolbar_actionlist et2-switch {
|
||||
margin-right: 1ex;
|
||||
min-width: 24px;
|
||||
min-width: 32px;
|
||||
}
|
||||
.et2_toolbar .ui-toolbar-menulist > *:hover{
|
||||
outline: none;
|
||||
@ -2935,8 +2933,6 @@ et2-button.transparent-button::part(container) {
|
||||
.nextmatch_header_row button,
|
||||
.et2_toolbar div.et2_progress,
|
||||
.nextmatch_header_row div.et2_progress {
|
||||
margin: 1px 4px 1px 0;
|
||||
height: 24px;
|
||||
border-radius: 3px;
|
||||
background-color: #fafafa;
|
||||
border: 1px solid silver;
|
||||
@ -2944,13 +2940,10 @@ et2-button.transparent-button::part(container) {
|
||||
|
||||
.et2_toolbar div.et2_progress, .nextmatch_header_row div.et2_progress {
|
||||
padding: 0;
|
||||
height: 22px;
|
||||
}
|
||||
|
||||
.et2_toolbar .et2_progress > div, .nextmatch_header_row .et2_progress > div {
|
||||
margin: 2px;
|
||||
border-radius: 3px;
|
||||
height: 18px;
|
||||
}
|
||||
|
||||
/**
|
||||
@ -3198,7 +3191,6 @@ div.et2_toolbar_more h.ui-accordion-header {
|
||||
|
||||
.et2_toolbar_actionlist {
|
||||
float: left;
|
||||
height: 24px;
|
||||
white-space: nowrap;
|
||||
display: flex;
|
||||
}
|
||||
@ -3741,9 +3733,10 @@ td.avatar {
|
||||
|
||||
|
||||
/*Dialog headers styling*/
|
||||
.popupMainDiv table.et2_grid > tbody > tr > td,
|
||||
tr.dialogHeader td, tr.dialogHeader2 td, tr.dialogHeader3 td, tr.dialogHeader4 td,
|
||||
tr.dialogOperators td, .dialogFooterToolbar {
|
||||
padding: 5px 0 5px 3px;
|
||||
padding: 5px 0 5px 0px;
|
||||
vertical-align: middle;
|
||||
}
|
||||
.dialogFooterToolbar td {
|
||||
|
@ -214,7 +214,7 @@ div.calendar_conflicts {
|
||||
|
||||
/* Toolbar */
|
||||
#calendar-toolbar {
|
||||
height: 30px;
|
||||
height: 3.6em;
|
||||
margin-top: 0.3em;
|
||||
}
|
||||
#calendar-toolbar > div {
|
||||
@ -1566,7 +1566,6 @@ img.calendar_print_button, img.calendar_print_appicon {
|
||||
#calendar-toolbar_toolbar et2-switch {
|
||||
height: var(--height);
|
||||
display: inline-flex;
|
||||
width: var(--width);
|
||||
}
|
||||
|
||||
#calendar-toolbar_toolbar span[data-group="integration"] > et2-switch,
|
||||
@ -1576,7 +1575,6 @@ img.calendar_print_button, img.calendar_print_appicon {
|
||||
background-repeat: no-repeat;
|
||||
background-position: center;
|
||||
filter: grayscale(1) contrast(0.9999) opacity(0.7);
|
||||
width: 24px;
|
||||
}
|
||||
et2-switch#calendar-toolbar_toolbar-weekend {
|
||||
background-image: none !important;
|
||||
@ -1597,7 +1595,7 @@ et2-switch#calendar-toolbar_toolbar-weekend {
|
||||
visibility: hidden;
|
||||
}
|
||||
#calendar-toolbar_toolbar et2-switch {
|
||||
height: 24px;
|
||||
height: 32px;
|
||||
display: inline-block;
|
||||
vertical-align: top;
|
||||
border: 1px solid silver;
|
||||
|
@ -226,7 +226,8 @@ div.calendar_conflicts {
|
||||
}
|
||||
/* Toolbar */
|
||||
#calendar-toolbar {
|
||||
height: 30px;
|
||||
height: 3.6em;
|
||||
margin-top: 0.3em;
|
||||
}
|
||||
#calendar-toolbar > div {
|
||||
display: flex;
|
||||
@ -1533,7 +1534,6 @@ img.calendar_print_appicon {
|
||||
#calendar-toolbar_toolbar et2-switch {
|
||||
height: var(--height);
|
||||
display: inline-flex;
|
||||
width: var(--width);
|
||||
}
|
||||
#calendar-toolbar_toolbar span[data-group="integration"] > et2-switch,
|
||||
#toolbar-menulist et2-switch[id^="calendar-toolbar_toolbar-integration"],
|
||||
@ -1542,14 +1542,15 @@ img.calendar_print_appicon {
|
||||
background-repeat: no-repeat;
|
||||
background-position: center;
|
||||
filter: grayscale(1) contrast(0.9999) opacity(0.7);
|
||||
width: 24px;
|
||||
}
|
||||
et2-switch#calendar-toolbar_toolbar-weekend {
|
||||
background-image: none !important;
|
||||
}
|
||||
#calendar-toolbar_toolbar span[data-group="integration"] > et2-switch[checked],
|
||||
#toolbar-menulist et2-switch[id^="calendar-toolbar_toolbar-integration"][checked],
|
||||
#toolbar-menulist et2-switch[id^="calendar-toolbar_toolbar-video_toggle"][checked] {
|
||||
filter: none;
|
||||
box-shadow: inset 1px 1px 1px 1px gray !important;
|
||||
width: var(--width);
|
||||
}
|
||||
#calendar-toolbar_toolbar span[data-group="integration"] > et2-switch span.label,
|
||||
#toolbar-menulist et2-switch[id^="calendar-toolbar_toolbar-video_toggle"] span.label,
|
||||
@ -1561,7 +1562,7 @@ img.calendar_print_appicon {
|
||||
visibility: hidden;
|
||||
}
|
||||
#calendar-toolbar_toolbar et2-switch {
|
||||
height: 24px;
|
||||
height: 32px;
|
||||
display: inline-block;
|
||||
vertical-align: top;
|
||||
border: 1px solid silver;
|
||||
@ -1669,6 +1670,10 @@ img.calendar_print_appicon {
|
||||
#calendar-list_nm .nextmatch_header .search {
|
||||
display: none;
|
||||
}
|
||||
#calendar-edit_description {
|
||||
height: 70%;
|
||||
margin-bottom: 2em;
|
||||
}
|
||||
/*generell*/
|
||||
.egw_fw_content_browser_iframe img[src$="svg"] {
|
||||
background-color: #828282 !important;
|
||||
@ -2845,7 +2850,7 @@ div#calendar-container div.calendar table tbody tr.rowhilite td {
|
||||
background-size: 18px 18px;
|
||||
background-repeat: no-repeat;
|
||||
background-position: center;
|
||||
height: 21px;
|
||||
height: 28px;
|
||||
top: 0;
|
||||
filter: invert(1);
|
||||
}
|
||||
@ -2853,7 +2858,7 @@ div#calendar-container div.calendar table tbody tr.rowhilite td {
|
||||
background-size: 18px 18px;
|
||||
background-repeat: no-repeat;
|
||||
background-position: center;
|
||||
height: 21px;
|
||||
height: 28px;
|
||||
top: 0;
|
||||
}
|
||||
#calendar-toolbar_toolbar et2-switch .label span {
|
||||
@ -3001,3 +3006,4 @@ div#calendar-container div.calendar table tbody tr.rowhilite td {
|
||||
color: #707070;
|
||||
}
|
||||
}
|
||||
/*# sourceMappingURL=app.css.map */
|
@ -214,7 +214,7 @@ div.calendar_conflicts {
|
||||
}
|
||||
/* Toolbar */
|
||||
#calendar-toolbar {
|
||||
height: 30px;
|
||||
height: 3.6em;
|
||||
margin-top: 0.3em;
|
||||
}
|
||||
#calendar-toolbar > div {
|
||||
@ -1522,7 +1522,6 @@ img.calendar_print_appicon {
|
||||
#calendar-toolbar_toolbar et2-switch {
|
||||
height: var(--height);
|
||||
display: inline-flex;
|
||||
width: var(--width);
|
||||
}
|
||||
#calendar-toolbar_toolbar span[data-group="integration"] > et2-switch,
|
||||
#toolbar-menulist et2-switch[id^="calendar-toolbar_toolbar-integration"],
|
||||
@ -1531,7 +1530,6 @@ img.calendar_print_appicon {
|
||||
background-repeat: no-repeat;
|
||||
background-position: center;
|
||||
filter: grayscale(1) contrast(0.9999) opacity(0.7);
|
||||
width: 24px;
|
||||
}
|
||||
et2-switch#calendar-toolbar_toolbar-weekend {
|
||||
background-image: none !important;
|
||||
@ -1552,7 +1550,7 @@ et2-switch#calendar-toolbar_toolbar-weekend {
|
||||
visibility: hidden;
|
||||
}
|
||||
#calendar-toolbar_toolbar et2-switch {
|
||||
height: 24px;
|
||||
height: 32px;
|
||||
display: inline-block;
|
||||
vertical-align: top;
|
||||
border: 1px solid silver;
|
||||
@ -2840,7 +2838,7 @@ div#calendar-container div.calendar table tbody tr.rowhilite td {
|
||||
background-size: 18px 18px;
|
||||
background-repeat: no-repeat;
|
||||
background-position: center;
|
||||
height: 21px;
|
||||
height: 28px;
|
||||
top: 0;
|
||||
filter: invert(1);
|
||||
}
|
||||
@ -2848,7 +2846,7 @@ div#calendar-container div.calendar table tbody tr.rowhilite td {
|
||||
background-size: 18px 18px;
|
||||
background-repeat: no-repeat;
|
||||
background-position: center;
|
||||
height: 21px;
|
||||
height: 28px;
|
||||
top: 0;
|
||||
}
|
||||
#calendar-toolbar_toolbar et2-switch .label span {
|
||||
|
@ -1221,7 +1221,7 @@ div#calendar-container {
|
||||
background-size: 18px 18px;
|
||||
background-repeat: no-repeat;
|
||||
background-position: center;
|
||||
height: 21px;
|
||||
height: 28px;
|
||||
top:0;
|
||||
filter: invert(1);
|
||||
}
|
||||
@ -1229,7 +1229,7 @@ div#calendar-container {
|
||||
background-size: 18px 18px;
|
||||
background-repeat: no-repeat;
|
||||
background-position: center;
|
||||
height: 21px;
|
||||
height: 28px;
|
||||
top:0;
|
||||
}
|
||||
span {color:transparent !important;}
|
||||
|
@ -3288,7 +3288,7 @@ table.dialog-main-view {
|
||||
/********** Header Part ********************/
|
||||
.dialogHeader {
|
||||
color: #000000;
|
||||
border-bottom: 3px solid #696969;
|
||||
border-bottom: 2px solid #696969;
|
||||
}
|
||||
.dialogHeader input[type="radio"],
|
||||
.dialogHeader input.et2_radiobox {
|
||||
@ -3461,7 +3461,7 @@ div#etemplate\.tab_widget {
|
||||
/*##############################################*/
|
||||
.dialogFooterToolbar {
|
||||
background-color: transparent;
|
||||
border-top: 3px solid #696969;
|
||||
border-top: 2px solid #696969;
|
||||
/*.et2_selectbox {height: 32px; top: 0px; font-size: 1em;}*/
|
||||
}
|
||||
.dialogFooterToolbar td {
|
||||
|
@ -152,7 +152,7 @@ table.dialog-main-view {width: 100%;}
|
||||
/********** Header Part ********************/
|
||||
.dialogHeader {
|
||||
.color_100_gray;
|
||||
border-bottom: 3px solid @gray_60;
|
||||
border-bottom: 2px solid @gray_60;
|
||||
|
||||
// radio button
|
||||
input[type="radio"],
|
||||
@ -335,7 +335,7 @@ div#etemplate\.tab_widget {
|
||||
|
||||
.dialogFooterToolbar{
|
||||
background-color: transparent;
|
||||
border-top: 3px solid #696969;
|
||||
border-top: 2px solid #696969;
|
||||
td {
|
||||
padding: 5px 5px 0px 0px;
|
||||
}
|
||||
|
Loading…
Reference in New Issue
Block a user