framework7/components/timeline/timeline-rtl.css

Full featured mobile HTML framework for building iOS & Android apps

:root{--f7-timeline-inner-block-margin-vertical:16px;--f7-timeline-divider-margin-horizontal:16px;--f7-timeline-item-text-font-weight:inherit;--f7-timeline-item-subtitle-font-weight:inherit}.ios{--f7-timeline-divider-color:#bbb;--f7-timeline-padding-horizontal:16px;--f7-timeline-margin-vertical:35px;--f7-timeline-item-inner-border-radius:24px;--f7-timeline-item-time-font-size:13px;--f7-timeline-item-title-font-size:17px;--f7-timeline-item-title-line-height:inherit;--f7-timeline-item-title-font-weight:600;--f7-timeline-item-subtitle-font-size:15px;--f7-timeline-item-subtitle-line-height:inherit;--f7-timeline-item-text-font-size:inherit;--f7-timeline-item-text-color:inherit;--f7-timeline-item-text-line-height:inherit;--f7-timeline-item-inner-bg-color:#fff;--f7-timeline-item-time-text-color:#00000073}.ios .dark,.ios.dark{--f7-timeline-item-inner-bg-color:#1c1c1d;--f7-timeline-item-time-text-color:#ffffff8c}.md{--f7-timeline-padding-horizontal:16px;--f7-timeline-margin-vertical:32px;--f7-timeline-item-inner-border-radius:16px;--f7-timeline-item-time-font-size:13px;--f7-timeline-item-title-font-size:16px;--f7-timeline-item-title-line-height:inherit;--f7-timeline-item-title-font-weight:400;--f7-timeline-item-subtitle-font-size:inherit;--f7-timeline-item-subtitle-line-height:inherit;--f7-timeline-item-text-font-size:inherit;--f7-timeline-item-text-line-height:inherit}.md,.md .dark,.md [class*=color-]{--f7-timeline-divider-color:var(--f7-md-outline);--f7-timeline-item-text-color:var(--f7-md-on-surface);--f7-timeline-item-inner-bg-color:var(--f7-md-surface-1);--f7-timeline-item-time-text-color:var(--f7-md-on-surface-variant)}.timeline{box-sizing:border-box;margin:var(--f7-timeline-margin-vertical) 0;padding:0 var(--f7-timeline-padding-horizontal);padding-bottom:0;padding-left:calc(var(--f7-timeline-padding-horizontal) + var(--f7-safe-area-left));padding-right:calc(var(--f7-timeline-padding-horizontal) + var(--f7-safe-area-right));padding-top:0}.block-strong .timeline{margin:0;padding:0}.timeline-item{box-sizing:border-box;display:flex;justify-content:flex-start;overflow:hidden;padding:2px 0 var(--f7-timeline-padding-horizontal);position:relative}.timeline-item:last-child{padding-bottom:2px}.timeline-item-date{box-sizing:border-box;flex-shrink:0;text-align:right;width:50px}.timeline-item-date small{font-size:10px}.timeline-item-content{flex-shrink:10;margin:2px;min-width:0;position:relative}.timeline-item-content .block,.timeline-item-content .card,.timeline-item-content .list,.timeline-item-content.block,.timeline-item-content.card,.timeline-item-content.list{margin:0;width:100%}.timeline-item-content .block+.block,.timeline-item-content .block+.card,.timeline-item-content .block+.list,.timeline-item-content .card+.block,.timeline-item-content .card+.card,.timeline-item-content .card+.list,.timeline-item-content .list+.block,.timeline-item-content .list+.card,.timeline-item-content .list+.list{margin:var(--f7-timeline-inner-block-margin-vertical) 0 0}.timeline-item-content h1:first-child,.timeline-item-content h2:first-child,.timeline-item-content h3:first-child,.timeline-item-content h4:first-child,.timeline-item-content ol:first-child,.timeline-item-content p:first-child,.timeline-item-content ul:first-child{margin-top:0}.timeline-item-content h1:last-child,.timeline-item-content h2:last-child,.timeline-item-content h3:last-child,.timeline-item-content h4:last-child,.timeline-item-content ol:last-child,.timeline-item-content p:last-child,.timeline-item-content ul:last-child{margin-bottom:0}.timeline-item-inner{background:var(--f7-timeline-item-inner-bg-color);border-radius:var(--f7-timeline-item-inner-border-radius);box-sizing:border-box;padding:8px var(--f7-timeline-padding-horizontal)}.timeline-item-inner+.timeline-item-inner{margin-top:var(--f7-timeline-inner-block-margin-vertical)}.timeline-item-inner .block{color:inherit;padding:0}.timeline-item-inner .block-strong{margin:0;padding-left:0;padding-right:0}.timeline-item-inner .block-strong:after,.timeline-item-inner .block-strong:before,.timeline-item-inner .list ul:after,.timeline-item-inner .list ul:before{display:none!important}.timeline-item-divider{background:var(--f7-timeline-divider-color);border-radius:50%;flex-shrink:0;height:10px;margin:3px var(--f7-timeline-divider-margin-horizontal) 0;position:relative;width:1px;width:10px}.timeline-item-divider:after,.timeline-item-divider:before{background:inherit;content:" ";height:100vh;left:50%;position:absolute;transform:translate3d(-50%,0,0);width:1px}.timeline-item-divider:after{top:100%}.timeline-item-divider:before{bottom:100%}.timeline-item:first-child .timeline-item-divider:before,.timeline-item:last-child .timeline-item-divider:after{display:none}.timeline-item-time{color:var(--f7-timeline-item-time-text-color);font-size:var(--f7-timeline-item-time-font-size);margin-top:var(--f7-timeline-inner-block-margin-vertical)}.timeline-item-time:first-child,.timeline-item-time:last-child,.timeline-item-title+.timeline-item-time{margin-top:0}.timeline-item-title{font-size:var(--f7-timeline-item-title-font-size);font-weight:var(--f7-timeline-item-title-font-weight);line-height:var(--f7-timeline-item-title-line-height)}.timeline-item-subtitle{font-size:var(--f7-timeline-item-subtitle-font-size);font-weight:var(--f7-timeline-item-subtitle-font-weight);line-height:var(--f7-timeline-item-subtitle-line-height)}.timeline-item-text{color:var(--f7-timeline-item-text-color);font-size:var(--f7-timeline-item-text-font-size);font-weight:var(--f7-timeline-item-text-font-weight);line-height:var(--f7-timeline-item-text-line-height)}.timeline-sides .timeline-item,.timeline-sides .timeline-item-right{margin-left:0;margin-right:calc(50% - var(--f7-timeline-divider-margin-horizontal)*2/2 - 55px)}.timeline-sides .timeline-item .timeline-item-date,.timeline-sides .timeline-item-right .timeline-item-date{text-align:left}.timeline-sides .timeline-item-left,.timeline-sides .timeline-item:not(.timeline-item-right):nth-child(2n){flex-direction:row-reverse;margin-left:calc(50% - var(--f7-timeline-divider-margin-horizontal)*2/2 - 55px);margin-right:0}.timeline-sides .timeline-item-left .timeline-item-date,.timeline-sides .timeline-item:not(.timeline-item-right):nth-child(2n) .timeline-item-date{text-align:right}@media (min-width:480px){.xsmall-sides .timeline-item,.xsmall-sides .timeline-item-right{margin-left:0;margin-right:calc(50% - var(--f7-timeline-divider-margin-horizontal)*2/2 - 55px)}.xsmall-sides .timeline-item .timeline-item-date,.xsmall-sides .timeline-item-right .timeline-item-date{text-align:left}.xsmall-sides .timeline-item-left,.xsmall-sides .timeline-item:not(.timeline-item-right):nth-child(2n){flex-direction:row-reverse;margin-left:calc(50% - var(--f7-timeline-divider-margin-horizontal)*2/2 - 55px);margin-right:0}.xsmall-sides .timeline-item-left .timeline-item-date,.xsmall-sides .timeline-item:not(.timeline-item-right):nth-child(2n) .timeline-item-date{text-align:right}}@media (min-width:568px){.small-sides .timeline-item,.small-sides .timeline-item-right{margin-left:0;margin-right:calc(50% - var(--f7-timeline-divider-margin-horizontal)*2/2 - 55px)}.small-sides .timeline-item .timeline-item-date,.small-sides .timeline-item-right .timeline-item-date{text-align:left}.small-sides .timeline-item-left,.small-sides .timeline-item:not(.timeline-item-right):nth-child(2n){flex-direction:row-reverse;margin-left:calc(50% - var(--f7-timeline-divider-margin-horizontal)*2/2 - 55px);margin-right:0}.small-sides .timeline-item-left .timeline-item-date,.small-sides .timeline-item:not(.timeline-item-right):nth-child(2n) .timeline-item-date{text-align:right}}@media (min-width:768px){.medium-sides .timeline-item,.medium-sides .timeline-item-right{margin-left:0;margin-right:calc(50% - var(--f7-timeline-divider-margin-horizontal)*2/2 - 55px)}.medium-sides .timeline-item .timeline-item-date,.medium-sides .timeline-item-right .timeline-item-date{text-align:left}.medium-sides .timeline-item-left,.medium-sides .timeline-item:not(.timeline-item-right):nth-child(2n){flex-direction:row-reverse;margin-left:calc(50% - var(--f7-timeline-divider-margin-horizontal)*2/2 - 55px);margin-right:0}.medium-sides .timeline-item-left .timeline-item-date,.medium-sides .timeline-item:not(.timeline-item-right):nth-child(2n) .timeline-item-date{text-align:right}}@media (min-width:1024px){.large-sides .timeline-item,.large-sides .timeline-item-right{margin-left:0;margin-right:calc(50% - var(--f7-timeline-divider-margin-horizontal)*2/2 - 55px)}.large-sides .timeline-item .timeline-item-date,.large-sides .timeline-item-right .timeline-item-date{text-align:left}.large-sides .timeline-item-left,.large-sides .timeline-item:not(.timeline-item-right):nth-child(2n){flex-direction:row-reverse;margin-left:calc(50% - var(--f7-timeline-divider-margin-horizontal)*2/2 - 55px);margin-right:0}.large-sides .timeline-item-left .timeline-item-date,.large-sides .timeline-item:not(.timeline-item-right):nth-child(2n) .timeline-item-date{text-align:right}}@media (min-width:1200px){.xlarge-sides .timeline-item,.xlarge-sides .timeline-item-right{margin-left:0;margin-right:calc(50% - var(--f7-timeline-divider-margin-horizontal)*2/2 - 55px)}.xlarge-sides .timeline-item .timeline-item-date,.xlarge-sides .timeline-item-right .timeline-item-date{text-align:left}.xlarge-sides .timeline-item-left,.xlarge-sides .timeline-item:not(.timeline-item-right):nth-child(2n){flex-direction:row-reverse;margin-left:calc(50% - var(--f7-timeline-divider-margin-horizontal)*2/2 - 55px);margin-right:0}.xlarge-sides .timeline-item-left .timeline-item-date,.xlarge-sides .timeline-item:not(.timeline-item-right):nth-child(2n) .timeline-item-date{text-align:right}}.ios .block-strong .timeline-item-inner{border:1px solid #0000001a;border-radius:3px}