manager/templates/app/app.css
2023-04-28 17:29:41 +02:00

500 lines
7.5 KiB
CSS

.logo {
width: 15%;
border-radius: 100%;
margin-right: 5px;
}
.box {
display: flex;
padding: 5%;
color: white;
border-radius: 15px;
background-color: rgb(38, 37, 37);
font-size: 12px;
justify-content: space-between;
align-items: center;
margin-top: 5px;
}
.exitNotShow {
display: none;
}
.number {
font-size: 11px;
color: black;
box-shadow: 1px 1px 5px white;
border: none;
border-radius: 100%;
text-align: center;
justify-content: center;
vertical-align: middle;
width: 14px;
height: 14px;
background-color: white;
margin: 0;
position: absolute; /* Position the badge within the relatively positioned button */
top: 0;
right: -2px;
}
.list {
display: inline-block;
position: relative;
}
.controller-box {
display: flex;
flex-direction: column;
padding: 5%;
color: white;
border-radius: 15px;
background-color: rgb(38, 37, 37);
font-size: 12px;
justify-content: space-between;
align-items: center;
margin-top: 5px;
}
.signout {
background-color: transparent;
color: red;
border: none;
transition: all 0.2s ease 0s;
height: 30px;
width: 30px;
}
.signout:hover {
border-radius: 100%;
background-color: red;
border-color: transparent;
color: white;
}
.signout:active {
background-color: transparent;
color: red;
border: none;
transition: all 0.2s ease 0s;
}
.act {
display: flex;
flex-direction: row;
}
.settings {
background-color: transparent;
color: white;
border: none;
transition: all 0.2s ease 0s;
height: 30px;
width: 30px;
margin-right: 5px;
}
.settings:hover {
border-radius: 100%;
background-color: rgb(46, 196, 255);
border-color: transparent;
color: black;
}
.settings:active {
background-color: transparent;
color: rgb(46, 196, 255);
border: none;
transition: all 0.2s ease 0s;
}
.restart {
font-family: 'Open Sans', sans-serif !important;
background-color: transparent;
border: solid;
border-radius: 15px;
padding: 2%;
border-color: rgb(46, 196, 255);
color: white;
transition: all 0.2s ease 0s;
}
.restart:hover {
color: black;
background-color: rgb(46, 196, 255);
box-shadow: 2px 2px 5px rgb(46, 196, 255);
}
.restart:active {
background-color: transparent;
color: white;
}
.stLine {
display: flex;
flex-direction: row;
text-align: start;
align-items: center;
}
.stPct {
text-align: center;
}
.stLine p {
width: 100px;
margin: 0;
}
.online-light {
border-radius: 15%;
background-color: rgb(55, 255, 37);
padding: 2%;
color: black;
display: flex;
align-items: center;
vertical-align: center;
margin-left: 10px;
}
.numtext {
display: inline-block;
padding-top: 2px !important;
padding-left: 1px;
}
.thumbnail {
width: 30px;
height: 20px;
margin-right: 10px;
}
.title {
word-break: keep-all;
}
.grised {
filter : invert(50%);
}
.playbar {
width: 100%;
border: none;
row-gap: 10px;
display: flex;
text-align: center;
align-items: center;
justify-content: center;
gap: 10px;
}
.bbar {
width: 100%;
padding: 10%;
display: flex;
display: flex;
text-align: center;
align-items: center;
justify-content: space-between;
padding-bottom: 0;
}
.sbar {
width: 100%;
padding: 1%;
display: flex;
text-align: center;
align-items: center;
justify-content: space-between;
}
.durationText {
margin: 0;
margin-left: 5px;
}
input[type=range] {
height: 26px;
-webkit-appearance: none;
margin: 10px 0;
width: 100%;
background-color: transparent;
-webkit-user-select: none;
}
input[type=range]:focus {
outline: none;
}
input[type=range]::-webkit-slider-runnable-track {
width: 100%;
height: 8px;
cursor: pointer;
transition: 0.2s;
box-shadow: 1px 1px 2px #000000;
background: #B8B8B8;
border-radius: 50px;
border: 0px solid #000000;
}
input[type=range]::-webkit-slider-thumb {
box-shadow: 1px 1px 1px #000000;
border: 1px solid #000000;
height: 13px;
width: 13px;
border-radius: 50px;
background: #FFFFFF;
cursor: pointer;
-webkit-appearance: none;
margin-top: -3px;
}
input[type=range]:focus::-webkit-slider-runnable-track {
background: #B8B8B8;
}
input[type=range]:focus::-webkit-sl {
}
.secondary {
background-color: #171A21;
color: white;
border: none;
border-radius: 100%;
font-size: 30px;
padding: 2%;
padding-right: 7%;
padding-left: 7%;
transition: all 0.2s ease 0s;
border: solid;
border-width: 5px;
border-color: #171A21 ;
}
.secondary:active {
background-color: transparent;
}
.primary {
background-color: white ;
color: #171A21;
border: none;
border-radius: 100%;
font-size: 35px;
padding: 5%;
padding-right: 10%;
padding-left: 10%;
transition: all 0.2s ease 0s;
border: solid;
border-width: 5px;
border-color: white ;
}
.primary:active {
background-color: transparent;
color: white;
}
.third {
color: white;
background-color: transparent;
border: none;
border-radius: 100%;
text-shadow: 1px 1px 10px white;
font-size: 16px;
}
.third-join {
color: rgb(53, 255, 35);
background-color: transparent;
border: none;
border-radius: 100%;
text-shadow: 1px 1px 10px rgb(53, 255, 35);
font-size: 16px;
}
.third-leave {
color: rgb(255, 35, 35);
background-color: transparent;
border: none;
border-radius: 100%;
text-shadow: 1px 1px 10px rgb(255, 27, 27);
font-size: 16px;
}
.error {
color: rgb(255, 35, 35);
background-color: transparent;
border: none;
border-radius: 100%;
text-shadow: 1px 1px 5px rgb(255, 27, 27);
font-size: 12px;
text-align: center;
}
#listContent {
padding: 5%;
}
.infoVersion {
color: rgb(31, 30, 30);
text-align: center;
font-size: 10px;
}
.menu {
border: none;
padding: 5%;
color: white;
border-radius: 15px;
background-color: rgb(61, 61, 61);
font-size: 12px;
justify-content: space-between;
align-items: center;
width: 100%;
}
.listTitle {
color: white;
margin: 0;
font-size: 10px;
}
.menuheader {
display: flex;
flex-direction: row;
align-items: center;
justify-content: space-between;
text-align: center;
}
.listHeader {
text-align: center;
margin: 0;
font-size: 16px;
text-shadow: 1px 1px 3px white;
}
/* width */
::-webkit-scrollbar {
width: 5px;
margin-right: 10px;
}
/* Track */
::-webkit-scrollbar-track {
box-shadow: inset 0 0 5px grey;
border-radius: 10px;
}
/* Handle */
::-webkit-scrollbar-thumb {
background: #171A21;
border-radius: 10px;
}
.song {
display: flex;
flex-direction: row;
margin: 0;
vertical-align: middle;
align-items: center;
justify-content: space-between;
}
.titleSong {
width: 100%;
}
.finder {
margin-top: 10px;
width: 100%;
background-color: transparent;
transition: all 0.2s ease 0s;
border: solid white 1px;
border-radius: 15px;
padding: 7px;
color: white;
padding-left: 20px;
text-decoration: none;
margin-bottom: 10px;
}
.finder:hover {
box-shadow: 1px 1px 5px white;
}
.cp {
margin: 0;
}