timeline/css/timeline.css
changeset 97 0444ad28e6ba
parent 96 7d1c2c21d891
child 98 abead2de6332
equal deleted inserted replaced
96:7d1c2c21d891 97:0444ad28e6ba
    18 .Tl-BottomPart {
    18 .Tl-BottomPart {
    19     position: absolute; bottom: 0; left: 0; right: 0;
    19     position: absolute; bottom: 0; left: 0; right: 0;
    20 }
    20 }
    21 
    21 
    22 .Tl-MainPart {
    22 .Tl-MainPart {
    23     position: absolute; right: 0; top: 0; bottom: 0; overflow: hidden;
    23     float: left; height: 100%; overflow: hidden; position: relative;
       
    24 }
       
    25 
       
    26 .Tl-AnotherGroup {
       
    27     float: left; height: 100%;
    24 }
    28 }
    25 
    29 
    26 .Tl-UniversLabels {
    30 .Tl-UniversLabels {
    27     list-style: none; margin: 0; padding: 0; border: none;
    31     list-style: none; margin: 0; padding: 0; border: none;
    28     font-size: 13px;
    32     font-size: 13px; width: 54px; float: left; height: 100%;
    29 }
    33 }
    30 
    34 
    31 .Tl-UniversLabels li {
    35 .Tl-UniversLabels li {
    32     position: relative; float: left; clear: both; width: 100%;
    36     position: relative; float: left; clear: both; width: 100%;
    33 }
    37 }
    34 
    38 
    35 .Tl-UniversLabels li:before {
    39 .Tl-UniversLabels li:before {
    36     content: "."; position: absolute; height: 1px; text-indent: -9999px;
    40     content: "."; position: absolute; height: 1px; text-indent: -9999px;
    37     width: 200px; top: 0; background: #DEDEDE; z-index: 5;
    41     width: 760px; top: 0; background: #DEDEDE; z-index: 5;
    38     background: -moz-linear-gradient(to right, rgba(220,220,220,1) 80px, rgba(220,220,220,.1) 140px );
    42     background: -moz-linear-gradient(to right, rgba(220,220,220,1) 80px, rgba(220,220,220,.1) 140px );
    39     background: -webkit-linear-gradient(left, rgba(220,220,220,1) 80px, rgba(220,220,220,.1) 140px );
    43     background: -webkit-linear-gradient(left, rgba(220,220,220,1) 80px, rgba(220,220,220,.1) 140px );
    40 }
    44 }
    41 
    45 
    42 .Tl-UniversLabels li:after {
    46 .Tl-UniversLabels li:after {
    50 .Tl-UniversText {
    54 .Tl-UniversText {
    51     margin-right: 2px;
    55     margin-right: 2px;
    52 }
    56 }
    53 
    57 
    54 .Tl-Grid {
    58 .Tl-Grid {
    55     position: absolute; top: 0; right: 0; bottom: 0; overflow: hidden;
    59     position: absolute; top: 0; bottom: 0; overflow: hidden;
    56     background: -moz-linear-gradient(to right, #cccccc 0, #ffffff 3%, #ffffff 97%, #cccccc 100% );
    60     background: -moz-linear-gradient(to right, #cccccc 0, #f8f8f8 10%, #ffffff 20%, #ffffff 80%, #f8f8f8 90%, #cccccc 100% );
    57     background: -webkit-linear-gradient(left, #cccccc 0, #ffffff 3%, #ffffff 97%, #cccccc 100% );
    61     background: -webkit-linear-gradient(left,  #cccccc 0, #f8f8f8 10%, #ffffff 20%, #ffffff 80%, #f8f8f8 90%, #cccccc 100% );
    58 }
    62 }
    59 
    63 
    60 .Tl-Grid-Column {
    64 .Tl-Grid-Column {
    61     position: absolute; top: 10px; bottom: 0; border-left: 1px solid #999;
    65     position: absolute; top: 20px; bottom: 0; border-left: 1px solid #ccc;
    62 }
    66 }
    63 /*
    67 
    64 .Tl-Grid-Major {
    68 .Tl-Grid-Major {
    65     z-index: 3; border-left: 1px solid #999;
    69     top: 10px; border-left: 1px solid #999;
    66 }
    70 }
    67 */
    71 
    68 .Tl-Grid-Label {
    72 .Tl-Grid-Label {
    69     position: absolute; height: 12px; top: -10px; left: 2px; font-size: 11px; z-index: 4; width: 80px;
    73     position: absolute; height: 12px; line-height: 12px; top: -15px; left: 0; font-size: 11px;
       
    74     z-index: 4; width: 80px; color: #666666;
       
    75 }
       
    76 
       
    77 .Tl-Grid-Major .Tl-Grid-Label {
       
    78     font-weight: bold; color: #000000; top: -5px; left: -5px; background: url(../img/croix.png) left center no-repeat; padding-left: 10px;
    70 }
    79 }
    71 
    80 
    72 .Tl-Grid-Now {
    81 .Tl-Grid-Now {
    73     position: absolute; top: 0; height: 100%; margin-left: -1px; width: 2px; background: #f000ff;
    82     position: absolute; top: 0; height: 100%; margin-left: -1px; width: 2px; background: #f000ff;
    74 }
    83 }
    75 
    84 
       
    85 .Tl-Grid-Editing {
       
    86     position: absolute; top: 0; bottom: -20px; margin-left: -1px; width: 2px; background: #c00000;
       
    87 }
       
    88 
    76 .Tl-Occurrence {
    89 .Tl-Occurrence {
    77     width: 32px; height: 32px; cursor: pointer; border: 2px solid rgba(255,255,255,.9);
    90     width: 32px; height: 32px; cursor: pointer; border: 2px solid rgba(255,255,255,.9);
    78 }
    91 }
    79 
    92 
    80 .Tl-Occurrence img {
    93 .Tl-Occurrence img {
    83 
    96 
    84 .Tl-Editing {
    97 .Tl-Editing {
    85     border-color: #c00000; z-index: 3;
    98     border-color: #c00000; z-index: 3;
    86 }
    99 }
    87 
   100 
    88 .Tl-OccOnGrid, .Tl-Cluster {
   101 .Tl-OccOnGrid {
    89     position: absolute; margin-left: -2px; margin-top: 4px; background: rgba(0,0,0,.9);
   102     position: absolute; margin-left: -2px; margin-top: 8px; background: rgba(0,0,0,.9);
    90 }
       
    91 
       
    92 .Tl-Cluster {
       
    93     background-position: -114px -50px;
       
    94 }
   103 }
    95 
   104 
    96 .Tl-Overlay-Container {
   105 .Tl-Overlay-Container {
    97     position: absolute; top: 0;
   106     position: absolute; top: 0;
    98 }
   107 }
   100 .Tl-Overlay-Box {
   109 .Tl-Overlay-Box {
   101     position: absolute; width: 0; height: 0; display: none;
   110     position: absolute; width: 0; height: 0; display: none;
   102 }
   111 }
   103 
   112 
   104 .Tl-Overlay {
   113 .Tl-Overlay {
   105     position: absolute; left: -105px; width: 210px; z-index: 6; top: 22px;
   114     position: absolute; z-index: 6; top: 8px;
   106 }
   115 }
   107 
   116 
   108 .Tl-Overlay-Main {
   117 .Tl-Overlay-Main {
   109     width: 190px;
   118     width: 75px; padding: 2px 2px 2px 4px; background: #ffffff;
   110     background: url(../img/tooltip-down.png) bottom; padding: 0 10px 10px;
   119     border: 1px solid #cccccc; box-shadow: 2px 2px 0 #cccccc;
   111 }
   120 }
   112 
   121 .Tl-Overlay-Main:before {
   113 .Tl-Overlay-Tip-Top {
   122     content: "."; position: absolute; height: 0; text-indent: -9999px;
   114     width: 210px; height: 20px; background: url(../img/tooltip-down.png) top;
   123     width: 0; left: -8px; top: 25%;
   115 }
   124     border-top: 6px solid transparent;
   116 
   125     border-bottom: 6px solid transparent;
   117 h3.Tl-Tooltip-Title {
   126     border-right: 8px solid #cccccc; z-index: 7;
   118     font-size: 14px; font-weight: bold; color: #000080; margin: 0;
   127 }
   119 }
   128 .Tl-Overlay-Main:after {
   120 
   129     content: "."; position: absolute; height: 0; text-indent: -9999px;
   121 p.Tl-Tooltip-Date {
   130     width: 0; left: -7px; top: 25%;
   122     font-size: 11px; margin: 2px 0; color: #000080; border-bottom: 1px dotted; float: left;
   131     border-top: 6px solid transparent;
   123 }
   132     border-bottom: 6px solid transparent;
   124 
   133     border-right: 8px solid #ffffff; z-index: 8;
   125 p.Tl-Tooltip-Description, p.Tl-Tooltip-Characters {
   134 }
   126     font-size: 12px; margin: 5px 0 0; clear: both;
   135 .Tl-Tooltip-Title {
   127 }
   136     font-size: 11px; font-weight: bold; color: #000000; line-height: 12px;
   128 
       
   129 ul.Tl-Adding {
       
   130     position: absolute; left: -150px; top: 0; display: none;
       
   131     list-style: none; font-size: 12px; padding: 0; margin: 0; width: 150px; border-style: none solid; border-color: #999999; border-width: 1px;
       
   132 }
       
   133 
       
   134 .Tl-Adding li {
       
   135     border-style: none none solid; border-color: #cccccc; border-width: 1px; padding: 4px; background: rgba(255,255,255,.9);
       
   136 }
       
   137 
       
   138 li.Tl-AddingTitle {
       
   139     background: rgba(215,215,215,.9); font-weight: bold;
       
   140 }
       
   141 
       
   142 .Tl-AddOccurrence {
       
   143     float: right; margin: -3px;
       
   144 }
   137 }
   145 
   138 
   146 /**************/
   139 /**************/
   147 
   140 
   148 .Tl-Detail {
   141 .Tl-Detail {
   149     border: 1px solid #cccccc; margin: 10px 0 0 80px; padding: 10px; text-align: left; min-height: 135px; font-size: 12px;
   142     border: 1px solid #cccccc; margin: 10px 36px 0 54px; padding: 10px; text-align: left;
       
   143     min-height: 135px; font-size: 12px;
   150 }
   144 }
   151 
   145 
   152 .Tl-Detail-Image {
   146 .Tl-Detail-Image {
   153     float: left;
   147     float: left;
   154 }
   148 }
   174 }
   168 }
   175 
   169 
   176 .Tl-Detail-Read:hover {
   170 .Tl-Detail-Read:hover {
   177     text-decoration: underline;
   171     text-decoration: underline;
   178 }
   172 }
       
   173 
       
   174 .Tl-Slider-Container {
       
   175     width: 36px; float: left; height: 100%;
       
   176 }
       
   177 
       
   178 .Tl-Slider-Zoom-In, .Tl-Slider-Zoom-Out {
       
   179     display: block; width: 20px; height: 20px; margin: 0 8px; background: url(../img/plus-minus.png);
       
   180 }
       
   181 
       
   182 .Tl-Slider-Zoom-In:hover {
       
   183     background-position: -20px 0;
       
   184 }
       
   185 
       
   186 .Tl-Slider-Zoom-Out {
       
   187     background-position: 0 -20px;
       
   188 }
       
   189 
       
   190 .Tl-Slider-Zoom-Out:hover {
       
   191     background-position: -20px -20px;
       
   192 }
       
   193 
       
   194 .Tl-Slider {
       
   195     height: 152px; background: url(../img/slider-bg.png); width: 6px; margin: 6px 15px; border-radius: 0; border: none;
       
   196 }
       
   197 
       
   198 .Tl-Slider .ui-slider-handle {
       
   199     background: #000000; border-radius: 0; margin-bottom: -4px; width: 8px; height: 8px; left: -1px;
       
   200     border: none;
       
   201 }