171 lines
2.9 KiB
CSS
171 lines
2.9 KiB
CSS
.sidebar-wrapper {
|
|
position: fixed;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
height: 100%;
|
|
right: -300px;
|
|
transition: box-shadow 1s, right .6s ease-in-out;
|
|
z-index: 2;
|
|
}
|
|
|
|
.sidebar {
|
|
width: 300px;
|
|
height: 100%;
|
|
padding: 20px;
|
|
background: var(--background);
|
|
overflow: auto;
|
|
}
|
|
|
|
.show-sidebar {
|
|
right: 0;
|
|
box-shadow: 0px 0px 20px 2px rgba(0, 0, 0, 0.4);
|
|
}
|
|
|
|
.sidebar__settings {
|
|
display: flex;
|
|
flex-direction: column;
|
|
color: var(--foreground);
|
|
width: 100%;
|
|
padding-bottom: 25px;
|
|
}
|
|
|
|
.sidebar h4 {font-size: 13px;}
|
|
|
|
.sidebar h3 {
|
|
font-size: 15px;
|
|
padding-bottom: 10px;
|
|
margin-bottom: 10px;
|
|
border-bottom: 2px solid var(--accent);
|
|
}
|
|
|
|
.sidebar__input {
|
|
width: 100%;
|
|
border-color: transparent;
|
|
margin: 5px 0 20px 0;
|
|
}
|
|
|
|
.sidebar__input:hover {border: 2px solid var(--accent);}
|
|
|
|
.sidebar__input:focus {
|
|
color: var(--accent);
|
|
border: 2px solid var(--accent);
|
|
}
|
|
|
|
.sidebar__input:focus::placeholder {
|
|
color: var(--accent);
|
|
transition: .3s;
|
|
}
|
|
|
|
.sidebar__button-container {
|
|
display: flex;
|
|
flex-direction: row;
|
|
justify-content: space-between;
|
|
}
|
|
|
|
.sidebar__button {
|
|
outline: none;
|
|
border: none;
|
|
background-color: var(--accent);
|
|
color: white;
|
|
cursor: pointer;
|
|
width: 60px;
|
|
padding: 7px 5px;
|
|
border-radius: 3px;
|
|
transition: .3s;
|
|
}
|
|
|
|
.sidebar__button:hover {
|
|
filter: brightness(.75);
|
|
box-shadow: 0px 2px 5px 0px rgba(0, 0, 0, .4);
|
|
transform: translateY(-2px);
|
|
}
|
|
|
|
.sidebar__button:active {transform: translateY(0px);}
|
|
|
|
.sidebar__radio {
|
|
display: flex;
|
|
flex-direction: row;
|
|
}
|
|
|
|
.control {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
position: relative;
|
|
font-weight: bold;
|
|
padding-left: 25px;
|
|
margin: 0 20px 20px 0;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.control input {
|
|
position: absolute;
|
|
z-index: -1;
|
|
opacity: 0;
|
|
}
|
|
|
|
.control__indicator {
|
|
position: absolute;
|
|
left: 0;
|
|
height: 20px;
|
|
width: 20px;
|
|
background: var(--input);
|
|
transition: .3s;
|
|
}
|
|
|
|
.control:hover input ~ .control__indicator,
|
|
.control input:checked ~ .control__indicator,
|
|
.control input:focus ~ .control__indicator {background: var(--accent);}
|
|
|
|
.control__indicator::after {
|
|
box-sizing: unset;
|
|
content: '';
|
|
position: absolute;
|
|
display: none;
|
|
}
|
|
|
|
.control input:checked ~ .control__indicator::after {display: block;}
|
|
|
|
.control-radio .control__indicator {
|
|
border-radius: 50%;
|
|
}
|
|
|
|
.control-radio .control__indicator::after {
|
|
left: 7px;
|
|
top: 7px;
|
|
height: 6px;
|
|
width: 6px;
|
|
border-radius: 50%;
|
|
background: #ffffff;
|
|
}
|
|
|
|
input[type="color"] {
|
|
background: var(--input);
|
|
border: 2px solid transparent;
|
|
outline: none;
|
|
width: 100%;
|
|
height: 40px;
|
|
transition: .3s;
|
|
margin: 5px 0 20px 0;
|
|
border-radius: 3px;
|
|
cursor: pointer;
|
|
}
|
|
|
|
input[type="color"]:hover,
|
|
input[type="color"]:focus {border: 2px solid var(--accent);}
|
|
|
|
input[type="color"]::-webkit-color-swatch-wrapper {
|
|
padding: 5px 5px;
|
|
}
|
|
|
|
input[type="color"]::-webkit-color-swatch {
|
|
border: none;
|
|
border-radius: 3px;
|
|
box-shadow: 0px 1px 5px rgba(0, 0, 0, .5);
|
|
}
|
|
|
|
input[type=color]::-moz-color-swatch {
|
|
border: none;
|
|
border-radius: 3px;
|
|
} |