:root {
--icon-table-edit: url("data:image/svg+xml;charset=utf8,");
--icon-table-delete: url("data:image/svg+xml;charset=utf8,");
--icon-table-join: url("data:image/svg+xml;charset=utf8,");
--icon-table-view: url("data:image/svg+xml;charset=utf8,");
--icon-view-load: url("data:image/svg+xml;charset=utf8,");
--icon-view-cols: url("data:image/svg+xml;charset=utf8,");
--icon-page-frst: url("data:image/svg+xml;charset=utf8,");
--icon-page-prev: url("data:image/svg+xml;charset=utf8,");
--icon-page-next: url("data:image/svg+xml;charset=utf8,");
--icon-page-last: url("data:image/svg+xml;charset=utf8,");
--icon-view-load-h:url("data:image/svg+xml;charset=utf8,");
--icon-view-cols-h:url("data:image/svg+xml;charset=utf8,");
--icon-page-frst-h:url("data:image/svg+xml;charset=utf8,");
--icon-page-prev-h:url("data:image/svg+xml;charset=utf8,");
--icon-page-next-h:url("data:image/svg+xml;charset=utf8,");
--icon-page-last-h:url("data:image/svg+xml;charset=utf8,");
--icon-page-frst-d:url("data:image/svg+xml;charset=utf8,");
--icon-page-prev-d:url("data:image/svg+xml;charset=utf8,");
--icon-page-next-d:url("data:image/svg+xml;charset=utf8,");
--icon-page-last-d:url("data:image/svg+xml;charset=utf8,");
--icon-field-show: url("data:image/svg+xml;charset=utf8,");
--icon-field-hide: url("data:image/svg+xml;charset=utf8,");
--icon-sort-asc: url("data:image/svg+xml;charset=utf8,");
--icon-sort-desc: url("data:image/svg+xml;charset=utf8,");
--icon-sort-clear: url("data:image/svg+xml;charset=utf8,");
--icon-sort-asc-t: url("data:image/svg+xml;charset=utf8,");
--icon-sort-desc-t:url("data:image/svg+xml;charset=utf8,");
--icon-fltr-menu: url("data:image/svg+xml;charset=utf8,");
--icon-data-group: url("data:image/svg+xml;charset=utf8,");
--icon-data-text: url("data:image/svg+xml;charset=utf8,");
}
html[data-theme="dark"] {
--icon-table-edit: url("data:image/svg+xml;charset=utf8,");
--icon-table-delete: url("data:image/svg+xml;charset=utf8,");
--icon-table-join: url("data:image/svg+xml;charset=utf8,");
--icon-table-view: url("data:image/svg+xml;charset=utf8,");
--icon-view-load: url("data:image/svg+xml;charset=utf8,");
--icon-view-cols: url("data:image/svg+xml;charset=utf8,");
--icon-page-frst: url("data:image/svg+xml;charset=utf8,");
--icon-page-prev: url("data:image/svg+xml;charset=utf8,");
--icon-page-next: url("data:image/svg+xml;charset=utf8,");
--icon-page-last: url("data:image/svg+xml;charset=utf8,");
--icon-view-load-h:url("data:image/svg+xml;charset=utf8,");
--icon-view-cols-h:url("data:image/svg+xml;charset=utf8,");
--icon-page-frst-h:url("data:image/svg+xml;charset=utf8,");
--icon-page-prev-h:url("data:image/svg+xml;charset=utf8,");
--icon-page-next-h:url("data:image/svg+xml;charset=utf8,");
--icon-page-last-h:url("data:image/svg+xml;charset=utf8,");
--icon-page-frst-d:url("data:image/svg+xml;charset=utf8,");
--icon-page-prev-d:url("data:image/svg+xml;charset=utf8,");
--icon-page-next-d:url("data:image/svg+xml;charset=utf8,");
--icon-page-last-d:url("data:image/svg+xml;charset=utf8,");
--icon-sort-asc: url("data:image/svg+xml;charset=utf8,");
--icon-sort-desc: url("data:image/svg+xml;charset=utf8,");
--icon-sort-clear: url("data:image/svg+xml;charset=utf8,");
--icon-sort-asc-t: url("data:image/svg+xml;charset=utf8,");
--icon-sort-desc-t:url("data:image/svg+xml;charset=utf8,");
--icon-fltr-menu: url("data:image/svg+xml;charset=utf8,");
--icon-data-group: url("data:image/svg+xml;charset=utf8,");
--icon-data-text: url("data:image/svg+xml;charset=utf8,");
}
textarea[type="json"] {
display: none;
}
textarea.auto-grow {
width: 100%;
box-sizing: border-box;
resize: none;
min-height: 100px;
max-height: 300px;
line-height: 1.5;
transition: border-color 0.15s ease;
field-sizing: content;
}
.char-count {
font-size: 12px;
margin-top: 6px;
color: var(--color-secondary);
pointer-events: none;
background: transparent;
text-align: right;
}
.char-count.near-limit {
color: var(--c-amber);
}
.char-count.over-limit {
color: var(--c-coral);
font-weight: 600;
}
.feed-table-wrapper {
border: 1px solid var(--color-border);
border-radius: var(--radius-md);
}
.feed-table-wrapper table {
background-color: var(--color-surface);
border-radius: var(--radius-md);
border-collapse: separate; /* required for border-radius on cells to work with borders */
border-spacing: 0;
}
/* Bottom corners */
.feed-table-wrapper table tr:last-child td:first-child {
border-bottom-left-radius: var(--radius-md);
}
.feed-table-wrapper table td {
border-bottom: 1px solid var(--color-border);
}
/* remove the border on the very last row so you don't get
a double line with the table's own bottom edge */
.feed-table-wrapper table tr:last-child td {
border-bottom: none;
}
.feed-table tr th:first-of-type,
.feed-table tr td:first-of-type {
width: 1px;
}
.feed-header {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 12px;
gap: 14px;
flex-wrap: wrap;
}
.feed-button, .feed-table-button, .Feed-Btn-Tbl, .Feed-Btn-New, .Feed-Btn-Imp, .Feed-Btn-Exp, .Feed-Btn-Adm {
display: inline-flex;
align-items: center;
justify-content: center;
/*gap: 8px;*/
padding: 8px 14px;
border-radius: var(--radius-md);
/*font-size: 14px;*/
font-weight: 600;
transition: transform .1s ease, box-shadow .15s ease, opacity .15s ease;
}
.Feed-Btn-Tbl:empty {
padding: 8px;
}
.feed-button, .Feed-Btn-New, .Feed-Btn-Imp, .Feed-Btn-Exp, .Feed-Btn-Adm {
background-color: var(--color-primary);
color: var(--c-ink-soft);
background-size: 18px;
background-repeat: no-repeat;
background-position: 8px 50%;
/*height: 34px;*/
}
.feed-button {
background-image: var(--icon-table-edit);
padding-left: 34px;
}
.Feed-Btn-New::before {
content: "";
display: inline-block;
width: 18px;
height: 18px;
margin-left: -2px;
margin-right: 6px;
text-align: center;
vertical-align: middle;
background-color: currentColor;
-webkit-mask: var(--icon-edit) center / contain no-repeat;
mask: var(--icon-edit) center / contain no-repeat;
}
.Feed-Btn-Imp::before {
content: "";
display: inline-block;
width: 18px;
height: 18px;
margin-left: -2px;
margin-right: 6px;
text-align: center;
vertical-align: middle;
background-color: currentColor;
-webkit-mask: var(--icon-import) center / contain no-repeat;
mask: var(--icon-import) center / contain no-repeat;
}
.Feed-Btn-Exp::before {
content: "";
display: inline-block;
width: 18px;
height: 18px;
margin-left: -2px;
margin-right: 6px;
text-align: center;
vertical-align: middle;
background-color: currentColor;
-webkit-mask: var(--icon-import) center / contain no-repeat;
mask: var(--icon-import) center / contain no-repeat;
}
.Feed-Btn-Adm::before {
content: "";
display: inline-block;
width: 18px;
height: 18px;
margin-left: -2px;
margin-right: 6px;
text-align: center;
vertical-align: middle;
background-color: currentColor;
-webkit-mask: var(--icon-gear) center / contain no-repeat;
mask: var(--icon-gear) center / contain no-repeat;
}
.Feed-Btn-Tbl.update::before {
content: "";
display: inline-block;
width: 18px;
height: 18px;
text-align: center;
vertical-align: middle;
background-color: currentColor;
-webkit-mask: var(--icon-edit) center / contain no-repeat;
mask: var(--icon-edit) center / contain no-repeat;
}
.Feed-Btn-Tbl.delete::before {
content: "";
display: inline-block;
width: 18px;
height: 18px;
text-align: center;
vertical-align: middle;
background-color: currentColor;
-webkit-mask: var(--icon-delete) center / contain no-repeat;
mask: var(--icon-delete) center / contain no-repeat;
}
.Feed-Btn-Tbl.search::before {
content: "";
display: inline-block;
width: 18px;
height: 18px;
text-align: center;
vertical-align: middle;
background-color: currentColor;
-webkit-mask: var(--icon-view) center / contain no-repeat;
mask: var(--icon-view) center / contain no-repeat;
}
.feed-table-button, .Feed-Btn-Tbl {
background-color: var(--color-primary);
color: var(--c-ink-soft);
background-size: 18px;
background-repeat: no-repeat;
background-position: center;
height: 34px;
width: 34px;
}
.feed-table-button.update {
background-image: var(--icon-table-edit);
}
.feed-table-button.delete {
background-image: var(--icon-table-delete);
}
.feed-table-button.search {
background-image: var(--icon-table-view);
}
.feed-table-button:first-of-type, .Feed-Btn-Tbl:first-of-type {
border-top-left-radius: var(--radius-md);
border-bottom-left-radius: var(--radius-md);
border-top-right-radius: 0;
border-bottom-right-radius: 0;
}
.feed-table-button:last-of-type, .Feed-Btn-Tbl:last-of-type {
border-top-left-radius: 0;
border-bottom-left-radius: 0;
border-top-right-radius: var(--radius-md);
border-bottom-right-radius: var(--radius-md);
}
.feed-table-button:only-of-type, .Feed-Btn-Tbl:only-of-type {
border-top-left-radius: var(--radius-md);
border-bottom-left-radius: var(--radius-md);
border-top-right-radius: var(--radius-md);
border-bottom-right-radius: var(--radius-md);
}
.feed-button:hover, .feed-table-button:hover, .Feed-Btn-Tbl:hover, .Feed-Btn-New:hover, .Feed-Btn-Imp:hover, .Feed-Btn-Exp:hover, .Feed-Btn-Adm:hover {
/* transform: translateY(-1px); */
box-shadow: var(--shadow-sm);
background-color: var(--color-primary-hover);
}
.table-button {
min-width: 100px;
}
.feed-button-form {
padding: 8px 16px;
border-radius: var(--radius-md);
font-size: 14px;
font-weight: 600;
transition: transform .1s ease, box-shadow .15s ease, opacity .15s ease;
border: 0;
text-align: center;
cursor: pointer;
width:100%;
}
.feed-button-form.submit {
background-color: var(--color-primary);
color: var(--c-ink-soft);
}
.feed-button-form.submit:hover {
box-shadow: var(--shadow-sm);
background-color: var(--color-primary-hover);
color: var(--c-ink-soft);
transform: translateY(-1px);
}
.feed-button-form.cancel {
background-color: var(--c-slate);
color: var(--c-slate-soft);
}
.feed-button-form.cancel:hover {
box-shadow: var(--shadow-sm);
background-color:var(--c-slate-2);
color: var(--c-slate-soft);
transform: translateY(-1px);
}
.feed-list-toolbar {
display: flex;
align-items: center;
justify-content: space-between;
margin-top: 12px;
gap: 14px;
flex-wrap: wrap;
}
feed-control {
display:none;
}
feed-sql, feed-control {
padding: 12px;
background-color: var(--c-coral-2);
color: var(--c-coral-soft);
border-radius: var(--radius-md);
overflow-x: hidden;
}
.feed-dlg-header.dev{
padding:12px;
}
.PageText, .PagePage, .PageDate {
vertical-align: middle;
}
.PageFrst, .PagePrev, .PageNext, .PageLast, .feed-button-refresh, .feed-button-reorder,
.PageFrstDisabled, .PagePrevDisabled, .PageNextDisabled, .PageLastDisabled {
display: inline-block;
height: 24px;
width: 24px;
background-repeat: no-repeat;
background-position: center;
background-size: 20px;
vertical-align: middle;
border-radius: var(--radius-sm);
}
.feed-button-refresh {
background-image: var(--icon-view-load);
height: 28px;
width: 28px;
}
.feed-button-refresh:hover {
background-image: var(--icon-view-load-h);
background-color: var(--color-surface-elevated);
}
.feed-button-reorder {
height: 28px;
width: 28px;
background-image: var(--icon-view-cols);
}
.feed-button-reorder:hover {
background-image: var(--icon-view-cols-h);
background-color: var(--color-surface-elevated);
}
.PageFrst {
background-image: var(--icon-page-frst);
}
.PagePrev {
background-image: var(--icon-page-prev);
}
.PageNext {
background-image: var(--icon-page-next);
}
.PageLast {
background-image: var(--icon-page-last);
}
.PageFrstDisabled {
background-image: var(--icon-page-frst-d);
}
.PagePrevDisabled {
background-image: var(--icon-page-prev-d);
}
.PageNextDisabled {
background-image: var(--icon-page-next-d);
}
.PageLastDisabled {
background-image: var(--icon-page-last-d);
}
.PageFrst:hover {
background-image: var(--icon-page-frst-h);
background-color: var(--color-surface-elevated);
}
.PagePrev:hover {
background-image: var(--icon-page-prev-h);
background-color: var(--color-surface-elevated);
}
.PageNext:hover {
background-image: var(--icon-page-next-h);
background-color: var(--color-surface-elevated);
}
.PageLast:hover {
background-image: var(--icon-page-last-h);
background-color: var(--color-surface-elevated);
}
.PageDate label {
margin-right: 12px;
}
.PagePage label::after {
content: "Per Page";
margin-left: 6px;
margin-right: 6px;
}
.PagePage input {
background-color: var(--color-surface);
color: var(--color-text);
border: none;
font-size: 13px;
text-align: right;
}
.TblPaging {
margin-top: 12px;
margin-bottom: 12px;
font-size: 13.5px;
}
.feed-options {
display: inline-flex;
align-items: center;
gap: 12px;
margin-bottom: 12px;
width: 100%;
}
.feed-options:empty {
display: none;
}
.form-options {
text-align: center;
margin-top: 12px;
width: 100%;
}
.feed-footer {
display: inline-flex;
align-items: center;
gap: 12px;
margin-top: 12px;
width: 100%;
}
.feed-functions {
display: inline-flex;
align-items: center;
gap: 5px;
font-size: 13px;
margin-left: auto;
}
.feed-export {
display: inline-flex;
align-items: center;
font-size: 13px;
margin-left: auto;
}
.feed-paging {
display: inline-flex;
align-items: center;
gap: 2px;
background: var(--color-surface);
border: 1px solid var(--color-border);
border-radius: var(--radius-sm);
padding: 5px;
font-size: 13px;
}
.feed-version {
display: inline-flex;
align-items: center;
gap: 3px;
background: var(--color-surface-elevated);
border: 1px solid var(--color-border);
border-radius: var(--radius-sm);
padding: 3px;
font-size: 13px;
}
.feed-version input {
background: var(--color-surface-elevated);
color: var(--color-text);
font-size: 13px;
border: none;
cursor: pointer;
}
.feed-version .active input {
background-color: var(--color-surface);
}
.feed-version input[type="radio"] {
display: none;
}
.feed-version .DateWrap:hover,
.feed-version .DateCust:hover,
.feed-version .DateCust:hover input {
background-color: var(--color-surface-hover);
}
.feed-version .DateWrap,
.feed-version .DateCust {
padding: 4px;
border: 1px solid var(--color-border);
border-radius: var(--radius-sm);
}
.feed-version .DateCust {
padding-left: 10px;
}
.feed-version .DateWrap label {
display: inline-block;
cursor: pointer;
width: 100%;
text-align: center;
}
.feed-version .DateWrap.active,
.feed-version .DateCust.active {
background-color: var(--color-surface);
}
.feed-slicer {
display: inline-flex;
align-items: center;
gap: 2px;
padding: 3px;
}
.TblPaging input[type=number], .TblPaging input[type=datetime-local] {
appearance: none;
-webkit-appearance: none;
border: 1px solid var(--color-border);
border-radius: var(--radius-sm);
background-color: var(--color-surface);
color: var(--color-text);
font-family: var(--font-family);
font-size: 13px;
padding: 8px 8px 8px 8px;
outline: none;
transition: border-color .15s ease;
}
.TblPaging input[type=number] {
width: 60px;
}
.FormAbove {
padding-left: 12px;
padding-right: 12px;
}
.JTblAbove, .JTblBelow {
display: flex;
align-items: center;
justify-content: space-between;
gap: 14px;
flex-wrap: wrap;
}
field[data-field-show="true"],
field[data-field-show="1"],
field[data-field-group="1"] {
background-image: var(--icon-field-show);
background-repeat: no-repeat;
background-position-x: right;
background-position-y: center;
background-size: 20px;
}
field[data-field-show="false"],
field[data-field-show="0"],
field[data-field-group="0"] {
background-image: var(--icon-field-hide);
background-repeat: no-repeat;
background-position-x: right;
background-position-y: center;
background-size: 20px;
}
.JMenu, .table-menu, .feed-table-menu, .base-table-menu {
position: relative;
}
.feed-ctx-menu {
position: absolute;
z-index: 900;
width: 200px;
margin-left: auto;
margin-right: auto;
background: var(--color-surface);
border: 1px solid var(--color-border);
border-radius: var(--radius-md);
box-shadow: var(--shadow-ctx);
padding: 5px;
opacity: 0;
/*transform: scale(.96) translateY(-4px);*/
transform-origin: top left;
transition: opacity .12s ease, transform .12s ease;
pointer-events: none;
text-align: left;
}
.feed-ctx-menu[open] {
opacity: 1;
left: 50%;
transform: translateX(-50%);
/*transform: scale(1) translateY(0);*/
pointer-events: auto;
}
/*
.feed-ctx-menu {
z-index: 900;
min-width: 200px;
background: var(--color-surface);
border: 1px solid var(--color-border);
border-radius: var(--radius-md);
box-shadow: var(--shadow-ctx);
padding: 5px;
opacity: 0;
transform: scale(.96) translateY(-4px);
transform-origin: top left;
transition: opacity .12s ease, transform .12s ease;
pointer-events: none;
text-align: left;
}
.feed-ctx-menu[open] {
opacity: 1;
transform: scale(1) translateY(0);
pointer-events: auto;
}
*/
.ctx-section {
font-size: 10px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: .07em;
color: var(--color-text-secondary);
padding: 6px 10px 4px;
}
.ctx-divider {
height: 1px;
background: var(--color-border);
margin: 4px 0;
}
.ctx-item {
display: flex;
align-items: center;
gap: 9px;
width: 100%;
padding: 8px 30px;
border-radius: var(--radius-sm);
font-size: 13.5px;
font-weight: 500;
color: var(--color-text);
text-align: left;
transition: background .1s ease, color .1s ease;
background-repeat: no-repeat;
background-position-x: 7px;
background-position-y: center;
background-size: 16px;
}
.ctx-item:hover {
background-color: var(--color-surface-elevated);
}
.ctx-item.active {
color: var(--c-teal);
font-weight: 600;
}
.ctx-item.active:hover {
background-color: var(--c-teal-soft);
}
.ctx-item.disabled {
opacity: .45;
cursor: default;
pointer-events: none;
}
.feed-table-menu-sort[sort-dir='asc'], .domain-table-menu-sort[sort-dir='asc'] {
background-image: var(--icon-sort-asc);
}
.feed-table-menu-sort[sort-dir='desc'], .domain-table-menu-sort[sort-dir='desc'] {
background-image: var(--icon-sort-desc);
}
.feed-table-menu-sort[sort-dir='clear'], .domain-table-menu-sort[sort-dir='clear'] {
background-image: var(--icon-sort-clear);
}
.feed-table-menu-group, .domain-table-menu-group {
background-image: var(--icon-data-group);
}
.feed-table-menu-group.active, .domain-table-menu-group.actve {
background-image: var(--icon-sort-clear);
}
.feed-table-menu-fltr, .domain-table-menu-fltr {
background-image: var(--icon-fltr-menu);
}
.feed-table-menu-fltr-clear, .domain-table-menu-fltr-clear {
background-image: var(--icon-sort-clear);
}
.JMenu icon, .table-menu icon, .feed-table-menu icon, .base-table-menu icon, .view-status icon {
display: inline-block;
height: 12px;
width: 12px;
background-repeat: no-repeat;
background-position: center;
background-size: contain;
margin-left: 2px;
}
.JMenu icon[type='filter'], .table-menu icon[type='filter'], .feed-table-menu icon[type='filter'], .base-table-menu icon[type='filter'], .view-status icon[type='filter']{
background-image: var(--icon-fltr-menu);
}
.JMenu icon[type='sortup'], .table-menu icon[type='sortup'], .feed-table-menu icon[type='sortup'], .base-table-menu icon[type='sortup'], .view-status icon[type='sortup']{
background-image: var(--icon-sort-asc-t);
}
.JMenu icon[type='sortdn'], .table-menu icon[type='sortdn'], .feed-table-menu icon[type='sortdn'], .base-table-menu icon[type='sortdn'], .view-status icon[type='sortdn']{
background-image: var(--icon-sort-desc-t);
}
.JMenu icon[type='grouped'], .table-menu icon[type='grouped'], .feed-table-menu icon[type='grouped'], .base-table-menu icon[type='grouped'], .view-status icon[type='grouped']{
background-image: var(--icon-data-group);
}
dialog field.feed-filter-fields {
display: block;
}
.feed-filter-fields div {
padding: 6px;
border-radius: var(--radius-md);
background-color: var(--color-background);
margin-top: 6px;
}
.feed-filter-fields div:hover {
background-color: var(--color-surface-elevated);
}
.LblFilter {
align-items: center;
}
button.feed-filter-clear {
width: 100%;
background-color: var(--c-coral);
color: var(--c-coral-soft);
border-radius: var(--radius-md);
padding: 8px;
}
button.feed-filter-clear:hover {
background-color: var(--c-coral-2);
}
.feed-filter {
display: none;
}
dialog field input.feed-filter-check {
width: 20px;
height: 20px;
}
.feed-filter-buttons button {
margin-right: 12px;
font-size: 12.5px;
padding: 6px 12px;
border-radius: var(--radius-lg);
display: inline-flex;
align-items: center;
gap: 5px;
font-weight: 600;
}
.feed-filter-buttons button::before {
content: '';
width: 5px;
height: 5px;
border-radius: 50%;
background: currentColor;
}
.view-status {
display: flex;
align-items: center;
gap: 8px;
padding: 7px 12px;
background: var(--c-ink-soft);
border: 1px solid var(--color-border);
border-radius: var(--radius-md);
font-size: 13px;
color: var(--color-text-secondary);
margin-bottom: 12px;
}
.view-status.filter {
background: var(--c-coral-soft);
}
.view-status .sort-field {
color: var(--color-text);
font-weight: 600;
margin-right: 4px;
}
.view-status .fltr-container::before {
content: '; ';
}
.view-status .fltr-container:first-of-type::before {
content: '';
}
.view-status .sort-drctn, .view-status .fltr-value {
align-items: center;
gap: 4px;
font-family: var(--font-family);
font-size: 12px;
color: var(--c-teal);
font-weight: 500;
margin-left: 2px;
}
.view-status .fltr-value {
color: var(--c-coral);
}
.view-status .sort-drctn::after, .view-status .fltr-value.list::after {
content: '; ';
}
.view-status .sort-drctn:last-of-type::after, .view-status .fltr-value.list:last-of-type::after {
content: '';
}
.view-status .sort-clear, .view-status .feed-sort-clear, .view-status .base-sort-clear, .view-status .fltr-clear, .view-status .feed-fltr-clear, .view-status .base-fltr-clear {
margin-left: auto;
font-size: 12px;
font-weight: 600;
color: var(--color-text-secondary);
padding: 3px 8px;
border-radius: var(--radius-sm);
border: 1px solid var(--color-border);
background: var(--color-surface);
transition: color .15s ease, background .15s ease;
}
.view-status .sort-clear:hover, .view-status .feed-sort-clear:hover, .view-status .base-sort-clear:hover, .view-status .fltr-clear:hover, .view-status .feed-fltr-clear:hover, .view-status .base-fltr-clear:hover {
color: var(--c-coral);
border-color: var(--c-coral);
background: var(--c-coral-soft);
}
.task_prio-all::before, .prio-low::before, .prio-med::before, .prio-hgh::before, .prio-urg::before {
content: '';
width: 5px;
height: 5px;
border-radius: 50%;
background: currentColor;
}
.bool-true::before {
content: '\2713';
}
.bool-false::before {
content: '\2717';
}
.task_prio-all, .prio-low, .prio-med, .prio-hgh, .prio-urg, .bool-true, .bool-false,
.stat-pend, .stat-prog, .stat-back, .stat-over, .stat-done {
display: inline-flex;
align-items: center;
gap: 5px;
padding: 6px 12px;
border-radius: 999px;
font-size: 12.5px;
font-weight: 600;
}
.bool-true {
color: var(--color-success);
background: var(--color-success-light);
}
.bool-false {
color: var(--color-error);
background: var(--color-error-light);
}
.task_prio-all, .proj_stat-all {
color: var(--color-primary);
background: var(--color-primary-light);
}
.prio-low {
color: var(--color-info);
background: var(--color-info-light);
}
.prio-med {
color: var(--color-success);
background: var(--color-success-light);
}
.prio-hgh {
color: var(--color-warning);
background: var(--color-warning-light);
}
.prio-urg {
color: var(--color-error);
background: var(--color-error-light);
}
.row-task_prio th:first-child, .card-task_prio {
border-left: 5px solid var(--color-surface-elevated);
}
.row-task_prio-1 td:first-child, .card-task_prio-1 {
border-left: 5px solid var(--color-info);
}
.row-task_prio-2 td:first-child, .card-task_prio-2 {
border-left: 5px solid var(--color-success);
}
.row-task_prio-3 td:first-child, .card-task_prio-3 {
border-left: 5px solid var(--color-warning);
}
.row-task_prio-4 td:first-child, .card-task_prio-4 {
border-left: 5px solid var(--color-error);
}
.task_stat-1 {
background-color: var(--color-error);
}
.task_stat-2 {
background-color: var(--color-warning);
}
.task_stat-3 {
background-color: var(--color-info);
}
.task_stat-4 {
background-color: var(--color-success);
}
view[view-feed='domain_tasks'] table td[data-label='Name'] {
text-align: left;
font-weight: 600;
}
icon[type='note'] {
background-image: var(--icon-data-text);
display: inline-block;
height: 28px;
width: 28px;
}
icon[type='note'][data-text=''] {
display: none;
}
/* Board/Cards View */
.board-wrap {
display: flex;
gap: 14px;
overflow-x: auto;
padding-bottom: 8px;
}
.board-col {
background: var(--color-surface-elevated);
border-radius: var(--radius-lg);
width: 270px;
flex-shrink: 0;
padding: 12px;
min-height: 120px;
display: flex;
flex-direction: column;
border-width: 1px;
border-style: solid;
border-color: var(--color-surface-elevated);
}
.board-col:has(.board-col-body.DropTarget) {
background: var(--c-teal-soft);
border-color: var(--c-teal);
border-style: dashed;
}
.board-col-head {
display: flex;
align-items: center;
justify-content: space-between;
padding: 4px 6px 12px;
}
.board-col-head h4 {
font-size: 13px;
font-weight: 600;
}
.board-col-count {
font-size: 11.5px;
font-family: var(--font-family);
color: var(--color-text-secondary);
background: var(--color-surface);
padding: 1px 7px;
border-radius: 999px;
}
.board-col-body {
display: flex;
flex-direction: column;
gap: 8px;
min-height: 40px;
flex-grow: 1;
}
.board-card {
background: var(--color-surface);
border-radius: var(--radius-md);
padding: 12px 13px 12px 14px;
box-shadow: var(--shadow-sm);
cursor: grab;
transition: transform .15s ease, box-shadow .15s ease;
}
.board-card:hover,
.board-card.DropTarget {
transform:translateY(-1px);
box-shadow:var(--shadow-md);
}
.board-card.dragging {
opacity:.4;
}
.board-card span[data-label] {
display: block;
font-size: 13.5px;
font-weight: 500;
margin-bottom: 10px;
line-height: 1.4;
}
.board-card span[data-label]:empty {
display:none;
}
.board-card span[data-label]::before {
content: attr(data-label);
display: block;
font-size: 10.5px;
color: var(--color-text-secondary);
text-transform: uppercase;
letter-spacing: .04em;
margin-bottom: 2px;
}
.board-card[control-feed='domain_tasks'] {
display: grid;
grid-template-columns: 1fr 21px;
}
.board-card[control-feed='domain_tasks'] span {
margin-bottom: 3px;
}
.board-card[control-feed='domain_tasks'] span[data-label]::before {
content: '';
}
.board-card[control-feed='domain_tasks'] .card-data-task_proj {
font-size: 10.5px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: .04em;
color: var(--color-text-secondary);
display: block;
grid-column: 1 / -1;
order: 1;
}
.board-card[control-feed='domain_tasks'] .card-data-task_proj:empty {
display: block;
}
.board-card[control-feed='domain_tasks'] .card-data-task_proj:empty::before {
content: 'General Tasks';
}
.board-card[control-feed='domain_tasks'] .card-data-task_name {
grid-column: 1 / -1;
order: 2;
}
.board-card[control-feed='domain_tasks'] .card-data-task_over {
font-size: 11.5px;
color: var(--color-text-secondary);
font-family: var(--font-family);
grid-column: span 1;
order: 3;
}
.task-over {
color: var(--c-coral);
font-weight: 600;
}
.board-card[control-feed='domain_tasks'] span.card-data-task_over[data-label]:empty {
display:inline;
}
.board-card[control-feed='domain_tasks'] .card-data-task_user {
color: var(--c-ink-2);
background: var(--c-ink-soft);
position: relative;
text-align: right;
grid-column: span 1;
order: 4;
width: 21px;
height: 21px;
line-height: 21px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 10.5px;
font-weight: 700;
font-family: var(--font-family);
}
.board-card[control-feed='domain_tasks'] .card-data-task_user::after {
content: attr(data-inits);
}
.board-card[control-feed='domain_tasks'] .card-data-task_desc,
.board-card[control-feed='domain_tasks'] .card-data-task_stat,
.board-card[control-feed='domain_tasks'] .card-data-task_prio,
.board-card[control-feed='domain_tasks'] .card-data-task_done,
.board-card[control-feed='domain_tasks'] .card-data-task_date,
.board-card[control-feed='domain_tasks'] .card-data-task_percent,
.board-card[control-feed='domain_tasks'] .card-data-days_complete,
.board-card[control-feed='domain_tasks'] .card-data-group_id {
display: none;
}
/* Calendar */
.calendar-toolbar {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 14px;
gap: 12px;
}
.calendar-nav {
display: flex;
align-items: center;
gap: 8px;
}
.calendar-month-label {
font-size: 17px;
min-width: 140px;
text-align: center;
background-color: transparent;
color: var(--color-text);
border: none;
margin: 0;
font-family: var(--font-family);
font-weight: 600;
letter-spacing: -0.01em;
}
.calendar-month-label option {
background-color: var(--color-surface-elevated);
}
.calendar-weekday-row {
display: grid;
grid-template-columns: repeat(7, minmax(0, 1fr));
gap: 3px;
margin-bottom: 3px;
}
.calendar-weekday-row span {
text-align: center;
font-size: 11px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: .06em;
color: var(--color-text-secondary);
padding: 6px 0;
}
.calendar-grid {
display: grid;
grid-template-columns: repeat(7, minmax(0, 1fr));
gap: 3px;
}
.cal-day {
background: var(--color-surface);
border: 1px solid var(--color-border);
border-radius: var(--radius-md);
min-height: 108px;
padding: 7px;
position: relative;
display: flex;
flex-direction: column;
gap: 4px;
transition: background .12s ease,border-color .12s ease;
}
.cal-day.other-month {
background: var(--color-surface-elevated);
opacity: .55;
}
.cal-day.today {
border-color: var(--c-teal);
border-width: 2px;
}
.cal-day.today .cal-date {
color: var(--c-teal);
font-weight: 700;
}
.cal-day:has(.cal-body.DropTarget) {
background: var(--c-teal-soft);
border-color: var(--c-teal);
border-style: dashed;
}
.cal-date {
font-size: 12px;
font-weight: 600;
font-family: var(--font-family);
color: var(--color-text-secondary);
line-height: 1;
margin-bottom: 3px;
user-select: none;
}
.cal-body {
display: flex;
flex-direction: column;
min-height: 40px;
flex-grow: 1;
gap: 3px;
}
.cal-card {
background: var(--color-surface-elevated);
border-radius: var(--radius-sm);
padding: 7px;
font-size: 11.5px;
font-weight: 500;
line-height: 1.35;
cursor: grab;
transition: transform .12s ease,box-shadow .12s ease,opacity .12s ease;
position: relative;
}
.cal-card span[data-label] {
display: block;
font-weight: 500;
margin-bottom: 4px;
line-height: 1.4;
}
.cal-card span[data-label]:empty {
display:none;
}
.cal-card span[data-label]::before {
content: attr(data-label);
display: block;
font-size: 10.5px;
color: var(--color-text-secondary);
text-transform: uppercase;
letter-spacing: .04em;
margin-bottom: 2px;
}
.cal-card:hover {
transform: translateY(-1px);
box-shadow: var(--shadow-sm);
}
.cal-card.dragging{
opacity: .3;
cursor: grabbing;
}
.cal-card[control-feed='domain_tasks'] {
display: flex;
flex-direction: column;
}
.cal-card[control-feed='domain_tasks'] span {
margin-bottom: 2px;
}
.cal-card[control-feed='domain_tasks'] span[data-label]::before {
content: '';
}
.cal-card[control-feed='domain_tasks'] .card-data-task_proj {
font-size: 10.5px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: .04em;
color: var(--color-text-secondary);
display: block;
order: 1;
}
.cal-card[control-feed='domain_tasks'] .card-data-task_proj:empty {
display: block;
}
.cal-card[control-feed='domain_tasks'] .card-data-task_proj:empty::before {
content: 'General Tasks';
}
.cal-card[control-feed='domain_tasks'] .card-data-task_name {
margin-bottom: 5px;
order: 2;
}
.cal-card[control-feed='domain_tasks'] .card-data-task_percent {
order: 3;
}
.cal-card.card-task_prio-1[control-feed='domain_tasks'] .card-data-task_percent .percent-track::after{
background: var(--color-info);
}
.cal-card.card-task_prio-2 [control-feed='domain_tasks'] .card-data-task_percent .percent-track::after {
background: var(--color-success);
}
.cal-card.card-task_prio-3[control-feed='domain_tasks'] .card-data-task_percent .percent-track::after {
background: var(--color-warning);
}
.cal-card.card-task_prio-4[control-feed='domain_tasks'] .card-data-task_percent .percent-track::after {
background: var(--color-error);
}
.cal-card[control-feed='domain_tasks'] .card-data-task_user,
.cal-card[control-feed='domain_tasks'] .card-data-task_date,
.cal-card[control-feed='domain_tasks'] .card-data-task_desc,
.cal-card[control-feed='domain_tasks'] .card-data-task_stat,
.cal-card[control-feed='domain_tasks'] .card-data-task_prio,
.cal-card[control-feed='domain_tasks'] .card-data-task_over,
.cal-card[control-feed='domain_tasks'] .card-data-task_done,
.cal-card[control-feed='domain_tasks'] .card-data-days_complete,
.cal-card[control-feed='domain_tasks'] .card-data-group_id {
display: none;
}
.percent-wrapp {
--pct: 0;
display: flex;
align-items: center;
gap: 8px;
width: 100%;
}
.percent-track {
flex: 1;
position: relative;
height: 6px;
border-radius: var(--radius-sm);
background: var(--color-primary-light);
}
.percent-track::after {
content: '';
position: absolute;
top: 0;
left: 0;
height: 100%;
min-width: 6px;
width: calc(var(--pct) * 1%);
border-radius: var(--radius-sm);
background: var(--color-primary);
}
.percent-value::after {
content: '%';
}
.feed-table .percent-value {
font-size: 12px;
width: 35px;
text-align: right;
}
.icon-btn {
width: 34px;
height: 34px;
display: flex;
align-items: center;
justify-content: center;
border-radius: var(--radius-sm);
color: var(--color-text-secondary);
transition: background .15s ease,color .15s ease;
}
.icon-btn:hover {
background: var(--color-surface-elevated);
color: var(--color-text);
}
#calPrevBtn {
background-image: var(--icon-page-prev);
background-repeat: no-repeat;
background-position: center;
background-size: 20px;
}
#calPrevBtn:hover {
background-image: var(--icon-page-prev-h);
}
#calNextBtn {
background-image: var(--icon-page-next);
background-repeat: no-repeat;
background-position: center;
background-size: 20px;
}
#calNextBtn:hover {
background-image: var(--icon-page-next-h);
}
#calPrvYBtn {
background-image: var(--icon-page-frst);
background-repeat: no-repeat;
background-position: center;
background-size: 20px;
}
#calPrvYBtn:hover {
background-image: var(--icon-page-frst-h);
}
#calNxtYBtn {
background-image: var(--icon-page-last);
background-repeat: no-repeat;
background-position: center;
background-size: 20px;
}
#calNxtYBtn:hover {
background-image: var(--icon-page-last-h);
}
section.view view h2 {
display: none;
}
section.view div.search-results view h2, div.search-results feed-display h2 {
display: block;
font-size: 20px;
}
section.view div.search-results view {
display: block;
margin-bottom: 24px;
}
.search-results .feed-button, .search-results .Feed-Btn-New, .search-results .Feed-Btn-Exp {
display: none;
}
span.feed-avatar {
display: inline-block;
width: 27px;
height: 27px;
line-height: 27px;
border-radius: 50%;
background-color: var(--color-secondary);
background-size: cover;
background-position: center center;
background-repeat: no-repeat;
color: var(--color-background);
align-items: center;
justify-content: center;
font-weight: 700;
font-family: var(--font-family);
text-align: center;
}
span.feed-avatar::after {
content: attr(user-inits);
}
span.feed-avatar.image {
border: 2px solid var(--color-secondary);
}
span.feed-avatar.image::after {
content: '';
}
span.Dollars::before {
content: "$";
}
span.Dollars-Negative::before {
content: "-$";
}
.timeline-wrapper {
display: flex;
border-radius: var(--radius-lg);
overflow: hidden;
}
.timeline-left {
width: 220px;
flex-shrink: 0;
}
.timeline-left table.timeline-grid tr td div {
text-align: left;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
width: 205px;
}
.timeline-left table.timeline-grid tr.timeline-row td {
background-color: var(--color-surface);
padding-left: 10px;
padding-right: 10px;
}
.timeline-left table.timeline-grid tr.timeline-group td {
padding-left: 10px;
padding-right: 10px;
}
.timeline-right {
display: grid;
flex: 1;
overflow-x: scroll;
}
.timeline-right > table.timeline-grid {
grid-area: 1 / 1; /* both children share row 1, column 1 -> they overlap */
}
table.timeline-grid tr.click:hover, .timeline-left table.timeline-grid tr.timeline-row.click:hover {
background-color: var(--color-surface-elevated);
}
.timeline-left table.timeline-grid tr.timeline-row.click:hover td {
background: transparent;
}
table.timeline-bg tr td {
border-left: 1px solid var(--color-border);
border-right:1px solid var(--color-border);
}
table.timeline-bg tr.timeline-row td {
background-color: var(--color-surface);
}
.timeline-right table.timeline-grid {
table-layout: fixed;
width: 100%;
}
table.timeline-grid tr td {
padding: 0;
height: 36px;
}
table.timeline-grid tr td.timeline-has {
padding-left: 5px;
padding-right: 5px;
}
.timeline-group, .table-group {
background-color: var(--color-border);
}
.timeline-group.row-task_prio td:first-child, .table-group.row-task_prio td:first-child {
border-left: 5px solid var(--color-border);
}
.timeline-bar {
width: 100%;
border-radius: var(--radius-lg);
color: transparent;
height: 18px;
}
.timeline-group .timeline-c-1,
.timeline-bar.timeline-c-1 {
background-color: var(--c-teal-o);
}
.timeline-group .timeline-c-2,
.timeline-bar.timeline-c-2 {
background-color: var(--c-amber-o);
}
.timeline-group .timeline-c-3,
.timeline-bar.timeline-c-3 {
background-color: var(--c-coral-o);
}
.timeline-group .timeline-c-4,
.timeline-bar.timeline-c-4 {
background-color: var(--c-slate-o);
}
.timeline-mark {
border-radius: var(--radius-lg);
height: 18px;
width: 18px;
min-width: 18px;
background-color: var(--color-primary);
}
.timeline-mark.timeline-c-1 {
background-color: var(--c-teal);
}
.timeline-mark.timeline-c-2 {
background-color: var(--c-amber);
}
.timeline-mark.timeline-c-3 {
background-color: var(--c-coral);
}
.timeline-mark.timeline-c-4 {
background-color: var(--c-slate);
}
.timeline-date {
width: 40px;
padding-left: 0;
padding-right: 0;
}
table.timeline-bg tr.timeline-group td.timeline-today div ,
table.timeline-bg tr.timeline-row td.timeline-today div {
background-image: linear-gradient(to right, var(--c-ink-soft), var(--c-ink-soft));
background-size: 10px 100%;
background-repeat: no-repeat;
background-position: center;
height: 100%;
width: 100%
}
table.timeline-bg tr.timeline-group td.timeline-weekend,
table.timeline-bg tr.timeline-row td.timeline-weekend {
background-color: var(--color-surface-elevated);
}
.table-group td {
text-align: left;
}
table.timeline-grid thead th {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.feed-card-grid {
display: grid;
grid-template-columns: repeat(auto-fill,minmax(280px,1fr));
gap: 16px;
}
.feed-card {
background: var(--color-surface);
border: 1px solid var(--color-border);
border-radius: var(--radius-lg);
padding: 16px;
cursor: pointer;
text-decoration: none;
transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
position: relative;
max-width: 320px;
}
.feed-card:hover {
transform: translateY(-2px);
box-shadow: var(--shadow-md);
}
.feed-card span[data-label] {
display: block;
font-size: 13.5px;
font-weight: 500;
margin-bottom: 10px;
line-height: 1.4;
}
.feed-card span[data-label]:empty {
display:none;
}
.feed-card span[data-label]::before {
content: attr(data-label);
display: block;
font-size: 10.5px;
color: var(--color-text-secondary);
text-transform: uppercase;
letter-spacing: .04em;
margin-bottom: 2px;
}
view[view-feed='domain_projs'] .feed-card {
display: grid;
grid-template-areas:
"name ring"
"badge ring"
"desc desc"
"open due"
"user date";
grid-template-columns: 1fr auto;
border-left: 5px solid var(--c-slate);
gap: 0;
padding-bottom: 6px;
}
view[view-feed='domain_projs'] .feed-card .card-data-proj_name {
grid-area: name;
font-size: 15px;
font-family: var(--font-family);
font-weight: 600;
color: var(--color-text);
line-height: 1.3;
padding-right: 12px;
margin: 0;
letter-spacing: -0.01em;
align-self: end;
}
view[view-feed='domain_projs'] .feed-card .card-data-proj_stat {
grid-area: badge;
margin-top: 5px;
margin-bottom: 12px;
}
view[view-feed='domain_projs'] .feed-card .card-data-proj_stat span {
display: inline-flex;
align-items: center;
gap: 4px;
padding: 2px 9px;
border-radius: 999px;
font-size: 11px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: .04em;
/* default — overridden below by text content where possible */
background: var(--c-slate-soft);
color: var(--c-slate);
}
view[view-feed='domain_projs'] .feed-card .card-data-proj_percent {
grid-area: ring;
align-self: start;
justify-self: end;
}
view[view-feed='domain_projs'] .feed-card .percent-wrapp {
width: 44px;
height: 44px;
border-radius: 50%;
background: conic-gradient(
var(--color-primary) calc(var(--pct) * 1%),
var(--color-surface-elevated) 0%
);
display: flex;
align-items: center;
justify-content: center;
position: relative;
flex-shrink: 0;
}
/* Inner cutout to make the donut */
view[view-feed='domain_projs'] .feed-card .percent-wrapp::after {
content: '';
position: absolute;
width: 32px;
height: 32px;
border-radius: 50%;
background: var(--color-surface);
}
/* Hide the track element — conic-gradient handles it */
view[view-feed='domain_projs'] .feed-card .percent-track {
display: none;
}
view[view-feed='domain_projs'] .feed-card .percent-value {
position: relative;
z-index: 1;
font-size: 9.5px;
font-weight: 700;
font-family: var(--font-family);
color: var(--color-text);
/* Truncate the decimal — CSS only, no rounding */
/* Full rounding requires JS: Math.round(pct) */
}
view[view-feed='domain_projs'] .feed-card .card-data-proj_desc {
grid-area: desc;
font-size: 13px;
color: var(--color-text-secondary);
line-height: 1.55;
margin-bottom: 14px;
display: -webkit-box;
line-clamp: 2;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
view[view-feed='domain_projs'] .feed-card .card-data-task_open {
grid-area: open;
color: var(--color-text-secondary);
font-size: 12px;
font-family: var(--font-family);
margin-bottom: 5px;
}
view[view-feed='domain_projs'] .feed-card .card-data-task_open::after {
content: ' open task(s)'
}
view[view-feed='domain_projs'] .feed-card .card-data-task_overdue {
grid-area: due;
color: var(--color-text-secondary);
font-size: 12px;
font-family: var(--font-family);
margin-bottom: 5px;
text-align: right;
color: var(--c-coral);
font-weight: 600;
}
view[view-feed='domain_projs'] .feed-card .card-data-task_overdue::after {
content: ' overdue task(s)'
}
view[view-feed='domain_projs'] .feed-card .card-data-proj_users {
grid-area: user;
color: var(--color-text-secondary);
font-size: 12px;
font-family: var(--font-family);
margin-bottom: 5px;
display: flex;
margin-left: -4px;
}
view[view-feed='domain_projs'] .feed-card .card-data-proj_users span.data-array {
width: 24px;
height: 24px;
border-radius: 50%;
background: var(--c-ink-soft);
color: var(--c-ink-2);
font-size: 8.5px;
font-weight: 700;
font-family: var(--font-family);
display: flex;
align-items: center;
justify-content: center;
border: 2px solid var(--color-surface);
margin-right: -6px;
flex-shrink: 0;
}
view[view-feed='domain_projs'] .feed-table-wrapper table span.data-array {
width: 24px;
height: 24px;
border-radius: 50%;
background: var(--c-ink-soft);
color: var(--c-ink-2);
font-size: 8.5px;
font-weight: 700;
font-family: var(--font-family);
display: inline-block;
text-align: center;
line-height: 20px;
padding: 0;
border: 2px solid var(--color-surface);
}
view[view-feed='domain_projs'] .feed-table-wrapper table span.data-array {
margin-left: -6px;
}
view[view-feed='domain_projs'] .feed-table-wrapper table span.data-array:first-of-type {
margin-left: 0px;
}
view[view-feed='domain_projs'] .feed-card .card-data-proj_date {
grid-area: date;
color: var(--color-text-secondary);
font-size: 12px;
font-family: var(--font-family);
margin-bottom: 5px;
text-align: right;
}
view[view-feed='domain_projs'] .feed-card span[data-label].card-data-proj_date::before {
content: 'Due ';
display: inline;
color: var(--color-text-secondary);
font-size: 12px;
font-family: var(--font-family);
text-transform: none;
letter-spacing: normal;
}
view[view-feed='domain_projs'] .feed-card .card-data-proj_id,
view[view-feed='domain_projs'] .feed-card .card-data-proj_done,
view[view-feed='domain_projs'] .feed-card .card-data-group_id {
display: none;
}
view[view-feed='domain_projs'] .feed-card span[data-label]::before {
content: '';
}
view[view-feed='domain_projs'] .feed-card.card-proj_stat-1, view[view-feed='domain_projs'] .feed-table-wrapper table tr.row-proj_stat-1 td:first-of-type {
border-left: 5px solid var(--color-warning);
}
view[view-feed='domain_projs'] .feed-card.card-proj_stat-1 .card-data-proj_stat span, .stat-pend {
background-color: var(--color-warning-light);
color: var(--color-warning);
}
view[view-feed='domain_projs'] .feed-card.card-proj_stat-1 .percent-wrapp {
background: conic-gradient(
var(--color-warning) calc(var(--pct) * 1%),
var(--color-surface-hover) 0%
);
}
view[view-feed='domain_projs'] .feed-card.card-proj_stat-2, view[view-feed='domain_projs'] .feed-table-wrapper table tr.row-proj_stat-2 td:first-of-type {
border-left: 5px solid var(--color-secondary);
}
view[view-feed='domain_projs'] .feed-card.card-proj_stat-2 .card-data-proj_stat span, .stat-prog {
background-color: var(--color-secondary-light);
color: var(--color-secondary);
}
view[view-feed='domain_projs'] .feed-card.card-proj_stat-2 .percent-wrapp {
background: conic-gradient(
var(--color-secondary) calc(var(--pct) * 1%),
var(--color-surface-hover) 0%
);
}
view[view-feed='domain_projs'] .feed-card.card-proj_stat-3, view[view-feed='domain_projs'] .feed-table-wrapper table tr.row-proj_stat-3 td:first-of-type {
border-left: 5px solid var(--color-info);
}
view[view-feed='domain_projs'] .feed-card.card-proj_stat-3 .card-data-proj_stat span, .stat-blog {
background-color: var(--color-info-light);
color: var(--color-info);
}
view[view-feed='domain_projs'] .feed-card.card-proj_stat-3 .percent-wrapp {
background: conic-gradient(
var(--color-info) calc(var(--pct) * 1%),
var(--color-surface-hover) 0%
);
}
view[view-feed='domain_projs'] .feed-card.card-proj_stat-4, view[view-feed='domain_projs'] .feed-table-wrapper table tr.row-proj_stat-4 td:first-of-type {
border-left: 5px solid var(--color-success);
}
view[view-feed='domain_projs'] .feed-card.card-proj_stat-4 .card-data-proj_stat span, .stat-done {
background-color: var(--color-success-light);
color: var(--color-success);
}
view[view-feed='domain_projs'] .feed-card.card-proj_stat-4 .percent-wrapp {
background: conic-gradient(
var(--color-success) calc(var(--pct) * 1%),
var(--color-surface-hover) 0%
);
}
view[view-feed='domain_projs'] .feed-card.card-proj_stat-5, view[view-feed='domain_projs'] .feed-table-wrapper table tr.row-proj_stat-5 td:first-of-type {
border-left: 5px solid var(--color-error);
}
view[view-feed='domain_projs'] .feed-card.card-proj_stat-5 .card-data-proj_stat span, .stat-over {
background-color: var(--color-error-light);
color: var(--color-error);
}
view[view-feed='domain_projs'] .feed-card.card-proj_stat-5 .percent-wrapp {
background: conic-gradient(
var(--color-error) calc(var(--pct) * 1%),
var(--color-surface-hover) 0%
);
}
view[view-feed='domain_projs'] .feed-card .card-data-proj_users span.data-array:nth-child(1),
view[view-feed='domain_projs'] .feed-table-wrapper table span.data-array:nth-child(1) {
background-color: var(--c-ink-soft);
color: var(--c-ink);
}
view[view-feed='domain_projs'] .feed-card .card-data-proj_users span.data-array:nth-child(2),
view[view-feed='domain_projs'] .feed-table-wrapper table span.data-array:nth-child(2) {
background-color: var(--c-sky-soft);
color: var(--c-sky);
}
view[view-feed='domain_projs'] .feed-card .card-data-proj_users span.data-array:nth-child(3),
view[view-feed='domain_projs'] .feed-table-wrapper table span.data-array:nth-child(3) {
background-color: var(--c-violet-soft);
color: var(--c-violet);
}
view[view-feed='domain_projs'] .feed-card .card-data-proj_users span.data-array:nth-child(4),
view[view-feed='domain_projs'] .feed-table-wrapper table span.data-array:nth-child(4) {
background-color: var(--c-mauve-soft);
color: var(--c-mauve);
}
view[view-feed='domain_projs'] .feed-card .card-data-proj_users span.data-array:nth-child(5),
view[view-feed='domain_projs'] .feed-table-wrapper table span.data-array:nth-child(5) {
background-color: var(--c-rose-soft);
color: var(--c-rose);
}
view[view-feed='domain_projs'] .feed-card .card-data-proj_users span.data-array:nth-child(6),
view[view-feed='domain_projs'] .feed-table-wrapper table span.data-array:nth-child(6) {
background-color: var(--c-coral-soft);
color: var(--c-coral);
}
view[view-feed='domain_projs'] .feed-card .card-data-proj_users span.data-array:nth-child(7),
view[view-feed='domain_projs'] .feed-table-wrapper table span.data-array:nth-child(7) {
background-color: var(--c-amber-soft);
color: var(--c-amber);
}
view[view-feed='domain_projs'] .feed-card .card-data-proj_users span.data-array:nth-child(8),
view[view-feed='domain_projs'] .feed-table-wrapper table span.data-array:nth-child(8) {
background-color: var(--c-straw-soft);
color: var(--c-straw);
}
view[view-feed='domain_projs'] .feed-card .card-data-proj_users span.data-array:nth-child(9),
view[view-feed='domain_projs'] .feed-table-wrapper table span.data-array:nth-child(9) {
background-color: var(--c-sage-soft);
color: var(--c-sage);
}
view[view-feed='domain_projs'] .feed-card .card-data-proj_users span.data-array:nth-child(10),
view[view-feed='domain_projs'] .feed-table-wrapper table span.data-array:nth-child(10) {
background-color: var(--c-teal-soft);
color: var(--c-teal);
}
view[view-feed='domain_groups'] table span.theme-ink,
view[view-feed='domain_groups'] table span.theme-slate,
view[view-feed='domain_groups'] table span.theme-sky,
view[view-feed='domain_groups'] table span.theme-violet,
view[view-feed='domain_groups'] table span.theme-mauve,
view[view-feed='domain_groups'] table span.theme-rose,
view[view-feed='domain_groups'] table span.theme-coral,
view[view-feed='domain_groups'] table span.theme-amber,
view[view-feed='domain_groups'] table span.theme-straw,
view[view-feed='domain_groups'] table span.theme-sage,
view[view-feed='domain_groups'] table span.theme-teal {
border-radius: var(--radius-lg);
padding: 6px 12px;
}
view[view-feed='domain_groups'] table .feed-table-button.search {
background-image: var(--icon-table-join);
}
.toolbar-right {
display: flex;
align-items: center;
gap: 10px;
}
.window-control {
display: flex;
align-items: center;
gap: 8px;
padding: 7px 12px;
border-radius: var(--radius-md);
background: var(--color-surface);
border: 1px solid var(--color-border);
font-size: 13px;
color: var(--color-text-secondary);
cursor: pointer;
transition: background .15s ease, border-color .15s ease, color .15s ease;
white-space: nowrap;
}
.window-control:hover {
background: var(--color-surface-elevated);
color: var(--color-text);
border-color: var(--color-text-secondary);
}
.window-control-label {
font-weight: 400;
}
.window-control-value {
font-weight: 700;
color: var(--color-text);
}
.window-control svg {
flex-shrink: 0;
opacity: .6;
}
.window-dropdown-wrap {
position: relative;
}
.window-dropdown {
position: absolute;
top: calc(100% + 6px);
right: 0;
background: var(--color-surface);
border: 1px solid var(--color-border);
border-radius: var(--radius-md);
box-shadow: var(--shadow-md);
padding: 5px;
min-width: 180px;
z-index: 30;
opacity: 0;
transform: translateY(-4px);
pointer-events: none;
transition: opacity .14s ease, transform .14s ease;
}
.window-dropdown.open {
opacity: 1;
transform: translateY(0);
pointer-events: auto;
}
.window-option {
display: flex;
align-items: center;
justify-content: space-between;
width: 100%;
padding: 8px 10px;
border-radius: var(--radius-sm);
font-size: 13.5px;
color: var(--color-text);
text-align: left;
transition: background .1s ease;
}
.window-option:hover {
background: var(--color-surface-elevated);
}
.window-option.selected {
font-weight: 600;
color: var(--c-teal);
}
.window-option-check {
color: var(--c-teal);
opacity: 0;
}
.window-option.selected .window-option-check {
opacity: 1;
}
.window-dropdown-divider {
height: 1px;
background: var(--color-border);
margin: 4px 0;
}
.window-option-muted {
font-size: 11px;
color: var(--color-text-secondary);
padding: 4px 10px 6px;
}
.feed-sql {
margin-top: 12px;
margin-bottom: 12px;
background-color: var(--color-surface);
padding: 12px;
border-radius: var(--radius-lg);
font-size: 10px;
font-family: var(--font-family);
}
fieldset.field-list {
margin-top: 12px;
}
.feed-filter-range.input {
width: 50%;
display: none;
}
.radio-wrap {
display: inline-flex;
align-items: center;
width: 100%;
gap: 3px;
background: var(--color-surface-elevated);
border: 1px solid var(--color-border);
border-radius: var(--radius-sm);
padding: 3px;
font-size: 13px;
}
.radio-wrap input[type="radio"] {
display: none;
}
.radio-wrap .feed-radio:hover {
background-color: var(--color-surface-hover);
}
.radio-wrap .feed-radio.active {
background-color: var(--color-surface);
}
.radio-wrap .feed-radio {
padding: 4px;
border: 1px solid var(--color-border);
border-radius: var(--radius-sm);
display: inline-block;
cursor: pointer;
width: 100%;
text-align: center;
}
.email-hint {
color: var(--color-warning);
display: none;
font-size: 11.5px;
margin-top: 5px;
}
.email-error {
color: var(--color-error);
display: none;
font-size: 11.5px;
margin-top: 5px;
}
.invalid-value {
border-color: var(--color-error) !important;
}
field-cell.address {
display: grid;
grid-template-columns: repeat(12, 1fr);
gap: 6px;
width: 100%;
}
field-cell .feed-addr {
box-sizing: border-box;
width: 100%;
min-width: 0; /* lets inputs shrink inside grid cells */
}
/* Row 1: street (~75%) + unit (~25%) */
field-cell.address input[id$="_a"] { grid-column: span 9; }
field-cell.address input[id$="_u"] { grid-column: span 3; }
/* Row 2: city (~50%) + state (~17%) + zip (~33%) */
field-cell.address input[id$="_c"] { grid-column: span 6; }
field-cell.address input[id$="_s"] { grid-column: span 2; }
field-cell.address input[id$="_z"] { grid-column: span 4; }
field-cell.float-prcnt {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 8px;
width: 100%;
align-items: center;
}
field-cell.float-prcnt input[id^="rng_"] {
grid-column: span 3;
padding: 0;
}
field-cell.float-prcnt input[id^="val_"] { grid-column: span 1; }
field-cell.float-prcnt::after {
content: '%';
position: absolute;
right: 42px;
color: var(--color-text-secondary);
font-size: 12px;
pointer-events: none; /* Crucial: clicks pass straight through to the input */
}
dialog field input[type="color"] {
padding: 4px;
height: 40px;
}
input[type="range"] {
padding: 0;
width: 100%;
height: 12px;
border-radius: 4px;
background-color: transparent; /* Removes default background */
cursor: pointer;
}
input[type="range"]:focus {
outline: none;
}
/* Chrome, Safari, Edge, and Opera */
input[type="range"]::-webkit-slider-runnable-track {
background-color: var(--color-surface-elevated);
background: linear-gradient(to right, var(--color-primary-mid) 0%, var(--color-primary-mid) var(--progress, 50%), var(--color-surface-elevated) var(--progress, 50%), var(--color-surface-elevated) 100%);
height: 12px;
border-radius: 4px;
}
input[type="range"]::-webkit-slider-thumb {
-webkit-appearance: none; /* Overrides native thumb */
appearance: none;
background-color: var(--color-primary);
height: 24px;
width: 24px;
border-radius: 50%;
/* Formula to center thumb: (track height / 2) - (thumb height / 2) */
margin-top: -6px;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
transition: background 0.15s ease-in-out;
}
input[type="range"]::-webkit-slider-thumb:hover {
background-color: var(--color-primary-hover);
}
/* Firefox */
input[type="range"]::-moz-range-track {
background-color: var(--color-surface-elevated);
background: linear-gradient(to right, var(--color-primary-mid) 0%, var(--color-primary-mid) var(--progress, 50%), var(--color-surface-elevated) var(--progress, 50%), var(--color-surface-elevated) 100%);
height: 12px;
border-radius: 4px;
}
input[type="range"]::-moz-range-thumb {
background-color: var(--color-primary);
height: 24px;
width: 24px;
border-radius: 50%;
border: none; /* Removes default Firefox border */
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
transition: background 0.15s ease-in-out;
}
input[type="range"]::-moz-range-thumb:hover {
background-color: var(--color-primary-hover);
}
.color-preview {
display: inline-block;
height: 20px;
width: 20px;
border-radius: 50%;
margin-right: 5px;
vertical-align: middle;
}
.feed-nav {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 6px 13px;
border-radius: var(--radius-sm);
font-size: 13px;
font-weight: 500;
color: var(--color-text-secondary);
cursor: pointer;
transition: background .12s ease, color .12s ease;
white-space: nowrap;
border: 1px solid var(--color-border);
font-family: inherit;
}
.feed-nav:hover {
color: var(--color-text);
background-color: var(--color-background);
}
.feed-nav.active {
background-color: var(--color-surface);
color: var(--color-text);
box-shadow: 0 1px 3px rgba(20, 30, 32, .08), 0 0 0 1px var(--color-border);
}
.feed-nav.table::before {
content: "";
display: inline-block;
width: 16px;
height: 16px;
text-align: center;
vertical-align: middle;
background-color: currentColor;
-webkit-mask: var(--icon-table) center / contain no-repeat;
mask: var(--icon-table) center / contain no-repeat;
}
.feed-nav.list::before {
content: "";
display: inline-block;
width: 16px;
height: 16px;
text-align: center;
vertical-align: middle;
background-color: currentColor;
-webkit-mask: var(--icon-flist) center / contain no-repeat;
mask: var(--icon-flist) center / contain no-repeat;
}
.feed-nav.grid::before {
content: "";
display: inline-block;
width: 16px;
height: 16px;
text-align: center;
vertical-align: middle;
background-color: currentColor;
-webkit-mask: var(--icon-fgrid) center / contain no-repeat;
mask: var(--icon-fgrid) center / contain no-repeat;
}
feed-display.list table {
display: flex;
flex-direction: column;
width: 100%;
}
feed-display.list table thead, feed-display.list table tbody {
display: block;
width: 100%;
}
feed-display.list table thead tr {
display: flex;
width: 100%;
margin-bottom: 10px;
}
feed-display.list table thead th {
flex: 1;
display: flex;
align-items: center;
justify-content: center;
position: relative;
}
feed-display.list table thead th .feed-ctx-menu[open] {
top: 50px;
left: 50%;
transform: translateX(-50%);
}
feed-display.list table thead th:first-of-type {
display: none;
}
feed-display.list table thead tr,
feed-display.list table thead th:nth-of-type(2) {
border-top-left-radius: var(--radius-md);
border-bottom-left-radius: var(--radius-md);
}
feed-display.list table thead th:last-of-type {
border-top-right-radius: var(--radius-md);
border-bottom-right-radius: var(--radius-md);
}
feed-display.list .feed-table tr td:first-of-type {
width: 100%;
}
feed-display.list table tbody, feed-display.list table tbody tr, feed-display.list table td {
display: block;
width: 100%;
}
feed-display.list tbody tr {
border-radius: var(--radius-md);
margin-bottom: 10px;
border: 1px solid var(--color-border);
/*border-left: 3px solid var(--rail);*/
background: var(--color-surface);
}
feed-display.list tbody td {
padding: 6px 14px;
text-align: left;
}
feed-display.list tbody td::before {
content: attr(data-label);
display: block;
font-size: 10.5px;
color: var(--color-text-secondary);
text-transform: uppercase;
letter-spacing: .04em;
margin-bottom: 2px;
}
feed-display.list tbody td:last-of-type {
padding-bottom: 15px;
}
feed-display.list .table-button {
text-align: right;
margin-top: 5px;
margin-bottom: -45px;
}
feed-display.list .feed-table-wrapper {
background: inherit;
border: none;
}
feed-display.list .feed-table-wrapper table {
background-color: transparent;
}
feed-display.list .feed-table-wrapper table td {
border-bottom: none;
}
feed-display.list .feed-table-wrapper table td icon[type='note'] {
width: 100%;
display: block;
height: auto;
background-image: none;
pointer-events: none;
}
feed-display.list .feed-table-wrapper table td icon[type='note']::after {
content: attr(data-text);
}
feed-display.list .percent-wrapp {
max-width: 200px;
}
feed-display.list .table-group td {
background-color: var(--color-border);
display: flex;
justify-content: center;
align-items: center;
padding: 15px;
border-radius: var(--radius-md);
}