|
|
Line 1: |
Line 1: |
− | .VivaTimeline dl {
| |
− | position: relative;
| |
− | top: 0;
| |
− | padding: 20px 0;
| |
− | margin: 0
| |
− | }
| |
| | | |
− | .VivaTimeline dl:before {
| |
− | position: absolute;
| |
− | top: 0;
| |
− | bottom: 0;
| |
− | left: 50%;
| |
− | z-index: 100;
| |
− | width: 2px;
| |
− | margin-left: -1px;
| |
− | content: '';
| |
− | background-color: #ccd1d9
| |
− | }
| |
− |
| |
− | .VivaTimeline dl dt {
| |
− | position: relative;
| |
− | top: 30px;
| |
− | z-index: 200;
| |
− | width: 120px;
| |
− | padding: 3px 5px;
| |
− | margin: 0 auto 30px;
| |
− | font-weight: 400;
| |
− | color: #fff;
| |
− | text-align: center;
| |
− | background-color: #aab2bd;
| |
− | border-radius: 4px;
| |
− | -webkit-border-radius: 4px;
| |
− | -moz-border-radius: 4px
| |
− | }
| |
− |
| |
− | .VivaTimeline dl dd {
| |
− | position: relative;
| |
− | z-index: 200
| |
− | }
| |
− |
| |
− | .VivaTimeline dl dd .circ {
| |
− | position: absolute;
| |
− | top: 40px;
| |
− | left: 50%;
| |
− | z-index: 200;
| |
− | width: 22px;
| |
− | height: 22px;
| |
− | margin-left: -11px;
| |
− | background-color: #4fc1e9;
| |
− | border: 4px solid #f5f7fa;
| |
− | border-radius: 50%;
| |
− | -webkit-border-radius: 50%;
| |
− | -moz-border-radius: 50%
| |
− | }
| |
− |
| |
− | .VivaTimeline dl dd .time {
| |
− | position: absolute;
| |
− | top: 31px;
| |
− | left: 50%;
| |
− | display: inline-block;
| |
− | width: 100px;
| |
− | padding: 10px 20px;
| |
− | color: #4fc1e9
| |
− | }
| |
− |
| |
− | .VivaTimeline dl dd .events {
| |
− | position: relative;
| |
− | width: 47%;
| |
− | padding: 10px 0 0;
| |
− | margin-top: 31px;
| |
− | background-color: #CCC;
| |
− | border-radius: 4px;
| |
− | -webkit-border-radius: 4px;
| |
− | -moz-border-radius: 4px
| |
− | }
| |
− |
| |
− | .VivaTimeline dl dd .events:before {
| |
− | position: absolute;
| |
− | top: 12px;
| |
− | width: 0;
| |
− | height: 0;
| |
− | content: '';
| |
− | border-style: solid;
| |
− | border-width: 6px
| |
− | }
| |
− |
| |
− | .VivaTimeline dl dd .events .events-object {
| |
− | margin: 0 auto;
| |
− | }
| |
− |
| |
− | .VivaTimeline dl dd .events .events-header {
| |
− | min-height: 30px;
| |
− | line-height: 20px;
| |
− | text-align: center;
| |
− | font-size: 16px;
| |
− | font-weight: bold;
| |
− | cursor: pointer;
| |
− | }
| |
− |
| |
− | .VivaTimeline dl dd .events .events-body {
| |
− | overflow: hidden;
| |
− | zoom: 1;
| |
− | background-color: #EEE;
| |
− | padding: 10px;
| |
− | }
| |
− | .VivaTimeline dl dd .events .events-body .row{
| |
− | display:none;
| |
− | }
| |
− |
| |
− | .VivaTimeline dl dd .events .events-body .events-desc {
| |
− | text-indent: 2em;
| |
− | padding: 0 15px;
| |
− | }
| |
− |
| |
− | .VivaTimeline dl dd .events .events-footer {
| |
− | text-align:center;
| |
− | }
| |
− | .VivaTimeline dl dd .events .events-footer ol {
| |
− | list-style: none;
| |
− | margin: 0 auto;
| |
− | padding: 0;
| |
− | }
| |
− | .VivaTimeline dl dd .events .events-footer ol li {
| |
− | background: #32b487;
| |
− | border-radius: 5px;
| |
− | margin: 10px;
| |
− | display: inline-block;
| |
− | width: 10px;
| |
− | height: 10px;
| |
− | cursor: pointer;
| |
− | }
| |
− | .VivaTimeline dl dd .events .events-footer ol .active{
| |
− | transform: scale(2);
| |
− | }
| |
− |
| |
− | .VivaTimeline dl dd.pos-right .time {
| |
− | margin-left: -100px;
| |
− | text-align: right
| |
− | }
| |
− |
| |
− | .VivaTimeline dl dd.pos-right .events {
| |
− | float: right
| |
− | }
| |
− |
| |
− | .VivaTimeline dl dd.pos-right .events:before {
| |
− | left: -12px;
| |
− | border-color: transparent #CCC transparent transparent
| |
− | }
| |
− |
| |
− | .VivaTimeline dl dd.pos-left .time {
| |
− | margin-left: 0;
| |
− | text-align: left
| |
− | }
| |
− |
| |
− | .VivaTimeline dl dd.pos-left .events {
| |
− | float: left
| |
− | }
| |
− |
| |
− | .VivaTimeline dl dd.pos-left .events:before {
| |
− | right: -12px;
| |
− | border-color: transparent transparent transparent #CCC
| |
− | }
| |
− |
| |
− | .VivaTimeline .carousel-indicators{
| |
− | bottom: 0;
| |
− | }
| |
− |
| |
− | @media screen and (max-width: 767px) {
| |
− | .VivaTimeline dl:before {
| |
− | left: 90px
| |
− | }
| |
− | .VivaTimeline dl dt {
| |
− | margin: 0 30px 30px
| |
− | }
| |
− | .VivaTimeline dl dd .circ {
| |
− | left: 90px
| |
− | }
| |
− | .VivaTimeline dl dd .time {
| |
− | left: 20px
| |
− | }
| |
− | .VivaTimeline dl dd.pos-left .time {
| |
− | padding: 10px 0;
| |
− | margin-left: 0;
| |
− | text-align: left
| |
− | }
| |
− | .VivaTimeline dl dd.pos-left .events {
| |
− | float: right;
| |
− | width: 73%;
| |
− | margin-right: 4%;
| |
− | }
| |
− | .VivaTimeline dl dd.pos-left .events:before {
| |
− | left: -12px;
| |
− | border-color: transparent #CCC transparent transparent
| |
− | }
| |
− | .VivaTimeline dl dd.pos-right .time {
| |
− | padding: 10px 0;
| |
− | margin-left: 0;
| |
− | text-align: left
| |
− | }
| |
− | .VivaTimeline dl dd.pos-right .events {
| |
− | float: right;
| |
− | width: 73%;
| |
− | margin-right: 4%;
| |
− | }
| |
− | /*
| |
− | .VivaTimeline dl dd .events .events-body {
| |
− | display: none;
| |
− | }
| |
− | .VivaTimeline dl dd .events .events-footer {
| |
− | display: none;
| |
− | }
| |
− | */
| |
− | }
| |
− |
| |
− | @media screen and (max-width: 500px) {
| |
− | .VivaTimeline dl dd.pos-left .events {
| |
− | float: right;
| |
− | width: 63%;
| |
− | margin-right: 4%;
| |
− | }
| |
− | .VivaTimeline dl dd.pos-right .events {
| |
− | float: right;
| |
− | width: 63%;
| |
− | margin-right: 4%;
| |
− | }
| |
− | }
| |