From c9119349f4f0122374ae4a11c16831e945d55147 Mon Sep 17 00:00:00 2001 From: Alexander_Kabui Date: Thu, 15 Feb 2024 15:58:16 +0300 Subject: add emfed style file locally --- gn2/wqflask/static/new/css/toots.css | 106 +++++++++++++++++++++++++++++++++++ 1 file changed, 106 insertions(+) create mode 100644 gn2/wqflask/static/new/css/toots.css (limited to 'gn2/wqflask/static/new') diff --git a/gn2/wqflask/static/new/css/toots.css b/gn2/wqflask/static/new/css/toots.css new file mode 100644 index 00000000..5ce1b6d5 --- /dev/null +++ b/gn2/wqflask/static/new/css/toots.css @@ -0,0 +1,106 @@ +.toots { + max-width: 400px; + list-style: none; + padding: 0; + font-family: -apple-system, BlinkMacSystemFont, avenir next, avenir, segoe ui, helvetica neue, helvetica, Cantarell, Ubuntu, roboto, noto, arial, sans-serif; +} + +.toot { + border-bottom: 1px solid #ccc; + padding: 1rem; +} + +/* Posting user. */ +.toot .user { + display: flex; + flex-flow: column wrap; + justify-content: space-evenly; + align-content: flex-start; + height: 46px; /* Avatar height. */ + column-gap: 0.5rem; + + text-decoration: none; + color: inherit; +} + +.toot .avatar { + border-radius: 4px; +} + +.toot .display-name { + font-weight: bold; + display: block; +} + +.toot .user:hover .display-name { + text-decoration: underline; +} + +.toot .username { + display: block; + margin-right: 1em; + color: #999; +} + +/* Boosting user is smaller and above the posting user. */ +.toot .boost { + height: 23px; + margin-bottom: 0.25rem; + column-gap: 0.25rem; +} + +.toot .boost:before { + content: "♺"; + font-size: 140%; +} + +.toot .boost .username { + display: none; +} + +.toot .permalink { + text-decoration: none; + display: block; + color: #999; + float: right; +} + +.toot .permalink:hover { + text-decoration: underline; +} + +.toot .body { + clear: both; + margin-top: 1em; +} + +.toot .body a { + overflow-wrap: anywhere; +} + +/* Weird trick to keep the text in the page but not display it. */ +.toot .body .invisible { + display: inline-block; + font-size: 0; + line-height: 0; + width: 0; + height: 0; + position: absolute; +} + +.toot .body .ellipsis::after { + content: "…"; +} + +.toot .attachment { + display: block; + width: 100%; + aspect-ratio: 16 / 9; + border-radius: 4px; +} + +.toot .attachment img { + width: 100%; + height: 100%; + object-fit: cover; +} -- cgit v1.2.3