Last active
December 9, 2017 00:01
-
-
Save krry/b5eb623552616a85e8ae03023d68e5dc to your computer and use it in GitHub Desktop.
Styles for the Path to Arrival timeline on Tiki-Toki
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
@import url('https://fonts.googleapis.com/css?family=Montserrat'); | |
.tl-embedded-timeline { | |
overflow: hidden; | |
width: 100%; | |
height: 100vh; | |
} | |
.tl-font, .tl-font-head, .tl-font-body { | |
font-family: "Montserrat", "Futura", "Trebuchet MS", sans-serif !important; | |
} | |
q { | |
quotes: "“" "”" "‘" "’"; | |
} | |
q:before { | |
content: open-quote; | |
} | |
q:after { | |
content: close-quote; | |
} | |
.tl-main-content-block > div { | |
border: 4px solid rgba(0,0,0,0.5); | |
} | |
.tl-main-content-block-holder .tl-mc-bottom-left, | |
.tl-main-content-block-holder .tl-mc-bottom-right, | |
.tl-main-content-block-holder .tl-mc-top-left, | |
.tl-main-content-block-holder .tl-mc-top-right { | |
border-width: 0; | |
background: none; | |
border-color: rgba(255,255,255,0.3); | |
} | |
.tl-main-content-block-holder .tl-mc-top-right { | |
background: rgba(0,0,0,0.7); | |
border-radius: 4px 4px 0 0; | |
} | |
.tl-main-content-block-holder .tl-mc-bottom-right { | |
background: rgba(0,0,0,0.8); | |
border-width: 2px; | |
border-top-width: 0; | |
border-radius: 0 0 4px 4px; | |
} | |
.tl-main-content-block-holder .tl-mc-top-right { | |
border-width: 2px; | |
border-bottom-width: 0; | |
} | |
.tl-main-content-block-holder .tl-ch-panel-date-display { | |
font-size: 1.5em; | |
} | |
.tl-main-content-block-holder .tl-ch-content-block-inner h3 { | |
font-size: 30px; | |
} | |
#tl-container .tl-gallery .tl-g-caption-holder { | |
background: rgba(255, 255, 255, 0.8); | |
} | |
#tl-container .tl-gallery .tl-g-caption-holder > p { | |
font-weight: 600; | |
} | |
.tl-main-content-block-holder .tl-ch-top-content .tl-ch-close-content { | |
right: 0px; | |
top: 5px; | |
text-indent: -10000px; | |
background-image: url('http://www.arrivo-loop.com/wp-content/uploads/2017/11/close-x.png'); | |
background-position: center center; | |
background-repeat: no-repeat; | |
background-size: 50%; | |
width: 24px; | |
height: 24px; | |
transition: background-size 250ms ease; | |
} | |
.tl-main-content-block-holder .tl-ch-top-content .tl-ch-close-content:hover { | |
background-position: center center; | |
background-size: 60%; | |
} | |
.tl-main-content-block-holder .ajk-content-scroller .ajk-cs-carousel-scroll-holder { | |
right: 2px; | |
} | |
.tl-main-content-block-holder .tl-ch-content-block { | |
width: 524px; | |
} | |
.ajk-content-scroller .ajk-cs-carousel-stage { | |
width: 464px; | |
} | |
.tl-main-content-block-holder .tl-ch-bc-inner { | |
margin-top: 0.4em; | |
} | |
.tl-stage-view-color-category-stories .tl-story-block .tl-sb-basic-info-holder { | |
border-radius: 4px; | |
padding: 16px; | |
padding-bottom: 8px; | |
} | |
.tl-stage-view-color-category-stories .tl-story-block .tl-sb-basic-info-holder, | |
.tl-stage-view-color-category-stories .tl-story-block .bmp { | |
opacity: 0.9; | |
} | |
.tl-story-block h3 { | |
font-weight: 600; | |
font-size: 18px; | |
} | |
.tl-admin-new .tl-admin-holder { | |
padding: 0 0 0 0; | |
top: 42px; | |
width: 440px; | |
right: 17px; | |
} | |
.ajk-content-scroller .ajk-cs-carousel-stage { | |
width: 440px; | |
} | |
.tl-main-content-block-holder .tl-ch-extra-info-text h2, | |
.tl-main-content-block-holder .tl-ch-extra-info-text blockquote, | |
.tl-main-content-block-holder .tl-ch-extra-info-text ul, | |
.tl-main-content-block-holder .tl-ch-extra-info-text li { | |
color: #aaa; | |
} | |
.tl-main-content-block-holder .tl-ch-extra-info-text ul { | |
list-style: disc; | |
padding-left: 24px; | |
font-size: 14px; | |
} | |
.tl-story-block .button-1 { | |
margin: 8px 0 2px 220px; | |
} | |
.button-1 { | |
width: 54px; | |
height: auto; | |
color: #fff; | |
font-size: 13px; | |
background: rgba(0,0,0,0.1); /*check if this makes it to the timeline*/ | |
display: block; | |
text-decoration: none; | |
padding: 6px 0; | |
border: 1px solid white; | |
border-radius: 12px; | |
text-align: center; | |
transition: background 250ms ease; | |
} | |
.button-1:hover { | |
background: rgba(255,255,255,0.2); | |
} | |
.tl-story-block .tl-sb-image-gallery { | |
border-radius: 2px; | |
} | |
.tl-admin-holder .tl-ah-list-block .tl-ah-list-item .tl-ah-col-2 { | |
margin-left: 340px; | |
} | |
.tl-ah-input input { | |
width: 85%; | |
} | |
.tl-admin-new .tl-admin-holder .tl-ah-event-catcher { | |
width: 100%; | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment