96 lines
2 KiB
SCSS
96 lines
2 KiB
SCSS
|
@import '../theme';
|
||
|
|
|
||
|
|
.column{
|
||
|
|
width: 20rem;
|
||
|
|
min-width: 20rem;
|
||
|
|
display: flex;
|
||
|
|
flex-direction: column;
|
||
|
|
text-align: center;
|
||
|
|
background: $bg-2;
|
||
|
|
@media (prefers-color-scheme: light) {
|
||
|
|
background: $bga-2;
|
||
|
|
}
|
||
|
|
border-radius: 0.5rem;
|
||
|
|
.column-title-bar{
|
||
|
|
display: flex;
|
||
|
|
align-items: center;
|
||
|
|
padding: 0.5rem;
|
||
|
|
h2{
|
||
|
|
|
||
|
|
}
|
||
|
|
.add-card-button{
|
||
|
|
margin-left: auto;
|
||
|
|
width: 3rem;
|
||
|
|
height: 3rem;
|
||
|
|
background: transparent;
|
||
|
|
color: $fg-2;
|
||
|
|
border: $fg-2 solid 2px;
|
||
|
|
border-radius: 0.5rem;
|
||
|
|
|
||
|
|
&:hover{
|
||
|
|
box-shadow: 0 0 0.5rem 0 $fg-1 ;
|
||
|
|
|
||
|
|
}
|
||
|
|
@media (prefers-color-scheme: light) {
|
||
|
|
color: $fga-2;
|
||
|
|
border-color: $fga-2;
|
||
|
|
&:hover {
|
||
|
|
box-shadow: inset 0 0 0.5rem 0 $fga-2;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
}
|
||
|
|
.add-card-textarea-wrapper{
|
||
|
|
|
||
|
|
width: 100%;
|
||
|
|
padding: 0.5rem;
|
||
|
|
box-sizing: border-box;
|
||
|
|
.add-card-textarea{
|
||
|
|
box-sizing: border-box;
|
||
|
|
width: 100%;
|
||
|
|
min-width: 100%;
|
||
|
|
max-width: 100%;
|
||
|
|
height: 7rem;
|
||
|
|
min-height: 7rem;
|
||
|
|
max-height: 15rem;
|
||
|
|
border-radius: 0.5rem;
|
||
|
|
border: none;
|
||
|
|
background: $bg-4;
|
||
|
|
color: $fg-2;
|
||
|
|
@media (prefers-color-scheme: light) {
|
||
|
|
background: $bga-4;
|
||
|
|
color: $fga-2;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
.card-list-wrapper{
|
||
|
|
padding: 0.5rem;
|
||
|
|
height: 100%;
|
||
|
|
.card-list {
|
||
|
|
list-style-type: none;
|
||
|
|
display: flex;
|
||
|
|
padding: 0;
|
||
|
|
margin: 0;
|
||
|
|
flex-direction: column;
|
||
|
|
border-radius: 0.55rem;
|
||
|
|
gap: 0.5rem;
|
||
|
|
height: 100%;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
&:first-of-type, &:last-of-type {
|
||
|
|
.card-list-wrapper > .card-list {
|
||
|
|
background: repeating-linear-gradient(-45deg, $fg-5, $fg-5 0.5rem, $bg-3 0.5rem, $bg-3 1.5rem);
|
||
|
|
@media (prefers-color-scheme: light) {
|
||
|
|
background: repeating-linear-gradient(-45deg, $fga-5, $fga-5 0.5rem, $bga-3 0.5rem, $bga-3 1.5rem);
|
||
|
|
border-color: $fga-2;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|