posts: adjust css of thumbnail video length indicator.
Switch the font to 11px bold Arial. This is more compact and more readable than 9px Tahoma. Also add a slight border radius and margins around the indicator to make it stand out from the edge of the image.
This commit is contained in:
@@ -1,13 +1,15 @@
|
||||
:root {
|
||||
--text-xs: 0.5625rem; // 9px
|
||||
--text-sm: 0.75rem; // 12px
|
||||
--text-md: 0.875rem; // 14px
|
||||
--text-lg: 1rem; // 16px
|
||||
--text-xl: 1.3125rem; // 21px
|
||||
--text-xxl: 1.75rem; // 28px
|
||||
--text-xxs: 0.5625rem; // 9px
|
||||
--text-xs: 0.6875rem; // 11px
|
||||
--text-sm: 0.75rem; // 12px
|
||||
--text-md: 0.875rem; // 14px
|
||||
--text-lg: 1rem; // 16px
|
||||
--text-xl: 1.3125rem; // 21px
|
||||
--text-xxl: 1.75rem; // 28px
|
||||
--header-font: Tahoma, Verdana, Helvetica, sans-serif;
|
||||
--body-font: Verdana, Helvetica, sans-serif;
|
||||
--monospace-font: 0.875rem monospace; // 14px
|
||||
--arial-font: Arial, Helvetica, sans-serif;
|
||||
}
|
||||
|
||||
$h1_padding: 0.8em 0 0.25em 0;
|
||||
|
||||
@@ -8,6 +8,7 @@ $spacer: 0.25rem; /* 4px */
|
||||
.invisible { visibility: hidden; }
|
||||
.visible { visibility: visible; }
|
||||
|
||||
.font-arial { font-family: var(--arial-font); }
|
||||
.font-monospace { font: var(--monospace-font); }
|
||||
.font-bold { font-weight: bold; }
|
||||
|
||||
@@ -17,8 +18,9 @@ $spacer: 0.25rem; /* 4px */
|
||||
.text-center { text-align: center; }
|
||||
.text-muted { color: var(--muted-text-color); }
|
||||
|
||||
.text-xs { font-size: var(--text-xs); }
|
||||
.text-sm { font-size: var(--text-sm); }
|
||||
.text-xxs { font-size: var(--text-xxs); }
|
||||
.text-xs { font-size: var(--text-xs); }
|
||||
.text-sm { font-size: var(--text-sm); }
|
||||
|
||||
.leading-none { line-height: 1; }
|
||||
|
||||
@@ -27,6 +29,12 @@ $spacer: 0.25rem; /* 4px */
|
||||
.top-0\.5 { top: 0.5 * $spacer; }
|
||||
.left-0\.5 { left: 0.5 * $spacer; }
|
||||
|
||||
.rounded-sm { border-radius: 0.5 * $spacer; }
|
||||
.rounded { border-radius: 1.0 * $spacer; }
|
||||
|
||||
.m-px { margin: 1px; }
|
||||
.m-0\.5 { margin: 0.5 * $spacer; }
|
||||
|
||||
.mx-auto { margin-left: auto; margin-right: auto; }
|
||||
.mx-0\.5 { margin-left: 0.5 * $spacer; margin-right: 0.5 * $spacer; }
|
||||
.mx-2 { margin-left: 2 * $spacer; margin-right: 2 * $spacer; }
|
||||
|
||||
@@ -13,7 +13,7 @@ div#c-forum-topics {
|
||||
|
||||
&.label {
|
||||
display: inline-block;
|
||||
font-size: var(--text-xs);
|
||||
font-size: var(--text-xxs);
|
||||
text-transform: uppercase;
|
||||
border: 1px solid;
|
||||
border-radius: 0.25rem;
|
||||
|
||||
@@ -244,7 +244,7 @@ div#c-post-versions, div#c-artist-versions {
|
||||
}
|
||||
|
||||
i#open-edit-dialog {
|
||||
font-size: var(--text-xs);
|
||||
font-size: var(--text-xxs);
|
||||
}
|
||||
|
||||
span[data-tag-counter] {
|
||||
|
||||
Reference in New Issue
Block a user