X-Git-Url: http://these/git/?a=blobdiff_plain;f=src%2Fassets%2Fcss%2Fmain.css;h=36566b9b969846d9e1f5405777aec87b0c10e5d3;hb=9ce164245f51b834997f31f3f12497ee87474965;hp=e1adfc53e1fde6077b34e16b552c8a6604b73825;hpb=05aa483d899f83b231259fd0072c243c6567b922;p=lemmy-ui.git

diff --git a/src/assets/css/main.css b/src/assets/css/main.css
index e1adfc5..36566b9 100644
--- a/src/assets/css/main.css
+++ b/src/assets/css/main.css
@@ -21,7 +21,7 @@
 }
 
 .upvote:hover {
-  color: var(--info);
+  color: var(--bs-info);
 }
 
 .upvote {
@@ -29,14 +29,14 @@
 }
 
 .downvote:hover {
-  color: var(--danger);
+  color: var(--bs-danger);
 }
 
 .downvote {
   margin-top: -10px;
 }
 
-.custom-select {
+.form-select {
   -moz-appearance: none;
 }
 
@@ -46,7 +46,7 @@
 }
 
 .md-div p:last-child {
-  margin-bottom: 0px;
+  margin-bottom: 0;
 }
 
 .md-div img {
@@ -80,40 +80,13 @@
   overflow-x: auto;
 }
 
-.md-div table {
-  border-collapse: collapse;
-  width: 100%;
-  margin-bottom: 1rem;
-  border: 1px solid var(--dark);
-}
-
-.md-div table th,
-.md-div table td {
-  padding: 0.3rem;
-  vertical-align: top;
-  border-top: 1px solid var(--dark);
-  border: 1px solid var(--dark);
-}
-
-.md-div table thead th {
-  vertical-align: bottom;
-  border-bottom: 2px solid var(--dark);
-}
-
-.md-div table tbody + tbody {
-  border-top: 2px solid var(--dark);
-}
-
 .vote-bar {
+  min-width: 5ch;
   margin-top: -6.5px;
 }
 
-.post-title {
-  line-height: 1;
-}
-
-.post-title a:visited {
-  color: var(--gray) !important;
+.post-title a:visited:not(:hover) {
+  color: var(--bs-gray) !important;
 }
 
 .icon {
@@ -152,7 +125,8 @@
 
 .emoji-picker-container {
   position: absolute;
-  top: 30px;
+  top: 0;
+  left: 50%;
   z-index: 1000;
   transform: translateX(-50%);
 }
@@ -203,7 +177,7 @@
 }
 
 blockquote {
-  border-left: 2px solid var(--secondary);
+  border-left: 2px solid var(--bs-secondary);
   margin: 0.5em 5px;
   padding: 0.1em 5px;
 }
@@ -225,9 +199,14 @@ blockquote {
 
 .thumbnail {
   object-fit: cover;
-  min-height: 60px;
-  max-height: 80px;
+  aspect-ratio: 1/1;
+  width: 5rem;
+  height: 5rem;
+}
+
+.mobile-thumbnail-container .thumbnail {
   width: 100%;
+  height: auto;
 }
 
 .thumbnail svg {
@@ -242,7 +221,7 @@ blockquote {
 }
 
 hr {
-  border-top: 1px solid var(--light);
+  border-top: 1px solid var(--bs-light);
 }
 
 .emoji {
@@ -280,10 +259,6 @@ hr {
   -ms-filter: blur(10px);
 }
 
-.img-cover {
-  object-fit: cover;
-}
-
 .img-expanded {
   max-height: 90vh;
 }
@@ -294,11 +269,16 @@ hr {
   -ms-transform: scale(1.2);
 }
 
+/**
+ * TODO: Fix this in markup rather than this overly specific selector:
+ * https://getbootstrap.com/docs/5.3/components/buttons/#block-buttons
+ */
+.btn.d-block + .btn.d-block {
+  margin-top: 0.5rem;
+}
+
 .mini-overlay {
-  position: absolute;
-  top: 0;
-  right: 0;
-  padding: 2px;
+  display: block;
   height: 1.5em;
   width: 1.5em;
   background: rgba(0, 0, 0, 0.4);
@@ -371,10 +351,12 @@ br.big {
 }
 
 .avatar-overlay {
-  width: 20%;
-  height: 20%;
+  width: 20vw;
+  height: 20vw;
   max-width: 120px;
   max-height: 120px;
+  min-width: 80px;
+  min-height: 80px;
 }
 
 .avatar-pushup {
@@ -382,8 +364,9 @@ br.big {
 }
 
 .img-icon {
-  width: 2rem;
-  height: 2rem;
+  width: calc(var(--bs-body-line-height) * 1em);
+  height: calc(var(--bs-body-line-height) * 1em);
+  border-radius: 0.25em;
 }
 
 .tribute-container ul {
@@ -391,16 +374,16 @@ br.big {
   margin-top: 2px;
   padding: 0;
   list-style: none;
-  background: var(--light);
+  background: var(--bs-light);
 }
 
 .tribute-container li {
-  padding: 5px 5px;
+  padding: 5px;
   cursor: pointer;
 }
 
 .tribute-container li.highlight {
-  background: var(--primary);
+  background: var(--bs-primary);
 }
 
 .tribute-container li span {
@@ -434,13 +417,22 @@ br.big {
   -webkit-line-clamp: 3;
   -webkit-box-orient: vertical;
 }
-.lang-select-action {
-  width: 100px;
+
+#emoji-picker {
+  width: 100%;
 }
 
-.lang-select-action:focus {
-  width: auto;
+.skip-link {
+  top: -40px;
+  transition: top 0.3s ease;
 }
-em-emoji-picker {
-  width: 100%;
+
+@media (prefers-reduced-motion: reduce) {
+  .skip-link {
+    transition: none;
+  }
+}
+
+.skip-link:focus {
+  top: 0;
 }