manager/templates/app/app.css

651 lines
9.6 KiB
CSS
Raw Normal View History

2023-04-26 21:26:20 +00:00
.logo {
2023-04-30 21:42:49 +00:00
width: 20%;
2023-04-26 21:26:20 +00:00
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;
}
2023-04-30 21:42:49 +00:00
2023-04-28 15:29:41 +00:00
.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;
}
2023-04-26 21:26:20 +00:00
.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;
}
2023-05-01 21:39:49 +00:00
.searchTitle {
margin: 0;
word-break: break-all;
}
2023-04-26 21:26:20 +00:00
.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;
2023-04-28 15:29:41 +00:00
}
.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;
}
2023-04-30 17:00:04 +00:00
.bug {
font-family: 'Open Sans', sans-serif !important;
background-color: transparent;
border: solid;
border-radius: 15px;
padding: 2%;
border-color: rgb(255, 46, 46);
color: white;
transition: all 0.2s ease 0s;
}
.bug:hover {
background-color: rgb(255, 46, 46);
box-shadow: 2px 2px 5px rgb(255, 46, 46);
}
.bug:active {
background-color: transparent;
}
2023-04-28 15:29:41 +00:00
.stLine {
display: flex;
flex-direction: row;
text-align: start;
align-items: center;
2023-04-30 17:00:04 +00:00
margin-top: 10px;
2023-04-28 15:29:41 +00:00
}
.stPct {
text-align: center;
}
.stLine p {
width: 100px;
margin: 0;
2023-04-26 21:26:20 +00:00
}
.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;
}
2023-04-28 15:29:41 +00:00
.numtext {
display: inline-block;
padding-top: 2px !important;
padding-left: 1px;
}
2023-04-26 21:26:20 +00:00
.thumbnail {
width: 30px;
height: 20px;
margin-right: 10px;
}
.title {
word-break: keep-all;
}
2023-04-28 15:29:41 +00:00
.grised {
filter : invert(50%);
}
2023-04-26 21:26:20 +00:00
.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;
2023-04-28 15:29:41 +00:00
padding-bottom: 0;
}
.sbar {
width: 100%;
padding: 1%;
display: flex;
text-align: center;
align-items: center;
justify-content: space-between;
}
.durationText {
2023-04-26 21:26:20 +00:00
2023-04-28 15:29:41 +00:00
margin: 0;
margin-left: 5px;
2023-04-26 21:26:20 +00:00
}
2023-04-28 15:29:41 +00:00
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 {
}
2023-04-29 21:23:37 +00:00
.patchInfo {
padding: 5%;
margin: 0;
}
2023-04-28 15:29:41 +00:00
2023-04-26 21:26:20 +00:00
.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;
}
.infoVersion {
2023-04-29 21:23:37 +00:00
color: rgb(255, 255, 255);
2023-04-26 21:26:20 +00:00
text-align: center;
2023-04-28 15:29:41 +00:00
font-size: 10px;
2023-04-26 21:26:20 +00:00
}
.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 {
2023-04-30 17:00:04 +00:00
display: flex;
flex-direction: row;
margin: 0;
vertical-align: middle;
align-items: center;
width: 100%;
padding-left: 5%;
padding-right: 5%;
padding-top: 2%;
padding-bottom: 2%;
justify-content: space-between;
transition: 0.2s;
cursor: pointer;
-webkit-user-select: none;
}
.ressong {
2023-04-26 21:26:20 +00:00
display: flex;
flex-direction: row;
margin: 0;
2023-05-01 21:39:49 +00:00
margin-bottom: 5px;
2023-04-26 21:26:20 +00:00
vertical-align: middle;
align-items: center;
justify-content: space-between;
2023-04-30 17:00:04 +00:00
}
#listDialog {
padding: 0 !important;
padding-bottom: 5% !important;
}
#listDialog .menuheader {
padding: 5%;
}
#listContent {
padding-top: 5%;
padding-bottom: 5%;
}
.song:hover {
background-color: #2d2d2d ;
2023-04-26 21:26:20 +00:00
}
2023-04-30 17:00:04 +00:00
2023-04-26 21:26:20 +00:00
.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;
2023-04-28 15:29:41 +00:00
}
.cp {
margin: 0;
2023-04-29 21:23:37 +00:00
}
.devversion {
2023-04-30 17:00:04 +00:00
height: 10px;
width: 100%;
2023-04-30 21:42:49 +00:00
background-color: rgb(99, 3, 3);
2023-04-30 17:00:04 +00:00
color: white;
font-size: 10px;
text-align: center;
position: absolute;
bottom: 0;
transition: 0.5s;
}
.devversion:hover {
position: absolute;
content: initial;
height: 40px;
}
.devversion .dp {
display: none;
}
.devversion:hover .dp {
display: initial;
2023-04-29 21:23:37 +00:00
position: absolute;
text-align: center;
2023-04-30 17:00:04 +00:00
bottom: -9px;
right: 25%;
}
.sendChos {
2023-04-29 21:23:37 +00:00
width: 100%;
2023-04-30 17:00:04 +00:00
margin-bottom: 5px;
margin-top: 5px;
border-color: #1c1c1c;
border-radius: 15px;
border-width: 2px;
background-color: transparent;
2023-04-29 21:23:37 +00:00
color: white;
2023-04-30 17:00:04 +00:00
padding: 2%;
2023-04-29 21:23:37 +00:00
}
2023-04-30 17:00:04 +00:00
.sendChos option {
background-color:rgb(61, 61, 61);
}
.sendText {
margin-top: 5px;
width: 100%;
height: 100px;
padding: 5%;
border-radius: 5px;
margin-bottom: 10px;
}
.send {
display: flex;
flex-direction: column;
align-items: center;
2023-04-26 21:26:20 +00:00
}