From 2af37d47783aac8c650ffd1578e2297b5784c73d Mon Sep 17 00:00:00 2001 From: r Date: Tue, 28 Jan 2020 17:51:00 +0000 Subject: Refactor everything --- static/style.css | 479 +++++++++++++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 479 insertions(+) create mode 100644 static/style.css (limited to 'static/style.css') diff --git a/static/style.css b/static/style.css new file mode 100644 index 0000000..602f2ef --- /dev/null +++ b/static/style.css @@ -0,0 +1,479 @@ +.status-container-container { + margin: 12px 0 12px -4px; + padding: 4px; + border-left: 4px solid transparent; +} + +.status-container-container:target { + border-color: #777777; +} + +.status-container-container.highlight { + background-color: #cccccc; +} + +.status-container { + display: flex; +} + +.status-content { + margin: 4px 0; + word-wrap: anywhere; + max-height: 600px; + overflow: auto; +} + +.status-content p { + margin: 0px; +} + +.status-content img, +.status-image, +.status-video { + max-height: 180px; + max-width: 220px; + width: auto; + vertical-align: bottom; +} + +.status-media-container { + margin: 4px 0; +} + +.status-profile-img-container { + margin-right: 8px; +} + +.status-profile-img { + height: 48px; + width: 48px; + object-fit: contain; + vertical-align: top; +} + +.status { +} + +.status a { + text-decoration: none; +} + +.status-dname { + font-weight: 800; +} + +.status-uname { + font-style: italic; + font-size: 10pt; +} + +.status-emoji { + height: 20px; + margin-bottom: -4px; + width: auto; + vertical-align: unset !important; +} + +.name-emoji { + height: 20px; + width: auto; +} + +.status-action-container { + margin-top: 4px; +} + +.status-action { + display: inline-block; + min-width: 64px; +} + +.status-action form { + display: inline-block; +} + +.status-action:last-child { + min-width: unset; +} + +.status-action a { + display: inline-block; + text-decoration: none; + color: #333333; +} + +.status-action a:hover, +.status-action input:hover { + opacity: 0.6; +} + +.status-action a.status-time { + width: auto; +} + +.status-reply-count, +.status-retweet-count, +.status-like-count { + vertical-align: middle; +} + +.page-title { + font-size: 23pt; +} + +.post-form { + margin: 8px 0; +} + +.post-form>div { + margin-bottom: 4px; +} + +.signin-form { + margin: 8px 0; +} + +.signin-form input { + margin: 4px 0; +} + +.retweet-info { + margin: 8px 0 4px 24px; +} + +.retweet-info .status-profile-img { + height: 24px; + width: 24px; + vertical-align: middle; +} + +.retweet-info .status-dname{ + margin-left: 4px +} + +.post-content { + padding: 4px; + font-size: 11pt; + font-family: initial; + max-width: 100%; +} + +.pagination { + margin: 4px; +} + +.pagination a { + margin: 0 8px; +} + +.notification-container { + margin: 16px 0 16px -4px; + padding: 0 4px; + border-left: 4px solid transparent; +} + +.notification-container.unread { + border-color: #777777; +} + +.notification-follow-container, +.notification-like-container, +.notification-retweet-container { + display: flex; +} + +.notification-info-text span { + vertical-align: middle; +} + +.notification-follow-uname { + margin-top: 8px; +} + +.status-reply-to { + display: inline-block; + vertical-align: center; +} + +.status-reply-to-link { + font-size: 10pt +} + +.status-reply-container .fa { + font-size: 10pt; + vertical-align: sub; + margin-right: -2px; +} + +.status-reply-text { + font-size: 10pt; +} + +.status-reply { + display: inline-block; +} + +.status-reply-link { + font-size: 10pt; +} + +.status-reply-info-divider { + margin: 0 4px; +} + +.post-content-container { + padding-right: 8px; +} + +.error-text { + margin: 8px 0; +} + +.post-attachment-div { + margin: 2px 0; +} + +.user-profile-img-container { + display: inline-block +} + +.user-profile-details-container { + display: inline-block; + vertical-align: top; + margin: 0 4px; +} + +.user-profile-details-container>div { + margin-bottom: 4px; +} + +.user-profile-img { + max-height: 100px; + max-width: 100px; + object-fit: contain; + vertical-align: top; +} + +.user-profile-decription { + margin: 4px 0; +} + +.d-inline { + display: inline; +} + +.btn-link { + border: none; + outline: none; + background: none; + cursor: pointer; + color: #0000EE; + padding: 0; + text-decoration: underline; + font-family: inherit; + font-size: inherit; +} + +.status-visibility { + margin-left: 4px; + display: inline-block; + color: #444444; +} + +.status-visibility span { + font-size: 9pt; + vertical-align: bottom; +} + +.remote-link { + margin-left: 4px; + display: inline-block; + color: #444444; + text-decoration: none; +} + +.remote-link span { + font-size: 9pt; + vertical-align: bottom; +} + +.img-link { + display: inline-block; + position: relative; + margin: 2.5px 0; +} + +.status-profile-img-container .img-link { + width: 48px; + overflow: hidden; +} + +.status-nsfw-overlay { + height: 100%; + width: 100%; + background: black; + position: absolute; + top: 0; + left: 0; +} + +.img-link:hover .status-nsfw-overlay { + display: none; +} + +.status-video-container { + display: inline-block; + position: relative; +} + +.status-video-container:hover .status-nsfw-overlay { + display: none; +} + +.post-form-field>* { + vertical-align: middle; +} + +.emoji { + min-width: 220px; + display: inline-block; + margin-bottom: 2px; +} + +.emoji-img { + height: 24px; + width: 24px; + object-fit: contain; + vertical-align: middle; + +} + +.emoji-shortcode { + vertical-align: middle; + display: inline-block; +} + +.post-form-emoji-link { + margin-left: 4px; +} + +.post-form-emoji-link i { + font-size: 14pt !important; +} + +.post-form-title { + vertical-align: middle; +} + +.user-info { + margin-bottom: 8px; + display: flex; + align-items: top; +} + +.user-info-img { + max-height: 64px; + max-width: 64px; + object-fit: contain; + vertical-align: middle; +} + +.user-info-details-container { + margin-left: 8px; +} + +.user-info-details-container>div { + margin-bottom: 4px; +} + +.nav-link { + margin-right: 2px; +} + +.user-list-container { + margin: 8px 0; +} + +.user-list-item a { + text-decoration: none; +} + +.user-list-item>div { + display: inline-block; + vertical-align: top; + margin: 0 4px 8px 0; +} + +#settings-form { + margin: 8px 0; +} + +.settings-form-field { + margin: 4px 0; +} + +.settings-form-field * { + vertical-align: middle; +} + +#settings-form button[type=submit] { + margin-top: 8px; +} + +.icon { + height: 16px; + vertical-align: middle; +} + +.icon.post-emoji { + height: 20px; +} + +#reply-popup { + position: absolute; + background: #ffffff; + border: 1px solid #aaaaaa; + padding: 4px 8px; + z-index: 3; + margin: 0 8px 0 8px; +} + +#reply-to-popup { + position: absolute; + background: #ffffff; + border: 1px solid #aaaaaa; + padding: 4px 8px; + z-index: 3; + margin: 0 8px 0 8px; +} + +.dark { + background-color: #222222; + background-image: none; + color: #eaeaea; +} + +.dark a { + color: #81a2be; +} + +.dark .status-action a { + color: #999999; +} + +.dark #post-content { + background-color: #333333; + border: 1px solid #444444; + color: #eaeaea; +} + +.dark #reply-popup, +.dark #reply-to-popup { + background-color: #222222; + border-color: #444444; +} + +.dark .status-container-container.highlight { + background-color: #333333; +} + -- cgit v1.2.3