Файл: voice/style/style.css
Строк: 70
.fm-voice-wrapper {
display: grid;
grid-template-columns: repeat( 100,
1fr);
grid-template-rows: repeat(1, 30px);
grid-gap:
5px;
grid-auto-rows: 0;
grid-template-areas: ". a a
.";
padding: 3px 3px 5px 0px;
}
/*------------None--------------*/
fm.fm-voice-default,
fm.fm-voice-camera, fm.fm-voice-analyser,
fm.fm-voice-start,
fm.fm-voice-end, fm.fm-voice-start-default, fm.fm-voice-loading,
fm.fm-voice-error {
display:
none;
}
/*----------Text-----------*/
.fm-voice-default,
.fm-voice-camera, .fm-voice-microphone {
position: relative;
width:
28px;
height: 28px;
top: -3px;
left: 10px;
border-top: 1px solid
rgba(0,0,52,0.5);
border-bottom: 1px solid rgba(255, 255, 255,
0.0);
border-left: 1px solid rgba(0,0,52,0.5);
border-right: 1px solid
rgba(255, 255, 255, 0.0);
-moz-border-radius:
50%;
-webkit-border-radius: 50%;
border-radius: 50%;
padding: 1px 1px
1px 1px;
cursor: pointer;
}
.fm-voice-default:before,
.fm-voice-camera:before, .fm-voice-microphone:before {
position:
absolute;
top: 3px;
left: 93%;
height: 16px;
font-family:
"Some cool font with glyphs", serif;
color:
rgba(0,0,52,0.5);
font-size: 8px;
white-space:
pre;
}
.fm-voice-default::before {
content:
'Старт';
}
.fm-voice-camera::before {
content:
'Видео';
}
.fm-voice-microphone:before {
content:
'Аудио';
}
/*----------Icons-----------*/
.fm-voice-default:after,
.fm-voice-camera:after, .fm-voice-microphone:after {
position:
absolute;
content: "";
width: 18px;
height:
18px;
background-color: rgba(0,0,52,0.5);
-webkit-mask-size:
100%;
mask-size: 100%;
top: 0;
left: 0;
bottom: 0;
right:
0;
margin: auto;
z-index: 1000;
}
/*--------------Url
icons--------------*/
.fm-voice-default:after {
-webkit-mask-image:
url(default.svg);
mask-image:
url(default.svg);
}
.fm-voice-camera:after {
-webkit-mask-image:
url(camera.svg);
mask-image:
url(camera.svg);
}
.fm-voice-microphone:after {
-webkit-mask-image:
url(microphone.svg);
mask-image: url(microphone.svg);
}
/*----TEXT:
Default, Start, End, Loaging, Error---------*/
.fm-voice-start-default,
.fm-voice-start, .fm-voice-end, .fm-voice-loading, .fm-voice-error
{
position: relative;
margin-top: 23px;
margin-left: -87px;
height:
10px;
max-width: 55px;
white-space: pre;
font-size:
8px;
font-family: "Some cool font with glyphs", serif;
color:
rgba(0,0,52,0.5);
text-align: left;
line-height: 1.5em;
z-index:
1000;
}
.fm-voice-start:hover, .fm-voice-end:hover {
cursor:
pointer;
}
/*---------Count time---------*/
.fm-voice-count
{
font-family: "Some cool font with glyphs",
serif;
margin-top: 10px;
margin-left: -39px;
height: 20px;
width:
100px;
white-space: pre;
font-size: 5px;
color:
rgba(0,0,52,0.5);
text-align: center;
}
/*--------Analyser---------*/
.fm-voice-analyser {
margin-top:
25px;
content: "";
position: absolute;
height:
1.5px;
background-color: rgba(0,0,52,0.5);
border-right: 2px solid
rgba(255,0,0,5.5);
margin-left: 180px;
z-index: 100;
/* RGB —
255,242,0 */;
}