diff --git a/src/app.css b/src/app.css index 233d4f5d..15023410 100644 --- a/src/app.css +++ b/src/app.css @@ -396,7 +396,7 @@ button.carousel-dot.active { padding: 16px; box-shadow: 0 0 32px var(--bg-color); z-index: 1; - outline: 1px solid var(--bg-color); + border: 1px solid var(--bg-color); opacity: .75; } @@ -423,7 +423,7 @@ button.carousel-dot.active { padding: 16px; box-shadow: 0 -1px 32px var(--divider-color); animation: slide-up 0.2s ease-out; - outline: 1px solid var(--outline-color); + border: 1px solid var(--outline-color); } /* TAG */ diff --git a/src/components/avatar.css b/src/components/avatar.css index 3dc9e704..6e20f67d 100644 --- a/src/components/avatar.css +++ b/src/components/avatar.css @@ -5,7 +5,7 @@ border-radius: 50%; overflow: hidden; background-color: var(--bg-faded-color); - outline: 1px solid var(--outline-color); + border: 1px solid var(--outline-color); flex-shrink: 0; } diff --git a/src/components/compose.css b/src/components/compose.css index b0ba259b..e81ceb52 100644 --- a/src/components/compose.css +++ b/src/components/compose.css @@ -67,8 +67,6 @@ border-radius: 8px; padding: 4px 12px; background-image: linear-gradient(var(--bg-color) 75%, transparent); - /* outline: 1px solid var(--outline-color); */ - /* box-shadow: 0 0 12px var(--divider-color); */ position: relative; z-index: 1; } @@ -96,13 +94,14 @@ background-color: var(--bg-faded-color); padding: 0 8px; border-radius: 8px; - min-height: 2.5em; - line-height: 2.5em; - min-width: 2.5em; + min-height: 2.4em; + line-height: 2.4em; + min-width: 2.6em; text-align: center; overflow: hidden; position: relative; white-space: nowrap; + border: 2px solid transparent; } #compose-container .toolbar-button > * { vertical-align: middle; @@ -119,6 +118,7 @@ position: absolute; left: 0; height: 100%; + margin: 0; } #compose-container .toolbar-button input[type="file"] { /* Move this out of the way, to fix cursor: pointer bug */ @@ -127,7 +127,6 @@ #compose-container .toolbar-button select { background-color: transparent; border: 0; - outline: 0; padding: 0 0 0 8px; } #compose-container .toolbar-button:not(.show-field) select { @@ -135,7 +134,7 @@ left: auto !important; } #compose-container .toolbar-button:hover { - outline: 2px solid var(--divider-color); + border-color: var(--divider-color); } #compose-container .toolbar-button:active { filter: brightness(0.8); @@ -151,7 +150,7 @@ margin: 0 0 0 -8px; padding: 0; list-style: none; - outline: 1px solid var(--outline-color); + border: 1px solid var(--outline-color); /* box-shadow: 0 0 12px var(--outline-color); */ border-radius: 8px; overflow: hidden; @@ -208,7 +207,7 @@ object-fit: contain; background-color: var(--img-bg-color); border-radius: 8px; - outline: 1px solid var(--outline-color); + border: 1px solid var(--outline-color); } #compose-container .media-attachment textarea { height: 80px; diff --git a/src/components/status.css b/src/components/status.css index d77db1a1..81fbceca 100644 --- a/src/components/status.css +++ b/src/components/status.css @@ -107,7 +107,7 @@ .status .content-container.has-spoiler .spoiler { margin: 8px 0; font-size: 90%; - outline: 1px dashed var(--button-bg-color); + border: 1px dashed var(--button-bg-color); display: flex; gap: 8px; align-items: center; @@ -122,7 +122,7 @@ opacity: .5; } .status .content-container.show-spoiler .spoiler { - outline-style: dotted; + border-style: dotted; } .status .content-container.show-spoiler .spoiler ~ * { filter: none; @@ -174,10 +174,10 @@ border-radius: 8px; overflow: hidden; max-height: 160px; - outline: 1px solid var(--outline-color); + border: 1px solid var(--outline-color); } .status .media:hover { - outline-color: var(--outline-hover-color); + border-color: var(--outline-hover-color); } .status .media.block { flex-basis: 100%; @@ -237,7 +237,7 @@ object-fit: cover; } .status .media-audio { - outline: 0; + border: 0; } .status .media-audio audio { width: 100%; @@ -249,7 +249,7 @@ display: flex; margin-top: 8px; border-radius: 8px; - outline: 1px solid var(--outline-color); + border: 1px solid var(--outline-color); overflow: hidden; gap: 8px; color: inherit; @@ -263,7 +263,7 @@ min-height: 120px; max-height: 160px; object-fit: cover; - outline: 1px solid var(--outline-color); + border: 1px solid var(--outline-color); } .card:hover .image { animation: position-object 5s ease-in-out 1s infinite; @@ -289,6 +289,14 @@ font-size: smaller; opacity: 0.75; margin: 0; + text-overflow: ellipsis; + overflow: hidden; + display: -webkit-box; + display: box; + -webkit-box-orient: vertical; + box-orient: vertical; + -webkit-line-clamp: 2; + line-clamp: 2; } .card .meta.domain { opacity: 1; @@ -299,7 +307,7 @@ a.card { transition: opacity 0.2s ease-in-out; } a.card:hover { - outline: 1px solid var(--outline-hover-color); + border: 1px solid var(--outline-hover-color); } .card.video { max-width: 320px; @@ -320,7 +328,7 @@ a.card:hover { justify-content: space-between; background-image: linear-gradient(to right, var(--link-faded-color), var(--link-faded-color) var(--percentage), transparent var(--percentage), transparent); border-radius: 8px; - outline: 1px solid rgba(128, 128, 128, .1); + border: 1px solid rgba(128, 128, 128, .1); align-items: center; } .poll-label { @@ -376,18 +384,18 @@ a.card:hover { } .status .actions > button.plain.reblog-button.reblogged { color: var(--reblog-color); - outline: 1.5px solid var(--reblog-color); + border: 1.5px solid var(--reblog-color); } .status .actions > button.plain.favourite-button:hover { color: var(--favourite-color); } .status .actions > button.plain.favourite-button.favourited { color: var(--favourite-color); - outline: 1.5px solid var(--favourite-color); + border: 1.5px solid var(--favourite-color); } .status .actions > button.plain.bookmark-button.bookmarked { color: var(--link-color); - outline: 1.5px solid var(--link-color); + border: 1.5px solid var(--link-color); } /* ENHANCED CONTENT */ @@ -399,7 +407,7 @@ a.card:hover { overflow: auto; width: 100%; font-size: 90%; - outline: 1px solid var(--outline-color); + border: 1px solid var(--outline-color); background: linear-gradient(to bottom right, var( --bg-faded-color ), transparent 160px); diff --git a/src/index.css b/src/index.css index 8d6a2a0a..ad381ffd 100644 --- a/src/index.css +++ b/src/index.css @@ -127,7 +127,7 @@ button > * { :is(button, .button).light { background-color: var(--bg-faded-color); color: var(--text-color); - outline: 1px solid var(--outline-color); + border: 1px solid var(--outline-color); } :is(button, .button).block { diff --git a/src/pages/settings.css b/src/pages/settings.css index 9bf450ba..d6feb719 100644 --- a/src/pages/settings.css +++ b/src/pages/settings.css @@ -43,8 +43,8 @@ opacity: 1; } #settings-container ul li .current.is-current + .avatar { - outline-color: var(--green-color); - outline-width: 2px; + border-color: var(--green-color); + border-width: 2px; } #settings-container ul li > div { flex-grow: 1;