diff --git a/src/mastodon-timeline.css b/src/mastodon-timeline.css index 96e3e81..bfcf0b5 100644 --- a/src/mastodon-timeline.css +++ b/src/mastodon-timeline.css @@ -1,178 +1,181 @@ -/* Mastodon embed timeline */ - -/* Main container */ -.mt-timeline { - height: calc(100% - 4rem); - padding: 2rem 3rem; - position: relative; - background: lightgray; -} - -.mt-timeline a:link, -.mt-timeline a:active, -.mt-timeline a { - text-decoration: none; - color: darkblue; -} - -.mt-body { - height: 100%; - overflow-y: auto; - white-space: pre-wrap; - word-wrap: break-word; -} - -.mt-body .invisible { - display: none; -} - -/* Toot container */ -.mt-toot { - margin: 0 0.5rem 0 0; - padding: 1rem 0 2rem 65px; - position: relative; - min-height: 60px; - background-color: transparent; - border-bottom: 1px solid #dee2e6; -} -.mt-toot:hover { - cursor: pointer; - background-color: rgba(124, 124, 124, 0.2); -} -.mt-toot p:last-child { - margin-bottom: 0; -} - -/* User icon */ -.mt-user { - display: table; - font-weight: 600; -} -.mt-avatar { - position: absolute; - top: 20px; - left: 5px; - width: 50px; - height: 50px; - background-color: transparent; - background-repeat: no-repeat; - background-position: 50% 50%; - background-size: contain; - background-color: #fff; - border-radius: 5px; -} -.mt-avatar-boosted { - width: 40px; - height: 40px; -} -.mt-avatar-booster { - width: 25px; - height: 25px; - top: 25px; - left: 25px; -} - -/* Message */ -.toot-text { - margin-bottom: 0.25rem; -} -.toot-text .ellipsis::after{ - content:'...'; -} -.mt-error { - color: darkred; - background: lightpink; - margin: 5px; - padding: 10px; -} - -/* Poll */ -.toot-poll { - margin-bottom: 0.25rem; -} -.toot-poll ul{ - list-style: none; - padding: 0; - margin: 0; -} -.toot-poll ul li:not(:last-child){ - margin-bottom: 0.25rem; -} -.toot-poll ul li:before { - content: "◯"; - padding-right: 0.5rem; -} - -/* Medias */ -.toot-media { - overflow: hidden; - margin-bottom: 0.25rem; -} -.toot-media-preview { - position: relative; - margin-top: 0.25rem; - height: auto; - text-align: center; - width: 100%; -} -.toot-media-spoiler > img { - filter: blur(2rem); -} -.toot-media-preview a { - display: block; - position: absolute; - top: 0; - right: 0; - bottom: 0; - left: 0; -} -.img-ratio14_7 { -position: relative; -padding-top: 48.95%; /* 14:7 */ -width: 100%; -} -.img-ratio14_7 > img { -width: 100%; -height: auto; -position: absolute; -top: 50%; -left: 50%; -transform: translate(-50%, -50%); -text-align: center; -} - -/* Date */ -.toot-date { - font-size: 0.75rem; - opacity: 0.5; -} - -/* Loading-spinner */ -.loading-spinner { - height: 100%; - background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns:svg='http://www.w3.org/2000/svg' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' version='1.0' viewBox='0 0 128 128' %3E%3Cg%3E%3Cpath d='M64 128A64 64 0 0 1 18.34 19.16L21.16 22a60 60 0 1 0 52.8-17.17l.62-3.95A64 64 0 0 1 64 128z' fill='%23404040'/%3E%3CanimateTransform attributeName='transform' type='rotate' from='0 64 64' to='360 64 64' dur='1000ms' repeatCount='indefinite'%3E%3C/animateTransform%3E%3C/g%3E%3C/svg%3E"); - background-repeat: no-repeat; - background-position: center center; - background-color: transparent; - background-size: min(2.5rem, calc(100% - 0.5rem)); -} - -/* See more btn */ -.mt-seeMore{ - margin: 2rem auto; - padding: 0 2rem; - text-align: center; -} - -/* Hidden element */ -.visually-hidden { - position: absolute !important; - width: 1px !important; - height: 1px !important; - padding: 0 !important; - margin: -1px !important; - overflow: hidden !important; - clip: rect(0, 0, 0, 0) !important; - white-space: nowrap !important; - border: 0 !important; -} +/* Mastodon embed feed timeline */ +/* More info at: */ +/* https://gitlab.com/idotj/mastodon-embed-feed-timeline */ + + +/* Main container */ +.mt-timeline { + height: calc(100% - 4rem); + padding: 2rem 3rem; + position: relative; + background: lightgray; +} + +.mt-timeline a:link, +.mt-timeline a:active, +.mt-timeline a { + text-decoration: none; + color: darkblue; +} + +.mt-body { + height: 100%; + overflow-y: auto; + white-space: pre-wrap; + word-wrap: break-word; +} + +.mt-body .invisible { + display: none; +} + +/* Toot container */ +.mt-toot { + margin: 0 0.5rem 0 0; + padding: 1rem 0 2rem 65px; + position: relative; + min-height: 60px; + background-color: transparent; + border-bottom: 1px solid #dee2e6; +} +.mt-toot:hover { + cursor: pointer; + background-color: rgba(124, 124, 124, 0.2); +} +.mt-toot p:last-child { + margin-bottom: 0; +} + +/* User icon */ +.mt-user { + display: table; + font-weight: 600; +} +.mt-avatar { + position: absolute; + top: 20px; + left: 5px; + width: 50px; + height: 50px; + background-color: transparent; + background-repeat: no-repeat; + background-position: 50% 50%; + background-size: contain; + background-color: #fff; + border-radius: 5px; +} +.mt-avatar-boosted { + width: 40px; + height: 40px; +} +.mt-avatar-booster { + width: 25px; + height: 25px; + top: 25px; + left: 25px; +} + +/* Message */ +.toot-text { + margin-bottom: 0.25rem; +} +.toot-text .ellipsis::after{ + content:'...'; +} +.mt-error { + color: darkred; + background: lightpink; + margin: 5px; + padding: 10px; +} + +/* Poll */ +.toot-poll { + margin-bottom: 0.25rem; +} +.toot-poll ul{ + list-style: none; + padding: 0; + margin: 0; +} +.toot-poll ul li:not(:last-child){ + margin-bottom: 0.25rem; +} +.toot-poll ul li:before { + content: "◯"; + padding-right: 0.5rem; +} + +/* Medias */ +.toot-media { + overflow: hidden; + margin-bottom: 0.25rem; +} +.toot-media-preview { + position: relative; + margin-top: 0.25rem; + height: auto; + text-align: center; + width: 100%; +} +.toot-media-spoiler > img { + filter: blur(2rem); +} +.toot-media-preview a { + display: block; + position: absolute; + top: 0; + right: 0; + bottom: 0; + left: 0; +} +.img-ratio14_7 { +position: relative; +padding-top: 48.95%; /* 14:7 */ +width: 100%; +} +.img-ratio14_7 > img { +width: 100%; +height: auto; +position: absolute; +top: 50%; +left: 50%; +transform: translate(-50%, -50%); +text-align: center; +} + +/* Date */ +.toot-date { + font-size: 0.75rem; + opacity: 0.5; +} + +/* Loading-spinner */ +.loading-spinner { + height: 100%; + background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns:svg='http://www.w3.org/2000/svg' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' version='1.0' viewBox='0 0 128 128' %3E%3Cg%3E%3Cpath d='M64 128A64 64 0 0 1 18.34 19.16L21.16 22a60 60 0 1 0 52.8-17.17l.62-3.95A64 64 0 0 1 64 128z' fill='%23404040'/%3E%3CanimateTransform attributeName='transform' type='rotate' from='0 64 64' to='360 64 64' dur='1000ms' repeatCount='indefinite'%3E%3C/animateTransform%3E%3C/g%3E%3C/svg%3E"); + background-repeat: no-repeat; + background-position: center center; + background-color: transparent; + background-size: min(2.5rem, calc(100% - 0.5rem)); +} + +/* See more btn */ +.mt-seeMore{ + margin: 2rem auto; + padding: 0 2rem; + text-align: center; +} + +/* Hidden element */ +.visually-hidden { + position: absolute !important; + width: 1px !important; + height: 1px !important; + padding: 0 !important; + margin: -1px !important; + overflow: hidden !important; + clip: rect(0, 0, 0, 0) !important; + white-space: nowrap !important; + border: 0 !important; +}