Files
jellyplist/static/css/styles.css

127 lines
1.9 KiB
CSS

body {
/* background-color: #141A32; */
}
.sidebar {
background-color: #1a1d21;
height: 100vh;
padding-top: 20px;
padding-left: 10px;
color: white;
}
.top-bar {
background-color: #1a1d21;
}
.sidebar h3 {
color: white;
padding-left: 15px;
}
.nav-link {
color: #c2c7d0;
display: flex;
align-items: center;
padding: 10px 15px;
}
.nav-link:hover {
background-color: #343a40;
border-radius: 5px;
}
.nav-link.active {
background-color: #6f42c1;
border-radius: 5px;
color: white;
}
.nav-link i {
margin-right: 10px;
}
.sidebar-logo {
display: flex;
align-items: center;
justify-content: center;
}
.sidebar-logo img {
width: 140px;
margin-right: 10px;
}
.logo img {
width: 100%;
}
@media screen and (min-width: 1600px) {
.modal-xl {
max-width: 90%;
/* New width for default modal */
}
}
.searchbar {
margin-bottom: auto;
margin-top: auto;
height: 60px;
background-color: #353b48;
border-radius: 30px;
padding: 10px;
}
.search_input {
color: white;
border: 0;
outline: 0;
background: none;
width: 450px;
caret-color: transparent;
line-height: 40px;
transition: width 0.4s linear;
}
.searchbar:hover>.search_input {
/* padding: 0 10px; */
width: 450px;
caret-color: red;
/* transition: width 0.4s linear; */
}
.searchbar:hover>.search_icon {
background: white;
color: #e74c3c;
}
.search_icon {
height: 40px;
width: 40px;
float: right;
display: flex;
justify-content: center;
align-items: center;
border-radius: 50%;
color: white;
text-decoration: none;
}
.btn-pulsing {
animation: pulse 2s infinite;
}
@keyframes pulse {
0% {
transform: scale(1);
}
50% {
transform: scale(1.08);
}
100% {
transform: scale(1);
}
}