mirror of
https://github.com/wavetermdev/waveterm.git
synced 2025-01-02 18:39:05 +01:00
71 lines
1.9 KiB
SCSS
71 lines
1.9 KiB
SCSS
.workspace-editor {
|
|
width: 100%;
|
|
.input {
|
|
margin: 5px 0 10px;
|
|
}
|
|
|
|
.color-selector {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fit, minmax(15px, 15px)); // Ensures each color circle has a fixed 14px size
|
|
grid-gap: 18.5px; // Space between items
|
|
justify-content: center;
|
|
align-items: center;
|
|
margin-top: 5px;
|
|
padding-bottom: 15px;
|
|
border-bottom: 1px solid var(--modal-border-color);
|
|
|
|
.color-circle {
|
|
width: 15px;
|
|
height: 15px;
|
|
border-radius: 50%;
|
|
cursor: pointer;
|
|
position: relative;
|
|
|
|
// Border offset outward
|
|
&:before {
|
|
content: "";
|
|
position: absolute;
|
|
top: -3px;
|
|
left: -3px;
|
|
right: -3px;
|
|
bottom: -3px;
|
|
border-radius: 50%;
|
|
border: 1px solid transparent;
|
|
}
|
|
|
|
&.selected:before {
|
|
border-color: var(--main-text-color); // Highlight for the selected circle
|
|
}
|
|
}
|
|
}
|
|
|
|
.icon-selector {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fit, minmax(16px, 16px)); // Ensures each color circle has a fixed 14px size
|
|
grid-column-gap: 17.5px; // Space between items
|
|
grid-row-gap: 13px; // Space between items
|
|
justify-content: center;
|
|
align-items: center;
|
|
margin-top: 15px;
|
|
|
|
.icon-item {
|
|
font-size: 15px;
|
|
color: oklch(from var(--modal-bg-color) calc(l * 1.5) c h);
|
|
cursor: pointer;
|
|
transition: color 0.3s ease;
|
|
|
|
&.selected,
|
|
&:hover {
|
|
color: var(--main-text-color);
|
|
}
|
|
}
|
|
}
|
|
|
|
.delete-ws-btn-wrapper {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
margin-top: 10px;
|
|
}
|
|
}
|