mchus/bible
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Refine aqua table toolbars and icon system

Browse Source
This commit is contained in:
Michael Chus
2026-02-28 12:12:30 +03:00
parent d0cffab6a1
commit 5191e709bd
5 changed files with 726 additions and 71 deletions
Download Patch File Download Diff File Expand all files Collapse all files

268
kit/patterns/theme-aqua-legacy/demo-aqua-freeze.css
View File

@@ -14,6 +14,12 @@
}
* { box-sizing: border-box; }
.icon-sprite {
position: absolute;
width: 0;
height: 0;
overflow: hidden;
}
html {
scroll-padding-top: var(--anchor-offset);
}
@@ -509,7 +515,8 @@ h1 { margin: 6px 0 8px; font-size: 30px; }
linear-gradient(180deg, #fbfbfc 0%, #efeff1 62%, #e8e8eb 100%);
}
.btn-secondary:hover { filter: brightness(1.01); }
.btn-danger {
.btn-danger,
.tool-btn-danger {
border-color: #c79e98;
color: #6f2e2a;
text-shadow: 0 1px 0 rgba(255,255,255,0.56), 0 0 1px rgba(255,255,255,0.16);
@@ -517,7 +524,8 @@ h1 { margin: 6px 0 8px; font-size: 30px; }
radial-gradient(160% 100% at 50% -8%, rgba(255,255,255,0.94) 0%, rgba(255,255,255,0.48) 24%, rgba(255,255,255,0.12) 38%, rgba(255,255,255,0) 39%),
linear-gradient(180deg, #e8aea5 0%, #efc0b9 28%, #f5d3ce 58%, #fae3df 100%);
}
.btn-danger:hover { filter: brightness(1.01); }
.btn-danger:hover,
.tool-btn-danger:hover { filter: brightness(1.01); }
.btn-ghost {
border-color: #a8abb0;
color: #636b78;
@@ -734,8 +742,26 @@ code {
inset 0 1px 0 rgba(255,255,255,0.78),
0 1px 1px rgba(0,0,0,0.06);
}
.segmented.segmented-wide {
display: flex;
width: max-content;
max-width: 100%;
margin-left: auto;
margin-right: auto;
}
.segmented.segmented-wide .segment {
flex: 0 0 auto;
min-height: 36px;
padding-top: 8px;
padding-bottom: 8px;
}
.segment {
flex: 1 1 0;
display: inline-flex;
align-items: center;
justify-content: center;
text-decoration: none;
text-align: center;
color: #2f3135;
border: 0;
min-height: 30px;
@@ -792,6 +818,175 @@ code {
margin-bottom: 12px;
align-items: center;
}
.operator-toolbar {
display: flex;
flex-wrap: wrap;
gap: 10px;
align-items: center;
}
.operator-scope-toolbar {
margin-top: 4px;
}
.operator-scope-toolbar .tool-group {
flex: 1 1 320px;
}
.table-toolbar {
display: flex;
flex-wrap: wrap;
gap: 0;
align-items: stretch;
padding: 6px;
border: 1px solid #b7bdd0;
border-radius: 12px;
background:
linear-gradient(180deg, rgba(255,255,255,0.78), rgba(255,255,255,0.22) 42%, rgba(255,255,255,0)),
linear-gradient(180deg, #edf1f7 0%, #dfe5ee 100%);
box-shadow:
inset 0 1px 0 rgba(255,255,255,0.92),
0 1px 0 rgba(255,255,255,0.38);
}
.table-toolbar + .table-wrap {
margin-top: 0;
border-top: 0;
border-top-left-radius: 0;
border-top-right-radius: 0;
}
.table-toolbar {
border-bottom-left-radius: 0;
border-bottom-right-radius: 0;
}
.toolbar-group {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 2px 10px;
}
.toolbar-group + .toolbar-group {
border-left: 1px solid #b6bdd0;
}
.toolbar-group-title {
margin: 0;
font-size: 9px;
font-weight: 700;
letter-spacing: 0.05em;
text-transform: uppercase;
color: #6f7088;
white-space: nowrap;
}
.toolbar-group-buttons {
display: inline-flex;
gap: 6px;
padding: 0;
}
.tool-icon-btn {
width: 34px;
height: 34px;
border: 1px solid #a7acb7;
border-radius: 8px;
text-decoration: none;
display: inline-flex;
align-items: center;
justify-content: center;
color: #2e4f7d;
font-size: 17px;
line-height: 1;
font-family: "Tahoma", "MS Sans Serif", "Lucida Grande", sans-serif;
text-shadow: 0 1px 0 rgba(255,255,255,0.62);
background:
radial-gradient(155% 95% at 50% -10%, rgba(255,255,255,0.90) 0%, rgba(255,255,255,0.38) 30%, rgba(255,255,255,0.12) 44%, rgba(255,255,255,0) 45%),
linear-gradient(180deg, #fdfdff 0%, #e7ebf3 100%);
box-shadow:
inset 0 1px 0 rgba(255,255,255,0.95),
inset 0 -1px 0 rgba(164, 173, 188, 0.14),
0 1px 0 rgba(255,255,255,0.28);
}
.tool-svg {
width: 21px;
height: 21px;
stroke: currentColor;
fill: none;
stroke-width: 1.35;
stroke-linecap: round;
stroke-linejoin: round;
shape-rendering: geometricPrecision;
vector-effect: non-scaling-stroke;
}
.tool-icon-btn:hover {
filter: brightness(1.03);
}
.tool-icon-btn-primary {
border-color: #88a4d4;
color: #244f83;
background:
radial-gradient(160% 100% at 50% -8%, rgba(255,255,255,0.94) 0%, rgba(255,255,255,0.34) 26%, rgba(255,255,255,0.08) 38%, rgba(255,255,255,0) 39%),
linear-gradient(180deg, #89bdf2 0%, #99ccfe 28%, #b5deff 58%, #d3eeff 100%);
}
.tool-icon-btn-danger {
border-color: #c79e98;
color: #6f2e2a;
text-shadow: 0 1px 0 rgba(255,255,255,0.56), 0 0 1px rgba(255,255,255,0.16);
background:
radial-gradient(160% 100% at 50% -8%, rgba(255,255,255,0.94) 0%, rgba(255,255,255,0.48) 24%, rgba(255,255,255,0.12) 38%, rgba(255,255,255,0) 39%),
linear-gradient(180deg, #e8aea5 0%, #efc0b9 28%, #f5d3ce 58%, #fae3df 100%);
}
.tool-group {
display: inline-flex;
flex-wrap: wrap;
gap: 6px;
padding: 4px;
border: 1px solid #b6bbca;
border-radius: 10px;
background:
linear-gradient(180deg, rgba(255,255,255,0.70), rgba(255,255,255,0.18) 40%, rgba(255,255,255,0)),
linear-gradient(180deg, #eef0f4 0%, #e2e6ed 100%);
box-shadow: inset 0 1px 0 rgba(255,255,255,0.86);
}
.tool-btn {
min-height: 30px;
padding: 6px 10px;
border: 1px solid #a6aab5;
border-radius: 7px;
text-decoration: none;
color: #2f3135;
font-size: 13px;
font-weight: 600;
line-height: 1;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 6px;
white-space: nowrap;
background:
linear-gradient(180deg, rgba(255,255,255,0.88), rgba(255,255,255,0.16) 42%, rgba(255,255,255,0) 43%),
linear-gradient(180deg, #fafbfc 0%, #e8ebf1 100%);
box-shadow: inset 0 1px 0 rgba(255,255,255,0.90);
}
.tool-btn:hover {
filter: brightness(1.02);
}
.tool-btn.active,
.tool-tab.active {
border-color: #88a4d4;
color: #244f83;
text-shadow: 0 1px 0 rgba(255,255,255,0.48);
background:
radial-gradient(160% 100% at 50% -8%, rgba(255,255,255,0.94) 0%, rgba(255,255,255,0.34) 26%, rgba(255,255,255,0.08) 38%, rgba(255,255,255,0) 39%),
linear-gradient(180deg, #89bdf2 0%, #99ccfe 28%, #b5deff 58%, #d3eeff 100%);
}
.tool-btn-primary {
border-color: #88a4d4;
color: #244f83;
background:
radial-gradient(160% 100% at 50% -8%, rgba(255,255,255,0.94) 0%, rgba(255,255,255,0.34) 26%, rgba(255,255,255,0.08) 38%, rgba(255,255,255,0) 39%),
linear-gradient(180deg, #89bdf2 0%, #99ccfe 28%, #b5deff 58%, #d3eeff 100%);
}
.tool-icn {
width: 14px;
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 12px;
}
.inline-menu {
position: relative;
}
@@ -836,9 +1031,50 @@ code {
background: #fdecef;
}
.action-cell {
display: flex;
gap: 10px;
flex-wrap: wrap;
white-space: nowrap;
}
.action-cell.action-icons {
white-space: nowrap;
}
.action-cell > .icon-link + .icon-link,
.action-cell > .text-link + .text-link {
margin-left: 6px;
}
.action-cell.actions-col .tool-svg {
width: 17px;
height: 17px;
}
.icon-link {
width: 28px;
height: 28px;
border: 1px solid #a8adb8;
border-radius: 7px;
text-decoration: none;
color: #365a8b;
font-size: 15px;
font-weight: 700;
line-height: 1;
display: inline-flex;
align-items: center;
justify-content: center;
background:
linear-gradient(180deg, rgba(255,255,255,0.88), rgba(255,255,255,0.16) 42%, rgba(255,255,255,0) 43%),
linear-gradient(180deg, #fafbfc 0%, #e8ebf1 100%);
box-shadow: inset 0 1px 0 rgba(255,255,255,0.90);
}
.icon-link:hover {
filter: brightness(1.03);
}
.icon-link-danger {
border-color: #c79e98;
color: #6f2e2a;
text-shadow: 0 1px 0 rgba(255,255,255,0.56), 0 0 1px rgba(255,255,255,0.16);
background:
radial-gradient(160% 100% at 50% -8%, rgba(255,255,255,0.94) 0%, rgba(255,255,255,0.48) 24%, rgba(255,255,255,0.12) 38%, rgba(255,255,255,0) 39%),
linear-gradient(180deg, #e8aea5 0%, #efc0b9 28%, #f5d3ce 58%, #fae3df 100%);
}
.icon-link-danger:hover {
filter: brightness(1.01);
}
.check-toggle {
text-decoration: none;
@@ -857,6 +1093,10 @@ code {
background: #edf8f0;
border-color: #b7d9c2;
}
.job-id-cell,
.job-id-cell code {
white-space: nowrap;
}
.table-wrap {
overflow: auto;
border: 1px solid var(--line);
@@ -891,6 +1131,24 @@ code {
.ui-table .status-col {
text-align: center;
}
.ui-table th.select-col,
.ui-table td.select-col {
width: 1%;
min-width: 46px;
max-width: 46px;
white-space: nowrap;
text-align: center;
padding-left: 8px;
padding-right: 8px;
}
.ui-table th.actions-col,
.ui-table td.actions-col {
width: 1%;
white-space: nowrap;
text-align: right;
padding-left: 8px;
padding-right: 10px;
}
.ui-table tbody tr:hover { background: linear-gradient(90deg, rgba(245,247,250,0.96), rgba(238,242,247,0.96)); }
.empty-cell {
color: var(--muted);