diff options
| -rw-r--r-- | static/ctimeline.css | 192 |
1 files changed, 192 insertions, 0 deletions
diff --git a/static/ctimeline.css b/static/ctimeline.css new file mode 100644 index 0000000..0df312a --- /dev/null +++ b/static/ctimeline.css @@ -0,0 +1,192 @@ +/* +Copyright (c) 2021 by Nils Wittler (https://codepen.io/NilsWe/pen/FemfK) + +Permission is hereby granted, free of charge, to any person obtaining a +copy of this software and associated documentation files (the "Software"), +to deal in the Software without restriction, including without limitation +the rights to use, copy, modify, merge, publish, distribute, sublicense, +and/or sell copies of the Software, and to permit persons to whom the +Software is furnished to do so, subject to the following conditions: + +The above copyright notice and this permission notice shall be included in +all copies or substantial portions of the Software. + +THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS +OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, +FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL +THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR +OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, +ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR +OTHER DEALINGS IN THE SOFTWARE. +*/ + +/* ================ The Timeline ================ */ + +.timeline { + position: relative; + width: 660px; + margin: 0 auto; + margin-top: 20px; + padding: 1em 0; + list-style-type: none; + + font-family: monospace; + font-size: 112.5%; + line-height: 1.6em; +} + +.timeline:before { + position: absolute; + left: 50%; + top: 0; + content: ' '; + display: block; + width: 6px; + height: 100%; + margin-left: -3px; + background: rgb(80,80,80); + background: -moz-linear-gradient(top, rgba(80,80,80,0) 0%, rgb(80,80,80) 8%, rgb(80,80,80) 92%, rgba(80,80,80,0) 100%); + background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(30,87,153,1)), color-stop(100%,rgba(125,185,232,1))); + background: -webkit-linear-gradient(top, rgba(80,80,80,0) 0%, rgb(80,80,80) 8%, rgb(80,80,80) 92%, rgba(80,80,80,0) 100%); + background: -o-linear-gradient(top, rgba(80,80,80,0) 0%, rgb(80,80,80) 8%, rgb(80,80,80) 92%, rgba(80,80,80,0) 100%); + background: -ms-linear-gradient(top, rgba(80,80,80,0) 0%, rgb(80,80,80) 8%, rgb(80,80,80) 92%, rgba(80,80,80,0) 100%); + background: linear-gradient(to bottom, rgba(80,80,80,0) 0%, rgb(80,80,80) 8%, rgb(80,80,80) 92%, rgba(80,80,80,0) 100%); + z-index: 5; +} + +.timeline li { + padding: 1em 0; +} + +.timeline li:after { + content: ""; + display: block; + height: 0; + clear: both; + visibility: hidden; +} + +.direction-left { + position: relative; + width: 300px; + float: left; + text-align: right; +} + +.direction-right { + position: relative; + width: 300px; + float: right; +} + +.flag-wrapper { + position: relative; + display: inline-block; + text-align: center; +} + +.flag { + position: relative; + display: inline; + background: rgb(248,248,248); + padding: 6px 10px; + border-radius: 5px; + + font-weight: 600; + text-align: left; +} + +.direction-left .flag { + -webkit-box-shadow: -1px 1px 1px rgba(0,0,0,0.15), 0 0 1px rgba(0,0,0,0.15); + -moz-box-shadow: -1px 1px 1px rgba(0,0,0,0.15), 0 0 1px rgba(0,0,0,0.15); + box-shadow: -1px 1px 1px rgba(0,0,0,0.15), 0 0 1px rgba(0,0,0,0.15); +} + +.direction-right .flag { + -webkit-box-shadow: 1px 1px 1px rgba(0,0,0,0.15), 0 0 1px rgba(0,0,0,0.15); + -moz-box-shadow: 1px 1px 1px rgba(0,0,0,0.15), 0 0 1px rgba(0,0,0,0.15); + box-shadow: 1px 1px 1px rgba(0,0,0,0.15), 0 0 1px rgba(0,0,0,0.15); +} + +.direction-left .flag:before, +.direction-right .flag:before { + position: absolute; + top: 50%; + right: -40px; + content: ' '; + display: block; + width: 12px; + height: 12px; + margin-top: -10px; + background: #fff; + border-radius: 10px; + border: 4px solid rgb(255,80,80); + z-index: 10; +} + +.direction-right .flag:before { + left: -40px; +} + +.direction-left .flag:after { + content: ""; + position: absolute; + left: 100%; + top: 50%; + height: 0; + width: 0; + margin-top: -8px; + border: solid transparent; + border-left-color: rgb(248,248,248); + border-width: 8px; + pointer-events: none; +} + +.direction-right .flag:after { + content: ""; + position: absolute; + right: 100%; + top: 50%; + height: 0; + width: 0; + margin-top: -8px; + border: solid transparent; + border-right-color: rgb(248,248,248); + border-width: 8px; + pointer-events: none; +} + +.time-wrapper { + display: inline; + + line-height: 1em; + font-size: 0.66666em; + color: rgb(250,80,80); + vertical-align: middle; +} + +.direction-left .time-wrapper { + float: left; +} + +.direction-right .time-wrapper { + float: right; +} + +.time { + display: inline-block; + padding: 4px 6px; + background: rgb(248,248,248); +} + +.desc { + margin: 1em 0.75em 0 0; + + font-size: 0.77777em; + font-style: italic; + line-height: 1.5em; +} + +.direction-right .desc { + margin: 1em 0 0 0.75em; +} |