2024-06-11 17:13:45 +00:00

112 lines
1.9 KiB
Plaintext
Executable File

@import "@styles/vars.less";
.tools-bar-wrapper {
position: sticky;
top: 0;
right: 0;
height: 100vh;
height: 100dvh;
max-width: 420px;
z-index: 150;
padding: 10px;
.visible {
min-width: 320px;
}
&:not(.visible) {
min-width: 0;
padding: 0;
}
}
.tools-bar {
display: flex;
flex-direction: column;
width: 100%;
height: 100%;
border-radius: 12px;
border-radius: @sidebar_borderRadius;
box-shadow: @card-shadow;
padding: 10px;
background-color: var(--background-color-accent);
gap: 20px;
flex: 0;
.card {
display: flex;
flex-direction: column;
background-color: var(--background-color-primary);
border-radius: 12px;
padding: 20px;
isolation: isolate;
h1,
h2 {
width: fit-content;
margin: 0;
}
&.header {
position: relative;
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
width: 100%;
margin-bottom: 10px;
z-index: 150;
-webkit-box-shadow: 0 0 0 1px rgba(63, 63, 68, 0.05), 0 1px 3px 0 var(--shadow-color);
-moz-box-shadow: 0 0 0 1px rgba(63, 63, 68, 0.05), 0 1px 3px 0 var(--shadow-color);
box-shadow: 0 0 0 1px rgba(63, 63, 68, 0.05), 0 1px 3px 0 var(--shadow-color);
}
&.content {
position: relative;
transform: translateY(-30px);
padding-top: 35px;
z-index: 45;
}
}
.attached_renders {
position: sticky;
bottom: 0;
right: 0;
display: flex;
flex-direction: column;
align-items: center;
justify-content: flex-end;
width: 100%;
height: 100%;
gap: 10px;
}
}