From b872cb8db888dbbbcca426b19f6a67f37873f9bb Mon Sep 17 00:00:00 2001 From: Luna D Date: Thu, 23 Nov 2023 17:07:49 +0100 Subject: [PATCH] restart redesign from latest master --- assets/css/application.scss | 51 ++ assets/css/common/_barline.scss | 13 - assets/css/common/_base.scss | 503 ------------------ assets/css/common/_blocks.scss | 245 --------- assets/css/common/_burger.scss | 38 -- assets/css/common/_buttons.scss | 102 ---- assets/css/common/_dimensions.scss | 39 -- assets/css/common/_dropdown.scss | 33 -- assets/css/common/_forms.scss | 182 ------- assets/css/common/_global.scss | 63 --- assets/css/common/_header.scss | 280 ---------- assets/css/common/_layout.scss | 420 --------------- assets/css/common/_measurements.scss | 67 +++ assets/css/common/_media.scss | 114 ---- assets/css/common/_mixins.scss | 58 ++ assets/css/common/_shame.scss | 6 - assets/css/common/_text.scss | 7 - assets/css/elements/_avatar.scss | 4 + assets/css/elements/_base.scss | 34 ++ assets/css/elements/_block.scss | 139 +++++ assets/css/elements/_button.scss | 117 ++++ assets/css/elements/_dropdown.scss | 69 +++ assets/css/elements/_flash.scss | 52 ++ assets/css/elements/_flex.scss | 90 ++++ assets/css/elements/_heading.scss | 38 ++ assets/css/elements/_input.scss | 26 + assets/css/elements/_interaction.scss | 34 ++ assets/css/elements/_layout.scss | 89 ++++ assets/css/elements/_media.scss | 135 +++++ assets/css/elements/_mobile.scss | 27 + assets/css/elements/_separator.scss | 39 ++ assets/css/elements/_table.scss | 14 + assets/css/themes/dark-blue.scss | 92 ++++ assets/css/themes/dark-purple.scss | 92 ++++ assets/css/themes/dark.scss | 193 ------- assets/css/themes/default.scss | 183 ------- assets/css/themes/red.scss | 195 ------- assets/css/views/_admin.scss | 12 + assets/css/views/_adverts.scss | 30 -- assets/css/views/_approval.scss | 2 +- assets/css/views/_badges.scss | 15 - assets/css/views/_burger.scss | 4 + assets/css/views/_channels.scss | 21 - assets/css/views/_comments.scss | 17 - assets/css/views/_commissions.scss | 38 -- assets/css/views/_communication.scss | 45 ++ assets/css/views/_communications.scss | 104 ---- assets/css/views/_duplicate_reports.scss | 53 -- assets/css/views/_filters.scss | 31 -- assets/css/views/_galleries.scss | 67 --- assets/css/views/_header.scss | 95 ++++ assets/css/views/_images.scss | 331 ------------ assets/css/views/_markdown.scss | 31 ++ assets/css/views/_metabar.scss | 66 +++ assets/css/views/_pages.scss | 10 - assets/css/views/_pagination.scss | 50 +- assets/css/views/_polls.scss | 129 ----- assets/css/views/_posts.scss | 15 - assets/css/views/_profiles.scss | 131 ----- assets/css/views/_search.scss | 3 - assets/css/views/_statistics.scss | 31 ++ assets/css/views/_stats.scss | 7 - assets/css/views/_tag.scss | 88 +++ assets/css/views/_tags.scss | 217 -------- assets/js/app.js | 15 +- assets/js/galleries.js | 2 +- assets/js/resizablemedia.js | 71 --- assets/js/vendor/closest.polyfill.js | 31 -- assets/js/vendor/customevent.polyfill.js | 17 - assets/js/vendor/es6.polyfill.js | 104 ---- assets/js/vendor/fetch.polyfill.js | 53 -- assets/js/vendor/promise.polyfill.js | 225 -------- assets/js/vendor/values-entries.polyfill.js | 17 - assets/js/when-ready.js | 8 +- assets/webpack.config.js | 5 +- .../admin/report/claim_controller.ex | 2 +- .../admin/user/api_key_controller.ex | 2 +- .../admin/user/downvote_controller.ex | 2 +- .../controllers/admin/user/vote_controller.ex | 2 +- .../controllers/admin/user/wipe_controller.ex | 2 +- .../controllers/confirmation_controller.ex | 4 +- .../duplicate_report/accept_controller.ex | 2 +- .../accept_reverse_controller.ex | 2 +- .../controllers/filter/current_controller.ex | 2 +- .../controllers/filter_controller.ex | 2 +- .../controllers/image/feature_controller.ex | 2 +- .../controllers/image/file_controller.ex | 2 +- .../controllers/image_controller.ex | 2 +- .../controllers/password_controller.ex | 4 +- .../profile/artist_link_controller.ex | 2 +- .../profile/commission/item_controller.ex | 2 +- .../profile/commission_controller.ex | 2 +- .../registration/email_controller.ex | 4 +- .../controllers/report_controller.ex | 4 +- .../controllers/tag_controller.ex | 2 +- .../controllers/topic/poll/vote_controller.ex | 2 +- .../controllers/topic/post_controller.ex | 2 +- .../controllers/unlock_controller.ex | 4 +- lib/philomena_web/plugs/check_captcha_plug.ex | 2 +- .../plugs/compromised_password_check_plug.ex | 2 +- .../plugs/ensure_user_enabled_plug.ex | 2 +- .../plugs/not_authorized_plug.ex | 2 +- lib/philomena_web/plugs/not_found_plug.ex | 2 +- lib/philomena_web/plugs/require_user_plug.ex | 2 +- .../activity/_comment_strip.html.slime | 2 +- .../templates/activity/index.html.slime | 54 +- .../admin/approval/_approvals.html.slime | 2 +- .../admin/badge/user/index.html.slime | 2 +- .../admin/dnp_entry/index.html.slime | 2 +- .../templates/admin/mod_note/index.html.slime | 2 +- .../admin/report/_reports.html.slime | 4 +- .../templates/admin/report/index.html.slime | 6 +- .../templates/admin/report/show.html.slime | 2 +- .../templates/admin/user/_form.html.slime | 8 +- .../templates/admin/user/index.html.slime | 2 +- .../templates/ban/_ban_reason.html.slime | 2 +- .../templates/ban/_bans.html.slime | 4 +- .../templates/channel/_channel_box.html.slime | 2 +- .../templates/channel/_form.html.slime | 2 +- .../subscription/_subscription.html.slime | 6 +- .../templates/comment/_comment.html.slime | 2 +- .../comment/_comment_with_image.html.slime | 2 +- .../templates/comment/index.html.slime | 4 +- .../commission/_directory_results.html.slime | 6 +- .../commission/_directory_sidebar.html.slime | 2 +- .../templates/conversation/index.html.slime | 2 +- .../templates/conversation/new.html.slime | 2 +- .../templates/conversation/show.html.slime | 2 +- .../templates/dnp_entry/_form.html.slime | 2 +- .../templates/dnp_entry/index.html.slime | 6 +- .../templates/dnp_entry/show.html.slime | 4 +- .../duplicate_report/index.html.slime | 2 +- .../templates/filter/index.html.slime | 4 +- .../tag_change/index.html.slime | 2 +- .../templates/forum/index.html.slime | 8 +- .../templates/forum/show.html.slime | 8 +- .../subscription/_subscription.html.slime | 6 +- .../templates/gallery/index.html.slime | 2 +- .../templates/gallery/show.html.slime | 20 +- .../subscription/_subscription.html.slime | 6 +- .../image/_add_to_gallery_dropdown.html.slime | 10 +- .../image/_deleted_toggle.html.slime | 51 +- .../templates/image/_hidden_toggle.html.slime | 4 +- .../image/_image_approval_banner.html.slime | 2 +- .../templates/image/_image_box.html.slime | 32 +- .../image/_image_container.html.slime | 15 +- .../templates/image/_image_meta.html.slime | 30 +- .../_image_mobile_information.html.slime | 43 ++ .../image/_image_mobile_navigation.html.slime | 10 + .../templates/image/_image_page.html.slime | 4 +- .../templates/image/_quick_tag.html.slime | 8 +- .../templates/image/_random_button.html.slime | 2 +- .../templates/image/_tags.html.slime | 2 +- .../image/_uploader_mobile.html.slime | 19 + .../templates/image/comment/_form.html.slime | 5 +- .../image/comment/history/index.html.slime | 2 +- .../templates/image/comment/index.html.slime | 4 +- .../templates/image/index.html.slime | 39 +- .../templates/image/related/index.html.slime | 4 +- .../templates/image/show.html.slime | 3 + .../subscription/_subscription.html.slime | 12 +- .../image/tag_change/index.html.slime | 2 +- .../ip_profile/tag_change/index.html.slime | 2 +- .../layout/_flash_warnings.html.slime | 52 +- .../templates/layout/_header.html.slime | 145 +++-- .../layout/_header_navigation.html.slime | 34 +- .../layout/_header_staff_links.html.slime | 95 ++-- .../templates/layout/app.html.slime | 3 +- .../templates/markdown/_toolbar.html.slime | 2 + .../templates/message/_message.html.slime | 2 +- .../notification/_notification.html.slime | 2 +- .../templates/notification/index.html.slime | 5 +- .../pagination/_pagination.html.slime | 74 ++- .../templates/post/_post.html.slime | 2 +- .../templates/post/_post_options.html.slime | 2 +- .../templates/post/index.html.slime | 4 +- .../templates/post/preview/create.html.slime | 2 +- .../templates/profile/_about_me.html.slime | 17 +- .../templates/profile/_admin_block.html.slime | 120 ++--- .../profile/_recent_comments.html.slime | 2 +- .../profile/_recent_galleries.html.slime | 6 +- .../profile/_recent_images.html.slime | 13 +- .../profile/_recent_posts.html.slime | 8 +- .../templates/profile/_statistics.html.slime | 52 +- .../profile/artist_link/_form.html.slime | 2 +- .../commission/_listing_items.html.slime | 2 +- .../commission/_listing_sheet.html.slime | 2 +- .../commission/_listing_sidebar.html.slime | 16 +- .../profile/description/edit.html.slime | 6 +- .../profile/scratchpad/edit.html.slime | 4 +- .../templates/profile/show.html.slime | 63 ++- .../profile/tag_change/index.html.slime | 2 +- .../templates/report/index.html.slime | 2 +- .../templates/search/reverse/index.html.slime | 4 +- .../templates/staff/index.html.slime | 2 +- .../templates/stat/index.html.slime | 4 +- .../templates/tag/_quick_tag_table.html.slime | 4 +- .../templates/tag/_tag_info_row.html.slime | 22 +- .../templates/tag/image/edit.html.slime | 2 +- .../templates/tag/index.html.slime | 4 +- .../templates/tag/tag_change/index.html.slime | 2 +- .../topic/post/history/index.html.slime | 2 +- .../templates/topic/show.html.slime | 2 +- .../subscription/_subscription.html.slime | 6 +- lib/philomena_web/user_auth.ex | 2 +- lib/philomena_web/views/layout_view.ex | 14 +- priv/repo/seeds_development.json | 345 +++++++++++- 207 files changed, 2839 insertions(+), 4958 deletions(-) create mode 100644 assets/css/application.scss delete mode 100644 assets/css/common/_barline.scss delete mode 100644 assets/css/common/_base.scss delete mode 100644 assets/css/common/_blocks.scss delete mode 100644 assets/css/common/_burger.scss delete mode 100644 assets/css/common/_buttons.scss delete mode 100644 assets/css/common/_dimensions.scss delete mode 100644 assets/css/common/_dropdown.scss delete mode 100644 assets/css/common/_forms.scss delete mode 100644 assets/css/common/_global.scss delete mode 100644 assets/css/common/_header.scss delete mode 100644 assets/css/common/_layout.scss create mode 100644 assets/css/common/_measurements.scss delete mode 100644 assets/css/common/_media.scss create mode 100644 assets/css/common/_mixins.scss delete mode 100644 assets/css/common/_shame.scss delete mode 100644 assets/css/common/_text.scss create mode 100644 assets/css/elements/_avatar.scss create mode 100644 assets/css/elements/_base.scss create mode 100644 assets/css/elements/_block.scss create mode 100644 assets/css/elements/_button.scss create mode 100644 assets/css/elements/_dropdown.scss create mode 100644 assets/css/elements/_flash.scss create mode 100644 assets/css/elements/_flex.scss create mode 100644 assets/css/elements/_heading.scss create mode 100644 assets/css/elements/_input.scss create mode 100644 assets/css/elements/_interaction.scss create mode 100644 assets/css/elements/_layout.scss create mode 100644 assets/css/elements/_media.scss create mode 100644 assets/css/elements/_mobile.scss create mode 100644 assets/css/elements/_separator.scss create mode 100644 assets/css/elements/_table.scss create mode 100644 assets/css/themes/dark-blue.scss create mode 100644 assets/css/themes/dark-purple.scss delete mode 100644 assets/css/themes/dark.scss delete mode 100644 assets/css/themes/default.scss delete mode 100644 assets/css/themes/red.scss create mode 100644 assets/css/views/_admin.scss delete mode 100644 assets/css/views/_adverts.scss delete mode 100644 assets/css/views/_badges.scss create mode 100644 assets/css/views/_burger.scss delete mode 100644 assets/css/views/_channels.scss delete mode 100644 assets/css/views/_comments.scss delete mode 100644 assets/css/views/_commissions.scss create mode 100644 assets/css/views/_communication.scss delete mode 100644 assets/css/views/_communications.scss delete mode 100644 assets/css/views/_duplicate_reports.scss delete mode 100644 assets/css/views/_filters.scss delete mode 100644 assets/css/views/_galleries.scss create mode 100644 assets/css/views/_header.scss delete mode 100644 assets/css/views/_images.scss create mode 100644 assets/css/views/_markdown.scss create mode 100644 assets/css/views/_metabar.scss delete mode 100644 assets/css/views/_pages.scss delete mode 100644 assets/css/views/_polls.scss delete mode 100644 assets/css/views/_posts.scss delete mode 100644 assets/css/views/_profiles.scss delete mode 100644 assets/css/views/_search.scss create mode 100644 assets/css/views/_statistics.scss delete mode 100644 assets/css/views/_stats.scss create mode 100644 assets/css/views/_tag.scss delete mode 100644 assets/css/views/_tags.scss delete mode 100644 assets/js/resizablemedia.js delete mode 100644 assets/js/vendor/closest.polyfill.js delete mode 100644 assets/js/vendor/customevent.polyfill.js delete mode 100644 assets/js/vendor/es6.polyfill.js delete mode 100644 assets/js/vendor/fetch.polyfill.js delete mode 100644 assets/js/vendor/promise.polyfill.js delete mode 100644 assets/js/vendor/values-entries.polyfill.js create mode 100644 lib/philomena_web/templates/image/_image_mobile_information.html.slime create mode 100644 lib/philomena_web/templates/image/_image_mobile_navigation.html.slime create mode 100644 lib/philomena_web/templates/image/_uploader_mobile.html.slime diff --git a/assets/css/application.scss b/assets/css/application.scss new file mode 100644 index 00000000..2f1f44d3 --- /dev/null +++ b/assets/css/application.scss @@ -0,0 +1,51 @@ +/* + * Main stylesheet file. + * + * This generates the base file for the stylesheets used throughout the project. + * Themes should be contained within the "themes" folder, and only contain + * color variations, and optional CSS changes. + * + */ + +$fa-font-path: '~@fortawesome/fontawesome-free/webfonts'; + +@import "~@fortawesome/fontawesome-free/scss/fontawesome.scss"; +@import "~@fortawesome/fontawesome-free/scss/solid.scss"; +@import "~@fortawesome/fontawesome-free/scss/regular.scss"; +@import "~@fortawesome/fontawesome-free/scss/brands.scss"; +@import "~normalize-scss/sass/normalize/import-now"; + +// Import the default theme to act as a fallback. +@import "~themes/dark-blue"; + +// Files containing common properties, such as variable definitions. +@import "~common/measurements"; +@import "~common/mixins"; + +// General style elements that are used throughout the project. +@import "~elements/avatar"; +@import "~elements/base"; +@import "~elements/block"; +@import "~elements/button"; +@import "~elements/dropdown"; +@import "~elements/flash"; +@import "~elements/flex"; +@import "~elements/heading"; +@import "~elements/input"; +@import "~elements/interaction"; +@import "~elements/layout"; +@import "~elements/media"; +@import "~elements/mobile"; +@import "~elements/separator"; +@import "~elements/table"; + +// Style elements specific to certain pages. +@import "~views/admin"; +@import "~views/burger"; +@import "~views/communication"; +@import "~views/header"; +@import "~views/markdown"; +@import "~views/metabar"; +@import "~views/pagination"; +@import "~views/statistics"; +@import "~views/tag"; diff --git a/assets/css/common/_barline.scss b/assets/css/common/_barline.scss deleted file mode 100644 index 58b4292b..00000000 --- a/assets/css/common/_barline.scss +++ /dev/null @@ -1,13 +0,0 @@ -.sparkline { - display: flex; - height: 20px; - border-bottom: 1px solid $sparkline_color; -} - -.barline__bar { - fill: $sparkline_color; -} - -.barline__bar:hover { - fill: red; -} diff --git a/assets/css/common/_base.scss b/assets/css/common/_base.scss deleted file mode 100644 index b5375e07..00000000 --- a/assets/css/common/_base.scss +++ /dev/null @@ -1,503 +0,0 @@ -/* - * This file contains base styles that are overridden by custom stylesheets. These stylesheets need - * to be placed in this directory, and they are imported at the bottom of the file. - * - * Define rules that are not supposed to be overridden after the @imports at the bottom of the file. - */ - -@import "dimensions"; -@import "global"; - -// Because FA is a SPECIAL SNOWFLAKE. -$fa-font-path: '~@fortawesome/fontawesome-free/webfonts'; - -@import "~@fortawesome/fontawesome-free/scss/fontawesome.scss"; -@import "~@fortawesome/fontawesome-free/scss/solid.scss"; -@import "~@fortawesome/fontawesome-free/scss/regular.scss"; -@import "~@fortawesome/fontawesome-free/scss/brands.scss"; -@import "~normalize-scss/sass/normalize/import-now"; - -body { - background-color: $background_color; - color: $foreground_color; - font-family: $font_family_base; - font-size: 13px; - margin: 0; - padding: 0; - line-height: 1.15; -} - -/* normalize.css breakage */ -sup, sub { - line-height: 1.15em; -} - -sub { - bottom: -0.15em; -} - -h1, h2, h3, h4, h5 { - font-weight: normal; - text-rendering: optimizeLegibility; - margin-bottom: 0.62em; - line-height: 1.15em; -} - -h1 { font-size: 24px; } - -h2 { font-size: 22px; } - -h3 { font-size: 19px; } - -h4 { - font-size: 17px; - margin-top: 1em; - margin-bottom: 0.5em; -} - -// Slightly dirty, no clean way to strip top margins off headers though -.remove-top-margin { - margin-top: 0; -} - -h5 { - margin-top: 0.5em; - margin-bottom: 0.3em; - font-size: 15px; -} - -h6 { - font-size: 10px; - margin: 2px; - margin-bottom: 0; -} - -.paragraph { - hyphens: none; - margin-bottom: var(--padding-small); - margin-top: var(--padding-small); - margin-left: 2px; - line-height: 1.35em; -} - -.communication__body__text .paragraph { - margin-bottom: var(--padding-normal); -} - -.paragraph img, .communication__body__text img, .block__content img { - max-width: 100%; -} - -p { - @extend .paragraph; -} - -pre { - background-color: $meta_color; - padding: 10px; - font-size: 11px; - font-family: $font_family_monospace; - border: 1px solid $meta_border_color; - max-width: 100%; - overflow-y: hidden; - overflow-x: auto; - - code { - border: 0; - background: 0; - padding: 0; - } -} - -a, a:active, a:visited { - color: $link_color; - text-decoration: none; -} - -a:hover { - color: $link_hover_color; -} - -img { - margin: 0; - border: 0; - vertical-align: bottom; -} - -.clearfix { - clear: both; - height: 0; -} - -/* Child selectors, as opposed to flat BEM classes, are justified in this case. - * HTML tables are bulky to begin with; adding .table__row and .table__cell to every - * item will hinder the development speed and decrease readability. */ -.table { - padding-left: 10px; - width: 100%; - border-collapse: collapse; - border: $border; - - th { - font-weight: bold; - text-align: left; - padding: 5px; - &.center { - text-align: center; - } - } - - > thead > tr { - background: $background_color; - } - - > tbody { - border: $border; - > tr { - @include even-odd; - } - } - - td { - padding: 5px; - } -} - -.table__tiny-column { - width: 50px; -} - -.border-vertical { - border-top: 2px solid $border_color; -} - -.background-success { - background-color: $success_light_color; -} - -.background-warning { - background-color: $warning_light_color; -} - -.background-danger { - background-color: $danger_light_color; -} - -hr { - border: 0; - height: 1px; - background: $border_color; - margin: var(--padding-small); -} - -#error_explanation { - margin: 1em 0; - background: $warning_light_color; - border: 1px solid $warning_color; - padding: 0.62em; - li { - margin: 3px; - margin-left: 15px; - } - h2 { - font-size: 19px; - } -} - -//rules page. API page also borrows stuff from here -.rule { - padding: 5px; - h2 { - background: $background_odd_color; - border: $border; - padding: 5px; - padding-bottom: 7px; - } - h2.important { - background: $danger_light_color; - border-color: $danger_color; - } - // Make HTML lists with multi-line text readable - ul { - margin: 0; - padding: 5px 20px; - } - li { - padding: 5px 0; - } -} - -.walloftext { - font-size: 14px; - - @media (max-width: 900px) { - width: 95%; - } -} - -// Text Editor -blockquote { - margin: 1em 2em; - border: 1px dotted $foreground_color; - padding: var(--padding-small); - background-color: inherit; -} - -blockquote .paragraph { - &:first-child { - margin-top: 0; - } - - &:last-child { - margin-bottom: 0; - } -} - -// Prevent blockquote from gaining far too much indentation and breaking. -blockquote blockquote blockquote blockquote blockquote blockquote { - margin: 1em 0; - padding: 1em 2px; -} - -// Horizontal space is at a high premium on mobile. -@media (max-width: $min_px_width_for_desktop_layout) { - blockquote { - margin: 1em 4px; - padding: var(--padding-small) 4px; - } -} - -.spoiler, .spoiler-revealed { - display: inline-block; - position: relative; -} - -.spoiler::before, .spoiler-revealed::before { - content: ' '; - display: block; - position: absolute; - pointer-events: none; - top: 0; - left: 0; - right: 0; - bottom: 0; - background-color: $admin_links_hover_color; -} - -.spoiler:hover::before, .spoiler-revealed::before { - display: none; -} - -.spoiler { - background-color: $admin_links_hover_color; - color: $admin_links_hover_color; - - a { - color: $admin_links_hover_color; - } - - code { - background: 0; - border: 0; - } - - &:not(:hover) > .image-show-container { - background: $admin_links_hover_color; - - > * { - visibility: hidden; - } - } -} - -.spoiler:hover, .spoiler-revealed { - background-color: $admin_links_color; - color: $foreground_color; - a { - color: $link_color; - } - a:hover { - color: $link_dark_color; - } - code { - @extend code; - } -} - -.literal { - white-space: pre-wrap; -} - -.editor-syntax-reference { - margin-bottom: 6px; -} - -@mixin image-alt-size($name, $size) { - @media (min-width: $size) { - img[alt=#{$name}] { - max-height: $size !important; - max-width: $size !important; - } - } -} - -@include image-alt-size(tiny, $image_tiny_size); -@include image-alt-size(small, $image_small_size); -@include image-alt-size(medium, $image_medium_size); -@include image-alt-size(large, $image_large_size); - -table { - @extend .table; -} - -code { - background-color: $meta_color; - border: 1px solid $meta_border_color; - padding: 0 4px; -} - -//donations -.donate-button { - background: 0; - border: 0; - margin-left: 170px; -} - -.button_to { - display: inline; -} - -/* User titles (admin/mod/assistant) and channel states (live/off air) */ -.label { - padding: 6px; - overflow-y: hidden; -} - -.label--small { - font-size: 9px; - overflow: hidden; -} - -.label--block { - display: inline-block; - margin: 2px 6px 6px 0; -} - -.label--narrow { - padding: 0 2px; -} - -.label--success { - background: $success_light_color; - border: 1px solid $success_color; -} - -.label--danger { - background: $danger_light_color; - border: 1px solid $danger_color; -} - -.label--warning { - background: $warning_light_color; - border: 1px solid $warning_color; -} - -.label--purple { - background: $assistant_color; - border: 1px solid $assistant_border_color; -} - -.label--primary { - background: $primary_light_color; - border: 1px solid $primary_color; -} - -.large-text { - font-size: 15px; -} - -.small-text { - font-size: 10px; -} - -.page-current { - padding: 0 $header_spacing; -} - -i.favicon-home { - background-image: url("/favicon.svg"); - background-size: contain; - background-repeat: no-repeat; - background-position: center; - min-width: 1em; - height: 1em; - display: inline-block; -} - -// changelog -.commit-sha { - @extend .label--purple; - padding: 2px; - font-size: 12px; - font-family: $font_family_monospace; - vertical-align: top; -} - -.commit-message { - display: block; -} - -span.stat { - font-size: 18px; -} - -.seamless-frame { - border: 0; - overflow: hidden; - padding: 0; -} - -@import "barline"; -@import "blocks"; -@import "burger"; -@import "buttons"; -@import "dropdown"; -@import "forms"; -@import "header"; -@import "layout"; -@import "media"; -@import "shame"; -@import "text"; - -@import "~views/adverts"; -@import "~views/approval"; -@import "~views/badges"; -@import "~views/channels"; -@import "~views/comments"; -@import "~views/commissions"; -@import "~views/communications"; -@import "~views/duplicate_reports"; -@import "~views/filters"; -@import "~views/galleries"; -@import "~views/images"; -@import "~views/pages"; -@import "~views/polls"; -@import "~views/posts"; -@import "~views/profiles"; -@import "~views/pagination"; -@import "~views/search"; -@import "~views/staff"; -@import "~views/stats"; -@import "~views/tags"; - -.no-overflow { - overflow: hidden; -} - -.no-overflow-x { - overflow-x: hidden; -} - -.hidden { - display: none !important; -} diff --git a/assets/css/common/_blocks.scss b/assets/css/common/_blocks.scss deleted file mode 100644 index 883302a8..00000000 --- a/assets/css/common/_blocks.scss +++ /dev/null @@ -1,245 +0,0 @@ -.block { - margin-bottom: $block_spacing; - .success { - background-color: $success_color; - } - - .warning { - background-color: $warning_color; - } - - .danger { - background-color: $danger_color; - } -} - -.block__content, .block__tab { - border-left: 1px solid $border_color; - border-right: 1px solid $border_color; - background: $background_color; - padding: $block_spacing; -} - -.block__content img, .block__tab img { - max-width: 100%; -} - -.block__content:first-child { - border-top: 1px solid $border_color; -} - -.block__content:last-child, .block__tab:not(.hidden) { - border-bottom: 1px solid $border_color; -} - -.block__content--destroyed { - background-color: $destroyed_content_color !important; -} - -.block__header { - font-size: 14px; - line-height: $block_header_height; - background: $block_header_color; - color: $foreground_color; -} - -//FIXME This whole area has problems with structure, things are too coupled -.block__header--sub { - @extend .block__header; - line-height: $block_header_sub_height; - a { - padding-left: $header_spacing*0.5; - padding-right: $header_spacing*0.5; - } -} - -.block__header--user-credit { - box-sizing: border-box; - line-height: 20px; - padding-left: 12px; - padding-right: 12px; - padding-bottom: 4px; -} - -.block__header--single-item { - @extend .block__header; - display: block; - width: 100%; - box-sizing: border-box; -} - -.block__header--single-item, .block__header__item, .block__header a { - padding-left: $header_spacing; - padding-right: $header_spacing; -} - -a.block__header--single-item, .block__header a { - color: $block_header_link_text_color; - display: inline-block; - cursor: pointer; - font-weight: bold; - &:hover { - background: $block_header_hover_color; - color: $block_header_link_text_hover_color; - } -} - -.block__header a, .header__span { - background: $block_header_color; -} - -.block__header__title { - font-size: 14px; - margin: 0; - padding: 0 ($header_spacing * 0.5) 0 $header_spacing; -} - -.block__header__buttons { - display: flex; - flex-direction: row; - line-height: 100%; - align-items: center; - background: 0; -} - -.block__tagbox { - padding-top: $block_spacing + 5px; -} - -.block__header--light { - background: $block_header_light_color; - a, .header__span { - background: $block_header_light_color; - } - - a { - color: $block_header_light_link_text_color; - &:hover { - background: $block_header_light_hover_color; - color: $block_header_light_link_text_hover_color; - } - } -} - -.block__header--js-tabbed { - @extend .block__header--light; - background: transparent; - - border-bottom: $border; - a { - border-top: $border; - /* hide the bottom border for tab links */ - margin-bottom: -1px; - border-bottom: 1px solid $block_header_light_color; - } - a:hover { - border-color: $block_header_light_hover_color; - } - a:first-child { border-left: $border; } - a:last-child { border-right: $border; } - - a.selected, a.selected:hover { - cursor: default; - color: $foreground_color; - background: $background_color; - border-color: $block_header_light_color; - border-bottom: 1px solid $background_color; - } -} - -/* Fixed blocks do not have header and content */ -.block--fixed { - padding: 6px $header_spacing; - background: $background_color; - border: $border; - line-height: 1.35; -} - -.block--fixed--sub { - padding: 3px $header_spacing; -} - -.block--no-margin { - margin: 0; -} - -.block--success { - background: $success_light_color; - border-color: $success_color; -} - -.block--warning { - background: $warning_light_color; - border-color: $warning_color; -} - -.block--danger { - background: $danger_light_color; - border-color: $danger_color; -} - -.block--primary { - background: $primary_light_color; - border-color: $primary_color; -} - -.block--assistant { - background: $assistant_color; - border-color: $assistant_border_color; -} - -/* Somewhat dirty workaround for margins */ - -.block__content, .block__tab, .block--fixed { - > h1, > h2, > h3, > h4, > h5, > h6 { - margin-top: 6px; - } -} - -.block__header__dropdown-tab:hover > a { - background-color: $block_header_hover_color; - color: $block_header_link_text_hover_color; -} - -/* Table-like lists */ -.block__list { - list-style: none; - padding: 0; - margin: 0; - border-bottom: $border; - - &:not(:last-child) { margin-bottom: 6px; } - - a.block__list__link { - width: 100%; - display: block; - box-sizing: border-box; - border: $border; - margin-bottom: -1px; /* collapse borders */ - - background: $background_color; - } - - a.block__list__link.primary { - background: $primary_light_color; - border-color: $primary_color; - } - - a.block__list__link:hover, a.block__list__link.active { - background: $success_light_color; - border-color: $success_color; - } - - a.block__list__link.active:hover { - background: $danger_light_color; - border-color: $danger_color; - } - - a.block__list__link.hidden { - display: none; - } -} - -.block__content--top-border { - border-top: $border; -} diff --git a/assets/css/common/_burger.scss b/assets/css/common/_burger.scss deleted file mode 100644 index f23c8224..00000000 --- a/assets/css/common/_burger.scss +++ /dev/null @@ -1,38 +0,0 @@ -@mixin transform-n-animation($type, $dur, $delta) { - transform: $delta; - animation: $type $dur ease-in-out; -} - -#burger.open { - display: block !important; - @include transform-n-animation(slidein, 0.4s, translate(0, 0)); -} - -#burger.close { - display: none; -} - -// content sliding open -#container.open { - @include transform-n-animation(open, 0.4s, translate(210px, 0)); -} - -@keyframes open { - 0.00% { transform: translate(0, 0); } - 100% { transform: translate(210px, 0); } -} - -// content closing -#container.close { - animation: close 0.3s ease-in-out; -} - -@keyframes close { - 0.00% { transform: translate(210px, 0); } - 100% { transform: translate(0, 0); } -} - -@keyframes slidein { - 0.00% { transform: translate(-200px, 0); } - 100% { transform: translate(0, 0); } -} diff --git a/assets/css/common/_buttons.scss b/assets/css/common/_buttons.scss deleted file mode 100644 index 7f4da42f..00000000 --- a/assets/css/common/_buttons.scss +++ /dev/null @@ -1,102 +0,0 @@ -.button { - background-color: $button_background_color; - border: 1px solid $button_border_color; - box-sizing: border-box; - color: $button_text_color; - display: inline-block; - line-height: normal; - font-family: $font_family_base; - font-size: 14px; - padding: 3px 5px; - border-radius: 0; /* reset rounded borders on iOS/Safari */ - cursor: pointer; - &:hover { - background-color: $button_hover_background_color; - border-color: $button_hover_border_color; - } - &:active, &:hover, &:visited { - color: $button_text_color; - } - &:disabled { - opacity: 0.7; - pointer-events: none; - } -} - -.button--inline { - padding: 0.25rem; - border: 0; - border-radius: 0.25rem; - font-weight: 100; -} - -.button--bold { - font-weight: bold; -} - -.button--full-width { - width: 100%; -} - -.button--link { - color: $link_color; - cursor: pointer; - &:hover { - color: $link_hover_color; - } - &:visited { - color: $link_color; - } -} - -.button--separate-left { - margin-left: 5px; -} - -.button--separate-right { - margin-right: 5px; -} - -.button--small { - padding: 0 3px; -} - -.button--state-primary { - background-color: $button_primary_background_color; - border-color: $button_primary_border_color; - &:hover { - background-color: $button_primary_hover_background; - border-color: $button_primary_hover_border; - } -} - -.button--state-success { - background-color: $button_success_background_color; - border-color: $button_success_border_color; - &:hover { - background-color: $button_success_hover_background; - border-color: $button_success_hover_border; - } -} - -.button--state-warning { - background-color: $button_warning_background_color; - border-color: $button_warning_border_color; - &:hover { - background-color: $button_warning_hover_background; - border-color: $button_warning_hover_border; - } -} - -.button--state-danger { - background-color: $button_danger_background_color; - border-color: $button_danger_border_color; - &:hover { - background-color: $button_danger_hover_background; - border-color: $button_danger_hover_border; - } - - &.button--inline { - color: $button_danger_hover_border !important; - } -} diff --git a/assets/css/common/_dimensions.scss b/assets/css/common/_dimensions.scss deleted file mode 100644 index e8151ba9..00000000 --- a/assets/css/common/_dimensions.scss +++ /dev/null @@ -1,39 +0,0 @@ -/* - * Shared layout properties, not unique to any theme - */ - -$border: 1px solid $border_color; - -$font_family_base: verdana, arial, helvetica, sans-serif; -$font_family_monospace: "Droid Sans Mono", monospace; - -$max_px_width_for_limited_desktop_layout: 1150px; -$min_px_width_for_desktop_layout: 800px; -$min_px_width_for_desktop_thumb: 700px; - -$limited_layout_width: 980px; -$medium_layout_width: 1330px; -$centered_layout_side_margin: 24px; -$layout_side_margin: 12px; - -$image_tiny_size: 64px; -$image_small_size: 128px; -$image_medium_size: 256px; -$image_large_size: 512px; - -$header_height: 36px; -$header_field_height: 28px; -$header_sub_height: 32px; -$header_font_size: 16px; -$header_spacing: 12px; -$header_field_spacing: 8px; -$header_field_vertical_spacing: ($header_height - $header_field_height) * 0.5; -$block_header_height: 32px; -$block_header_sub_height: 26px; -$block_spacing: 6px; -$media_box_header_height: 22px; - -:root { - --padding-small: 0.5em; - --padding-normal: 1em; -} diff --git a/assets/css/common/_dropdown.scss b/assets/css/common/_dropdown.scss deleted file mode 100644 index 30c06a50..00000000 --- a/assets/css/common/_dropdown.scss +++ /dev/null @@ -1,33 +0,0 @@ -.dropdown { - position: relative; - display: inline-block; -} - -.dropdown .dropdown__content { - position: absolute; - display: none; - - /* align at top left (e.g., tag margins) */ - top: 100%; - left: 0; -} - -.dropdown__content.dropdown__content-right { - left: inherit; - right: 0; -} - -/* Our child should be a block element */ -.dropdown .dropdown__content > *:not(.hidden) { - display: block; - white-space: nowrap; -} - -.dropdown:hover .dropdown__content { - /* show it */ - display: block; - /* dropdowns should be at least as big as the button */ - min-width: 100%; - /* and shouldn't sit below content */ - z-index: 999; -} diff --git a/assets/css/common/_forms.scss b/assets/css/common/_forms.scss deleted file mode 100644 index 51bf249d..00000000 --- a/assets/css/common/_forms.scss +++ /dev/null @@ -1,182 +0,0 @@ -form p { - margin-left: 0; -} - -.field--block { - display: block; -} - -.field--inline { - display: flex; -} - -.field-error-js { - background: $warning_light_color; - padding: 3px; -} - -.input { - box-sizing: border-box; - padding: 6px; - border: 1px solid $input_border; - font-size: 14px; - font-family: $font_family_monospace; - color: $input_text_color; - background: $input_color; - max-width: 100%; /* prevent resizable inputs from overflowing the container */ -} - -.input::placeholder { - opacity: 0.54; - color: inherit; -} - -.input[required]:invalid { - box-shadow: none; -} - -.input:focus { - outline: none; - border: 1px solid $input_border_active; - background: $input_color_active; -} - -.input--wide { - width: 100%; -} - -.input--short { - max-width: 30em; -} - -.input--small { - padding: 0 3px; -} - -.input--text { - min-height: 8.6em; -} - -.input--separate-left { - margin-left: 5px; -} - -.input--separate-top { - margin-top: 5px; -} - -.input--decoy { - display: inline-block; - width: 0; - height: 0; - border: 0; - padding: 0; - box-sizing: border-box; -} - -.input--resize-vertical { - resize: vertical; -} - -.checkbox { - margin: 0.2em 0 0 0.4em; - padding: 0; -} - -textarea { - height: 4em; -} - -.field, .actions { - margin-bottom: 6px; -} - -.field_with_errors { - background: $danger_color; -} - -span.help-block { - background: $danger_color; - display: block; -} - -/* hform is used for 30em inline 2-element textinput/button forms */ -.hform .field { - display: flex; - max-width: 30em; - width: 100%; -} -/* text input - grow to container size */ -.hform__text { - flex: 1 0 auto; -} -/* button - don't shrink or grow at all */ -.hform__button { - flex: 0 0 auto; - margin-left: 5px; -} - -/* Click-toggleable */ - -.toggle-box { - display: none; -} - -.toggle-box + label { - @extend .button; - position: relative; - > * { display: inline; } -} - -.toggle-box + label::before { - content: ""; - width: 0; - height: 0; - border-style: solid; - display: inline-block; - margin-right: 0.25em; -} - -.toggle-box + label::before { - border-width: 0.5em 0 0.5em 0.9em; - border-color: transparent transparent transparent $foreground_color; -} - -.toggle-box:checked + label::before { - border-width: 0.9em 0.5em 0; - border-color: $foreground_color transparent transparent transparent; -} - -.toggle-box-container { - overflow: hidden; - position: relative; - height: 0; -} - -.toggle-box:checked + label + .toggle-box-container { - height: auto; -} - -.toggle-box:checked + label + .toggle-box-container > .toggle-box-container__content { - margin-top: $block_spacing; -} - -select.input, select.input:focus { - -moz-appearance: none; - appearance: none; - background: linear-gradient(45deg, transparent 50%, $foreground_color 50%) calc(100% - 15px) 12px/5px 5px no-repeat,linear-gradient(135deg, $foreground_color 50%, transparent 50%) calc(100% - 10px) 12px/5px 5px no-repeat; - padding-right: 25px; - - & option { - background-color: $input_color; - } - - &:hover option { - background-color: $input_color_active; - } -} - -select.input:hover, select.input:focus:hover { - cursor: pointer; - background-color: $input_color_active; -} diff --git a/assets/css/common/_global.scss b/assets/css/common/_global.scss deleted file mode 100644 index c23f1d37..00000000 --- a/assets/css/common/_global.scss +++ /dev/null @@ -1,63 +0,0 @@ -@mixin even-odd { - &:nth-child(odd) { - background: $background_odd_color; - } - &:nth-child(even) { - background: $background_even_color; - } - - /* Used in tag changes, among other things. See the definition of - * _odd_color and _even_color for more information on cross-theme customization */ - - //success bgs - &:nth-child(odd).success, - &:nth-child(odd) .success { - background: $success_odd_color; - } - &:nth-child(even).success, - &:nth-child(even) .success { - background: $success_even_color; - } - &:nth-child(even) &:nth-child(odd).success, - &:nth-child(even) &:nth-child(odd) .success { - background: $success_odd_color; - } - - //warning bgs - &:nth-child(odd).warning, - &:nth-child(odd) .warning { - background: $warning_odd_color; - } - &:nth-child(even).warning, - &:nth-child(even) .warning { - background: $warning_even_color; - } - &:nth-child(even) &:nth-child(odd).warning, - &:nth-child(even) &:nth-child(odd) .warning { - background: $warning_odd_color; - } - - //danger bg - &:nth-child(odd).danger, - &:nth-child(odd) .danger { - background: $danger_odd_color; - } - &:nth-child(even).danger, - &:nth-child(even) .danger { - background: $danger_even_color; - } - &:nth-child(even) &:nth-child(odd).danger, - &:nth-child(even) &:nth-child(odd) .danger { - background: $danger_odd_color; - } -} - -@mixin number-wrap($color) { - display: inline-flex; - padding: 0 6px; - margin-left: 6px; - line-height: inherit; - font-size: 16px; - text-align: center; - background: $color; -} diff --git a/assets/css/common/_header.scss b/assets/css/common/_header.scss deleted file mode 100644 index e79e780a..00000000 --- a/assets/css/common/_header.scss +++ /dev/null @@ -1,280 +0,0 @@ -.header { - background: $header_color; -} - -.header__force-right { - margin-left: auto; -} - -[data-notification-count="0"] { - display: none !important; -} - -.fa-search-button { - padding: 0 0.5rem; -} - -.fa-unread-icon { - color: $unread_message_color; -} - -// For text preceded by an icon -.fa__text { - padding-left: 6px; -} - -a.header__link { - display: inline-block; - padding: 0 $header_spacing; - line-height: $header_height; - font-size: $header_font_size; - color: $text_light_color; - background: $header_color; - flex-shrink: 0; -} - -a.header__link:hover, .header__dropdown:hover > a { - cursor: pointer; - background-color: $header_hover_color; -} - -.header__input, .header__input:focus { - padding: 0 $header_field_spacing; - border: none; - height: $header_field_height; - - background: $header_field_color; - color: $text_light_color; - -webkit-text-fill-color: $text_light_color; - - text-overflow: ellipsis; - - /* reset rounded borders on iOS/Safari */ - border-radius: 0; -} - -span.header__counter { - @include number-wrap($header_hover_color); -} - -select.header__input, select.header__input:focus { - /* in case of