Web radio
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
 
 
 
radio/css/style.css

148 lines
2.2 KiB

body {
background-color: rgb(62, 50, 64);
}
.parent {
width: 100%;
height: 100%;
position: fixed;
top: 0;
background: url(/pic/bg.jpg) no-repeat center center / cover;
left: 0;
display: flex;
align-items: center;
align-content: center;
justify-content: center;
overflow: auto;
}
#RadioBox{
width: 410px;
height: 350px;
background-color: rgba(0, 0, 0, 0.7);
border-radius: 10px;
padding: 0 5px;
color: #fff;
}
.tagBOX{
width: 410px;
height: 150px;
}
.tagA {
width: 100%;
height: 20px;
border-radius: 5px 5px 0 0;
border: #f54e4e;
background-color: #000;
color: #fff;
transition: 0.5s ease all;
outline: none;
cursor: pointer;
text-align: center;
margin-left: auto;
margin-right: auto
}
.tagA:hover {
color: #000;
background-color: #fff;
}
.tagB {
width: 100%;
//height: 20px;
border-radius: 0 0 5px 5px;
border: #f54e4e;
background-color: #fff;
color: #000;
transition: 0.5s ease all;
outline: none;
text-align: center;
margin-left: auto;
margin-right: auto
}
h1::before {
content: '';
display: inline-block;
margin:0 10px;
width: 25px;
height: 25px;
-webkit-border-radius: 25px;
-moz-border-radius: 25px;
border-radius: 25px;
background: red;
animation: blink 3s linear infinite;
}
@keyframes blink{
0%{opacity: 0;}
25%{opacity: .5;}
50%{opacity: 1;}
75%{opacity: .5;}
100%{opacity: 0;}
}
h1 {
text-align: center
float:left;
margin:10px 50px;
}
.btn {
width: 100px;
height: 60px;
border-radius: 5px;
border: #f54e4e;
background-color: #000;
color: #fff;
transition: 0.5s ease all;
outline: none;
cursor: pointer;
text-align: center;
margin: auto;
justify-content : center;
}
.btn:hover {
color: #000;
background-color: #fff;
}
.btn-wrap {
margin: auto;
display: -webkit-flex;
display: -moz-flex;
display: -ms-flex;
display: -o-flex;
display: flex;
}
.mute_btn {
width: 30px;
height: 30px;
border-radius: 5px;
border: #f54e4e;
background-color: #000;
color: #fff;
transition: 0.5s ease all;
outline: none;
cursor: pointer;
text-align: center;
margin-right: 10px;
//margin: auto;
}
.volume-wrap {
align-items: center;
justify-content: center;
display: flex;
}
DIV {
text-align: center
}