1 line
4.1 KiB
CSS
1 line
4.1 KiB
CSS
#zeitleiste #monate{display:block;width:45%}#zeitleiste #legende{min-width:45%;display:block;z-index:250}#zeitleiste #legende ul{list-style-type:none;margin:0;padding:5px;padding-left:15px}#zeitleiste #legende li{border:0;padding:5px;display:block}#zeitleiste #tlnav{max-width:60%;margin-left:120px}#zeitleiste .aktion{background-color:#f5ac00}#zeitleiste .demo{background-color:#e30e0d}#zeitleiste .ini{background-color:#4f9ed3}#zeitleiste .wahl{background-color:#e97213}#zeitleiste #timeline{list-style:none;margin:30px 0 30px 120px;padding-left:30px;border-left:8px solid #ffd016;max-width:60%}#zeitleiste #timeline li{list-style:none;margin:40px 0;padding-left:10px;position:relative}#zeitleiste #timeline p{margin:0 0 15px}#zeitleiste .tldate{margin-top:-10px;top:50%;left:-150px;font-size:.8em;line-height:20px;position:absolute;color:#000}#zeitleiste .tlcircle{margin-top:-10px;top:50%;left:-44px;width:10px;height:10px;background:#9c0;border:5px solid #fff;border-radius:50%;display:block;position:absolute}#zeitleiste .tlcontent{max-height:20px;padding:20px 20px 0;border-color:transparent;border-width:2px;border-style:solid;position:relative}#zeitleiste .tlcontent:before,#zeitleiste .tlcontent:after{content:"";width:0;height:0;border:solid transparent;position:absolute;pointer-events:none;right:100%}#zeitleiste .tlcontent:before{border-right-color:inherit;border-width:20px;top:50%;margin-top:-20px}#zeitleiste .tlcontent:after{border-right-color:inherit;border-width:17px;top:50%;margin-top:-17px}#zeitleiste .tlcontent p{max-height:0;color:transparent;text-align:left;word-break:break-word;hyphens:auto;overflow:hidden}#zeitleiste .tlcontent a{max-height:0;color:transparent;text-align:left;word-break:break-word;hyphens:auto;overflow:hidden}#zeitleiste label{font-size:1em;position:absolute;z-index:1;cursor:pointer;top:20px;color:#fff;transition:transform .2s linear;-webkit-transition:transform .2s linear;-moz-transition:transform .2s linear;-o-transition:transform .2s linear}#zeitleiste .radio{display:none}#zeitleiste .radio:checked+.relative label{cursor:auto;transform:translateX(22px);transition:transform .2s linear;-webkit-transition:transform .2s linear;-moz-transition:transform .2s linear;-o-transition:transform .2s linear}#zeitleiste .radio:checked+.relative .tlcircle{background:#fff;border-radius:50%;border-color:#9c0;transition:background .3s ease,border-color .3s ease;-webkit-transition:background .3s ease,border-color .3s ease;-moz-transition:background .3s ease,border-color .3s ease;-o-transition:background .3s ease,border-color .3s ease}#zeitleiste .radio:checked ~ .tlcontent{max-height:230px;margin-right:20px;transform:translateX(20px);transition:max-height .4s linear,border-color .5s linear,transform .2s linear;-webkit-transition:max-height .4s linear,border-color .5s linear,transform .2s linear;-moz-transition:max-height .4s linear,border-color .5s linear,transform .2s linear;-o-transition:max-height .4s linear,border-color .5s linear,transform .2s linear}#zeitleiste .radio:checked ~ .tlcontent p{max-height:250px;color:#fff;transition:color .2s linear .2s;-webkit-transition:color .2s linear .2s;-moz-transition:color .2s linear .2s;-o-transition:color .2s linear .2s}#zeitleiste .radio:checked ~ .tlcontent a{max-height:220px;color:#272828;transition:color .2s linear .2s;-webkit-transition:color .2s linear .2s;-moz-transition:color .2s linear .2s;-o-transition:color .2s linear .2s}@media screen and (max-width:767px){#zeitleiste #tlnav{min-width:100%;margin-left:0}#zeitleiste #timeline{margin-left:0;padding-left:0;border-left:none;max-width:none}#zeitleiste #timeline li{margin:50px 0;padding:none}#zeitleiste #tlnav{max-width:none}#zeitleiste label{width:85%;font-size:1.1em;white-space:nowrap;text-overflow:ellipsis;overflow:hidden;display:block;transform:translateX(18px)}#zeitleiste .tlcontent{padding-top:15px;margin-right:0;border:0}#zeitleiste .tlcontent:before,#zeitleiste .tlcontent:after{bottom:100%;border:0}#zeitleiste .tlcontent:before{top:-16px;left:50px;margin-left:-17px;border:0}#zeitleiste .tlcontent:after{top:-20px;left:50px;margin-left:-20px;border:0}#zeitleiste .tlcontent p{font-size:.8em;line-height:1.4}#zeitleiste .tlcircle,.tldate{display:none}} |