project-totopia/w-demo.com_capture/html_sources/유저1/user_실시간페이지_files/style(2).css

215 lines
21 KiB
CSS
Raw Permalink Normal View History

2019-07-20 21:39:16 +00:00
.topProgressbar{
position: relative;
width:0px;
height:0px;
padding:0px 0px;
border-bottom:1px solid rgba(255,255,255,0.25);
border-radius:16px;
-webkit-box-shadow:0px 4px 4px -4px rgba(255, 255, 255, 0.4),0px -3px 3px -3px rgba(255, 255, 255, 0.25),inset 0px 0px 12px 0px rgba(0, 0, 0, 0.5);
box-shadow:0px 4px 4px -4px rgba(255, 255, 255, 0.4),0px -3px 3px -3px rgba(255, 255, 255, 0.25),inset 0px 0px 12px 0px rgba(0, 0, 0, 0.5);
}
.topProgressbar:before{
position:absolute;
display:block;
content:"";
width:100px;
height:10px;
top:-8px;
left:0px;
-webkit-border-radius:20px;
border-radius:20px;
background:#69b4f9;
-webkit-box-shadow:inset 0px 0px 6px 0px rgba(0, 0, 0, 0.85);;
box-shadow:inset 0px 0px 6px 0px rgba(0, 0, 0, 0.85);
border:1px solid rgba(0,0,0,0.8);
}
.topBar {
position:absolute;
display:block;
width:0px;
height:11px;
top:-8px;
left:0px;
background:rgb(126,234,25);
background:-moz-linear-gradient(top, rgba(126,234,25,1) 0%, rgba(83,173,0,1) 100%);
background:-webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(126,234,25,1)), color-stop(100%,rgba(83,173,0,1)));
background:-webkit-linear-gradient(top, rgba(126,234,25,1) 0%,rgba(83,173,0,1) 100%);
background:-o-linear-gradient(top, rgba(126,234,25,1) 0%,rgba(83,173,0,1) 100%);
background:-ms-linear-gradient(top, rgba(126,234,25,1) 0%,rgba(83,173,0,1) 100%);
background:linear-gradient(to bottom, rgba(126,234,25,1) 0%,rgba(83,173,0,1) 100%);
filter:progid:DXImageTransform.Microsoft.gradient( startColorstr='#7eea19', endColorstr='#53ad00',GradientType=0 );
-webkit-border-radius:16px;
border-radius:16px;
-webkit-box-shadow:0px 0px 12px 0px rgba(126, 234, 25, 1),inset 0px 1px 0px 0px rgba(255, 255, 255, 0.45),inset 1px 0px 0px 0px rgba(255, 255, 255, 0.25),inset -1px 0px 0px 0px rgba(255, 255, 255, 0.25);
box-shadow:0px 0px 12px 0px rgba(126, 234, 25, 1),inset 0px 1px 0px 0px rgba(255, 255, 255, 0.45),inset 1px 0px 0px 0px rgba(255, 255, 255, 0.25),inset -1px 0px 0px 0px rgba(255, 255, 255, 0.25);
overflow:hidden;
}
.topBar.color2 {
background:rgb(229,195,25);
background:-moz-linear-gradient(top, rgba(229,195,25,1) 0%, rgba(168,140,0,1) 100%);
background:-webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(229,195,25,1)), color-stop(100%,rgba(168,140,0,1)));
background:-webkit-linear-gradient(top, rgba(229,195,25,1) 0%,rgba(168,140,0,1) 100%);
background:-o-linear-gradient(top, rgba(229,195,25,1) 0%,rgba(168,140,0,1) 100%);
background:-ms-linear-gradient(top, rgba(229,195,25,1) 0%,rgba(168,140,0,1) 100%);
background:linear-gradient(to bottom, rgba(229,195,25,1) 0%,rgba(168,140,0,1) 100%);
filter:progid:DXImageTransform.Microsoft.gradient( startColorstr='#e5c319', endColorstr='#a88c00',GradientType=0 );
-webkit-box-shadow:0px 0px 12px 0px rgba(229, 195, 25, 1),inset 0px 1px 0px 0px rgba(255, 255, 255, 0.45),inset 1px 0px 0px 0px rgba(255, 255, 255, 0.25),inset -1px 0px 0px 0px rgba(255, 255, 255, 0.25);
box-shadow:0px 0px 12px 0px rgba(229, 195, 25, 1),inset 0px 1px 0px 0px rgba(255, 255, 255, 0.45),inset 1px 0px 0px 0px rgba(255, 255, 255, 0.25),inset -1px 0px 0px 0px rgba(255, 255, 255, 0.25);
}
.topBar.color3 {
background:rgb(232,25,87);
background:-moz-linear-gradient(top, rgba(232,25,87,1) 0%, rgba(170,0,51,1) 100%);
background:-webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(232,25,87,1)), color-stop(100%,rgba(170,0,51,1)));
background:-webkit-linear-gradient(top, rgba(232,25,87,1) 0%,rgba(170,0,51,1) 100%);
background:-o-linear-gradient(top, rgba(232,25,87,1) 0%,rgba(170,0,51,1) 100%);
background:-ms-linear-gradient(top, rgba(232,25,87,1) 0%,rgba(170,0,51,1) 100%);
background:linear-gradient(to bottom, rgba(232,25,87,1) 0%,rgba(170,0,51,1) 100%);
filter:progid:DXImageTransform.Microsoft.gradient( startColorstr='#e81957', endColorstr='#aa0033',GradientType=0 );
-webkit-box-shadow:0px 0px 12px 0px rgba(232, 25, 87, 1),inset 0px 1px 0px 0px rgba(255, 255, 255, 0.45),inset 1px 0px 0px 0px rgba(255, 255, 255, 0.25),inset -1px 0px 0px 0px rgba(255, 255, 255, 0.25);
box-shadow:0px 0px 12px 0px rgba(232, 25, 87, 1),inset 0px 1px 0px 0px rgba(255, 255, 255, 0.45),inset 1px 0px 0px 0px rgba(255, 255, 255, 0.25),inset -1px 0px 0px 0px rgba(255, 255, 255, 0.25);
}
.topBar.color4 {
background:rgb(24,109,226);
background:-moz-linear-gradient(top, rgba(24,109,226,1) 0%, rgba(0,69,165,1) 100%);
background:-webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(24,109,226,1)), color-stop(100%,rgba(0,69,165,1)));
background:-webkit-linear-gradient(top, rgba(24,109,226,1) 0%,rgba(0,69,165,1) 100%);
background:-o-linear-gradient(top, rgba(24,109,226,1) 0%,rgba(0,69,165,1) 100%);
background:-ms-linear-gradient(top, rgba(24,109,226,1) 0%,rgba(0,69,165,1) 100%);
background:linear-gradient(to bottom, rgba(24,109,226,1) 0%,rgba(0,69,165,1) 100%);
filter:progid:DXImageTransform.Microsoft.gradient( startColorstr='#186de2', endColorstr='#0045a5',GradientType=0 );
-webkit-box-shadow:0px 0px 12px 0px rgba(24, 109, 226, 1),inset 0px 1px 0px 0px rgba(255, 255, 255, 0.45),inset 1px 0px 0px 0px rgba(255, 255, 255, 0.25),inset -1px 0px 0px 0px rgba(255, 255, 255, 0.25);
box-shadow:0px 0px 12px 0px rgba(24, 109, 226, 1),inset 0px 1px 0px 0px rgba(255, 255, 255, 0.45),inset 1px 0px 0px 0px rgba(255, 255, 255, 0.25),inset -1px 0px 0px 0px rgba(255, 255, 255, 0.25);
}
.topBar:before {
position:absolute;
display:block;
content:"";
width:99px;
height:100%;
top:0;
left:10px;
background:-moz-radial-gradient(center, ellipse cover, rgba(255,255,255,0.35) 0%, rgba(255,255,255,0.01) 50%, rgba(255,255,255,0) 51%, rgba(255,255,255,0) 100%);
background:-webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%,rgba(255,255,255,0.35)), color-stop(50%,rgba(255,255,255,0.01)), color-stop(51%,rgba(255,255,255,0)), color-stop(100%,rgba(255,255,255,0)));
background:-webkit-radial-gradient(center, ellipse cover, rgba(255,255,255,0.35) 0%,rgba(255,255,255,0.01) 50%,rgba(255,255,255,0) 51%,rgba(255,255,255,0) 100%);
background:-o-radial-gradient(center, ellipse cover, rgba(255,255,255,0.35) 0%,rgba(255,255,255,0.01) 50%,rgba(255,255,255,0) 51%,rgba(255,255,255,0) 100%);
background:-ms-radial-gradient(center, ellipse cover, rgba(255,255,255,0.35) 0%,rgba(255,255,255,0.01) 50%,rgba(255,255,255,0) 51%,rgba(255,255,255,0) 100%);
background:radial-gradient(ellipse at center, rgba(255,255,255,0.35) 0%,rgba(255,255,255,0.01) 50%,rgba(255,255,255,0) 51%,rgba(255,255,255,0) 100%);
filter:progid:DXImageTransform.Microsoft.gradient( startColorstr='#59ffffff', endColorstr='#00ffffff',GradientType=1 );
}
.topBar:after {
position:absolute;
display:block;
content:"";
width:99px;
height:16px;
right:0;
top:10px;
-webkit-border-radius:0px 16px 16px 0px;
border-radius:0px 16px 16px 0px;
background:-moz-linear-gradient(left, rgba(255,255,255,0) 0%, rgba(255,255,255,0.6) 98%, rgba(255,255,255,0) 100%);
background:-webkit-gradient(linear, left top, right top, color-stop(0%,rgba(255,255,255,0)), color-stop(98%,rgba(255,255,255,0.6)), color-stop(100%,rgba(255,255,255,0)));
background:-webkit-linear-gradient(left, rgba(255,255,255,0) 0%,rgba(255,255,255,0.6) 98%,rgba(255,255,255,0) 100%);
background:-o-linear-gradient(left, rgba(255,255,255,0) 0%,rgba(255,255,255,0.6) 98%,rgba(255,255,255,0) 100%);
background:-ms-linear-gradient(left, rgba(255,255,255,0) 0%,rgba(255,255,255,0.6) 98%,rgba(255,255,255,0) 100%);
background:linear-gradient(to right, rgba(255,255,255,0) 0%,rgba(255,255,255,0.6) 98%,rgba(255,255,255,0) 100%);
filter:progid:DXImageTransform.Microsoft.gradient( startColorstr='#00ffffff', endColorstr='#00ffffff',GradientType=1 );
}
.topBar span {
position:absolute;
display:block;
width:100%;
height:64px;
-webkit-border-radius:16px;
border-radius:16px;
top:0;
left:0;
background:url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAG4AAABACAYAAAD7/UK9AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyJpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMC1jMDYxIDY0LjE0MDk0OSwgMjAxMC8xMi8wNy0xMDo1NzowMSAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNS4xIFdpbmRvd3MiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6MjdFQ0M2MzdDQThBMTFFMUE3NzJFNzY4M0ZDMTA3MTIiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6MjdFQ0M2MzhDQThBMTFFMUE3NzJFNzY4M0ZDMTA3MTIiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDoyN0VDQzYzNUNBOEExMUUxQTc3MkU3NjgzRkMxMDcxMiIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDoyN0VDQzYzNkNBOEExMUUxQTc3MkU3NjgzRkMxMDcxMiIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/PoTG0pMAABr+SURBVHjavJ1nj1zX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
-webkit-animation:sparkle 1500ms linear infinite;
-moz-animation:sparkle 1500ms linear infinite;
-o-animation:sparkle 1500ms linear infinite;
animation:sparkle 1500ms linear infinite;
opacity:0.2;
}
.label {
font-family:'Aldrich', sans-serif;
position:absolute;
display:block;
width:40px;
height:30px;
line-height:30px;
top:38px;
left:0px;
background:rgb(76,76,76);
background:-moz-linear-gradient(top, rgba(76,76,76,1) 0%, rgba(38,38,38,1) 100%);
background:-webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(76,76,76,1)), color-stop(100%,rgba(38,38,38,1)));
background:-webkit-linear-gradient(top, rgba(76,76,76,1) 0%,rgba(38,38,38,1) 100%);
background:-o-linear-gradient(top, rgba(76,76,76,1) 0%,rgba(38,38,38,1) 100%);
background:-ms-linear-gradient(top, rgba(76,76,76,1) 0%,rgba(38,38,38,1) 100%);
background:linear-gradient(to bottom, rgba(76,76,76,1) 0%,rgba(38,38,38,1) 100%);
filter:progid:DXImageTransform.Microsoft.gradient( startColorstr='#4c4c4c', endColorstr='#262626',GradientType=0 );
font-weight:bold;
font-size:12px;
color:#fff;
text-align:center;
-webkit-border-radius:6px;
border-radius:6px;
border:1px solid rgba(0,0,0,0.2);
-webkit-box-shadow:0px 1px 4px 0px rgba(0, 0, 0, 0.3);
box-shadow:0px 1px 4px 0px rgba(0, 0, 0, 0.3);
text-shadow:0px -1px 0px #000000,0px 1px 1px #000000;
filter:dropshadow(color=#000000, offx=0, offy=-1);
}
.label span {
position:absolute;
display:block;
width:12px;
height:9px;
top:-9px;
left:14px;
background:transparent;
overflow:hidden;
}
.label span:before {
position:absolute;
display:block;
content:"";
width:8px;
height:8px;
top:4px;
left:2px;
border:1px solid rgba(0,0,0,0.5);
background:rgb(86,86,86);
background:-moz-linear-gradient(-45deg, rgba(86,86,86,1) 0%, rgba(76,76,76,1) 50%);
background:-webkit-gradient(linear, left top, right bottom, color-stop(0%,rgba(86,86,86,1)), color-stop(50%,rgba(76,76,76,1)));
background:-webkit-linear-gradient(-45deg, rgba(86,86,86,1) 0%,rgba(76,76,76,1) 50%);
background:-o-linear-gradient(-45deg, rgba(86,86,86,1) 0%,rgba(76,76,76,1) 50%);
background:-ms-linear-gradient(-45deg, rgba(86,86,86,1) 0%,rgba(76,76,76,1) 50%);
background:linear-gradient(135deg, rgba(86,86,86,1) 0%,rgba(76,76,76,1) 50%);
filter:progid:DXImageTransform.Microsoft.gradient( startColorstr='#565656', endColorstr='#4c4c4c',GradientType=1 );
-webkit-box-shadow:0px -1px 2px 0px rgba(0, 0, 0, 0.15);
box-shadow:0px -1px 2px 0px rgba(0, 0, 0, 0.15);
-moz-transform:rotate(45deg);
-webkit-transform:rotate(45deg);
-o-transform:rotate(45deg);
-ms-transform:rotate(45deg);
transform:rotate(45deg);
}
@-webkit-keyframes sparkle {
from {background-position:0 0;}
to {background-position:0 -64px;}
}
@-moz-keyframes sparkle {
from {background-position:0 0;}
to {background-position:0 -64px;}
}
@-o-keyframes sparkle {
from {background-position:0 0;}
to {background-position:0 -64px;}
}
@keyframes sparkle {
from {background-position:0 0;}
to {background-position:0 -64px;}
}