jaculabilis/danbooru
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

posts: adjust css of thumbnail video length indicator.

Browse Source 
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:
evazion
2021-10-25 20:34:09 -05:00
parent 094ed4c11d
commit af5cd83cd7
5 changed files with 21 additions and 11 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
app/components/post_preview_component/post_preview_component.html.erb
View File

@@ -1,7 +1,7 @@
<%= tag.article id: "post_#{post.id}", **article_attrs do -%> <%= tag.article id: "post_#{post.id}", **article_attrs do -%>
<%= link_to polymorphic_path(link_target, q: tags) do -%> <%= link_to polymorphic_path(link_target, q: tags) do -%>
<% if is_animated? || has_sound? %> <% if is_animated? || has_sound? %>
<div class="post-animation-icon absolute top-0.5 left-0.5 p-0.5 leading-none text-xs"> <div class="post-animation-icon absolute top-0.5 left-0.5 p-0.5 m-0.5 leading-none rounded text-xs font-arial font-bold">
<% if is_animated? %> <% if is_animated? %>
<span class="post-duration align-middle"> <span class="post-duration align-middle">
<%= duration_to_hhmmss(duration) %> <%= duration_to_hhmmss(duration) %>

14
app/javascript/src/styles/base/000_vars.scss
View File

@@ -1,13 +1,15 @@
:root { :root {
--text-xs: 0.5625rem; // 9px --text-xxs: 0.5625rem; // 9px
--text-sm: 0.75rem; // 12px --text-xs: 0.6875rem; // 11px
--text-md: 0.875rem; // 14px --text-sm: 0.75rem; // 12px
--text-lg: 1rem; // 16px --text-md: 0.875rem; // 14px
--text-xl: 1.3125rem; // 21px --text-lg: 1rem; // 16px
--text-xxl: 1.75rem; // 28px --text-xl: 1.3125rem; // 21px
--text-xxl: 1.75rem; // 28px
--header-font: Tahoma, Verdana, Helvetica, sans-serif; --header-font: Tahoma, Verdana, Helvetica, sans-serif;
--body-font: Verdana, Helvetica, sans-serif; --body-font: Verdana, Helvetica, sans-serif;
--monospace-font: 0.875rem monospace; // 14px --monospace-font: 0.875rem monospace; // 14px
--arial-font: Arial, Helvetica, sans-serif;
} }
$h1_padding: 0.8em 0 0.25em 0; $h1_padding: 0.8em 0 0.25em 0;

12
app/javascript/src/styles/common/utilities.scss
View File

@@ -8,6 +8,7 @@ $spacer: 0.25rem; /* 4px */
.invisible { visibility: hidden; } .invisible { visibility: hidden; }
.visible { visibility: visible; } .visible { visibility: visible; }
.font-arial { font-family: var(--arial-font); }
.font-monospace { font: var(--monospace-font); } .font-monospace { font: var(--monospace-font); }
.font-bold { font-weight: bold; } .font-bold { font-weight: bold; }
@@ -17,8 +18,9 @@ $spacer: 0.25rem; /* 4px */
.text-center { text-align: center; } .text-center { text-align: center; }
.text-muted { color: var(--muted-text-color); } .text-muted { color: var(--muted-text-color); }
.text-xs { font-size: var(--text-xs); } .text-xxs { font-size: var(--text-xxs); }
.text-sm { font-size: var(--text-sm); } .text-xs { font-size: var(--text-xs); }
.text-sm { font-size: var(--text-sm); }
.leading-none { line-height: 1; } .leading-none { line-height: 1; }
@@ -27,6 +29,12 @@ $spacer: 0.25rem; /* 4px */
.top-0\.5 { top: 0.5 * $spacer; } .top-0\.5 { top: 0.5 * $spacer; }
.left-0\.5 { left: 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-auto { margin-left: auto; margin-right: auto; }
.mx-0\.5 { margin-left: 0.5 * $spacer; margin-right: 0.5 * $spacer; } .mx-0\.5 { margin-left: 0.5 * $spacer; margin-right: 0.5 * $spacer; }
.mx-2 { margin-left: 2 * $spacer; margin-right: 2 * $spacer; } .mx-2 { margin-left: 2 * $spacer; margin-right: 2 * $spacer; }

2
app/javascript/src/styles/specific/forum.scss
View File

@@ -13,7 +13,7 @@ div#c-forum-topics {
&.label { &.label {
display: inline-block; display: inline-block;
font-size: var(--text-xs); font-size: var(--text-xxs);
text-transform: uppercase; text-transform: uppercase;
border: 1px solid; border: 1px solid;
border-radius: 0.25rem; border-radius: 0.25rem;

2
app/javascript/src/styles/specific/posts.scss
View File

@@ -244,7 +244,7 @@ div#c-post-versions, div#c-artist-versions {
} }
i#open-edit-dialog { i#open-edit-dialog {
font-size: var(--text-xs); font-size: var(--text-xxs);
} }
span[data-tag-counter] { span[data-tag-counter] {