Timeline/style.css at master · longcnn/Timeline · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
html,body{width:100%;height: 100%;background: rgb(223,223,223);margin:0;}

#timeline{position: relative;min-width:100%;min-height:100%;box-sizing:border-box;border-bottom: solid 1px rgb(223,223,223);}
#timeline .vBar{z-index:99;position: absolute;height: 100%;width:1px;background: black;top:0;}
#timeline .mouseTime{color:white;position: absolute;line-height: 24px;top:0;z-index:99;}

#area{position: relative;border:solid rgb(180,180,180);border-width:1px 0;margin:0 0 10px 0;background: white;}
#area .time{position: absolute;top:0;left: 0;z-index: 2;text-shadow:1px 1px white;background: rgb(223,223,223);padding:5px;}
#area .period{text-align: center;word-break: keep-all;text-shadow:1px 1px white;position: absolute;box-sizing: border-box;border:solid 1px gray;font-size:14px;cursor:default;}
#area .period .name span{transition: all 0.5s;}
#area .period:hover{z-index: 100;}
#area .popup{border:solid 1px gray;background: white;border-radius: 4px;text-align: left;padding:0 10px;position: absolute;top:50px;width:300px;display: none;}
#area .period:hover .popup{display: block;}
/*#area_popup_arrow{position: absolute;background: white;position:absolute;width: 20px;height: 20px;top:-22px;border:solid 1px rgb(128,128,128);}*/
#area .popup .title{float: left;}
#area .popup .content{float: left;}
#area .name{display: block;position: absolute;transition: 0.5s;transition-property:top,right,bottom,left,width,height;top:0;right: 0;left: 0;margin:auto;}
/*#area_from{left: 0;position: absolute;top:-25px;line-height: 14px;display: none;background: rgb(223,223,223);padding:5px;}*/
/*#area_to{right: 0;position: absolute;bottom:-25px;line-height: 14px;display: none;background: rgb(223,223,223);padding:5px;}*/
/*#area_period:hover #area_from{display: block;}*/
/*#area_period:hover #area_to{display: block;}*/
/*#area .period:hover .name{position: absolute;bottom:35px;background: white;padding:5px;line-height: 14px;}*/
/*#area_span{display: none;}*/
/*#area_period:hover #area_span{display: inline;}*/

#option{position: fixed;left: 0;top:24px;background:rgb(223,223,223);z-index: 50;padding:10px ;width: 100%;}
#option>*{float: left;}
#option .timeline{float: left;margin:5px 0 5px 20px;}
#option .zoom{margin:5px 0 5px 20px;}
#option .zoom .value{display: inline-block;width: 70px;}

#ruler{height: 24px;background: black;position: fixed;top:0;left:0;width:100%;z-index:51;}
#ruler .highBar{width:1px;margin-right:3px;float:left;height: 100%;background: rgb(125,125,125);display: none;}
#ruler .middleBar{width:1px;margin-right:3px;float:left;height: 50%;background: rgb(125,125,125);margin-top: 12px;display: none;}
#ruler .shortBar{width:1px;margin-right:3px;float:left;height: 25%;background: rgb(125,125,125);margin-top: 18px;display: none;}

.sourceCode{margin:5px 0 5px 30px;}