mirror of
https://github.com/EGroupware/egroupware.git
synced 2024-11-21 15:33:23 +01:00
Fix mobile category colors in list, fix category-color class CSS variable
Added information about --category-color to the styles doc
This commit is contained in:
parent
74dd6de90b
commit
23fb0dcdd8
@ -45,7 +45,7 @@ foreach($categories as $cat)
|
|||||||
// Use slightly more specific selector that just class, to allow defaults
|
// Use slightly more specific selector that just class, to allow defaults
|
||||||
// if the category has no color
|
// if the category has no color
|
||||||
$content .= "/** {$cat['name']} **/\n/*webComponent*/\n";
|
$content .= "/** {$cat['name']} **/\n/*webComponent*/\n";
|
||||||
$content .= ":root,:host {--cat-{$cat['id']}-color: {$cat['data']['color']};}, :host.cat_{$cat['id']}, .cat_{$cat['id']} {--category-color: {$cat['data']['color']};} et2-select-cat > .cat_{$cat['id']} {--category-color: {$cat['data']['color']};} \n";
|
$content .= ":root,:host {--cat-{$cat['id']}-color: {$cat['data']['color']};} :host.cat_{$cat['id']}, .cat_{$cat['id']} {--category-color: {$cat['data']['color']};} et2-select-cat > .cat_{$cat['id']} {--category-color: {$cat['data']['color']};} \n";
|
||||||
$content .= "/*legacy*/\n.egwGridView_scrollarea tr.row_category.cat_{$cat['id']} > td:first-child, .select-cat li.cat_{$cat['id']}, .et2_selectbox ul.chzn-results li.cat_{$cat['id']}, .et2_selectbox ul.chzn-choices li.cat_{$cat['id']}, .nextmatch_header_row .et2_selectbox.select-cat.cat_{$cat['id']} a.chzn-single {border-left-color: {$cat['data']['color']};} .cat_{$cat['id']}.fullline_cat_bg, div.cat_{$cat['id']}, span.cat_{$cat['id']} { background-color: {$cat['data']['color']};} \n";
|
$content .= "/*legacy*/\n.egwGridView_scrollarea tr.row_category.cat_{$cat['id']} > td:first-child, .select-cat li.cat_{$cat['id']}, .et2_selectbox ul.chzn-results li.cat_{$cat['id']}, .et2_selectbox ul.chzn-choices li.cat_{$cat['id']}, .nextmatch_header_row .et2_selectbox.select-cat.cat_{$cat['id']} a.chzn-single {border-left-color: {$cat['data']['color']};} .cat_{$cat['id']}.fullline_cat_bg, div.cat_{$cat['id']}, span.cat_{$cat['id']} { background-color: {$cat['data']['color']};} \n";
|
||||||
}
|
}
|
||||||
if (!empty($cat['data']['icon']))
|
if (!empty($cat['data']['icon']))
|
||||||
|
@ -1,6 +1,6 @@
|
|||||||
# Styling
|
# Styling
|
||||||
|
|
||||||
Our overall styling is a combination of our site-wide style (pixelegg), etemplate2.css
|
Our overall styling is a combination of our site-wide style (pixelegg / kdots), etemplate2.css
|
||||||
and [Shoelace](https://shoelace.style/) styles
|
and [Shoelace](https://shoelace.style/) styles
|
||||||
|
|
||||||
Some handy excerpts:
|
Some handy excerpts:
|
||||||
@ -22,6 +22,10 @@ Some handy excerpts:
|
|||||||
--warning-color: rgba(255, 204, 0, .5);
|
--warning-color: rgba(255, 204, 0, .5);
|
||||||
--error-color: rgba(204, 0, 51, .5);
|
--error-color: rgba(204, 0, 51, .5);
|
||||||
|
|
||||||
|
/* Inside a node with a category class like "cat_<category ID>",
|
||||||
|
this is defined to the category's color
|
||||||
|
*/
|
||||||
|
--category-color: transparent
|
||||||
}
|
}
|
||||||
```
|
```
|
||||||
|
|
||||||
@ -78,6 +82,24 @@ These widgets are in an et2-vbox:
|
|||||||
| ![fixed label example #3](/assets/images/styling_et2-label-fixed_3.png) |
|
| ![fixed label example #3](/assets/images/styling_et2-label-fixed_3.png) |
|
||||||
| *--label_width CSS variable changed for more space* <br/>Note how 'Responsible' widget wraps |
|
| *--label_width CSS variable changed for more space* <br/>Note how 'Responsible' widget wraps |
|
||||||
|
|
||||||
|
### cat_\<ID>
|
||||||
|
|
||||||
|
Adding a category class sets the category color CSS variable `--category-color` to that category's color. Individual
|
||||||
|
category colors are also available with the `--cat-<ID>-color`.
|
||||||
|
Usually used in the nextmatch, this will put the colored category indicator on the row.
|
||||||
|
|
||||||
|
```
|
||||||
|
<styles>
|
||||||
|
tr {
|
||||||
|
border-left: 3px solid var(--category-color);
|
||||||
|
}
|
||||||
|
</styles>
|
||||||
|
...
|
||||||
|
<row class="cat_$row_cont[cat_id]">
|
||||||
|
// Row contents here
|
||||||
|
</row>
|
||||||
|
```
|
||||||
|
|
||||||
## Directly Customising Widgets
|
## Directly Customising Widgets
|
||||||
|
|
||||||
If you need to customise an individual widget further, you can
|
If you need to customise an individual widget further, you can
|
||||||
|
@ -1342,9 +1342,6 @@ option:checked {
|
|||||||
.ui-widget-header .ui-state-error-text {
|
.ui-widget-header .ui-state-error-text {
|
||||||
color: #FF0000;
|
color: #FF0000;
|
||||||
}
|
}
|
||||||
.drop-hover {
|
|
||||||
background-color: #FFDD73;
|
|
||||||
}
|
|
||||||
.ui-icon-close {
|
.ui-icon-close {
|
||||||
background-image: url("../../node_modules/bootstrap-icons/icons/x-square.svg");
|
background-image: url("../../node_modules/bootstrap-icons/icons/x-square.svg");
|
||||||
background-repeat: no-repeat;
|
background-repeat: no-repeat;
|
||||||
@ -6803,6 +6800,7 @@ table.egwGridView_grid img.et2_appicon {
|
|||||||
--sl-focus-ring-width: 2px;
|
--sl-focus-ring-width: 2px;
|
||||||
--sl-color-gray-150: hsl(240, 4.9%, 92.5%);
|
--sl-color-gray-150: hsl(240, 4.9%, 92.5%);
|
||||||
--track-width: 3px;
|
--track-width: 3px;
|
||||||
|
--et2-favorites-left: 0.4em;
|
||||||
}
|
}
|
||||||
.bi::before,
|
.bi::before,
|
||||||
[class^="bi-"]::before,
|
[class^="bi-"]::before,
|
||||||
@ -7081,7 +7079,11 @@ table.egwGridView_grid img.et2_appicon {
|
|||||||
border-top-color: #404040;
|
border-top-color: #404040;
|
||||||
border-top-width: 4px !important;
|
border-top-width: 4px !important;
|
||||||
}
|
}
|
||||||
#egw_fw_main #egw_fw_tabs .egw_fw_ui_tabs_header .egw_fw_ui_tab_header img.egw_fw_ui_tab_icon,
|
#egw_fw_main #egw_fw_tabs .egw_fw_ui_tabs_header .egw_fw_ui_tab_header img.egw_fw_ui_tab_icon {
|
||||||
|
filter: none;
|
||||||
|
width: calc(1em + 2px) !important;
|
||||||
|
height: calc(1em + 2px) !important;
|
||||||
|
}
|
||||||
.standartTreeImage {
|
.standartTreeImage {
|
||||||
filter: none;
|
filter: none;
|
||||||
}
|
}
|
||||||
@ -7148,6 +7150,11 @@ img.et2_button_icon[src*="svg"]:hover {
|
|||||||
::-ms-input-placeholder {
|
::-ms-input-placeholder {
|
||||||
color: #666666;
|
color: #666666;
|
||||||
}
|
}
|
||||||
|
.et2_toolbar et2-button:not(.et2_toolbar_onlyCaption):not(.et2_toolbar_hasCaption)::part(base) {
|
||||||
|
justify-content: center;
|
||||||
|
--et2-button-image-padding-left: 0;
|
||||||
|
padding-inline-start: 0;
|
||||||
|
}
|
||||||
@keyframes fw-firstload {
|
@keyframes fw-firstload {
|
||||||
0%,
|
0%,
|
||||||
20%,
|
20%,
|
||||||
@ -7170,6 +7177,9 @@ img.et2_button_icon[src*="svg"]:hover {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
@media all {
|
@media all {
|
||||||
|
:host {
|
||||||
|
--et2-favorites-left: 0.7em;
|
||||||
|
}
|
||||||
body {
|
body {
|
||||||
background-color: transparent;
|
background-color: transparent;
|
||||||
/*BOF close/back button styling*/
|
/*BOF close/back button styling*/
|
||||||
@ -7206,10 +7216,11 @@ img.et2_button_icon[src*="svg"]:hover {
|
|||||||
body table.egwGridView_outer tbody tr td .mobile_cat_col {
|
body table.egwGridView_outer tbody tr td .mobile_cat_col {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
min-height: 100%;
|
min-height: 100%;
|
||||||
bottom: 0;
|
|
||||||
top: 0;
|
top: 0;
|
||||||
|
left: 0px;
|
||||||
width: 10px;
|
width: 10px;
|
||||||
display: block;
|
display: block;
|
||||||
|
background-color: var(--category-color);
|
||||||
}
|
}
|
||||||
body table.egwGridView_outer tbody tr td span.cat_.mobile_cat_col {
|
body table.egwGridView_outer tbody tr td span.cat_.mobile_cat_col {
|
||||||
background: #F5F5F5;
|
background: #F5F5F5;
|
||||||
|
@ -78,11 +78,11 @@
|
|||||||
.mobile_cat_col {
|
.mobile_cat_col {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
min-height: 100%;
|
min-height: 100%;
|
||||||
bottom:0;
|
|
||||||
top:0;
|
top:0;
|
||||||
|
left: 0px;
|
||||||
width:10px;
|
width:10px;
|
||||||
display: block;
|
display: block;
|
||||||
|
background-color: var(--category-color);
|
||||||
}
|
}
|
||||||
span.cat_.mobile_cat_col {
|
span.cat_.mobile_cat_col {
|
||||||
background: #F5F5F5;
|
background: #F5F5F5;
|
||||||
|
@ -7023,10 +7023,11 @@ img.et2_button_icon[src*="svg"]:hover {
|
|||||||
body table.egwGridView_outer tbody tr td .mobile_cat_col {
|
body table.egwGridView_outer tbody tr td .mobile_cat_col {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
min-height: 100%;
|
min-height: 100%;
|
||||||
bottom: 0;
|
|
||||||
top: 0;
|
top: 0;
|
||||||
|
left: 0px;
|
||||||
width: 10px;
|
width: 10px;
|
||||||
display: block;
|
display: block;
|
||||||
|
background-color: var(--category-color);
|
||||||
}
|
}
|
||||||
body table.egwGridView_outer tbody tr td span.cat_.mobile_cat_col {
|
body table.egwGridView_outer tbody tr td span.cat_.mobile_cat_col {
|
||||||
background: #F5F5F5;
|
background: #F5F5F5;
|
||||||
|
Loading…
Reference in New Issue
Block a user