Add border radius for badges as CSS variable, add space from the edge

ronilaukkarinen · Jul 4, 2023 · 5a4856e · 5a4856e
1 parent 859f3b2
commit 5a4856e
Show file tree

Hide file tree

Showing 3 changed files with 30 additions and 4 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -4,6 +4,8 @@
 * Add show/hide media icon button styles with border-radius (thanks @MikeHuntington!)
 * Add border-radius as a CSS variable
 * Add consistent border radius to alt badge
+* Add --border-radius-badges CSS variable
+* Make badges 12px from the edge
 
 ### 1.5.8rc5-nightly: 2023-07-04
 

diff --git a/layout-multiple-columns.css b/layout-multiple-columns.css
@@ -75,6 +75,7 @@
   --width-side-panel: 260px;
   --width-column: 380px;
   --border-radius: 16px;
+  --border-radius-badges: 4px;
 
   /* Misc */
   --active-header-box-shadow: 0 1px 0 rgba(140, 141, 255, .3);
@@ -1331,14 +1332,25 @@ body.embed .detailed-status__meta .detailed-status__link .fa-retweet,
 /* Hide/Show media button */
 .layout-multiple-columns .spoiler-button.spoiler-button--minified > button {
   background-color: var(--color-bg);
-  border-radius: var(--border-radius);
+  border-radius: var(--border-radius-badges);
   color: var(--color-ghost-button-text);
   opacity: .5;
 }
 
 /* Alt badge */
 .layout-multiple-columns .media-gallery__item__badges > span {
-  border-radius: var(--border-radius);
+  border-radius: var(--border-radius-badges);
+}
+
+/* Distance from the edge */
+.layout-multiple-columns .spoiler-button--minified {
+  inset-inline-start: 12px;
+  top: 12px;
+}
+
+.layout-multiple-columns .media-gallery__item__badges {
+  bottom: 12px;
+  inset-inline-start: 12px;
 }
 
 .layout-multiple-columns .spoiler-button.spoiler-button--minified > button:hover,

diff --git a/layout-single-column.css b/layout-single-column.css
@@ -74,6 +74,7 @@
   --width-main-panel: 600px;
   --width-side-panel: 260px;
   --border-radius: 16px;
+  --border-radius-badges: 4px;
 
   /* Misc */
   --active-header-box-shadow: 0 1px 0 rgba(140, 141, 255, .3);
@@ -1299,14 +1300,25 @@ body.embed .detailed-status__meta .detailed-status__link .fa-retweet,
 /* Hide/Show media button */
 .layout-single-column .spoiler-button.spoiler-button--minified > button {
   background-color: var(--color-bg);
-  border-radius: var(--border-radius);
+  border-radius: var(--border-radius-badges);
   color: var(--color-ghost-button-text);
   opacity: .5;
 }
 
 /* Alt badge */
 .layout-single-column .media-gallery__item__badges > span {
-  border-radius: var(--border-radius);
+  border-radius: var(--border-radius-badges);
+}
+
+/* Distance from the edge */
+.layout-single-column .spoiler-button--minified {
+  inset-inline-start: 12px;
+  top: 12px;
+}
+
+.layout-single-column .media-gallery__item__badges {
+  bottom: 12px;
+  inset-inline-start: 12px;
 }
 
 .layout-single-column .spoiler-button.spoiler-button--minified > button:hover,