mirror of
https://github.com/EGroupware/egroupware.git
synced 2024-11-24 08:53:37 +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
|
||||
// if the category has no color
|
||||
$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";
|
||||
}
|
||||
if (!empty($cat['data']['icon']))
|
||||
|
@ -1,6 +1,6 @@
|
||||
# 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
|
||||
|
||||
Some handy excerpts:
|
||||
@ -22,6 +22,10 @@ Some handy excerpts:
|
||||
--warning-color: rgba(255, 204, 0, .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) |
|
||||
| *--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
|
||||
|
||||
If you need to customise an individual widget further, you can
|
||||
|
@ -1342,9 +1342,6 @@ option:checked {
|
||||
.ui-widget-header .ui-state-error-text {
|
||||
color: #FF0000;
|
||||
}
|
||||
.drop-hover {
|
||||
background-color: #FFDD73;
|
||||
}
|
||||
.ui-icon-close {
|
||||
background-image: url("../../node_modules/bootstrap-icons/icons/x-square.svg");
|
||||
background-repeat: no-repeat;
|
||||
@ -6803,6 +6800,7 @@ table.egwGridView_grid img.et2_appicon {
|
||||
--sl-focus-ring-width: 2px;
|
||||
--sl-color-gray-150: hsl(240, 4.9%, 92.5%);
|
||||
--track-width: 3px;
|
||||
--et2-favorites-left: 0.4em;
|
||||
}
|
||||
.bi::before,
|
||||
[class^="bi-"]::before,
|
||||
@ -7081,7 +7079,11 @@ table.egwGridView_grid img.et2_appicon {
|
||||
border-top-color: #404040;
|
||||
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 {
|
||||
filter: none;
|
||||
}
|
||||
@ -7148,6 +7150,11 @@ img.et2_button_icon[src*="svg"]:hover {
|
||||
::-ms-input-placeholder {
|
||||
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 {
|
||||
0%,
|
||||
20%,
|
||||
@ -7170,6 +7177,9 @@ img.et2_button_icon[src*="svg"]:hover {
|
||||
}
|
||||
}
|
||||
@media all {
|
||||
:host {
|
||||
--et2-favorites-left: 0.7em;
|
||||
}
|
||||
body {
|
||||
background-color: transparent;
|
||||
/*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 {
|
||||
position: absolute;
|
||||
min-height: 100%;
|
||||
bottom: 0;
|
||||
top: 0;
|
||||
left: 0px;
|
||||
width: 10px;
|
||||
display: block;
|
||||
background-color: var(--category-color);
|
||||
}
|
||||
body table.egwGridView_outer tbody tr td span.cat_.mobile_cat_col {
|
||||
background: #F5F5F5;
|
||||
|
@ -78,11 +78,11 @@
|
||||
.mobile_cat_col {
|
||||
position: absolute;
|
||||
min-height: 100%;
|
||||
bottom:0;
|
||||
top:0;
|
||||
left: 0px;
|
||||
width:10px;
|
||||
display: block;
|
||||
|
||||
background-color: var(--category-color);
|
||||
}
|
||||
span.cat_.mobile_cat_col {
|
||||
background: #F5F5F5;
|
||||
|
@ -7023,10 +7023,11 @@ img.et2_button_icon[src*="svg"]:hover {
|
||||
body table.egwGridView_outer tbody tr td .mobile_cat_col {
|
||||
position: absolute;
|
||||
min-height: 100%;
|
||||
bottom: 0;
|
||||
top: 0;
|
||||
left: 0px;
|
||||
width: 10px;
|
||||
display: block;
|
||||
background-color: var(--category-color);
|
||||
}
|
||||
body table.egwGridView_outer tbody tr td span.cat_.mobile_cat_col {
|
||||
background: #F5F5F5;
|
||||
|
Loading…
Reference in New Issue
Block a user