├── LICENSE.md ├── README.md ├── SCSS ├── kkt-angely.scss ├── kkt-angely │ ├── diff.scss │ └── variables.scss ├── kkt-checkmate.scss ├── kkt-checkmate │ ├── diff.scss │ └── variables.scss ├── kkt-dark.scss ├── kkt-dark │ ├── diff.scss │ └── variables.scss ├── kkt.scss └── kkt │ ├── _mixins.scss │ ├── banner.scss │ ├── boost.scss │ ├── diff.scss │ └── variables.scss ├── V9 (CSS) ├── kirakiratter.css ├── kkt-userstyles.css └── meiryoui.css ├── checklist.md └── img ├── RAW ├── kirakiratter_banner.ai └── kirakirtter.psd ├── background.svg ├── drawer.svg └── new_ribbon_minified.svg /LICENSE.md: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2017 Salil Gupta 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # kktCSS 2 | 3 | CSS stylesheet for Mastodon to look like Kirakiratter (キラキラッター) from the popular idol franchise, Aikatsu! (アイカツ!). 4 | 5 | Join the Kirakiratter community: https://kirakiratter.com 6 | 7 | マストドンをTVアニメ「アイカツ！」に登場するSNS、キラキラッター風のカラーテーマに変更するCSSです。 8 | 9 | キラキラッターへのアクセスはこちら。 https://kirakiratter.com 10 | 11 | ## Installation Instructions: 12 | 13 | Kirakiratter users will have this theme by default, but if you would like to use it on another Mastodon instance, read the following. 14 | 15 | ### Desktop 16 | 17 | Install the "Stylish" extension: 18 | 19 | [On Chrome/Opera/Vivaldi](https://chrome.google.com/webstore/detail/stylish-custom-themes-for/fjnbnpbmkenffdnngjfgmeleoegfcffe) -- Opera users will need the ["Download Chrome Extension"](https://addons.opera.com/en/extensions/details/download-chrome-extension-9/) extension prior to installing Stylish. 20 | [On Firefox](https://addons.mozilla.org/en-US/firefox/addon/stylish/) 21 | 22 | Then visit [Userstyles.org](https://userstyles.org/styles/141350/kirakiratter), hit "Install with Stylish" and you're done! 23 | 24 | Or you can create a new style, configure it to take effect on the instance of your choice, and copy/paste the contents of [kirakiratter.css](https://raw.githubusercontent.com/MasterDalK/kktCSS/master/kirakiratter.css) into the stylesheet editor. 25 | 26 | ### Mobile 27 | 28 | Create a new bookmark using the following as the URL: 29 | 30 | `javascript:(function(){var s=document.createElement('link');s.setAttribute('href','https://masterdalk.github.io/kktCSS/kirakiratter.css');s.setAttribute('rel','stylesheet');s.setAttribute('type','text/css');document.getElementsByTagName('head')[0].appendChild(s);})()` 31 | 32 | Visit your instance of choice and _then_ go to the bookmark you just created to load the stylesheet. 33 | 34 | You'll need to do this every time you access the instance via mobile. If you have a better method for using a custom stylesheet on mobile, please feel free to suggest in GitHub Issues or on Kirakiratter! 35 | 36 | ## Installation Instructions (Japanese): 37 | 38 | 氷上スミレ( https://kirakiratter.com/@sumire )です。 39 | 40 | キラキラッターは、このkktCSSがテーマとして使われることになって、いつでも素敵なCSSコーデ(ィング)が楽しめるようになったよ。 41 | 42 | 他のインスタンスでもkktCSSを使いたい人もいるかもしれないから、使い方を解説するね。 43 | 44 | ### Desktop 45 | 46 | まずはブラウザに"Stylish"をインストールしちゃおう！ 47 | 48 | [Chrome/Opera/Vivaldi用](https://chrome.google.com/webstore/detail/stylish-custom-themes-for/fjnbnpbmkenffdnngjfgmeleoegfcffe) 49 | (Operaの人は ["Download Chrome Extension"](https://addons.opera.com/en/extensions/details/download-chrome-extension-9/) も使ってインストールしてね) 50 | [Firefox用](https://addons.mozilla.org/en-US/firefox/addon/stylish/) 51 | 52 | インストールが終わったら、 [Userstyles.orgのkktCSSページ](https://userstyles.org/styles/141350/kirakiratter) の[Install with Stylish]ボタンを押して...、素敵なキラキラッターに着飾れたかな。楽しんでね。 53 | Stylishはデザインを自分で編集できるから、新しいCSSコーデ(ィング)に挑戦することだってできちゃうんだ。 54 | [kirakiratter.com+kktCSS+キラキラブックマークレットで、キラキラッターを楽しもう！](http://qiita.com/emerald_magic/items/27d233870e04d791fe2b) も試してみて 55 | 56 | ### Mobile 57 | 58 | 下の文字列でブックマークを作って、キラキラブックマークレットを用意してね 59 | 60 | `javascript:(function(){var s=document.createElement('link');s.setAttribute('href','https://masterdalk.github.io/kktCSS/kirakiratter.css');s.setAttribute('rel','stylesheet');s.setAttribute('type','text/css');document.getElementsByTagName('head')[0].appendChild(s);})()` 61 | 62 | 名前は短くて、後で打ち込みやすいのにするのがおすすめ。 63 | 私は「kkt」で登録してる。 64 | 65 | 用意したら、kirakiratter.comを開いて、そこからブックマークを開くとデザインが変わるよ。 66 | Chrome(Android/iOS)みたいなブックマーク一覧を新しいページで開いちゃうブラウザはコツがあって... 67 | kirakiratter.comを開いた状態から、アドレス入力欄を出して、kkまで打ち込んで出てきたブックマークをクリックすればデザインが変わる、かな 68 | 69 | ページを開くたびにブックマークから開かないとだめだけど、こればかりは仕方ないかな... 70 | 素敵なCSSでキラキラッターをもっと楽しんでね！ 71 | -------------------------------------------------------------------------------- /SCSS/kkt-angely.scss: -------------------------------------------------------------------------------- 1 | // Based heavily on the original kktCSS by @MasterDalK 2 | // and other contributors: @pomo, @sumire, @bitmap, @hisagi, @lae, @takenoko, @unarist 3 | // 4 | // https://github.com/MasterDalK/kktCSS 5 | @import 'kkt-angely/variables'; 6 | @import 'kkt/_mixins'; 7 | @import 'application'; 8 | @import 'kkt/boost'; 9 | @import 'kkt/banner'; 10 | @import 'kkt/diff'; 11 | @import 'kkt-angely/diff'; 12 | -------------------------------------------------------------------------------- /SCSS/kkt-angely/diff.scss: -------------------------------------------------------------------------------- 1 | // Change the text colors on inverted background 2 | .privacy-dropdown__option.active .privacy-dropdown__option__content, 3 | .privacy-dropdown__option.active .privacy-dropdown__option__content strong, 4 | .privacy-dropdown__option:hover .privacy-dropdown__option__content, 5 | .privacy-dropdown__option:hover .privacy-dropdown__option__content strong, 6 | .dropdown-menu__item a:active, 7 | .dropdown-menu__item a:focus, 8 | .dropdown-menu__item a:hover, 9 | .actions-modal ul li:not(:empty) a.active, 10 | .actions-modal ul li:not(:empty) a.active button, 11 | .actions-modal ul li:not(:empty) a:active, 12 | .actions-modal ul li:not(:empty) a:active button, 13 | .actions-modal ul li:not(:empty) a:focus, 14 | .actions-modal ul li:not(:empty) a:focus button, 15 | .actions-modal ul li:not(:empty) a:hover, 16 | .actions-modal ul li:not(:empty) a:hover button, 17 | .admin-wrapper .sidebar ul ul a.selected, 18 | .simple_form .block-button, 19 | .simple_form .button, 20 | .simple_form button { 21 | color: $primary-text-color; 22 | } 23 | 24 | // Admin page 25 | .admin-wrapper { 26 | .sidebar { 27 | ul a { 28 | color: darken($darker-text-color, 20%); 29 | } 30 | } 31 | } 32 | 33 | .embed, 34 | .public-layout { 35 | .header { 36 | .nav-link { 37 | color: $primary-text-color; 38 | } 39 | } 40 | } 41 | 42 | .drawer { 43 | &__tab { 44 | color: $primary-text-color; 45 | 46 | &:hover { 47 | color: $darker-text-color; 48 | } 49 | } 50 | } 51 | 52 | .tabs-bar { 53 | &__link { 54 | color: $primary-text-color; 55 | 56 | &.active { 57 | color: $darker-text-color; 58 | } 59 | } 60 | } 61 | 62 | .navigation-bar { 63 | color: darken($ui-secondary-color,15%); 64 | 65 | strong { 66 | color: lighten($primary-text-color,10%); 67 | } 68 | } 69 | -------------------------------------------------------------------------------- /SCSS/kkt-angely/variables.scss: -------------------------------------------------------------------------------- 1 | // Commonly used web colors 2 | $black: #000000; // Black 3 | $white: #FFF; // White 4 | $success-green: #79bd9a !default; // Padua 5 | $error-red: #df405a !default; // Cerise 6 | $warning-red: #ff5050 !default; // Sunset Orange 7 | $gold-star: #ca8f04 !default; // Dark Goldenrod 8 | 9 | // Variables for defaults in UI 10 | $base-shadow-color: $black !default; 11 | $base-overlay-background: transparentize($black, 0.7) !default; 12 | $base-border-color: #fff9e4 !default; 13 | $simple-background-color: #fff9e4 !default; 14 | $valid-value-color: $success-green !default; 15 | $error-value-color: $error-red !default; 16 | 17 | // Tell UI to use selected colors 18 | $ui-base-color: #fbcdd4 !default; // Darkest 19 | $ui-base-lighter-color: darken($ui-base-color, 20%) !default; // Lighter darkest 20 | $ui-primary-color: #fcead6 !default; // Lighter 21 | $ui-secondary-color: #dcd2eb !default; // Lightest 22 | $ui-highlight-color: #ffb389 !default; 23 | 24 | // Variables for texts 25 | $primary-text-color: #c24d37 !default; 26 | $darker-text-color: #d6ab70 !default; 27 | $dark-text-color: #246db6 !default; 28 | $secondary-text-color: #3c87bd !default; 29 | $highlight-text-color: #fc7eb2 !default; 30 | $action-button-color: lighten($primary-text-color, 12%) !default; 31 | 32 | // For texts on inverted backgrounds 33 | $inverted-text-color: darken(saturate($darker-text-color, 15%), 10%) !default; 34 | $lighter-text-color: $primary-text-color !default; 35 | $light-text-color: $darker-text-color !default; 36 | 37 | // Custom 38 | $scrollbar-color: #9185b6; 39 | $panel-border: #fc7eb2; 40 | $panel-shadow: #e9c9aa; 41 | 42 | $banner-color: #fc7eb2; 43 | $banner-shadow: #FFF; 44 | 45 | $panel-background: linear-gradient(to bottom, desaturate(lighten(#82bedd, 35%), 10%) 0%, desaturate(lighten(#82bedd, 35%), 10%) 65%, desaturate(lighten(#82bedd, 25%), 5%) 100%); 46 | 47 | $panel-box-shadow: -1px -1px 0 $panel-shadow, 1px -1px 0 $panel-shadow, -1px 1px 0 $panel-shadow, 1px 1px 0 $panel-shadow; 48 | 49 | // Background Variables 50 | @function hex-color($color) { 51 | @if type-of($color) == 'color' { 52 | $color: str-slice(ie-hex-str($color), 4); 53 | } 54 | @return '%23' + unquote($color) 55 | } 56 | 57 | $base-color-diamonds: url("data:image/svg+xml,%3Csvg xmlns:rdf='http://www.w3.org/1999/02/22-rdf-syntax-ns%23' xmlns='http://www.w3.org/2000/svg' xmlns:cc='http://creativecommons.org/ns%23' xmlns:dc='http://purl.org/dc/elements/1.1/' height='114' viewBox='0 0 80 114' width='80' version='1.1'%3E %3Crect height='114' width='80' y='0' x='0' fill='#{hex-color($ui-base-color)}'/%3E %3Cpath fill='#{hex-color(desaturate(darken($ui-base-color, 10%), 5%))}' d='m0 57 40-57 40 57-40 57z'/%3E %3C/svg%3E"); 58 | 59 | $highlight-color-diamonds: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='28' width='20'%3E%3Crect height='28' width='20' y='0' x='0' fill='#{hex-color($ui-primary-color)}'/%3E%3Cpath d='m0 14 10-14 10 14-10 14z' fill='#{hex-color(darken($ui-primary-color, 5%))}'/%3E%3C/svg%3E"); 60 | 61 | $balloon-tail: url("data:image/svg+xml,%3Csvg width='12' height='14' xmlns='http://www.w3.org/2000/svg'%3E %3Cline id='svg_1' y2='12.412' x2='10.03575' y1='0.833' x1='10.03575' stroke-miterlimit='10' stroke-width='2' stroke='#{hex-color(desaturate(lighten($panel-shadow, 35%), 10%))}' fill='none'/%3E %3Cpath id='svg_2' d='m9.76,1c0,0 -4.8235,0.92675 -8,5.833c5.42675,1 8,5.334 8,5.334' stroke-miterlimit='10' stroke-linecap='round' stroke-width='2' stroke='#{hex-color($panel-border)}' fill='#{hex-color(desaturate(lighten($panel-shadow, 35%), 10%))}'/%3E %3C/svg%3E"); 62 | 63 | $muted-balloon-tail: url("data:image/svg+xml,%3Csvg width='12' height='14' xmlns='http://www.w3.org/2000/svg'%3E %3Cline id='svg_1' y2='12.412' x2='10.03575' y1='0.833' x1='10.03575' stroke-miterlimit='10' stroke-width='2' stroke='#{hex-color(desaturate(lighten($panel-shadow, 35%), 10%))}' fill='none'/%3E %3Cpath id='svg_2' d='m9.76,1c0,0 -4.8235,0.92675 -8,5.833c5.42675,1 8,5.334 8,5.334' stroke-miterlimit='10' stroke-linecap='round' stroke-width='2' stroke='#{hex-color(lighten($panel-border, 10%))}' fill='#{hex-color(desaturate(lighten($panel-shadow, 35%), 10%))}'/%3E %3C/svg%3E"); 64 | 65 | $black-background: linear-gradient(rgba(0,0,0,0.2), rgba(0,0,0,0.6) 45%, rgba(0,0,0,0.7) 65%, rgba(0,0,0,0.8)); 66 | $white-background: linear-gradient(rgba(255,255,255,0.2), rgba(255,255,255,0.6) 45%, rgba(255,255,255,0.7) 65%, rgba(255,255,255,0.8)); 67 | -------------------------------------------------------------------------------- /SCSS/kkt-checkmate.scss: -------------------------------------------------------------------------------- 1 | // Based heavily on the original kktCSS by @MasterDalK 2 | // and other contributors: @pomo, @sumire, @bitmap, @hisagi, @lae, @takenoko, @unarist 3 | // 4 | // https://github.com/MasterDalK/kktCSS 5 | @import 'kkt-checkmate/variables'; 6 | @import 'kkt/_mixins'; 7 | @import 'application'; 8 | @import 'kkt/boost'; 9 | @import 'kkt/banner'; 10 | @import 'kkt/diff'; 11 | @import 'kkt-checkmate/diff'; 12 | -------------------------------------------------------------------------------- /SCSS/kkt-checkmate/diff.scss: -------------------------------------------------------------------------------- 1 | .button.logo-button { 2 | &:hover { 3 | background: $ui-base-lighter-color; 4 | } 5 | } 6 | 7 | .muted { 8 | .status__content p { 9 | color: darken($primary-text-color, 35%); 10 | } 11 | 12 | .status__content a, 13 | .display-name__account 14 | { 15 | color: darken($dark-text-color, 15%); 16 | } 17 | } 18 | 19 | .reduce-motion button.icon-button.active i.fa-retweet { 20 | color: $ui-highlight-color; 21 | } 22 | -------------------------------------------------------------------------------- /SCSS/kkt-checkmate/variables.scss: -------------------------------------------------------------------------------- 1 | // Commonly used web colors 2 | $black: #1a191e; // Black 3 | $white: #5f5f5f; // All-new GRAY edition 4 | $success-green: #79bd9a !default; // Padua 5 | $error-red: #a80103 !default; // Cerise 6 | $warning-red: #a80103 !default; // Sunset Orange 7 | $gold-star: #ca8f04 !default; // Dark Goldenrod 8 | 9 | // Variables for defaults in UI 10 | $base-shadow-color: $black !default; 11 | $base-overlay-background: transparentize($black, 0.7) !default; 12 | $base-border-color: $white !default; 13 | $simple-background-color: $white !default; 14 | $valid-value-color: $success-green !default; 15 | $error-value-color: #a80103 !default; //Changed to Checkmate Red 16 | 17 | // Tell UI to use selected colors 18 | $ui-base-color: #222126 !default; // Dark 19 | $ui-base-lighter-color: lighten($ui-base-color, 30%) !default; // Lighter dark 20 | $ui-primary-color: #168594 !default; // Strong Blue 21 | $ui-secondary-color: darken($ui-base-color, 10%) !default; // Darkest 22 | $ui-highlight-color: #65112b !default; // Bit purple-y 23 | 24 | // Variables for texts 25 | $primary-text-color: #FFF !default; 26 | $darker-text-color: darken(#FFF, 15%) !default; 27 | $dark-text-color: #9defe1 !default; 28 | $secondary-text-color: #178494 !default; 29 | $highlight-text-color: #9defe1 !default; 30 | $action-button-color: lighten(desaturate($darker-text-color, 5%), 12%) !default; 31 | 32 | // For texts on inverted backgrounds 33 | $inverted-text-color: #FFF !default; 34 | $lighter-text-color: $primary-text-color !default; 35 | $light-text-color: $darker-text-color !default; 36 | 37 | // Custom 38 | $scrollbar-color: #7c8ca3; 39 | $panel-border: #393f4f; 40 | $panel-shadow: #121423; 41 | 42 | $banner-color: #65112b; 43 | $banner-shadow: #FFF; 44 | 45 | $panel-background: linear-gradient(to bottom, desaturate(lighten($panel-shadow, 5%), 10%) 0%, desaturate(lighten($panel-shadow, 5%), 10%) 65%, desaturate($panel-shadow, 5%) 100%); 46 | 47 | $panel-box-shadow: -1px -1px 0 $panel-shadow, 1px -1px 0 $panel-shadow, -1px 1px 0 $panel-shadow, 1px 1px 0 $panel-shadow; 48 | 49 | // Background Variables 50 | @function hex-color($color) { 51 | @if type-of($color) == 'color' { 52 | $color: str-slice(ie-hex-str($color), 4); 53 | } 54 | @return '%23' + unquote($color) 55 | } 56 | 57 | $base-color-diamonds: url("data:image/svg+xml,%3Csvg xmlns:rdf='http://www.w3.org/1999/02/22-rdf-syntax-ns%23' xmlns='http://www.w3.org/2000/svg' xmlns:cc='http://creativecommons.org/ns%23' xmlns:dc='http://purl.org/dc/elements/1.1/' height='114' viewBox='0 0 80 114' width='80' version='1.1'%3E %3Crect height='114' width='80' y='0' x='0' fill='#{hex-color($ui-base-color)}'/%3E %3Cpath fill='#{hex-color(desaturate(darken($ui-base-color, 10%), 5%))}' d='m0 57 40-57 40 57-40 57z'/%3E %3C/svg%3E"); 58 | 59 | $highlight-color-diamonds: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='28' width='20'%3E%3Crect height='28' width='20' y='0' x='0' fill='#{hex-color(darken($ui-base-color,10%))}'/%3E%3Cpath d='m0 14 10-14 10 14-10 14z' fill='#{hex-color(darken($ui-base-color, 20%))}'/%3E%3C/svg%3E"); 60 | 61 | $balloon-tail: url("data:image/svg+xml,%3Csvg width='12' height='14' xmlns='http://www.w3.org/2000/svg'%3E %3Cline id='svg_1' y2='12.412' x2='10.03575' y1='0.833' x1='10.03575' stroke-miterlimit='10' stroke-width='2' stroke='#{hex-color(desaturate(lighten($panel-shadow, 5%), 10%))}' fill='none'/%3E %3Cpath id='svg_2' d='m9.76,1c0,0 -4.8235,0.92675 -8,5.833c5.42675,1 8,5.334 8,5.334' stroke-miterlimit='10' stroke-linecap='round' stroke-width='2' stroke='#{hex-color($panel-border)}' fill='#{hex-color(desaturate(lighten($panel-shadow, 5%), 10%))}'/%3E %3C/svg%3E"); 62 | 63 | $muted-balloon-tail: url("data:image/svg+xml,%3Csvg width='12' height='14' xmlns='http://www.w3.org/2000/svg'%3E %3Cline id='svg_1' y2='12.412' x2='10.03575' y1='0.833' x1='10.03575' stroke-miterlimit='10' stroke-width='2' stroke='#{hex-color(desaturate(lighten($panel-shadow, 5%), 10%))}' fill='none'/%3E %3Cpath id='svg_2' d='m9.76,1c0,0 -4.8235,0.92675 -8,5.833c5.42675,1 8,5.334 8,5.334' stroke-miterlimit='10' stroke-linecap='round' stroke-width='2' stroke='#{hex-color($panel-border)}' fill='#{hex-color(desaturate(lighten($panel-shadow, 5%), 10%))}'/%3E %3C/svg%3E"); 64 | 65 | $black-background: linear-gradient(rgba(0,0,0,0.2), rgba(0,0,0,0.6) 45%, rgba(0,0,0,0.7) 65%, rgba(0,0,0,0.8)); 66 | $white-background: linear-gradient(rgba(255,255,255,0.2), rgba(255,255,255,0.6) 45%, rgba(255,255,255,0.7) 65%, rgba(255,255,255,0.8)); 67 | -------------------------------------------------------------------------------- /SCSS/kkt-dark.scss: -------------------------------------------------------------------------------- 1 | // Based heavily on the original kktCSS by @MasterDalK 2 | // and other contributors: @pomo, @sumire, @bitmap, @hisagi, @lae, @takenoko, @unarist 3 | // 4 | // https://github.com/MasterDalK/kktCSS 5 | @import 'kkt-dark/variables'; 6 | @import 'kkt/_mixins'; 7 | @import 'application'; 8 | @import 'kkt/boost'; 9 | @import 'kkt/banner'; 10 | @import 'kkt/diff'; 11 | @import 'kkt-dark/diff'; 12 | -------------------------------------------------------------------------------- /SCSS/kkt-dark/diff.scss: -------------------------------------------------------------------------------- 1 | .button.logo-button { 2 | &:hover { 3 | background: $ui-base-lighter-color; 4 | } 5 | } 6 | 7 | .muted { 8 | .status__content p { 9 | color: darken($primary-text-color, 35%); 10 | } 11 | 12 | .status__content a, 13 | .display-name__account 14 | { 15 | color: darken($dark-text-color, 15%); 16 | } 17 | } 18 | 19 | .reduce-motion button.icon-button.active i.fa-retweet { 20 | color: $ui-highlight-color; 21 | } 22 | -------------------------------------------------------------------------------- /SCSS/kkt-dark/variables.scss: -------------------------------------------------------------------------------- 1 | // Commonly used web colors 2 | $black: #000000; // Black 3 | $white: #3a3a3a; // All-new GRAY edition 4 | $success-green: #79bd9a !default; // Padua 5 | $error-red: #671160 !default; // Cerise 6 | $warning-red: #671160 !default; // Sunset Orange 7 | $gold-star: #ca8f04 !default; // Dark Goldenrod 8 | 9 | // Variables for defaults in UI 10 | $base-shadow-color: $black !default; 11 | $base-overlay-background: transparentize($black, 0.7) !default; 12 | $base-border-color: $white !default; 13 | $simple-background-color: $white !default; 14 | $valid-value-color: $success-green !default; 15 | $error-value-color: #671160 !default; //Changed to purple 16 | 17 | // Tell UI to use selected colors 18 | $ui-base-color: #313543 !default; // Dark 19 | $ui-base-lighter-color: lighten($ui-base-color, 30%) !default; // Lighter dark 20 | $ui-primary-color: #2588D0 !default; // Strong Blue 21 | $ui-secondary-color: darken($ui-base-color, 10%) !default; // Darkest 22 | $ui-highlight-color: #443ae4 !default; // Bit purple-y 23 | 24 | // Variables for texts 25 | $primary-text-color: #FFF !default; 26 | $darker-text-color: darken(#FFF, 15%) !default; 27 | $dark-text-color: #B7E1E8 !default; 28 | $secondary-text-color: #2588D0 !default; 29 | $highlight-text-color: #B7E1E8 !default; 30 | $action-button-color: lighten(desaturate($darker-text-color, 5%), 12%) !default; 31 | 32 | // For texts on inverted backgrounds 33 | $inverted-text-color: #FFF !default; 34 | $lighter-text-color: $primary-text-color !default; 35 | $light-text-color: $darker-text-color !default; 36 | 37 | // Custom 38 | $scrollbar-color: #7c8ca3; 39 | $panel-border: #393f4f; 40 | $panel-shadow: #1f242f; 41 | 42 | $banner-color: #f5e33a; 43 | $banner-shadow: #7c8ca3; 44 | 45 | $panel-background: $panel-shadow; 46 | 47 | $panel-box-shadow: -1px -1px 0 $panel-shadow, 1px -1px 0 $panel-shadow, -1px 1px 0 $panel-shadow, 1px 1px 0 $panel-shadow; 48 | 49 | // Background Variables 50 | @function hex-color($color) { 51 | @if type-of($color) == 'color' { 52 | $color: str-slice(ie-hex-str($color), 4); 53 | } 54 | @return '%23' + unquote($color) 55 | } 56 | 57 | $base-color-diamonds: url("data:image/svg+xml,%3Csvg xmlns:rdf='http://www.w3.org/1999/02/22-rdf-syntax-ns%23' xmlns='http://www.w3.org/2000/svg' xmlns:cc='http://creativecommons.org/ns%23' xmlns:dc='http://purl.org/dc/elements/1.1/' height='114' viewBox='0 0 80 114' width='80' version='1.1'%3E %3Crect height='114' width='80' y='0' x='0' fill='#{hex-color($ui-base-color)}'/%3E %3Cpath fill='#{hex-color(desaturate(darken($ui-base-color, 10%), 5%))}' d='m0 57 40-57 40 57-40 57z'/%3E %3C/svg%3E"); 58 | 59 | $highlight-color-diamonds: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='28' width='20'%3E%3Crect height='28' width='20' y='0' x='0' fill='#{hex-color(darken($ui-base-color,10%))}'/%3E%3Cpath d='m0 14 10-14 10 14-10 14z' fill='#{hex-color(darken($ui-base-color, 20%))}'/%3E%3C/svg%3E"); 60 | 61 | $balloon-tail: url("data:image/svg+xml,%3Csvg width='12' height='14' xmlns='http://www.w3.org/2000/svg'%3E %3Cline id='svg_1' y2='12.412' x2='10.03575' y1='0.833' x1='10.03575' stroke-miterlimit='10' stroke-width='2' stroke='#{hex-color($panel-shadow)}' fill='none'/%3E %3Cpath id='svg_2' d='m9.76,1c0,0 -4.8235,0.92675 -8,5.833c5.42675,1 8,5.334 8,5.334' stroke-miterlimit='10' stroke-linecap='round' stroke-width='2' stroke='#{hex-color($panel-border)}' fill='#{hex-color($panel-shadow)}'/%3E %3C/svg%3E"); 62 | 63 | $muted-balloon-tail: url("data:image/svg+xml,%3Csvg width='12' height='14' xmlns='http://www.w3.org/2000/svg'%3E %3Cline id='svg_1' y2='12.412' x2='10.03575' y1='0.833' x1='10.03575' stroke-miterlimit='10' stroke-width='2' stroke='#{hex-color($panel-shadow)}' fill='none'/%3E %3Cpath id='svg_2' d='m9.76,1c0,0 -4.8235,0.92675 -8,5.833c5.42675,1 8,5.334 8,5.334' stroke-miterlimit='10' stroke-linecap='round' stroke-width='2' stroke='#{hex-color($panel-border)}' fill='#{hex-color($panel-shadow)}'/%3E %3C/svg%3E"); 64 | 65 | $black-background: linear-gradient(rgba(0,0,0,0.2), rgba(0,0,0,0.6) 45%, rgba(0,0,0,0.7) 65%, rgba(0,0,0,0.8)); 66 | $white-background: linear-gradient(rgba(255,255,255,0.2), rgba(255,255,255,0.6) 45%, rgba(255,255,255,0.7) 65%, rgba(255,255,255,0.8)); 67 | -------------------------------------------------------------------------------- /SCSS/kkt.scss: -------------------------------------------------------------------------------- 1 | // Based heavily on the original kktCSS by @MasterDalK 2 | // and other contributors: @pomo, @sumire, @bitmap, @hisagi, @lae, @takenoko, @unarist 3 | // 4 | // https://github.com/MasterDalK/kktCSS 5 | @import 'kkt/variables'; 6 | @import 'kkt/_mixins'; 7 | @import 'application'; 8 | @import 'kkt/boost'; 9 | @import 'kkt/banner'; 10 | @import 'kkt/diff'; 11 | -------------------------------------------------------------------------------- /SCSS/kkt/_mixins.scss: -------------------------------------------------------------------------------- 1 | @mixin panel-format($opacity:1) { 2 | background: $panel-background; 3 | border-radius: 8px; 4 | border: solid 2px $panel-border; 5 | box-shadow: 0 1px 1px rgba(0, 0, 0, 0.4); 6 | } 7 | 8 | @mixin status-position() { 9 | margin-left: 64px; 10 | margin-right: 2px; 11 | padding-left: 8px; 12 | margin-bottom: 8px; 13 | } 14 | 15 | @mixin avatar-radius() { 16 | border-radius: 4px; 17 | background: transparent no-repeat; 18 | background-position: 50%; 19 | background-clip: padding-box; 20 | border: solid 2px $panel-border; 21 | box-shadow: 0 1px 1px rgba(0, 0, 0, 0.4); 22 | } 23 | 24 | -------------------------------------------------------------------------------- /SCSS/kkt/banner.scss: -------------------------------------------------------------------------------- 1 | 2 | .drawer__header::before, 3 | .tabs-bar::before { 4 | position: absolute; 5 | left: 0px; 6 | z-index: 100; 7 | display: inline; 8 | content: ""; 9 | min-width: 120px; 10 | max-width: 30%; 11 | min-height: 50px; 12 | pointer-events: none; 13 | background-image: url("data:image/svg+xml,%3Csvg xmlns:svg='http://www.w3.org/2000/svg' xmlns='http://www.w3.org/2000/svg' version='1.1' xml:space='preserve' width='255.5' height='118.4' viewBox='0 0 255.5 118.4'%3E%3Cstyle%3E.s0%7Bfill:#{hex-color(desaturate(darken($banner-color, 5%), 30%))};%7D.s1%7Bfill:none;stroke-width:0.3;stroke:#{hex-color(desaturate($banner-color, 40))};%7D.s2%7Bfill:#{hex-color($banner-color)};%7D.s3%7Bfill:#{hex-color($banner-shadow)};%7D%3C/style%3E%3Cdefs%3E%3CclipPath clipPathUnits='userSpaceOnUse'%3E%3Cpath d='M0 113.4H255.1V0H0Z'/%3E%3C/clipPath%3E%3C/defs%3E%3Cg transform='matrix(1.3333333,0,0,-1.3333333,-42.684319,133.15746)'%3E%3Cg transform='rotate(20.778843,127.84558,56.011271)'%3E%3Cg clip-path='url(%23clipPath4501)'%3E%3Cg transform='translate(199.8174,64.1434)'%3E%3Cpath d='M0 0C1.5 0.5 3.7 1.1 3.9 3 3.9 3 3.9 3 3.9 3 3.9 3 3.7 3.6 3.4 3.9 3.1 4.3 2.8 4.5 2.4 4.7 2.1 4.8 1.9 4.9 1.4 5.1 1.2 5.2 0.9 5.3 0.5 5.4 0.4 5.5 0.1 5.6-0.2 5.7c-1.3 0.3-2.8 0.5-2.8 0.5 0 0-1 0-1.9-0.1-0.4 0-1-0.1-1.7-0.2 0 0-0.7 0.1-0.7 0.1-0.5 0-1.1 0.1-2 0.2V-2.3c0 0 0 0 0 0C-6.1-1.7-3-0.9 0 0' fill='#{hex-color(desaturate(darken($banner-color, 5%), 30%))}'/%3E%3C/g%3E%3Cg transform='translate(199.8174,64.1434)'%3E%3Cpath d='M0 0C1.5 0.5 3.7 1.1 3.9 3 3.9 3 3.9 3 3.9 3 3.9 3 3.7 3.6 3.4 3.9 3.1 4.3 2.8 4.5 2.4 4.7 2.1 4.8 1.9 4.9 1.4 5.1 1.2 5.2 0.9 5.3 0.5 5.4 0.4 5.5 0.1 5.6-0.2 5.7c-1.3 0.3-2.8 0.5-2.8 0.5 0 0-1 0-1.9-0.1-0.4 0-1-0.1-1.7-0.2 0 0-0.7 0.1-0.7 0.1-0.5 0-1.1 0.1-2 0.2V-2.3c0 0 0 0 0 0C-6.1-1.7-3-0.9 0 0Z' class='s1'/%3E%3C/g%3E%3Cg transform='translate(55.9023,64.2088)'%3E%3Cpath d='m0 0c-1.5 0.5-3.7 1.1-3.9 3 0 0 0 0 0 0 0 0 0.2 0.5 0.5 0.9 0.3 0.4 0.6 0.5 1.1 0.8 0.2 0.1 0.5 0.2 1 0.4 0.1 0.1 0.4 0.2 0.8 0.3 0.1 0 0.4 0.2 0.8 0.2 1.3 0.3 2.8 0.5 2.8 0.5 0 0 1 0 1.9-0.1C5.3 6 5.9 6 6.6 5.9 6.6 5.9 7.3 5.9 7.3 5.9 7.8 6 8.4 6 9.2 6.1V-2.3C9.2-2.3 9.2-2.3 9.2-2.3 6.1-1.7 3-0.9 0 0' fill='#{hex-color(desaturate(darken($banner-color, 5%), 30%))}'/%3E%3C/g%3E%3Cg transform='translate(55.9023,64.2088)'%3E%3Cpath d='m0 0c-1.5 0.5-3.7 1.1-3.9 3 0 0 0 0 0 0 0 0 0.2 0.5 0.5 0.9 0.3 0.4 0.6 0.5 1.1 0.8 0.2 0.1 0.5 0.2 1 0.4 0.1 0.1 0.4 0.2 0.8 0.3 0.1 0 0.4 0.2 0.8 0.2 1.3 0.3 2.8 0.5 2.8 0.5 0 0 1 0 1.9-0.1C5.3 6 5.9 6 6.6 5.9 6.6 5.9 7.3 5.9 7.3 5.9 7.8 6 8.4 6 9.2 6.1V-2.3C9.2-2.3 9.2-2.3 9.2-2.3 6.1-1.7 3-0.9 0 0Z' class='s1'/%3E%3C/g%3E%3Cg transform='translate(193.252,70.0189)'%3E%3Cpath d='m0 0c1.3 0.1 1.8 0.3 3.6 0.3 0 0 2.3 0 5.3-1.5 0.5-0.2 0.8-0.5 1-0.7 0.3-0.3 0.4-0.6 0.5-1 0 0 0 0 0 0 0 0 0-0.1 0.1-0.1 0.4-0.9 0.2-2.2 0.3-3.2 0-0.4 0-0.5 0-0.7 0-0.2 0.1-1 0.1-2.1 0-0.9-0.1-5.5-0.2-11.8 2.1-0.8 4.6-1.6 7.3-2.3 5.6-1.4 10.7-1.7 14.7-1.6-2 3.3-4.1 6.6-6.1 10 2.2 3.3 4.5 6.6 6.7 10-9.1 0.5-13.1 1.5-14.7 2.4 0 0-0.2 0.1-0.3 0.2-0.9 0.5-3 1.7-5.8 3-1 0.5-2.1 0.9-3.5 1.4 0 0-6 1.9-10.3 0C-2.1 1.8-2.4 1.3-2.4 1.3-2.5 1.1-2.8 0.6-2.7 0.2-2.5-0.2-1.5-0.1 0 0' fill='#{hex-color($banner-color)}'/%3E%3C/g%3E%3Cg transform='translate(193.252,70.0189)'%3E%3Cpath d='m0 0c1.3 0.1 1.8 0.3 3.6 0.3 0 0 2.3 0 5.3-1.5 0.5-0.2 0.8-0.5 1-0.7 0.3-0.3 0.4-0.6 0.5-1 0 0 0 0 0 0 0 0 0-0.1 0.1-0.1 0.4-0.9 0.2-2.2 0.3-3.2 0-0.4 0-0.5 0-0.7 0-0.2 0.1-1 0.1-2.1 0-0.9-0.1-5.5-0.2-11.8 2.1-0.8 4.6-1.6 7.3-2.3 5.6-1.4 10.7-1.7 14.7-1.6-2 3.3-4.1 6.6-6.1 10 2.2 3.3 4.5 6.6 6.7 10-9.1 0.5-13.1 1.5-14.7 2.4 0 0-0.2 0.1-0.3 0.2-0.9 0.5-3 1.7-5.8 3-1 0.5-2.1 0.9-3.5 1.4 0 0-6 1.9-10.3 0C-2.1 1.8-2.4 1.3-2.4 1.3-2.5 1.1-2.8 0.6-2.7 0.2-2.5-0.2-1.5-0.1 0 0Z' class='s1'/%3E%3C/g%3E%3Cg transform='translate(62.4678,70.0843)'%3E%3Cpath d='m0 0c-1.3 0.1-1.8 0.3-3.6 0.3 0 0-2.3 0-5.3-1.5-0.5-0.2-0.8-0.5-1-0.7-0.3-0.3-0.4-0.6-0.5-1 0 0 0 0 0 0 0 0 0-0.1-0.1-0.1-0.4-0.9-0.2-2.2-0.3-3.2 0-0.4 0-0.5 0-0.7 0-0.2-0.1-1-0.1-2.1 0-0.9 0.1-5.5 0.2-11.8-2.1-0.8-4.6-1.6-7.3-2.3-5.6-1.4-10.7-1.7-14.7-1.6 2 3.3 4.1 6.6 6.1 10-2.2 3.3-4.5 6.7-6.7 10 9.1 0.5 13.1 1.5 14.7 2.4 0 0 0.2 0.1 0.3 0.2 0.9 0.5 3 1.7 5.8 3 1 0.5 2.1 0.9 3.5 1.4 0 0 6 1.9 10.3 0C2.1 1.8 2.4 1.3 2.4 1.3 2.5 1.1 2.8 0.6 2.7 0.3 2.5-0.2 1.5-0.1 0 0' fill='#{hex-color($banner-color)}'/%3E%3C/g%3E%3Cg transform='translate(62.4678,70.0843)'%3E%3Cpath d='m0 0c-1.3 0.1-1.8 0.3-3.6 0.3 0 0-2.3 0-5.3-1.5-0.5-0.2-0.8-0.5-1-0.7-0.3-0.3-0.4-0.6-0.5-1 0 0 0 0 0 0 0 0 0-0.1-0.1-0.1-0.4-0.9-0.2-2.2-0.3-3.2 0-0.4 0-0.5 0-0.7 0-0.2-0.1-1-0.1-2.1 0-0.9 0.1-5.5 0.2-11.8-2.1-0.8-4.6-1.6-7.3-2.3-5.6-1.4-10.7-1.7-14.7-1.6 2 3.3 4.1 6.6 6.1 10-2.2 3.3-4.5 6.7-6.7 10 9.1 0.5 13.1 1.5 14.7 2.4 0 0 0.2 0.1 0.3 0.2 0.9 0.5 3 1.7 5.8 3 1 0.5 2.1 0.9 3.5 1.4 0 0 6 1.9 10.3 0C2.1 1.8 2.4 1.3 2.4 1.3 2.5 1.1 2.8 0.6 2.7 0.3 2.5-0.2 1.5-0.1 0 0Z' class='s1'/%3E%3C/g%3E%3Cg transform='translate(51.5547,61.7674)'%3E%3Cpath d='m0 0c-0.1-2.5 0-5 0.1-7.5 0.1-2.1 0.2-4.1 0.4-6.2 0.6-9.2 75.2-9 75.8-9 0.6 0 75.2-0.2 75.8 9 0.1 2.1 0.3 4.1 0.4 6.2 0.1 2.5 0.2 5 0.1 7.5 0 0.8-0.1 1.7-0.1 2.5-0.1 0.9 0.2 2-0.3 2.9 0 0 0 0.1-0.1 0.1 0 0 0 0 0 0 0 0 0 0 0 0.1C151.8 3.8 149.1 3.3 147.2 2.8 143.3 2 139.5 1.3 135.5 0.7 135.5 0.7 135.5 0.7 135.5 0.7 120.9-1.3 77.1-2.2 76.3-2.2 75.5-2.2 31.7-1.3 17.1 0.7 17.1 0.7 17.1 0.7 17.1 0.7 13.2 1.3 9.3 2 5.5 2.8 3.6 3.3 0.8 3.8 0.6 5.5 0.5 5.5 0.5 5.5 0.5 5.5 0.5 5.5 0.5 5.5 0.5 5.5 0.5 5.4 0.5 5.4 0.5 5.4-0.1 4.6 0.2 3.4 0.1 2.5 0.1 1.7 0 0.8 0 0' fill='#{hex-color($banner-color)}'/%3E%3C/g%3E%3Cg transform='translate(51.5547,61.7674)'%3E%3Cpath d='m0 0c-0.1-2.5 0-5 0.1-7.5 0.1-2.1 0.2-4.1 0.4-6.2 0.6-9.2 75.2-9 75.8-9 0.6 0 75.2-0.2 75.8 9 0.1 2.1 0.3 4.1 0.4 6.2 0.1 2.5 0.2 5 0.1 7.5 0 0.8-0.1 1.7-0.1 2.5-0.1 0.9 0.2 2-0.3 2.9 0 0 0 0.1-0.1 0.1 0 0 0 0 0 0 0 0 0 0 0 0.1C151.8 3.8 149.1 3.3 147.2 2.8 143.3 2 139.5 1.3 135.5 0.7 135.5 0.7 135.5 0.7 135.5 0.7 120.9-1.3 77.1-2.2 76.3-2.2 75.5-2.2 31.7-1.3 17.1 0.7 17.1 0.7 17.1 0.7 17.1 0.7 13.2 1.3 9.3 2 5.5 2.8 3.6 3.3 0.8 3.8 0.6 5.5 0.5 5.5 0.5 5.5 0.5 5.5 0.5 5.5 0.5 5.5 0.5 5.5 0.5 5.4 0.5 5.4 0.5 5.4-0.1 4.6 0.2 3.4 0.1 2.5 0.1 1.7 0 0.8 0 0Z' class='s1'/%3E%3C/g%3E%3Cg transform='translate(187.874,47.683)'%3E%3Cpath d='m0 0c0-0.3-0.2-0.6-0.5-0.6-0.3 0-0.6 0.1-0.7 0.5-0.3 2.7-0.5 4.1-0.8 6.8 0 0.3 0.2 0.6 0.5 0.6 0.3 0 0.6-0.1 0.7-0.5 0-0.4 0.1-0.5 0.1-0.9 0.1 0.4 0.2 0.7 0.6 1 0.4 0.3 1 0.7 1.6 0.7C2.2 7.7 2.3 7.2 2.3 7.1 2.4 6.6 1.9 6.5 1.3 6.5-0.2 6.2-0.5 5.5-0.6 5.1-0.4 3-0.2 2 0 0' fill='#{hex-color($banner-shadow)}'/%3E%3C/g%3E%3Cg transform='translate(175.8223,53.1927)'%3E%3Cpath d='M0 0C2.1 0.2 2.4-1.8 2.4-2.3 2.4-2.4 2.5-2.9 1.9-2.9 0.3-3.1-0.5-3.1-2.1-3.3-2.2-2-2-0.2 0 0M3.1-4.1C2.5-4.2 2.5-4.6 2.5-4.9 2.4-6.2 1.5-6.6 0.6-6.7c-2.2-0.2-2.5 1.8-2.7 2.9 1.8 0.2 2.6 0.2 4.4 0.4 0.9 0.1 1.4 0.3 1.3 1.2-0.1 1-1.2 3-3.7 2.8-2.5-0.2-3.5-2.1-3.3-4.3 0.1-1.1 0.6-3.9 4-3.5 2.6 0.3 3.2 2.1 3.2 2.7 0 0.3-0.3 0.5-0.7 0.5' fill='#{hex-color($banner-shadow)}'/%3E%3C/g%3E%3Cg transform='translate(164.6611,52.097)'%3E%3Cpath d='m0 0c0.2-2.3 0.3-3.4 0.4-5.6 0-0.3 0.1-0.9 0.9-0.9 0.1 0 0.3 0 0.5 0.1 0.1 0.1 0.2 0.1 0.3 0.2 0.1 0.1 0.1 0.1 0.2 0.2 0.2 0.3 0 0.7 0.2 0.9 0.1 0.1 0.3 0.1 0.4 0.1 0.3-0.2 0.3-1 0-1.5-0.5-0.7-1.6-0.7-1.9-0.7-0.4 0-1 0-1.4 0.4-0.4 0.4-0.4 0.8-0.4 1-0.2 2.3-0.2 3.5-0.4 5.8-0.6 0-0.9-0.1-1.5-0.1-0.2 0-0.3 0.1-0.3 0.2 0 0.1 0.1 0.3 0.3 0.3 0.6 0 0.9 0.1 1.5 0.1 0 0.7-0.1 1.1-0.1 1.8 0 0.3 0.3 0.6 0.5 0.6 0.3 0 0.6-0.2 0.6-0.5 0.1-0.7 0.1-1.1 0.1-1.8 0.7 0.1 1 0.1 1.7 0.1 0 0 0 0 0 0C2 0.7 2.2 0.7 2.6 0.7 2.7 0.7 2.8 0.6 2.8 0.5 2.8 0.3 2.7 0.2 2.6 0.2 1.6 0.1 1 0.1 0 0' fill='#{hex-color($banner-shadow)}'/%3E%3C/g%3E%3Cg transform='translate(154.5889,51.4525)'%3E%3Cpath d='m0 0c0.1-2.3 0.2-3.4 0.3-5.6 0-0.3 0.1-0.9 0.9-0.9 0.1 0 0.3 0 0.5 0.1 0.1 0.1 0.2 0.1 0.3 0.2 0.1 0.1 0.1 0.1 0.2 0.2 0.3 0.3 0 0.7 0.2 0.9 0.1 0.1 0.3 0.1 0.4 0.1 0.3-0.2 0.3-1 0-1.5-0.5-0.7-1.6-0.7-1.9-0.7-0.4 0-1 0-1.4 0.5-0.3 0.4-0.4 0.8-0.4 1-0.1 2.3-0.2 3.5-0.3 5.8-0.6 0-0.9 0-1.5-0.1-0.2 0-0.3 0.1-0.3 0.2 0 0.1 0.1 0.3 0.3 0.3 0.6 0 0.9 0 1.5 0.1 0 0.7-0.1 1.1-0.1 1.8 0 0.3 0.3 0.6 0.6 0.6 0.3 0 0.6-0.2 0.6-0.5 0-0.7 0.1-1.1 0.1-1.8 0.7 0 1 0.1 1.7 0.1 0 0 0 0 0 0 0.3 0 0.5 0 0.9 0.1C2.7 0.7 2.8 0.5 2.8 0.4 2.8 0.3 2.7 0.2 2.6 0.1 1.6 0.1 1 0.1 0 0' fill='#{hex-color($banner-shadow)}'/%3E%3C/g%3E%3Cg transform='translate(144.6523,45.263)'%3E%3Cpath d='m0 0c-0.4-0.4-1.5-0.9-2.4-0.9-0.3 0-1.8 0-1.9 1.3 0 2 2.8 2.2 4.1 2.3zM1.3-0.6C1.3-0.5 1.2-0.2 1.2-0.1 1.1 1.5 1.1 2.3 1.1 4 1 4.5 0.9 5 0.6 5.3-0.2 6.4-1.6 6.4-2.1 6.4c-0.4 0-1.2 0-2-0.5-0.9-0.6-1.5-1.8-1.2-2.4 0.1-0.1 0.3-0.4 0.6-0.4 0.2 0 0.4 0.2 0.4 0.2 0.1 0.1 0.1 0.1 0.1 0.2 0.1 0.2 0.1 0.6 0.2 0.8 0 0 0 0 0 0.1 0.1 0.3 0.5 1.3 1.9 1.4 1.2 0 1.9-0.6 1.9-2 0-0.2 0-0.3 0-0.6-2.1-0.2-5.4-0.5-5.4-2.9 0-1.8 1.9-2 2.8-1.9 1.5 0 2.5 0.6 2.9 0.9 0.1-0.4 0.4-0.8 0.8-0.8 0.3 0 0.5 0.2 0.5 0.4 0 0.1-0.2 0.4-0.2 0.5' fill='#{hex-color($banner-shadow)}'/%3E%3C/g%3E%3Cg transform='translate(130.4355,44.1048)'%3E%3Cpath d='m0 0c0-0.3-0.3-0.5-0.6-0.5-0.3 0-0.6 0.2-0.6 0.5 0 2.7 0 4.1 0 6.8 0 0.3 0.3 0.5 0.6 0.5 0.3 0 0.6-0.2 0.6-0.5 0-0.4 0-0.5 0-0.9 0.1 0.4 0.3 0.6 0.7 0.9 0.4 0.3 1.1 0.5 1.7 0.5C3.1 7.4 3.1 6.9 3.1 6.8 3.1 6.3 2.6 6.3 2 6.3 0.5 6.2 0.1 5.5 0 5.1 0 3.1 0 2 0 0' fill='#{hex-color($banner-shadow)}'/%3E%3C/g%3E%3Cg transform='translate(122.0693,44.1312)'%3E%3Cpath d='m0 0c0-0.3-0.3-0.5-0.6-0.5-0.3 0-0.6 0.2-0.6 0.5 0 2.7 0.1 4.1 0.1 6.8 0 0.3 0.3 0.5 0.6 0.5C-0.2 7.4 0.1 7.1 0.1 6.8 0 4.1 0 2.7 0 0M0.5 9.8C0.4 9.4 0 9-0.5 9-1 9-1.4 9.4-1.4 9.9c0 0.5 0.4 0.8 0.9 0.8 0.5 0 0.9-0.4 0.9-0.8' fill='#{hex-color($banner-shadow)}'/%3E%3C/g%3E%3Cg transform='translate(114.457,44.2621)'%3E%3Cpath d='m0 0c0-0.3-0.2-0.5-0.5-0.5-0.2 0-0.3 0.1-0.4 0.2C-2.1 1.5-2.7 2.4-3.9 4.2-4.2 4.1-4.3 4-4.5 3.9-4.5 2.5-4.6 1.8-4.6 0.4-4.6 0.1-4.7-0.1-4.9-0.2-4.9-0.2-4.9-0.2-4.9-0.2-5-0.3-5-0.3-5-0.3c-0.1 0-0.1 0-0.2 0 0 0 0 0 0 0h0 0c-0.1 0-0.1 0-0.2 0.1-0.2 0.1-0.4 0.4-0.4 0.7 0.1 3.9 0.2 5.8 0.4 9.7 0 0.4 0.2 0.6 0.4 0.7 0 0 0.1 0 0.1 0 0 0 0 0 0.1 0 0 0 0 0 0 0 0 0 0 0 0 0 0.1 0 0.1 0 0.2-0.1 0.2-0.1 0.4-0.4 0.4-0.7-0.1-2.2-0.1-3.2-0.2-5.4 1.6 1.1 2.4 1.6 3.9 2.7 0 0 0.1 0.1 0.2 0.1C-0.2 7.4-0.1 7.2-0.1 7-0.1 6.9-0.1 6.8-0.2 6.8-1.4 6-2 5.6-3.1 4.8-1.9 3-1.3 2.1-0.1 0.3 0 0.2 0 0.1 0 0' fill='#{hex-color($banner-shadow)}'/%3E%3C/g%3E%3Cg transform='translate(100.5078,45.725)'%3E%3Cpath d='m0 0c-0.5-0.3-1.5-0.7-2.4-0.7-0.3 0-1.8 0.2-1.7 1.5 0.1 2 3 2 4.3 2C0.1 1.7 0.1 1.1 0 0M1.2-0.7C1.2-0.6 1.2-0.3 1.2-0.2 1.3 1.4 1.3 2.2 1.4 3.9 1.4 4.4 1.3 4.9 1.1 5.3 0.4 6.4-1.1 6.5-1.5 6.6-1.9 6.6-2.7 6.7-3.5 6.2-4.5 5.7-5.2 4.5-4.9 3.9-4.8 3.8-4.6 3.5-4.3 3.5c0.2 0 0.4 0.2 0.4 0.2 0.1 0.1 0.1 0.1 0.1 0.2 0.1 0.2 0.2 0.6 0.2 0.8 0 0 0 0 0 0.1 0.1 0.3 0.6 1.3 2 1.2C-0.3 5.9 0.3 5.2 0.2 3.9 0.2 3.6 0.2 3.5 0.2 3.3-1.9 3.3-5.3 3.3-5.4 0.9c-0.1-1.8 1.7-2.1 2.6-2.2 1.5-0.1 2.5 0.4 3 0.7 0.1-0.4 0.3-0.9 0.7-0.9 0.3 0 0.5 0.1 0.5 0.3 0 0.1-0.1 0.4-0.1 0.5' fill='#{hex-color($banner-shadow)}'/%3E%3C/g%3E%3Cg transform='translate(86.2368,45.8207)'%3E%3Cpath d='m0 0c0-0.3-0.3-0.5-0.6-0.5-0.3 0-0.6 0.3-0.6 0.6 0.2 2.7 0.3 4.1 0.6 6.8 0 0.3 0.3 0.5 0.6 0.5C0.3 7.4 0.6 7.1 0.6 6.8 0.5 6.4 0.5 6.2 0.5 5.9 0.7 6.2 0.8 6.5 1.3 6.7 1.7 7 2.4 7.2 3 7.1 3.7 7.1 3.7 6.6 3.7 6.5 3.6 6 3.2 6 2.5 6.1 1 6.1 0.6 5.4 0.4 5.1 0.3 3 0.2 2 0 0' fill='#{hex-color($banner-shadow)}'/%3E%3C/g%3E%3Cg transform='translate(77.896,46.5814)'%3E%3Cpath d='m0 0c0-0.3-0.4-0.5-0.6-0.5-0.3 0-0.6 0.3-0.5 0.6 0.3 2.7 0.4 4.1 0.7 6.8 0 0.3 0.3 0.5 0.6 0.5C0.4 7.4 0.7 7.1 0.7 6.8 0.4 4.1 0.3 2.7 0 0M1.3 9.8C1.3 9.3 0.8 9 0.3 9c-0.5 0.1-0.9 0.5-0.8 0.9 0 0.5 0.5 0.8 1 0.7 0.5 0 0.9-0.5 0.8-0.9' fill='#{hex-color($banner-shadow)}'/%3E%3C/g%3E%3Cg transform='translate(70.4976,47.3607)'%3E%3Cpath d='M0 0C0-0.3-0.3-0.5-0.5-0.5-0.7-0.4-0.8-0.3-0.9-0.2-2 1.7-2.5 2.6-3.6 4.6-3.8 4.4-3.9 4.4-4.1 4.2-4.3 2.9-4.4 2.2-4.6 0.8-4.6 0.5-4.7 0.3-4.9 0.2-4.9 0.2-4.9 0.2-4.9 0.2-5 0.2-5 0.1-5.1 0.1-5.1 0.1-5.2 0.1-5.2 0.1-5.3 0.1-5.3 0.1-5.3 0.1-5.3 0.1-5.3 0.1-5.3 0.1h0c-0.1 0-0.1 0-0.2 0.1-0.2 0.1-0.4 0.4-0.3 0.8 0.5 3.8 0.7 5.8 1.2 9.6 0 0.4 0.3 0.6 0.5 0.7 0 0 0.1 0 0.1 0 0 0 0 0 0.1 0 0 0 0 0 0 0 0 0 0 0 0 0 0.1 0 0.1 0 0.2-0.1 0.2-0.1 0.3-0.4 0.3-0.8-0.3-2.1-0.4-3.2-0.7-5.4 1.7 0.9 2.5 1.4 4.2 2.3C0.1 7.4 0.2 7.4 0.3 7.4 0.5 7.4 0.6 7.2 0.6 7 0.5 6.9 0.5 6.8 0.4 6.8-0.9 6.1-1.5 5.7-2.7 5-1.7 3.1-1.1 2.2-0.1 0.3 0 0.2 0 0.1 0 0' fill='#{hex-color($banner-shadow)}'/%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/svg%3E"); 14 | background-repeat: no-repeat; 15 | background-size: contain; 16 | } 17 | 18 | @media screen and (min-width: 768px) { 19 | .tabs-bar::before, 20 | .drawer__header::before { 21 | left: 9px; 22 | } 23 | } 24 | -------------------------------------------------------------------------------- /SCSS/kkt/boost.scss: -------------------------------------------------------------------------------- 1 | button.icon-button i.fa-retweet { 2 | background-image: url("data:image/svg+xml;utf8,"); 3 | 4 | &:hover { 5 | background-image: url("data:image/svg+xml;utf8,"); 6 | } 7 | } 8 | 9 | button.icon-button.disabled i.fa-retweet { 10 | background-image: url("data:image/svg+xml;utf8,"); 11 | } 12 | -------------------------------------------------------------------------------- /SCSS/kkt/diff.scss: -------------------------------------------------------------------------------- 1 | // Change the colors of button texts 2 | .button { 3 | color: $white; 4 | 5 | &.button-alternative, 6 | &.button-alternative-2 { 7 | color: $white; 8 | } 9 | } 10 | 11 | body, 12 | body.app-body, 13 | .ui { 14 | background: $ui-base-color; 15 | background-image: $base-color-diamonds; 16 | background-repeat: repeat; 17 | background-size: auto; 18 | background-attachment: fixed; 19 | } 20 | 21 | 22 | // Onboarding 23 | .pseudo-drawer, 24 | .onboarding-modal__paginator { 25 | background-color: $ui-highlight-color; 26 | background-image: $highlight-color-diamonds; 27 | } 28 | 29 | .onboarding-modal__paginator { 30 | .onboarding-modal__nav { 31 | color: $white; 32 | } 33 | 34 | .onboarding-modal__nav.onboarding-modal__done { 35 | color: $white; 36 | } 37 | } 38 | 39 | .onboarding-modal__dot { 40 | background: $white; 41 | } 42 | 43 | // Scrollbar 44 | ::-webkit-scrollbar { 45 | width: 8px; 46 | height: 8px; 47 | } 48 | 49 | ::-webkit-scrollbar-thumb { 50 | background: $scrollbar-color; 51 | border-radius: 50px; 52 | } 53 | 54 | ::-webkit-scrollbar-thumb:hover, 55 | ::-webkit-scrollbar-thumb:active { 56 | background: lighten($scrollbar-color, 10%); 57 | } 58 | 59 | ::-webkit-scrollbar-track:hover, 60 | ::-webkit-scrollbar-track:active { 61 | background: rgba($black, 0.2); 62 | } 63 | 64 | // Change the text colors on inverted background 65 | .privacy-dropdown__option.active .privacy-dropdown__option__content, 66 | .privacy-dropdown__option.active .privacy-dropdown__option__content strong, 67 | .privacy-dropdown__option:hover .privacy-dropdown__option__content, 68 | .privacy-dropdown__option:hover .privacy-dropdown__option__content strong, 69 | .dropdown-menu__item a:active, 70 | .dropdown-menu__item a:focus, 71 | .dropdown-menu__item a:hover, 72 | .actions-modal ul li:not(:empty) a.active, 73 | .actions-modal ul li:not(:empty) a.active button, 74 | .actions-modal ul li:not(:empty) a:active, 75 | .actions-modal ul li:not(:empty) a:active button, 76 | .actions-modal ul li:not(:empty) a:focus, 77 | .actions-modal ul li:not(:empty) a:focus button, 78 | .actions-modal ul li:not(:empty) a:hover, 79 | .actions-modal ul li:not(:empty) a:hover button, 80 | .admin-wrapper .sidebar ul ul a.selected, 81 | .simple_form .block-button, 82 | .simple_form .button, 83 | .simple_form button { 84 | color: $white; 85 | } 86 | 87 | .simple_form { 88 | input[type=text], 89 | input[type=number], 90 | input[type=email], 91 | input[type=password], 92 | textarea { 93 | &:active, 94 | &:focus { 95 | border-bottom-color: $highlight-text-color; 96 | background: rgba($base-overlay-background, 0.1); 97 | } 98 | } 99 | } 100 | 101 | // About page 102 | body.about-body { 103 | background: $ui-base-color; 104 | background-image: $base-color-diamonds; 105 | } 106 | 107 | .contact-widget { 108 | @include panel-format(); 109 | 110 | h4 { 111 | color: $primary-text-color; 112 | } 113 | 114 | a { 115 | color: $highlight-text-color; 116 | } 117 | } 118 | 119 | .table-of-contents { 120 | @include panel-format; 121 | 122 | li { 123 | a { 124 | color: $highlight-text-color; 125 | border-bottom: 1px solid $panel-border; 126 | } 127 | } 128 | } 129 | 130 | .landing-page { 131 | #mastodon-timeline { 132 | background: none; 133 | } 134 | 135 | &__mascot img { 136 | height: 230px; 137 | margin-left: 20px; 138 | margin-top: -20px; 139 | } 140 | &__logo img { 141 | mix-blend-mode: unset; 142 | } 143 | 144 | &__hero, 145 | &__information, 146 | &__call-to-action { 147 | @include panel-format(); 148 | 149 | &.contact-widget { 150 | @include panel-format(); 151 | } 152 | } 153 | 154 | &__forms { 155 | background: none; 156 | box-shadow: none; 157 | } 158 | 159 | .header-wrapper.compact { 160 | background: linear-gradient(150deg, lighten($ui-base-color, 8%), $ui-base-color); 161 | } 162 | 163 | .information-board { 164 | &__section strong { 165 | color: $dark-text-color; 166 | } 167 | 168 | .panel { 169 | @include panel-format(); 170 | } 171 | } 172 | 173 | .extended-description { 174 | padding: 50px 0; 175 | 176 | .container-alt { 177 | @include panel-format(); 178 | padding: 20px; 179 | } 180 | } 181 | } 182 | 183 | .simple_form, 184 | .rich-formatting { 185 | p a, 186 | .input.boolean label a { 187 | text-decoration: none; 188 | 189 | &:hover { 190 | text-decoration: underline; 191 | } 192 | } 193 | } 194 | 195 | .directory { 196 | &__tag { 197 | a { 198 | @include panel-format(); 199 | } 200 | } 201 | } 202 | 203 | // Admin page 204 | .admin-wrapper { 205 | .sidebar { 206 | background: rgba($ui-base-lighter-color, 0.15); 207 | } 208 | 209 | .sidebar-wrapper { 210 | background: $ui-base-color; 211 | background-image: $base-color-diamonds; 212 | 213 | &__inner { 214 | background: none; 215 | } 216 | } 217 | 218 | .content-wrapper { 219 | background: $panel-background; 220 | } 221 | } 222 | 223 | .simple_form .warning, .table-form .warning { 224 | color: $white; 225 | background: rgba($error-value-color, 0.8); 226 | 227 | a { 228 | color: $white; 229 | } 230 | } 231 | 232 | // Components 233 | .status-card__actions button, 234 | .status-card__actions a { 235 | color: $white; 236 | } 237 | 238 | .compose__action-bar-dropdown .icon-button { 239 | color: inherit; 240 | } 241 | 242 | .admin-wrapper .sidebar ul .simple-navigation-active-leaf a { 243 | color: $white; 244 | } 245 | 246 | .status::before, 247 | .notification::before { 248 | content: ""; 249 | display: block; 250 | width: 12px; 251 | height: 14px; 252 | position: absolute; 253 | left: -11px; 254 | background: $balloon-tail; 255 | } 256 | 257 | .status.muted::before, 258 | .boost-modal__container .status::before { 259 | background: $muted-balloon-tail; 260 | } 261 | 262 | .notification { 263 | @include panel-format($opacity:0.8); 264 | @include status-position(); 265 | margin-bottom: 8px; 266 | padding-left: 8px; 267 | margin-left: 1px; 268 | margin-right: 2px; 269 | } 270 | 271 | .notification__message { 272 | margin-left: 25px; 273 | padding: 8px 0; 274 | color: $dark-text-color; 275 | 276 | .fa:not(.star-icon) { 277 | color: $ui-highlight-color; 278 | } 279 | } 280 | 281 | // Why the heck is this even a matcher 282 | .public-layout .footer .grid .column-2 h4 a { 283 | color: $darker-text-color; 284 | } 285 | 286 | .public-layout .footer ul a { 287 | color: $dark-text-color; 288 | } 289 | 290 | .public-layout .footer .brand svg path { 291 | fill: default !important; // Set to some invalid color 292 | } 293 | 294 | .embed, 295 | .public-layout { 296 | .footer { 297 | color: $dark-text-color; 298 | } 299 | 300 | .header { 301 | background-color: $ui-highlight-color; 302 | background-image: $highlight-color-diamonds; 303 | border-bottom: solid 2px $panel-shadow; 304 | 305 | .nav-link { 306 | color: $darker-text-color; 307 | text-shadow: $panel-box-shadow; 308 | 309 | &.nav-button { 310 | text-shadow: none; 311 | } 312 | 313 | &:hover { 314 | background: transparentize($white, 0.3); 315 | text-shadow: none; 316 | text-decoration: none; 317 | } 318 | } 319 | } 320 | 321 | .public-account-header { 322 | &__bar { 323 | &::before { 324 | background: $ui-base-color; 325 | } 326 | 327 | .avatar img { 328 | border-radius: 8px; 329 | border: 2px solid $panel-border; 330 | } 331 | } 332 | 333 | &__tabs__tabs { 334 | .counter { 335 | border-right: none; 336 | 337 | &.active::after { 338 | border-bottom: 4px solid $panel-border; 339 | } 340 | 341 | &:hover::after { 342 | border-bottom: 4px solid lighten($panel-border, 10%); 343 | } 344 | 345 | &::after { 346 | border-bottom: 4px solid lighten($panel-border, 20%); 347 | } 348 | } 349 | } 350 | } 351 | 352 | .directory__card { 353 | @include panel-format(); 354 | 355 | &__img { 356 | border-radius: 6px; 357 | } 358 | 359 | &__bar { 360 | background: none; 361 | border-bottom: 1px solid $panel-border; 362 | 363 | .display-name strong { 364 | color: $secondary-text-color; 365 | } 366 | 367 | .display-name span { 368 | color: $primary-text-color; 369 | } 370 | 371 | .avatar { 372 | @include avatar-radius(); 373 | } 374 | } 375 | 376 | &__extra { 377 | background: none; 378 | 379 | .account__header__content { 380 | border-bottom: 1px solid $panel-border; 381 | } 382 | } 383 | } 384 | 385 | .endorsements-widget, 386 | .placeholder-widget, 387 | .public-account-bio { 388 | @include panel-format(); 389 | } 390 | 391 | .status { 392 | padding: 15px; 393 | } 394 | } 395 | 396 | .status__avatar, 397 | .public-layout .status__avatar { 398 | height: 48px; 399 | left: 10px; 400 | position: absolute; 401 | top: 0; 402 | width: 48px; 403 | margin-left: -74px; 404 | } 405 | 406 | .status { 407 | @include status-position(); 408 | } 409 | 410 | .account__avatar, 411 | .account__avatar-overlay-base, 412 | .account__avatar-overlay-overlay, 413 | .activity-stream .status.light .status__avatar, 414 | .activity-stream .detailed-status.light .avatar, 415 | .account__avatar-composite, 416 | .account__avatar-composite div 417 | { 418 | border: solid 2px $panel-border; 419 | box-shadow: 0 1px 1px rgba(0, 0, 0, 0.4); 420 | } 421 | 422 | .account__avatar-overlay-overlay { 423 | background-color: rgba($ui-base-color, 0.9); 424 | } 425 | 426 | .drawer { 427 | min-width: 320px; 428 | 429 | &__pager, 430 | &__header { 431 | background-color: $ui-highlight-color; 432 | background-image: $highlight-color-diamonds; 433 | } 434 | 435 | &__header { 436 | padding-left: 83px; 437 | border-bottom: solid 2px $panel-shadow; 438 | margin-bottom: 0px; 439 | 440 | a { 441 | &:hover { 442 | background: transparentize($white, 0.3); 443 | text-shadow: none; 444 | } 445 | } 446 | } 447 | 448 | &__tab { 449 | padding: 15px 4px; 450 | text-shadow: $panel-box-shadow; 451 | } 452 | 453 | &__inner { 454 | background: none; 455 | 456 | &.darker { 457 | background-color: $ui-highlight-color; 458 | background-image: $highlight-color-diamonds; 459 | } 460 | 461 | &__mastodon { 462 | background: none; 463 | visibility: hidden; // Hide the elephant 464 | } 465 | } 466 | } 467 | 468 | .tabs-bar { 469 | padding-left: 90px; 470 | background-color: $ui-highlight-color; 471 | background-image: $highlight-color-diamonds; 472 | border-bottom: 2px solid $panel-shadow; 473 | 474 | &__link { 475 | color: $darker-text-color; 476 | text-shadow: $panel-box-shadow; 477 | border-bottom: 0; 478 | 479 | &:hover { 480 | background: transparentize($white, 0.3); 481 | } 482 | 483 | &.active { 484 | color: inherit; 485 | border-bottom: 0; 486 | text-shadow: none; 487 | background: transparentize($white, 0.5); 488 | } 489 | } 490 | } 491 | 492 | @media screen and (min-width: 320px) { 493 | .tabs-bar { 494 | margin: 0; 495 | padding-left: 90px; 496 | } 497 | 498 | .tabs-bar__link { 499 | padding: 17px 4px; 500 | } 501 | 502 | .search { 503 | margin-bottom: 0; 504 | } 505 | 506 | .columns-area { 507 | padding: 0; 508 | } 509 | } 510 | 511 | .empty-column-indicator, 512 | .column>.scrollable { 513 | background: transparentize($ui-base-lighter-color, 0.9); 514 | } 515 | 516 | .column-header, 517 | .column-header > .column-header__back-button, 518 | .column-header__back-button, 519 | .column-back-button, 520 | .column-header__button { 521 | font-weight: bold; 522 | background: desaturate(darken($ui-base-color, 12%),18%); 523 | color: $primary-text-color; 524 | } 525 | 526 | .column-header { 527 | &.active { 528 | .column-header__icon { 529 | color: $ui-highlight-color; 530 | } 531 | } 532 | } 533 | 534 | .compose-form .compose-form__buttons-wrapper { 535 | background: darken($ui-base-color, 6%); 536 | } 537 | 538 | .compose-form .compose-form__warning { 539 | background: lighten($ui-highlight-color, 30%); 540 | 541 | a { 542 | color: $dark-text-color; 543 | text-decoration: none; 544 | } 545 | } 546 | 547 | .button.logo-button { 548 | background: darken($ui-base-color, 10%); 549 | &:hover { 550 | background: $white; 551 | } 552 | } 553 | 554 | // Change the background color of status__content__spoiler-link 555 | // this is such a mess 556 | .public-layout .header .nav-button, 557 | .reply-indicator__content .status__content__spoiler-link, 558 | .status__content .status__content__spoiler-link, 559 | .status__content__spoiler-link, 560 | .activity-stream .status.light .status__content a.status__content__spoiler-link, 561 | .activity-stream .detailed-status.light .status__content a.status__content__spoiler-link { 562 | color: $white; 563 | background: $ui-primary-color; 564 | 565 | &:hover { 566 | color: $white; 567 | background: lighten($ui-primary-color, 6%); 568 | } 569 | } 570 | 571 | .reply-indicator { 572 | background: $ui-base-color; 573 | } 574 | 575 | .status__display-name strong, 576 | .account__display-name strong, 577 | .display-name strong { 578 | color: $secondary-text-color; 579 | } 580 | 581 | .status__expand { 582 | width: 0; 583 | } 584 | 585 | .muted { 586 | .status__content p { 587 | color: lighten($primary-text-color, 15%); 588 | } 589 | 590 | .status__content a, 591 | .display-name__account 592 | { 593 | color: lighten($dark-text-color, 15%); 594 | } 595 | 596 | .status__display-name strong, 597 | .status__content a.mention 598 | { 599 | color: lighten($secondary-text-color, 15%); 600 | } 601 | 602 | .status__avatar { 603 | opacity: 0.65; 604 | 605 | .account__avatar, 606 | .account__avatar-overlay, 607 | .account__avatar-overlay-overlay, 608 | .account__avatar-overlay-base, { 609 | box-shadow: none; 610 | } 611 | } 612 | 613 | .status__content__spoiler-link { 614 | background: lighten(saturate($ui-primary-color, 5%), 10%); 615 | color: $white; 616 | 617 | &:hover { 618 | background: lighten(saturate($ui-primary-color, 5%), 20%); 619 | } 620 | } 621 | 622 | .status__action-bar .fa { 623 | opacity: 0.75; 624 | -webkit-transition: opacity 300ms; 625 | transition: opacity 300ms; 626 | 627 | &:hover { 628 | opacity: 1; 629 | } 630 | } 631 | } 632 | 633 | .column-link { 634 | font-weight: bold; 635 | background: desaturate(darken($ui-base-color, 12%),18%); 636 | } 637 | 638 | .column-subheading { 639 | background: darken($ui-base-color, 10%); 640 | color: $darker-text-color; 641 | } 642 | 643 | .getting-started { 644 | background: inherit; 645 | 646 | &__trends { 647 | @include panel-format; 648 | 649 | h4 { 650 | color: $primary-text-color; 651 | } 652 | } 653 | } 654 | 655 | .getting-started__wrapper { 656 | background-image: $highlight-color-diamonds; 657 | height: unset !important; // Bug in upstream mastodon? 658 | } 659 | 660 | 661 | .search__icon .fa { 662 | color: inherit; 663 | } 664 | 665 | .search__input { 666 | background: desaturate(darken($ui-base-color, 12%), 10%); 667 | color: $darker-text-color; 668 | } 669 | 670 | .search-results { 671 | background: transparentize(darken(desaturate($ui-highlight-color, 11%), 19%), 0.4); 672 | } 673 | 674 | .search-results__header { 675 | border-bottom: solid 1px lighten(desaturate($ui-highlight-color, 26%), 12%); 676 | } 677 | 678 | .list-editor__accounts, 679 | .search-results__section { 680 | .fa { 681 | text-shadow: $panel-box-shadow; 682 | } 683 | 684 | strong { 685 | color: lighten(desaturate($ui-highlight-color, 19%), 21%); 686 | padding-top: 3px; 687 | } 688 | 689 | span { 690 | color: lighten(desaturate($ui-highlight-color, 26%), 12%); 691 | } 692 | 693 | .account__avatar { 694 | box-shadow: none; 695 | } 696 | 697 | .account { 698 | border-bottom: 0; 699 | } 700 | 701 | h5 { 702 | background: transparentize(darken(desaturate($ui-highlight-color, 11%), 19%), 0.4); 703 | color: inherit; 704 | } 705 | 706 | .search-results__hashtag { 707 | color: lighten(desaturate($ui-highlight-color, 19%), 21%); 708 | 709 | &:hover, 710 | &:active, 711 | &:focus { 712 | color: inherit; 713 | } 714 | } 715 | } 716 | 717 | .compose-form__publish-button-wrapper > .button { 718 | background: $ui-base-lighter-color; 719 | } 720 | 721 | .navigation-bar { 722 | background: transparentize(darken(desaturate($ui-primary-color, 11%), 18%), 0.4); 723 | color: lighten(desaturate($ui-highlight-color, 26%), 12%); 724 | font-weight: bold; 725 | 726 | strong { 727 | color: lighten(desaturate($ui-highlight-color, 19%), 21%); 728 | } 729 | } 730 | 731 | .column, .drawer { 732 | padding-bottom: 0 !important; 733 | } 734 | 735 | .account-timeline__header { 736 | padding-bottom: 5px; 737 | } 738 | 739 | .account__header .account__header__display-name, 740 | .account__header__display-name { 741 | color: $white; 742 | } 743 | 744 | .account__header__content, 745 | .account__header .account__header__content { 746 | color: $primary-text-color; 747 | 748 | .hashtag, .mention { 749 | color: $secondary-text-color; 750 | } 751 | 752 | a { 753 | color: $dark-text-color; 754 | text-decoration: none; 755 | } 756 | } 757 | 758 | .account__header__content.p-note { 759 | color: $darker-text-color; 760 | } 761 | 762 | // Stream entries 763 | .activity-stream, 764 | .accounts-grid { 765 | background: rgba($black, 0.1); 766 | } 767 | 768 | .accounts-grid.empty img { 769 | opacity: 0.6; 770 | } 771 | 772 | .activity-stream-tabs { 773 | background: rgba($white, 0.5); 774 | border-bottom: 0; 775 | border-radius: 0 0 25px 25px; 776 | margin-bottom: 10px; 777 | } 778 | 779 | .status, 780 | .detailed-status, 781 | .activity-stream .detailed-status.light, 782 | .report-modal__statuses .status-check-box, 783 | .card .card__bio, 784 | .box-widget, 785 | .account__header__bar, 786 | .hero-widget, 787 | .boost-modal, 788 | .confirmation-modal, 789 | .report-modal, 790 | .actions-modal, 791 | .mute-modal { 792 | @include panel-format(); 793 | 794 | &.status-direct { 795 | &:not(.read) { 796 | @include panel-format(); 797 | } 798 | } 799 | } 800 | 801 | .boost-modal, 802 | .confirmation-modal, 803 | .report-modal, 804 | .actions-modal, 805 | .mute-modal { 806 | color: $primary-text-color; 807 | 808 | .status__content p { 809 | color: $primary-text-color; 810 | } 811 | } 812 | 813 | .hero-widget__text, 814 | .landing .hero-widget__text { 815 | background: none; 816 | } 817 | 818 | .account__header__bar { 819 | border-radius: 0; 820 | } 821 | 822 | .poll__chart { 823 | background: lighten($ui-highlight-color, 10%); 824 | } 825 | 826 | .landing .hero-widget__footer { 827 | background: none; 828 | } 829 | 830 | @media screen and (min-width: 600px) { 831 | .public-layout .public-account-header__tabs__name h1, 832 | .public-layout .public-account-header__tabs__name h1 small { 833 | color: $white; 834 | } 835 | } 836 | 837 | .public-account-header__image::after, 838 | .card::after { 839 | background: $black-background; 840 | } 841 | 842 | .icon-button { 843 | &.active:not(.star-icon) { 844 | color: $ui-highlight-color; 845 | 846 | &:hover { 847 | color: lighten($ui-highlight-color, 15%); 848 | } 849 | } 850 | 851 | &:hover, 852 | &:active { 853 | background: none; 854 | } 855 | 856 | &.overlayed { 857 | background: rgba($black, 0.4); 858 | color: $white; 859 | 860 | &:hover { 861 | color: $white; 862 | } 863 | } 864 | 865 | &.disabled { 866 | color: inherit; 867 | opacity: 0.6; 868 | } 869 | } 870 | 871 | .media-gallery__gifv__label { 872 | background: rgba($white, 0.4); 873 | } 874 | 875 | .account-gallery__item { 876 | a { 877 | background-size: contain; 878 | background-repeat: no-repeat; 879 | } 880 | } 881 | 882 | .media-gallery__item-thumbnail { 883 | &, 884 | img { 885 | object-fit: contain; 886 | } 887 | } 888 | 889 | .media-gallery__item-gifv-thumbnail { 890 | object-fit: contain; 891 | top: 0%; 892 | transform: none; 893 | } 894 | 895 | .media-spoiler-video { 896 | background-size: contain; 897 | width: 100% !important; 898 | background: rgba($black, 0.2); 899 | } 900 | 901 | .relationship-tag, 902 | .spoiler-button__overlay__label { 903 | color: $white; 904 | } 905 | 906 | .detailed-status__action-bar { 907 | background: none; 908 | border: 0; 909 | } 910 | 911 | .activity-stream { 912 | .pre-header { 913 | padding-bottom: 10px; 914 | } 915 | 916 | .entry { 917 | // Original style has overrides for first/last child 918 | border-radius: 8px !important; 919 | background: none; 920 | 921 | .entry-center { 922 | padding-bottom: 10px; 923 | } 924 | 925 | &:first-child, 926 | &:last-child { 927 | &, 928 | .status, 929 | .detailed-status, 930 | .detailed-status.light, 931 | .status.light { 932 | border-radius: 8px !important; 933 | } 934 | } 935 | } 936 | 937 | .detailed-status.light { 938 | .avatar img { 939 | border-radius: 0; 940 | } 941 | 942 | .status__content { 943 | color: $primary-text-color; 944 | } 945 | 946 | .detailed-status__display-name .display-name, 947 | .display-name { 948 | strong { 949 | color: $secondary-text-color; 950 | } 951 | 952 | span { 953 | color: $primary-text-color; 954 | } 955 | } 956 | } 957 | 958 | .status.light { 959 | padding: 8px 14px 14px; 960 | 961 | .status__avatar { 962 | left: 10px; 963 | top: 0; 964 | } 965 | 966 | .status__content { 967 | color: $primary-text-color; 968 | } 969 | 970 | .display-name { 971 | strong { 972 | color: $secondary-text-color; 973 | } 974 | 975 | span { 976 | color: $primary-text-color; 977 | } 978 | } 979 | } 980 | } 981 | 982 | .reply-indicator__content, 983 | .status__content { 984 | p a:not(.hashtag):not(.mention) { 985 | color: $highlight-text-color; 986 | .unhandled-link { 987 | color: $highlight-text-color; 988 | } 989 | } 990 | } 991 | 992 | .react-toggle-track { 993 | background-color: $ui-base-lighter-color; 994 | } 995 | 996 | .report-modal__statuses .status-check-box { 997 | margin: 8px; 998 | } 999 | 1000 | .account--follows-info { 1001 | color: $white; 1002 | } 1003 | 1004 | .community-timeline__section-headline, 1005 | .public-timeline__section-headline, 1006 | .account__section-headline { 1007 | border-bottom: 0; 1008 | background: rgba($white, 0.3); 1009 | 1010 | a { 1011 | padding: 10px 0; 1012 | } 1013 | } 1014 | 1015 | .regeneration-indicator { 1016 | background: inherit; 1017 | } 1018 | 1019 | .regeneration-indicator__label { 1020 | margin-top: 0; 1021 | } 1022 | 1023 | .compose-form .compose-form__modifiers .compose-form__upload-thumbnail { 1024 | background-size: contain; 1025 | } 1026 | 1027 | .react-swipeable-view-container, 1028 | .react-swipeable-view-container .columns-area, 1029 | .react-swipeable-view-container .drawer, 1030 | .react-swipeable-view-container .column { 1031 | height: 100% !important; 1032 | } 1033 | 1034 | .account-role.bot { 1035 | color: lighten($error-red, 5%); 1036 | background-color: rgba(lighten($error-red, 12%), 0.4); 1037 | } 1038 | 1039 | .accounts-grid .account-grid-card .account-grid-card__header::after { 1040 | background: $black-background; 1041 | } 1042 | 1043 | .card .controls .icon-button, 1044 | .account-grid-card .controls .icon-button { 1045 | color: $white; 1046 | } 1047 | 1048 | .list-editor .drawer__inner.backdrop { 1049 | @include panel-format(); 1050 | border-radius: 0; 1051 | border-left: 0; 1052 | border-top: 0; 1053 | border-bottom: 0; 1054 | } 1055 | 1056 | .list-editor__accounts .account { 1057 | background: transparentize(darken(desaturate($ui-highlight-color, 11%), 19%), 0.4); 1058 | } 1059 | 1060 | // Admin page 1061 | .dashboard__widgets a:not(.name-tag) { 1062 | color: $ui-primary-color; 1063 | } 1064 | -------------------------------------------------------------------------------- /SCSS/kkt/variables.scss: -------------------------------------------------------------------------------- 1 | // Commonly used web colors 2 | $black: #000000; // Black 3 | $white: #ffffff; // White 4 | $success-green: #79bd9a !default; // Padua 5 | $error-red: #df405a !default; // Cerise 6 | $warning-red: #ff5050 !default; // Sunset Orange 7 | $gold-star: #ca8f04 !default; // Dark Goldenrod 8 | 9 | // Variables for defaults in UI 10 | $base-shadow-color: $black !default; 11 | $base-overlay-background: transparentize($black, 0.7) !default; 12 | $base-border-color: $white !default; 13 | $simple-background-color: $white !default; 14 | $valid-value-color: $success-green !default; 15 | $error-value-color: $error-red !default; 16 | 17 | // Tell UI to use selected colors 18 | $ui-base-color: #ecf5be !default; // Darkest 19 | $ui-base-lighter-color: darken($ui-base-color, 40%) !default; // Lighter darkest 20 | $ui-primary-color: #ed649c !default; // Lighter 21 | $ui-secondary-color: #ecf5be !default; // Lightest 22 | $ui-highlight-color: #e46bac !default; 23 | 24 | // Variables for texts 25 | $primary-text-color: #7b5d4d !default; 26 | $darker-text-color: #6a4643 !default; 27 | $dark-text-color: #8e9956 !default; 28 | $secondary-text-color: #ed649c !default; 29 | $highlight-text-color: #8e9956 !default; 30 | $action-button-color: lighten(desaturate($darker-text-color, 5%), 12%) !default; 31 | 32 | // For texts on inverted backgrounds 33 | $inverted-text-color: $black !default; 34 | $lighter-text-color: $primary-text-color !default; 35 | $light-text-color: $darker-text-color !default; 36 | 37 | // Custom 38 | $scrollbar-color: #7b5d4d; 39 | $panel-border: #e1c152; 40 | $panel-shadow: #f5e33a; 41 | 42 | $banner-color: #f5e33a; 43 | $banner-shadow: #7b5d4d; 44 | 45 | $panel-background: linear-gradient(to bottom, desaturate(lighten($panel-shadow, 35%), 10%) 0%, desaturate(lighten($panel-shadow, 35%), 10%) 65%, desaturate(lighten($panel-shadow, 25%), 5%) 100%); 46 | 47 | $panel-box-shadow: -1px -1px 0 $panel-shadow, 1px -1px 0 $panel-shadow, -1px 1px 0 $panel-shadow, 1px 1px 0 $panel-shadow; 48 | 49 | // Background Variables 50 | @function hex-color($color) { 51 | @if type-of($color) == 'color' { 52 | $color: str-slice(ie-hex-str($color), 4); 53 | } 54 | @return '%23' + unquote($color) 55 | } 56 | 57 | $base-color-diamonds: url("data:image/svg+xml,%3Csvg xmlns:rdf='http://www.w3.org/1999/02/22-rdf-syntax-ns%23' xmlns='http://www.w3.org/2000/svg' xmlns:cc='http://creativecommons.org/ns%23' xmlns:dc='http://purl.org/dc/elements/1.1/' height='114' viewBox='0 0 80 114' width='80' version='1.1'%3E %3Crect height='114' width='80' y='0' x='0' fill='#{hex-color($ui-base-color)}'/%3E %3Cpath fill='#{hex-color(desaturate(darken($ui-base-color, 10%), 5%))}' d='m0 57 40-57 40 57-40 57z'/%3E %3C/svg%3E"); 58 | 59 | $highlight-color-diamonds: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='28' width='20'%3E%3Crect height='28' width='20' y='0' x='0' fill='#{hex-color($ui-highlight-color)}'/%3E%3Cpath d='m0 14 10-14 10 14-10 14z' fill='#{hex-color(darken($ui-highlight-color, 5%))}'/%3E%3C/svg%3E"); 60 | 61 | $balloon-tail: url("data:image/svg+xml,%3Csvg width='12' height='14' xmlns='http://www.w3.org/2000/svg'%3E %3Cline id='svg_1' y2='12.412' x2='10.03575' y1='0.833' x1='10.03575' stroke-miterlimit='10' stroke-width='2' stroke='#{hex-color(desaturate(lighten($panel-shadow, 35%), 10%))}' fill='none'/%3E %3Cpath id='svg_2' d='m9.76,1c0,0 -4.8235,0.92675 -8,5.833c5.42675,1 8,5.334 8,5.334' stroke-miterlimit='10' stroke-linecap='round' stroke-width='2' stroke='#{hex-color($panel-border)}' fill='#{hex-color(desaturate(lighten($panel-shadow, 35%), 10%))}'/%3E %3C/svg%3E"); 62 | 63 | $muted-balloon-tail: url("data:image/svg+xml,%3Csvg width='12' height='14' xmlns='http://www.w3.org/2000/svg'%3E %3Cline id='svg_1' y2='12.412' x2='10.03575' y1='0.833' x1='10.03575' stroke-miterlimit='10' stroke-width='2' stroke='#{hex-color(desaturate(lighten($panel-shadow, 35%), 10%))}' fill='none'/%3E %3Cpath id='svg_2' d='m9.76,1c0,0 -4.8235,0.92675 -8,5.833c5.42675,1 8,5.334 8,5.334' stroke-miterlimit='10' stroke-linecap='round' stroke-width='2' stroke='#{hex-color(lighten($panel-border, 10%))}' fill='#{hex-color(desaturate(lighten($panel-shadow, 35%), 10%))}'/%3E %3C/svg%3E"); 64 | 65 | $black-background: linear-gradient(rgba(0,0,0,0.2), rgba(0,0,0,0.6) 45%, rgba(0,0,0,0.7) 65%, rgba(0,0,0,0.8)); 66 | $white-background: linear-gradient(rgba(255,255,255,0.2), rgba(255,255,255,0.6) 45%, rgba(255,255,255,0.7) 65%, rgba(255,255,255,0.8)); 67 | -------------------------------------------------------------------------------- /V9 (CSS)/kkt-userstyles.css: -------------------------------------------------------------------------------- 1 | @-moz-document url-prefix("https://kirakiratter.com") { 2 | /* 3 | Mastodon: Kirakiratter Custom CSS V9.0 4 | By Salil Gupta (@MasterDalK) 5 | Other Contributors: @pomo, @sumire, @bitmap, @hisagi, @lae, @takenoko, @unarist 6 | */ 7 | 8 | /*[[mui]]*/ 9 | /*[[columnsize]]*/ 10 | /*[[replyindicator]]*/ 11 | 12 | /* BACKGROUNDS */ 13 | body /* user */, 14 | .about-body /* about */, 15 | .admin-wrapper /* settings */, 16 | .ui /* timeline */ { 17 | background-color: #e46bac; 18 | background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxuczpyZGY9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkvMDIvMjItcmRmLXN5bnRheC1ucyMiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6Y2M9Imh0dHA6Ly9jcmVhdGl2ZWNvbW1vbnMub3JnL25zIyIgeG1sbnM6ZGM9Imh0dHA6Ly9wdXJsLm9yZy9kYy9lbGVtZW50cy8xLjEvIiBoZWlnaHQ9IjExNCIgdmlld0JveD0iMCAwIDgwIDExNCIgd2lkdGg9IjgwIiB2ZXJzaW9uPSIxLjEiPgo8cmVjdCBoZWlnaHQ9IjExNCIgd2lkdGg9IjgwIiB5PSIwIiB4PSIwIiBmaWxsPSIjZWNmNWJlIi8+CjxwYXRoIGZpbGw9IiNlMGVhOTUiIGQ9Im0wIDU3IDQwLTU3IDQwIDU3LTQwIDU3eiIvPgo8L3N2Zz4="); 19 | background-repeat: repeat; 20 | background-size: auto; /* for user page */ 21 | } 22 | 23 | /* KKT Banner */ 24 | .ui::before { 25 | position: absolute; 26 | z-index: 100; 27 | display: inline; 28 | content: ""; 29 | min-width: 120px; 30 | max-width: 30%; 31 | min-height: 50px; 32 | pointer-events: none; 33 | background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxuczpzdmc9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZlcnNpb249IjEuMSIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSIgd2lkdGg9IjI1NS41IiBoZWlnaHQ9IjExOC40IiB2aWV3Qm94PSIwIDAgMjU1LjUgMTE4LjQiPjxzdHlsZT4uczB7ZmlsbDojZDFiZDNlO30uczF7ZmlsbDpub25lO3N0cm9rZS13aWR0aDowLjM7c3Ryb2tlOiNjOWEwNjM7fS5zMntmaWxsOiNmNWRjNDA7fS5zM3tmaWxsOiM3YTUwM2Y7fTwvc3R5bGU+PGRlZnM+PGNsaXBQYXRoIGNsaXBQYXRoVW5pdHM9InVzZXJTcGFjZU9uVXNlIj48cGF0aCBkPSJNMCAxMTMuNEgyNTUuMVYwSDBaIi8+PC9jbGlwUGF0aD48L2RlZnM+PGcgdHJhbnNmb3JtPSJtYXRyaXgoMS4zMzMzMzMzLDAsMCwtMS4zMzMzMzMzLC00Mi42ODQzMTksMTMzLjE1NzQ2KSI+PGcgdHJhbnNmb3JtPSJyb3RhdGUoMjAuNzc4ODQzLDEyNy44NDU1OCw1Ni4wMTEyNzEpIj48ZyBjbGlwLXBhdGg9InVybCgjY2xpcFBhdGg0NTAxKSI+PGcgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMTk5LjgxNzQsNjQuMTQzNCkiPjxwYXRoIGQ9Ik0wIDBDMS41IDAuNSAzLjcgMS4xIDMuOSAzIDMuOSAzIDMuOSAzIDMuOSAzIDMuOSAzIDMuNyAzLjYgMy40IDMuOSAzLjEgNC4zIDIuOCA0LjUgMi40IDQuNyAyLjEgNC44IDEuOSA0LjkgMS40IDUuMSAxLjIgNS4yIDAuOSA1LjMgMC41IDUuNCAwLjQgNS41IDAuMSA1LjYtMC4yIDUuN2MtMS4zIDAuMy0yLjggMC41LTIuOCAwLjUgMCAwLTEgMC0xLjktMC4xLTAuNCAwLTEtMC4xLTEuNy0wLjIgMCAwLTAuNyAwLjEtMC43IDAuMS0wLjUgMC0xLjEgMC4xLTIgMC4yVi0yLjNjMCAwIDAgMCAwIDBDLTYuMS0xLjctMy0wLjkgMCAwIiBmaWxsPSIjZDFiZDNlIi8+PC9nPjxnIHRyYW5zZm9ybT0idHJhbnNsYXRlKDE5OS44MTc0LDY0LjE0MzQpIj48cGF0aCBkPSJNMCAwQzEuNSAwLjUgMy43IDEuMSAzLjkgMyAzLjkgMyAzLjkgMyAzLjkgMyAzLjkgMyAzLjcgMy42IDMuNCAzLjkgMy4xIDQuMyAyLjggNC41IDIuNCA0LjcgMi4xIDQuOCAxLjkgNC45IDEuNCA1LjEgMS4yIDUuMiAwLjkgNS4zIDAuNSA1LjQgMC40IDUuNSAwLjEgNS42LTAuMiA1LjdjLTEuMyAwLjMtMi44IDAuNS0yLjggMC41IDAgMC0xIDAtMS45LTAuMS0wLjQgMC0xLTAuMS0xLjctMC4yIDAgMC0wLjcgMC4xLTAuNyAwLjEtMC41IDAtMS4xIDAuMS0yIDAuMlYtMi4zYzAgMCAwIDAgMCAwQy02LjEtMS43LTMtMC45IDAgMFoiIGNsYXNzPSJzMSIvPjwvZz48ZyB0cmFuc2Zvcm09InRyYW5zbGF0ZSg1NS45MDIzLDY0LjIwODgpIj48cGF0aCBkPSJtMCAwYy0xLjUgMC41LTMuNyAxLjEtMy45IDMgMCAwIDAgMCAwIDAgMCAwIDAuMiAwLjUgMC41IDAuOSAwLjMgMC40IDAuNiAwLjUgMS4xIDAuOCAwLjIgMC4xIDAuNSAwLjIgMSAwLjQgMC4xIDAuMSAwLjQgMC4yIDAuOCAwLjMgMC4xIDAgMC40IDAuMiAwLjggMC4yIDEuMyAwLjMgMi44IDAuNSAyLjggMC41IDAgMCAxIDAgMS45LTAuMUM1LjMgNiA1LjkgNiA2LjYgNS45IDYuNiA1LjkgNy4zIDUuOSA3LjMgNS45IDcuOCA2IDguNCA2IDkuMiA2LjFWLTIuM0M5LjItMi4zIDkuMi0yLjMgOS4yLTIuMyA2LjEtMS43IDMtMC45IDAgMCIgZmlsbD0iI2QxYmQzZSIvPjwvZz48ZyB0cmFuc2Zvcm09InRyYW5zbGF0ZSg1NS45MDIzLDY0LjIwODgpIj48cGF0aCBkPSJtMCAwYy0xLjUgMC41LTMuNyAxLjEtMy45IDMgMCAwIDAgMCAwIDAgMCAwIDAuMiAwLjUgMC41IDAuOSAwLjMgMC40IDAuNiAwLjUgMS4xIDAuOCAwLjIgMC4xIDAuNSAwLjIgMSAwLjQgMC4xIDAuMSAwLjQgMC4yIDAuOCAwLjMgMC4xIDAgMC40IDAuMiAwLjggMC4yIDEuMyAwLjMgMi44IDAuNSAyLjggMC41IDAgMCAxIDAgMS45LTAuMUM1LjMgNiA1LjkgNiA2LjYgNS45IDYuNiA1LjkgNy4zIDUuOSA3LjMgNS45IDcuOCA2IDguNCA2IDkuMiA2LjFWLTIuM0M5LjItMi4zIDkuMi0yLjMgOS4yLTIuMyA2LjEtMS43IDMtMC45IDAgMFoiIGNsYXNzPSJzMSIvPjwvZz48ZyB0cmFuc2Zvcm09InRyYW5zbGF0ZSgxOTMuMjUyLDcwLjAxODkpIj48cGF0aCBkPSJtMCAwYzEuMyAwLjEgMS44IDAuMyAzLjYgMC4zIDAgMCAyLjMgMCA1LjMtMS41IDAuNS0wLjIgMC44LTAuNSAxLTAuNyAwLjMtMC4zIDAuNC0wLjYgMC41LTEgMCAwIDAgMCAwIDAgMCAwIDAtMC4xIDAuMS0wLjEgMC40LTAuOSAwLjItMi4yIDAuMy0zLjIgMC0wLjQgMC0wLjUgMC0wLjcgMC0wLjIgMC4xLTEgMC4xLTIuMSAwLTAuOS0wLjEtNS41LTAuMi0xMS44IDIuMS0wLjggNC42LTEuNiA3LjMtMi4zIDUuNi0xLjQgMTAuNy0xLjcgMTQuNy0xLjYtMiAzLjMtNC4xIDYuNi02LjEgMTAgMi4yIDMuMyA0LjUgNi42IDYuNyAxMC05LjEgMC41LTEzLjEgMS41LTE0LjcgMi40IDAgMC0wLjIgMC4xLTAuMyAwLjItMC45IDAuNS0zIDEuNy01LjggMy0xIDAuNS0yLjEgMC45LTMuNSAxLjQgMCAwLTYgMS45LTEwLjMgMEMtMi4xIDEuOC0yLjQgMS4zLTIuNCAxLjMtMi41IDEuMS0yLjggMC42LTIuNyAwLjItMi41LTAuMi0xLjUtMC4xIDAgMCIgZmlsbD0iI2Y1ZGM0MCIvPjwvZz48ZyB0cmFuc2Zvcm09InRyYW5zbGF0ZSgxOTMuMjUyLDcwLjAxODkpIj48cGF0aCBkPSJtMCAwYzEuMyAwLjEgMS44IDAuMyAzLjYgMC4zIDAgMCAyLjMgMCA1LjMtMS41IDAuNS0wLjIgMC44LTAuNSAxLTAuNyAwLjMtMC4zIDAuNC0wLjYgMC41LTEgMCAwIDAgMCAwIDAgMCAwIDAtMC4xIDAuMS0wLjEgMC40LTAuOSAwLjItMi4yIDAuMy0zLjIgMC0wLjQgMC0wLjUgMC0wLjcgMC0wLjIgMC4xLTEgMC4xLTIuMSAwLTAuOS0wLjEtNS41LTAuMi0xMS44IDIuMS0wLjggNC42LTEuNiA3LjMtMi4zIDUuNi0xLjQgMTAuNy0xLjcgMTQuNy0xLjYtMiAzLjMtNC4xIDYuNi02LjEgMTAgMi4yIDMuMyA0LjUgNi42IDYuNyAxMC05LjEgMC41LTEzLjEgMS41LTE0LjcgMi40IDAgMC0wLjIgMC4xLTAuMyAwLjItMC45IDAuNS0zIDEuNy01LjggMy0xIDAuNS0yLjEgMC45LTMuNSAxLjQgMCAwLTYgMS45LTEwLjMgMEMtMi4xIDEuOC0yLjQgMS4zLTIuNCAxLjMtMi41IDEuMS0yLjggMC42LTIuNyAwLjItMi41LTAuMi0xLjUtMC4xIDAgMFoiIGNsYXNzPSJzMSIvPjwvZz48ZyB0cmFuc2Zvcm09InRyYW5zbGF0ZSg2Mi40Njc4LDcwLjA4NDMpIj48cGF0aCBkPSJtMCAwYy0xLjMgMC4xLTEuOCAwLjMtMy42IDAuMyAwIDAtMi4zIDAtNS4zLTEuNS0wLjUtMC4yLTAuOC0wLjUtMS0wLjctMC4zLTAuMy0wLjQtMC42LTAuNS0xIDAgMCAwIDAgMCAwIDAgMCAwLTAuMS0wLjEtMC4xLTAuNC0wLjktMC4yLTIuMi0wLjMtMy4yIDAtMC40IDAtMC41IDAtMC43IDAtMC4yLTAuMS0xLTAuMS0yLjEgMC0wLjkgMC4xLTUuNSAwLjItMTEuOC0yLjEtMC44LTQuNi0xLjYtNy4zLTIuMy01LjYtMS40LTEwLjctMS43LTE0LjctMS42IDIgMy4zIDQuMSA2LjYgNi4xIDEwLTIuMiAzLjMtNC41IDYuNy02LjcgMTAgOS4xIDAuNSAxMy4xIDEuNSAxNC43IDIuNCAwIDAgMC4yIDAuMSAwLjMgMC4yIDAuOSAwLjUgMyAxLjcgNS44IDMgMSAwLjUgMi4xIDAuOSAzLjUgMS40IDAgMCA2IDEuOSAxMC4zIDBDMi4xIDEuOCAyLjQgMS4zIDIuNCAxLjMgMi41IDEuMSAyLjggMC42IDIuNyAwLjMgMi41LTAuMiAxLjUtMC4xIDAgMCIgZmlsbD0iI2Y1ZGM0MCIvPjwvZz48ZyB0cmFuc2Zvcm09InRyYW5zbGF0ZSg2Mi40Njc4LDcwLjA4NDMpIj48cGF0aCBkPSJtMCAwYy0xLjMgMC4xLTEuOCAwLjMtMy42IDAuMyAwIDAtMi4zIDAtNS4zLTEuNS0wLjUtMC4yLTAuOC0wLjUtMS0wLjctMC4zLTAuMy0wLjQtMC42LTAuNS0xIDAgMCAwIDAgMCAwIDAgMCAwLTAuMS0wLjEtMC4xLTAuNC0wLjktMC4yLTIuMi0wLjMtMy4yIDAtMC40IDAtMC41IDAtMC43IDAtMC4yLTAuMS0xLTAuMS0yLjEgMC0wLjkgMC4xLTUuNSAwLjItMTEuOC0yLjEtMC44LTQuNi0xLjYtNy4zLTIuMy01LjYtMS40LTEwLjctMS43LTE0LjctMS42IDIgMy4zIDQuMSA2LjYgNi4xIDEwLTIuMiAzLjMtNC41IDYuNy02LjcgMTAgOS4xIDAuNSAxMy4xIDEuNSAxNC43IDIuNCAwIDAgMC4yIDAuMSAwLjMgMC4yIDAuOSAwLjUgMyAxLjcgNS44IDMgMSAwLjUgMi4xIDAuOSAzLjUgMS40IDAgMCA2IDEuOSAxMC4zIDBDMi4xIDEuOCAyLjQgMS4zIDIuNCAxLjMgMi41IDEuMSAyLjggMC42IDIuNyAwLjMgMi41LTAuMiAxLjUtMC4xIDAgMFoiIGNsYXNzPSJzMSIvPjwvZz48ZyB0cmFuc2Zvcm09InRyYW5zbGF0ZSg1MS41NTQ3LDYxLjc2NzQpIj48cGF0aCBkPSJtMCAwYy0wLjEtMi41IDAtNSAwLjEtNy41IDAuMS0yLjEgMC4yLTQuMSAwLjQtNi4yIDAuNi05LjIgNzUuMi05IDc1LjgtOSAwLjYgMCA3NS4yLTAuMiA3NS44IDkgMC4xIDIuMSAwLjMgNC4xIDAuNCA2LjIgMC4xIDIuNSAwLjIgNSAwLjEgNy41IDAgMC44LTAuMSAxLjctMC4xIDIuNS0wLjEgMC45IDAuMiAyLTAuMyAyLjkgMCAwIDAgMC4xLTAuMSAwLjEgMCAwIDAgMCAwIDAgMCAwIDAgMCAwIDAuMUMxNTEuOCAzLjggMTQ5LjEgMy4zIDE0Ny4yIDIuOCAxNDMuMyAyIDEzOS41IDEuMyAxMzUuNSAwLjcgMTM1LjUgMC43IDEzNS41IDAuNyAxMzUuNSAwLjcgMTIwLjktMS4zIDc3LjEtMi4yIDc2LjMtMi4yIDc1LjUtMi4yIDMxLjctMS4zIDE3LjEgMC43IDE3LjEgMC43IDE3LjEgMC43IDE3LjEgMC43IDEzLjIgMS4zIDkuMyAyIDUuNSAyLjggMy42IDMuMyAwLjggMy44IDAuNiA1LjUgMC41IDUuNSAwLjUgNS41IDAuNSA1LjUgMC41IDUuNSAwLjUgNS41IDAuNSA1LjUgMC41IDUuNCAwLjUgNS40IDAuNSA1LjQtMC4xIDQuNiAwLjIgMy40IDAuMSAyLjUgMC4xIDEuNyAwIDAuOCAwIDAiIGZpbGw9IiNmNWRjNDAiLz48L2c+PGcgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoNTEuNTU0Nyw2MS43Njc0KSI+PHBhdGggZD0ibTAgMGMtMC4xLTIuNSAwLTUgMC4xLTcuNSAwLjEtMi4xIDAuMi00LjEgMC40LTYuMiAwLjYtOS4yIDc1LjItOSA3NS44LTkgMC42IDAgNzUuMi0wLjIgNzUuOCA5IDAuMSAyLjEgMC4zIDQuMSAwLjQgNi4yIDAuMSAyLjUgMC4yIDUgMC4xIDcuNSAwIDAuOC0wLjEgMS43LTAuMSAyLjUtMC4xIDAuOSAwLjIgMi0wLjMgMi45IDAgMCAwIDAuMS0wLjEgMC4xIDAgMCAwIDAgMCAwIDAgMCAwIDAgMCAwLjFDMTUxLjggMy44IDE0OS4xIDMuMyAxNDcuMiAyLjggMTQzLjMgMiAxMzkuNSAxLjMgMTM1LjUgMC43IDEzNS41IDAuNyAxMzUuNSAwLjcgMTM1LjUgMC43IDEyMC45LTEuMyA3Ny4xLTIuMiA3Ni4zLTIuMiA3NS41LTIuMiAzMS43LTEuMyAxNy4xIDAuNyAxNy4xIDAuNyAxNy4xIDAuNyAxNy4xIDAuNyAxMy4yIDEuMyA5LjMgMiA1LjUgMi44IDMuNiAzLjMgMC44IDMuOCAwLjYgNS41IDAuNSA1LjUgMC41IDUuNSAwLjUgNS41IDAuNSA1LjUgMC41IDUuNSAwLjUgNS41IDAuNSA1LjQgMC41IDUuNCAwLjUgNS40LTAuMSA0LjYgMC4yIDMuNCAwLjEgMi41IDAuMSAxLjcgMCAwLjggMCAwWiIgY2xhc3M9InMxIi8+PC9nPjxnIHRyYW5zZm9ybT0idHJhbnNsYXRlKDE4Ny44NzQsNDcuNjgzKSI+PHBhdGggZD0ibTAgMGMwLTAuMy0wLjItMC42LTAuNS0wLjYtMC4zIDAtMC42IDAuMS0wLjcgMC41LTAuMyAyLjctMC41IDQuMS0wLjggNi44IDAgMC4zIDAuMiAwLjYgMC41IDAuNiAwLjMgMCAwLjYtMC4xIDAuNy0wLjUgMC0wLjQgMC4xLTAuNSAwLjEtMC45IDAuMSAwLjQgMC4yIDAuNyAwLjYgMSAwLjQgMC4zIDEgMC43IDEuNiAwLjdDMi4yIDcuNyAyLjMgNy4yIDIuMyA3LjEgMi40IDYuNiAxLjkgNi41IDEuMyA2LjUtMC4yIDYuMi0wLjUgNS41LTAuNiA1LjEtMC40IDMtMC4yIDIgMCAwIiBmaWxsPSIjN2E1MDNmIi8+PC9nPjxnIHRyYW5zZm9ybT0idHJhbnNsYXRlKDE3NS44MjIzLDUzLjE5MjcpIj48cGF0aCBkPSJNMCAwQzIuMSAwLjIgMi40LTEuOCAyLjQtMi4zIDIuNC0yLjQgMi41LTIuOSAxLjktMi45IDAuMy0zLjEtMC41LTMuMS0yLjEtMy4zLTIuMi0yLTItMC4yIDAgME0zLjEtNC4xQzIuNS00LjIgMi41LTQuNiAyLjUtNC45IDIuNC02LjIgMS41LTYuNiAwLjYtNi43Yy0yLjItMC4yLTIuNSAxLjgtMi43IDIuOSAxLjggMC4yIDIuNiAwLjIgNC40IDAuNCAwLjkgMC4xIDEuNCAwLjMgMS4zIDEuMi0wLjEgMS0xLjIgMy0zLjcgMi44LTIuNS0wLjItMy41LTIuMS0zLjMtNC4zIDAuMS0xLjEgMC42LTMuOSA0LTMuNSAyLjYgMC4zIDMuMiAyLjEgMy4yIDIuNyAwIDAuMy0wLjMgMC41LTAuNyAwLjUiIGZpbGw9IiM3YTUwM2YiLz48L2c+PGcgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMTY0LjY2MTEsNTIuMDk3KSI+PHBhdGggZD0ibTAgMGMwLjItMi4zIDAuMy0zLjQgMC40LTUuNiAwLTAuMyAwLjEtMC45IDAuOS0wLjkgMC4xIDAgMC4zIDAgMC41IDAuMSAwLjEgMC4xIDAuMiAwLjEgMC4zIDAuMiAwLjEgMC4xIDAuMSAwLjEgMC4yIDAuMiAwLjIgMC4zIDAgMC43IDAuMiAwLjkgMC4xIDAuMSAwLjMgMC4xIDAuNCAwLjEgMC4zLTAuMiAwLjMtMSAwLTEuNS0wLjUtMC43LTEuNi0wLjctMS45LTAuNy0wLjQgMC0xIDAtMS40IDAuNC0wLjQgMC40LTAuNCAwLjgtMC40IDEtMC4yIDIuMy0wLjIgMy41LTAuNCA1LjgtMC42IDAtMC45LTAuMS0xLjUtMC4xLTAuMiAwLTAuMyAwLjEtMC4zIDAuMiAwIDAuMSAwLjEgMC4zIDAuMyAwLjMgMC42IDAgMC45IDAuMSAxLjUgMC4xIDAgMC43LTAuMSAxLjEtMC4xIDEuOCAwIDAuMyAwLjMgMC42IDAuNSAwLjYgMC4zIDAgMC42LTAuMiAwLjYtMC41IDAuMS0wLjcgMC4xLTEuMSAwLjEtMS44IDAuNyAwLjEgMSAwLjEgMS43IDAuMSAwIDAgMCAwIDAgMEMyIDAuNyAyLjIgMC43IDIuNiAwLjcgMi43IDAuNyAyLjggMC42IDIuOCAwLjUgMi44IDAuMyAyLjcgMC4yIDIuNiAwLjIgMS42IDAuMSAxIDAuMSAwIDAiIGZpbGw9IiM3YTUwM2YiLz48L2c+PGcgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMTU0LjU4ODksNTEuNDUyNSkiPjxwYXRoIGQ9Im0wIDBjMC4xLTIuMyAwLjItMy40IDAuMy01LjYgMC0wLjMgMC4xLTAuOSAwLjktMC45IDAuMSAwIDAuMyAwIDAuNSAwLjEgMC4xIDAuMSAwLjIgMC4xIDAuMyAwLjIgMC4xIDAuMSAwLjEgMC4xIDAuMiAwLjIgMC4zIDAuMyAwIDAuNyAwLjIgMC45IDAuMSAwLjEgMC4zIDAuMSAwLjQgMC4xIDAuMy0wLjIgMC4zLTEgMC0xLjUtMC41LTAuNy0xLjYtMC43LTEuOS0wLjctMC40IDAtMSAwLTEuNCAwLjUtMC4zIDAuNC0wLjQgMC44LTAuNCAxLTAuMSAyLjMtMC4yIDMuNS0wLjMgNS44LTAuNiAwLTAuOSAwLTEuNS0wLjEtMC4yIDAtMC4zIDAuMS0wLjMgMC4yIDAgMC4xIDAuMSAwLjMgMC4zIDAuMyAwLjYgMCAwLjkgMCAxLjUgMC4xIDAgMC43LTAuMSAxLjEtMC4xIDEuOCAwIDAuMyAwLjMgMC42IDAuNiAwLjYgMC4zIDAgMC42LTAuMiAwLjYtMC41IDAtMC43IDAuMS0xLjEgMC4xLTEuOCAwLjcgMCAxIDAuMSAxLjcgMC4xIDAgMCAwIDAgMCAwIDAuMyAwIDAuNSAwIDAuOSAwLjFDMi43IDAuNyAyLjggMC41IDIuOCAwLjQgMi44IDAuMyAyLjcgMC4yIDIuNiAwLjEgMS42IDAuMSAxIDAuMSAwIDAiIGZpbGw9IiM3YTUwM2YiLz48L2c+PGcgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMTQ0LjY1MjMsNDUuMjYzKSI+PHBhdGggZD0ibTAgMGMtMC40LTAuNC0xLjUtMC45LTIuNC0wLjktMC4zIDAtMS44IDAtMS45IDEuMyAwIDIgMi44IDIuMiA0LjEgMi4zek0xLjMtMC42QzEuMy0wLjUgMS4yLTAuMiAxLjItMC4xIDEuMSAxLjUgMS4xIDIuMyAxLjEgNCAxIDQuNSAwLjkgNSAwLjYgNS4zLTAuMiA2LjQtMS42IDYuNC0yLjEgNi40Yy0wLjQgMC0xLjIgMC0yLTAuNS0wLjktMC42LTEuNS0xLjgtMS4yLTIuNCAwLjEtMC4xIDAuMy0wLjQgMC42LTAuNCAwLjIgMCAwLjQgMC4yIDAuNCAwLjIgMC4xIDAuMSAwLjEgMC4xIDAuMSAwLjIgMC4xIDAuMiAwLjEgMC42IDAuMiAwLjggMCAwIDAgMCAwIDAuMSAwLjEgMC4zIDAuNSAxLjMgMS45IDEuNCAxLjIgMCAxLjktMC42IDEuOS0yIDAtMC4yIDAtMC4zIDAtMC42LTIuMS0wLjItNS40LTAuNS01LjQtMi45IDAtMS44IDEuOS0yIDIuOC0xLjkgMS41IDAgMi41IDAuNiAyLjkgMC45IDAuMS0wLjQgMC40LTAuOCAwLjgtMC44IDAuMyAwIDAuNSAwLjIgMC41IDAuNCAwIDAuMS0wLjIgMC40LTAuMiAwLjUiIGZpbGw9IiM3YTUwM2YiLz48L2c+PGcgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMTMwLjQzNTUsNDQuMTA0OCkiPjxwYXRoIGQ9Im0wIDBjMC0wLjMtMC4zLTAuNS0wLjYtMC41LTAuMyAwLTAuNiAwLjItMC42IDAuNSAwIDIuNyAwIDQuMSAwIDYuOCAwIDAuMyAwLjMgMC41IDAuNiAwLjUgMC4zIDAgMC42LTAuMiAwLjYtMC41IDAtMC40IDAtMC41IDAtMC45IDAuMSAwLjQgMC4zIDAuNiAwLjcgMC45IDAuNCAwLjMgMS4xIDAuNSAxLjcgMC41QzMuMSA3LjQgMy4xIDYuOSAzLjEgNi44IDMuMSA2LjMgMi42IDYuMyAyIDYuMyAwLjUgNi4yIDAuMSA1LjUgMCA1LjEgMCAzLjEgMCAyIDAgMCIgZmlsbD0iIzdhNTAzZiIvPjwvZz48ZyB0cmFuc2Zvcm09InRyYW5zbGF0ZSgxMjIuMDY5Myw0NC4xMzEyKSI+PHBhdGggZD0ibTAgMGMwLTAuMy0wLjMtMC41LTAuNi0wLjUtMC4zIDAtMC42IDAuMi0wLjYgMC41IDAgMi43IDAuMSA0LjEgMC4xIDYuOCAwIDAuMyAwLjMgMC41IDAuNiAwLjVDLTAuMiA3LjQgMC4xIDcuMSAwLjEgNi44IDAgNC4xIDAgMi43IDAgME0wLjUgOS44QzAuNCA5LjQgMCA5LTAuNSA5LTEgOS0xLjQgOS40LTEuNCA5LjljMCAwLjUgMC40IDAuOCAwLjkgMC44IDAuNSAwIDAuOS0wLjQgMC45LTAuOCIgZmlsbD0iIzdhNTAzZiIvPjwvZz48ZyB0cmFuc2Zvcm09InRyYW5zbGF0ZSgxMTQuNDU3LDQ0LjI2MjEpIj48cGF0aCBkPSJtMCAwYzAtMC4zLTAuMi0wLjUtMC41LTAuNS0wLjIgMC0wLjMgMC4xLTAuNCAwLjJDLTIuMSAxLjUtMi43IDIuNC0zLjkgNC4yLTQuMiA0LjEtNC4zIDQtNC41IDMuOS00LjUgMi41LTQuNiAxLjgtNC42IDAuNC00LjYgMC4xLTQuNy0wLjEtNC45LTAuMi00LjktMC4yLTQuOS0wLjItNC45LTAuMi01LTAuMy01LTAuMy01LTAuM2MtMC4xIDAtMC4xIDAtMC4yIDAgMCAwIDAgMCAwIDBoMCAwYy0wLjEgMC0wLjEgMC0wLjIgMC4xLTAuMiAwLjEtMC40IDAuNC0wLjQgMC43IDAuMSAzLjkgMC4yIDUuOCAwLjQgOS43IDAgMC40IDAuMiAwLjYgMC40IDAuNyAwIDAgMC4xIDAgMC4xIDAgMCAwIDAgMCAwLjEgMCAwIDAgMCAwIDAgMCAwIDAgMCAwIDAgMCAwLjEgMCAwLjEgMCAwLjItMC4xIDAuMi0wLjEgMC40LTAuNCAwLjQtMC43LTAuMS0yLjItMC4xLTMuMi0wLjItNS40IDEuNiAxLjEgMi40IDEuNiAzLjkgMi43IDAgMCAwLjEgMC4xIDAuMiAwLjFDLTAuMiA3LjQtMC4xIDcuMi0wLjEgNy0wLjEgNi45LTAuMSA2LjgtMC4yIDYuOC0xLjQgNi0yIDUuNi0zLjEgNC44LTEuOSAzLTEuMyAyLjEtMC4xIDAuMyAwIDAuMiAwIDAuMSAwIDAiIGZpbGw9IiM3YTUwM2YiLz48L2c+PGcgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMTAwLjUwNzgsNDUuNzI1KSI+PHBhdGggZD0ibTAgMGMtMC41LTAuMy0xLjUtMC43LTIuNC0wLjctMC4zIDAtMS44IDAuMi0xLjcgMS41IDAuMSAyIDMgMiA0LjMgMkMwLjEgMS43IDAuMSAxLjEgMCAwTTEuMi0wLjdDMS4yLTAuNiAxLjItMC4zIDEuMi0wLjIgMS4zIDEuNCAxLjMgMi4yIDEuNCAzLjkgMS40IDQuNCAxLjMgNC45IDEuMSA1LjMgMC40IDYuNC0xLjEgNi41LTEuNSA2LjYtMS45IDYuNi0yLjcgNi43LTMuNSA2LjItNC41IDUuNy01LjIgNC41LTQuOSAzLjktNC44IDMuOC00LjYgMy41LTQuMyAzLjVjMC4yIDAgMC40IDAuMiAwLjQgMC4yIDAuMSAwLjEgMC4xIDAuMSAwLjEgMC4yIDAuMSAwLjIgMC4yIDAuNiAwLjIgMC44IDAgMCAwIDAgMCAwLjEgMC4xIDAuMyAwLjYgMS4zIDIgMS4yQy0wLjMgNS45IDAuMyA1LjIgMC4yIDMuOSAwLjIgMy42IDAuMiAzLjUgMC4yIDMuMy0xLjkgMy4zLTUuMyAzLjMtNS40IDAuOWMtMC4xLTEuOCAxLjctMi4xIDIuNi0yLjIgMS41LTAuMSAyLjUgMC40IDMgMC43IDAuMS0wLjQgMC4zLTAuOSAwLjctMC45IDAuMyAwIDAuNSAwLjEgMC41IDAuMyAwIDAuMS0wLjEgMC40LTAuMSAwLjUiIGZpbGw9IiM3YTUwM2YiLz48L2c+PGcgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoODYuMjM2OCw0NS44MjA3KSI+PHBhdGggZD0ibTAgMGMwLTAuMy0wLjMtMC41LTAuNi0wLjUtMC4zIDAtMC42IDAuMy0wLjYgMC42IDAuMiAyLjcgMC4zIDQuMSAwLjYgNi44IDAgMC4zIDAuMyAwLjUgMC42IDAuNUMwLjMgNy40IDAuNiA3LjEgMC42IDYuOCAwLjUgNi40IDAuNSA2LjIgMC41IDUuOSAwLjcgNi4yIDAuOCA2LjUgMS4zIDYuNyAxLjcgNyAyLjQgNy4yIDMgNy4xIDMuNyA3LjEgMy43IDYuNiAzLjcgNi41IDMuNiA2IDMuMiA2IDIuNSA2LjEgMSA2LjEgMC42IDUuNCAwLjQgNS4xIDAuMyAzIDAuMiAyIDAgMCIgZmlsbD0iIzdhNTAzZiIvPjwvZz48ZyB0cmFuc2Zvcm09InRyYW5zbGF0ZSg3Ny44OTYsNDYuNTgxNCkiPjxwYXRoIGQ9Im0wIDBjMC0wLjMtMC40LTAuNS0wLjYtMC41LTAuMyAwLTAuNiAwLjMtMC41IDAuNiAwLjMgMi43IDAuNCA0LjEgMC43IDYuOCAwIDAuMyAwLjMgMC41IDAuNiAwLjVDMC40IDcuNCAwLjcgNy4xIDAuNyA2LjggMC40IDQuMSAwLjMgMi43IDAgME0xLjMgOS44QzEuMyA5LjMgMC44IDkgMC4zIDljLTAuNSAwLjEtMC45IDAuNS0wLjggMC45IDAgMC41IDAuNSAwLjggMSAwLjcgMC41IDAgMC45LTAuNSAwLjgtMC45IiBmaWxsPSIjN2E1MDNmIi8+PC9nPjxnIHRyYW5zZm9ybT0idHJhbnNsYXRlKDcwLjQ5NzYsNDcuMzYwNykiPjxwYXRoIGQ9Ik0wIDBDMC0wLjMtMC4zLTAuNS0wLjUtMC41LTAuNy0wLjQtMC44LTAuMy0wLjktMC4yLTIgMS43LTIuNSAyLjYtMy42IDQuNi0zLjggNC40LTMuOSA0LjQtNC4xIDQuMi00LjMgMi45LTQuNCAyLjItNC42IDAuOC00LjYgMC41LTQuNyAwLjMtNC45IDAuMi00LjkgMC4yLTQuOSAwLjItNC45IDAuMi01IDAuMi01IDAuMS01LjEgMC4xLTUuMSAwLjEtNS4yIDAuMS01LjIgMC4xLTUuMyAwLjEtNS4zIDAuMS01LjMgMC4xLTUuMyAwLjEtNS4zIDAuMS01LjMgMC4xaDBjLTAuMSAwLTAuMSAwLTAuMiAwLjEtMC4yIDAuMS0wLjQgMC40LTAuMyAwLjggMC41IDMuOCAwLjcgNS44IDEuMiA5LjYgMCAwLjQgMC4zIDAuNiAwLjUgMC43IDAgMCAwLjEgMCAwLjEgMCAwIDAgMCAwIDAuMSAwIDAgMCAwIDAgMCAwIDAgMCAwIDAgMCAwIDAuMSAwIDAuMSAwIDAuMi0wLjEgMC4yLTAuMSAwLjMtMC40IDAuMy0wLjgtMC4zLTIuMS0wLjQtMy4yLTAuNy01LjQgMS43IDAuOSAyLjUgMS40IDQuMiAyLjNDMC4xIDcuNCAwLjIgNy40IDAuMyA3LjQgMC41IDcuNCAwLjYgNy4yIDAuNiA3IDAuNSA2LjkgMC41IDYuOCAwLjQgNi44LTAuOSA2LjEtMS41IDUuNy0yLjcgNS0xLjcgMy4xLTEuMSAyLjItMC4xIDAuMyAwIDAuMiAwIDAuMSAwIDAiIGZpbGw9IiM3YTUwM2YiLz48L2c+PC9nPjwvZz48L2c+PC9zdmc+'); 34 | background-repeat: no-repeat; 35 | background-size: contain; 36 | } 37 | 38 | @media screen and (min-width: 768px) { 39 | .ui::before { 40 | top: 9px; 41 | left: 6px; 42 | } 43 | } 44 | 45 | @media screen and (min-width: 1025px) { 46 | .ui::before { 47 | top: 10px; 48 | left: 6px; 49 | } 50 | } 51 | 52 | /* Banner -- END */ 53 | 54 | .drawer__header, 55 | .drawer__inner, 56 | .drawer__inner.darker, 57 | .tabs-bar, 58 | .onboarding-modal__page .figure { 59 | background-color: #e56cac; 60 | background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMjgiIHdpZHRoPSIyMCI+PHJlY3QgaGVpZ2h0PSIyOCIgd2lkdGg9IjIwIiB5PSIwIiB4PSIwIiBmaWxsPSIjZTQ2YmFjIi8+PHBhdGggZD0ibTAgMTQgMTAtMTQgMTAgMTQtMTAgMTR6IiBmaWxsPSIjZGY1N2E0Ii8+PC9zdmc+'); 61 | } 62 | 63 | .column-header, 64 | .column-icon, 65 | .column-back-button, 66 | .column-link { 67 | background: #d0e093; 68 | } 69 | 70 | .column-subheading { 71 | background: #dced91; 72 | } 73 | 74 | @media screen and (min-width: 320px) { 75 | .column-subheading { 76 | padding: 4px 20px; 77 | } 78 | 79 | .confirmation-modal { 80 | max-width: 300px; 81 | } 82 | } 83 | 84 | @media screen and (min-width: 768px) { 85 | .column-subheading { 86 | padding: 7px 20px; 87 | } 88 | 89 | .confirmation-modal { 90 | max-width: 380px; 91 | } 92 | } 93 | 94 | .column > .scrollable, 95 | .empty-column-indicator { 96 | background: rgba(212, 220, 171, 0.5); 97 | } 98 | 99 | .media-spoiler { 100 | background: rgba(0, 0, 0, 0.1); 101 | } 102 | 103 | .activity-stream .media-spoiler, 104 | .activity-stream .media-spoiler:hover { 105 | background: #e2e2c9; 106 | margin-top: 0px; 107 | } 108 | 109 | .account__header > div { 110 | background: linear-gradient(rgba(0,0,0,0.2), rgba(0,0,0,0.5) 50%, rgba(0,0,0,0.7) 65%, rgba(0,0,0,0.8)); 111 | } 112 | 113 | .card:after { 114 | background: linear-gradient(rgba(0,0,0,0.2), rgba(0,0,0,0.4) 60%, rgba(0,0,0,0.6) 75%, rgba(0,0,0,0.8)); 115 | } 116 | 117 | .status__content .status__content__spoiler-link, 118 | .reply-indicator__content .status__content__spoiler-link, 119 | .activity-stream .status.light .status__content a.status__content__spoiler-link, 120 | .activity-stream .detailed-status.light .status__content a.status__content__spoiler-link { 121 | background: rgba(237, 42, 144, 0.6); 122 | } 123 | 124 | .muted a.status__content__spoiler-link { 125 | background: #eda1c8; 126 | } 127 | 128 | .dropdown--active .dropdown__content > ul, 129 | .dropdown--active .dropdown__content > ul > li > a { 130 | background: #e3a4ad; 131 | } 132 | 133 | .muted a.status__content__spoiler-link:hover, 134 | .status__content .status__content__spoiler-link:hover, 135 | .reply-indicator__content .status__content__spoiler-link:hover, 136 | .activity-stream .status.light .status__content a.status__content__spoiler-link:hover, 137 | .activity-stream .detailed-status.light .status__content a.status__content__spoiler-link:hover, 138 | .dropdown--active .dropdown__content > ul > li > a:hover { 139 | background: #f5b9c2; 140 | } 141 | 142 | .dropdown-active .dropdown__content.dropdown__left > ul { 143 | left: -14em; 144 | display: inline-block; 145 | } 146 | 147 | .dropdown-active .dropdown__content.dropdown__left > ul li { 148 | width: 16em; 149 | } 150 | 151 | .dropdown__sep { 152 | border-color: #e57cb1; 153 | } 154 | 155 | .dropdown--active .dropdown__content:before { 156 | border-color: transparent transparent #e3a4ad transparent; 157 | } 158 | 159 | .scrollable .status:first-child, 160 | .scrollable .notification:first-child, 161 | .account-timeline__header + .status { 162 | margin-top: 6px; 163 | } 164 | 165 | .status, 166 | .notification, 167 | .onboarding-modal__pager, 168 | .confirmation-modal, 169 | .boost-modal, 170 | .boost-modal__container .status { 171 | background: linear-gradient(to bottom, rgba(252, 252, 225, 1) 0%, rgba(252, 252, 225, 1) 65%, rgba(252, 252, 225, 1) 65%, rgba(249, 240, 174, 1) 100%); 172 | border-radius: 8px; 173 | border: solid 2px #e1c152; 174 | box-shadow: 0 1px 1px rgba(0, 0, 0, 0.4); 175 | } 176 | 177 | .status, 178 | .notification { 179 | margin-left: 64px; 180 | margin-right: 2px; 181 | padding-left: 8px; 182 | margin-bottom: 8px; 183 | } 184 | 185 | .notification { 186 | margin-left: 1px; /* Old browsers */ 187 | background: linear-gradient(to bottom, rgba(252, 252, 225, 0.8) 0%, rgba(252, 252, 225, 0.8) 65%, rgba(252, 252, 225, 0.8) 65%, rgba(249, 240, 174, 0.8) 100%); 188 | } 189 | 190 | .notification__message { 191 | margin-left: 25px; 192 | padding: 6px 0 6px 0; 193 | } 194 | 195 | .onboarding-modal, 196 | .boost-modal__action-bar, 197 | .confirmation-modal__action-bar { 198 | background: none; 199 | } 200 | 201 | .account { 202 | border: none; 203 | } 204 | 205 | .detailed-status, 206 | .activity-stream .entry .detailed-status.light, 207 | .status-card, .status-card:hover { 208 | background: linear-gradient(to bottom, rgba(252, 252, 225, 1) 0%, rgba(252, 252, 225, 1) 65%, rgba(252, 252, 225, 1) 65%, rgba(249, 240, 174, 1) 100%); 209 | border-radius: 8px; 210 | margin-bottom: 8px; 211 | border: solid 2px #e1c152; 212 | box-shadow: 0 1px 1px rgba(0, 0, 0, 0.4); 213 | } 214 | 215 | /* status balloon tail */ 216 | 217 | .status::before, 218 | .notification::before { 219 | content: ""; 220 | display: block; 221 | width: 12px; 222 | height: 14px; 223 | position: absolute; 224 | left: -11px; 225 | background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTIiIGhlaWdodD0iMTQiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+DQogIDxsaW5lIGlkPSJzdmdfMSIgeTI9IjEyLjQxMiIgeDI9IjEwLjAzNTc1IiB5MT0iMC44MzMiIHgxPSIxMC4wMzU3NSIgc3Ryb2tlLW1pdGVybGltaXQ9IjEwIiBzdHJva2Utd2lkdGg9IjIiIHN0cm9rZT0iI0ZDRkNFMSIgZmlsbD0ibm9uZSIvPg0KICA8cGF0aCBpZD0ic3ZnXzIiIGQ9Im05Ljc2LDFjMCwwIC00LjgyMzUsMC45MjY3NSAtOCw1LjgzM2M1LjQyNjc1LDEgOCw1LjMzNCA4LDUuMzM0IiBzdHJva2UtbWl0ZXJsaW1pdD0iMTAiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLXdpZHRoPSIyIiBzdHJva2U9IiNFMUMxNTIiIGZpbGw9IiNGQ0ZDRTEiLz4NCjwvc3ZnPg==); 226 | } 227 | 228 | .status.muted::before, 229 | .boost-modal__container .status::before { 230 | background: 231 | url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTIiIGhlaWdodD0iMTQiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+DQogIDxsaW5lIGlkPSJzdmdfMSIgeTI9IjEyLjQxMiIgeDI9IjEwLjAzNTc1IiB5MT0iMC44MzMiIHgxPSIxMC4wMzU3NSIgc3Ryb2tlLW1pdGVybGltaXQ9IjEwIiBzdHJva2Utd2lkdGg9IjIiIHN0cm9rZT0iI0ZDRkNFMSIgZmlsbD0ibm9uZSIvPg0KICA8cGF0aCBpZD0ic3ZnXzIiIGQ9Im05Ljc2LDFjMCwwIC00LjgyMzUsMC45MjY3NSAtOCw1LjgzM2M1LjQyNjc1LDEgOCw1LjMzNCA4LDUuMzM0IiBzdHJva2UtbWl0ZXJsaW1pdD0iMTAiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLXdpZHRoPSIyIiBzdHJva2U9IiNlOGQxN2YiIGZpbGw9IiNGQ0ZDRTEiLz4NCjwvc3ZnPg==); 232 | /*url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTIiIGhlaWdodD0iMTQiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+DQogIDxsaW5lIGlkPSJzdmdfMSIgeTI9IjEyLjQxMiIgeDI9IjEwLjAzNTc1IiB5MT0iMC44MzMiIHgxPSIxMC4wMzU3NSIgc3Ryb2tlLW1pdGVybGltaXQ9IjEwIiBzdHJva2Utd2lkdGg9IjIiIHN0cm9rZT0iI0ZDRkNFMSIgZmlsbD0ibm9uZSIvPg0KICA8cGF0aCBpZD0ic3ZnXzIiIGQ9Im05Ljc2LDFjMCwwIC00LjgyMzUsMC45MjY3NSAtOCw1LjgzM2M1LjQyNjc1LDEgOCw1LjMzNCA4LDUuMzM0IiBzdHJva2UtbWl0ZXJsaW1pdD0iMTAiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLXdpZHRoPSIyIiBzdHJva2U9IiNlYmRjOTMiIGZpbGw9IiNGQ0ZDRTEiLz4NCjwvc3ZnPg==);*/ 233 | } 234 | 235 | .status.muted, 236 | .boost-modal__container .status { 237 | box-shadow: none; 238 | border: solid 2px #e8d17f; 239 | } 240 | 241 | .status.muted { 242 | left: -4px; 243 | } 244 | 245 | .muted .status__action-bar .fa { 246 | opacity: 0.75; 247 | transition: opacity 300ms; 248 | } 249 | 250 | .muted .status__action-bar .fa:hover { 251 | opacity: 1; 252 | transition: opacity 300ms; 253 | } 254 | 255 | /* avatar */ 256 | 257 | .status .account__avatar, 258 | .notification .account__avatar, 259 | .status .avatar, 260 | .notification .avatar, 261 | .boost-modal__status-header .account__avatar, 262 | .notification-follow .account__avatar { 263 | border: solid 2px #e1c152; 264 | } 265 | 266 | .status .avatar, 267 | .status .account__avatar { 268 | box-shadow: 0 1px 1px rgba(0, 0, 0, 0.4); 269 | } 270 | 271 | .status.muted .avatar, 272 | .status.muted .account__avatar { 273 | box-shadow: none; 274 | } 275 | 276 | .boost-modal__status-header .account__avatar { 277 | opacity: 0.65; 278 | } 279 | 280 | .status__avatar { 281 | margin-left: -74px; 282 | top: 0 !important; 283 | } 284 | 285 | .notification-follow .avatar, 286 | .notification-follow .account__avatar { 287 | left: 0; 288 | top: 0; 289 | } 290 | 291 | /* COLOUR STYLING */ 292 | /* Brown */ 293 | p, /* Katswoots -- Posts, Tweets, Katsus, TOOTS, take your pick. */ 294 | .status__content, 295 | .status-card__description, 296 | .column-subheading, /* Getting Started */ 297 | .confirmation-modal__container, /* Modals */ 298 | .onboarding-modal__page p span, 299 | .onboarding-modal__page h1 span, 300 | .simple_form .input.file label, /* Forms */ 301 | .simple_form .input.select label, 302 | .simple_form .input.radio_buttons label, 303 | .simple_form .input.radio_buttons .radio label, 304 | .simple_form .input.boolean label, 305 | .simple_form input[type=text], 306 | .simple_form input[type=number], 307 | .simple_form input[type=email], 308 | .simple_form input[type=password], 309 | .simple_form textarea, 310 | .simple_form input[type=file], 311 | .flash-message strong, /* 2FA And Settings */ 312 | .recovery-codes, 313 | .oauth-prompt, 314 | .follow-prompt, 315 | .admin-wrapper .table, 316 | .filters .filter-subset strong, 317 | .filters .filter-subset a, 318 | .table a.table-action-link, 319 | .about-body .wrapper, /* Landing Page */ 320 | .screenshot-with-signup .simple_form .info a, 321 | .screenshot-with-signup .closed-registrations-message .info a, 322 | .landing-strip, /* Profiles */ 323 | .accounts-grid .account-grid-card, 324 | .pagination .prev, 325 | .pagination .next, 326 | .pagination .prev a, 327 | .pagination .next a, 328 | .pagination .page a, 329 | .pagination .page.gap, 330 | .report__target strong, /* User Reports */ 331 | .report__textarea, 332 | .account-authorize .account__header__content /* Follow Requests */ { 333 | color: #8b6d5d; 334 | } 335 | 336 | /* Lighter Brown */ 337 | .muted .status__content p, 338 | .boost-modal__container p, 339 | .loading-indicator { 340 | color: #ad9588; 341 | } 342 | 343 | /* Darker Brown */ 344 | .drawer__tab, 345 | .icon-button, 346 | .icon-button.active, 347 | .column-icon, 348 | .column-header, 349 | .column-link, 350 | .column-back-button, 351 | .column-back-button span, 352 | .compose-form__warning span, 353 | .icon-button:active, 354 | .icon-button:focus { 355 | color: #6a4643; 356 | } 357 | 358 | /* User @ Text & Links */ 359 | 360 | /* a(pink underline) > span(green text) */ 361 | /* Pink */ 362 | .status__display-name strong, /* Katswoots -- Posts, Tweets, Katsus, TOOTS, take your pick. */ 363 | .detailed-status__display-name strong, 364 | .account__display-name strong, 365 | .status__content a, 366 | .status__content .h-card span, 367 | .mention span, 368 | .mention.hashtag span, 369 | .reply-indicator__content a, /* Notifications & Reply Indicator */ 370 | .compose-form__warning a, 371 | .h-card, 372 | .h-card span, 373 | .h-card .u-url.mention, 374 | .h-card .u-url.mention span, 375 | .information-board .section strong, /* Landing Page */ 376 | .about-body h1, 377 | .contact-email strong, 378 | .owner .name .display_name, 379 | a[href*='/tags/'] span, /* Hashtag Fix */ 380 | .status__prepend .status__display-name strong, /* boost/favourited preprend */ 381 | .activity-stream .detailed-status.light .detailed-status__display-name .display-name strong, /* Standalone Pages */ 382 | .activity-stream .status.light .display-name strong, 383 | .activity-stream .status.light .status__content a, 384 | .activity-stream .pre-header .status__display-name.muted strong, 385 | .activity-stream .detailed-status.light .status__content a, 386 | .activity-stream .detailed-status.light .status__content a.hashtag, 387 | .activity-stream .detailed-status.light .status__content a.mention, 388 | .account__header__content a, /* Profile */ 389 | .accounts-grid .account-grid-card .display_name, 390 | .confirmation-modal__container strong, /* Modals */ 391 | .onboarding-modal__page p strong, 392 | .table a, /* Settings */ 393 | .compact-header h1 a, 394 | .oauth-prompt strong, /* 2FA */ 395 | .follow-prompt strong, 396 | .filters .filter-subset a.selected { 397 | color: #ed649c; 398 | text-decoration: none; 399 | } 400 | 401 | .loading-bar { 402 | background-color: #ed649c; 403 | } 404 | 405 | /* Link Underlines on Hover */ 406 | .status__display-name strong:hover, 407 | .detailed-status__display-name strong:hover, 408 | .account__display-name strong:hover, 409 | .status__content a:hover, 410 | .reply-indicator__content a:hover, 411 | .h-card.u-url.p-nickname.mention:hover, 412 | .h-card.u-url.p-nickname.mention span:hover, 413 | .status__content .h-card span:hover, 414 | .mention span:hover, 415 | .mention.hashtag span:hover, 416 | .account__header__content a:hover, 417 | a[href*='/tags/'] span:hover, 418 | .status__prepend .status__display-name strong:hover, 419 | .activity-stream .detailed-status.light .detailed-status__display-name .display-name strong:hover, 420 | .activity-stream .status.light .display-name strong:hover, 421 | .activity-stream .status.light .status__content a:hover, 422 | .activity-stream .detailed-status.light .status__content a:hover, 423 | .activity-stream .pre-header .status__display-name.muted strong:hover, 424 | .activity-stream .detailed-status.light .status__content a.hashtag:hover, 425 | .compose-form__warning a:hover { 426 | text-decoration: underline; 427 | } 428 | 429 | /* Lighter Pink */ 430 | .muted .status__display-name strong, 431 | .boost-modal__container .status.light .display-name strong, 432 | .compact-header h1 small, 433 | .muted .status__content a, 434 | .muted .status__content .u-url, 435 | .muted .status__content .u-url span, 436 | .muted .status__content .permalink.mention span { 437 | color: #f086b1; 438 | } 439 | 440 | /* Green */ 441 | a span, /* Toots */ 442 | .notification__display-name:hover, 443 | .compose-form__warning span strong, 444 | .status__relative-time:hover, 445 | .notification__message, 446 | .detailed-status__meta, 447 | .status-card__title, 448 | .getting-started p, /* Columns */ 449 | .status__prepend, 450 | .empty-column-indicator, 451 | .media-spoiler, 452 | .activity-stream .media-spoiler, 453 | .activity-stream .media-spoiler:hover, 454 | .nothing-here, 455 | .footer, 456 | .column-settings__section, 457 | .setting-toggle, 458 | .boost-modal__action-bar>div, /* Modals */ 459 | .confirmation-modal__action-bar>div, 460 | .status.light .display-name span, 461 | .activity-stream .pre-header, /* Standalones */ 462 | .activity-stream .detailed-status.light .detailed-status__meta, 463 | .activity-stream .detailed-status.light .detailed-status__meta a, 464 | .activity-stream .detailed-status.light .detailed-status__meta .detailed-status__application, 465 | .activity-stream .status.light .display-name span, 466 | .activity-stream .status.light .status__header .status__meta .status__relative-time, 467 | .activity-stream .detailed-status.light .detailed-status__display-name .display-name span, 468 | .account__header__content a span, 469 | .simple_form span.hint, /* Settings */ 470 | .report__target { 471 | color: #8e9956; 472 | } 473 | 474 | /* Green - Links turned into not so important links */ 475 | .about-body p a, 476 | .owner .name .username, 477 | .about-body .actions .info a, 478 | .screenshot-with-signup .simple_form .info a, 479 | .screenshot-with-signup .closed-registrations-message .info a, 480 | .container .form-footer ul.no-list a, 481 | .accounts-grid .account-grid-card .username, 482 | .compose-form__warning a span { 483 | color: #8e9956; 484 | text-decoration: none; 485 | } 486 | 487 | /* White */ 488 | .status__content__spoiler-link span, 489 | .activity-stream .status.light .status__content a.status__content__spoiler-link , 490 | .activity-stream .detailed-status.light .status__content a.status__content__spoiler-link { 491 | /* "!important" is need for a.status__content__spoiler-link to override ".status__content a { color: !important }" in our CSS */ 492 | color: #fff !important; 493 | } 494 | 495 | .column-header, 496 | .column-back-button, 497 | .column-link { 498 | font-family: "Segoe UI", "Roboto"; 499 | font-weight: bold; 500 | } 501 | 502 | /* Getting Started */ 503 | /* span selector overrides `a > span { color: !important; }` */ 504 | 505 | .getting-started a, 506 | .getting-started a span { 507 | color: #707844; /* darken(#8e9956, 10%) */ 508 | } 509 | .getting-started a:hover, 510 | .getting-started a:hover span { 511 | color: #515831; /* darken(#8e9956, 20%) */ 512 | } 513 | 514 | /* Embed cards */ 515 | 516 | .status-card:hover { 517 | border: solid 2px #bc9c2b; 518 | } 519 | 520 | .status-card__image { 521 | background: none; 522 | } 523 | 524 | /* ScrollBar -- WebKit only (Chrome/Opera/Vivaldi/Safari) */ 525 | ::-webkit-scrollbar-track:active, 526 | ::-webkit-scrollbar-track:hover { 527 | background: rgba(0, 0, 0, 0.1); 528 | } 529 | 530 | ::-webkit-scrollbar-thumb, 531 | ::-webkit-scrollbar-thumb:hover { 532 | background: #6a4643; 533 | } 534 | 535 | /* KATSU! */ 536 | .button { 537 | background: #9bc430; 538 | } 539 | 540 | .button:hover, 541 | .button:active, 542 | .button:focus { 543 | background: #85a13b; 544 | } 545 | 546 | .button:disabled { 547 | background: hsla(77, 20%, 60%, 1); 548 | } 549 | 550 | .button span { 551 | white-space: nowrap; 552 | overflow: hidden; 553 | } 554 | 555 | /* Buttons & Tabs that aren't the KATSU! button */ 556 | .icon-button.active:hover, 557 | .drawer__tab:hover, 558 | .icon-button:hover, 559 | .column-icon:hover, 560 | .column-header:hover, 561 | .column-link:hover, 562 | .status__prepend div i { 563 | color: #8b6461; 564 | } 565 | 566 | .drawer__tab, 567 | .icon-button.active:hover, 568 | .icon-button:hover, 569 | button.icon-button i.fa-retweet:hover { 570 | text-shadow: -1px -1px 0 #f5e33a, 1px -1px 0 #f5e33a, -1px 1px 0 #f5e33a, 1px 1px 0 #f5e33a; 571 | } 572 | 573 | .icon-button.disabled { 574 | color: #9c7a78; 575 | } 576 | 577 | .icon-button.disabled:hover { 578 | text-shadow: none; 579 | } 580 | 581 | /* Column Update Colours */ 582 | .column-header.active { 583 | box-shadow: 0 1px 0 #ed649c; 584 | } 585 | 586 | .column-header.active .fa { 587 | color: #ed649c; 588 | text-shadow: 0 0 10px #ed649c; 589 | } 590 | 591 | .status-list__unread-indicator, 592 | .notifications__unread-indicator { 593 | background: radial-gradient(ellipse, rgba(237, 100, 156,0.23) 0%, rgba(43,144,217,0) 60%); 594 | } 595 | 596 | /* Katsu Drawer & Search */ 597 | .navigation-bar { 598 | background: hsla(325, 58%, 48%, 0.6); 599 | } 600 | 601 | .privacy-dropdown__option__content strong, 602 | .privacy-dropdown__option { 603 | color: hsl(77, 25%, 20%); 604 | } 605 | 606 | .privacy-dropdown__option__content { 607 | color: hsl(77, 25%, 45%); 608 | } 609 | 610 | .icon-button.inverted.active, 611 | .text-icon-button.active { 612 | color: #96b34c; /* green */ 613 | } 614 | 615 | .privacy-dropdown__option:hover, 616 | .privacy-dropdown__option.active { 617 | background: hsla(77, 40%, 50%, 1); /* green */ 618 | } 619 | .privacy-dropdown__option.active:hover { 620 | background: hsla(77, 40%, 55%, 1); /* green */ 621 | } 622 | 623 | .navigation-bar strong { 624 | color: #efcfcf !important; 625 | font-weight: 900 !important; 626 | } 627 | 628 | .navigation-bar a[href='/settings/profile'] span { 629 | color: #dfafaf !important; 630 | font-weight: 900; 631 | } 632 | 633 | .navigation-bar a[href='/settings/profile'] span:hover { 634 | text-decoration: underline; 635 | } 636 | 637 | .tabs-bar__link.active, 638 | .column-settings--outer, 639 | .column-settings__outer, 640 | .account__action-bar, 641 | .column-link:hover, 642 | .collapsable:hover, 643 | .load-more:hover { 644 | background: rgba(255, 255, 255, 0.7); 645 | } 646 | 647 | .drawer__tab:hover { 648 | text-shadow: none; 649 | } 650 | 651 | .column-header:focus, 652 | .column-icon:focus, 653 | .status__content__spoiler-link:focus, 654 | .column-back-button:focus { 655 | outline: none; 656 | } 657 | 658 | .search-results__header { 659 | background: hsla(325, 58%, 48%, 0.6); 660 | border-bottom: solid 1px #e3a4ad; 661 | } 662 | 663 | .search-results__section { 664 | background: hsla(325, 58%, 48%, 0.6); 665 | } 666 | 667 | .compose-form__buttons .icon-button:hover { 668 | text-shadow: none; 669 | } 670 | 671 | .dropdown--active .dropdown__content > ul > li > a:hover { 672 | color: #fff; 673 | } 674 | 675 | div.drawer__inner div div div div span[style*="color: rgb(255, 80, 80)"], 676 | .character-counter--over { 677 | color: #efcfcf !important; /* red character count */ 678 | } 679 | 680 | div.drawer__inner div:not(.navigation-bar) div:last-child div:last-child div:nth-child(n+1) { 681 | padding-top: 5px !important; 682 | } 683 | 684 | .search-results__hashtag, 685 | .search-results__hashtag:hover, 686 | .search-results__hashtag:active, 687 | .search-results__hashtag:focus, 688 | .search-results .account__display-name strong, 689 | .search-results__header span { 690 | color: #efcfcf !important; 691 | } 692 | 693 | .search-results .display-name span { 694 | color: #dfafaf; 695 | } 696 | 697 | .search__icon .fa.active { 698 | color: #fff; 699 | opacity: 1; 700 | } 701 | 702 | .search__icon .fa-times-circle.active { 703 | color: #fff; 704 | opacity: 1; 705 | } 706 | 707 | .search__input { 708 | background: #d0e093; 709 | color: #7c8658; 710 | } 711 | 712 | .search__input::-webkit-input-placeholder { 713 | color: #7c8658; 714 | } 715 | .search__input::-moz-placeholder { 716 | color: #7c8658; 717 | } 718 | .search__input:-ms-input-placeholder { 719 | color: #7c8658; 720 | } 721 | .search__input:-moz-placeholder { 722 | color: #7c8658; 723 | } 724 | 725 | .search__input:focus::-webkit-input-placeholder { 726 | color: #fff; 727 | } 728 | .search__input:focus::-moz-placeholder { 729 | color: #fff; 730 | } 731 | .search__input:focus:-ms-input-placeholder { 732 | color: #fff; 733 | } 734 | .search__input:focus:-moz-placeholder { 735 | color: #fff; 736 | } 737 | 738 | .search__input:focus { 739 | background: #7c8658; 740 | color: #fff; 741 | } 742 | 743 | 744 | .search__input, .autosuggest-textarea__textarea { 745 | font-size: 16px; 746 | } 747 | 748 | @media screen and (min-width: 1025px) { 749 | .search__input, .autosuggest-textarea__textarea { 750 | font-size: 14px; 751 | } 752 | } 753 | 754 | .compose-form__warning { 755 | background-color: #f5b9c2; 756 | border: 0; 757 | } 758 | 759 | 760 | /* iOS9 Fixes */ 761 | 762 | .column-collapsable, 763 | .getting-started__wrapper { 764 | flex-shrink: 0; 765 | } 766 | 767 | .mastodon-column-container[aria-hidden="true"] { 768 | display: none; 769 | } 770 | 771 | .column-collapsable div:nth-child(2) { 772 | overflow: auto !important; 773 | } 774 | 775 | /* Column Settings */ 776 | 777 | .react-toggle-track { 778 | background: rgba(0, 0, 0, 0.5); 779 | } 780 | 781 | .react-toggle:hover:not(.react-toggle--disabled) .react-toggle-track { 782 | background: rgba(0, 0, 0, 0.3); 783 | } 784 | 785 | .react-toggle-thumb { 786 | border-color: rgba(0, 0, 0, 0.5); 787 | } 788 | 789 | .react-toggle--checked .react-toggle-track { 790 | background: #9bc530; 791 | } 792 | 793 | .react-toggle--checked:hover:not(.react-toggle--disabled) .react-toggle-track { 794 | background: #b4d75b; 795 | } 796 | 797 | .react-toggle--checked .react-toggle-thumb { 798 | border-color: #9bc530; 799 | } 800 | 801 | .setting-text { 802 | color: #777; 803 | outline: none; 804 | border-color: rgba(0, 0, 0, 0.3); 805 | border-radius: 2px 2px 0 0; 806 | padding: 7px 4px; 807 | } 808 | 809 | .setting-text:focus, 810 | .setting-text:active { 811 | color: #1a1a1a; 812 | background: rgba(0, 0, 0, 0.05); 813 | border-color: rgba(0, 0, 0, 0.5); 814 | } 815 | 816 | /* Profile Column */ 817 | .dropdown { 818 | width: 32px; 819 | } 820 | 821 | .account__action-bar div:first-child { 822 | max-width: 32px; 823 | } 824 | 825 | .account__action-bar div:last-child { 826 | max-width: calc(86% - 32px); 827 | justify-content: space-between; 828 | } 829 | 830 | .account__action-bar { 831 | border-top: 1px solid rgba(0, 0, 0, 0.6); 832 | border-bottom: 1px solid rgba(0, 0, 0, 0.6); 833 | } 834 | 835 | .account__action-bar__tab { 836 | border-left: 1px solid rgba(0, 0, 0, 0.6); 837 | } 838 | 839 | /* Follow Requests */ 840 | .account--panel { 841 | background: rgba(255,255,255,0.4); 842 | border-color: #8b6d5d; 843 | } 844 | 845 | .account-authorize { 846 | background: rgba(212, 220, 171, 0.5); 847 | } 848 | 849 | /* User Report */ 850 | 851 | .scrollable.report { 852 | background: rgba(212, 220, 171, 0.5); /* transparentize(mix(#ecf5be, black, 90%), 0.5) */ 853 | } 854 | 855 | .status-check-box .status__content { 856 | background: rgba(255, 255, 255, 0.7); 857 | } 858 | 859 | .status-check-box, .report__target { 860 | border-bottom: 1px solid rgba(0, 0, 0, 0.6); 861 | } 862 | 863 | .report__textarea { 864 | border-color: rgba(0, 0, 0, 0.3); 865 | } 866 | 867 | .report__textarea:active, 868 | .report__textarea:focus { 869 | border-color: rgba(0, 0, 0, 0.5); 870 | background: rgba(0, 0, 0, 0.05); 871 | } 872 | 873 | /* Drag and drop to upload */ 874 | 875 | .upload-area { 876 | background: rgba(0, 0, 0, 0.3); 877 | } 878 | 879 | .upload-area__background { 880 | background: #E488B9; 881 | } 882 | 883 | .upload-area__content { 884 | color: #FFF; 885 | border-color: #D84A9D; 886 | } 887 | 888 | /* Onboarding Modal */ 889 | 890 | .onboarding-modal__pager { 891 | border-bottom-left-radius: 0; 892 | border-bottom-right-radius: 0; 893 | border: none; 894 | } 895 | 896 | @media screen and (max-width: 550px) { 897 | .onboarding-modal__pager { 898 | border-radius: 0; 899 | border: none; 900 | margin-bottom: -1px; 901 | } 902 | } 903 | 904 | .onboarding-modal__page p span a { 905 | color: #8e9956 !important; 906 | text-decoration: none; 907 | } 908 | 909 | .onboarding-modal__page p span a:hover { 910 | text-decoration: underline; 911 | } 912 | 913 | .onboarding-modal__page p strong { 914 | background: #f5b9c2; 915 | } 916 | 917 | .onboarding-modal__page .figure .pseudo-drawer { 918 | background: none; 919 | } 920 | 921 | .onboarding-modal__paginator { 922 | background: linear-gradient(to bottom, rgba(226,72,152,1) 0%,rgba(229,108,172,1) 100%); 923 | } 924 | 925 | .onboarding-modal__paginator > div { 926 | /* set Japanese prev/next text same width to align dots center */ 927 | min-width: 5em; 928 | text-align: center; 929 | } 930 | 931 | .onboarding-modal__paginator a span { 932 | color: #efcfcf; 933 | } 934 | 935 | .onboarding-modal__dot { 936 | background: #6a4643; 937 | } 938 | 939 | .onboarding-modal__dot:hover { 940 | background: #8b6461; 941 | } 942 | 943 | .onboarding-modal__dot.active { 944 | background: #a07774; 945 | box-shadow: #f5e33a 0px 0px 5px 0px; 946 | } 947 | 948 | /* e.g. Safari on iPhone5 with top/bottom bar (320x460) */ 949 | @media screen and (max-width: 550px) and (max-height: 550px) { 950 | .onboarding-modal__page p { 951 | font-size: 12px; 952 | } 953 | .onboarding-modal__paginator { 954 | padding: 20px 25px; 955 | } 956 | } 957 | 958 | @media screen and (max-width: 550px) { 959 | .onboarding-modal__page-one { 960 | flex-direction: column; 961 | } 962 | 963 | .onboarding-modal__page-one__elephant-friend { 964 | width: 100%; 965 | height: 30vh; 966 | margin-bottom: 5vh; 967 | background-position: center; 968 | } 969 | } 970 | 971 | .onboarding-modal__page-two .non-interactive span { 972 | color: #ffffff; 973 | } 974 | 975 | .onboarding-modal__page-four__columns .column-header { 976 | color: #6a4643; 977 | } 978 | 979 | .onboarding-modal__page-four { 980 | line-height: 17px; 981 | } 982 | 983 | .onboarding-modal__page-six p span a[to] { 984 | color: #ed649c !important; 985 | } 986 | 987 | /* Confirmation Modals */ 988 | 989 | .boost-modal__action-bar, 990 | .confirmation-modal__action-bar { 991 | padding-top: 0px; 992 | } 993 | 994 | .confirmation-modal__container { 995 | padding-bottom: 20px; 996 | } 997 | 998 | .boost-modal__container { 999 | overflow-x: auto; 1000 | } 1001 | 1002 | 1003 | /* Dropdown Menus */ 1004 | .dropdown--active .dropdown__content > ul > li > a { 1005 | width: unset; 1006 | } 1007 | 1008 | .detailed-status__action-bar .dropdown--active .dropdown__content { 1009 | position: relative; 1010 | } 1011 | 1012 | @media screen and (min-width: 360px) { 1013 | .status .dropdown--active .dropdown__content.dropdown__right > ul { 1014 | left: -98px; 1015 | } 1016 | } 1017 | 1018 | @media screen and (min-width: 1500px) { 1019 | .status .dropdown--active .dropdown__content.dropdown__right > ul { 1020 | left: 0; 1021 | } 1022 | 1023 | .detailed-status__action-bar .dropdown--active .dropdown__content.dropdown__left > ul { 1024 | margin-left: 0; 1025 | } 1026 | } 1027 | 1028 | /* Adjust Drawer/Tab Buttons to fit with banner */ 1029 | 1030 | .drawer__header, 1031 | .tabs-bar { 1032 | height: 50px; 1033 | border-bottom: 2px solid #f5e33a; 1034 | } 1035 | 1036 | @media screen and (min-width: 320px) { 1037 | .tabs-bar { 1038 | padding-left: 90px; 1039 | } 1040 | 1041 | .tabs-bar__link { 1042 | padding: 17px 4px; 1043 | } 1044 | } 1045 | 1046 | @media screen and (min-width: 768px) { 1047 | .tabs-bar { 1048 | padding-left: 75px; 1049 | } 1050 | 1051 | .tabs-bar:first-child { 1052 | margin-left: 10px; 1053 | } 1054 | 1055 | .tabs-bar__link { 1056 | padding: 16px 8px; 1057 | } 1058 | } 1059 | 1060 | @media screen and (min-width: 1025px) { 1061 | .column, 1062 | .drawer { 1063 | padding-bottom: 0; 1064 | } 1065 | 1066 | .drawer { 1067 | width: 320px; 1068 | } 1069 | 1070 | .column:last-child, 1071 | .drawer:last-child { 1072 | padding-right: 5px; 1073 | } 1074 | 1075 | .drawer__header { 1076 | padding-left: 83px; 1077 | } 1078 | 1079 | .drawer__tab { 1080 | padding: 15px 4px; 1081 | } 1082 | } 1083 | 1084 | /* Tab Selection on Mobile */ 1085 | .tabs-bar__link { 1086 | text-shadow: -1px -1px 0 #f5e33a, 1px -1px 0 #f5e33a, -1px 1px 0 #f5e33a, 1px 1px 0 #f5e33a; 1087 | } 1088 | 1089 | .tabs-bar__link, 1090 | .drawer__tab { 1091 | border-bottom: none; 1092 | } 1093 | 1094 | .tabs-bar__link span, 1095 | .tabs-bar__link { 1096 | color: #6a4643; 1097 | opacity: 0.9; 1098 | } 1099 | 1100 | .tabs-bar__link:hover, 1101 | .tabs-bar__link.active:hover { 1102 | background: rgba(255, 255, 255, 0.7); 1103 | opacity: 1; 1104 | text-shadow: none; 1105 | } 1106 | 1107 | .tabs-bar__link.active { 1108 | border-bottom: none; 1109 | text-shadow: none; 1110 | } 1111 | 1112 | .tabs-bar__link.active span, 1113 | .tabs-bar__link.active { 1114 | color: #6a4643; 1115 | text-shadow: none; 1116 | } 1117 | 1118 | @media screen and (min-width: 320px) { 1119 | .columns-area { 1120 | padding: 0; 1121 | } 1122 | 1123 | .tabs-bar { 1124 | margin: 0; 1125 | } 1126 | 1127 | .search { 1128 | margin-bottom: 0; 1129 | } 1130 | } 1131 | 1132 | @media screen and (min-width: 768px) { 1133 | .columns-area { 1134 | padding: 10px 10px 0 10px; 1135 | } 1136 | 1137 | .tabs-bar { 1138 | margin: 10px 10px 0 10px; 1139 | } 1140 | 1141 | .search { 1142 | margin-bottom: 10px; 1143 | } 1144 | } 1145 | 1146 | @media screen and (min-width: 1025px) { 1147 | .columns-area { 1148 | padding: 0; 1149 | } 1150 | } 1151 | /* MOBILE -- END */ 1152 | 1153 | /* SVG Paths WEW -- only edit the "fill" property with a new colour. Hex should be %23 for firefox support. */ 1154 | button.icon-button i.fa-retweet { 1155 | background-position: 0 0; 1156 | -webkit-transition: background-position 0.9s steps(10), background-image 100ms ease-in; 1157 | transition: background-position 0.9s steps(10), background-image 100ms ease-in; 1158 | background-image: url("data:image/svg+xml;utf8, "); 1159 | } 1160 | 1161 | button.icon-button i.fa-retweet:hover { 1162 | background-position: 0 0; 1163 | -webkit-transition-duration: 0s, 100ms; 1164 | transition-duration: 0s, 100ms; 1165 | background-image: url("data:image/svg+xml;utf8, "); 1166 | } 1167 | 1168 | button.icon-button.active i.fa-retweet { 1169 | background-position: 0 100%; 1170 | -webkit-transition-duration: 0.9s, 100ms; 1171 | transition-duration: 0.9s, 100ms; 1172 | } 1173 | 1174 | .drawer__header a:hover { 1175 | background: rgba(255, 255, 255, 0.7); 1176 | } 1177 | 1178 | .detailed-status__action-bar { 1179 | background: transparent; 1180 | border: none; 1181 | padding-top: 0; 1182 | } 1183 | 1184 | .icon-button.active .fa-star { 1185 | color: rgb(202, 143, 4); 1186 | } 1187 | 1188 | /* Video player width hack */ 1189 | .status div[style*="width: 239px"] { 1190 | width: 100% !important; 1191 | } 1192 | 1193 | /* STANDALONE KKT PAGES */ 1194 | .activity-stream { 1195 | padding-top: 10px; 1196 | } 1197 | 1198 | .activity-stream .entry .detailed-status.light, 1199 | .activity-stream .entry .status.light, 1200 | .activity-stream .entry:first-child .status.light, 1201 | .activity-stream .entry:last-child .status.light, 1202 | .activity-stream .entry:last-child .detailed-status.light, 1203 | .activity-stream .entry:first-child .status.light, 1204 | .activity-stream .entry:last-child .status.light, 1205 | .activity-stream .entry:last-child .detailed-status.light { 1206 | border: solid 2px #e1c152; 1207 | border-radius: 8px 1208 | } 1209 | 1210 | .activity-stream .entry { 1211 | background: none; 1212 | padding: 2px 0 2px 0; 1213 | } 1214 | 1215 | .activity-stream .status.light { 1216 | padding: 8px 8px 8px 15px; 1217 | } 1218 | 1219 | .activity-stream .entry .pre-header { 1220 | margin-bottom: 0; 1221 | padding: 0 0 0 76px; 1222 | } 1223 | 1224 | .activity-stream .entry .status.light .status__avatar { 1225 | border: none; 1226 | top: 0; 1227 | left: 10px; 1228 | } 1229 | 1230 | .activity-stream .entry .status.light .status__avatar img { 1231 | border: solid 2px #e1c152; 1232 | box-shadow: 0 1px 1px rgba(0, 0, 0, 0.4); 1233 | } 1234 | 1235 | /* --- admin / settings --- */ 1236 | 1237 | /* background */ 1238 | /* We use colors darkened from #ecf5be with medium alpha values, to reduce contrast of background pattern. */ 1239 | 1240 | .admin-wrapper .sidebar-wrapper { 1241 | background: rgba(173,186,121,0.5); 1242 | } 1243 | .content-wrapper { 1244 | /* background: rgba(201,216,141,0.8); */ 1245 | background: linear-gradient(to bottom, rgba(252, 252, 225, 1) 0%, rgba(252, 252, 225, 1) 25%, rgba(252, 252, 225, 1) 65%, rgba(249, 240, 174, 1) 100%); 1246 | } 1247 | 1248 | /* sidebar */ 1249 | 1250 | .admin-wrapper .sidebar ul ul, 1251 | .admin-wrapper .sidebar ul a.selected { 1252 | background: #d0e093; 1253 | } 1254 | 1255 | .admin-wrapper .sidebar ul a { 1256 | color: #6a4643; 1257 | } 1258 | .admin-wrapper .sidebar ul a:hover { 1259 | background: rgba(255, 255, 255, 0.7); 1260 | color: #8b6461; 1261 | } 1262 | 1263 | .admin-wrapper .sidebar ul ul a.selected { 1264 | background: rgba(255,255,255,0.3); 1265 | color: #6a4643; 1266 | } 1267 | .admin-wrapper .sidebar ul ul a.selected:hover { 1268 | background: rgba(64,64,64,0.1); 1269 | color: #6a4643; 1270 | } 1271 | 1272 | .flash-message { 1273 | background: rgba(255,255,255,0.7); 1274 | } 1275 | 1276 | /* content */ 1277 | 1278 | .admin-wrapper .content > p{ 1279 | color: #6a4643; 1280 | } 1281 | 1282 | .admin-wrapper .content h2 { 1283 | color: #6a4643; 1284 | } 1285 | 1286 | /* forms */ 1287 | .simple_form input[type=text], 1288 | .simple_form input[type=number], 1289 | .simple_form input[type=email], 1290 | .simple_form input[type=password], 1291 | .simple_form textarea { 1292 | border-bottom: 2px solid rgba(0,0,0,0.3); 1293 | } 1294 | 1295 | .simple_form input[type=text]:active, .simple_form input[type=text]:focus, 1296 | .simple_form input[type=number]:active, .simple_form input[type=number]:focus, 1297 | .simple_form input[type=email]:active, .simple_form input[type=email]:focus, 1298 | .simple_form input[type=password]:active, .simple_form input[type=password]:focus, 1299 | .simple_form textarea:active, .simple_form textarea:focus { 1300 | border-bottom: 2px solid rgba(0,0,0,0.5); 1301 | background: rgba(0,0,0,0.05); 1302 | } 1303 | 1304 | .simple_form button, 1305 | .simple_form .block-button { 1306 | background: #9bc430; 1307 | } 1308 | 1309 | .simple_form button:hover, 1310 | .simple_form button:active, 1311 | .simple_form button:focus, 1312 | .simple_form .block-button:hover, 1313 | .simple_form .block-button:active, 1314 | .simple_form .block-button:focus { 1315 | background: #85a13b; 1316 | } 1317 | 1318 | /* tables (used in authorized_applications, export) */ 1319 | 1320 | .table > tbody > tr:nth-child(odd) > td, 1321 | .table > tbody > tr:nth-child(odd) > th { 1322 | background: rgba(255,255,255,0.5); 1323 | } 1324 | 1325 | .table > thead > tr > th { 1326 | border-bottom: 2px solid rgba(0,0,0,0.6); 1327 | } 1328 | 1329 | .table th, .table td { 1330 | border: none; 1331 | } 1332 | 1333 | .table a:hover { 1334 | text-decoration: underline; 1335 | } 1336 | 1337 | a.table-action-link { 1338 | text-decoration: none; 1339 | } 1340 | 1341 | a.table-action-link:hover { 1342 | color: #6c5549; 1343 | text-decoration: underline; 1344 | } 1345 | 1346 | /* --- about --- */ 1347 | 1348 | .about-body .wrapper, 1349 | .accounts-grid .account-grid-card, 1350 | .screenshot-with-signup .simple_form, 1351 | .screenshot-with-signup .closed-registrations-message { 1352 | background: linear-gradient(to bottom, rgba(252, 252, 225, 1) 0%, rgba(252, 252, 225, 1) 65%, rgba(252, 252, 225, 1) 65%, rgba(249, 240, 174, 1) 100%); 1353 | border-radius: 8px; 1354 | border: solid 2px #e1c152; 1355 | } 1356 | 1357 | .about-body .wrapper, 1358 | .accounts-grid .account-grid-card { 1359 | border-radius: 8px; 1360 | border: solid 2px #e1c152; 1361 | } 1362 | 1363 | .accounts-grid .account-grid-card, 1364 | .screenshot-with-signup .simple_form, 1365 | .screenshot-with-signup .closed-registrations-message { 1366 | padding: 25px 20px; 1367 | margin: 25px auto; 1368 | } 1369 | 1370 | @media screen and (min-width: 320px) { 1371 | body .about-body { 1372 | padding: 0; 1373 | } 1374 | 1375 | .about-body .wrapper { 1376 | margin: 0; 1377 | } 1378 | 1379 | .wrapper h1 { 1380 | font-size: 39px; 1381 | } 1382 | } 1383 | 1384 | @media screen and (min-width: 768px) { 1385 | body .about-body { 1386 | padding: 1em; 1387 | } 1388 | 1389 | .about-body .wrapper { 1390 | padding: 25px 20px; 1391 | margin: 25px auto; 1392 | } 1393 | 1394 | .wrapper h1 { 1395 | font-size: 46px; 1396 | } 1397 | } 1398 | 1399 | .about-body h2, 1400 | .about-body h3 { 1401 | color: #8b6461; 1402 | } 1403 | 1404 | .about-body em { 1405 | color: #6d4e4c; /* darken(#8b6461, 10%) */ 1406 | background-color: #f292b9; /* lighten(#ed649c, 10%) */ 1407 | } 1408 | 1409 | .screenshot-with-signup .simple_form, 1410 | .screenshot-with-signup .closed-registrations-message { 1411 | box-shadow: 0 1px 1px rgba(0, 0, 0, 0.4); 1412 | } 1413 | 1414 | /* /about/more */ 1415 | 1416 | .sidebar-layout .panel .panel-header { 1417 | background: #C9D185; 1418 | } 1419 | 1420 | .sidebar-layout .sidebar, 1421 | .information-board, 1422 | .sidebar-layout hr { 1423 | border-color: #C9D185; 1424 | border-top: none; 1425 | } 1426 | 1427 | .sidebar-layout .panel .panel-list ul li a { 1428 | color: #6a4643; 1429 | } 1430 | 1431 | .sidebar-layout .panel .panel-list ul li a:hover { 1432 | background: rgba(255, 255, 255, 0.7); 1433 | color: #8b6461; 1434 | } 1435 | 1436 | .information-board .section span { 1437 | color: inherit; 1438 | } 1439 | 1440 | .information-board .section span:last-child { 1441 | color: inherit; 1442 | } 1443 | 1444 | .about-body p a:hover, 1445 | .about-body .actions .info a:hover, 1446 | .screenshot-with-signup .simple_form .info a:hover, 1447 | .screenshot-with-signup .closed-registrations-message .info a:hover, 1448 | .container .form-footer ul.no-list a:hover { 1449 | text-decoration: underline; 1450 | } 1451 | 1452 | .owner .name .display_name, 1453 | .accounts-grid .account-grid-card .display_name { 1454 | font-weight: bold; 1455 | } 1456 | /* --- User (/@hogehoge) --- */ 1457 | 1458 | .landing-strip { 1459 | background: rgba(208,224,147,0.7); 1460 | } 1461 | 1462 | .card { 1463 | background: rgba(0, 0, 0, 0.3); 1464 | } 1465 | 1466 | .card .name span { 1467 | color: #d9e1e8; 1468 | } 1469 | 1470 | .card .name small span { 1471 | color: #2b90d9; 1472 | } 1473 | 1474 | .account__header__content { 1475 | color: #d9e1e8; 1476 | } 1477 | 1478 | .activity-stream { 1479 | box-shadow: none; 1480 | background: rgba(0, 0, 0, 0.1); 1481 | } 1482 | 1483 | .activity-stream:first-child { 1484 | /* .activity-stream is also used in status page, without account header. */ 1485 | background: none; 1486 | } 1487 | 1488 | .pagination .page.current { 1489 | color: #FFF; 1490 | background: #8b6d5d; 1491 | } 1492 | 1493 | .pagination .page a:hover, 1494 | .pagination .prev a:hover, 1495 | .pagination .next a:hover { 1496 | background-color: #fff; 1497 | border-radius: 100px; 1498 | } 1499 | 1500 | .card .counter, 1501 | .card .counter::after { 1502 | border-color: #8b6d5d; 1503 | } 1504 | 1505 | .card .counter.active:after { 1506 | border-color: #f5e33a; 1507 | } 1508 | 1509 | /* Followers & Following */ 1510 | 1511 | .accounts-grid { 1512 | background: rgba(0,0,0,0.1); 1513 | box-shadow: none; 1514 | } 1515 | 1516 | .accounts-grid .account-grid-card { 1517 | padding: 0; 1518 | margin: 10px 0; 1519 | box-shadow: 0 1px 1px rgba(0, 0, 0, 0.4); 1520 | } 1521 | 1522 | .accounts-grid .account-grid-card .account-grid-card__header { 1523 | border-bottom: 1px solid #e3a4ad; 1524 | } 1525 | 1526 | .accounts-grid .account-grid-card .note { 1527 | color: #8b6461 1528 | } 1529 | 1530 | /* OAuth, Remote follow */ 1531 | 1532 | .form-container { 1533 | background: linear-gradient(to bottom, rgba(252, 252, 225, 1) 0%, rgba(252, 252, 225, 1) 65%, rgba(252, 252, 225, 1) 65%, rgba(249, 240, 174, 1) 100%); 1534 | border-radius: 8px; 1535 | border: solid 2px #e1c152; 1536 | } 1537 | 1538 | .form-container .flash-message code { 1539 | word-wrap: break-word; 1540 | } 1541 | 1542 | /* Admin */ 1543 | /* /admin/accounts, etc. */ 1544 | 1545 | .filters .filter-subset a { 1546 | border-bottom: #fcfce1; 1547 | } 1548 | 1549 | .filters .filter-subset a:hover { 1550 | color: #6c5549; 1551 | border-color: rgba(0, 0, 0, 0.4); 1552 | } 1553 | 1554 | .filters .filter-subset a.selected { 1555 | border-color: #ed649c; 1556 | } 1557 | 1558 | } -------------------------------------------------------------------------------- /V9 (CSS)/meiryoui.css: -------------------------------------------------------------------------------- 1 | @font-face { 2 | font-family: 'Meiryo UI'; 3 | font-style: normal; 4 | font-weight: normal; 5 | letter-spacing: .1em; 6 | padding: 1em; 7 | } 8 | 9 | @media screen and (-webkit-min-device-pixel-ratio:0) { 10 | @font-face { 11 | font-family: 'Meiryo UI'; 12 | letter-spacing: .1em; 13 | padding: 1em; 14 | } 15 | } 16 | 17 | body { 18 | font-family: "Meiryo UI"; 19 | font-style: normal; 20 | font-weight: normal; 21 | letter-spacing: .1em; 22 | padding: 1em; 23 | } 24 | -------------------------------------------------------------------------------- /checklist.md: -------------------------------------------------------------------------------- 1 | # Checklist of Pages & Features 2 | ## Timeline View 3 | * Getting Started 4 | * Status 5 | * Spoiler Warnings 6 | * Links 7 | * Media 8 | * Detailed Status 9 | * Search 10 | * Search Results 11 | * Search Results Feed 12 | * Drawer 13 | * Reply Indicator 14 | * Privacy Indicator 15 | * Content Warning 16 | 17 | ## Modals 18 | * Media 19 | * Onboarding 20 | * Confirmation 21 | * Boost Confirmation 22 | 23 | ## Standalone Pages 24 | * Katsus 25 | * Profiles 26 | * Hashtags 27 | * Followers/Following 28 | * Terms of Service 29 | * Login 30 | * Register/Landing 31 | * About/More 32 | 33 | Also check mobile versions of everything! 34 | -------------------------------------------------------------------------------- /img/RAW/kirakiratter_banner.ai: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/MasterDalK/kktCSS/8592874732c352baccece088b47fbaae40b11bb6/img/RAW/kirakiratter_banner.ai -------------------------------------------------------------------------------- /img/RAW/kirakirtter.psd: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/MasterDalK/kktCSS/8592874732c352baccece088b47fbaae40b11bb6/img/RAW/kirakirtter.psd -------------------------------------------------------------------------------- /img/background.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | -------------------------------------------------------------------------------- /img/drawer.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | -------------------------------------------------------------------------------- /img/new_ribbon_minified.svg: -------------------------------------------------------------------------------- 1 | --------------------------------------------------------------------------------