Intellivoid-Accounts-Template/assets/css/pages/timeline.css

680 lines
19 KiB
CSS

/*========================================================
DARK LAYOUT
=========================================================*/
/* Timeline */
.timeline {
position: relative;
display: block;
margin: 0;
padding: 10px 0;
list-style: none; }
.timeline:after {
content: " ";
display: table;
clear: both; }
.timeline:before {
content: " ";
display: table; }
.timeline > li {
list-style: none; }
.timeline > li:nth-child(even) {
float: left;
clear: left; }
.timeline > li:nth-child(odd) {
float: right;
clear: right; }
.timeline .media {
border-bottom: 1px solid #eee;
font-size: 13px; }
.timeline .media p {
font-size: 13px; }
.timeline .media:last-child {
border-bottom: 0; }
.timeline-line + .timeline-item {
margin-top: -20px; }
.timeline-group {
display: block;
position: relative;
margin: 20px 0;
text-align: center;
float: none !important;
z-index: 1; }
.timeline-poster {
margin-top: -20px; }
.timeline-poster .btn-link {
color: #a1aab0; }
.timeline-poster .btn-link:active {
color: #3e5771; }
.timeline-poster .btn-link:focus {
color: #3e5771; }
.timeline-poster .btn-link:hover {
color: #3e5771; }
.timeline-poster .btn-link.active {
color: #3e5771; }
#timeline.timeline-center .timeline-line {
display: inline-block;
position: absolute;
top: 0;
bottom: 0;
left: 50%;
width: 2px;
background-color: #ddd;
transform: translate(-50%, 0); }
#timeline.timeline-center .timeline-item {
position: relative;
display: inline-block;
width: 50%;
padding: 0 50px 35px; }
#timeline.timeline-center .timeline-item:nth-child(even) {
padding: 0px 35px 50px 0px; }
#timeline.timeline-center .timeline-item:nth-child(even):after {
content: '';
position: absolute;
right: 19px;
top: 10px;
width: 0;
height: 0;
border-top: 12px solid transparent;
border-bottom: 12px solid transparent;
border-left: 12px solid #ccc;
z-index: 1;
right: 25px;
top: 20px;
border-left: 11px solid #fff; }
#timeline.timeline-center .timeline-item:nth-child(even):before {
content: '';
position: absolute;
right: 24px;
top: 20px;
width: 0;
height: 0;
border-top: 12px solid transparent;
border-bottom: 12px solid transparent;
border-left: 12px solid #ccc;
z-index: 1; }
#timeline.timeline-center .timeline-item:nth-child(even) > .timeline-badge {
right: -20px; }
#timeline.timeline-center .timeline-item:nth-child(odd) {
padding: 0px 0px 50px 35px; }
#timeline.timeline-center .timeline-item:nth-child(odd):after {
content: '';
position: absolute;
left: 19px;
top: 10px;
width: 0;
height: 0;
border-top: 12px solid transparent;
border-bottom: 12px solid transparent;
border-right: 12px solid #ccc;
z-index: 1;
left: 25px;
top: 20px;
border-right: 11px solid #fff; }
#timeline.timeline-center .timeline-item:nth-child(odd):before {
content: '';
position: absolute;
left: 24px;
top: 20px;
width: 0;
height: 0;
border-top: 12px solid transparent;
border-bottom: 12px solid transparent;
border-right: 12px solid #ccc;
z-index: 1; }
#timeline.timeline-center .timeline-item:nth-child(odd) > .timeline-badge {
left: -20px; }
#timeline.timeline-center .timeline-item > .timeline-badge {
position: absolute;
top: 12px;
z-index: 1; }
#timeline.timeline-center .timeline-item > .timeline-badge > span {
display: inline-block;
width: 40px;
height: 40px;
border-radius: 50%;
text-align: center;
text-decoration: none;
transition: all ease .3s; }
#timeline.timeline-center .timeline-item > .timeline-badge > span i {
color: #fff;
font-size: 1.6rem;
display: block;
line-height: 40px;
top: 0; }
#timeline.timeline-center .timeline-item > .timeline-badge > span:active {
transform: scale(1.1); }
#timeline.timeline-center .timeline-item > .timeline-badge > span:focus {
transform: scale(1.1); }
#timeline.timeline-center .timeline-item > .timeline-badge > span:hover {
transform: scale(1.1); }
#timeline.timeline-center .timeline-item > .timeline-badge > a.active {
transform: scale(1.1); }
#timeline.timeline-center .timeline-item > .timeline-panel {
position: relative;
background-color: #fff;
border: 1px solid #ddd;
border-radius: 4px; }
#timeline.timeline-center .timeline-item > .timeline-panel:hover .timeline-actions {
display: block; }
#timeline.timeline-right .timeline-line {
display: inline-block;
position: absolute;
top: 0;
bottom: 0;
right: 12px;
width: 2px;
background-color: #ddd;
transform: translate(-50%, 0); }
#timeline.timeline-right .timeline-group {
text-align: right; }
#timeline.timeline-right .timeline-item {
position: relative;
display: inline-block;
width: 100%;
padding: 0px 43px 35px 0px; }
#timeline.timeline-right .timeline-item:after {
content: '';
position: absolute;
right: 33px;
top: 21px;
width: 0;
height: 0;
z-index: 1;
border-top: 11px solid #f8f8f8;
border-bottom: 11px solid #f8f8f8;
border-left: 11px solid #fff; }
#timeline.timeline-right .timeline-item:before {
content: '';
position: absolute;
right: 32px;
top: 20px;
width: 0;
height: 0;
border-top: 12px solid transparent;
border-bottom: 12px solid transparent;
border-left: 12px solid #ccc;
z-index: 1; }
#timeline.timeline-right .timeline-item > .timeline-badge {
right: -8px; }
#timeline.timeline-right .timeline-item > .timeline-badge {
position: absolute;
top: 12px;
z-index: 1; }
#timeline.timeline-right .timeline-item > .timeline-badge > span {
display: inline-block;
width: 40px;
height: 40px;
border-radius: 50%;
text-align: center;
text-decoration: none;
transition: all ease .3s; }
#timeline.timeline-right .timeline-item > .timeline-badge > span i {
color: #fff;
font-size: 1.6rem;
display: block;
line-height: 40px;
top: 0; }
#timeline.timeline-right .timeline-item > .timeline-badge > span:active {
transform: scale(1.1); }
#timeline.timeline-right .timeline-item > .timeline-badge > span:focus {
transform: scale(1.1); }
#timeline.timeline-right .timeline-item > .timeline-badge > span:hover {
transform: scale(1.1); }
#timeline.timeline-right .timeline-item > .timeline-badge > a.active {
transform: scale(1.1); }
#timeline.timeline-right .timeline-item > .timeline-panel {
position: relative;
background-color: #fff;
border: 1px solid #ddd;
border-radius: 4px; }
#timeline.timeline-right .timeline-item > .timeline-panel:hover .timeline-actions {
display: block; }
#timeline.timeline-right .timeline-item.block:nth-child(even):before {
right: 8px;
left: auto; }
#timeline.timeline-right .timeline-item.block:nth-child(even):after {
right: 11px;
left: auto; }
#timeline.timeline-right .timeline-item.block:nth-child(odd):after {
right: 8px;
right: auto; }
#timeline.timeline-left .timeline-line {
display: inline-block;
position: absolute;
top: 0;
bottom: 0;
left: 12px;
width: 2px;
background-color: #ddd;
transform: translate(-50%, 0); }
#timeline.timeline-left .timeline-group {
text-align: left; }
#timeline.timeline-left .timeline-item {
position: relative;
display: inline-block;
width: 100%;
padding: 0 0 35px 43px; }
#timeline.timeline-left .timeline-item:after {
content: '';
position: absolute;
left: 33px;
top: 21px;
width: 0;
height: 0;
z-index: 1;
border-top: 11px solid #f8f8f8;
border-bottom: 11px solid #f8f8f8;
border-right: 11px solid #fff; }
#timeline.timeline-left .timeline-item:before {
content: '';
position: absolute;
left: 32px;
top: 20px;
width: 0;
height: 0;
border-top: 12px solid transparent;
border-bottom: 12px solid transparent;
border-right: 12px solid #ccc;
z-index: 1; }
#timeline.timeline-left .timeline-item > .timeline-badge {
left: -8px; }
#timeline.timeline-left .timeline-item > .timeline-badge {
position: absolute;
top: 12px;
z-index: 1; }
#timeline.timeline-left .timeline-item > .timeline-badge > span {
display: inline-block;
width: 40px;
height: 40px;
border-radius: 50%;
text-align: center;
text-decoration: none;
transition: all ease .3s; }
#timeline.timeline-left .timeline-item > .timeline-badge > span i {
color: #fff;
font-size: 1.6rem;
display: block;
line-height: 40px;
top: 0; }
#timeline.timeline-left .timeline-item > .timeline-badge > span:active {
transform: scale(1.1); }
#timeline.timeline-left .timeline-item > .timeline-badge > span:focus {
transform: scale(1.1); }
#timeline.timeline-left .timeline-item > .timeline-badge > span:hover {
transform: scale(1.1); }
#timeline.timeline-left .timeline-item > .timeline-badge > a.active {
transform: scale(1.1); }
#timeline.timeline-left .timeline-item > .timeline-panel {
position: relative;
background-color: #fff;
border: 1px solid #ddd;
border-radius: 4px; }
#timeline.timeline-left .timeline-item > .timeline-panel:hover .timeline-actions {
display: block; }
#timeline .timeline-item.block:nth-child(even) {
width: 100% !important;
margin-top: 5px; }
#timeline .timeline-item.block:nth-child(even):after {
left: 50%;
right: auto;
top: -11px;
border: 0;
border-left: 12px solid transparent;
border-right: 12px solid transparent;
border-bottom: 12px solid #ccc;
transform: translate(-50%, 0);
top: -10px;
border: 0;
border-left: 11px solid #f8f8f8;
border-right: 11px solid #f8f8f8;
border-bottom: 11px solid #fff; }
#timeline .timeline-item.block:nth-child(even):before {
left: 50%;
right: auto;
top: -11px;
border: 0;
border-left: 12px solid transparent;
border-right: 12px solid transparent;
border-bottom: 12px solid #ccc;
transform: translate(-50%, 0); }
#timeline .timeline-item.block:nth-child(even) > .timeline-badge {
top: -28px;
left: 50%;
right: auto;
transform: translate(-50%, 0); }
#timeline .timeline-item.block:nth-child(odd) {
width: 100% !important;
margin-top: 5px; }
#timeline .timeline-item.block:nth-child(odd):after {
left: 50%;
right: auto;
top: -11px;
border: 0;
border-left: 12px solid transparent;
border-right: 12px solid transparent;
border-bottom: 12px solid #ccc;
transform: translate(-50%, 0);
top: -10px;
border: 0;
border-left: 11px solid #f8f8f8;
border-right: 11px solid #f8f8f8;
border-bottom: 11px solid #fff; }
#timeline .timeline-item.block:nth-child(odd):before {
left: 50%;
right: auto;
top: -11px;
border: 0;
border-left: 12px solid transparent;
border-right: 12px solid transparent;
border-bottom: 12px solid #ccc;
transform: translate(-50%, 0); }
#timeline .timeline-item.block:nth-child(odd) > .timeline-badge {
top: -28px;
left: 50%;
right: auto;
transform: translate(-50%, 0); }
.timeline-actions {
display: none; }
.timeline-content {
padding: 15px; }
.timeline-footer {
padding: 15px;
border-top: 1px solid #eee;
background-color: #fbfcfc;
border-radius: 0 0 5px 5px; }
.timeline-heading {
padding: 15px;
font-size: 20px; }
.timeline-liveliness {
padding: 15px;
border-top: 1px solid #eee;
background-color: #fbfcfc; }
.timeline-heading + .timeline-content {
padding-top: 0; }
.timeline-date {
font-size: 14px;
color: #aaa; }
.timeline-embed {
position: relative;
padding-bottom: 56.25%;
padding-top: 25px;
height: 0; }
.timeline-embed .embed-element {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%; }
.timeline-embed embed {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%; }
.timeline-embed iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%; }
.timeline-embed object {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%; }
.timeline-img {
display: block;
padding: 5px 0; }
.timeline-img.first {
margin-right: -10px; }
.timeline-img.middle {
margin-right: -10px;
margin-left: -10px; }
.timeline-img.last {
margin-left: -10px; }
.timeline-resume {
border-top: 1px solid #eee;
background-color: #fbfcfc; }
.timeline-avatar {
margin-top: -2px;
margin-right: 10px; }
.timeline-title {
margin: 0;
padding: 0;
font-size: 14px;
line-height: 1.42857;
font-weight: 600;
color: #3e5771;
text-decoration: none; }
.timeline-title > small {
display: block;
font-size: 12px;
line-height: 1.5;
color: #a1aab0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap; }
.wrapkit-content-rtl .timeline-avatar {
margin-right: 0;
margin-left: 10px; }
@media (min-width: 992px) {
.timeline-item:nth-child(even) {
padding: 0px 35px 50px 0px; }
.timeline-item:nth-child(odd) {
padding: 0 0px 50px 35px; } }
@media (max-width: 991.98px) {
.timeline {
padding-left: 15px; }
.timeline-line {
left: 15px; }
.timeline-group {
display: inline-block;
margin-left: -22px; }
.timeline-item {
width: 100% !important;
margin-top: 0 !important;
padding-right: 10px; }
.timeline-item:nth-child(even):after {
left: 19px;
top: 10px;
border: 0;
border-top: 12px solid transparent;
border-bottom: 12px solid transparent;
border-right: 12px solid #ccc;
transform: translate(0, 0);
left: 40px;
top: 21px;
border-top: 11px solid #f8f8f8;
border-bottom: 11px solid #f8f8f8;
border-right: 11px solid #fff; }
.timeline-item:nth-child(even):before {
left: 39px;
top: 20px;
border: 0;
border-top: 12px solid transparent;
border-bottom: 12px solid transparent;
border-right: 12px solid #ccc;
transform: translate(0, 0); }
.timeline-item:nth-child(even) > .timeline-badge {
top: 12px;
left: -20px;
right: auto;
transform: translate(0, 0); }
.timeline-item:nth-child(odd):after {
left: 19px;
top: 10px;
border: 0;
border-top: 12px solid transparent;
border-bottom: 12px solid transparent;
border-right: 12px solid #ccc;
transform: translate(0, 0);
left: 40px;
top: 21px;
border-top: 11px solid #f8f8f8;
border-bottom: 11px solid #f8f8f8;
border-right: 11px solid #fff; }
.timeline-item:nth-child(odd):before {
left: 39px;
top: 20px;
border: 0;
border-top: 12px solid transparent;
border-bottom: 12px solid transparent;
border-right: 12px solid #ccc;
transform: translate(0, 0); }
.timeline-item:nth-child(odd) > .timeline-badge {
top: 12px;
left: -20px;
right: auto;
transform: translate(0, 0); }
.timeline-item.block:nth-child(even) {
padding-bottom: 0; }
.timeline-item.block:nth-child(even):after {
left: 19px;
top: 10px;
border: 0;
border-top: 12px solid transparent;
border-bottom: 12px solid transparent;
border-right: 12px solid #ccc;
transform: translate(0, 0);
left: 20px;
top: 11px;
border-top: 11px solid #f8f8f8;
border-bottom: 11px solid #f8f8f8;
border-right: 11px solid #fff; }
.timeline-item.block:nth-child(even):before {
left: 19px;
top: 10px;
border: 0;
border-top: 12px solid transparent;
border-bottom: 12px solid transparent;
border-right: 12px solid #ccc;
transform: translate(0, 0); }
.timeline-item.block:nth-child(even) > .timeline-badge {
top: 12px;
left: -6px;
right: auto;
transform: translate(0, 0); }
.timeline-item.block:nth-child(odd) {
padding-bottom: 0; }
.timeline-item.block:nth-child(odd):after {
left: 19px;
top: 10px;
border: 0;
border-top: 12px solid transparent;
border-bottom: 12px solid transparent;
border-right: 12px solid #ccc;
transform: translate(0, 0);
left: 20px;
top: 11px;
border-top: 11px solid #f8f8f8;
border-bottom: 11px solid #f8f8f8;
border-right: 11px solid #fff; }
.timeline-item.block:nth-child(odd):before {
left: 19px;
top: 10px;
border: 0;
border-top: 12px solid transparent;
border-bottom: 12px solid transparent;
border-right: 12px solid #ccc;
transform: translate(0, 0); }
.timeline-item.block:nth-child(odd) > .timeline-badge {
top: 12px;
left: -6px;
right: auto;
transform: translate(0, 0); } }
@media (max-width: 991.98px) {
#timeline.timeline-wrapper .timeline {
padding: 0; }
#timeline.timeline-wrapper .timeline .card-body {
text-align: left; }
#timeline.timeline-wrapper .timeline-line {
display: inline-block;
position: absolute;
top: 0;
bottom: 0;
left: 50%;
width: 2px;
background-color: #ddd;
transform: translate(-50%, 0); }
#timeline.timeline-wrapper .timeline-group {
display: block;
margin-left: -6px;
text-align: center; }
#timeline.timeline-wrapper .timeline-item {
display: block;
padding: 20px 0 20px !important; }
#timeline.timeline-wrapper .timeline-item:nth-child(even) {
float: none;
clear: both; }
#timeline.timeline-wrapper .timeline-item:nth-child(even):after {
display: none; }
#timeline.timeline-wrapper .timeline-item:nth-child(even):before {
display: none; }
#timeline.timeline-wrapper .timeline-item:nth-child(odd) {
float: none;
clear: both; }
#timeline.timeline-wrapper .timeline-item:nth-child(odd):after {
display: none; }
#timeline.timeline-wrapper .timeline-item:nth-child(odd):before {
display: none; }
#timeline.timeline-wrapper .timeline-item > .timeline-badge {
top: 0px !important;
left: 45% !important; }
#timeline.timeline-wrapper .timeline-item.block:nth-child(even) {
float: none;
clear: both; }
#timeline.timeline-wrapper .timeline-item.block:nth-child(even):after {
display: none; }
#timeline.timeline-wrapper .timeline-item.block:nth-child(even):before {
display: none; }
#timeline.timeline-wrapper .timeline-item.block:nth-child(odd) {
float: none;
clear: both; }
#timeline.timeline-wrapper .timeline-item.block:nth-child(odd):after {
display: none; }
#timeline.timeline-wrapper .timeline-item.block:nth-child(odd):before {
display: none; }
#timeline.timeline-wrapper .timeline-item.timeline-poster > .timeline-badge {
display: none; } }
@media (max-width: 575.98px) {
.timeline-item > .timeline-badge {
top: 0px !important;
left: 44% !important; } }