diff --git a/README.md b/README.md index 1b51632..6e93cc8 100644 --- a/README.md +++ b/README.md @@ -1,5 +1,7 @@ # Mastodon Material +mastodon-material + ## Language | 言語 [日本語 (Japanese)](README_ja.md) @@ -15,7 +17,7 @@ Mastodon Material is the native theme for Mastodon, which based on [Material Des - [Mastodon](https://github.com/tootsuite/mastodon) v3.1 or above - [Sass](https://sass-lang.com) 1.25.x -## Installation +## How to install 1. Copy these files of this repository into `app/javascript/styles` of Mastodon source directory. @@ -83,9 +85,11 @@ Mastodon Material is the native theme for Mastodon, which based on [Material Des media_host ||= host_to_url(ENV['S3_CLOUDFRONT_HOST']) media_host ||= host_to_url(ENV['S3_HOSTNAME']) if ENV['S3_ENABLED'] == 'true' media_host ||= assets_host + # custom host github_host = "https://raw.githubusercontent.com" # GitHub google_fonts_host = "https://fonts.gstatic.com" # Google Fonts + Rails.application.config.content_security_policy do |p| p.base_uri :none p.default_src :none @@ -98,21 +102,54 @@ Mastodon Material is the native theme for Mastodon, which based on [Material Des p.manifest_src :self, assets_host ``` + Diff + + ```diff + def host_to_url(str) + "http#{Rails.configuration.x.use_https ? 's' : ''}://#{str}" unless str.blank? + end + base_host = Rails.configuration.x.web_domain + assets_host = Rails.configuration.action_controller.asset_host + assets_host ||= host_to_url(base_host) + media_host = host_to_url(ENV['S3_ALIAS_HOST']) + media_host ||= host_to_url(ENV['S3_CLOUDFRONT_HOST']) + media_host ||= host_to_url(ENV['S3_HOSTNAME']) if ENV['S3_ENABLED'] == 'true' + media_host ||= assets_host + + + # custom host + + github_host = "https://raw.githubusercontent.com" # GitHub + + google_fonts_host = "https://fonts.gstatic.com" # Google Fonts + + Rails.application.config.content_security_policy do |p| + p.base_uri :none + p.default_src :none + p.frame_ancestors :none + - p.font_src :self, assets_host + + p.font_src :self, assets_host, github_host, google_fonts_host + p.img_src :self, :https, :data, :blob, assets_host + p.style_src :self, :unsafe_inline, assets_host + p.media_src :self, :https, :data, assets_host + p.frame_src :self, :https + p.manifest_src :self, assets_host + ``` + ## Customization [Customization Guide](docs/customization_guide.md) -## Stylish/Stylus theme +## Stylus/Stylish theme You can use our theme on any server by the browser extension, [Stylus](https://add0n.com/stylus.html) or [Stylish](https://userstyles.org/). - **Build by yourself** + 1. Install [Sass](https://sass-lang.com) on your computer. Require version is refered in [Requirement](#Requirement). 2. Clone or download this repository on your computer. 3. If you want to customize, please read [Customization Guide](docs/customization_guide.md). 4. Run [build.bat (Windows)](build/build.bat) or [build.sh (macOS/Linux)](build/build.sh). Results will be output in [build.css](build/build.css). 5. Make a new theme on Stylus or Stylish and copy the code of [build.css](build/build.css) and paste on it. Add your favorite server domain on it and save/enable it. -. **Get it from [Userstyles.org](https://userstyles.org/)** + +- **Get it from [Userstyles.org](https://userstyles.org/)** Work in progress... @@ -120,7 +157,4 @@ You can use our theme on any server by the browser extension, [Stylus](https://a This theme and the Stylish/Stylus theme can be used under [AGPL-3.0](LICENSE). [Material Icons font](https://google.github.io/material-design-icons/#icon-font-for-the-web) is available under [Apache license version 2.0](https://www.apache.org/licenses/LICENSE-2.0.html). (This repository does not include Material Icons font.) -## Screenshot - -material-v1-light -material-v2-dark +[The header image](docs/src/top.png) was made by using [Noto Sans](https://www.google.com/get/noto/#sans-lgc) and [mastodon.privacyfilter.user.styl](https://github.com/eai04191/userscript-graveyard#mastodonprivacyfilteruserstyl). diff --git a/README_ja.md b/README_ja.md index b0b0a84..0d1a556 100644 --- a/README_ja.md +++ b/README_ja.md @@ -1,5 +1,7 @@ # Mastodon Material +mastodon-material + ## 言語 | Language [English (英語)](README.md) @@ -111,11 +113,42 @@ Mastodon Materialは、[Material Design](https://material.io)準拠のMastodon p.manifest_src :self, assets_host ``` + Diff + + ```diff + def host_to_url(str) + "http#{Rails.configuration.x.use_https ? 's' : ''}://#{str}" unless str.blank? + end + base_host = Rails.configuration.x.web_domain + assets_host = Rails.configuration.action_controller.asset_host + assets_host ||= host_to_url(base_host) + media_host = host_to_url(ENV['S3_ALIAS_HOST']) + media_host ||= host_to_url(ENV['S3_CLOUDFRONT_HOST']) + media_host ||= host_to_url(ENV['S3_HOSTNAME']) if ENV['S3_ENABLED'] == 'true' + media_host ||= assets_host + + + # custom host + + github_host = "https://raw.githubusercontent.com" # GitHub + + google_fonts_host = "https://fonts.gstatic.com" # Google Fonts + + Rails.application.config.content_security_policy do |p| + p.base_uri :none + p.default_src :none + p.frame_ancestors :none + - p.font_src :self, assets_host + + p.font_src :self, assets_host, github_host, google_fonts_host + p.img_src :self, :https, :data, :blob, assets_host + p.style_src :self, :unsafe_inline, assets_host + p.media_src :self, :https, :data, assets_host + p.frame_src :self, :https + p.manifest_src :self, assets_host + ``` + ## カスタマイズ テーマのカスタマイズについては、[カスタマイズガイド](docs/customization_guide_ja.md)をご覧ください。 -## Stylish/Stylus版テーマ +## Stylus/Stylishテーマ 任意のサーバーでもこのテーマを利用できるよう、ブラウザ拡張機能の[Stylus](https://add0n.com/stylus.html)や[Stylish](https://userstyles.org/)向けのテーマを公開しています。 @@ -126,7 +159,8 @@ Mastodon Materialは、[Material Design](https://material.io)準拠のMastodon 3. カスタマイズする場合、[カスタマイズガイド](docs/customization_guide_ja.md)を参照してください。 4. [build.bat (Windows)](build/build.bat)または[build.sh (macOS/Linux)](build/build.sh)を実行してください。結果が[build.css](build/build.css)に出力されます。 5. StylusまたはStylishでテーマを新規作成し、[build.css](build/build.css)の内容をコピペします。利用しているサーバーのドメインを追加して、テーマを保存/有効化してください。 -. **[Userstyles.org](https://userstyles.org/)から追加する** + +- **[Userstyles.org](https://userstyles.org/)から追加する** 準備中です @@ -134,7 +168,4 @@ Mastodon Materialは、[Material Design](https://material.io)準拠のMastodon このテーマ及びStylish/Stylus版テーマは[AGPL-3.0](LICENSE)に基づいて公開されています。また、Google製[Material Iconsフォント](https://google.github.io/material-design-icons/#icon-font-for-the-web)については、[Apache license version 2.0](https://www.apache.org/licenses/LICENSE-2.0.html)で提供されています。(このリポジトリにMaterial Iconsフォントファイルは含まれていません) -## スクリーンショット - -material-v1-light -material-v2-dark +[ヘッダー画像](docs/src/top.png)は[Noto Sans](https://www.google.com/get/noto/#sans-lgc)と[mastodon.privacyfilter.user.styl](https://github.com/eai04191/userscript-graveyard#mastodonprivacyfilteruserstyl)を使用して作りました。 diff --git a/build/build.css b/build/build.css index 7215c9d..2f1c970 100644 --- a/build/build.css +++ b/build/build.css @@ -1,20 +1,15 @@ -.button, -.compose-form .compose-form__publish-button-wrapper { - box-shadow: 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12); -} - -/*.search__input:hover { - @include shadow-2dp; - background: $search-bar-focus-color; -}*/ +/* +* Mastodon Material 0.2.0 +* Author: Rintan, Genbu Project +* Copyright (C) 2020 Rintan, Genbu Project +*/ .account { border-bottom: 1px solid #dadce0; + padding: 16px; } -.account .account__display-name { - color: #000000; -} +.account .account__display-name, .account .account__display-name strong { - color: #5f6368; + color: #000000; } .account__avatar { border-radius: 50%; @@ -30,10 +25,14 @@ .account__avatar-overlay-overlay { border-radius: 50%; } +.account__avatar-wrapper { + margin-left: 0; + margin-right: 16px; +} .account__header__bar { background: #ffffff; padding: 8px; - border-bottom: 1px solid #dadce0; + border-bottom: none; } .account__header__bar .avatar .account__avatar { border: none; @@ -51,9 +50,13 @@ color: #5f6368; } .account__header__tabs__buttons .icon-button { + width: 20px !important; + height: 20px !important; + font-size: 20px !important; border: none; border-radius: 50%; - padding: 0; + padding: 8px; + margin-left: 8px; } .account__header__extra { margin-top: 0; @@ -103,6 +106,25 @@ .account__header__bio .account__header__fields dd { color: #000000; } +.account__header__account-note { + padding: 8px 16px; + border-bottom: 1px solid #dadce0; +} +.account__header__account-note label { + color: #202124; + margin-bottom: 8px; +} +.account__header__account-note textarea { + color: #000000; + padding: 8px 16px; + border-radius: 0; +} +.account__header__account-note textarea:focus { + background: transparent; +} +.account__header__account-note textarea::placeholder { + color: #c0c0c0; +} .account__header__content { color: #5f6368; } @@ -127,6 +149,17 @@ .account__section-headline a:hover { background: rgba(0, 0, 0, 0.1); } +.account__relationship { + padding: 0; + height: auto; +} +.account__relationship .icon-button { + width: 20px !important; + height: 20px !important; + font-size: 20px !important; + padding: 8px; + box-sizing: content-box; +} .account-role { padding: 4px 8px; @@ -142,19 +175,18 @@ color: #5f6368; } -.button, -.compose-form .compose-form__publish-button-wrapper { - box-shadow: 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12); +.account-gallery__item { + border-radius: 0; } -/*.search__input:hover { - @include shadow-2dp; - background: $search-bar-focus-color; -}*/ body { background: #fafafa; } +.focusable:focus { + background: transparent; +} + ::-webkit-scrollbar-thumb { background: #c7c7c7; } @@ -180,10 +212,6 @@ html { box-shadow: 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12); } -/*.search__input:hover { - @include shadow-2dp; - background: $search-bar-focus-color; -}*/ .icon-button { color: #757575; border-radius: 50%; @@ -200,49 +228,74 @@ html { .icon-button.inverted { color: #757575; } +.icon-button.inverted.active { + color: #4285f4; +} .icon-button.inverted:hover { color: #292929; background-color: rgba(0, 0, 0, 0.1); } +.icon-button.inverted:focus { + background-color: transparent; +} .icon-button.overlayed { + width: 20px !important; + height: 20px !important; + font-size: 20px !important; border-radius: 50%; background: rgba(0, 0, 0, 0.5); color: rgba(255, 255, 255, 0.6); + padding: 4px; + line-height: 20px !important; } .icon-button.overlayed:hover { background: rgba(0, 0, 0, 0.5); color: rgba(255, 255, 255, 0.8); } .icon-button:hover { + transition: opacity 0.25s cubic-bezier(0, 0, 0.2, 1); color: #292929; background-color: rgba(0, 0, 0, 0.1); } -.icon-button:active, .icon-button:focus { +.icon-button:focus { + background-color: transparent; +} + +label.icon-button.active { + color: #202124; + background-color: transparent; +} +label.icon-button:hover { + transition: opacity 0.25s cubic-bezier(0, 0, 0.2, 1); background-color: transparent; } .text-icon-button { color: #757575; border-radius: 50%; - font-size: 12px; + font-size: 14px; +} +.text-icon-button.active { + background-color: rgba(0, 0, 0, 0.1); + color: #4285f4; } .text-icon-button:hover { background-color: rgba(0, 0, 0, 0.1); color: #292929; } -.button, -.button:active, -.button:focus { +.button { + background-color: #4285f4; + border-radius: 2px; +} +.button:active, .button:focus { background-color: #4285f4; border-radius: 2px; } - .button:hover { box-shadow: 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12); background-color: #72a4f7; } - .button.logo-button { background: #4285f4; margin: 2px; @@ -253,11 +306,18 @@ html { .button.logo-button .button--destructive:hover { background: #72a4f7; } - .button.button--block { margin: 8px 0; } - +.button.button-secondary { + color: #4285f4; + border: none; + box-shadow: none; +} +.button.button-secondary:hover { + color: #4285f4; + background-color: rgba(66, 133, 244, 0.2); +} .button.confirmation-modal__cancel-button { box-shadow: none; background-color: transparent; @@ -277,15 +337,6 @@ html { color: rgba(255, 255, 255, 0.6); } -.button, -.compose-form .compose-form__publish-button-wrapper { - box-shadow: 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12); -} - -/*.search__input:hover { - @include shadow-2dp; - background: $search-bar-focus-color; -}*/ .column { box-shadow: 0 2px 1px -1px rgba(0, 0, 0, 0.2), 0 1px 1px 0 rgba(0, 0, 0, 0.14), 0 1px 3px 0 rgba(0, 0, 0, 0.12); padding: 0; @@ -294,6 +345,7 @@ html { } .column > .scrollable { background: #ffffff; + opacity: 1; } .column:last-child { box-shadow: none; @@ -302,9 +354,10 @@ html { .column-header { background: #2196f3; border-radius: 0; + height: 56px; } .column-header > button { - padding: 16px 0 16px 16px; + padding: 16px; color: #ffffff; } .column-header > .column-header__back-button { @@ -323,11 +376,15 @@ html { height: 56px; } .column-header__button { + width: 20px !important; + height: 20px !important; + font-size: 20px !important; background: #2196f3; color: #ffffff; - margin: 8px 10px; - padding: 10px 12px; + padding: 8px; + margin: 10px; border-radius: 50%; + box-sizing: content-box; } .column-header__button.active { color: #d1d1d1; @@ -369,6 +426,7 @@ html { .column-header__wrapper { box-shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.2), 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12); border-radius: 0; + opacity: 1; } .column-header__wrapper .announcements { border-top: 1px solid #dadce0; @@ -394,9 +452,9 @@ html { .column-header__back-button { background: #2196f3; color: #ffffff; - padding: 8px; - margin: auto 0; - border-radius: 50%; + margin: 8px 10px; + padding: 10px; + font-size: 20px; } .column-header__back-button span { display: none; @@ -406,6 +464,7 @@ html { color: #4285f4; background: #fafafa; padding: 12px 16px; + margin-top: 8px; border-top: 1px solid #dadce0; } @@ -463,6 +522,9 @@ html { .column-back-button span { visibility: hidden; } +.column-back-button--slim-button { + top: -54px; +} .column-inline-form { padding: 16px 0 16px 16px; @@ -472,6 +534,10 @@ html { margin: 0 16px; } +.columns-area { + background-size: contain; +} + .setting-text { color: #000000; background: #ffffff; @@ -556,10 +622,12 @@ html { .getting-started { background: #fafafa; color: #202124; + opacity: 1; } .getting-started__wrapper { background: #fafafa; height: auto !important; + padding-bottom: 8px; border-bottom: 1px solid #dadce0; } .getting-started__footer { @@ -579,10 +647,12 @@ html { .getting-started__trends { background: #fafafa; margin-bottom: 0; + opacity: 1; } .getting-started__trends h4 { color: #4285f4; padding: 12px 16px; + margin-top: 8px; border-top: 1px solid #dadce0; border-bottom: none; } @@ -639,20 +709,30 @@ html { } .announcements__pagination { color: #202124; - padding: 8px 16px; - bottom: 8px; + padding: 16px; + bottom: 0; } .announcements__pagination .icon-button { - font-size: 20px !important; width: 20px !important; height: 20px !important; - margin: 0 8px; + font-size: 20px !important; + padding: 8px; + margin: 0 4px; + line-height: normal !important; + box-sizing: content-box; +} +.announcements__pagination span { + vertical-align: super; } .react-swipeable-view-container { transition: transform 0.3s cubic-bezier(0.165, 0.84, 0.44, 1) 0s, height 0.3s cubic-bezier(0.165, 0.84, 0.44, 1) 0s !important; } +.reactions-bar { + margin-top: 16px; + width: calc(100% - 72px); +} .reactions-bar .emoji-button { color: #757575; font-size: 20px; @@ -669,10 +749,13 @@ html { margin: 2px 4px; } .reactions-bar__item.active { - background-color: #c1c1c1; + background-color: rgba(66, 133, 244, 0.3); } .reactions-bar__item.active .reactions-bar__item__count { - color: #202124; + color: #4285f4; +} +.reactions-bar__item.active:hover { + background-color: rgba(66, 133, 244, 0.3); } .reactions-bar__item__emoji { width: 24px; @@ -681,7 +764,7 @@ html { } .reactions-bar__item__count { font-size: 16px; - margin: 0 8px; + margin: 0 12px 0 8px; color: #5f6368; } .reactions-bar__item:hover { @@ -692,6 +775,7 @@ html { background: #2196f3; border-bottom: 1px solid #dadce0; z-index: 1; + opacity: 1; } .notification__filter-bar button { background: #2196f3; @@ -740,20 +824,69 @@ html { color: #5f6368; } -.button, -.compose-form .compose-form__publish-button-wrapper { - box-shadow: 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12); +.public-layout .header { + box-shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.2), 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12); + background: #2196f3; + border-radius: 2px; + margin: 16px 0; +} +.public-layout .header .brand:hover { + background: rgba(255, 255, 255, 0.1); +} +.public-layout .header .nav-link, +.public-layout .header .nav-link.optional { + color: #ffffff; +} +.public-layout .header .nav-link:hover, +.public-layout .header .nav-link.optional:hover { + background: rgba(255, 255, 255, 0.1); + text-decoration: none; +} +.public-layout .header .nav-button { + background: transparent; + margin: 0; + border-radius: 0; +} +.public-layout .header .nav-button:hover { + background: rgba(255, 255, 255, 0.1); +} +.public-layout .header .detailed-status__meta { + margin-top: 16px; +} +.public-layout .detailed-status { + padding: 16px; +} +.public-layout .footer { + padding-top: 16px; + padding-bottom: 64px; + color: #202124; +} +.public-layout .footer h4 { + color: #202124; +} +.public-layout .footer ul a { + color: #5f6368; +} +.public-layout .footer .grid .column-2 h4 a { + color: #202124; +} +.public-layout .footer .brand svg { + fill: #757575; +} +.public-layout .footer .brand:hover svg { + fill: #292929; +} + +.modal-root { + transition: opacity 0.25s cubic-bezier(0, 0, 0.2, 1); } -/*.search__input:hover { - @include shadow-2dp; - background: $search-bar-focus-color; -}*/ .drawer__header { box-shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.2), 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12); background: #2196f3; border-radius: 2px; justify-content: space-around; + opacity: 1; } .drawer__header a { transition: none; @@ -782,6 +915,7 @@ html { } .drawer__inner { background: #ffffff; + opacity: 1; } .drawer__inner.darker { background: #ffffff; @@ -796,6 +930,7 @@ html { color: #c0c0c0; border-radius: 2px; padding: 12px 12px 12px 40px; + opacity: 1; } .search__input:focus { box-shadow: 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12); @@ -848,7 +983,7 @@ html { padding: 16px; } .search-results__header .fa { - margin-right: 8px; + margin-right: 16px; } .search-results__section h5 { background: #ffffff; @@ -867,12 +1002,25 @@ html { .navigation-bar strong { color: #202124; } +.navigation-bar .navigation-bar__actions .compose__action-bar .icon-button { + width: 36px !important; + height: 36px !important; + padding: 8px; +} +.navigation-bar .navigation-bar__actions .compose__action-bar .icon-button.active { + color: #292929; + background: rgba(0, 0, 0, 0.2); +} .navigation-panel hr { border-top: 1px solid #dadce0; margin: 8px 0; } +.flex-spacer { + margin: 8px 0; +} + .dropdown-menu { box-shadow: 0 5px 5px -3px rgba(0, 0, 0, 0.2), 0 8px 10px 1px rgba(0, 0, 0, 0.14), 0 3px 14px 2px rgba(0, 0, 0, 0.12); background: #ffffff; @@ -923,18 +1071,25 @@ html { .compose-form .autosuggest-textarea__suggestions__item.selected, .compose-form .autosuggest-textarea__suggestions__item:focus, .compose-form .autosuggest-textarea__suggestions__item:active { background: #e6e6e6; } +.compose-form .spoiler-input.spoiler-input--visible { + margin-bottom: 8px; +} .compose-form .spoiler-input__input { color: #202124; background: #ffffff; + border-bottom: 1px solid #dadce0; + border-radius: 0; } .compose-form .spoiler-input__input::placeholder { color: #c0c0c0; } .compose-form .compose-form__warning { - box-shadow: 0 2px 1px -1px rgba(0, 0, 0, 0.2), 0 1px 1px 0 rgba(0, 0, 0, 0.14), 0 1px 3px 0 rgba(0, 0, 0, 0.12); color: #5f6368; background: #ffffff; padding: 16px; + border: 1px solid #dadce0; + border-radius: 2px; + box-shadow: none; } .compose-form .compose-form__warning a { color: #4285f4; @@ -943,9 +1098,35 @@ html { background: #ffffff; color: #c0c0c0; } +.compose-form .compose-form__modifiers .compose-form__upload-thumbnail { + border-radius: 0; +} +.compose-form .compose-form__modifiers .compose-form__upload__actions { + transition: opacity 0.25s cubic-bezier(0, 0, 0.2, 1); +} +.compose-form .compose-form__modifiers .compose-form__upload__actions .icon-button { + color: rgba(255, 255, 255, 0.6); + font-size: 16px; +} +.compose-form .compose-form__modifiers .compose-form__upload__actions .icon-button:hover { + background-color: transparent; +} .compose-form .compose-form__buttons-wrapper { background: #ffffff; color: #c0c0c0; + padding: 8px; +} +.compose-form .compose-form__buttons-wrapper .icon-button { + width: 20px !important; + height: 20px !important; + font-size: 20px !important; + padding: 8px; +} +.compose-form .compose-form__buttons-wrapper .text-icon-button { + width: 20px !important; + height: 20px !important; + padding: 8px; + line-height: 20px !important; } .compose-form .compose-form__poll-wrapper { border-top: 1px solid #dadce0; @@ -964,19 +1145,15 @@ html { .compose-form .compose-form__poll-wrapper .button.button-secondary { box-shadow: none; color: #4285f4; - border-color: #4285f4; } .compose-form .compose-form__poll-wrapper .button.button-secondary:hover { - background-color: #f0f5fe; -} -.compose-form .compose-form__poll-wrapper .button.button-secondary:active { - background-color: #d3e2fc; + background-color: rgba(66, 133, 244, 0.2); } -.compose-form .compose-form__poll-wrapper .button.button-secondary:focus { - background-color: #4285f4; +.compose-form .compose-form__poll-wrapper .button.button-secondary:active, .compose-form .compose-form__poll-wrapper .button.button-secondary:focus { + background-color: rgba(66, 133, 244, 0.3); } -.compose-form .compose-form__utilBtns { - padding-top: 0; +.compose-form .compose-form__poll-wrapper .poll__footer { + border-top: none; } .compose-form .compose-form__publish .compose-form__publish-button-wrapper { box-shadow: none; @@ -986,18 +1163,36 @@ html { transition-duration: 0.2s, 0.2s; } +.poll .button { + margin-right: 8px; +} +.poll li { + margin-bottom: 0; +} .poll__input { - border: 2px solid #757575; + border: none; width: 20px; height: 20px; flex: 0 0 20px; - margin: 8px; + padding: 18px; + margin: 0 2px; + background: radial-gradient(circle, transparent, transparent 7px, #757575 8px, #757575 9px, transparent 10px, transparent); +} +.poll__input:hover { + background: radial-gradient(circle, rgba(66, 133, 244, 0.2), rgba(66, 133, 244, 0.2) 7px, #757575 8px, #757575 9px, rgba(66, 133, 244, 0.2) 10px, rgba(66, 133, 244, 0.2)); +} +.poll__input.active { + background: radial-gradient(circle, #4285f4, #4285f4 4px, transparent 5px, transparent 7px, #4285f4 8px, #4285f4 9px, transparent 10px, transparent); +} +.poll__input.active:hover { + background: radial-gradient(circle, rgba(66, 133, 244, 0.2), rgba(66, 133, 244, 0.2) 7px, #757575 8px, #757575 9px, rgba(66, 133, 244, 0.2) 10px, rgba(66, 133, 244, 0.2)); } .poll__input.checkbox { border-radius: 2px; -} -.poll__input:focus, .poll__input:hover { border: 2px solid #757575; + padding: 8px; + margin: 8px 10px; + background: none; } .poll__text input[type=text] { color: #202124; @@ -1008,6 +1203,9 @@ html { .poll__text input[type=text]:focus { border-color: #878d9a; } +.poll__option { + padding: 16px 0 8px; +} .poll__option input[type=text] { color: #000000; background: #ffffff; @@ -1112,6 +1310,9 @@ html { .reply-indicator__content { color: #000000; } +.reply-indicator__content p { + margin-bottom: 16px; +} .attachment-list__list a { color: #5f6368; @@ -1121,6 +1322,7 @@ html { } .block-modal { + box-shadow: 0 11px 15px -7px rgba(0, 0, 0, 0.2), 0 24px 38px 3px rgba(0, 0, 0, 0.14), 0 9px 46px 8px rgba(0, 0, 0, 0.12); background: #ffffff; color: #202124; border-radius: 2px; @@ -1181,6 +1383,10 @@ html { .directory__card__bar .display-name { margin-left: 16px; } +.directory__card__bar .display-name strong { + font-size: 16px; + color: #000000; +} .directory__card__bar .display-name span { color: #5f6368; } @@ -1197,6 +1403,7 @@ html { } .mute-modal { + box-shadow: 0 11px 15px -7px rgba(0, 0, 0, 0.2), 0 24px 38px 3px rgba(0, 0, 0, 0.14), 0 9px 46px 8px rgba(0, 0, 0, 0.12); background: #ffffff; color: #202124; border-radius: 2px; @@ -1214,6 +1421,7 @@ html { } .mute-modal__cancel-button { box-shadow: none !important; + color: #4285f4; background: transparent; margin: 0 8px; } @@ -1234,24 +1442,19 @@ html { margin: 0 0 0 12px; } -.button, -.compose-form .compose-form__publish-button-wrapper { - box-shadow: 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12); +.upload-progress { + color: #202124; } - -/*.search__input:hover { - @include shadow-2dp; - background: $search-bar-focus-color; -}*/ -.button, -.compose-form .compose-form__publish-button-wrapper { - box-shadow: 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12); +.upload-progress__backdrop { + border-radius: 0; + background: #d3e2fc; + margin-top: 6px; +} +.upload-progress__tracker { + border-radius: 0; + background: #4285f4; } -/*.search__input:hover { - @include shadow-2dp; - background: $search-bar-focus-color; -}*/ .react-toggle { width: 36px; height: 16px; @@ -1312,15 +1515,6 @@ html { background: #4285f4; } -.button, -.compose-form .compose-form__publish-button-wrapper { - box-shadow: 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12); -} - -/*.search__input:hover { - @include shadow-2dp; - background: $search-bar-focus-color; -}*/ .emoji-picker-dropdown__menu { box-shadow: 0 5px 5px -3px rgba(0, 0, 0, 0.2), 0 8px 10px 1px rgba(0, 0, 0, 0.14), 0 3px 14px 2px rgba(0, 0, 0, 0.12); background: #ffffff; @@ -1346,18 +1540,15 @@ html { .emoji-mart-bar:first-child { background: #ffffff; } -.emoji-mart-anchors { - color: #757575; - padding: 0; -} .emoji-mart-anchor { + color: #5f6368; padding: 10px 4px; } -.emoji-mart-anchor-selected { - color: #4285f4; -} .emoji-mart-anchor-bar { - background-color: #ffffff; + background-color: #4285f4; +} +.emoji-mart-anchor-selected { + color: #292929; } .emoji-mart-anchor:hover { color: #292929; @@ -1385,22 +1576,13 @@ html { padding: 4px 6px; background: #ffffff; } -.emoji-mart-emoji:hover::before { +.emoji-mart-category .emoji-mart-emoji:hover::before { background-color: rgba(0, 0, 0, 0.1); } .emoji-mart-no-results { color: #5f6368; } -.button, -.compose-form .compose-form__publish-button-wrapper { - box-shadow: 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12); -} - -/*.search__input:hover { - @include shadow-2dp; - background: $search-bar-focus-color; -}*/ .fa.fa-users.column-link__icon.fa-fw, .fa.fa-globe.column-link__icon.fa-fw, .fa.fa-address-book.column-link__icon.fa-fw, @@ -1412,34 +1594,10 @@ html { color: #757575; } -.fa { - vertical-align: sub; -} - -.fa.fa-times, -.fa.fa-eraser, -.fa.fa-plus { - vertical-align: middle; -} - -.fa.fa-check { - vertical-align: initial; -} - .fa.fa-lock { text-transform: none; } -.fa-fw { - width: 16px; -} - -.fa.fa-chevron-left.column-back-button__icon.fa-fw, -.text-btn.column-header__setting-btn .fa.fa-eraser { - font-size: 20px; - margin-right: 16px; -} - .icon-with-badge__badge { background: #4285f4; border: none; @@ -1447,15 +1605,6 @@ html { border-radius: 12px; } -.button, -.compose-form .compose-form__publish-button-wrapper { - box-shadow: 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12); -} - -/*.search__input:hover { - @include shadow-2dp; - background: $search-bar-focus-color; -}*/ .media-gallery { border-radius: 0; } @@ -1463,17 +1612,15 @@ html { border-radius: 0; } -.media-modal__close { - align-content: center; -} .media-modal__close.icon-button { background: transparent; color: rgba(255, 255, 255, 0.6); - text-align: center !important; font-size: 24px !important; - width: 48px !important; - height: 48px !important; - border: 12px; + width: 24px !important; + height: 24px !important; + padding: 8px; + box-sizing: content-box; + line-height: normal !important; } .media-modal__close.icon-button:hover { background: rgba(0, 0, 0, 0.2); @@ -1481,6 +1628,7 @@ html { } .media-modal__close.icon-button .fa-fw { width: 24px; + height: 24px; } .media-modal__nav { @@ -1501,6 +1649,12 @@ html { .media-modal__button--active { background-color: #e6e6e6; } +.media-modal__meta { + bottom: 24px; +} +.media-modal__meta a { + color: rgba(255, 255, 255, 0.6); +} .video-player__controls { background: linear-gradient(0deg, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.2) 60%, transparent); @@ -1543,20 +1697,11 @@ html { font-size: 20px; } -.button, -.compose-form .compose-form__publish-button-wrapper { - box-shadow: 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12); -} - -/*.search__input:hover { - @include shadow-2dp; - background: $search-bar-focus-color; -}*/ .confirmation-modal { + box-shadow: 0 11px 15px -7px rgba(0, 0, 0, 0.2), 0 24px 38px 3px rgba(0, 0, 0, 0.14), 0 9px 46px 8px rgba(0, 0, 0, 0.12); background: #ffffff; color: #202124; border-radius: 2px; - width: 300px; } .confirmation-modal__container { text-align: left; @@ -1609,6 +1754,7 @@ html { } .report-modal { + box-shadow: 0 11px 15px -7px rgba(0, 0, 0, 0.2), 0 24px 38px 3px rgba(0, 0, 0, 0.14), 0 9px 46px 8px rgba(0, 0, 0, 0.12); background: #ffffff; color: #202124; border-radius: 2px; @@ -1636,15 +1782,6 @@ html { color: #5f6368; } -.button, -.compose-form .compose-form__publish-button-wrapper { - box-shadow: 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12); -} - -/*.search__input:hover { - @include shadow-2dp; - background: $search-bar-focus-color; -}*/ .tabs-bar { background: #2196f3; } @@ -1678,6 +1815,10 @@ html { background: #4285f4; color: #ffffff; font-size: 24px; + width: 56px; + height: 56px; + bottom: 16px; + right: 16px; } .floating-action-button:hover { background: #5f98f6; @@ -1700,6 +1841,11 @@ html { left: unset; } +@media screen and (max-width: 415px) { + .public-layout { + padding-top: 64px; + } +} @media screen and (min-width: 415px) { .tabs-bar { margin-bottom: 0; @@ -1715,28 +1861,25 @@ html { box-shadow: 0 2px 1px -1px rgba(0, 0, 0, 0.2), 0 1px 1px 0 rgba(0, 0, 0, 0.14), 0 1px 3px 0 rgba(0, 0, 0, 0.12); padding: 0; } + .columns-area__panels__pane { + padding: 0 16px; + } } @media screen and (min-width: 631px) { .tabs-bar__link:hover { background: rgba(255, 255, 255, 0.1); - border-bottom-color: #2196f3; + border-bottom-color: transparent; } .tabs-bar__link:active, .tabs-bar__link:focus { background: rgba(255, 255, 255, 0.2); border-bottom-color: #2196f3; } + .tabs-bar__link.active { + border-bottom-color: #ffffff; + } } -.button, -.compose-form .compose-form__publish-button-wrapper { - box-shadow: 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12); -} - -/*.search__input:hover { - @include shadow-2dp; - background: $search-bar-focus-color; -}*/ .status { - padding: 12px 12px 12px 70px; + padding: 12px 12px 4px 70px; border-bottom: 1px solid #dadce0; } .status__expand { @@ -1770,6 +1913,9 @@ html { .status__content a.unhandled-link { color: #4285f4; } +.status__content p { + margin-bottom: 16px; +} .status__content .status__content__spoiler-link { background: transparent; } @@ -1796,10 +1942,46 @@ html { .status__content__read-more-button:focus { background: rgba(66, 133, 244, 0.3); } +.status__action-bar { + margin-top: 4px; +} +.status__action-bar__counter { + margin-right: 6px; +} .status__action-bar__counter__label { font-size: 14px; color: #5e5e5e; } +.status__action-bar-button { + margin-right: 6px; +} +.status__action-bar-button.icon-button { + width: 20px !important; + height: 20px !important; + font-size: 20px !important; + padding: 8px; + box-sizing: content-box; +} +.status__action-bar-dropdown { + width: 36px !important; + height: 36px !important; + box-sizing: content-box; +} +.status__action-bar-dropdown .icon-button { + width: 20px !important; + height: 20px !important; + font-size: 20px !important; + padding: 8px; + box-sizing: content-box; +} +.status__action-bar-dropdown .icon-button.active { + color: #292929; + background: rgba(0, 0, 0, 0.2); +} +.status__action-bar-dropdown .icon-button:hover { + color: #292929; + background: rgba(0, 0, 0, 0.1); +} .status__prepend { color: #5f6368; margin-left: 64px; @@ -1811,11 +1993,15 @@ html { background: transparent; border-bottom-color: #dadce0; } +.status__visibility-icon { + color: #757575; +} .status-card { color: #757575; border-color: #dadce0; outline: none; + margin-top: 16px; } .status-card__image { background: transparent; @@ -1856,10 +2042,25 @@ html { .status-card.compact:hover { background-color: transparent !important; } -.status-card:hover { +.status-card.horizontal { + border-radius: 0; +} +.status-card.horizontal .status-card__image-preview { + border-radius: 0; +} +.status-card.horizontal .status-card__image-image { + border-radius: 0; +} + +a.status-card:hover { background-color: #ffffff; } +.embed .status, +.public-layout .status { + padding: 16px 16px 16px 80px; +} + .status.light .status__display-name { color: #000000; } @@ -1880,6 +2081,9 @@ html { background: #ffffff; padding: 16px; } +.detailed-status.detailed-status--flex.detailed-status-public { + border-radius: 2px; +} .detailed-status__display-name { color: #5f6368; } @@ -1894,47 +2098,104 @@ html { background: #ffffff; border-top: none; border-bottom: 1px solid #dadce0; - padding: 12px 0; + padding: 8px 0; +} +.detailed-status__action-bar-dropdown .icon-button { + width: 20px !important; + height: 20px !important; + font-size: 20px !important; + padding: 8px; + box-sizing: content-box; +} +.detailed-status__action-bar-dropdown .icon-button.active { + color: #292929; + background: rgba(0, 0, 0, 0.2); } .detailed-status__button .icon-button { + width: 20px !important; + height: 20px !important; font-size: 20px !important; + padding: 8px; + box-sizing: content-box; } .display-name__html { - color: #000000 !important; + color: #000000; } .display-name__account { color: #5f6368; } -.button, -.compose-form .compose-form__publish-button-wrapper { - box-shadow: 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12); +.activity-stream { + box-shadow: 0 2px 1px -1px rgba(0, 0, 0, 0.2), 0 1px 1px 0 rgba(0, 0, 0, 0.14), 0 1px 3px 0 rgba(0, 0, 0, 0.12); + margin-bottom: 16px; + border-radius: 2px; +} +.activity-stream .entry { + background: #ffffff; +} +.activity-stream .entry:first-child .detailed-status, +.activity-stream .entry:first-child .load-more, +.activity-stream .entry:first-child .status { + border-radius: 2px 2px 0 0; +} + +.entry.entry-center { + border-bottom: 1px solid #dadce0; } -/*.search__input:hover { - @include shadow-2dp; - background: $search-bar-focus-color; -}*/ .link-button { color: #4285f4; } -.button, -.compose-form .compose-form__publish-button-wrapper { +.hero-widget { box-shadow: 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12); + margin-bottom: 16px; +} +.hero-widget__img { + border-radius: 2px 2px 0 0; + background: #ffffff; +} +.hero-widget__img img { + border-radius: 2px 2px 0 0; +} +.hero-widget__text { + background: #ffffff; + padding: 16px; + color: #000000; + border-radius: 0 0 2px 2px; +} + +.endorsements-widget { + padding-bottom: 8px; + margin-bottom: 8px; +} + +.trends-widget h4 { + color: #4285f4; } -/*.search__input:hover { - @include shadow-2dp; - background: $search-bar-focus-color; -}*/ @font-face { font-family: "Material Icons"; - src: local("Material Icons"), url("https://raw.githubusercontent.com/google/material-design-icons/master/iconfont/MaterialIcons-Regular.woff2"); + src: local("Material Icons"), url("https://fonts.gstatic.com/s/materialicons/v55/flUhRq6tzZclQEJ-Vdg-IuiaDsNc.woff2") format("woff2"); +} +.fa-fw { + width: 20px; + height: 20px; + font-size: 20px; } -.fa.fa-bars, .fa.fa-navicon, .fa.fa-reorder, .fa.fa-globe, .fa.fa-cog, .fa.fa-cogs, .fa.fa-gears, .fa.fa-sign-out, .fa.fa-search, .fa.fa-times, .fa.fa-times-circle, .fa.fa-close, .fa.fa-remove, .fa.fa-chevron-down, .fa.fa-ellipsis-v, .fa.fa-paperclip, .fa.fa-tasks, .fa.fa-plus, .fa.fa-unlock, .fa.fa-lock, .fa.fa-envelope, .fa.fa-home, .fa.fa-bullhorn, .fa.fa-sliders, .fa.fa-chevron-left, .fa.fa-chevron-right, .fa.fa-reply, .fa.fa-reply-all, .fa.fa-share-alt, .fa.fa-star, .fa.fa-bookmark, .fa.fa-ellipsis-h, .fa.fa-bell, .fa.fa-eraser, .fa.fa-users, .fa.fa-file-text, .fa.fa-user-plus, .fa.fa-address-book, .fa.fa-address-book-o, .fa.fa-list, .fa.fa-list-ul, .fa.fa-eye, .fa.fa-eye-slash, .fa.fa-pencil, .fa.fa-trash, .fa.fa-play, .fa.fa-external-link, .fa.fa-retweet, .fa.fa-link, .fa.fa-pause, .fa.fa-volume-up, .fa.fa-volume-off, .fa.fa-expand, .fa.fa-download, .fa.fa-arrows-alt, .fa.fa-compress, .fa.fa-user-times, .fa.fa-check, .fa.fa-quote-right { + +.fa.fa-bars, .fa.fa-navicon, .fa.fa-reorder, .fa.fa-globe, .fa.fa-cog, .fa.fa-cogs, .fa.fa-gears, .fa.fa-sign-out, .fa.fa-search, .fa.fa-times, .fa.fa-times-circle, .fa.fa-close, .fa.fa-remove, .fa.fa-chevron-down, .fa.fa-ellipsis-v, .fa.fa-paperclip, .fa.fa-tasks, .fa.fa-plus, .fa.fa-unlock, .fa.fa-lock, .fa.fa-envelope, .fa.fa-home, .fa.fa-bullhorn, .fa.fa-sliders, .fa.fa-chevron-left, .fa.fa-chevron-right, .fa.fa-reply, .fa.fa-reply-all, .fa.fa-share-alt, .fa.fa-star, .fa.fa-bookmark, .fa.fa-ellipsis-h, .fa.fa-bell, .fa.fa-eraser, .fa.fa-users, .fa.fa-file-text, .fa.fa-user-plus, .fa.fa-address-book, .fa.fa-address-book-o, .fa.fa-list, .fa.fa-list-ul, .fa.fa-eye, .fa.fa-eye-slash, .fa.fa-pencil, .fa.fa-trash, .fa.fa-play, .fa.fa-external-link, .fa.fa-retweet, .fa.fa-link, .fa.fa-pause, .fa.fa-volume-up, .fa.fa-volume-off, .fa.fa-expand, .fa.fa-download, .fa.fa-arrows-alt, .fa.fa-compress, .fa.fa-user-times, .fa.fa-check, .fa.fa-quote-right, .fa.fa-upload, .fa.fa-comments, .fa.fa-angle-right { font-family: "Material Icons"; + line-height: 1; + letter-spacing: normal; + text-transform: none; + display: inline-block; + white-space: nowrap; + word-wrap: normal; + direction: ltr; + font-feature-settings: "liga"; + -webkit-font-smoothing: antialiased; } .fa.fa-bars::before, .fa.fa-navicon::before, .fa.fa-reorder::before { @@ -2082,7 +2343,7 @@ html { content: "fullscreen_exit"; } .fa.fa-user-times::before { - content: "delete"; + content: "person_remove"; } .fa.fa-check::before { content: "check"; @@ -2090,6 +2351,15 @@ html { .fa.fa-quote-right::before { content: "format_quote"; } +.fa.fa-upload::before { + content: "file_upload"; +} +.fa.fa-comments::before { + content: "forum"; +} +.fa.fa-angle-right::before { + content: "chevron_right"; +} .status__action-bar-button.icon-button .fa.fa-bookmark::before, .bookmark-icon.icon-button .fa.fa-bookmark::before { @@ -2117,15 +2387,78 @@ html { color: #ffd600; } -.no-reduce-motion button.icon-button i.fa-retweet { - height: 18px; - width: 18px; +button.icon-button i.fa-retweet { + height: 20px; + width: 20px; transition: none; - background-image: url('data:image/svg+xml;utf8,'); + background-image: url('data:image/svg+xml;utf8,'); +} + +button.icon-button i.fa-retweet:hover { + background-image: url('data:image/svg+xml;utf8,'); +} + +button.icon-button.disabled i.fa-retweet, +button.icon-button.disabled i.fa-retweet:hover { + background-image: url('data:image/svg+xml;utf8,'); } .compose-form__poll-wrapper select { background: url('data:image/svg+xml;utf8,') no-repeat right 8px center/auto 16px; } +.text-btn.column-header__setting-btn .fa { + vertical-align: middle; +} +.text-btn.column-header__setting-btn .fa.fa-eraser { + margin-right: 8px; +} + +.fa.fa-bell.column-header__icon.fa-fw, +.fa.fa-home.column-header__icon.fa-fw, +.fa.fa-users.column-header__icon.fa-fw, +.fa.fa-globe.column-header__icon.fa-fw, +.fa.fa-bars.column-header__icon.fa-fw, +.fa.fa-bookmark.column-header__icon.fa-fw, +.fa.fa-address-book-o.column-header__icon.fa-fw, +.fa.fa-envelope.column-header__icon.fa-fw, +.fa.fa-star.column-header__icon.fa-fw { + vertical-align: text-bottom; +} + +.tabs-bar__link .fa.fa-home.fa-fw, +.tabs-bar__link .fa.fa-bell.fa-fw, +.tabs-bar__link .fa.fa-users.fa-fw, +.tabs-bar__link .fa.fa-globe.fa-fw { + vertical-align: text-bottom; +} + +.column-link .fa, +.column-link--transparent .fa { + vertical-align: text-bottom; +} + +.compose-form .compose-form__modifiers .compose-form__upload__actions .icon-button .fa { + font-size: 20px; + vertical-align: text-bottom; +} + +.search-results__header .fa { + vertical-align: text-bottom; +} + +.status__content__read-more-button .fa { + vertical-align: bottom; +} + +.detailed-status .fa { + font-size: 16px; + vertical-align: text-bottom; +} + +.status__visibility-icon .fa { + font-size: 16px; + vertical-align: text-bottom; +} + /*# sourceMappingURL=build.css.map */ diff --git a/build/build.css.map b/build/build.css.map index 4fb5d59..5299113 100644 --- a/build/build.css.map +++ b/build/build.css.map @@ -1 +1 @@ -{"version":3,"sourceRoot":"","sources":["../src/mastodon-material/layout/material-v1.scss","../src/mastodon-material/theme/_mixins.scss","../src/mastodon-material/theme/base_config.scss","../src/mastodon-material/theme/account.scss","../src/mastodon-material/color/v1-light.scss","../src/mastodon-material/theme/basics.scss","../src/mastodon-material/theme/button.scss","../src/mastodon-material/theme/columns.scss","../src/mastodon-material/theme/components.scss","../src/mastodon-material/theme/control.scss","../src/mastodon-material/theme/emoji-picker.scss","../src/mastodon-material/theme/icons.scss","../src/mastodon-material/theme/media.scss","../src/mastodon-material/theme/modal.scss","../src/mastodon-material/theme/responsive.scss","../src/mastodon-material/theme/statuses.scss","../src/mastodon-material/theme/variables.scss","../src/mastodon-material/icon_config.scss","../src/mastodon-material/theme/material-icons.scss"],"names":[],"mappings":"AA2CA;AAAA;ECnCoB;;;ACYpB;AAAA;AAAA;AAAA;ACdA;EACI;;AAEA;EAAyB,OCCR;;ADAjB;EAAgC,OCCb;;ADCnB;EACI,eHwBQ;EGvBR;EACA;;AAGI;EACI;EACA;EACA;EACA;;AAGJ;EAAY,eHYR;;AGPR;EACI,YCDY;EDEZ;EACA;;AAEA;EAA2B;;AAG/B;EACI;;AAEA;EACI;;AAEA;EACI,OCnCC;;ADqCD;EAAQ,OCpCL;;ADyCP;EACI;EACA;EACA;;AAKZ;EACI;;AAEA;EACI,OCrDO;EDsDP;;AAEA;EACI,OCzDG;ED0DH;;AAEA;EAAS,OC3Db;;ADgER;EACI;;AAGI;EACI,OCvEC;EDwED;;AAGJ;EACI;EACA;;AAEA;EACI;EACA,YCrDI;;ADuDJ;EACU,OCpFb;;ADuFD;EACI;;AAEA;EAA0B;;AAE1B;EAAe;;AAGnB;EACI,OChGH;EDiGG,YCvES;;AD0Eb;EAAK,OCpGJ;;ADyGb;EAAa,OCxGE;;AD2GnB;EACI,YCFoB;EDGpB;;AAEA;EACI;EACA,OCjHW;;ADmHX;EACI,OCtBA;EDuBA;;AAEA;EACU;;AAEV;EAAU,YCdkB;;ADiBhC;EAAU,YClBsB;;;ADuB5C;EACI;EACA;EACA,OCpIY;EDqIZ,kBCxGmB;;;AD2GvB;EACI,OCzIY;;AD2IZ;EAAQ,OC5IW;;;AJgCvB;AAAA;ECnCoB;;;ACYpB;AAAA;AAAA;AAAA;AGdA;EAAO,YDmBY;;;AChBnB;EACI,YD0FqB;;ACxFrB;EAAU,YDyFiB;;ACxF3B;EAAW,YDyFiB;;;ACtFhC;AAAA;AAAA;EAGI;;;AAIJ;EACI;;;ALmBJ;AAAA;ECnCoB;;;ACYpB;AAAA;AAAA;AAAA;AIdA;EACI,OFiDS;EEhDT;;AAEA;EACI,OFPQ;;AESR;EAAU,OF8De;;AE3D7B;EAAa,OF4CK;;AE1ClB;EACI,OFqCK;;AEnCL;EACI,OFmCO;EElCP,kBFmCkB;;AE/B1B;EACI;EACA,YFsCsB;EErCtB,OFmCW;;AEjCX;EACI,YFkCkB;EEjClB,OFgCa;;AE5BrB;EACI,OFkBW;EEjBX,kBFkBsB;;AEf1B;EACU;;;AAGd;EACI,OFQS;EEPT;EACA;;AAEA;EACI,kBFKsB;EEJtB,OFGW;;;AECnB;AAAA;AAAA;EAGI,kBFzDY;EE0DZ,eN7CY;;;AMgDhB;ELzDoB;EK2DhB,kBFU2B;;;AEP/B;EACI,YFnEY;EEoEZ;;AAEA;EAAU,YFGiB;;AED3B;EAA6B,YFCF;;;AEE/B;EAAwB;;;AAExB;EACI;EACA;EACA;EACA,OFjFY;;AEmFZ;EAAU,YFLY;;AEOtB;EAAU,YFNY;;;AES1B;EACI,YF1B0B;EE2B1B,eN7EY;EM8EZ,OF9Be;;;AJtBnB;AAAA;ECnCoB;;;ACYpB;AAAA;AAAA;AAAA;AKdA;ENCoB;EMChB;EACA;EACA,ePWU;;AOTV;EAAgB,YHqBI;;AGnBpB;EAAe;;;AAGnB;EACI,YHuFY;EGtFZ,ePNS;;AOQT;EACI;EACA,OHVc;;AGalB;EAAgC,OHmCf;;AGhCb;EACI,OHkCgB;EGjChB;;AAIR;EACI;EACA,OHwBa;EGvBb;;AAGJ;EAAa;;AAEb;EACI,YH6DQ;EG5DR,OHgBa;EGfb;EACA;EACA;;AAEA;EACI,OHYgB;EGXhB,YHOmB;;AGLnB;EACI,OHOW;EGNX,YHEc;;AGEtB;EACI,OHCe;EGAf,YHJkB;;AGQ1B;EACI,OHXK;EGYL;;AAEA;EACI,OHdO;EGeP;;AAGJ;EAAM;;AAEN;EAAO;;AAGX;EACI;EACA;;AAEA;EACI;EACA;;AAEA;EAAe;;AAIvB;ENlFgB;EMoFZ,ePjFK;;AOmFL;EAAiB;;AAEjB;ENxFY;;AM2FR;EAAY;;AAIpB;EACI,OH9FQ;EG+FR,YH7EgB;EG8EhB;;AAEA;EACI,YHjFY;EGkFZ;;AAGJ;EAAc;;AAGlB;EACI,YHdQ;EGeR,OH3Da;EG4Db;EACA;EACA;;AAEA;EAAO;;;AAIf;EACI,OH9HY;EG+HZ,YH1Ge;EG2Gf;EACA;;;AAGJ;EACI,OH7HY;EG8HZ,YHjHe;EGkHf;EACA,eP3GqB;;AO6GrB;EAAU,YH5GgB;;AG8G1B;EACU,YH9GiB;;AGgH3B;EACI;EACA;;AAIA;EACI,OH9II;EG+IJ,YH/HmB;;AGiInB;EAAU,YHhIe;;AGkIzB;EAAM,OHvGL;;AG0GL;EACI,OHvJI;;AGyJJ;EAAM,OH7GL;;AGiHT;EAAM,OHjHG;;;AGqHT;EACI,OH1KQ;EG2KR;EACA;;AAGJ;EAAmB;;;AAGvB;EN5KoB;EM8KhB,YH/EY;EGgFZ,OH5HiB;EG6HjB;;AAEA;EAAO;;;AAGX;EACI;EACA,YHnKoB;;AGqKpB;EAAe;;;AAGnB;EACI,OH7LiB;EG8LjB,YH1KoB;EG2KpB,eP5LS;;AO8LT;EAAiB,OH3LH;;;AG8LlB;EACI,OHpMmB;EGqMnB,YHlLoB;EGmLpB;;;AAGJ;EACI;EACA;EACA,YHnL6B;;AGqL7B;EACI,YHzLgB;;AG2LhB;EAAwC,OH7M9B;;AGgNd;EAAY,YH3NA;;AG6NZ;EAAY;;AAEZ;EACI;;AAEA;EACI;EACA,OHzNM;;AG4NV;EAEI,OHnOS;EGoOT;;;AAQJ;EACI,OHrHc;;AGuHd;EAAI,OHvHU;;AGyHd;EAAI,OHxHY;;AG2HpB;EAAyB,OH5HP;;AG+HtB;EACI,OHhIkB;;AGkIlB;EACI,YH/HU;;AGiIV;EAAY,YHlIM;;AGqItB;EACU,OHvIG;;;AG2IrB;EAAY;;;AAEZ;EACI,OH1NS;EG2NT;;AAEA;EAAU,YH1PgB;;;AG6P9B;EACI,YHhQe;EGiQf,OH9QY;;AGgRZ;EACI,YHpQW;EGqQX;EACA;;AAGJ;EACI;;AAEA;EACI,OH3RW;EG4RX;EACA;;AAGJ;EAAI,OH/RI;;AGiSR;EAAM,OH3RI;;AG8Rd;EACI,YHxRW;EGyRX;;AAEA;EACI,OHjTI;EGkTJ;EACA;EACA;;;AAMR;EACI,OH3TQ;EG4TR;EACA;EACA;;AAEA;EAAM;;AAGV;EACI;EACA;;AAEA;EACI,OHjUW;EGkUX;;AAEA;EAAI,OHrUK;;AGwUb;EACI;EACA;EACA,OH1UW;;AG6Uf;EACI,QHrVI;EGsVJ,MHtVI;EGuVJ;;;AAMR;EACI,OHtVQ;EGuVR;;;AAIR;EACI,YH1UoB;EG2UpB;;AAEA;EAAe,OHjWE;;AGmWjB;EACI;EACA;;AAEA;EAAY,YH7WJ;;AGgXZ;EACI,OHzWQ;EG0WR;EACA;;AAEA;EACI;EACA;EACA;EACA;;;AAKZ;EAAkC;;;AAG9B;EACI,OH9UK;EG+UL;;AAEA;EAAU,OHhVC;;AGkVX;EAAW,OHvYH;;AG0YZ;EACI,YHtWe;EGuWf;EACA;;AAEA;EACI,kBHzWoB;;AG0WpB;EAA8B,OHzY1B;;AG4YR;EACI;EACA;EACA;;AAGJ;EACI;EACA;EACA,OHtZW;;AGyZf;EAAU,YH1XW;;;AG+XzB;EACI,YHjUQ;EGkUR;EACA;;AAEA;EACI,YHtUI;EGuUJ,OHnXS;EGoXT;;AAEA;EAAO;;AAEP;EACI,OHzXK;EG0XL;;AAEA;EACU;;AAEV;EAAU,YH1Ua;;AG6U3B;EAAU,YH9UiB;;AGkVnC;EACI,OHzbe;EG0bf;EACA;;AAGJ;EAAwB;;;AAIxB;EAAwB,OHjZN;;;AGoZtB;EACI,OHrcY;EGscZ,kBHjaqB;EGkarB;EACA;EACA;EACA;;;AAGJ;EAA2B,OH9cJ;;;AJgCvB;AAAA;ECnCoB;;;ACYpB;AAAA;AAAA;AAAA;AMZI;EPEgB;EOAZ,YJ+FQ;EI9FR,eRNS;EQOT;;AAEA;EAAI;;AAEJ;EACI,YJyCkB;EIxClB;;AAIR;EACI,OJsCa;EIrCb;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EAAU,OJ6BS;;AI1BvB;EP7BgB;EO+BZ,eRjBM;;AQoBV;EACI,YJZgB;;AIchB;EACI,YJfY;EIgBZ;;AAGJ;EAAc,YJnBE;;;AIwBpB;EACI,YJmDW;EIlDX,OJxCU;EIyCV,eRhDY;EQiDZ;;AAEA;EPpDY;EOsDR,YJrCO;EIsCP,OJrDS;;AIwDb;EAAiB,OJlDP;;AIsDV;EACI,OJfC;EIgBD;EACA;EACA;EACA;EACA;EACA;;AAEA;EAAW;;AAEX;EACI;EACA;;AAEJ;EACI;EACA;EACA;;;AAMhB;EPtFoB;EOwFhB,YJvEe;EIwEf;EACA;EACA;EACA,OJpFc;;AIsFd;EACI,OJ5Fe;;AI+FnB;EACI,OJjGa;;;AIsGjB;EACI,OJtGe;EIuGf,kBJpFgB;EIqFhB;;AAEA;EAAM;;AAIN;EACI,YJ5FY;EI6FZ;EACA;EACA,OJzHI;;AI2HJ;EAAM;;;AAKlB;EACI,OJ1HmB;EI2HnB;;AAEA;EACI,OJ7HQ;;;AIiIhB;EACI;EACA;;;AAGJ;EPpIoB;EOsIhB,YJ1HoB;EI2HpB;EACA,eRzHU;;AQ2HV;EAAW;;AAEX;EACI;EACA;EACA,YJnIgB;EIoIhB,OJlJQ;;AIoJR;EACI,YJtIkB;EIuIlB,OJtJI;;AI0JZ;EACI;EACA;;;AAMA;EACI,YJjJY;EIkJZ,OJpKI;EIqKJ,eR5JE;;AQ8JF;EAAiB,OJnKX;;AIsKV;EP/KY;EOiLR,YJ9JY;EI+JZ,OJ7KI;EI8KJ,eRrKE;EQsKF;EACA;;AAEA;EACI;EACA;;AAEA;EAAU,YJvKI;;AIyKd;EAEW,YJ1KI;;AI+K3B;EACI,OJhMQ;EIiMR,YJ/KgB;;AIiLhB;EAAiB,OJ/LP;;AImMV;EP5MY;EO8MR,OJ1MW;EI2MX,YJxLY;EIyLZ;;AAEA;EAAI,OJvME;;AI0MV;EACI,YJ/LY;EIgMZ,OJ9MM;;AIiNV;EACI,YJpMY;EIqMZ,OJnNM;;AIsNV;EACI;;AAEA;EAAK;;AAEL;EACI,OJhOA;EIiOA,kBJpNG;EIqNH;;AAEA;EAAU,cJ/IJ;;AIkJV;EACI;EACA,OJjPA;EIkPA,cJlPA;;AIoPA;EAAU,kBJzKI;;AI2Kd;EAAW,kBJ1KI;;AI4Kf;EAAU,kBJxPV;;AI8PR;EAAc;;AAEd;EAAmD;;;AAI3D;EACI;;;AAKA;EACI;EACA;EACA;EACA;EACA;;AAEA;EAAa;;AAEb;EACU;;AAGd;EACI,OJhRQ;EIiRR,YJ/PgB;EIgQhB;EACA;;AAEA;EAAU,cJhMI;;AImMlB;EACI,OJ3Ra;EI4Rb,YJxQgB;EIyQhB;EACA;EACA;;AAGJ;EACI;EACA,YJ/KS;;AIiLT;EAAY,YJ5SJ;;AI+SZ;EACI;EACA;EACA,OJ1SQ;;AI6SZ;EAAU,OJ7SE;;;AIiTZ;EACI,YJpQsB;EIqQtB;EACA;;AAEA;EAAe,OJ9TP;;AIiUZ;EPvTgB;EOyTZ,YJ7SgB;EI8ShB,eR/SQ;;AQkTZ;EACI,OJpRK;EIqRL;;AAEA;EACI;EACA;;AAGJ;EACI,OJ1UW;;AI4UX;EAAS,OJ3UL;;AI8UR;EACI,YJ/TmB;EIgUnB,OJnSO;;AIqSP;EACI,OJpVO;;AIsVP;EAAS,OJrVT;;AIwVJ;EACI,YJzUe;;AI2Uf;EACI,OJ7VG;;AI+VH;EAAS,OJ9Vb;;AImWR;EACI,YJrVkB;EIsVlB,OJxTO;;AI0TP;EACI,OJzWO;;AI2WP;EAAS,OJ1WT;;;AIgXhB;EACI,OJlXmB;;;AIqXvB;EACI;EACA;EACA,eR9WU;EQ+WV,YJtWoB;EIuWpB;;AAEA;EAAY;;AAGR;EACI,OJjYS;EIkYT;;AAGJ;EAAW;;AAGf;EAAa,OJxYI;;;AI4YjB;EAAY,OJ3YO;;AI6YnB;EAAgB,OJhWP;;;AImWb;EACI,YJ9XoB;EI+XpB,OJjZY;EIkZZ,eRzYU;;AQ2YV;EAAe;;AAEf;EACI,YJrYgB;EIsYhB;EACA;;AAGJ;EACI;EACA,OJtaQ;EIuaR;;AAEA;EACI,OJ1aI;EI2aJ,kBJ7Vc;;AIgWlB;EAEI,OJhbI;EIibJ,kBJlWc;;;AIuW1B;EACI,OJ/aY;;AIibZ;EAAU;;;AAIV;EAAU,OJrbE;;;AIwbhB;EACI,YJ5ae;EI6af,OJ1bY;;AI4bZ;EAAY;;;AAIZ;EPrcgB;EOucZ;EACA,eR1bM;;AQ4bN;EAAS;;AAET;EACI,YJtbY;EIubZ;;AAEA;EACI;;AAEA;EAAO,OJ/cA;;AImdf;EACI,YJjcY;EIkcZ;;AAEA;EACI;EACA;;AAGJ;EAAyB;;;AAKrC;EACI,YJ/coB;EIgdpB,OJleY;EImeZ,eR1dU;;AQ4dV;EAAe;;AAEf;EAAiB;;AAEjB;EACI,YJxdgB;EIydhB;EACA;;AAGJ;EACI;EACA;EACA;;AAEA;EACI,OJ7fI;EI8fJ,kBJhbc;;AImblB;EAEI,OJngBI;EIogBJ,kBJrbc;;AIybtB;EACI;EACA;;AAEA;EACI,OJrgBI;EIsgBJ;;;ARveZ;AAAA;ECnCoB;;;ACYpB;AAAA;AAAA;AAAA;AFuBA;AAAA;ECnCoB;;;ACYpB;AAAA;AAAA;AAAA;AObA;EACI;EACA;EACA;;AAEA;EACI,kBL8Ea;EK7Eb;EACA;EACA;;AAEA;EAAU;;AACV;EAAM;;AAGV;ERfgB;EQiBZ;EACA;EACA;EACA,kBL+Da;;AK1DT;EAAU,kBL6DM;;AK3DhB;EACI,kBLyDY;EKxDZ;;AAIR;EAA2D;;AAI/D;EAA2D,kBL+C1C;;;AK5CrB;EACI;;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","file":"build.css"} \ No newline at end of file +{"version":3,"sourceRoot":"","sources":["../src/mastodon-material/theme/theme.scss","../src/mastodon-material/theme/account.scss","../src/mastodon-material/color/v1-light.scss","../src/mastodon-material/layout/material-v1.scss","../src/mastodon-material/theme/_mixins.scss","../src/mastodon-material/theme/basics.scss","../src/mastodon-material/theme/button.scss","../src/mastodon-material/theme/columns.scss","../src/mastodon-material/theme/base_config.scss","../src/mastodon-material/theme/containers.scss","../src/mastodon-material/theme/components.scss","../src/mastodon-material/theme/control.scss","../src/mastodon-material/theme/emoji-picker.scss","../src/mastodon-material/theme/icons.scss","../src/mastodon-material/theme/media.scss","../src/mastodon-material/theme/modal.scss","../src/mastodon-material/theme/responsive.scss","../src/mastodon-material/theme/statuses.scss","../src/mastodon-material/theme/variables.scss","../src/mastodon-material/theme/widgets.scss","../src/mastodon-material/theme/material-icons.scss","../src/mastodon-material/icon_config.scss"],"names":[],"mappings":"AAAA;AAAA;AAAA;AAAA;AAAA;ACMA;EACI;EACA;;AAEA;AAAA;EACgC,OCCf;;ADCjB;EACI,eE2BQ;EF1BR;EACA;;AAGI;EACI;EACA;EACA;EACA;;AAGJ;EAAY,eEeR;;AFXZ;EACI;EACA;;AAIA;EACI,YCLI;EDMJ;EACA;;AAEA;EAA2B;;AAG/B;EACI;;AAEA;EACI;;AAEA;EACI,OCvCC;;ADyCD;EAAQ,OCxCL;;AD6CP;EGMZ;EACA;EACA;EHNgB;EACA;EACA;EACA;;AAKZ;EACI;;AAEA;EACI,OC3DO;ED4DP;;AAEA;EACI,OC/DG;EDgEH;;AAEA;EAAS,OCjEb;;ADsER;EACI;;AAGI;EACI,OC7EC;ED8ED;;AAGJ;EACI;EACA;;AAEA;EACI;EACA,YC5DJ;;AD8DI;EACU,OC1Fb;;AD6FD;EACI;;AAEA;EAA0B;;AAE1B;EAAe;;AAGnB;EACI,OCtGH;EDuGG,YC9EC;;ADiFL;EAAK,OC1GJ;;AD+Gb;EACI;EACA;;AAEA;EACI,OClHA;EDmHA;;AAGJ;EACI,OCzHK;ED0HL;EACA;;AAEA;EAAU;;AAEV;EAAiB,OCzHf;;AD6HV;EAAa,OClIE;;ADqInB;EACI,YCvBY;EDwBZ;;AAEA;EACI;EACA,OC3IW;;AD6IX;EACI,OC3CA;ED4CA;;AAEA;EACU;;AAEV;EAAU,YCnCU;;ADsCxB;EAAU,YCvCc;;AD2ChC;EACI;EACA;;AAEA;EG5GJ;EACA;EACA;EH4GQ;EACA;;;AAKZ;EACI;EACA;EACA,OCzKY;ED0KZ,kBC9ImB;;;ADiJvB;EACI,OC9KY;;ADgLZ;EAAQ,OCjLW;;;ADqLnB;EAAU;;;AI5Ld;EAAO,YHqBI;;;AGnBX;EAAmB;;;AAGnB;EACI,YH+FqB;;AG7FrB;EAAU,YH8FiB;;AG7F3B;EAAW,YH8FiB;;;AG3FhC;AAAA;AAAA;EAGI;;;AAIJ;EAAO;;;ADiCC;AAAA;EAlDY;;;AEApB;EACI,OJkDS;EIjDT;;AAEA;EACI,OJPQ;;AISR;EAAU,OJmEe;;AIhE7B;EAAa,OJ6CK;;AI3ClB;EACI,OJsCK;;AIpCL;EAAW,OJjBH;;AImBR;EACI,OJkCO;EIjCP,kBJkCU;;AI/Bd;EAAU;;AAGd;EF+BA;EACA;EACA;EE/BI;EACA,YJkCc;EIjCd,OJ+BW;EI9BX;EACA;;AAEA;EACI,YJ4BU;EI3BV,OJ0Ba;;AItBrB;EFbyB;EEerB,OJWW;EIVX,kBJWc;;AIRlB;EAAU;;;AAKV;EACI,OJ7CQ;EI8CR;;AAGJ;EF7ByB;EE+BrB;;;AAIR;EACI,OJXS;EIYT;EACA;;AAEA;EACI,kBJdc;EIed,OJtEQ;;AIyEZ;EACI,kBJnBc;EIoBd,OJrBW;;;AIyBnB;EACI,kBJhFY;EIiFZ,eHtEY;;AGwEZ;EAEI,kBJrFQ;EIsFR,eH3EQ;;AG8EZ;EFvFgB;EEyFZ,kBJbuB;;AIgB3B;EACI,YJ/FQ;EIgGR;;AAEA;EAAU,YJpBa;;AIsBvB;EAA6B,YJtBN;;AIyB3B;EAAkB;;AAElB;EACI,OJ1GQ;EI2GR;EACA;;AAEA;EACI,OJ/GI;EIgHJ,kBJ7Bc;;AIiCtB;EACI;EACA;EACA;EACA,OJxHQ;;AI0HR;EAAU,YJvCQ;;AIyClB;EAAU,YJxCQ;;;AI4C1B;EACI,YJjEkB;EIkElB,eHvHY;EGwHZ,OJrEe;;;AK9DnB;EHCoB;EGChB;EACA;EACA,eJWU;;AITV;EACI,YLqBQ;EKpBR,SC8Bc;;AD3BlB;EAAe;;;AAGnB;EACI,YL2FY;EK1FZ,eJTS;EIUT;;AAEA;EACI;EACA,OLZc;;AKelB;EAAgC,OLkCf;;AK/Bb;EACI,OLiCgB;EKhChB;;AAIR;EACI;EACA,OLuBa;EKtBb;;AAGJ;EAAa;;AAEb;EHiBA;EACA;EACA;EGjBI,YL+DQ;EK9DR,OLca;EKbb;EACA;EACA;EACA;;AAEA;EACI,OLSgB;EKRhB,YLIW;;AKFX;EACI,OLIW;EKHX,YLDM;;AKKd;EACI,OLFe;EKGf,YLPU;;AKWlB;EACI,OLdK;EKeL;;AAEA;EACI,OLjBO;EKkBP;;AAGJ;EAAM;;AAEN;EAAO;;AAGX;EACI;EACA;;AAEA;EACI;EACA;;AAEA;EAAe;;AAIvB;EHxFgB;EG0FZ,eJvFK;EIwFL,SC5DW;;AD8DX;EAAiB;;AAEjB;EH/FY;;AGkGR;EAAY;;AAIpB;EACI,OLnGQ;EKoGR,YLlFQ;EKmFR;;AAEA;EACI,YLtFI;EKuFJ;;AAGJ;EAAc;;AAGlB;EACI,YLdQ;EKeR,OL/Da;EKgEb;EACA;EACA;;AAEA;EAAO;;;AAIf;EACI,OLnIY;EKoIZ,YL/GO;EKgHP;EACA;EACA;;;AAGJ;EACI,OLnIY;EKoIZ,YLvHO;EKwHP;EACA,eJ/GqB;;AIiHrB;EAAU,YLnHQ;;AKqHlB;EACU,YLrHS;;AKuHnB;EACI;EACA;;AAIA;EACI,OLpJI;EKqJJ,YLrIW;;AKuIX;EAAU,YLtIO;;AKwIjB;EAAM,OL5GL;;AK+GL;EACI,OL7JI;;AK+JJ;EAAM,OLlHL;;AKsHT;EAAM,OLtHG;;;AK0HT;EACI,OLhLQ;EKiLR;EACA;;AAGJ;EAAmB;;;AAGvB;EHpLoB;EGsLhB,YLhFY;EKiFZ,OLjIiB;EKkIjB;;AAEA;EAAO;;AAEP;EAAiB;;;AAGrB;EACI;EACA,YL3KY;;AK6KZ;EAAe;;;AAGnB;EAEI;;;AAGJ;EACI,OL1MiB;EK2MjB,YLvLY;EKwLZ,eJ3MS;;AI6MT;EAAiB,OLxMH;;;AK2MlB;EACI,OLjNmB;EKkNnB,YL/LY;EKgMZ;;;AAGJ;EACI;EACA;EACA,YLjMqB;;AKmMrB;EACI,YLvMQ;;AKyMR;EAAwC,OL1N9B;;AK6Nd;EAAY,YLxOA;;AK0OZ;EAAY;;AAEZ;EACI;;AAEA;EACI;EACA,OLtOM;;AKyOV;EAEI,OLhPS;EKiPT;;;AAQJ;EACI,OL3Hc;;AK6Hd;EAAI,OL7HU;;AK+Hd;EAAI,OL9HY;;AKiIpB;EAAyB,OLlIP;;AKqItB;EACI,OLtIkB;;AKwIlB;EACI,YLrIU;;AKuIV;EAAY,YLxIM;;AK2ItB;EACU,OL7IG;;;AKiJrB;EAAY;;;AAEZ;EACI,OLtOS;EKuOT;;AAEA;EAAU,YLvQQ;;;AK0QtB;EACI,YL7QO;EK8QP,OL3RY;EK4RZ,SC9PkB;;ADgQlB;EACI,YLlRG;EKmRH;EACA;EACA;;AAGJ;EACI;;AAEA;EACI,OL1SW;EK2SX;EACA;;AAGJ;EAAI,OL9SI;;AKgTR;EAAM,OL1SI;;AK6Sd;EACI,YLvSG;EKwSH;EACA,SCxRc;;AD0Rd;EACI,OLjUI;EKkUJ;EACA;EACA;EACA;;;AAMR;EACI,OL5UQ;EK6UR;EACA;EACA;;AAEA;EAAM;;AAGV;EACI;EACA;;AAEA;EACI,OLlVW;EKmVX;;AAEA;EAAI,OLtVK;;AKyVb;EACI;EACA;EACA,OL3VW;;AK8Vf;EACI,QLtWI;EKuWJ,MLvWI;EKwWJ;;;AAMR;EACI,OLvWQ;EKwWR;;;AAIR;EACI,YL3VY;EK4VZ;;AAEA;EAAe,OLlXE;;AKoXjB;EACI;EACA;;AAEA;EAAY,YL9XJ;;AKiYZ;EACI,OL1XQ;EK2XR;EACA;;AAEA;EH5UJ;EACA;EACA;EG4UQ;EACA;EACA;EACA;;AAGJ;EAAO;;;AAIf;EAAkC;;;AAIlC;EACI;EACA;;AAEA;EACI,OLtWK;EKuWL;;AAEA;EAAU,OLxWC;;AK0WX;EAAW,OLhaH;;AKmaZ;EACI,YLhYe;EKiYf;EACA;;AAEA;EACI,kBLlYoB;;AKoYpB;EAA8B,OL3a1B;;AK6aJ;EAAU,kBLtYU;;AKyYxB;EACI;EACA;EACA;;AAGJ;EACI;EACA;EACA,OLlbW;;AKqbf;EAAU,YLtZW;;;AK2ZzB;EACI,YLxVQ;EKyVR;EACA;EACA,SClaW;;ADoaX;EACI,YL9VI;EK+VJ,OL/YS;EKgZT;;AAEA;EAAO;;AAEP;EACI,OLrZK;EKsZL;;AAEA;EACU;;AAEV;EAAU,YLlWK;;AKqWnB;EAAU,YLtWS;;AK0W3B;EACI,OLtde;EKudf;EACA;;AAGJ;EAAwB;;;AAIxB;EAAwB,OL7aN;;;AKgbtB;EACI,OLleY;EKmeZ,kBL7bqB;EK8brB;EACA;EACA;EACA;;;AAGJ;EAA2B,OL3eJ;;;AOLnB;ELEgB;EKAZ,YPsGQ;EOrGR,eNNS;EMOT;;AAEA;EAAe,YP0GQ;;AOxGvB;AAAA;EAEI,OPHU;;AOKV;AAAA;EACI,YPmGe;EOlGf;;AAIR;EACI;EACA;EACA;;AAEA;EAAU,YPyFS;;AOtFvB;EAAyB;;AAG7B;EAAmB;;AAEnB;EACI;EACA;EACA,OP5BQ;;AO8BR;EAAK,OP9BG;;AOgCR;EAAO,OPjCQ;;AOmCf;EAAuB,OPlCf;;AOqCJ;EAAM,MPQL;;AOND;EAAc,MPOP;;;AQtDnB;EAAc;;;AAGV;ENCgB;EMCZ,YRqGQ;EQpGR,ePPS;EOQT;EACA,SF2BW;;AEzBX;EAAI;;AAEJ;EACI,YR0CU;EQzCV;;AAIR;EACI,ORuCa;EQtCb;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EAAU,OR8BS;;AQ3BvB;EN/BgB;EMiCZ,ePnBM;;AOsBV;EACI,YRZQ;EQaR,SFDc;;AEGd;EACI,YRhBI;EQiBJ;;AAGJ;EAAc,YRpBN;;;AQyBZ;EACI,YRuDW;EQtDX,ORzCU;EQ0CV,ePnDY;EOoDZ;EACA,SFrBW;;AEuBX;ENxDY;EM0DR,YRvCD;EQwCC,ORvDS;;AQ4Db;EAAiB,ORtDP;;AQ0DV;EACI,ORlBC;EQmBD;EACA;EACA;EACA;EACA;EACA;;AAEA;EAAW;;AAEX;EACI;EACA;;AAEJ;EACI;EACA;EACA;;;AAMhB;EN5FoB;EM8FhB,YR3EO;EQ4EP;EACA;EACA;EACA,ORxFc;;AQ0Fd;EACI,ORhGe;;AQmGnB;EACI,ORrGa;;;AQ0GjB;EACI,OR1Ge;EQ2Gf,kBRxFQ;EQyFR;;AAEA;EAAM;;AAIN;EACI,YRhGI;EQiGJ;EACA;EACA,OR7HI;;AQ+HJ;EAAM;;;AAKlB;EACI,OR9HmB;EQ+HnB;;AAEA;EACI,ORjIQ;;AQoIZ;EACI;EACA;EACA;;AAEA;EACI,OR5FO;EQ6FP,YR3FW;;;AQgGvB;EACI;EACA;;;AAGJ;EAAe;;;AAEf;ENvJoB;EMyJhB,YR3IY;EQ4IZ;EACA,eP5IU;;AO8IV;EAAW;;AAEX;EACI;EACA;EACA,YRpJQ;EQqJR,ORnKQ;;AQqKR;EACI,YRvJU;EQwJV,ORvKI;;AQ2KZ;EACI;EACA;;;AAMA;EACI,YRlKI;EQmKJ,ORrLI;EQsLJ,eP/KE;;AOiLF;EAAiB,ORpLX;;AQuLV;ENlMY;EMoMR,YR/KI;EQgLJ,OR9LI;EQ+LJ,ePxLE;EOyLF;EACA;;AAEA;EACI;EACA;;AAEA;EAAU,YRxLJ;;AQ0LN;EAEW,YR3LJ;;AQiMf;EAA2B;;AAE3B;EACI,ORpNI;EQqNJ,YRnMI;EQoMJ;EACA;;AAEA;EAAiB,ORrNX;;AQ0N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EQLZ,YVmBQ;EUlBR,eTmBM;;AShBV;ERCgB;EQCZ,YVaQ;EUZR,eTaM;;ASXN;EACI;;;AAKZ;EACI;EACA;EACA,OVbY;;AUeZ;EACI;;AAEA;EACI,YVLI;;AUSZ;EACI,OVzBe;EU0Bf;;AAEA;EAAQ,kBVnCA;;AUqCR;EAAa,OViBF;;AUfX;EAAU,OVeC;;AUZf;EACI,YVrBQ;;AUuBR;EACI;EACA;EACA,YV2DO;EU1DP,OVzCI;EU0CJ;EACA,eThDQ;;ASkDR;ERnDQ;EQqDJ,YVlCL;;AUuCP;EACI;EACA,YVxCQ;;AU4CR;EACI;EACA,YV9CI;;AUiDR;EAAkC,kBVhBpB;;AUmBlB;EAAe,OVnEI;;;AWEnB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;EAAgB,OX4CP;;;AWzCb;EAAc;;;AAEd;EACI,YXfY;EWgBZ;EACA;EACA;;;ACjBJ;EACI,eXyBW;;AWvBX;EAAU,eXuBC;;;AWnBX;EACI;EACA,OZoDW;EYnDX;EACA;EACA;EACA;EACA;EACA;;AAEA;EACI,YZ8CgB;EY7ChB,OZ2Ca;;AYxCjB;EACI;EACA;;;AAMR;EACI,YZgCc;EY/Bd,OZ6BW;EY5BX;EACA;EACA;EACA;EACA;;AAEA;EAAM;;AAGV;EACI,kBZiFqB;;AY/ErB;EAAY,kBZgFgB;;AY7EhC;EACI;;AAEA;EAAI,OZUO;;;AYLf;EACI;EACA;;AAIA;EACI;EACA;;AAGJ;EACI;EACA;;AAGJ;EACI,YZ1EI;EY2EJ;;AAGJ;EVlDqB;EUoDjB,kBZhFI;EYiFJ;;AAKJ;EACI;EACA;;AAGJ;EACI,YZ5FI;EY6FJ;;AAGJ;EVpEqB;EUsEjB,kBZlGI;EYmGJ;;AAIR;EAAkB;;AAElB;EAAoB;;;ACxGxB;EXuBqB;EWrBjB,YbuBY;EatBZ,ObIY;EaHZ,eZcY;;AYZZ;EACI;EACA;;AAGJ;EACI;EACA,YbYQ;EaXR;;AAGJ;EACI;EACA,ObpBQ;EaqBR;EACA;;AAEA;EACI,ObzBI;Ea0BJ,YbyDc;;AatDlB;EAEI,Ob/BI;EagCJ,kBboDc;;;Aa/C1B;EACI,YbZY;EaaZ,eZxBU;;AY0BV;EACI,OblCQ;EamCR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","file":"build.css"} \ No newline at end of file diff --git a/docs/customization_guide.md b/docs/customization_guide.md index 921e21a..bac5500 100644 --- a/docs/customization_guide.md +++ b/docs/customization_guide.md @@ -18,7 +18,17 @@ There are two types of profiles, color scheme and layout profile. You can config ### Float search bar when cursor hovers -Search bar floats when cursor hovers (mouseover operation) and changes the background color into focusing one. Copy `// Search bar hover settings` section in [`base_config.scss`](../src/mastodon-material/theme/base_config.scss) and paste it into [`custom_config.scss`](../src/mastodon-material/custom_config.scss). Then, uncomment the whole section to enable it. +search-bar hover +Search bar floats when cursor hovers (mouseover operation) and changes the background color into focusing one. Add `$search-bar-hover: true;` to [`custom_config.scss`](../src/mastodon-material/custom_config.scss). + +### Change font size +You can change font size of statuses body and display name. Set `$status-font-size` value to change font size of statuses contents and `$name-font-size` value to change of display name. + +### Set background image +You can set a background image by `$bg-image` value. You should use relative path or URL and bracket it. + +### Change transparency +You can change transparency of some elements. Change top bar and column transparency by setting `$bar-transparency` and `$column-transparency` value. Set a value between 0 and 1. 1 is opacity and 0 is transparent. ## Icon settings @@ -26,19 +36,23 @@ Edit [`mastodon-material/icon_config.scss`](../src/mastodon-material/icon_config ### Change favorite icon -Edit `// Favorite icon settings` section to change it. Default icon is ★ (star). +Edit `// Favorite icon settings` section to change it. The default icon is ★ (star). -### Change icon font's host +### Change icon fonts host -Default setting loads the icon font on GitHub [official repository](https://github.com/google/material-design-icons). Edit `// Material Design Icon settings` section to change it. +The default setting loads the icon fonts on Google Fonts. Edit `// Material Design Icon settings` section to change it. -- **Use the font on Google Fonts** +- **Use the font on GitHub (Unrecommended)** - Uncomment `// Google Fonts` line and comment out `// GitHub` line. + Set `$icon-font-source` value as `github`. - **Host the font on your server** - Uncomment `// Self-hosting` line and comment out `// GitHub` line. Then, download font file from [official font repository](https://raw.githubusercontent.com/google/material-design-icons/master/iconfont/MaterialIcons-Regular.woff2) and put `MaterialIcons-Regular.woff2` file into `/mastodon/app/javascript/fonts`. + Set `$icon-font-source` value as `self`. Then, download font file from [official font repository](https://github.com/google/material-design-icons/tree/master/font) and put `MaterialIcons-Regular.woff2` file into `/mastodon/app/javascript/fonts`. + +### Change icon fonts style + +The icon fonts have 5 styles, Filled, Outlined, Rounded, Two-Tone and Sharp. You can check how they look in [Icons - Material Design](https://material.io/resources/icons/). Edit `// Material Icon style settings` section to change it. The default style is Filled. ## Plugins diff --git a/docs/customization_guide_ja.md b/docs/customization_guide_ja.md index 071d340..4aeb379 100644 --- a/docs/customization_guide_ja.md +++ b/docs/customization_guide_ja.md @@ -18,7 +18,17 @@ ### 検索バーをホバー時に浮き上がらせる -検索バーをホバー(マウスオーバー)時に浮き上がらせ、背景色をフォーカス時と同じ色にします。[`base_config.scss`](../src/mastodon-material/theme/base_config.scss)の`// Search bar hover settings`セクションを[`custom_config.scss`](../src/mastodon-material/custom_config.scss)にコピペして、アンコメント(有効化)してください。 +search-bar hover +検索バーをホバー(マウスオーバー)時に浮き上がらせ、背景色をフォーカス時と同じ色にします。[`custom_config.scss`](../src/mastodon-material/custom_config.scss)に`$search-bar-hover: true;`と追記してください。 + +### 文字サイズの変更 +トゥート本文やユーザー名の文字サイズを変更できます。`$status-font-size`の値でトゥート本文の文字サイズを、`$name-font-size`の値で表示名の文字サイズを変更できます。 + +### 背景画像の設定 +`$bg-image`の値で背景画像を設定できます。値は相対パスやURLを取ることができ、`""`で囲います。 + +### 透明度の設定 +透明度を設定できます。`$bar-transparency`でトップバーの、`$column-transparency`でカラムの透明度を変更できます。0から1までの間の値で設定します。1で不透明、0で透明です。 ## アイコン設定 @@ -30,15 +40,19 @@ ### アイコンフォントのホストを変更したい -デフォルトではGitHub上の[公式リポジトリ](https://github.com/google/material-design-icons)にあるフォントを利用する設定になっています。`// Material Design Icon settings`セクションを編集します。 +デフォルトではGoogle Fontsを利用する設定になっています。`// Material Design Icon settings`セクションを編集します。 -- **Google Fontsのフォントを利用したい** +- **GitHub公式リポジトリのフォントを利用したい(非推奨)** - `// Google Fonts`の行をアンコメントし、`// GitHub`の行をコメントアウトします。 + `$icon-font-source`の値を`github`に設定します。 - **自分のサーバーでホスティングしたい** - 1.と同様に`// Self-hosting`の行をアンコメントし、`// GitHub`の行をコメントアウトします。[フォントの公式レポジトリ](https://raw.githubusercontent.com/google/material-design-icons/master/iconfont/MaterialIcons-Regular.woff2)からダウンロードしてきた`MaterialIcons-Regular.woff2`ファイルを`/mastodon/app/javascript/fonts`に配置します。 + `$icon-font-source`の値を`self`に設定します。[フォントの公式レポジトリ](https://github.com/google/material-design-icons/tree/master/font)からダウンロードしてきたフォントファイルを`/mastodon/app/javascript/fonts`に配置します。 + +### アイコンフォントのスタイルを変更したい + +アイコンフォントにはFilled, Outlined, Rounded, Two-Tone, Sharpの5種類のスタイルがあります。実際のスタイルは[Icons - Material Design](https://material.io/resources/icons/)から確認できます。`// Material Icon style settings`セクションを編集します。デフォルトはFilledです。 ## プラグイン diff --git a/docs/development_policy_ja.md b/docs/development_policy_ja.md index d0cd7fa..8130b86 100644 --- a/docs/development_policy_ja.md +++ b/docs/development_policy_ja.md @@ -22,6 +22,6 @@ UI設計は、mastodon側の実装の問題により準拠できない場合を - [ ] ログイン -- [ ] トゥート詳細 +- [x] トゥート詳細 - [ ] アニメーション diff --git a/docs/res/search-bar-hover.gif b/docs/res/search-bar-hover.gif new file mode 100644 index 0000000..40b98c1 Binary files /dev/null and b/docs/res/search-bar-hover.gif differ diff --git a/docs/res/timeline/mastodon-dark.png b/docs/res/timeline/mastodon-dark.png deleted file mode 100644 index d01b4bd..0000000 Binary files a/docs/res/timeline/mastodon-dark.png and /dev/null differ diff --git a/docs/res/timeline/mastodon-light.png b/docs/res/timeline/mastodon-light.png deleted file mode 100644 index d134d56..0000000 Binary files a/docs/res/timeline/mastodon-light.png and /dev/null differ diff --git a/docs/res/timeline/v1-dark.png b/docs/res/timeline/v1-dark.png deleted file mode 100644 index 88797cb..0000000 Binary files a/docs/res/timeline/v1-dark.png and /dev/null differ diff --git a/docs/res/timeline/v1-light.png b/docs/res/timeline/v1-light.png deleted file mode 100644 index 83477aa..0000000 Binary files a/docs/res/timeline/v1-light.png and /dev/null differ diff --git a/docs/res/timeline/v2-dark.png b/docs/res/timeline/v2-dark.png deleted file mode 100644 index 9cb856b..0000000 Binary files a/docs/res/timeline/v2-dark.png and /dev/null differ diff --git a/docs/res/timeline/v2-light.png b/docs/res/timeline/v2-light.png deleted file mode 100644 index 24c7296..0000000 Binary files a/docs/res/timeline/v2-light.png and /dev/null differ diff --git a/docs/res/top.png b/docs/res/top.png new file mode 100644 index 0000000..003140d Binary files /dev/null and b/docs/res/top.png differ diff --git a/src/mastodon-material/color/black.scss b/src/mastodon-material/color/black.scss index b299981..b4b29f8 100644 --- a/src/mastodon-material/color/black.scss +++ b/src/mastodon-material/color/black.scss @@ -1,6 +1,8 @@ @charset "UTF-8"; +$color-scheme: dark; + // Base color $primary-color: #4285f4; $secondary-color: #db4437; @@ -23,28 +25,29 @@ $search-bar-text-color: $inverted-text-color; $contained-button-text-color: #ffffff; // Background-color -$background-color: #000000; -$menu-background-color: #121212; -$menu-background-hover-color: lighten($menu-background-color, 6%); -$menu-background-active-color: lighten($menu-background-color, 10%); -$menu-background-active-hover-color: lighten($menu-background-color, 16%); -$card-background-color: #121212; -$card-background-hover-color: lighten($card-background-color, 6%); -$card-background-inactive-color: lighten($card-background-color, 10%); -$list-background-color: #000000; -$list-background-hover-color: lighten($list-background-color, 6%); -$list-background-active-color: lighten($list-background-color, 10%); -$list-background-inactive-color: lighten($list-background-color, 10%); -$text-field-background-color: $card-background-color; -$verified-background-color: darken($verified-color, 20%); +$bg-color: #000000; +$menu-bg-color: #121212; +$menu-bg-hover-color: lighten($menu-bg-color, 6%); +$menu-bg-active-color: lighten($menu-bg-color, 10%); +$menu-bg-active-hover-color: lighten($menu-bg-color, 16%); +$card-bg-color: #121212; +$card-bg-hover-color: lighten($card-bg-color, 6%); +$list-bg-color: #000000; +$list-bg-hover-color: lighten($list-bg-color, 6%); +$list-bg-active-color: lighten($list-bg-color, 10%); +$list-bg-inactive-color: lighten($list-bg-color, 10%); +$text-field-bg-color: $card-bg-color; +$verified-bg-color: darken($verified-color, 20%); // Chip color $contained-chip-color: #1e1e1e; +$chip-selected-text-color: $primary-color; $contained-chip-hover-color: lighten($contained-chip-color, 6%); -$contained-chip-selected-color: lighten($contained-chip-color, 12%); +$contained-chip-selected-color: transparentize($chip-selected-text-color, 0.7); $outlined-chip-color: #121212; $outlined-chip-hover-color: lighten($outlined-chip-color, 6%); -$outlined-chip-selected-color: lighten($outlined-chip-color, 12%); +$outlined-chip-selected-color: transparentize($chip-selected-text-color, 0.8); +$outlined-chip-selected-border-color: transparentize($chip-selected-text-color, 0.7); // Relationship tag color $relationship-tag-color: transparentize(#2e2e2e, 0.2); @@ -55,19 +58,23 @@ $badge-color: $primary-color; // Icon color $icon-color: #e2e2e3; -$icon-hover-color: lighten($icon-color, 30%); -$icon-background-hover-color: transparentize(#ffffff, 0.8); -$icon-background-active-color: transparentize(#ffffff, 0.7); -$disabled-icon-color: lighten($icon-color, 16%); +$icon-hover-color: #ffffff; +$icon-bg-hover-color: transparentize(#ffffff, 0.8); +$icon-bg-active-color: transparentize(#ffffff, 0.7); +$disabled-icon-color: darken($icon-color, 16%); $top-bar-icon-color: $icon-color; $top-bar-icon-hover-color: $icon-hover-color; $top-bar-icon-active-color: $primary-color; $top-bar-unread-icon-color: $secondary-color; $media-icon-color: transparentize(#ffffff, 0.4); $media-icon-hover-color: transparentize(#ffffff, 0.2); -$media-icon-background-color: transparentize(#000000, 0.5); -$media-icon-background-hover-color: transparentize(#000000, 0.8); +$media-icon-bg-color: transparentize(#000000, 0.5); +$media-icon-bg-hover-color: transparentize(#000000, 0.8); + +// Control color $control-border-color: $icon-color; +$control-border-active-color: $primary-color; +$control-border-hover-color: transparentize($control-border-active-color, 0.8); // Button color $icon-button-color: $icon-color; @@ -98,7 +105,7 @@ $border-color: #1e1e1e; $border-active-color: lighten($border-color, 30%); // Scroll bar color -$scroll-bar-thumb-color: lighten($background-color, 20%); +$scroll-bar-thumb-color: lighten($bg-color, 20%); $scroll-bar-thumb-hover-color: lighten($scroll-bar-thumb-color, 10%); $scroll-bar-thumb-active-color: lighten($scroll-bar-thumb-color, 18%); @@ -110,26 +117,28 @@ $search-bar-focus-color: #ffffff; // Tab color $tab-indicator-color: $top-bar-icon-color; $tab-indicator-active-color: $top-bar-icon-color; -$tab-background-color: $top-bar-color; -$tab-indicator-background-hover-color: transparentize($tab-indicator-active-color, 0.9); -$tab-indicator-background-focus-color: transparentize($tab-indicator-active-color, 0.8); +$tab-bg-color: $top-bar-color; +$tab-indicator-bg-hover-color: transparentize($tab-indicator-active-color, 0.9); +$tab-indicator-bg-focus-color: transparentize($tab-indicator-active-color, 0.8); $text-tab-indicator-color: $secondary-text-color; $text-tab-indicator-active-color: $ui-text-color; -$text-tab-background-color: #121212; -$text-tab-indicator-background-hover-color: transparentize($text-tab-indicator-active-color, 0.9); -$text-tab-indicator-background-focus-color: transparentize($text-tab-indicator-active-color, 0.8); +$text-tab-bg-color: #121212; +$text-tab-indicator-bg-hover-color: transparentize($text-tab-indicator-active-color, 0.9); +$text-tab-indicator-bg-focus-color: transparentize($text-tab-indicator-active-color, 0.8); +$icon-tab-indicator-active-color: $primary-color; +$icon-tab-indicator-hover-color: $icon-hover-color; // Media indicator color $media-page-indicator-color: #9e9e9e; $media-page-indicator-active-color: #e6e6e6; -// Poll chart color -$poll-bar-leading-color: $primary-color; -$poll-bar-color: lighten($poll-bar-leading-color, 30%); +// Progress indicator color +$progress-indicator-color: $primary-color; +$progress-indicator-track-color: lighten($progress-indicator-color, 30%); // Contents color in read status $read-primary-text-color: transparentize($primary-text-color, 0.3); $read-secondary-text-color: transparentize($secondary-text-color, 0.3); $read-ui-text-color: transparentize($ui-text-color, 0.3); -$read-poll-bar-leading-color: transparentize($poll-bar-leading-color, 0.3); -$read-poll-bar-color: transparentize($poll-bar-color, 0.3); \ No newline at end of file +$read-poll-bar-leading-color: transparentize($progress-indicator-color, 0.3); +$read-poll-bar-color: transparentize($progress-indicator-track-color, 0.3); \ No newline at end of file diff --git a/src/mastodon-material/color/mastodon-dark.scss b/src/mastodon-material/color/mastodon-dark.scss index c3c1683..c765e86 100644 --- a/src/mastodon-material/color/mastodon-dark.scss +++ b/src/mastodon-material/color/mastodon-dark.scss @@ -1,6 +1,8 @@ @charset "UTF-8"; +$color-scheme: dark; + // Base color $primary-color: #2b90d9; $secondary-color: #2b90d9; @@ -23,28 +25,29 @@ $search-bar-text-color: $inverted-text-color; $contained-button-text-color: #ffffff; // Background-color -$background-color: #191b22; -$menu-background-color: #d9e1e8; -$menu-background-hover-color: lighten($menu-background-color, 6%); -$menu-background-active-color: lighten($menu-background-color, 10%); -$menu-background-active-hover-color: lighten($menu-background-color, 16%); -$card-background-color: #313543; -$card-background-hover-color: lighten($card-background-color, 6%); -$card-background-inactive-color: lighten($card-background-color, 10%); -$list-background-color: #282c37; -$list-background-hover-color: lighten($list-background-color, 6%); -$list-background-active-color: lighten($list-background-color, 10%); -$list-background-inactive-color: lighten($list-background-color, 10%); -$text-field-background-color: $card-background-color; -$verified-background-color: darken($verified-color, 20%); +$bg-color: #191b22; +$menu-bg-color: #d9e1e8; +$menu-bg-hover-color: lighten($menu-bg-color, 6%); +$menu-bg-active-color: lighten($menu-bg-color, 10%); +$menu-bg-active-hover-color: lighten($menu-bg-color, 16%); +$card-bg-color: #313543; +$card-bg-hover-color: lighten($card-bg-color, 6%); +$list-bg-color: #282c37; +$list-bg-hover-color: lighten($list-bg-color, 6%); +$list-bg-active-color: lighten($list-bg-color, 10%); +$list-bg-inactive-color: lighten($list-bg-color, 10%); +$text-field-bg-color: $card-bg-color; +$verified-bg-color: darken($verified-color, 20%); // Chip color $contained-chip-color: #42485a; +$chip-selected-text-color: $primary-color; $contained-chip-hover-color: lighten($contained-chip-color, 6%); -$contained-chip-selected-color: lighten($contained-chip-color, 12%); +$contained-chip-selected-color: transparentize($chip-selected-text-color, 0.7); $outlined-chip-color: #393f4f; $outlined-chip-hover-color: lighten($outlined-chip-color, 6%); -$outlined-chip-selected-color: lighten($outlined-chip-color, 12%); +$outlined-chip-selected-color: transparentize($chip-selected-text-color, 0.8); +$outlined-chip-selected-border-color: transparentize($chip-selected-text-color, 0.7); // Relationship tag color $relationship-tag-color: transparentize(#42485a, 0.2); @@ -56,8 +59,8 @@ $badge-color: $primary-color; // Icon color $icon-color: #9baec8; $icon-hover-color: lighten($icon-color, 30%); -$icon-background-hover-color: lighten($background-color, 14%); -$icon-background-active-color: lighten($background-color, 18%); +$icon-bg-hover-color: lighten($bg-color, 14%); +$icon-bg-active-color: lighten($bg-color, 18%); $disabled-icon-color: lighten($icon-color, 16%); $top-bar-icon-color: #fff; $top-bar-icon-hover-color: $icon-hover-color; @@ -65,9 +68,13 @@ $top-bar-icon-active-color: $icon-hover-color; $top-bar-unread-icon-color: $secondary-color; $media-icon-color: transparentize(#ffffff, 0.4); $media-icon-hover-color: transparentize(#ffffff, 0.2); -$media-icon-background-color: transparentize(#000000, 0.5); -$media-icon-background-hover-color: transparentize(#000000, 0.8); +$media-icon-bg-color: transparentize(#000000, 0.5); +$media-icon-bg-hover-color: transparentize(#000000, 0.8); + +// Control color $control-border-color: $icon-color; +$control-border-active-color: $primary-color; +$control-border-hover-color: transparentize($control-border-active-color, 0.8); // Button color $icon-button-color: $icon-color; @@ -98,9 +105,9 @@ $border-color: #393f4f; $border-active-color: lighten($border-color, 30%); // Scroll bar color -$scroll-bar-thumb-color: lighten($background-color, 16%); -$scroll-bar-thumb-hover-color: lighten($background-color, 26%); -$scroll-bar-thumb-active-color: lighten($background-color, 32%); +$scroll-bar-thumb-color: lighten($bg-color, 16%); +$scroll-bar-thumb-hover-color: lighten($bg-color, 26%); +$scroll-bar-thumb-active-color: lighten($bg-color, 32%); // App bar color $top-bar-color: #313543; @@ -110,26 +117,28 @@ $search-bar-focus-color: #ffffff; // Tab color $tab-indicator-color: #d9e1e8; $tab-indicator-active-color: $top-bar-icon-color; -$tab-background-color: #1f232b; -$tab-indicator-background-hover-color: transparentize($tab-indicator-active-color, 0.9); -$tab-indicator-background-focus-color: transparentize($tab-indicator-active-color, 0.8); +$tab-bg-color: #1f232b; +$tab-indicator-bg-hover-color: transparentize($tab-indicator-active-color, 0.9); +$tab-indicator-bg-focus-color: transparentize($tab-indicator-active-color, 0.8); $text-tab-indicator-color: $tab-indicator-color; $text-tab-indicator-active-color: $tab-indicator-active-color; -$text-tab-background-color: $tab-background-color; -$text-tab-indicator-background-hover-color: transparentize($text-tab-indicator-active-color, 0.9); -$text-tab-indicator-background-focus-color: transparentize($text-tab-indicator-active-color, 0.8); +$text-tab-bg-color: $tab-bg-color; +$text-tab-indicator-bg-hover-color: transparentize($text-tab-indicator-active-color, 0.9); +$text-tab-indicator-bg-focus-color: transparentize($text-tab-indicator-active-color, 0.8); +$icon-tab-indicator-active-color: $primary-color; +$icon-tab-indicator-hover-color: $icon-hover-color; // Media indicator color $media-page-indicator-color: #9e9e9e; $media-page-indicator-active-color: #e6e6e6; -// Poll chart color -$poll-bar-leading-color: $primary-color; -$poll-bar-color: lighten($poll-bar-leading-color, 30%); +// Progress indicator color +$progress-indicator-color: $primary-color; +$progress-indicator-track-color: lighten($progress-indicator-color, 30%); // Contents color in read status $read-primary-text-color: transparentize($primary-text-color, 0.3); $read-secondary-text-color: transparentize($secondary-text-color, 0.3); $read-ui-text-color: transparentize($ui-text-color, 0.3); -$read-poll-bar-leading-color: transparentize($poll-bar-leading-color, 0.3); -$read-poll-bar-color: transparentize($poll-bar-color, 0.3); \ No newline at end of file +$read-poll-bar-leading-color: transparentize($progress-indicator-color, 0.3); +$read-poll-bar-color: transparentize($progress-indicator-track-color, 0.3); \ No newline at end of file diff --git a/src/mastodon-material/color/mastodon-light.scss b/src/mastodon-material/color/mastodon-light.scss index 54d894f..6c2fef5 100644 --- a/src/mastodon-material/color/mastodon-light.scss +++ b/src/mastodon-material/color/mastodon-light.scss @@ -1,6 +1,8 @@ @charset "UTF-8"; +$color-scheme: light; + // Base color $primary-color: #2b90d9; $secondary-color: #2b90d9; @@ -22,28 +24,29 @@ $search-bar-text-color: $primary-text-color; $contained-button-text-color: #ffffff; // Background-color -$background-color: #eff3f5; -$menu-background-color: $background-color; -$menu-background-hover-color: darken($background-color, 6%); -$menu-background-active-color: darken($background-color, 10%); -$menu-background-active-hover-color: darken($background-color, 16%); -$card-background-color: #ffffff; -$card-background-hover-color: darken($card-background-color, 6%); -$card-background-inactive-color: darken($card-background-color, 10%); -$list-background-color: #ffffff; -$list-background-hover-color: darken($list-background-color, 6%); -$list-background-active-color: darken($list-background-color, 10%); -$list-background-inactive-color: darken($list-background-color, 10%); -$text-field-background-color: $card-background-color; -$verified-background-color: lighten($verified-color, 20%); +$bg-color: #eff3f5; +$menu-bg-color: $bg-color; +$menu-bg-hover-color: darken($bg-color, 6%); +$menu-bg-active-color: darken($bg-color, 10%); +$menu-bg-active-hover-color: darken($bg-color, 16%); +$card-bg-color: #ffffff; +$card-bg-hover-color: darken($card-bg-color, 6%); +$list-bg-color: #ffffff; +$list-bg-hover-color: darken($list-bg-color, 6%); +$list-bg-active-color: darken($list-bg-color, 10%); +$list-bg-inactive-color: darken($list-bg-color, 10%); +$text-field-bg-color: $card-bg-color; +$verified-bg-color: lighten($verified-color, 20%); // Chip color $contained-chip-color: #e0e0e0; +$chip-selected-text-color: $primary-color; $contained-chip-hover-color: darken($contained-chip-color, 6%); -$contained-chip-selected-color: darken($contained-chip-color, 12%); +$contained-chip-selected-color: transparentize($chip-selected-text-color, 0.7); $outlined-chip-color: #ffffff; $outlined-chip-hover-color: darken($outlined-chip-color, 6%); -$outlined-chip-selected-color: darken($outlined-chip-color, 12%); +$outlined-chip-selected-color: transparentize($chip-selected-text-color, 0.8); +$outlined-chip-selected-border-color: transparentize($chip-selected-text-color, 0.7); // Relationship tag color $relationship-tag-color: transparentize(#e0e0e0, 0.2); @@ -55,8 +58,8 @@ $badge-color: $primary-color; // Icon color $icon-color: #282c37; $icon-hover-color: darken($icon-color, 30%); -$icon-background-hover-color: darken($background-color, 4%); -$icon-background-active-color: darken($background-color, 8%); +$icon-bg-hover-color: darken($bg-color, 4%); +$icon-bg-active-color: darken($bg-color, 8%); $disabled-icon-color: lighten($icon-color, 16%); $top-bar-icon-color: $icon-color; $top-bar-icon-hover-color: $icon-hover-color; @@ -64,9 +67,13 @@ $top-bar-icon-active-color: $icon-hover-color; $top-bar-unread-icon-color: $secondary-color; $media-icon-color: transparentize(#ffffff, 0.4); $media-icon-hover-color: transparentize(#ffffff, 0.2); -$media-icon-background-color: transparentize(#000000, 0.5); -$media-icon-background-hover-color: transparentize(#000000, 0.8); +$media-icon-bg-color: transparentize(#000000, 0.5); +$media-icon-bg-hover-color: transparentize(#000000, 0.8); + +// Control color $control-border-color: $icon-color; +$control-border-active-color: $primary-color; +$control-border-hover-color: transparentize($control-border-active-color, 0.8); // Button color $icon-button-color: $icon-color; @@ -104,31 +111,33 @@ $scroll-bar-thumb-active-color: darken($scroll-bar-thumb-color, 18%); // App bar color $top-bar-color: #ffffff; $search-bar-color: #d9e1e8; -$search-bar-focus-color: $background-color; +$search-bar-focus-color: $bg-color; // Tab color $tab-indicator-color: #282c37; $tab-indicator-active-color: $top-bar-icon-color; -$tab-background-color: #e6ebf0; -$tab-indicator-background-hover-color: transparentize($tab-indicator-active-color, 0.9); -$tab-indicator-background-focus-color: transparentize($tab-indicator-active-color, 0.8); +$tab-bg-color: #e6ebf0; +$tab-indicator-bg-hover-color: transparentize($tab-indicator-active-color, 0.9); +$tab-indicator-bg-focus-color: transparentize($tab-indicator-active-color, 0.8); $text-tab-indicator-color: $tab-indicator-color; $text-tab-indicator-active-color: $tab-indicator-active-color; -$text-tab-background-color: $tab-background-color; -$text-tab-indicator-background-hover-color: transparentize($text-tab-indicator-active-color, 0.9); -$text-tab-indicator-background-focus-color: transparentize($text-tab-indicator-active-color, 0.8); +$text-tab-bg-color: $tab-bg-color; +$text-tab-indicator-bg-hover-color: transparentize($text-tab-indicator-active-color, 0.9); +$text-tab-indicator-bg-focus-color: transparentize($text-tab-indicator-active-color, 0.8); +$icon-tab-indicator-active-color: $primary-color; +$icon-tab-indicator-hover-color: $icon-hover-color; // Media indicator color $media-page-indicator-color: #9e9e9e; $media-page-indicator-active-color: #e6e6e6; -// Poll chart color -$poll-bar-leading-color: $primary-color; -$poll-bar-color: lighten($poll-bar-leading-color, 30%); +// Progress indicator color +$progress-indicator-color: $primary-color; +$progress-indicator-track-color: lighten($progress-indicator-color, 30%); // Contents color in read status $read-primary-text-color: transparentize($primary-text-color, 0.3); $read-secondary-text-color: transparentize($secondary-text-color, 0.3); $read-ui-text-color: transparentize($ui-text-color, 0.3); -$read-poll-bar-leading-color: transparentize($poll-bar-leading-color, 0.3); -$read-poll-bar-color: transparentize($poll-bar-color, 0.3); \ No newline at end of file +$read-poll-bar-leading-color: transparentize($progress-indicator-color, 0.3); +$read-poll-bar-color: transparentize($progress-indicator-track-color, 0.3); \ No newline at end of file diff --git a/src/mastodon-material/color/plus-classic.scss b/src/mastodon-material/color/plus-classic.scss index 60c8370..ef5900e 100644 --- a/src/mastodon-material/color/plus-classic.scss +++ b/src/mastodon-material/color/plus-classic.scss @@ -1,6 +1,8 @@ @charset "UTF-8"; +$color-scheme: light; + // Base color $primary-color: #4285f4; $secondary-color: #db4437; @@ -23,28 +25,29 @@ $search-bar-text-color: $primary-text-color; $contained-button-text-color: #ffffff; // Background-color -$background-color: #fafafa; -$menu-background-color: #ffffff; -$menu-background-hover-color: darken($menu-background-color, 6%); -$menu-background-active-color: darken($menu-background-color, 10%); -$menu-background-active-hover-color: darken($menu-background-color, 16%); -$card-background-color: #ffffff; -$card-background-hover-color: darken($card-background-color, 6%); -$card-background-inactive-color: darken($card-background-color, 10%); -$list-background-color: #ffffff; -$list-background-hover-color: darken($list-background-color, 6%); -$list-background-active-color: darken($list-background-color, 10%); -$list-background-inactive-color: darken($list-background-color, 10%); -$text-field-background-color: $card-background-color; -$verified-background-color: lighten($verified-color, 20%); +$bg-color: #fafafa; +$menu-bg-color: #ffffff; +$menu-bg-hover-color: darken($menu-bg-color, 6%); +$menu-bg-active-color: darken($menu-bg-color, 10%); +$menu-bg-active-hover-color: darken($menu-bg-color, 16%); +$card-bg-color: #ffffff; +$card-bg-hover-color: darken($card-bg-color, 6%); +$list-bg-color: #ffffff; +$list-bg-hover-color: darken($list-bg-color, 6%); +$list-bg-active-color: darken($list-bg-color, 10%); +$list-bg-inactive-color: darken($list-bg-color, 10%); +$text-field-bg-color: $card-bg-color; +$verified-bg-color: lighten($verified-color, 20%); // Chip color $contained-chip-color: #e0e0e0; +$chip-selected-text-color: $primary-color; $contained-chip-hover-color: darken($contained-chip-color, 6%); -$contained-chip-selected-color: darken($contained-chip-color, 12%); +$contained-chip-selected-color: transparentize($chip-selected-text-color, 0.7); $outlined-chip-color: #ffffff; $outlined-chip-hover-color: darken($outlined-chip-color, 6%); -$outlined-chip-selected-color: darken($outlined-chip-color, 12%); +$outlined-chip-selected-color: transparentize($chip-selected-text-color, 0.8); +$outlined-chip-selected-border-color: transparentize($chip-selected-text-color, 0.7); // Relationship tag color $relationship-tag-color: transparentize(#e0e0e0, 0.2); @@ -56,17 +59,21 @@ $badge-color: $primary-color; // Icon color $icon-color: #757575; $icon-hover-color: darken($icon-color, 30%); -$icon-background-hover-color: transparentize(#000000, 0.9); -$icon-background-active-color: transparentize(#000000, 0.8); +$icon-bg-hover-color: transparentize(#000000, 0.9); +$icon-bg-active-color: transparentize(#000000, 0.8); $disabled-icon-color: lighten($icon-color, 16%); $top-bar-icon-color: #ffffff; $top-bar-icon-hover-color: darken($top-bar-icon-color, 10%); $top-bar-icon-active-color: darken($top-bar-icon-color, 18%); $media-icon-color: transparentize(#ffffff, 0.4); $media-icon-hover-color: transparentize(#ffffff, 0.2); -$media-icon-background-color: transparentize(#000000, 0.5); -$media-icon-background-hover-color: transparentize(#000000, 0.8); +$media-icon-bg-color: transparentize(#000000, 0.5); +$media-icon-bg-hover-color: transparentize(#000000, 0.8); + +// Control color $control-border-color: $icon-color; +$control-border-active-color: $primary-color; +$control-border-hover-color: transparentize($control-border-active-color, 0.8); // Button color $icon-button-color: $icon-color; @@ -97,38 +104,40 @@ $border-color: #dadce0; $border-active-color: darken($border-color, 30%); // Scroll bar color -$scroll-bar-thumb-color: darken($background-color, 20%); +$scroll-bar-thumb-color: darken($bg-color, 20%); $scroll-bar-thumb-hover-color: darken($scroll-bar-thumb-color, 10%); $scroll-bar-thumb-active-color: darken($scroll-bar-thumb-color, 18%); // App bar color $top-bar-color: #db4437; -$search-bar-color: darken($background-color, 6%); -$search-bar-focus-color: $background-color; +$search-bar-color: darken($bg-color, 6%); +$search-bar-focus-color: $bg-color; // Tab color $tab-indicator-color: $top-bar-icon-color; $tab-indicator-active-color: $top-bar-icon-color; -$tab-background-color: $top-bar-color; -$tab-indicator-background-hover-color: transparentize($tab-indicator-active-color, 0.9); -$tab-indicator-background-focus-color: transparentize($tab-indicator-active-color, 0.8); +$tab-bg-color: $top-bar-color; +$tab-indicator-bg-hover-color: transparentize($tab-indicator-active-color, 0.9); +$tab-indicator-bg-focus-color: transparentize($tab-indicator-active-color, 0.8); $text-tab-indicator-color: $secondary-text-color; $text-tab-indicator-active-color: $top-bar-color; -$text-tab-background-color: #ffffff; -$text-tab-indicator-background-hover-color: transparentize(#000000, 0.9); -$text-tab-indicator-background-focus-color: transparentize(#000000, 0.8); +$text-tab-bg-color: #ffffff; +$text-tab-indicator-bg-hover-color: transparentize(#000000, 0.9); +$text-tab-indicator-bg-focus-color: transparentize(#000000, 0.8); +$icon-tab-indicator-active-color: $primary-color; +$icon-tab-indicator-hover-color: $icon-hover-color; // Media indicator color $media-page-indicator-color: #9e9e9e; $media-page-indicator-active-color: #e6e6e6; -// Poll chart color -$poll-bar-leading-color: $primary-color; -$poll-bar-color: lighten($poll-bar-leading-color, 30%); +// Progress indicator color +$progress-indicator-color: $primary-color; +$progress-indicator-track-color: lighten($progress-indicator-color, 30%); // Contents color in read status $read-primary-text-color: transparentize($primary-text-color, 0.3); $read-secondary-text-color: transparentize($secondary-text-color, 0.3); $read-ui-text-color: transparentize($ui-text-color, 0.3); -$read-poll-bar-leading-color: transparentize($poll-bar-leading-color, 0.3); -$read-poll-bar-color: transparentize($poll-bar-color, 0.3); \ No newline at end of file +$read-poll-bar-leading-color: transparentize($progress-indicator-color, 0.3); +$read-poll-bar-color: transparentize($progress-indicator-track-color, 0.3); \ No newline at end of file diff --git a/src/mastodon-material/color/v1-dark.scss b/src/mastodon-material/color/v1-dark.scss index 77cef82..caa0d1b 100644 --- a/src/mastodon-material/color/v1-dark.scss +++ b/src/mastodon-material/color/v1-dark.scss @@ -1,6 +1,8 @@ @charset "UTF-8"; +$color-scheme: dark; + // Base color $primary-color: #4285f4; $secondary-color: #db4437; @@ -23,28 +25,29 @@ $search-bar-text-color: $inverted-text-color; $contained-button-text-color: #ffffff; // Background-color -$background-color: #303030; -$menu-background-color: #424242; -$menu-background-hover-color: lighten($menu-background-color, 6%); -$menu-background-active-color: lighten($menu-background-color, 10%); -$menu-background-active-hover-color: lighten($menu-background-color, 16%); -$card-background-color: #424242; -$card-background-hover-color: lighten($card-background-color, 6%); -$card-background-inactive-color: lighten($card-background-color, 10%); -$list-background-color: #424242; -$list-background-hover-color: lighten($list-background-color, 6%); -$list-background-active-color: lighten($list-background-color, 10%); -$list-background-inactive-color: lighten($list-background-color, 10%); -$text-field-background-color: $card-background-color; -$verified-background-color: darken($verified-color, 20%); +$bg-color: #303030; +$menu-bg-color: #424242; +$menu-bg-hover-color: lighten($menu-bg-color, 6%); +$menu-bg-active-color: lighten($menu-bg-color, 10%); +$menu-bg-active-hover-color: lighten($menu-bg-color, 16%); +$card-bg-color: #424242; +$card-bg-hover-color: lighten($card-bg-color, 6%); +$list-bg-color: #424242; +$list-bg-hover-color: lighten($list-bg-color, 6%); +$list-bg-active-color: lighten($list-bg-color, 10%); +$list-bg-inactive-color: lighten($list-bg-color, 10%); +$text-field-bg-color: $card-bg-color; +$verified-bg-color: darken($verified-color, 20%); // Chip color $contained-chip-color: #2e2e2e; -$contained-chip-hover-color: lighten(tranparentize(#2e2e2e, 0.3), 6%); -$contained-chip-selected-color: lighten($contained-chip-color, 12%); +$chip-selected-text-color: $primary-color; +$contained-chip-hover-color: lighten($contained-chip-color, 6%); +$contained-chip-selected-color: transparentize($chip-selected-text-color, 0.7); $outlined-chip-color: #1e1e1e; $outlined-chip-hover-color: lighten($outlined-chip-color, 6%); -$outlined-chip-selected-color: lighten($outlined-chip-color, 12%); +$outlined-chip-selected-color: transparentize($chip-selected-text-color, 0.8); +$outlined-chip-selected-border-color: transparentize($chip-selected-text-color, 0.7); // Relationship tag color $relationship-tag-color: transparentize(#2e2e2e, 0.2); @@ -55,18 +58,22 @@ $badge-color: $primary-color; // Icon color $icon-color: #e2e2e3; -$icon-hover-color: lighten($icon-color, 30%); -$icon-background-hover-color: transparentize(#ffffff, 0.8); -$icon-background-active-color: transparentize(#ffffff, 0.7); -$disabled-icon-color: lighten($icon-color, 16%); +$icon-hover-color: #ffffff; +$icon-bg-hover-color: transparentize(#ffffff, 0.8); +$icon-bg-active-color: transparentize(#ffffff, 0.7); +$disabled-icon-color: darken($icon-color, 16%); $top-bar-icon-color: #ffffff; $top-bar-icon-hover-color: lighten($top-bar-icon-color, 10%); $top-bar-icon-active-color: lighten($top-bar-icon-color, 18%); $media-icon-color: transparentize(#ffffff, 0.4); $media-icon-hover-color: transparentize(#ffffff, 0.2); -$media-icon-background-color: transparentize(#000000, 0.5); -$media-icon-background-hover-color: transparentize(#000000, 0.8); +$media-icon-bg-color: transparentize(#000000, 0.5); +$media-icon-bg-hover-color: transparentize(#000000, 0.8); + +// Control color $control-border-color: $icon-color; +$control-border-active-color: $primary-color; +$control-border-hover-color: transparentize($control-border-active-color, 0.8); // Button color $icon-button-color: $icon-color; @@ -97,38 +104,40 @@ $border-color: #2e2e2e; $border-active-color: lighten($border-color, 30%); // Scroll bar color -$scroll-bar-thumb-color: lighten($background-color, 20%); -$scroll-bar-thumb-hover-color: lighten($background-color, 30%); -$scroll-bar-thumb-active-color: lighten($background-color, 38%); +$scroll-bar-thumb-color: lighten($bg-color, 20%); +$scroll-bar-thumb-hover-color: lighten($bg-color, 30%); +$scroll-bar-thumb-active-color: lighten($bg-color, 38%); // App bar color $top-bar-color: #1565C0; -$search-bar-color: lighten($background-color, 6%); +$search-bar-color: lighten($bg-color, 6%); $search-bar-focus-color: #ffffff; // Tab color $tab-indicator-color: $top-bar-icon-color; $tab-indicator-active-color: $top-bar-icon-color; -$tab-background-color: $top-bar-color; -$tab-indicator-background-hover-color: transparentize($tab-indicator-active-color, 0.9); -$tab-indicator-background-focus-color: transparentize($tab-indicator-active-color, 0.8); +$tab-bg-color: $top-bar-color; +$tab-indicator-bg-hover-color: transparentize($tab-indicator-active-color, 0.9); +$tab-indicator-bg-focus-color: transparentize($tab-indicator-active-color, 0.8); $text-tab-indicator-color: $secondary-text-color; $text-tab-indicator-active-color: $top-bar-color; -$text-tab-background-color: #424242; -$text-tab-indicator-background-hover-color: transparentize($text-tab-indicator-active-color, 0.9); -$text-tab-indicator-background-focus-color: transparentize($text-tab-indicator-active-color, 0.8); +$text-tab-bg-color: #424242; +$text-tab-indicator-bg-hover-color: transparentize($text-tab-indicator-active-color, 0.9); +$text-tab-indicator-bg-focus-color: transparentize($text-tab-indicator-active-color, 0.8); +$icon-tab-indicator-active-color: $primary-color; +$icon-tab-indicator-hover-color: $icon-hover-color; // Media indicator color $media-page-indicator-color: #9e9e9e; $media-page-indicator-active-color: #e6e6e6; -// Poll chart color -$poll-bar-leading-color: $primary-color; -$poll-bar-color: lighten($poll-bar-leading-color, 30%); +// Progress indicator color +$progress-indicator-color: $primary-color; +$progress-indicator-track-color: lighten($progress-indicator-color, 30%); // Contents color in read status $read-primary-text-color: transparentize($primary-text-color, 0.3); $read-secondary-text-color: transparentize($secondary-text-color, 0.3); $read-ui-text-color: transparentize($ui-text-color, 0.3); -$read-poll-bar-leading-color: transparentize($poll-bar-leading-color, 0.3); -$read-poll-bar-color: transparentize($poll-bar-color, 0.3); \ No newline at end of file +$read-poll-bar-leading-color: transparentize($progress-indicator-color, 0.3); +$read-poll-bar-color: transparentize($progress-indicator-track-color, 0.3); \ No newline at end of file diff --git a/src/mastodon-material/color/v1-light.scss b/src/mastodon-material/color/v1-light.scss index 64f8d58..f7a1e66 100644 --- a/src/mastodon-material/color/v1-light.scss +++ b/src/mastodon-material/color/v1-light.scss @@ -1,6 +1,8 @@ @charset "UTF-8"; +$color-scheme: light; + // Base color $primary-color: #4285f4; $secondary-color: #db4437; @@ -23,28 +25,29 @@ $search-bar-text-color: $primary-text-color; $contained-button-text-color: #ffffff; // Background-color -$background-color: #fafafa; -$menu-background-color: #ffffff; -$menu-background-hover-color: darken($menu-background-color, 6%); -$menu-background-active-color: darken($menu-background-color, 10%); -$menu-background-active-hover-color: darken($menu-background-color, 16%); -$card-background-color: #ffffff; -$card-background-hover-color: darken($card-background-color, 6%); -$card-background-inactive-color: darken($card-background-color, 10%); -$list-background-color: #ffffff; -$list-background-hover-color: darken($list-background-color, 6%); -$list-background-active-color: darken($list-background-color, 10%); -$list-background-inactive-color: darken($list-background-color, 10%); -$text-field-background-color: $card-background-color; -$verified-background-color: lighten($verified-color, 20%); +$bg-color: #fafafa; +$menu-bg-color: #ffffff; +$menu-bg-hover-color: darken($menu-bg-color, 6%); +$menu-bg-active-color: darken($menu-bg-color, 10%); +$menu-bg-active-hover-color: darken($menu-bg-color, 16%); +$card-bg-color: #ffffff; +$card-bg-hover-color: darken($card-bg-color, 6%); +$list-bg-color: #ffffff; +$list-bg-hover-color: darken($list-bg-color, 6%); +$list-bg-active-color: darken($list-bg-color, 10%); +$list-bg-inactive-color: darken($list-bg-color, 10%); +$text-field-bg-color: $card-bg-color; +$verified-bg-color: lighten($verified-color, 20%); // Chip color $contained-chip-color: #e0e0e0; +$chip-selected-text-color: $primary-color; $contained-chip-hover-color: darken($contained-chip-color, 6%); -$contained-chip-selected-color: darken($contained-chip-color, 12%); +$contained-chip-selected-color: transparentize($chip-selected-text-color, 0.7); $outlined-chip-color: #ffffff; $outlined-chip-hover-color: darken($outlined-chip-color, 6%); -$outlined-chip-selected-color: darken($outlined-chip-color, 12%); +$outlined-chip-selected-color: transparentize($chip-selected-text-color, 0.8); +$outlined-chip-selected-border-color: transparentize($chip-selected-text-color, 0.7); // Relationship tag color $relationship-tag-color: transparentize(#e0e0e0, 0.2); @@ -56,8 +59,8 @@ $badge-color: $primary-color; // Icon color $icon-color: #757575; $icon-hover-color: darken($icon-color, 30%); -$icon-background-hover-color: transparentize(#000000, 0.9); -$icon-background-active-color: transparentize(#000000, 0.8); +$icon-bg-hover-color: transparentize(#000000, 0.9); +$icon-bg-active-color: transparentize(#000000, 0.8); $disabled-icon-color: lighten($icon-color, 16%); $top-bar-icon-color: #ffffff; $top-bar-icon-hover-color: darken($top-bar-icon-color, 10%); @@ -65,9 +68,13 @@ $top-bar-icon-active-color: darken($top-bar-icon-color, 18%); $top-bar-unread-icon-color: darken($primary-color, 30%); $media-icon-color: transparentize(#ffffff, 0.4); $media-icon-hover-color: transparentize(#ffffff, 0.2); -$media-icon-background-color: transparentize(#000000, 0.5); -$media-icon-background-hover-color: transparentize(#000000, 0.8); +$media-icon-bg-color: transparentize(#000000, 0.5); +$media-icon-bg-hover-color: transparentize(#000000, 0.8); + +// Control color $control-border-color: $icon-color; +$control-border-active-color: $primary-color; +$control-border-hover-color: transparentize($control-border-active-color, 0.8); // Button color $icon-button-color: $icon-color; @@ -98,38 +105,40 @@ $border-color: #dadce0; $border-active-color: darken($border-color, 30%); // Scroll bar color -$scroll-bar-thumb-color: darken($background-color, 20%); +$scroll-bar-thumb-color: darken($bg-color, 20%); $scroll-bar-thumb-hover-color: darken($scroll-bar-thumb-color, 10%); $scroll-bar-thumb-active-color: darken($scroll-bar-thumb-color, 18%); // App bar color $top-bar-color: #2196f3; -$search-bar-color: darken($background-color, 6%); -$search-bar-focus-color: $background-color; +$search-bar-color: darken($bg-color, 6%); +$search-bar-focus-color: $bg-color; // Tab color $tab-indicator-color: $top-bar-icon-color; $tab-indicator-active-color: $top-bar-icon-color; -$tab-background-color: $top-bar-color; -$tab-indicator-background-hover-color: transparentize($tab-indicator-active-color, 0.9); -$tab-indicator-background-focus-color: transparentize($tab-indicator-active-color, 0.8); +$tab-bg-color: $top-bar-color; +$tab-indicator-bg-hover-color: transparentize($tab-indicator-active-color, 0.9); +$tab-indicator-bg-focus-color: transparentize($tab-indicator-active-color, 0.8); $text-tab-indicator-color: $secondary-text-color; $text-tab-indicator-active-color: $top-bar-color; -$text-tab-background-color: #ffffff; -$text-tab-indicator-background-hover-color: transparentize(#000000, 0.9); -$text-tab-indicator-background-focus-color: transparentize(#000000, 0.8); +$text-tab-bg-color: #ffffff; +$text-tab-indicator-bg-hover-color: transparentize(#000000, 0.9); +$text-tab-indicator-bg-focus-color: transparentize(#000000, 0.8); +$icon-tab-indicator-active-color: $primary-color; +$icon-tab-indicator-hover-color: $icon-hover-color; // Media indicator color $media-page-indicator-color: #9e9e9e; $media-page-indicator-active-color: #e6e6e6; -// Poll chart color -$poll-bar-leading-color: $primary-color; -$poll-bar-color: lighten($poll-bar-leading-color, 30%); +// Progress indicator color +$progress-indicator-color: $primary-color; +$progress-indicator-track-color: lighten($progress-indicator-color, 30%); // Contents color in read status $read-primary-text-color: transparentize($primary-text-color, 0.3); $read-secondary-text-color: transparentize($secondary-text-color, 0.3); $read-ui-text-color: transparentize($ui-text-color, 0.3); -$read-poll-bar-leading-color: transparentize($poll-bar-leading-color, 0.3); -$read-poll-bar-color: transparentize($poll-bar-color, 0.3); \ No newline at end of file +$read-poll-bar-leading-color: transparentize($progress-indicator-color, 0.3); +$read-poll-bar-color: transparentize($progress-indicator-track-color, 0.3); \ No newline at end of file diff --git a/src/mastodon-material/color/v2-dark.scss b/src/mastodon-material/color/v2-dark.scss index 8c575bc..5fef3a7 100644 --- a/src/mastodon-material/color/v2-dark.scss +++ b/src/mastodon-material/color/v2-dark.scss @@ -1,6 +1,8 @@ @charset "UTF-8"; +$color-scheme: dark; + // Base color $primary-color: #4285f4; $secondary-color: #db4437; @@ -23,28 +25,29 @@ $search-bar-text-color: $inverted-text-color; $contained-button-text-color: #ffffff; // Background-color -$background-color: #121212; -$menu-background-color: #1e1e1e; -$menu-background-hover-color: lighten($menu-background-color, 6%); -$menu-background-active-color: lighten($menu-background-color, 10%); -$menu-background-active-hover-color: lighten($menu-background-color, 16%); -$card-background-color: #1e1e1e; -$card-background-hover-color: lighten($card-background-color, 6%); -$card-background-inactive-color: lighten($card-background-color, 10%); -$list-background-color: #1e1e1e; -$list-background-hover-color: lighten($list-background-color, 6%); -$list-background-active-color: lighten($list-background-color, 10%); -$list-background-inactive-color: lighten($list-background-color, 10%); -$text-field-background-color: $card-background-color; -$verified-background-color: darken($verified-color, 20%); +$bg-color: #121212; +$menu-bg-color: #1e1e1e; +$menu-bg-hover-color: lighten($menu-bg-color, 6%); +$menu-bg-active-color: lighten($menu-bg-color, 10%); +$menu-bg-active-hover-color: lighten($menu-bg-color, 16%); +$card-bg-color: #1e1e1e; +$card-bg-hover-color: lighten($card-bg-color, 6%); +$list-bg-color: #1e1e1e; +$list-bg-hover-color: lighten($list-bg-color, 6%); +$list-bg-active-color: lighten($list-bg-color, 10%); +$list-bg-inactive-color: lighten($list-bg-color, 10%); +$text-field-bg-color: $card-bg-color; +$verified-bg-color: darken($verified-color, 20%); // Chip color $contained-chip-color: #2e2e2e; +$chip-selected-text-color: $primary-color; $contained-chip-hover-color: lighten($contained-chip-color, 6%); -$contained-chip-selected-color: lighten($contained-chip-color, 12%); +$contained-chip-selected-color: transparentize($chip-selected-text-color, 0.7); $outlined-chip-color: #1e1e1e; $outlined-chip-hover-color: lighten($outlined-chip-color, 6%); -$outlined-chip-selected-color: lighten($outlined-chip-color, 12%); +$outlined-chip-selected-color: transparentize($chip-selected-text-color, 0.8); +$outlined-chip-selected-border-color: transparentize($chip-selected-text-color, 0.7); // Relationship tag color $relationship-tag-color: transparentize(#2e2e2e, 0.2); @@ -55,19 +58,23 @@ $badge-color: $primary-color; // Icon color $icon-color: #e2e2e3; -$icon-hover-color: lighten($icon-color, 30%); -$icon-background-hover-color: transparentize(#ffffff, 0.8); -$icon-background-active-color: transparentize(#ffffff, 0.7); -$disabled-icon-color: lighten($icon-color, 16%); +$icon-hover-color: #ffffff; +$icon-bg-hover-color: transparentize(#ffffff, 0.8); +$icon-bg-active-color: transparentize(#ffffff, 0.7); +$disabled-icon-color: darken($icon-color, 16%); $top-bar-icon-color: $icon-color; $top-bar-icon-hover-color: $icon-hover-color; $top-bar-icon-active-color: $primary-color; $top-bar-unread-icon-color: $secondary-color; $media-icon-color: transparentize(#ffffff, 0.4); $media-icon-hover-color: transparentize(#ffffff, 0.2); -$media-icon-background-color: transparentize(#000000, 0.5); -$media-icon-background-hover-color: transparentize(#000000, 0.8); +$media-icon-bg-color: transparentize(#000000, 0.5); +$media-icon-bg-hover-color: transparentize(#000000, 0.8); + +// Control color $control-border-color: $icon-color; +$control-border-active-color: $primary-color; +$control-border-hover-color: transparentize($control-border-active-color, 0.8); // Button color $icon-button-color: $icon-color; @@ -98,7 +105,7 @@ $border-color: #2e2e2e; $border-active-color: lighten($border-color, 30%); // Scroll bar color -$scroll-bar-thumb-color: lighten($background-color, 20%); +$scroll-bar-thumb-color: lighten($bg-color, 20%); $scroll-bar-thumb-hover-color: lighten($scroll-bar-thumb-color, 10%); $scroll-bar-thumb-active-color: lighten($scroll-bar-thumb-color, 18%); @@ -110,26 +117,28 @@ $search-bar-focus-color: #ffffff; // Tab color $tab-indicator-color: $top-bar-icon-color; $tab-indicator-active-color: $top-bar-icon-color; -$tab-background-color: $top-bar-color; -$tab-indicator-background-hover-color: transparentize($tab-indicator-active-color, 0.9); -$tab-indicator-background-focus-color: transparentize($tab-indicator-active-color, 0.8); +$tab-bg-color: $top-bar-color; +$tab-indicator-bg-hover-color: transparentize($tab-indicator-active-color, 0.9); +$tab-indicator-bg-focus-color: transparentize($tab-indicator-active-color, 0.8); $text-tab-indicator-color: $secondary-text-color; $text-tab-indicator-active-color: $ui-text-color; -$text-tab-background-color: #1e1e1e; -$text-tab-indicator-background-hover-color: transparentize($text-tab-indicator-active-color, 0.9); -$text-tab-indicator-background-focus-color: transparentize($text-tab-indicator-active-color, 0.8); +$text-tab-bg-color: #1e1e1e; +$text-tab-indicator-bg-hover-color: transparentize($text-tab-indicator-active-color, 0.9); +$text-tab-indicator-bg-focus-color: transparentize($text-tab-indicator-active-color, 0.8); +$icon-tab-indicator-active-color: $primary-color; +$icon-tab-indicator-hover-color: $icon-hover-color; // Media indicator color $media-page-indicator-color: #9e9e9e; $media-page-indicator-active-color: #e6e6e6; -// Poll chart color -$poll-bar-leading-color: $primary-color; -$poll-bar-color: lighten($poll-bar-leading-color, 30%); +// Progress indicator color +$progress-indicator-color: $primary-color; +$progress-indicator-track-color: lighten($progress-indicator-color, 30%); // Contents color in read status $read-primary-text-color: transparentize($primary-text-color, 0.3); $read-secondary-text-color: transparentize($secondary-text-color, 0.3); $read-ui-text-color: transparentize($ui-text-color, 0.3); -$read-poll-bar-leading-color: transparentize($poll-bar-leading-color, 0.3); -$read-poll-bar-color: transparentize($poll-bar-color, 0.3); \ No newline at end of file +$read-poll-bar-leading-color: transparentize($progress-indicator-color, 0.3); +$read-poll-bar-color: transparentize($progress-indicator-track-color, 0.3); \ No newline at end of file diff --git a/src/mastodon-material/color/v2-light.scss b/src/mastodon-material/color/v2-light.scss index 20336e9..cc2efe2 100644 --- a/src/mastodon-material/color/v2-light.scss +++ b/src/mastodon-material/color/v2-light.scss @@ -1,6 +1,8 @@ @charset "UTF-8"; +$color-scheme: light; + // Base color $primary-color: #4285f4; $secondary-color: #db4437; @@ -23,28 +25,29 @@ $search-bar-text-color: $primary-text-color; $contained-button-text-color: #ffffff; // Background-color -$background-color: #ffffff; -$menu-background-color: $background-color; -$menu-background-hover-color: darken($menu-background-color, 6%); -$menu-background-active-color: darken($menu-background-color, 10%); -$menu-background-active-hover-color: darken($menu-background-color, 16%); -$card-background-color: $background-color; -$card-background-hover-color: darken($card-background-color, 6%); -$card-background-inactive-color: darken($card-background-color, 10%); -$list-background-color: $background-color; -$list-background-hover-color: darken($list-background-color, 6%); -$list-background-active-color: darken($list-background-color, 10%); -$list-background-inactive-color: darken($list-background-color, 10%); -$text-field-background-color: $card-background-color; -$verified-background-color: lighten($verified-color, 20%); +$bg-color: #ffffff; +$menu-bg-color: $bg-color; +$menu-bg-hover-color: darken($menu-bg-color, 6%); +$menu-bg-active-color: darken($menu-bg-color, 10%); +$menu-bg-active-hover-color: darken($menu-bg-color, 16%); +$card-bg-color: $bg-color; +$card-bg-hover-color: darken($card-bg-color, 6%); +$list-bg-color: $bg-color; +$list-bg-hover-color: darken($list-bg-color, 6%); +$list-bg-active-color: darken($list-bg-color, 10%); +$list-bg-inactive-color: darken($list-bg-color, 10%); +$text-field-bg-color: $card-bg-color; +$verified-bg-color: lighten($verified-color, 20%); // Chip color $contained-chip-color: #e0e0e0; +$chip-selected-text-color: $primary-color; $contained-chip-hover-color: darken($contained-chip-color, 6%); -$contained-chip-selected-color: darken($contained-chip-color, 12%); +$contained-chip-selected-color: transparentize($chip-selected-text-color, 0.7); $outlined-chip-color: #ffffff; $outlined-chip-hover-color: darken($outlined-chip-color, 6%); -$outlined-chip-selected-color: darken($outlined-chip-color, 12%); +$outlined-chip-selected-color: transparentize($chip-selected-text-color, 0.8); +$outlined-chip-selected-border-color: transparentize($chip-selected-text-color, 0.7); // Relationship tag color $relationship-tag-color: transparentize(#e0e0e0, 0.2); @@ -56,8 +59,8 @@ $badge-color: $primary-color; // Icon color $icon-color: #757575; $icon-hover-color: darken($icon-color, 30%); -$icon-background-hover-color: transparentize(#000000, 0.9); -$icon-background-active-color: transparentize(#000000, 0.8); +$icon-bg-hover-color: transparentize(#000000, 0.9); +$icon-bg-active-color: transparentize(#000000, 0.8); $disabled-icon-color: lighten($icon-color, 16%); $top-bar-icon-color: $icon-color; $top-bar-icon-hover-color: $icon-hover-color; @@ -65,9 +68,13 @@ $top-bar-icon-active-color: $primary-color; $top-bar-unread-icon-color: $secondary-color; $media-icon-color: transparentize(#ffffff, 0.4); $media-icon-hover-color: transparentize(#ffffff, 0.2); -$media-icon-background-color: transparentize(#000000, 0.5); -$media-icon-background-hover-color: transparentize(#000000, 0.8); +$media-icon-bg-color: transparentize(#000000, 0.5); +$media-icon-bg-hover-color: transparentize(#000000, 0.8); + +// Control color $control-border-color: $icon-color; +$control-border-active-color: $primary-color; +$control-border-hover-color: transparentize($control-border-active-color, 0.8); // Button color $icon-button-color: $icon-color; @@ -98,38 +105,40 @@ $border-color: #dadce0; $border-active-color: darken($border-color, 30%); // Scroll bar color -$scroll-bar-thumb-color: darken($background-color, 20%); -$scroll-bar-thumb-hover-color: darken($background-color, 30%); -$scroll-bar-thumb-active-color: darken($background-color, 38%); +$scroll-bar-thumb-color: darken($bg-color, 20%); +$scroll-bar-thumb-hover-color: darken($bg-color, 30%); +$scroll-bar-thumb-active-color: darken($bg-color, 38%); // App bar color -$top-bar-color: $background-color; -$search-bar-color: darken($background-color, 6%); -$search-bar-focus-color: $background-color; +$top-bar-color: $bg-color; +$search-bar-color: darken($bg-color, 6%); +$search-bar-focus-color: $bg-color; // Tab color $tab-indicator-color: $top-bar-icon-color; $tab-indicator-active-color: $top-bar-icon-color; -$tab-background-color: $top-bar-color; -$tab-indicator-background-hover-color: transparentize($tab-indicator-active-color, 0.9); -$tab-indicator-background-focus-color: transparentize($tab-indicator-active-color, 0.8); +$tab-bg-color: $top-bar-color; +$tab-indicator-bg-hover-color: transparentize($tab-indicator-active-color, 0.9); +$tab-indicator-bg-focus-color: transparentize($tab-indicator-active-color, 0.8); $text-tab-indicator-color: $secondary-text-color; $text-tab-indicator-active-color: $ui-text-color; -$text-tab-background-color: #ffffff; -$text-tab-indicator-background-hover-color: transparentize($text-tab-indicator-active-color, 0.9); -$text-tab-indicator-background-focus-color: transparentize($text-tab-indicator-active-color, 0.8); +$text-tab-bg-color: #ffffff; +$text-tab-indicator-bg-hover-color: transparentize($text-tab-indicator-active-color, 0.9); +$text-tab-indicator-bg-focus-color: transparentize($text-tab-indicator-active-color, 0.8); +$icon-tab-indicator-active-color: $primary-color; +$icon-tab-indicator-hover-color: $icon-hover-color; // Media indicator color $media-page-indicator-color: #9e9e9e; $media-page-indicator-active-color: #e6e6e6; -// Poll chart color -$poll-bar-leading-color: $primary-color; -$poll-bar-color: lighten($poll-bar-leading-color, 30%); +// Progress indicator color +$progress-indicator-color: $primary-color; +$progress-indicator-track-color: lighten($progress-indicator-color, 30%); // Contents color in read status $read-primary-text-color: transparentize($primary-text-color, 0.3); $read-secondary-text-color: transparentize($secondary-text-color, 0.3); $read-ui-text-color: transparentize($ui-text-color, 0.3); -$read-poll-bar-leading-color: transparentize($poll-bar-leading-color, 0.3); -$read-poll-bar-color: transparentize($poll-bar-color, 0.3); \ No newline at end of file +$read-poll-bar-leading-color: transparentize($progress-indicator-color, 0.3); +$read-poll-bar-color: transparentize($progress-indicator-track-color, 0.3); \ No newline at end of file diff --git a/src/mastodon-material/icon_config.scss b/src/mastodon-material/icon_config.scss index 678a400..2081d88 100644 --- a/src/mastodon-material/icon_config.scss +++ b/src/mastodon-material/icon_config.scss @@ -6,7 +6,7 @@ $favorite-icon: "star"; $favorite-icon-border: "star_border"; // Star $favorite-icon-color: #ffd600; // Star //$favorite-icon-color: #ff4081; // Heart //$favorite-icon-color: #db4437; // +1 -//$favorite-icon-color: #ffffff; // inverted +1 +//$favorite-icon-color: #ffffff; // inverted +1 (for plus plugin) // Reply icon settings @@ -16,11 +16,13 @@ $reply-icon: "reply"; // Material Design Icon settings // If you want to use self-hosting font, please place MaterialIcons-Regular.woff2 file in '../../fonts' folder and configure below. -@font-face { - font-family: "Material Icons"; - src: - local("Material Icons"), - url("https://raw.githubusercontent.com/google/material-design-icons/master/iconfont/MaterialIcons-Regular.woff2"); // GitHub - //url("https://fonts.gstatic.com/s/materialicons/v50/flUhRq6tzZclQEJ-Vdg-IuiaDsNc.woff2"); // Google Fonts - //url("../fonts/MaterialIcons-Regular.woff2"); // Self-hosting -} \ No newline at end of file +$icon-font-source: google; // Google Fonts +//$icon-font-source: github; // GitHub +//$icon-font-source: self; // Self-hosting + +// Material Icon style settings +$icon-font-style: filled; +//$icon-font-style: outlined; +//$icon-font-style: round; +//$icon-font-style: sharp; +//$icon-font-style: two-tone; \ No newline at end of file diff --git a/src/mastodon-material/layout/material-v1.scss b/src/mastodon-material/layout/material-v1.scss index 825deaf..d3a2f48 100644 --- a/src/mastodon-material/layout/material-v1.scss +++ b/src/mastodon-material/layout/material-v1.scss @@ -30,6 +30,10 @@ $dialog-radius: 2px; $menu-radius: 2px; +// Media radius settings +$media-radius: 0; + + // Navigation drawer item settings $nav-drawer-item-radius: 0; @@ -39,7 +43,13 @@ $avater-radius: 50%; // Rounded cropping //$avater-radius: 2px // Material v1 square +// Chip settings +$outlined-chip: false; // Material v1 styled contained chip + + // Button shadow -// If you want to use material v2 styled non-shadow button, please comment out this section. -.button, -.compose-form .compose-form__publish-button-wrapper { @include shadow-2dp } \ No newline at end of file +$button-shadow: true; // Material v1 styled colored button with shadow + + +// Floating Action Button size +$fab-size: 56px; \ No newline at end of file diff --git a/src/mastodon-material/layout/material-v2.scss b/src/mastodon-material/layout/material-v2.scss index 853d82b..7c6b0c9 100644 --- a/src/mastodon-material/layout/material-v2.scss +++ b/src/mastodon-material/layout/material-v2.scss @@ -4,10 +4,12 @@ // Navigation bar radius $nav-bar-radius: 8px; +//$nav-bar-radius: 28px; // full radius // Search bar radius $search-bar-radius: 8px; +//$search-bar-radius: 21px; // full rounded // Bar radius settings @@ -31,6 +33,11 @@ $dialog-radius: 8px; $menu-radius: 8px; +// Media radius settings +$media-radius: 0; +//$media-radius: 2px; + + // Navigation drawer item settings $nav-drawer-item-radius: 8px; // corner rounded //$nav-drawer-item-radius: 32px; // full rounded @@ -43,18 +50,15 @@ $avater-radius: 50%; // Rounded cropping // Chip settings -// If you want to use contained-chip, please comment out below. -.reactions-bar__item { - background: $outlined-chip-color !important; - border: 1px solid $border-color !important; +$outlined-chip: true; // Material v2 styled outlined chip +//$outlined-chip: false; // Material v1 styled contained chip - &.active { background-color: $outlined-chip-selected-color !important } - &:hover { background: $outlined-chip-hover-color !important } -} +// Button shadow +$button-shadow: false; // Material v2 styled colored button without shadow +//$button-shadow: true; // Material v1 styled colored button with shadow -// Button shadow -// If you want to use material v2 styled non-shadow button, please comment out this section. -.button, -.compose-form .compose-form__publish-button-wrapper { @include shadow-2dp } \ No newline at end of file +// Floating Action Button size +$fab-size: 56px; // Regular +//$fab-size: 40px; // Mini \ No newline at end of file diff --git a/src/mastodon-material/plugins/cards.scss b/src/mastodon-material/plugins/cards.scss index c134cbe..d9b3906 100644 --- a/src/mastodon-material/plugins/cards.scss +++ b/src/mastodon-material/plugins/cards.scss @@ -10,13 +10,13 @@ margin: 2px 0 !important; padding: 8px !important; - > .scrollable { background: $background-color } + > .scrollable { background: $bg-color } } .status { border-bottom: 0; border-radius: $card-radius; - background: $card-background-color; + background: $card-bg-color; &__prepend { padding: 8px 8px 2px 0 } } @@ -28,7 +28,7 @@ @include shadow-1dp; margin: 8px 2px; border-radius: $card-radius; - background: $card-background-color; + background: $card-bg-color; } .notification .status__wrapper.status__wrapper { box-shadow: none !important } diff --git a/src/mastodon-material/plugins/dense.scss b/src/mastodon-material/plugins/dense.scss index b3ba408..5e3d505 100644 --- a/src/mastodon-material/plugins/dense.scss +++ b/src/mastodon-material/plugins/dense.scss @@ -5,20 +5,21 @@ .drawer { - &__tab { margin: 8px auto 8px } + &__header { height: 48px } + + &__tab { margin: 6px auto 6px } } .column { margin: 10px 5px } .column-header { - &__buttons { height: 48px } + height: 48px; - &__button { - margin: 8px; - padding: 10px 8px; + > button { padding: 12px 16px } + + &__buttons { height: 48px } - .fa { vertical-align: text-top } - } + &__button { margin: 6px } } .column-subheading { padding: 8px 16px } @@ -38,7 +39,7 @@ } .status { - padding: 8px 8px 8px 66px; + padding: 8px 8px 4px 66px; &__expand { width: 66px } diff --git a/src/mastodon-material/plugins/plus.scss b/src/mastodon-material/plugins/plus.scss index 5b22063..86a5f3e 100644 --- a/src/mastodon-material/plugins/plus.scss +++ b/src/mastodon-material/plugins/plus.scss @@ -14,9 +14,8 @@ // favorite icon .star-icon.active, -.star-icon.icon-button.active.active, -.notification__favourite-icon-wrapper .star-icon, -.status__action-bar-button.star-icon.icon-button.active { background: #db4437 } +.star-icon.icon-button.active.activate, +.notification__favourite-icon-wrapper .star-icon { background: #db4437 } .notification__favourite-icon-wrapper { left: -34px; diff --git a/src/mastodon-material/theme/_mixins.scss b/src/mastodon-material/theme/_mixins.scss index 5f573e3..3980fbc 100644 --- a/src/mastodon-material/theme/_mixins.scss +++ b/src/mastodon-material/theme/_mixins.scss @@ -21,5 +21,179 @@ $shadow-color-3: rgba(0,0,0,.12); @mixin shadow-14dp { box-shadow: 0 7px 9px -4px $shadow-color-1, 0 14px 21px 2px $shadow-color-2, 0 5px 26px 4px $shadow-color-3 } @mixin shadow-15dp { box-shadow: 0 8px 9px -5px $shadow-color-1, 0 15px 22px 2px $shadow-color-2, 0 6px 28px 5px $shadow-color-3 } @mixin shadow-16dp { box-shadow: 0 8px 10px -5px $shadow-color-1, 0 16px 24px 2px $shadow-color-2, 0 6px 30px 5px $shadow-color-3 } +@mixin shadow-17dp { box-shadow: 0 8px 11px -5px $shadow-color-1, 0 17px 26px 2px $shadow-color-2, 0 6px 32px 5px $shadow-color-3 } +@mixin shadow-18dp { box-shadow: 0 9px 11px -5px $shadow-color-1, 0 18px 28px 2px $shadow-color-2, 0 7px 34px 6px $shadow-color-3 } +@mixin shadow-19dp { box-shadow: 0 9px 12px -6px $shadow-color-1, 0 19px 29px 2px $shadow-color-2, 0 7px 36px 6px $shadow-color-3 } +@mixin shadow-20dp { box-shadow: 0 10px 13px -6px $shadow-color-1, 0 20px 31px 3px $shadow-color-2, 0 8px 38px 7px $shadow-color-3 } +@mixin shadow-21dp { box-shadow: 0 10px 13px -6px $shadow-color-1, 0 21px 33px 3px $shadow-color-2, 0 8px 40px 7px $shadow-color-3 } +@mixin shadow-22dp { box-shadow: 0 10px 14px -6px $shadow-color-1, 0 22px 35px 3px $shadow-color-2, 0 8px 42px 7px $shadow-color-3 } +@mixin shadow-23dp { box-shadow: 0 11px 14px -7px $shadow-color-1, 0 23px 36px 3px $shadow-color-2, 0 9px 44px 8px $shadow-color-3 } +@mixin shadow-24dp { box-shadow: 0 11px 15px -7px $shadow-color-1, 0 24px 38px 3px $shadow-color-2, 0 9px 46px 8px $shadow-color-3 } @mixin non-overflow-shadow-4dp { box-shadow: 0 2px 4px -1px $shadow-color-1, 0 4px 5px -1px $shadow-color-2} + +@mixin material-transition { transition: opacity .25s cubic-bezier(0.0,0.0,0.2,1) } + +@mixin search-bar-hover { + @if $search-bar-hover { + @include shadow-2dp; + background: $search-bar-focus-color; + } +} + +@mixin outlined-chip { + @if $outlined-chip { + .reactions-bar__item { + background: $outlined-chip-color !important; + border: 1px solid $outlined-chip-selected-border-color !important; + + &.active { background-color: $outlined-chip-selected-color !important } + + &:hover { background: $outlined-chip-hover-color !important } + } + } +} + +@mixin button-shadow { + @if $button-shadow { + .button, + .compose-form .compose-form__publish-button-wrapper { @include shadow-2dp } + } +} + +@mixin icon-button { + width: 20px !important; + height: 20px !important; + font-size: 20px !important; +} + +// check background-image value +@mixin bg-image { + @if $bg-image == none { + } @else { background-image: url($bg-image) } +} + + +@mixin icon-font-style { + @if $icon-font-style == filled { font-family: "Material Icons" } + @if $icon-font-style == outlined { font-family: "Material Icons Outlined" } + @if $icon-font-style == round { font-family: "Material Icons Round" } + @if $icon-font-style == sharp { font-family: "Material Icons Sharp" } + @if $icon-font-style == two-tone { font-family: "Material Icons Two Tone" } +} + +@mixin icon-font { + @if $icon-font-source == github { + @if $icon-font-style == filled { + @font-face { + font-family: "Material Icons"; + src: local("Material Icons"), + url("https://raw.githubusercontent.com/google/material-design-icons/raw/master/font/MaterialIcons-Regular.ttf") format('truetype'); + } + } + @if $icon-font-style == outlined { + @font-face { + font-family: "Material Icons Outlined"; + src: local("Material Icons Outlined"), + url("https://raw.githubusercontent.com/google/material-design-icons/master/font/MaterialIconsOutlined-Regular.otf") format('opentype'); + } + } + @if $icon-font-style == round { + @font-face { + font-family: "Material Icons Round"; + src: local("Material Icons Round"), + url("https://raw.githubusercontent.com/google/material-design-icons/master/font/MaterialIconsRound-Regular.otf") format('opentype'); + } + } + @if $icon-font-style == sharp { + @font-face { + font-family: "Material Icons Sharp"; + src: local("Material Icons Sharp"), + url("https://raw.githubusercontent.com/google/material-design-icons/master/font/MaterialIconsSharp-Regular.otf") format('opentype'); + } + } + @if $icon-font-style == two-tone { + @font-face { + font-family: "Material Icons Two Tone"; + src: local("Material Icons Two Tone"), + url("https://raw.githubusercontent.com/google/material-design-icons/master/font/MaterialIconsTwoTone-Regular.otf") format('opentype'); + } + } + } + + @if $icon-font-source == google { + @if $icon-font-style == filled { + @font-face { + font-family: "Material Icons"; + src: local("Material Icons"), + url("https://fonts.gstatic.com/s/materialicons/v55/flUhRq6tzZclQEJ-Vdg-IuiaDsNc.woff2") format('woff2'); + } + } + @if $icon-font-style == outlined { + @font-face { + font-family: "Material Icons Outlined"; + src: local("Material Icons Outlined"), + url("https://fonts.gstatic.com/s/materialiconsoutlined/v25/gok-H7zzDkdnRel8-DQ6KAXJ69wP1tGnf4ZGhUce.woff2") format('woff2'); + } + } + @if $icon-font-style == round { + @font-face { + font-family: "Material Icons Round"; + src: local("Material Icons Round"), + url("https://fonts.gstatic.com/s/materialiconsround/v24/LDItaoyNOAY6Uewc665JcIzCKsKc_M9flwmP.woff2") format('woff2'); + } + } + @if $icon-font-style == sharp { + @font-face { + font-family: "Material Icons Sharp"; + src: local("Material Icons Sharp"), + url("https://fonts.gstatic.com/s/materialiconssharp/v25/oPWQ_lt5nv4pWNJpghLP75WiFR4kLh3kvmvR.woff2") format('woff2'); + } + } + @if $icon-font-style == two-tone { + @font-face { + font-family: "Material Icons Two Tone"; + src: local("Material Icons Two Tone"), + url("https://fonts.gstatic.com/s/materialiconstwotone/v23/hESh6WRmNCxEqUmNyh3JDeGxjVVyMg4tHGctNCu0.woff2") format('woff2'); + } + } + } + + @if $icon-font-source == self { + @if $icon-font-style == filled { + @font-face { + font-family: "Material Icons"; + src: local("Material Icons"), + url("../fonts/MaterialIcons-Regular.ttf") format('truetype'); + } + } + @if $icon-font-style == outlined { + @font-face { + font-family: "Material Icons Outlined"; + src: local("Material Icons Outlined"), + url("../fonts/MaterialIconsOutlined-Regular.otf") format('opentype'); + } + } + @if $icon-font-style == round { + @font-face { + font-family: "Material Icons Round"; + src: local("Material Icons"), + url("../fonts/MaterialIconsRound-Regular.otf") format('opentype'); + } + } + @if $icon-font-style == sharp { + @font-face { + font-family: "Material Icons Sharp"; + src: local("Material Icons Sharp"), + url("../fonts/MaterialIconsSharp-Regular.otf") format('opentype'); + } + } + @if $icon-font-style == two-tone { + @font-face { + font-family: "Material Icons Two Tone"; + src: local("Material Icons Two Tone"), + url("../fonts/MaterialIconsTwoTone-Regular.otf") format('opentype'); + } + } + } +} \ No newline at end of file diff --git a/src/mastodon-material/theme/account.scss b/src/mastodon-material/theme/account.scss index 34a8a18..0765930 100644 --- a/src/mastodon-material/theme/account.scss +++ b/src/mastodon-material/theme/account.scss @@ -6,9 +6,10 @@ .account { border-bottom: 1px solid $border-color; + padding: 16px; - .account__display-name { color: $primary-text-color } - .account__display-name strong { color: $secondary-text-color } + .account__display-name, + .account__display-name strong { color: $primary-text-color } &__avatar { border-radius: $avater-radius; @@ -27,11 +28,16 @@ } } + &__avatar-wrapper { + margin-left: 0; + margin-right: 16px; + } + &__header { &__bar { - background: $card-background-color; + background: $card-bg-color; padding: 8px; - border-bottom: 1px solid $border-color; + border-bottom: none; .avatar .account__avatar { border: none } } @@ -51,9 +57,11 @@ &__buttons { .icon-button { + @include icon-button; border: none; border-radius: 50%; - padding: 0; + padding: 8px; + margin-left: 8px; } } } @@ -89,7 +97,7 @@ .verified { border: none; - background: $verified-background-color; + background: $verified-bg-color; a, &__mark { color: $primary-text-color } @@ -105,7 +113,7 @@ dt { color: $primary-text-color; - background: $list-background-inactive-color; + background: $list-bg-inactive-color; } dd { color: $primary-text-color } @@ -113,11 +121,31 @@ } } + &__account-note { + padding: 8px 16px; + border-bottom: 1px solid $border-color; + + label { + color: $ui-text-color; + margin-bottom: 8px; + } + + textarea { + color: $primary-text-color; + padding: 8px 16px; + border-radius: 0; + + &:focus { background: transparent } + + &::placeholder { color: $tips-text-color } + } + } + &__content { color: $secondary-text-color } } &__section-headline { - background: $text-tab-background-color; + background: $text-tab-bg-color; border-bottom: 1px solid $border-color; a { @@ -131,10 +159,21 @@ &::before, &:after { border: none } - &:focus { background: $text-tab-indicator-background-focus-color } + &:focus { background: $text-tab-indicator-bg-focus-color } } - &:hover { background: $text-tab-indicator-background-hover-color } + &:hover { background: $text-tab-indicator-bg-hover-color } + } + } + + &__relationship { + padding: 0; + height: auto; + + .icon-button { + @include icon-button; + padding: 8px; + box-sizing: content-box; } } } @@ -150,4 +189,8 @@ color: $ui-text-color; small { color: $secondary-text-color } +} + +.account-gallery { + &__item { border-radius: 0 } } \ No newline at end of file diff --git a/src/mastodon-material/theme/base_config.scss b/src/mastodon-material/theme/base_config.scss index 73ff009..f36a139 100644 --- a/src/mastodon-material/theme/base_config.scss +++ b/src/mastodon-material/theme/base_config.scss @@ -1,7 +1,7 @@ @charset "UTF-8"; -// [important] This file is base file. DO NOT edit this file. If you want to change this file, you should edit "../config.scss". +// [important] This file is base file. DO NOT edit this file. If you want to change this file, you should edit "../custom_config.scss". // Color scheme @@ -18,10 +18,7 @@ // Search bar hover settings // You can enable/disable search bar floating. -/*.search__input:hover { - @include shadow-2dp; - background: $search-bar-focus-color; -}*/ +$search-bar-hover: false; // Status font size in timeline @@ -31,4 +28,19 @@ $status-font-size: 15px; // mastodon default // Name font size in timeline status $name-font-size: 15px; // mastodon default -//$name-font-size: 16px; // compatible with material design \ No newline at end of file +//$name-font-size: 16px; // compatible with material design + + +// Background image +// If you want to use the local image, please put it in "../" +$bg-image: none; +//$bg-image: "./image.png"; +//$bg-image: "https://example.com/img/image.png"; + + +// Columns transparency settings +$bar-transparency: 1.0; // opacity +//$bar-transparency: 0.8; // semi-transparent + +$column-transparency: 1.0; // opacity +//$column-transparency: 0.8; // semi-transparent \ No newline at end of file diff --git a/src/mastodon-material/theme/basics.scss b/src/mastodon-material/theme/basics.scss index 4c122d1..32ba6dc 100644 --- a/src/mastodon-material/theme/basics.scss +++ b/src/mastodon-material/theme/basics.scss @@ -4,7 +4,9 @@ @import '../custom_color', '../custom_layout'; -body { background: $background-color } +body { background: $bg-color } + +.focusable:focus { background: transparent } // Chrome & Safari scroll bar ::-webkit-scrollbar-thumb { @@ -21,6 +23,4 @@ body { background: $background-color } } // Firefox scroll bar -html { - scrollbar-color: $scroll-bar-thumb-color transparent; -} \ No newline at end of file +html { scrollbar-color: $scroll-bar-thumb-color transparent } \ No newline at end of file diff --git a/src/mastodon-material/theme/button.scss b/src/mastodon-material/theme/button.scss index 1231bac..6ec2ddd 100644 --- a/src/mastodon-material/theme/button.scss +++ b/src/mastodon-material/theme/button.scss @@ -4,6 +4,8 @@ @import '../custom_color', '../custom_layout'; @import 'mixins'; +@include button-shadow; + .icon-button { color: $icon-button-color; border-radius: 50%; @@ -19,79 +21,119 @@ &.inverted { color: $icon-button-color; + &.active { color: $icon-button-active-color } + &:hover { color: $icon-button-hover-color; - background-color: $icon-background-hover-color; + background-color: $icon-bg-hover-color; } + + &:focus { background-color: transparent } } &.overlayed { + @include icon-button; border-radius: 50%; - background: $media-icon-background-color; + background: $media-icon-bg-color; color: $media-icon-color; + padding: 4px; + line-height: 20px !important; &:hover { - background: $media-icon-background-color; + background: $media-icon-bg-color; color: $media-icon-hover-color; } } &:hover { + @include material-transition; color: $icon-button-hover-color; - background-color: $icon-background-hover-color; + background-color: $icon-bg-hover-color; } - &:active, &:focus { background-color: transparent } } +// Checkbox with label +label.icon-button { + &.active { + color: $ui-text-color; + background-color: transparent; + } + + &:hover { + @include material-transition; + background-color: transparent; + } +} + .text-icon-button { color: $icon-button-color; border-radius: 50%; - font-size: 12px; + font-size: 14px; + + &.active { + background-color: $icon-bg-hover-color; + color: $icon-button-active-color; + } &:hover { - background-color: $icon-background-hover-color; + background-color: $icon-bg-hover-color; color: $icon-button-hover-color; } } -.button, -.button:active, -.button:focus { +.button { background-color: $contained-button-color; border-radius: $button-radius; -} - -.button:hover { - @include shadow-2dp; - background-color: $contained-button-hover-color; -} - -.button.logo-button { - background: $contained-button-color; - margin: 2px; - &:hover { background: $contained-button-hover-color } + &:active, + &:focus { + background-color: $contained-button-color; + border-radius: $button-radius; + } - .button--destructive:hover { background: $contained-button-hover-color } -} + &:hover { + @include shadow-2dp; + background-color: $contained-button-hover-color; + } -.button.button--block { margin: 8px 0 } + &.logo-button { + background: $contained-button-color; + margin: 2px; + + &:hover { background: $contained-button-hover-color } + + .button--destructive:hover { background: $contained-button-hover-color } + } -.button.confirmation-modal__cancel-button { - box-shadow: none; - background-color: transparent; - margin: 0 8px; - color: $text-button-color; + &.button--block { margin: 8px 0 } - &:hover { background: $text-button-hover-color } + &.button-secondary { + color: $text-button-color; + border: none; + box-shadow: none; + + &:hover { + color: $text-button-color; + background-color: $text-button-hover-color; + } + } - &:focus { background: $text-button-focus-color } + &.confirmation-modal__cancel-button { + box-shadow: none; + background-color: transparent; + margin: 0 8px; + color: $text-button-color; + + &:hover { background: $text-button-hover-color } + + &:focus { background: $text-button-focus-color } + } } .spoiler-button__overlay__label { - background: $media-icon-background-color; + background: $media-icon-bg-color; border-radius: $button-radius; color: $media-icon-color; } \ No newline at end of file diff --git a/src/mastodon-material/theme/columns.scss b/src/mastodon-material/theme/columns.scss index 54effff..dd47e90 100644 --- a/src/mastodon-material/theme/columns.scss +++ b/src/mastodon-material/theme/columns.scss @@ -10,7 +10,10 @@ margin: 10px 8px; border-radius: $card-radius; - &>.scrollable { background: $list-background-color } + &>.scrollable { + background: $list-bg-color; + opacity: $column-transparency; + } &:last-child { box-shadow: none } } @@ -18,9 +21,10 @@ .column-header { background: $top-bar-color; border-radius: $bar-radius; + height: 56px; > button { - padding: 16px 0 16px 16px; + padding: 16px; color: $top-bar-text-color; } @@ -42,25 +46,27 @@ &__buttons { height: 56px } &__button { + @include icon-button; background: $top-bar-color; color: $top-bar-icon-color; - margin: 8px 10px; - padding: 10px 12px; + padding: 8px; + margin: 10px; border-radius: 50%; + box-sizing: content-box; &.active { color: $top-bar-icon-active-color; - background: $icon-background-active-color; + background: $icon-bg-active-color; &:hover { color: $top-bar-icon-hover-color; - background: $icon-background-hover-color; + background: $icon-bg-hover-color; } } &:hover { color: $top-bar-icon-hover-color; - background: $icon-background-hover-color; + background: $icon-bg-hover-color; } } @@ -93,6 +99,7 @@ &__wrapper { @include shadow-4dp; border-radius: $bar-radius; + opacity: $bar-transparency; .announcements { border-top: 1px solid $border-color } @@ -105,11 +112,11 @@ &__collapsible { color: $ui-text-color; - background: $card-background-color; + background: $card-bg-color; border-top: 1px solid $border-color; &-inner { - background: $card-background-color; + background: $card-bg-color; padding: 16px; } @@ -119,9 +126,9 @@ &__back-button { background: $top-bar-color; color: $top-bar-icon-color; - padding: 8px; - margin: auto 0; - border-radius: 50%; + margin: 8px 10px; + padding: 10px; + font-size: 20px; span { display: none } } @@ -129,21 +136,22 @@ .column-subheading { color: $section-text-color; - background: $background-color; + background: $bg-color; padding: 12px 16px; + margin-top: 8px; border-top: 1px solid $border-color; } .column-link { color: $ui-text-color; - background: $background-color; + background: $bg-color; padding: 16px; border-radius: $nav-drawer-item-radius; - &:hover { background: $list-background-hover-color } + &:hover { background: $list-bg-hover-color } &:active, - &:focus { background: $list-background-active-color } + &:focus { background: $list-bg-active-color } &__icon { margin-right: 32px; @@ -153,9 +161,9 @@ &--transparent { &.active { color: $ui-text-color; - background: $menu-background-active-color; + background: $menu-bg-active-color; - &:hover { background: $menu-background-active-hover-color } + &:hover { background: $menu-bg-active-hover-color } .fa { color: $icon-color } } @@ -187,18 +195,25 @@ padding: 16px; span { visibility: hidden } // hide "back" string + + &--slim-button { top: -54px } } .column-inline-form { padding: 16px 0 16px 16px; - background: $card-background-color; + background: $card-bg-color; .icon-button { margin: 0 16px } } +.columns-area { + @include bg-image; + background-size: contain; +} + .setting-text { color: $primary-text-color; - background: $text-field-background-color; + background: $text-field-bg-color; border-radius: $bar-radius; &::placeholder { color: $tips-text-color } @@ -206,17 +221,17 @@ .empty-column-indicator { color: $secondary-text-color; - background: $card-background-color; + background: $card-bg-color; font-size: 16px; } .conversation { border-bottom: 1px solid $border-color; padding: 12px; - background: $list-background-inactive-color; + background: $list-bg-inactive-color; &--unread { - background: $list-background-color; + background: $list-bg-color; .conversation__content__relative-time { color: $info-text-color } } @@ -275,16 +290,18 @@ color: $icon-color; padding: 16px; - &:hover { background: $menu-background-hover-color } + &:hover { background: $menu-bg-hover-color } } .getting-started { - background: $background-color; + background: $bg-color; color: $ui-text-color; + opacity: $column-transparency; &__wrapper { - background: $background-color; + background: $bg-color; height: auto !important; + padding-bottom: 8px; border-bottom: 1px solid $border-color; } @@ -303,12 +320,14 @@ } &__trends { - background: $background-color; + background: $bg-color; margin-bottom: 0; + opacity: $column-transparency; h4 { color: $section-text-color; padding: 12px 16px; + margin-top: 8px; border-top: 1px solid $border-color; border-bottom: none; } @@ -358,7 +377,7 @@ } .announcements { - background: $card-background-color; + background: $card-bg-color; padding: 0; &__container { color: $primary-text-color } @@ -372,21 +391,29 @@ &__pagination { color: $ui-text-color; - padding: 8px 16px; - bottom: 8px; + padding: 16px; + bottom: 0; .icon-button { - font-size: 20px !important; - width: 20px !important; - height: 20px !important; - margin: 0 8px; + @include icon-button; + padding: 8px; + margin: 0 4px; + line-height: normal !important; + box-sizing: content-box; } + + span { vertical-align: super } } } .react-swipeable-view-container { transition: transform .3s cubic-bezier(0.165, 0.84, 0.44, 1) 0s, height 0.3s cubic-bezier(0.165, 0.84, 0.44, 1) 0s !important } +@include outlined-chip; + .reactions-bar { + margin-top: 16px; + width: calc(100% - 72px); + .emoji-button { color: $icon-button-color; font-size: 20px; @@ -403,7 +430,10 @@ &.active { background-color: $contained-chip-selected-color; - .reactions-bar__item__count { color: $ui-text-color } + + .reactions-bar__item__count { color: $chip-selected-text-color } + + &:hover { background-color: $contained-chip-selected-color } } &__emoji { @@ -414,7 +444,7 @@ &__count { font-size: 16px; - margin: 0 8px; + margin: 0 12px 0 8px; color: $secondary-text-color; } @@ -424,12 +454,13 @@ .notification { &__filter-bar { - background: $tab-background-color; + background: $tab-bg-color; border-bottom: 1px solid $border-color; z-index: 1; + opacity: $bar-transparency; button { - background: $tab-background-color; + background: $tab-bg-color; color: $tab-indicator-color; font-size: 16px; @@ -442,10 +473,10 @@ &::before, &:after { border: none } - &:focus { background: $tab-indicator-background-focus-color } + &:focus { background: $tab-indicator-bg-focus-color } } - &:hover { background: $tab-indicator-background-hover-color } + &:hover { background: $tab-indicator-bg-hover-color } } } diff --git a/src/mastodon-material/theme/components.scss b/src/mastodon-material/theme/components.scss index ae5bfe1..85c59e9 100644 --- a/src/mastodon-material/theme/components.scss +++ b/src/mastodon-material/theme/components.scss @@ -4,6 +4,7 @@ @import '../custom_color', '../custom_layout'; @import 'mixins'; +.modal-root { transition: opacity .25s cubic-bezier(0.0,0.0,0.2,1) } .drawer { &__header { @@ -11,11 +12,12 @@ background: $top-bar-color; border-radius: $nav-bar-radius; justify-content: space-around; + opacity: $bar-transparency; a { transition: none } a:hover { - background: $icon-background-hover-color; + background: $icon-bg-hover-color; border-radius: 50%; } } @@ -40,14 +42,15 @@ } &__inner { - background: $card-background-color; + background: $card-bg-color; + opacity: $column-transparency; &.darker { - background: $card-background-color; + background: $card-bg-color; position: inherit; } - &__mastodon { background: $card-background-color } + &__mastodon { background: $card-bg-color } } } @@ -57,6 +60,7 @@ color: $tips-text-color; border-radius: $search-bar-radius; padding: 12px 12px 12px 40px; + opacity: $bar-transparency; &:focus { @include shadow-2dp; @@ -64,6 +68,8 @@ color: $search-bar-text-color; } + &:hover { @include search-bar-hover } + &::placeholder { color: $tips-text-color } } @@ -112,15 +118,15 @@ .search-results { &__header { color: $secondary-text-color; - background-color: $card-background-color; + background-color: $card-bg-color; padding: 16px; - .fa { margin-right: 8px } + .fa { margin-right: 16px } } &__section { h5 { - background: $card-background-color; + background: $card-bg-color; border-bottom: 1px solid $border-color; padding: 16px; color: $section-text-color; @@ -137,6 +143,17 @@ strong { color: $ui-text-color; } + + .navigation-bar__actions .compose__action-bar .icon-button { + width: 36px !important; + height: 36px !important; + padding: 8px; + + &.active { + color: $icon-hover-color; + background: $icon-bg-active-color; + } + } } .navigation-panel hr { @@ -144,9 +161,11 @@ margin: 8px 0; } +.flex-spacer { margin: 8px 0 } + .dropdown-menu { @include shadow-8dp; - background: $menu-background-color; + background: $menu-bg-color; padding: 8px 0; border-radius: $menu-radius; @@ -155,11 +174,11 @@ &__item a { font-size: 14px; padding: 8px 16px; - background: $menu-background-color; + background: $menu-bg-color; color: $menu-text-color; &:hover, &:active { - background: $menu-background-hover-color; + background: $menu-bg-hover-color; color: $menu-text-color; } } @@ -173,7 +192,7 @@ .compose-form { .autosuggest-textarea { &__textarea { - background: $text-field-background-color; + background: $text-field-bg-color; color: $ui-text-color; border-radius: $card-radius; @@ -182,7 +201,7 @@ &__suggestions { @include shadow-1dp; - background: $menu-background-color; + background: $menu-bg-color; color: $ui-text-color; border-radius: $card-radius; font-size: 16px; @@ -192,40 +211,76 @@ padding: 8px; border-radius: 0; - &:hover { background: $menu-background-hover-color } + &:hover { background: $menu-bg-hover-color } &.selected, &:focus, - &:active { background: $menu-background-active-color } + &:active { background: $menu-bg-active-color } } } } - .spoiler-input__input { - color: $ui-text-color; - background: $card-background-color; + .spoiler-input { + &.spoiler-input--visible { margin-bottom: 8px } - &::placeholder { color: $tips-text-color } + &__input { + color: $ui-text-color; + background: $card-bg-color; + border-bottom: 1px solid $border-color; + border-radius: 0; + + &::placeholder { color: $tips-text-color } + } } .compose-form { &__warning { - @include shadow-1dp; color: $secondary-text-color; - background: $card-background-color; + background: $card-bg-color; padding: 16px; + border: 1px solid $border-color; + border-radius: $card-radius; + box-shadow: none; a { color: $link-text-color } } &__modifiers { - background: $card-background-color; + background: $card-bg-color; color: $tips-text-color; + + .compose-form { + &__upload-thumbnail { border-radius: 0 } + + &__upload__actions { + @include material-transition; + + .icon-button { + color: $media-icon-color; + font-size: 16px; + + &:hover { background-color: transparent } + } + } + } } &__buttons-wrapper { - background: $card-background-color; + background: $card-bg-color; color: $tips-text-color; + padding: 8px; + + .icon-button { + @include icon-button; + padding: 8px; + } + + .text-icon-button { + width: 20px !important; + height: 20px !important; + padding: 8px; + line-height: 20px !important; + } } &__poll-wrapper { @@ -235,7 +290,7 @@ select { color: $ui-text-color; - background-color: $background-color; + background-color: $bg-color; border: 0; &:focus { border-color: $border-active-color } @@ -243,66 +298,79 @@ .button.button-secondary { box-shadow: none; - color: $outlined-button-color; - border-color: $outlined-button-color; - - &:hover { background-color: $outlined-button-hover-color } - - &:active { background-color: $outlined-button-active-color } - - &:focus { background-color: $outlined-button-color } + color: $text-button-color; + &:hover { background-color: $text-button-hover-color } + &:active, + &:focus { background-color: $text-button-focus-color } } - } - &__utilBtns { padding-top: 0 } + .poll__footer { border-top: none } + } &__publish .compose-form__publish-button-wrapper { box-shadow: none } } } -.no-reduce-motion .spoiler-input { - transition-duration: .2s, .2s; -} +.no-reduce-motion .spoiler-input { transition-duration: .2s, .2s } .poll { + .button { margin-right: 8px } + + li { margin-bottom: 0 } + &__input { - border: 2px solid $control-border-color; + border: none; width: 20px; height: 20px; flex: 0 0 20px; - margin: 8px; - - &.checkbox { border-radius: 2px } - - &:focus, - &:hover { border: 2px solid $control-border-color } + padding: 18px; + margin: 0 2px; + background: radial-gradient(circle, transparent, transparent 7px, $control-border-color 8px, $control-border-color 9px, transparent 10px, transparent); + + &:hover { background: radial-gradient(circle, $control-border-hover-color, $control-border-hover-color 7px, $control-border-color 8px, $control-border-color 9px, $control-border-hover-color 10px, $control-border-hover-color)} + + &.active { background: radial-gradient(circle, $control-border-active-color, $control-border-active-color 4px, transparent 5px, transparent 7px, $control-border-active-color 8px, $control-border-active-color 9px, transparent 10px, transparent) } + + &.active:hover { background: radial-gradient(circle, $control-border-hover-color, $control-border-hover-color 7px, $control-border-color 8px, $control-border-color 9px, $control-border-hover-color 10px, $control-border-hover-color) } + + &.checkbox { + border-radius: 2px; + border: 2px solid $control-border-color; + padding: 8px; + margin: 8px 10px; + background: none; + } } &__text input[type=text] { color: $ui-text-color; - background: $text-field-background-color; + background: $text-field-bg-color; border: 1px solid $border-color; padding: 8px 12px; &:focus { border-color: $border-active-color } } - &__option input[type=text] { - color: $primary-text-color; - background: $text-field-background-color; - border: none; - border-radius: 2px; - padding: 8px 16px; + &__option { + padding: 16px 0 8px; + + input[type=text] { + color: $primary-text-color; + background: $text-field-bg-color; + border: none; + border-radius: 2px; + padding: 8px 16px; + } } &__chart { border-radius: 0; - background: $poll-bar-color; + background: $progress-indicator-track-color; - &.leading { background: $poll-bar-leading-color } + &.leading { background: $progress-indicator-color } } &__footer { @@ -316,7 +384,7 @@ .privacy-dropdown { &.active .privacy-dropdown__value.active { - background: $icon-background-hover-color; + background: $icon-bg-hover-color; border-radius: 50%; box-shadow: none; @@ -325,7 +393,7 @@ &__dropdown { @include shadow-8dp; - background: $menu-background-color; + background: $menu-bg-color; border-radius: $dialog-radius; } @@ -345,7 +413,7 @@ } &.active { - background: $menu-background-active-color; + background: $menu-bg-active-color; color: $icon-hover-color; .privacy-dropdown__option__content { @@ -355,7 +423,7 @@ } &:hover { - background: $menu-background-active-color; + background: $menu-bg-active-color; .privacy-dropdown__option__content { color: $secondary-text-color; @@ -366,7 +434,7 @@ } &:hover { - background: $menu-background-hover-color; + background: $menu-bg-hover-color; color: $icon-hover-color; .privacy-dropdown__option__content { @@ -386,7 +454,7 @@ box-shadow: none; border: 1px solid $border-color; border-radius: $card-radius; - background: $card-background-color; + background: $card-bg-color; padding: 16px; &__header { margin-bottom: 4px } @@ -400,7 +468,11 @@ &-avatar { margin-right: 8px } } - &__content { color: $primary-text-color } + &__content { + color: $primary-text-color; + + p { margin-bottom: 16px } + } } .attachment-list { @@ -410,14 +482,15 @@ } .block-modal { - background: $card-background-color; + @include shadow-24dp; + background: $card-bg-color; color: $ui-text-color; border-radius: $card-radius; &__container { padding: 24px } &__action-bar { - background: $card-background-color; + background: $card-bg-color; padding: 8px; justify-content: flex-end; } @@ -451,7 +524,7 @@ } .filter-form { - background: $background-color; + background: $bg-color; color: $ui-text-color; &__column { padding: 8px 16px } @@ -466,18 +539,23 @@ &__img { border-radius: $card-radius $card-radius 0 0 } &__bar { - background: $card-background-color; + background: $card-bg-color; padding: 8px 16px; .display-name { margin-left: 16px; + strong { + font-size: 16px; + color: $primary-text-color; + } + span { color: $secondary-text-color } } } &__extra { - background: $card-background-color; + background: $card-bg-color; border-radius: 0 0 $card-radius $card-radius; .account__header__content { @@ -491,7 +569,8 @@ } .mute-modal { - background: $card-background-color; + @include shadow-24dp; + background: $card-bg-color; color: $ui-text-color; border-radius: $card-radius; @@ -500,13 +579,14 @@ &__explanation { margin-top: 16px } &__action-bar { - background: $card-background-color; + background: $card-bg-color; padding: 8px; justify-content: flex-end; } &__cancel-button { box-shadow: none !important; + color: $text-button-color; background: transparent; margin: 0 8px; @@ -531,4 +611,19 @@ margin: 0 0 0 12px; } } +} + +.upload-progress { + color: $ui-text-color; + + &__backdrop { + border-radius: 0; + background: $progress-indicator-track-color; + margin-top: 6px; + } + + &__tracker { + border-radius: 0; + background: $progress-indicator-color; + } } \ No newline at end of file diff --git a/src/mastodon-material/theme/containers.scss b/src/mastodon-material/theme/containers.scss new file mode 100644 index 0000000..09af289 --- /dev/null +++ b/src/mastodon-material/theme/containers.scss @@ -0,0 +1,57 @@ +@charset "UTF-8"; +@import 'base_config'; +@import '../custom_config'; +@import '../custom_color', '../custom_layout'; +@import 'mixins'; + + +.public-layout { + .header { + @include shadow-4dp; + background: $top-bar-color; + border-radius: $nav-bar-radius; + margin: 16px 0; + + .brand:hover { background: $tab-indicator-bg-hover-color } + + .nav-link, + .nav-link.optional { + color: $top-bar-text-color; + + &:hover { + background: $tab-indicator-bg-hover-color; + text-decoration: none; + } + } + + .nav-button { + background: transparent; + margin: 0; + border-radius: 0; + + &:hover { background: $tab-indicator-bg-hover-color } + } + + .detailed-status__meta { margin-top: 16px } + } + + .detailed-status { padding: 16px } + + .footer { + padding-top: 16px; + padding-bottom: 64px; + color: $ui-text-color; + + h4 { color: $ui-text-color } + + ul a { color: $secondary-text-color } + + .grid .column-2 h4 a { color: $ui-text-color } + + .brand { + svg { fill: $icon-color } + + &:hover svg { fill: $icon-hover-color } + } + } +} \ No newline at end of file diff --git a/src/mastodon-material/theme/emoji-picker.scss b/src/mastodon-material/theme/emoji-picker.scss index 70e2275..8aacc7e 100644 --- a/src/mastodon-material/theme/emoji-picker.scss +++ b/src/mastodon-material/theme/emoji-picker.scss @@ -7,13 +7,13 @@ .emoji-picker-dropdown { &__menu { @include shadow-8dp; - background: $menu-background-color; + background: $menu-bg-color; border-radius: $menu-radius; } &__modifiers__menu { @include shadow-8dp; - background: $menu-background-color; + background: $menu-bg-color; border-radius: $menu-radius; button { @@ -31,33 +31,23 @@ border: 0 solid $border-color; &:first-child { - background: $menu-background-color; + background: $menu-bg-color; } } - &-anchors { - color: $icon-button-color; - padding: 0; - } - &-anchor { + color: $text-tab-indicator-color; padding: 10px 4px; - &-selected { - color: $icon-button-active-color; - } + &-bar { background-color: $icon-tab-indicator-active-color } - &-bar { - background-color: $tab-indicator-active-color; - } + &-selected { color: $icon-tab-indicator-hover-color } - &:hover { - color: $icon-button-hover-color; - } + &:hover { color: $icon-tab-indicator-hover-color } } &-search { - background: $menu-background-color; + background: $menu-bg-color; input { outline: none; @@ -76,16 +66,16 @@ &-scroll { padding: 0 8px 8px; - background: $menu-background-color; + background: $menu-bg-color; } - &-category-label span { - padding: 4px 6px; - background: $menu-background-color; - } + &-category { + &-label span { + padding: 4px 6px; + background: $menu-bg-color; + } - &-emoji:hover::before { - background-color: $icon-background-hover-color; + .emoji-mart-emoji:hover::before { background-color: $icon-bg-hover-color } } &-no-results { color: $secondary-text-color } diff --git a/src/mastodon-material/theme/icons.scss b/src/mastodon-material/theme/icons.scss index 1367647..9877675 100644 --- a/src/mastodon-material/theme/icons.scss +++ b/src/mastodon-material/theme/icons.scss @@ -16,26 +16,8 @@ &__icon.fa-fw { color: $icon-color } } - -.fa { vertical-align: sub } // adjust material icon font baseline to other font - -.fa.fa-times, -.fa.fa-eraser, -.fa.fa-plus { vertical-align: middle } // adjustment exception - -.fa.fa-check { vertical-align: initial } - .fa.fa-lock { text-transform: none } -.fa-fw { width: 16px } - -// icon in tab settings -.fa.fa-chevron-left.column-back-button__icon.fa-fw, -.text-btn.column-header__setting-btn .fa.fa-eraser { - font-size: 20px; - margin-right: 16px; -} - .icon-with-badge__badge { background: $badge-color; border: none; diff --git a/src/mastodon-material/theme/material-icons.scss b/src/mastodon-material/theme/material-icons.scss index 7478562..b416d3a 100644 --- a/src/mastodon-material/theme/material-icons.scss +++ b/src/mastodon-material/theme/material-icons.scss @@ -3,8 +3,17 @@ @import '../custom_config', '../icon_config'; @import '../custom_color', '../custom_layout'; @import 'functions'; +@import 'mixins'; +@include icon-font; + +.fa-fw { + width: 20px; + height: 20px; + font-size: 20px; +} + .fa { &.fa-bars, &.fa-navicon, @@ -64,8 +73,20 @@ &.fa-compress, &.fa-user-times, &.fa-check, - &.fa-quote-right { - font-family: "Material Icons"; + &.fa-quote-right, + &.fa-upload, + &.fa-comments, + &.fa-angle-right { + @include icon-font-style; + line-height: 1; + letter-spacing: normal; + text-transform: none; + display: inline-block; + white-space: nowrap; + word-wrap: normal; + direction: ltr; + font-feature-settings: 'liga'; + -webkit-font-smoothing: antialiased; } } @@ -118,9 +139,12 @@ &.fa-download::before { content: "file_download" } &.fa-arrows-alt::before { content: "fullscreen" } &.fa-compress::before { content: "fullscreen_exit" } - &.fa-user-times::before { content: "delete" } + &.fa-user-times::before { content: "person_remove" } &.fa-check::before { content: "check" } &.fa-quote-right::before { content: "format_quote" } + &.fa-upload::before { content: "file_upload" } + &.fa-comments::before { content: "forum" } + &.fa-angle-right::before { content: "chevron_right" } } // bookmark icon @@ -148,12 +172,77 @@ .status__action-bar-button.star-icon.icon-button.active { color: $favorite-icon-color } // boost icon -.no-reduce-motion button.icon-button i.fa-retweet { - height: 18px; - width: 18px; +button.icon-button i.fa-retweet { + height: 20px; + width: 20px; transition: none; - background-image: url('data:image/svg+xml;utf8,'); + background-image: url('data:image/svg+xml;utf8,'); +} + +button.icon-button i.fa-retweet:hover { + background-image: url('data:image/svg+xml;utf8,'); +} + +button.icon-button.disabled i.fa-retweet, +button.icon-button.disabled i.fa-retweet:hover { + background-image: url('data:image/svg+xml;utf8,'); } // dropdown icon -.compose-form__poll-wrapper select { background: url('data:image/svg+xml;utf8,') no-repeat right 8px center/auto 16px} \ No newline at end of file +.compose-form__poll-wrapper select { background: url('data:image/svg+xml;utf8,') no-repeat right 8px center/auto 16px} + +// icon in tab settings +.text-btn.column-header__setting-btn { + .fa { + vertical-align: middle; + + &.fa-eraser { margin-right: 8px } // clear notification + } +} + +// top bar icons align +.fa.fa-bell.column-header__icon.fa-fw, +.fa.fa-home.column-header__icon.fa-fw, +.fa.fa-users.column-header__icon.fa-fw, +.fa.fa-globe.column-header__icon.fa-fw, +.fa.fa-bars.column-header__icon.fa-fw, +.fa.fa-bookmark.column-header__icon.fa-fw, +.fa.fa-address-book-o.column-header__icon.fa-fw, +.fa.fa-envelope.column-header__icon.fa-fw, +.fa.fa-star.column-header__icon.fa-fw { vertical-align: text-bottom } + +// top bar icons in single column mode +.tabs-bar__link { + .fa.fa-home.fa-fw, + .fa.fa-bell.fa-fw, + .fa.fa-users.fa-fw, + .fa.fa-globe.fa-fw { vertical-align: text-bottom } +} + +// getting-started and side bar icons +.column-link .fa, +.column-link--transparent .fa { vertical-align: text-bottom } + +// uploaded media icons align +.compose-form .compose-form__modifiers .compose-form__upload__actions .icon-button .fa { + font-size: 20px; + vertical-align: text-bottom; +} + +// search results icons align +.search-results__header .fa { vertical-align: text-bottom } + +// read more icon +.status__content__read-more-button .fa { vertical-align: bottom } + +// status detail icon +.detailed-status .fa { + font-size: 16px; + vertical-align: text-bottom; +} + +// status scope +.status__visibility-icon .fa { + font-size: 16px; + vertical-align: text-bottom; +} \ No newline at end of file diff --git a/src/mastodon-material/theme/media.scss b/src/mastodon-material/theme/media.scss index 9d02038..f231eb8 100644 --- a/src/mastodon-material/theme/media.scss +++ b/src/mastodon-material/theme/media.scss @@ -6,35 +6,37 @@ .media-gallery { - border-radius: 0; + border-radius: $media-radius; - &__item { border-radius: 0 } + &__item { border-radius: $media-radius } } .media-modal__close { - align-content: center; - &.icon-button { background: transparent; color: $media-icon-color; - text-align: center !important; font-size: 24px !important; - width: 48px !important; - height: 48px !important; - border: 12px; + width: 24px !important; + height: 24px !important; + padding: 8px; + box-sizing: content-box; + line-height: normal !important; &:hover { - background: $media-icon-background-hover-color; + background: $media-icon-bg-hover-color; color: $media-icon-hover-color; } - .fa-fw { width: 24px } + .fa-fw { + width: 24px; + height: 24px; + } } } .media-modal { &__nav { - background: $media-icon-background-color; + background: $media-icon-bg-color; color: $media-icon-color; height: 48px; width: 48px; @@ -50,6 +52,12 @@ &--active { background-color: $media-page-indicator-active-color } } + + &__meta { + bottom: 24px; + + a { color: $media-icon-color } + } } .video-player { @@ -75,7 +83,7 @@ } &__handle { - transition: opacity .25s cubic-bezier(0.0,0.0,0.2,1); + @include material-transition; background-color: $primary-color; box-shadow: none; } @@ -93,7 +101,7 @@ } &__handle { - transition: opacity .25s cubic-bezier(0.0,0.0,0.2,1); + @include material-transition; background-color: $primary-color; box-shadow: none; } diff --git a/src/mastodon-material/theme/modal.scss b/src/mastodon-material/theme/modal.scss index 2748c87..e9a9176 100644 --- a/src/mastodon-material/theme/modal.scss +++ b/src/mastodon-material/theme/modal.scss @@ -6,10 +6,10 @@ .confirmation-modal { - background: $card-background-color; + @include shadow-24dp; + background: $card-bg-color; color: $ui-text-color; border-radius: $dialog-radius; - width: 300px; &__container { text-align: left; @@ -18,7 +18,7 @@ &__action-bar { justify-content: flex-end; - background: $card-background-color; + background: $card-bg-color; padding: 8px; } @@ -42,7 +42,7 @@ } .actions-modal { - background: $card-background-color; + background: $card-bg-color; border-radius: $card-radius; ul li:not(:empty) a { @@ -50,7 +50,7 @@ font-size: 16px; &:hover { - background: $card-background-hover-color; + background: $card-bg-hover-color; color: $ui-text-color; } } @@ -58,7 +58,7 @@ .dropdown-menu__separator { border-bottom-color: $border-color } .status { - background: $card-background-color; + background: $card-bg-color; border-bottom-color: $border-color; padding-top: 12px; padding-bottom: 12px; @@ -71,7 +71,8 @@ } .report-modal { - background: $card-background-color; + @include shadow-24dp; + background: $card-bg-color; color: $ui-text-color; border-radius: $card-radius; diff --git a/src/mastodon-material/theme/responsive.scss b/src/mastodon-material/theme/responsive.scss index 9ae3040..8618f7e 100644 --- a/src/mastodon-material/theme/responsive.scss +++ b/src/mastodon-material/theme/responsive.scss @@ -39,6 +39,10 @@ background: $floating-action-button-color; color: $floating-action-button-icon-color; font-size: 24px; + width: $fab-size; + height: $fab-size; + bottom: 16px; + right: 16px; &:hover { background: $floating-action-button-hover-color } @@ -60,6 +64,11 @@ } } +// small size screen +@media screen and (max-width: 415px) { + .public-layout { padding-top: 64px } +} + // middle size screen @media screen and (min-width: 415px) { .tabs-bar { @@ -72,23 +81,30 @@ } } - .columns-area__panels__main { - @include shadow-1dp; - padding: 0; + .columns-area__panels { + &__main { + @include shadow-1dp; + padding: 0; + } + + &__pane { padding: 0 16px } } } +//single column mode @media screen and (min-width: 631px) { .tabs-bar__link { &:hover { - background: $tab-indicator-background-hover-color; - border-bottom-color: $tab-background-color; + background: $tab-indicator-bg-hover-color; + border-bottom-color: transparent; } &:active, &:focus { - background: $tab-indicator-background-focus-color; - border-bottom-color: $tab-background-color; + background: $tab-indicator-bg-focus-color; + border-bottom-color: $tab-bg-color; } + + &.active { border-bottom-color: $tab-indicator-active-color } } } \ No newline at end of file diff --git a/src/mastodon-material/theme/statuses.scss b/src/mastodon-material/theme/statuses.scss index 65b5fcc..e6e5c40 100644 --- a/src/mastodon-material/theme/statuses.scss +++ b/src/mastodon-material/theme/statuses.scss @@ -6,7 +6,7 @@ .status { - padding: 12px 12px 12px 70px; + padding: 12px 12px 4px 70px; border-bottom: 1px solid $border-color; &__expand { width: 70px } @@ -40,6 +40,8 @@ &.unhandled-link { color: $link-text-color } } + p { margin-bottom: 16px } + .status__content__spoiler-link { background: transparent; @@ -69,9 +71,47 @@ } &__action-bar { - &__counter__label { - font-size: 14px; - color: $info-text-color; + margin-top: 4px; + + &__counter { + margin-right: 6px; + + &__label { + font-size: 14px; + color: $info-text-color; + } + } + } + + &__action-bar-button { + margin-right: 6px; + + &.icon-button { + @include icon-button; + padding: 8px; + box-sizing: content-box; + } + } + + &__action-bar-dropdown { + width: 36px !important; + height: 36px !important; + box-sizing: content-box; + + .icon-button { + @include icon-button; + padding: 8px; + box-sizing: content-box; + + &.active { + color: $icon-hover-color; + background: $icon-bg-active-color; + } + + &:hover { + color:$icon-hover-color; + background: $icon-bg-hover-color; + } } } @@ -86,12 +126,15 @@ background: transparent; border-bottom-color: $border-color; } + + &__visibility-icon { color: $icon-color } } .status-card { color: $icon-color; border-color: $border-color; outline: none; + margin-top: 16px; &__image { background: transparent; @@ -110,7 +153,7 @@ &__actions { &>div { - background: $media-icon-background-color; + background: $media-icon-bg-color; border-radius: $button-radius; } @@ -136,9 +179,24 @@ &:hover { background-color: transparent !important } } - &:hover { background-color: $card-background-color } + &.horizontal { + border-radius: 0; + + .status-card { + &__image-preview { border-radius: 0 } + + &__image-image { border-radius: 0 } + } + } +} + +a.status-card { + &:hover { background-color: $card-bg-color } } +.embed .status, +.public-layout .status { padding: 16px 16px 16px 80px } + // Detailed status in mobile .status.light { .status { @@ -152,9 +210,11 @@ } .detailed-status { - background: $card-background-color; + background: $card-bg-color; padding: 16px; + &.detailed-status--flex.detailed-status-public { border-radius: $card-radius } + &__display-name { color: $secondary-text-color; @@ -167,19 +227,54 @@ } &__action-bar { - background: $card-background-color; + background: $card-bg-color; border-top: none; border-bottom: 1px solid $border-color; - padding: 12px 0; + padding: 8px 0; + } + + &__action-bar-dropdown { + .icon-button { + @include icon-button; + padding: 8px; + box-sizing: content-box; + + &.active { + color: $icon-hover-color; + background: $icon-bg-active-color; + } + } } &__button { - .icon-button { font-size: 20px !important } + .icon-button { + @include icon-button; + padding: 8px; + box-sizing: content-box; + } } } // search user trends .display-name { - &__html { color: $primary-text-color !important } + &__html { color: $primary-text-color } &__account { color: $secondary-text-color } -} \ No newline at end of file +} + +.activity-stream { + @include shadow-1dp; + margin-bottom: 16px; + border-radius: $card-radius; + + .entry { + background: $card-bg-color; + + &:first-child { + .detailed-status, + .load-more, + .status { border-radius: $card-radius $card-radius 0 0 } + } + } +} + +.entry.entry-center { border-bottom: 1px solid $border-color } \ No newline at end of file diff --git a/src/mastodon-material/theme/theme.scss b/src/mastodon-material/theme/theme.scss index f922765..0980ed9 100644 --- a/src/mastodon-material/theme/theme.scss +++ b/src/mastodon-material/theme/theme.scss @@ -1,4 +1,10 @@ +/* +* Mastodon Material 0.2.0 +* Author: Rintan, Genbu Project +* Copyright (C) 2020 Rintan, Genbu Project +*/ + @charset "UTF-8"; -@import 'account', 'basics', 'button', 'columns', 'components', 'base_config', 'control', 'emoji-picker', 'icons', 'media', 'modal', 'responsive', 'statuses', 'variables'; \ No newline at end of file +@import 'account', 'basics', 'button', 'columns', 'containers', 'components', 'base_config', 'control', 'emoji-picker', 'icons', 'media', 'modal', 'responsive', 'statuses', 'variables', 'widgets'; \ No newline at end of file diff --git a/src/mastodon-material/theme/widgets.scss b/src/mastodon-material/theme/widgets.scss new file mode 100644 index 0000000..4abdfba --- /dev/null +++ b/src/mastodon-material/theme/widgets.scss @@ -0,0 +1,32 @@ +@charset "UTF-8"; +@import 'base_config'; +@import '../custom_config'; +@import '../custom_color', '../custom_layout'; +@import 'mixins'; + + +.hero-widget { + @include shadow-2dp; + margin-bottom: 16px; + + &__img { + border-radius: $card-radius $card-radius 0 0; + background: $card-bg-color; + + img { border-radius: $card-radius $card-radius 0 0 } + } + + &__text { + background: $card-bg-color; + padding: 16px; + color: $primary-text-color; + border-radius: 0 0 $card-radius $card-radius; + } +} + +.endorsements-widget { + padding-bottom: 8px; + margin-bottom: 8px; +} + +.trends-widget h4 { color: $section-text-color } \ No newline at end of file