From 4bcc130baa37aced34d4d96b9dbd80fc65d46980 Mon Sep 17 00:00:00 2001 From: Luna D Date: Sun, 19 Feb 2023 20:59:58 +0100 Subject: [PATCH] redesign 2021 changes --- assets/css/application.scss | 50 +++ assets/css/common/_barline.scss | 13 - assets/css/common/_base.scss | 412 ----------------- assets/css/common/_blocks.scss | 224 ---------- assets/css/common/_burger.scss | 38 -- assets/css/common/_buttons.scss | 91 ---- assets/css/common/_dimensions.scss | 29 -- assets/css/common/_dropdown.scss | 33 -- assets/css/common/_forms.scss | 170 ------- assets/css/common/_global.scss | 63 --- assets/css/common/_header.scss | 299 ------------- assets/css/common/_layout.scss | 420 ------------------ assets/css/common/_measurements.scss | 60 +++ 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 | 132 ++++++ assets/css/elements/_button.scss | 117 +++++ assets/css/elements/_dropdown.scss | 69 +++ assets/css/elements/_flash.scss | 52 +++ assets/css/elements/_flex.scss | 86 ++++ assets/css/elements/_heading.scss | 32 ++ assets/css/elements/_input.scss | 26 ++ assets/css/elements/_interaction.scss | 17 + assets/css/elements/_layout.scss | 89 ++++ assets/css/elements/_media.scss | 112 +++++ assets/css/elements/_mobile.scss | 27 ++ assets/css/elements/_separator.scss | 32 ++ 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 | 192 -------- assets/css/themes/default.scss | 182 -------- assets/css/themes/red.scss | 195 -------- assets/css/views/_adverts.scss | 30 -- 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 | 103 ----- assets/css/views/_duplicate_reports.scss | 53 --- assets/css/views/_filters.scss | 31 -- assets/css/views/_galleries.scss | 67 --- assets/css/views/_header.scss | 94 ++++ assets/css/views/_images.scss | 324 -------------- assets/css/views/_metabar.scss | 66 +++ assets/css/views/_pages.scss | 10 - assets/css/views/_pagination.scss | 46 +- assets/css/views/_polls.scss | 129 ------ assets/css/views/_posts.scss | 15 - assets/css/views/_profiles.scss | 139 ------ 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/css/views/_textile.scss | 31 ++ assets/js/app.js | 9 +- assets/js/galleries.js | 2 +- assets/js/resizablemedia.js | 71 --- assets/js/when-ready.js | 2 - assets/webpack.config.js | 4 +- .../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 | 26 +- .../admin/report/_reports.html.slime | 4 +- .../templates/admin/report/show.html.slime | 2 +- .../templates/ban/_ban_reason.html.slime | 2 +- .../templates/ban/_bans.html.slime | 4 +- .../templates/channel/_channel_box.html.slime | 2 +- .../subscription/_subscription.html.slime | 6 +- .../templates/comment/_comment.html.slime | 2 +- .../comment/_comment_with_image.html.slime | 2 +- .../commission/_directory_results.html.slime | 2 +- .../templates/conversation/index.html.slime | 2 +- .../templates/forum/index.html.slime | 8 +- .../templates/forum/show.html.slime | 6 +- .../subscription/_subscription.html.slime | 6 +- .../templates/gallery/index.html.slime | 2 +- .../templates/gallery/show.html.slime | 12 +- .../subscription/_subscription.html.slime | 6 +- .../image/_add_to_gallery_dropdown.html.slime | 10 +- .../image/_deleted_toggle.html.slime | 12 +- .../templates/image/_hidden_toggle.html.slime | 4 +- .../templates/image/_image_box.html.slime | 33 +- .../image/_image_container.html.slime | 13 +- .../templates/image/_image_meta.html.slime | 28 +- .../_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 +- .../image/_uploader_mobile.html.slime | 19 + .../templates/image/comment/_form.html.slime | 12 +- .../image/comment/history/index.html.slime | 4 +- .../templates/image/comment/index.html.slime | 2 +- .../templates/image/index.html.slime | 32 +- .../templates/image/related/index.html.slime | 4 +- .../templates/image/show.html.slime | 3 + .../subscription/_subscription.html.slime | 12 +- .../layout/_flash_warnings.html.slime | 52 ++- .../templates/layout/_header.html.slime | 209 +++++---- .../layout/_header_navigation.html.slime | 34 +- .../layout/_header_staff_links.html.slime | 87 ++-- .../templates/layout/app.html.slime | 3 +- .../templates/message/_message.html.slime | 2 +- .../notification/_notification.html.slime | 2 +- .../templates/notification/index.html.slime | 5 +- .../pagination/_pagination.html.slime | 52 ++- .../templates/post/_post.html.slime | 2 +- .../templates/post/preview/create.html.slime | 4 +- .../templates/profile/_about_me.html.slime | 17 +- .../templates/profile/_admin_block.html.slime | 290 ++++++------ .../profile/_recent_galleries.html.slime | 4 +- .../profile/_recent_images.html.slime | 11 +- .../profile/_recent_posts.html.slime | 8 +- .../templates/profile/_statistics.html.slime | 54 +-- .../profile/description/edit.html.slime | 6 +- .../profile/scratchpad/edit.html.slime | 6 +- .../templates/profile/show.html.slime | 63 ++- .../templates/tag/_tag_info_row.html.slime | 18 +- .../templates/tag/image/edit.html.slime | 2 +- .../templates/textile/_help.html.slime | 4 +- .../templates/textile/_toolbar.html.slime | 2 + .../topic/post/history/index.html.slime | 4 +- .../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 | 245 ++++++++++ 162 files changed, 2633 insertions(+), 4389 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 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/_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 create mode 100644 assets/css/views/_textile.scss delete mode 100644 assets/js/resizablemedia.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..1e1db42c --- /dev/null +++ b/assets/css/application.scss @@ -0,0 +1,50 @@ +/* + * 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/burger"; +@import "~views/communication"; +@import "~views/header"; +@import "~views/metabar"; +@import "~views/pagination"; +@import "~views/statistics"; +@import "~views/tag"; +@import "~views/textile"; 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 99ccfa6f..00000000 --- a/assets/css/common/_base.scss +++ /dev/null @@ -1,412 +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; -} - -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; -} - -p { - hyphens: none; - margin-top: 4px; - margin-bottom: 6px; - margin-left: 2px; -} - -pre { - background-color: $meta_color; - padding: 10px; - font-size: 11px; - font-family: $font_family_monospace; -} - -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; -} - -#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%; - } -} - -//textile -blockquote { - margin: 1em 2em; - border: 1px dotted $foreground_color; - padding: 1em; - background-color: inherit; -} - -.spoiler { - background-color: $admin_links_hover_color; - color: $admin_links_hover_color; - - a { - color: $admin_links_hover_color; - } - - &: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; - } -} - -.spoiler, .spoiler-revealed { - .imgspoiler { - background-color: $admin_links_hover_color; - img { - visibility: hidden; - } - } - - .imgspoiler:hover, .imgspoiler-revealed { - background-color: $admin_links_color; - img { - visibility: visible; - } - } - - .imgspoiler, .imgspoiler-revealed { - display: inline-block; - max-width: 100%; - } -} - -.literal { - white-space: pre-wrap; -} - -.textile-syntax-reference { - margin-bottom: 6px; -} - -//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/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/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 62b7e074..00000000 --- a/assets/css/common/_blocks.scss +++ /dev/null @@ -1,224 +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/2; - padding-right: $header_spacing/2; - } -} - -.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 / 2) 0 $header_spacing; -} - -.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; -} - -/* 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; - } -} 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 8598627b..00000000 --- a/assets/css/common/_buttons.scss +++ /dev/null @@ -1,91 +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--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; - } -} diff --git a/assets/css/common/_dimensions.scss b/assets/css/common/_dimensions.scss deleted file mode 100644 index d9a43ccf..00000000 --- a/assets/css/common/_dimensions.scss +++ /dev/null @@ -1,29 +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; - -$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) / 2; -$block_header_height: 32px; -$block_header_sub_height: 26px; -$block_spacing: 6px; -$media_box_header_height: 22px; 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 2d17ac9e..00000000 --- a/assets/css/common/_forms.scss +++ /dev/null @@ -1,170 +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 { - 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; -} - -.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; -} - -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 a54f0edd..00000000 --- a/assets/css/common/_header.scss +++ /dev/null @@ -1,299 +0,0 @@ -.header { - background: $header_color; -} - -.header__force-right { - margin-left: auto; -} - -$search_icon: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTc5MiIgaGVpZ2h0PSIxNzkyIiB2aWV3Qm94PSIwIDAgMTc5MiAxNzkyIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjxwYXRoIGQ9Ik0xMjE2IDgzMnEwLTE4NS0xMzEuNS0zMTYuNXQtMzE2LjUtMTMxLjUtMzE2LjUgMTMxLjUtMTMxLjUgMzE2LjUgMTMxLjUgMzE2LjUgMzE2LjUgMTMxLjUgMzE2LjUtMTMxLjUgMTMxLjUtMzE2LjV6bTUxMiA4MzJxMCA1Mi0zOCA5MHQtOTAgMzhxLTU0IDAtOTAtMzhsLTM0My0zNDJxLTE3OSAxMjQtMzk5IDEyNC0xNDMgMC0yNzMuNS01NS41dC0yMjUtMTUwLTE1MC0yMjUtNTUuNS0yNzMuNSA1NS41LTI3My41IDE1MC0yMjUgMjI1LTE1MCAyNzMuNS01NS41IDI3My41IDU1LjUgMjI1IDE1MCAxNTAgMjI1IDU1LjUgMjczLjVxMCAyMjAtMTI0IDM5OWwzNDMgMzQzcTM3IDM3IDM3IDkweiIgZmlsbD0iI2ZmZiIvPjwvc3ZnPg=="); -$camera_icon: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTc5MiIgaGVpZ2h0PSIxNzkyIiB2aWV3Qm94PSIwIDAgMTc5MiAxNzkyIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjxwYXRoIGQ9Ik04OTYgNjcycTExOSAwIDIwMy41IDg0LjV0ODQuNSAyMDMuNS04NC41IDIwMy41LTIwMy41IDg0LjUtMjAzLjUtODQuNS04NC41LTIwMy41IDg0LjUtMjAzLjUgMjAzLjUtODQuNXptNzA0LTQxNnExMDYgMCAxODEgNzV0NzUgMTgxdjg5NnEwIDEwNi03NSAxODF0LTE4MSA3NWgtMTQwOHEtMTA2IDAtMTgxLTc1dC03NS0xODF2LTg5NnEwLTEwNiA3NS0xODF0MTgxLTc1aDIyNGw1MS0xMzZxMTktNDkgNjkuNS04NC41dDEwMy41LTM1LjVoNTEycTUzIDAgMTAzLjUgMzUuNXQ2OS41IDg0LjVsNTEgMTM2aDIyNHptLTcwNCAxMTUycTE4NSAwIDMxNi41LTEzMS41dDEzMS41LTMxNi41LTEzMS41LTMxNi41LTMxNi41LTEzMS41LTMxNi41IDEzMS41LTEzMS41IDMxNi41IDEzMS41IDMxNi41IDMxNi41IDEzMS41eiIgZmlsbD0iI2ZmZiIvPjwvc3ZnPg=="); -$help_icon: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTc5MiIgaGVpZ2h0PSIxNzkyIiB2aWV3Qm94PSIwIDAgMTc5MiAxNzkyIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjxwYXRoIGQ9Ik0xMDg4IDEyNTZ2MjQwcTAgMTYtMTIgMjh0LTI4IDEyaC0yNDBxLTE2IDAtMjgtMTJ0LTEyLTI4di0yNDBxMC0xNiAxMi0yOHQyOC0xMmgyNDBxMTYgMCAyOCAxMnQxMiAyOHptMzE2LTYwMHEwIDU0LTE1LjUgMTAxdC0zNSA3Ni41LTU1IDU5LjUtNTcuNSA0My41LTYxIDM1LjVxLTQxIDIzLTY4LjUgNjV0LTI3LjUgNjdxMCAxNy0xMiAzMi41dC0yOCAxNS41aC0yNDBxLTE1IDAtMjUuNS0xOC41dC0xMC41LTM3LjV2LTQ1cTAtODMgNjUtMTU2LjV0MTQzLTEwOC41cTU5LTI3IDg0LTU2dDI1LTc2cTAtNDItNDYuNS03NHQtMTA3LjUtMzJxLTY1IDAtMTA4IDI5LTM1IDI1LTEwNyAxMTUtMTMgMTYtMzEgMTYtMTIgMC0yNS04bC0xNjQtMTI1cS0xMy0xMC0xNS41LTI1dDUuNS0yOHExNjAtMjY2IDQ2NC0yNjYgODAgMCAxNjEgMzF0MTQ2IDgzIDEwNiAxMjcuNSA0MSAxNTguNXoiIGZpbGw9IiNmZmYiLz48L3N2Zz4="); -$notification_icon: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTc5MiIgaGVpZ2h0PSIxNzkyIiB2aWV3Qm94PSIwIDAgMTc5MiAxNzkyIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjxwYXRoIGQ9Ik05MTIgMTY5NnEwLTE2LTE2LTE2LTU5IDAtMTAxLjUtNDIuNXQtNDIuNS0xMDEuNXEwLTE2LTE2LTE2dC0xNiAxNnEwIDczIDUxLjUgMTI0LjV0MTI0LjUgNTEuNXExNiAwIDE2LTE2em04MTYtMjg4cTAgNTItMzggOTB0LTkwIDM4aC00NDhxMCAxMDYtNzUgMTgxdC0xODEgNzUtMTgxLTc1LTc1LTE4MWgtNDQ4cS01MiAwLTkwLTM4dC0zOC05MHE1MC00MiA5MS04OHQ4NS0xMTkuNSA3NC41LTE1OC41IDUwLTIwNiAxOS41LTI2MHEwLTE1MiAxMTctMjgyLjV0MzA3LTE1OC41cS04LTE5LTgtMzkgMC00MCAyOC02OHQ2OC0yOCA2OCAyOCAyOCA2OHEwIDIwLTggMzkgMTkwIDI4IDMwNyAxNTguNXQxMTcgMjgyLjVxMCAxMzkgMTkuNSAyNjB0NTAgMjA2IDc0LjUgMTU4LjUgODUgMTE5LjUgOTEgODh6IiBmaWxsPSIjZmZmIi8+PC9zdmc+"); -$message_icon: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTc5MiIgaGVpZ2h0PSIxNzkyIiB2aWV3Qm94PSIwIDAgMTc5MiAxNzkyIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjxwYXRoIGQ9Ik0xNzkyIDcxMHY3OTRxMCA2Ni00NyAxMTN0LTExMyA0N2gtMTQ3MnEtNjYgMC0xMTMtNDd0LTQ3LTExM3YtNzk0cTQ0IDQ5IDEwMSA4NyAzNjIgMjQ2IDQ5NyAzNDUgNTcgNDIgOTIuNSA2NS41dDk0LjUgNDggMTEwIDI0LjVoMnE1MSAwIDExMC0yNC41dDk0LjUtNDggOTIuNS02NS41cTE3MC0xMjMgNDk4LTM0NSA1Ny0zOSAxMDAtODd6bTAtMjk0cTAgNzktNDkgMTUxdC0xMjIgMTIzcS0zNzYgMjYxLTQ2OCAzMjUtMTAgNy00Mi41IDMwLjV0LTU0IDM4LTUyIDMyLjUtNTcuNSAyNy01MCA5aC0ycS0yMyAwLTUwLTl0LTU3LjUtMjctNTItMzIuNS01NC0zOC00Mi41LTMwLjVxLTkxLTY0LTI2Mi0xODIuNXQtMjA1LTE0Mi41cS02Mi00Mi0xMTctMTE1LjV0LTU1LTEzNi41cTAtNzggNDEuNS0xMzB0MTE4LjUtNTJoMTQ3MnE2NSAwIDExMi41IDQ3dDQ3LjUgMTEzeiIgZmlsbD0iI2ZmZiIvPjwvc3ZnPg=="); -$message_unread_icon: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTc5MiIgaGVpZ2h0PSIxNzkyIiB2aWV3Qm94PSIwIDAgMTc5MiAxNzkyIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjxwYXRoIGQ9Ik0xNzkyIDcxMHY3OTRxMCA2Ni00NyAxMTN0LTExMyA0N2gtMTQ3MnEtNjYgMC0xMTMtNDd0LTQ3LTExM3YtNzk0cTQ0IDQ5IDEwMSA4NyAzNjIgMjQ2IDQ5NyAzNDUgNTcgNDIgOTIuNSA2NS41dDk0LjUgNDggMTEwIDI0LjVoMnE1MSAwIDExMC0yNC41dDk0LjUtNDggOTIuNS02NS41cTE3MC0xMjMgNDk4LTM0NSA1Ny0zOSAxMDAtODd6bTAtMjk0cTAgNzktNDkgMTUxdC0xMjIgMTIzcS0zNzYgMjYxLTQ2OCAzMjUtMTAgNy00Mi41IDMwLjV0LTU0IDM4LTUyIDMyLjUtNTcuNSAyNy01MCA5aC0ycS0yMyAwLTUwLTl0LTU3LjUtMjctNTItMzIuNS01NC0zOC00Mi41LTMwLjVxLTkxLTY0LTI2Mi0xODIuNXQtMjA1LTE0Mi41cS02Mi00Mi0xMTctMTE1LjV0LTU1LTEzNi41cTAtNzggNDEuNS0xMzB0MTE4LjUtNTJoMTQ3MnE2NSAwIDExMi41IDQ3dDQ3LjUgMTEzeiIgZmlsbD0iI2Y4MCIvPjwvc3ZnPgo="); - -i.fa-embedded--search { - background: $search_icon center 0px / 16px 16px no-repeat; - padding-left: 16px; -} - -i.fa-embedded--camera { - background: $camera_icon center 1px / 16px 16px no-repeat; - padding-left: 28px; -} - -i.fa-embedded--help { - background: $help_icon 4px -1px / 19px 19px no-repeat; - padding-left: 28px; -} - -i.fa-embedded--notification { - background: $notification_icon center / 15px 15px no-repeat; - padding-left: 16px; -} - -[data-notification-count="0"] { - display: none !important; -} - -i.fa-embedded--message { - background: $message_icon center / 16px 16px no-repeat; - padding-left: 16px; -} - -i.fa-embedded--unread-message { - background: $message_unread_icon center / 16px 16px no-repeat; - padding-left: 16px; -} - -// 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