diff --git a/app/components/tag_list_component/tag_list_component.html.scss b/app/components/tag_list_component/tag_list_component.html.scss index b3cefc708..07bb530f8 100644 --- a/app/components/tag_list_component/tag_list_component.html.scss +++ b/app/components/tag_list_component/tag_list_component.html.scss @@ -1,4 +1,8 @@ .tag-list { + a.wiki-link { + margin-right: 0.25rem; + } + a.search-tag { overflow-wrap: normal; } @@ -11,9 +15,7 @@ } } - &.categorized-tag-list { - ul { - margin-bottom: 1em; - } + ul { + margin-bottom: 1em; } } diff --git a/app/javascript/src/styles/common/main_layout.scss b/app/javascript/src/styles/common/main_layout.scss index d3eaf4edf..60177ba70 100644 --- a/app/javascript/src/styles/common/main_layout.scss +++ b/app/javascript/src/styles/common/main_layout.scss @@ -1,5 +1,3 @@ -@import "../base/000_vars.scss"; - div#page { overflow: visible; margin: 0 20px; diff --git a/app/javascript/src/styles/common/tables.scss b/app/javascript/src/styles/common/tables.scss index 8e68c7271..91378da69 100644 --- a/app/javascript/src/styles/common/tables.scss +++ b/app/javascript/src/styles/common/tables.scss @@ -13,17 +13,12 @@ table.striped { } } - .number, .links { - text-align: right; - } - thead { tr { border-bottom: var(--table-header-border); } th { - font-weight: bold; text-align: left; } } @@ -72,3 +67,11 @@ table.search, table.aligned-vertical { table.aligned-vertical { height: 1.75em; } + +table.table-sm { + th, td { padding: 0.25rem; } +} + +table.table-md { + th, td { padding: 0.5rem; } +} diff --git a/app/javascript/src/styles/common/utilities.scss b/app/javascript/src/styles/common/utilities.scss new file mode 100644 index 000000000..1612571e5 --- /dev/null +++ b/app/javascript/src/styles/common/utilities.scss @@ -0,0 +1,48 @@ +// A small set of utility classes, modeled after TailwindCSS and Bootstrap. +// +// https://tailwindcss.com/docs +// https://getbootstrap.com/docs/5.0/utilities/spacing/ + +$spacer: 0.25rem; /* 4px */ + +.font-monospace { font-family: var(--monospace-font); } +.font-bold { font-weight: bold; } + +.inline-block { display: inline-block; } +.flex { display: flex; } + +.text-center { text-align: center; } + +.mx-auto { margin-left: auto; margin-right: auto; } +.mx-2 { margin-left: 2 * $spacer; margin-right: 2 * $spacer; } + +.mt-2 { margin-top: 2 * $spacer; } +.mt-4 { margin-top: 4 * $spacer; } + +.mb-2 { margin-bottom: 2 * $spacer; } +.mb-4 { margin-bottom: 4 * $spacer; } + +.ml-4 { margin-left: 4 * $spacer; } + +.p-4 { padding: 4 * $spacer; } + +.w-1\/4 { width: 25%; } +.w-full { width: 100%; } + +.h-10 { height: 10 * $spacer; } + +.space-x-4 > * + * { margin-left: 4 * $spacer; } +.space-y-4 > * + * { margin-top: 4 * $spacer; } + +.align-top { vertical-align: top; } + +.flex-auto { flex: 1 1 auto; } +.items-center { align-items: center; } + +@media screen and (min-width: 660px) { + .md\:inline-block { display: inline-block; } + .md\:flex { display: flex; } + + .md\:space-x-8 > * + * { margin-left: 8 * $spacer; } + .md\:space-y-0 > * + * { margin-top: 0; } +} diff --git a/app/javascript/src/styles/specific/artist_commentary_versions.scss b/app/javascript/src/styles/specific/artist_commentary_versions.scss deleted file mode 100644 index c60410940..000000000 --- a/app/javascript/src/styles/specific/artist_commentary_versions.scss +++ /dev/null @@ -1,15 +0,0 @@ -div#c-artist-commentary-versions { - #a-index { - div.commentary-body-section { - padding: 0.5em; - margin-bottom: 0.5em; - border: var(--footer-border); - } - - td.original-column, - td.translated-column { - padding-top: 0.5em; - vertical-align: top; - } - } -} diff --git a/app/javascript/src/styles/specific/artists.scss b/app/javascript/src/styles/specific/artists.scss deleted file mode 100644 index 6d8545599..000000000 --- a/app/javascript/src/styles/specific/artists.scss +++ /dev/null @@ -1,11 +0,0 @@ -div#c-artists, div#excerpt { - .recent-posts h2 { - margin: 1em 0 0.5em; - } - - div#a-index { - td { - height: 2.25em; /* should match .artist-other-name line-height */ - } - } -} diff --git a/app/javascript/src/styles/specific/error.scss b/app/javascript/src/styles/specific/error.scss index 468a2c41e..0e41289e5 100644 --- a/app/javascript/src/styles/specific/error.scss +++ b/app/javascript/src/styles/specific/error.scss @@ -1,6 +1,3 @@ ul.backtrace { - font: var(--monospace-font); background: var(--dtext-code-background); - padding: 1em; - margin-bottom: 1em; } diff --git a/app/javascript/src/styles/specific/favorite_groups.scss b/app/javascript/src/styles/specific/favorite_groups.scss deleted file mode 100644 index dc184a6c6..000000000 --- a/app/javascript/src/styles/specific/favorite_groups.scss +++ /dev/null @@ -1,5 +0,0 @@ -#c-favorite-groups #a-edit { - textarea { - height: 10em; - } -} diff --git a/app/javascript/src/styles/specific/ip_addresses.scss b/app/javascript/src/styles/specific/ip_addresses.scss deleted file mode 100644 index 5bb7c0ca0..000000000 --- a/app/javascript/src/styles/specific/ip_addresses.scss +++ /dev/null @@ -1,7 +0,0 @@ -#c-ip-addresses { - .ip-address-details, .ip-address-map { - display: inline-block; - margin-right: 2em; - vertical-align: top; - } -} diff --git a/app/javascript/src/styles/specific/mod_queue.scss.erb b/app/javascript/src/styles/specific/mod_queue.scss.erb index 16c5ab575..43925c57f 100644 --- a/app/javascript/src/styles/specific/mod_queue.scss.erb +++ b/app/javascript/src/styles/specific/mod_queue.scss.erb @@ -1,5 +1,3 @@ -@import "../base/000_vars.scss"; - div#c-modqueue { div.post { padding: 1em; diff --git a/app/javascript/src/styles/specific/pools.scss b/app/javascript/src/styles/specific/pools.scss index 93d90cc3f..e1bd35556 100644 --- a/app/javascript/src/styles/specific/pools.scss +++ b/app/javascript/src/styles/specific/pools.scss @@ -1,5 +1,3 @@ -@import "../base/000_vars.scss"; - a.pool-category-series, .pool-category-series a { color: var(--series-pool-color); @@ -16,51 +14,18 @@ a.pool-category-collection, .pool-category-collection a { } } -div#add-to-pool-dialog { - font-size: 0.8em; - - form { - margin-bottom: 1em; - } - - li { - margin-left: 1em; - cursor: pointer; - } -} - -div#c-pools { - textarea { - height: 10em; - } - - div#a-show { - div#description { - margin-bottom: 1em; - } - } -} - div#c-pool-orders, div#c-favorite-group-orders { div#a-edit { - ul.ui-sortable { - list-style-type: none; + ul.ui-sortable li { + display: inline-block; + min-width: 150px; - li { - cursor: pointer; - margin-right: 20px; - margin-bottom: 20px; - min-width: 150px; - min-height: 150px; - padding: 10px; - display: inline-block; + &, .post-preview a { + cursor: move; } - li.ui-state-default { - background: none; - } - - li.ui-state-placeholder { + &.ui-state-placeholder { + border: none; background: none; } } diff --git a/app/javascript/src/styles/specific/post_versions.scss b/app/javascript/src/styles/specific/post_versions.scss index bff0195b7..92a5cbb37 100644 --- a/app/javascript/src/styles/specific/post_versions.scss +++ b/app/javascript/src/styles/specific/post_versions.scss @@ -7,10 +7,6 @@ body.c-post-versions.a-index { min-width: 2em; } - .advanced-search-link { - margin: 0 1em; - } - ins.diff-obsolete a { color: var(--diff-list-obsolete-added-color); font-weight: bold; diff --git a/app/javascript/src/styles/specific/posts.scss b/app/javascript/src/styles/specific/posts.scss index 99cae7de3..56e651cef 100644 --- a/app/javascript/src/styles/specific/posts.scss +++ b/app/javascript/src/styles/specific/posts.scss @@ -22,14 +22,6 @@ } } -#saved-searches-nav { - margin-top: 1em; -} - -#excerpt p.links { - margin-top: 1em; -} - #edit-dialog { /* Hide everything but the rating and tags fields. */ .post_has_embedded_notes_fieldset, .post_lock_fieldset, .post_parent_id, @@ -68,11 +60,6 @@ div#c-posts { .fav-buttons { font-size: 14pt; - margin: 0.5em 0; - - i { - margin-right: 0.1em; - } button.ui-button { padding: 0.25em 0.75em; @@ -97,8 +84,6 @@ div#c-posts { #ugoira-controls { div#seek-slider { - margin-top: 0.5em; - float: right; overflow: visible; background: var(--ugoira-seek-slider-background); @@ -107,24 +92,12 @@ div#c-posts { } } - #save-video-link { - margin: 0.5em 0; - } - - button { - margin-top: 0.3em; - } - #ugoira-load-progress { display: inline; margin-left: 17px; } } - .outer-recent-searches { - overflow: hidden; - } - .post-notice { margin: 0.5em 0; padding: 0.5em; @@ -144,40 +117,19 @@ div#c-posts { &.post-notice-search { background: var(--post-search-notice-background); } } - aside#sidebar > section > ul { - margin-bottom: 1em; - - a.wiki-link { - margin-right: 0.3em; - } - } - - aside#sidebar > section > ul ul li { - margin-left: 1em; - } - - #search-box-form { - display: flex; - - input { - min-width: 0; - flex: 1; - } - - #search-box-submit { - padding: 2px 6px; - border-left: none; - border-radius: 0; - } + /* override default <% end %> diff --git a/app/views/posts/partials/index/_excerpt.html.erb b/app/views/posts/partials/index/_excerpt.html.erb index 5bb118c2d..8933993f6 100644 --- a/app/views/posts/partials/index/_excerpt.html.erb +++ b/app/views/posts/partials/index/_excerpt.html.erb @@ -15,7 +15,7 @@ <%= render "artists/summary", artist: artist %> <%= render "tag_relationships/alias_and_implication_list", tag: artist.tag %> -

<% if artist.wiki_page.present? %> <%= link_to "View wiki", artist.wiki_page, id: "view-wiki-link" %> | <% end %> @@ -33,7 +33,7 @@ <%= format_text(wiki_page.body) %> <%= render "tag_relationships/alias_and_implication_list", tag: wiki_page.tag %> -

<%= link_to_wiki "View wiki", wiki_page.title, id: "view-wiki-link" %>

@@ -52,7 +52,7 @@ <%= format_text(post_set.pool.description) %> -

<%= link_to "View pool", pool_path(post_set.pool.id) %>

<% end %> diff --git a/app/views/posts/partials/show/_information.html.erb b/app/views/posts/partials/show/_information.html.erb index 219f9797e..ff295bfc2 100644 --- a/app/views/posts/partials/show/_information.html.erb +++ b/app/views/posts/partials/show/_information.html.erb @@ -28,7 +28,7 @@ <% if policy(post).can_view_favlist? %> <%= link_to "Show »", "#", id: "show-favlist-link", style: ("display: none;" if post.fav_count == 0) %> <%= link_to "« Hide", "#", id: "hide-favlist-link", style: "display: none;" %> -