shinuwa/sokko-g
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Split large Sass files into focused partials
All checks were successful
Deploy Sokko G / deploy (push) Successful in 15s
Details

Browse source
This commit is contained in:
Shinuwa 2026-08-25 08:48:47 +02:00
parent 7d2a25c672
commit fe91d18624
34 changed files with 3642 additions and 3556 deletions
Download patch file Download diff file Expand all files Collapse all files

186
website/src/styles/toolboxes/shared-controls/_entries.scss Normal file
View file

@ -0,0 +1,186 @@
// Rôle : regroupe les entrées, champs et états de danger partagés des tool-split.
.tool-split-entry-list {
display: grid;
gap: 6px;
margin: 0;
padding: 0;
list-style: none;
}
.tool-split-entry-list .tool-split-entry-list {
position: relative;
margin-top: 6px;
padding-left: 22px;
}
.tool-split-entry-list .tool-split-entry-list::before {
content: "";
position: absolute;
top: -3px;
bottom: 14px;
left: 7px;
width: 1px;
background: linear-gradient(180deg, rgba(246, 196, 83, 0.52), rgba(139, 92, 246, 0.2));
}
.tool-split-entry-list .tool-split-entry-list > li {
position: relative;
}
.tool-split-entry-list .tool-split-entry-list > li::before {
content: "";
position: absolute;
top: 18px;
left: -15px;
width: 11px;
height: 1px;
background: rgba(246, 196, 83, 0.52);
}
.tool-split-entry {
display: grid;
grid-template-columns: minmax(0, 1fr) 34px 34px;
gap: 7px;
}
.tool-split-entry-list li.is-editing > .tool-split-entry {
grid-template-columns: auto minmax(0, 1fr) 34px 34px;
}
.tool-split-entry > button {
min-width: 0;
min-height: 36px;
padding: 0 10px;
}
.tool-split-entry-summary,
.tool-split-entry-value {
display: inline-flex;
box-sizing: border-box;
align-items: center;
justify-content: flex-start;
border: 1px solid rgba(165, 180, 252, 0.09);
border-radius: var(--radius-md);
border-color: rgba(165, 180, 252, 0.09);
background: rgba(21, 26, 48, 0.58);
color: var(--color-text-secondary);
text-align: left;
}
.tool-split-entry-summary {
width: 100%;
min-height: 36px;
padding: 0 10px;
}
.tool-split-entry-value {
width: fit-content;
}
.tool-split-entry-value.is-readonly {
min-height: 36px;
padding: 0 10px;
background: rgba(21, 26, 48, 0.38);
cursor: default;
opacity: 0.72;
}
.tool-split-entry-summary:hover,
.tool-split-entry-value:not(.is-readonly):hover {
border-color: rgba(196, 181, 253, 0.2);
background: rgba(21, 26, 48, 0.72);
}
.tool-split-entry-summary > span {
overflow: hidden;
color: var(--color-text-secondary);
text-overflow: ellipsis;
white-space: nowrap;
}
.tool-split-entry-summary strong,
.tool-split-entry-value strong {
color: var(--color-text-primary);
}
.tool-split-entry-label {
box-sizing: border-box;
width: 100%;
min-width: 0;
min-height: 36px;
padding: 0 10px;
overflow: hidden;
border-color: rgba(165, 180, 252, 0.09);
background: rgba(21, 26, 48, 0.38);
color: var(--color-text-secondary);
text-overflow: ellipsis;
white-space: nowrap;
}
.tool-split-entry-label:hover,
.tool-split-entry-label:focus {
border-color: rgba(196, 181, 253, 0.22);
background: rgba(21, 26, 48, 0.58);
color: var(--color-text-primary);
}
.mix-tags-input-wrap--small .mix-tags-input {
display: block;
height: 34px;
min-height: 34px;
padding: 6px 4px 6px 9px;
white-space: nowrap;
text-overflow: clip;
}
.mix-tags-input-wrap--small .mix-tags-input-tag {
top: 0;
width: 62px;
min-width: 62px;
height: 22px;
}
.mix-tags-input-wrap--small {
height: 36px;
min-height: 36px;
max-height: 36px;
}
.mix-tags-input-wrap--small .mix-tags-input-insert-button {
top: 0;
right: 0;
bottom: 0;
width: 34px;
min-width: 34px;
height: 34px;
min-height: 34px;
border-radius: 0 calc(var(--radius-md) - 1px) calc(var(--radius-md) - 1px) 0;
}
.mix-tags-input-wrap--small .mix-tags-input-insert-button .ui-icon {
display: block;
width: 14px;
height: 14px;
}
.tool-split-entry .ui-icon {
width: 16px;
height: 16px;
opacity: 0.72;
}
.tool-split-entry > button:not(.tool-split-entry-summary, .tool-split-entry-value) {
min-height: 36px;
}
.tool-split-entry-list li.active > .tool-split-entry > .tool-split-entry-summary,
.tool-split-entry-list li.active > .tool-split-entry > .tool-split-entry-value,
.tool-split-entry-list li.active > .tool-split-entry > .tool-split-entry-label {
border-color: var(--color-accent-gold);
background:
linear-gradient(135deg, rgba(246, 196, 83, 0.09), rgba(139, 92, 246, 0.1)),
rgba(7, 10, 24, 0.48);
color: var(--color-text-primary);
box-shadow: 0 0 0 1px rgba(246, 196, 83, 0.06);
}