timeline.css

body{
    width:100%;
    height:100%;
    font-family: -webkit-pictograph,serif;
    overflow-x:hidden;
}
.noselect {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none; 
}
[v-cloak]{
    display:none;
}
.desc{
    font-size:80%;
    color:#aaa;
}
svg line ,svg rect {
    shape-rendering: crispEdges;
    stroke-width:1;
}
#svg_container{
    transition: scrollTop 2s;
    width:100%;
    overflow-y: auto;
    overflow-x: auto;
}
#svg_container.scrolling{
    cursor:grabbing;
}
line.dials{
    stroke:#edd;
}
line.dials-mini{
    stroke:#aaa;
}
line.dials-mouse{
    stroke:#ccf;
}
line.dials-select-line{
    stroke: #08f;
    stroke-dasharray: 5,10;
}
line.dials-skill{
    stroke:#8c8;
}
line.dials-skill-mark{
    stroke:rgb(252, 39, 110);
}
text.dials-skill-mark{
    fill: rgb(252, 39, 110);
}
line.events{
    stroke:rgb(247, 210, 249);
}
text.dials{
    fill: #aaa;
}
text.dials-mouse{
    fill: #88f;
}
text.dials-select-line{
    fill: #08f;
}
text.dmg{
    font-size:10px;
}
text.dmg-normal, tSpan.dmg-normal{
    fill: red;
}
text.dmg-magic, tSpan.dmg-magic{
    fill: #08f;
}
text.dmg-true, tSpan.dmg-true{
    fill: #e0d;
}
text.dmg-all{
    font-size: 16px;
}
text.dials-skill{
    fill: #8c8;
}
text.event-active{
    fill: red;
}
tSpan.event-summary-reduce{
    fill: #f90;
}
text.skill-type-active{
    fill:red;
}
rect.skill-cd{
    fill:black;
    opacity: 0.15;
}
rect.skill-cd-prev{
    fill:transparent;
    stroke-width: 1px;
    stroke-dasharray: 5,10;
    stroke: black;
    opacity: 0.2;
}
rect.skill-duration{
    fill:#8f8;
    opacity: 0.5;
}
rect.skill-duration2{
    fill:#0f0;
    opacity: 0.5;
}
rect.skill-duration-slide-range{
    stroke-width: 1px;
    fill: transparent;
    stroke:#fac;
}

.skill-active rect.skill-duration{
    stroke-width: 1px;
    stroke: red;
}
rect.skill-name-background{
    fill:white;
    opacity: 0.4;
}
rect.hover-rect{
    fill:pink;
    opacity: 0.25;
}
rect.select-range{
    fill: #ccf;
    opacity: 0.25;
}
.form-auto{
    width:auto;
    display:inline-block;
}
.share-container{
    position:fixed;
    top:0;
    left:0;
    right:0;
    bottom:0;
    padding:5%;
    background-color:rgba(255,255,255,0.5);
    z-index:100;
}

.input-wrapper{
    margin-top:3px;
}
.float-window-behind{
    position:fixed;
    z-index:700;
    background-color:rgba(255,255,255,0.7);
    box-shadow: 0 0 5px #8da;
    border-radius: 5px;
    padding:5px 10px;
}

.float-window{
    position:fixed;
    z-index:9999;
    background-color:rgba(255,255,255,0.7);
    box-shadow: 0 0 5px #8da;
    border-radius: 5px;
    padding:5px 10px;
}
.mask{
    position:fixed;
    z-index:999;
    background-color:rgba(0,0,0,0.5);
    right:0;
    top:0;
    left:0;
    bottom:0;
}


div.gcd-skill{
    flex:1;
    min-width: 16.66%;
    max-width: 16.66%;
    padding-top:8px;
    border-radius:5px;
    text-align: center;
    user-select: none; 
}
div.gcd-skill:hover,div.skill-list:hover{
    background-color:#cfc;
}

div.skill-list{
    flex:1;
    min-width:60px;
    max-width:60px;
    padding-top:8px;
    border-radius:5px;
    text-align: center;
    user-select: none; 
}
div.skill-container{
    display:flex;
    flex-wrap:wrap;
}
div.skill-selected{
    background-color:#cfc;
    border:1px dashed red;
}

input[type=range] {
    height:1em;
    -webkit-appearance: none;
    border-radius: 10px; /*这个属性设置使填充进度条时的图形为圆角*/
}
input[type=range]::-webkit-slider-thumb {
    -webkit-appearance: none;
}


input[type=range]::-webkit-slider-runnable-track {
    height: 10px;
    border-radius: 10px; /*将轨道设为圆角的*/
    border:1px solid #ccc;
}

input[type=range]:focus::-webkit-slider-runnable-track {
    box-shadow: 0 0 3px #6be;
    border:1px solid #6be;
}
input[type=range]:focus {
    outline: none;
}
input[type=range]::-webkit-slider-thumb {
    -webkit-appearance: none;
    height: 15px;
    width: 15px;
    margin-top: -5px; /*使滑块超出轨道部分的偏移量相等*/
    background: #ffffff; 
    border-radius: 50%; /*外观设置为圆形*/
    border: solid 0.125em rgba(205, 224, 230, 0.5); /*设置边框*/
    box-shadow: 0 .125em .125em #3b4547; /*添加底部阴影*/
}

span.value-name{
    display:inline-block;
    width:8em;
    text-align: right;
    margin-right: 20px;
}