aboutsummaryrefslogtreecommitdiff
path: root/static
diff options
context:
space:
mode:
Diffstat (limited to 'static')
-rw-r--r--static/fluoride.js9
-rw-r--r--static/style.css584
2 files changed, 285 insertions, 308 deletions
diff --git a/static/fluoride.js b/static/fluoride.js
index d5c5b5d..73d4939 100644
--- a/static/fluoride.js
+++ b/static/fluoride.js
@@ -74,8 +74,10 @@ function handleLikeForm(id, f) {
for (var i = 0; i < counts.length; i++) {
if (count > 0) {
counts[i].innerHTML = "(" + count + ")";
+ counts[i].classList.remove("hidden");
} else {
counts[i].innerHTML = "";
+ counts[i].classList.add("hidden");
}
}
}, function(err) {
@@ -113,8 +115,10 @@ function handleRetweetForm(id, f) {
for (var i = 0; i < counts.length; i++) {
if (count > 0) {
counts[i].innerHTML = "(" + count + ")";
+ counts[i].classList.remove("hidden");
} else {
counts[i].innerHTML = "";
+ counts[i].classList.add("hidden");
}
}
}, function(err) {
@@ -151,8 +155,7 @@ function handleReplyToLink(a) {
var ract = event.target.getBoundingClientRect();
copy.style["max-width"] = (window.innerWidth - ract.left - 32) + "px";
if (ract.top > window.innerHeight / 2) {
- copy.style.bottom = (window.innerHeight -
- window.scrollY - ract.top) + "px";
+ copy.style.bottom = ract.height + 'px';
}
event.target.parentElement.appendChild(copy);
}
@@ -320,7 +323,7 @@ document.addEventListener("DOMContentLoaded", function() {
}
}
- var links = document.querySelectorAll(".user-profile-decription a, .user-fields a");
+ var links = document.querySelectorAll(".user-profile-description a, .user-fields a");
for (var j = 0; j < links.length; j++) {
links[j].target = "_blank";
}
diff --git a/static/style.css b/static/style.css
index 28683e7..9cc203d 100644
--- a/static/style.css
+++ b/static/style.css
@@ -1,23 +1,58 @@
-frame, body {
- background-color: #d2d2d2;
+body,
+button,
+input,
+select,
+textarea {
+ font-family: sans-serif;
}
-.status-container-container {
- margin: 0 -4px 12px -4px;
- padding: 4px;
+input::file-selector-button {
+ font-family: sans-serif;
+}
+
+input[type=text],
+textarea {
+ font-size: inherit;
+}
+
+h1 {
+ font-weight: normal;
+ font-size: x-large;
+}
+
+frame,
+body,
+.more-content {
+ background-color: #fcfcfc;
+}
+
+.status-container-container,
+.notification-container {
+ background-color: #f0f0f0;
+ background-color: #eaeaea99;
+ margin: 8px 0;
+ padding: 12px 4px;
border-left: 4px solid transparent;
}
-.status-container-container:target {
- border-color: #777777;
+@media only screen and (max-width: 768px) {
+ .status-container-container,
+ .notification-container {
+ margin: 8px -4px;
+ }
}
.status-container-container.highlight {
- background-color: #eeeeee;
+ background-color: #d3d3d3;
+ background-color: #cfcfcf99;
+}
+
+.status-container-container:target {
+ border-left: 4px solid #777777;
}
.status-container {
- display: flex;
+ position: relative;
}
.status-content {
@@ -47,19 +82,19 @@ frame, body {
}
.status-media-container {
- margin: 5px 0 -5px 0;
+ margin: 4px 0;
overflow: auto;
}
-.status-media-container>a {
- margin-bottom: 5px;
+.status-image-container,
+.status-video-container {
display: inline-block;
+ position: relative;
+ margin: 2px 4px 2px 0;
}
.status-profile-img-container {
- margin-right: 8px;
- display: inline-block;
- vertical-align: top;
+ position: absolute;
}
.status-profile-img {
@@ -71,27 +106,20 @@ frame, body {
max-width: 48px;
vertical-align: top;
object-fit: contain;
- margin-top: 2px;
}
-.status {
- display: inline-block;
- vertical-align: top;
- flex: 1;
- min-width: 0;
-}
-
-.status-dname {
- font-weight: 800;
+.user-list-profile-img .img-link,
+.status-profile-img-container .img-link {
+ width: 48px;
+ overflow: hidden;
}
-.status-uname {
- font-style: italic;
- font-size: 10pt;
+.retweet-info .img-link {
+ margin-right: 4px;
}
-.status-action-container {
- margin-top: 4px;
+.status {
+ margin-left: 56px;
}
.status-action {
@@ -103,46 +131,14 @@ frame, body {
margin-right: 4px;
}
-.status-action form {
- display: inline-block;
-}
-
-.status-action a {
- display: inline-block;
-}
-
-.status-action * {
- vertical-align: middle;
-}
-
-.status-action a.status-time {
- width: auto;
-}
-
-.page-title {
- font-size: 18pt;
- margin: 8px 0;
-}
-
-.post-form {
- margin: 4px 0;
-}
-
-.post-form>div {
- margin-bottom: 4px;
-}
-
-.signin-form {
- margin: 8px 0;
-}
-
-.signin-form input {
- margin: 4px 0;
-}
-
.retweet-info {
margin: 0 0 4px 24px;
overflow-wrap: break-word;
+ font-size: smaller;
+}
+
+.retweet-info>* {
+ vertical-align: middle;
}
.retweet-info .status-profile-img {
@@ -155,113 +151,71 @@ frame, body {
vertical-align: middle;
}
-.retweet-info .status-dname {
- margin-left: 4px;
-}
-
textarea {
padding: 4px;
- font-size: 11pt;
- font-family: initial;
box-sizing: border-box;
+ width: 644px;
+ max-width: 100%;
}
.post-content {
width: 100%;
}
-#css, #bio {
- max-width: 100%;
+.monospace {
+ font-family: monospace;
}
.pagination {
- margin: 4px 4px 12px 4px;
+ margin: 12px 4px;
}
.pagination a {
margin: 0 8px;
- font-size: 13pt;
-}
-
-.notification-container {
- margin: 0 -4px 12px -4px;
- padding: 4px;
- border-left: 4px solid transparent;
+ font-size: large;
}
.notification-container.unread {
border-color: #777777;
}
-.notification-container .status-container {
+.notification-container .status-content,
+.notification-container .status-reply-container,
+.notification-container .status-media-container {
opacity: 0.6;
}
-.notification-container.mention .status-container {
- opacity: unset;
-}
-
-.notification-info-text span {
- vertical-align: middle;
+.notification-container.mention .status-content,
+.notification-container.mention .status-reply-container,
+.notification-container.mention .status-media-container {
+ opacity: 1;
}
-.notification-follow-container {
- overflow: auto;
- display: flex;
- align-items: center;
-}
-
-.notification-follow {
- overflow: auto;
-}
-
-.notification-time {
- margin-left: 8px;
-}
-
-.status-reply-to-link {
- font-size: 10pt
+.status-reply-to-link,
+.status-reply-link,
+.status-reply-text {
+ font-size: smaller;
}
.status-reply-container {
overflow-wrap: break-word;
-}
-
-.status-reply-container .fa {
- font-size: 10pt;
- vertical-align: sub;
- margin-right: -2px;
-}
-
-.status-reply-text {
- font-size: 10pt;
-}
-
-.status-reply-link {
- font-size: 10pt;
+ position: relative;
}
.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;
margin: 0 4px 4px 0;
}
+.user-profile-img-container .img-link {
+ width: 96px;
+ overflow: hidden;
+}
+
.user-profile-details-container {
display: inline-block;
vertical-align: top;
@@ -276,20 +230,19 @@ textarea {
width: 96px;
vertical-align: top;
object-fit: contain;
- margin-top: 2px;
}
-.user-profile-decription,
+.user-profile-description,
.user-fields {
overflow-wrap: break-word;
margin: 8px 0;
}
-.user-profile-decription p {
+.user-profile-description p {
margin: 0;
}
-.user-profile-decription img {
+.user-profile-description img {
height: auto;
width: auto;
max-height: 240px;
@@ -301,49 +254,42 @@ textarea {
display: inline;
}
-.p-0 {
- padding: 0;
-}
-
.btn-link {
- border: none;
outline: none;
- background: none;
cursor: pointer;
padding: 0;
- font-family: inherit;
font-size: inherit;
+ background: none !important;
+ border: none !important;
}
-a, .btn-link {
- color: #464acc;
+a,
+.btn-link {
+ color: #1449af;
text-decoration: none;
}
a:hover,
.btn-link:hover {
- color: #8387bf;
+ color: #4489bf;
}
-.status-visibility {
- margin-left: 4px;
- display: inline-block;
- color: #222222;
- font-size: 8pt;
+.btn-link:disabled {
+ color: #5a5a77;
+ cursor: unset;
+}
+
+*:focus-visible {
+ outline: 1px solid #000000;
}
.remote-link {
margin-left: 4px;
- font-size: 8pt;
+ font-size: smaller;
}
.img-link {
display: inline-block;
- position: relative;
-}
-
-.status-profile-img-container .img-link {
- width: 48px;
}
.status-nsfw-overlay {
@@ -355,16 +301,7 @@ a:hover,
right: 0;
}
-.img-link:hover .status-nsfw-overlay {
- display: none;
-}
-
-.status-video-container {
- display: inline-block;
- position: relative;
- margin-bottom: 5px;
-}
-
+.status-image-container:hover .status-nsfw-overlay,
.status-video-container:hover .status-nsfw-overlay {
display: none;
}
@@ -372,8 +309,11 @@ a:hover,
.emoji-item-container {
width: 220px;
display: inline-block;
- margin: 4px 0;
+ margin: 4px 4px 0 0;
overflow: hidden;
+ padding: 4px;
+ background-color: #f0f0f0;
+ background-color: #eaeaea99;
}
.emoji-item {
@@ -394,47 +334,58 @@ img.emoji {
}
.status-dname img.emoji {
- height: 24px;
- min-height: 24px;
- min-width: 24px;
+ height: 20px;
+ min-height: 20px;
+ min-width: 20px;
+}
+
+.retweet-info>.status-dname img.emoji {
+ height: 16px;
+ min-height: 16px;
+ min-width: 16px;
}
.emoji-shortcode {
margin-left: 4px;
}
-.post-form-emoji-link {
- margin-left: 4px;
+.nav-container {
+ position: relative;
+ margin-bottom: 4px;
+}
+
+.nav-profile-img-container {
+ position: absolute;
}
-.user-info-img {
+.nav-profile-img {
height: 64px;
width: 64px;
vertical-align: middle;
object-fit: contain;
- margin-top: 2px;
}
-.user-info-img-container {
- float: left;
- margin-right: 8px;
+.nav-link-container {
+ margin-left: 72px;
}
-.user-info-details-container {
- overflow: auto;
+nav ul {
+ list-style: none;
+ margin: 4px 0;
+ padding: 0;
}
-.user-info-details-name,
-.user-info-details-nav {
- margin-bottom: 4px;
+nav li {
+ display: inline;
}
.nav-link {
margin-right: 2px;
}
-.profile-edit-link {
- font-size: 8pt;
+.nav-profile-link {
+ margin-right: 2px;
+ font-size: smaller;
}
.user-list-item {
@@ -445,65 +396,51 @@ img.emoji {
align-items: center;
}
-.user-list-profile-img {
- float: left;
- margin: 0 8px 0 0;
+td .user-list-item {
+ padding: 0;
}
-.user-list-name {
- overflow: auto;
+.user-list-profile-img {
+ margin: 0 8px 0 0;
}
.user-list-action {
margin: 0 12px;
}
-#settings-form {
- margin: 8px 0;
-}
-
-.settings-form-field {
- margin: 4px 0;
+.form-field {
+ margin-bottom: 8px;
}
-#settings-form button[type=submit] {
- margin-top: 8px;
+.form-field-s {
+ margin-bottom: 4px;
}
-#reply-popup {
- position: absolute;
- background-color: #d2d2d2;
- border: 1px solid #aaaaaa;
- padding: 4px 8px;
- z-index: 3;
- margin: 0;
+.emoji-link {
+ margin-left: 4px;
}
+#reply-popup,
#reply-to-popup {
+ background-color: #f0f0f0;
+ border: 1px solid #bababa;
position: absolute;
- background-color: #d2d2d2;
- border: 1px solid #aaaaaa;
padding: 4px 8px;
z-index: 3;
margin: 0;
}
-.search-form {
- margin: 12px 0;
-}
-
.more-container {
position: relative;
display: inline-block;
}
.more-content {
- display: none;
position: absolute;
- background-color: #d2d2d2;
+ display: none;
padding: 2px 4px;
- border: 1px solid #aaaaaa;
z-index: 1;
+ border: 1px solid #bababa;
}
.more-container:hover .more-content {
@@ -511,74 +448,28 @@ img.emoji {
}
.more-link {
- font-size: 8pt;
+ font-size: smaller;
display: block;
margin: 2px;
}
-.poll-form {
- margin-top: 5px;
+.status-poll {
+ margin: 4px 0;
overflow: auto;
overflow-wrap: break-word;
}
-.poll-form button[type=submit] {
- margin-top: 6px;
-}
-
-.poll-info {
- margin-top: 6px;
-}
-
-.page-title-container {
- margin: 8px 0;
-}
-
-.page-refresh {
- margin-right: 8px;
-}
-
-.notification-text {
- vertical-align: middle;
-}
-
-.notification-read {
- display: inline-block;
-}
-
-.no-data-found {
- margin: 12px 0;
-}
-
-.signout {
- display: inline;
-}
-
-.signin-desc {
- margin: 8px 0 16px 0;
-}
-
-.keyboard-shortcuts {
- margin-top: 12px;
-}
-
-.keyboard-shortcuts td {
- padding: 2px 4px;
+.page-link {
+ font-size: large;
}
kbd {
- border-radius: 3px;
- padding: 1px 4px;
- border: 1px solid #444444;
- background-color: #eeeeee;
- font-size: 10pt;
-}
-
-.filters {
- margin: 10px 0;
+ padding: 2px 4px;
+ background-color: #f0f0f0;
+ border: 1px solid #bababa;
}
-.filters td {
+td {
padding: 2px 4px;
}
@@ -588,73 +479,111 @@ kbd {
position: fixed;
}
-.quote {
- color: #789922;
+blockquote {
+ margin: 4px 20px;
+ border-left: 2px solid #3e7300;
+ padding-left: 12px;
}
-.profile-form {
- margin: 0 4px;
+blockquote,
+.quote {
+ color: #3e7300;
}
-.profile-form-field {
- margin: 8px 0;
+.profile-img-container {
+ margin: 4px 0;
}
.profile-avatar {
height: 96px;
width: 96px;
object-fit: contain;
+ vertical-align: middle;
}
.profile-banner {
height: 120px;
+ vertical-align: middle;
}
-.block-label,
-.profile-delete,
-.profile-field,
-.profile-field input {
+.block-label {
margin: 0 0 4px 0;
}
-.profile-form input[type=text] {
+.input-w {
width: 320px;
max-width: 100%;
box-sizing: border-box;
}
-#bio {
- width: 644px;
+.follow-request-actions {
+ margin-top: 4px;
}
-.dark {
- background-color: #222222;
- background-image: none;
- color: #eaeaea;
+.hidden {
+ display: none;
}
-.dark a {
- color: #81a2be;
+input[type=text],
+textarea {
+ border: 2px solid #bababa;
}
-.dark .post-content {
- background-color: #333333;
- border: 1px solid #444444;
- color: #eaeaea;
+input[type=submit],
+button,
+select,
+input::file-selector-button {
+ background-color: #eaeaea;
+ border: 2px solid #bababa;
}
-.dark #reply-popup,
-.dark #reply-to-popup {
- background-color: #222222;
- border-color: #444444;
+input[type=text]:hover,
+textarea:hover {
+ border: 2px solid #8b8b8b;
+}
+
+input[type=submit]:hover,
+button:hover,
+select:hover,
+input::file-selector-button:hover {
+ background-color: #dfdfdf;
+ border: 2px solid #8b8b8b;
+}
+
+input[type=submit]:active,
+button:active,
+select:active,
+input::file-selector-button:active {
+ background-color: #cacaca;
+}
+
+.dark,
+.dark body,
+.dark .more-content {
+ background-color: #0f0f0f;
+ color: #dcdcdc;
+}
+
+.dark .status-container-container,
+.dark .notification-container,
+.dark .emoji-item-container {
+ background-color: #181818;
+ background-color: #1f1f1f99;
}
.dark .status-container-container.highlight {
- background-color: #333333;
+ background-color: #222222;
+ background-color: #2f2f2f99;
+}
+
+.dark #reply-popup,
+.dark #reply-to-popup {
+ background-color: #181818;
}
+.dark a,
.dark .btn-link {
- color: #81a2be;
+ color: #6090a3;
}
.dark a:hover,
@@ -662,17 +591,62 @@ kbd {
color: #497091;
}
-.dark .status-visibility {
- color: #eaeaea;
+.dark *:focus-visible {
+ outline: 1px solid #dcdcdc;
}
+.dark #reply-popup,
+.dark #reply-to-popup,
.dark .more-content {
- background-color: #222222;
- border-color: #444444;
+ border-color: #333333;
}
.dark kbd {
- background-color: #333333;
- border-color: #444444;
- color: #eaeaea;
+ background-color: #181818;
+ border: 2px solid #333333;
+}
+
+.dark blockquote,
+.dark .quote {
+ color: #779c3b;
+}
+
+.dark input[type=text],
+.dark textarea {
+ color: #dcdcdc;
+ background-color: #0c0c0c;
+ border: 2px solid #333333;
+}
+
+.dark .post-content {
+ background-color: #111111;
+}
+
+.dark input[type=submit],
+.dark button,
+.dark select,
+.dark input::file-selector-button {
+ background-color: #242424;
+ border: 2px solid #333333;
+}
+
+.dark input[type=text]:hover,
+.dark textarea:hover {
+ border: 2px solid #555555;
+}
+
+.dark input[type=submit]:hover,
+.dark button:hover,
+.dark select:hover,
+.dark input::file-selector-button:hover {
+ background-color: #2f2f2f;
+ border: 2px solid #555555;
+}
+
+
+.dark input[type=submit]:active,
+.dark button:active,
+.dark select:active,
+.dark input::file-selector-button:active {
+ background-color: #3f3f3f;
}
generated by cgit v1.2.3 (git 2.25.1) at 2024-11-22 12:37:17 +0000