flat.io(可視性 見やすい Visibility Easy-to-see) by iwd1_japan

/* ==UserStyle==
@name         flat.io(可視性 見やすい Visibility Easy-to-see)
@version      20211105.23.24
@namespace    userstyles.world/user/iwd1_japan
@description  まぶしい色に変わったFlatを見やすい色に変えます。
This changes Flat, which has changed to a dazzling color, into an easy-to-see color.

@author       iwd1_japan
@license      No License
==/UserStyle== */

@-moz-document domain("flat.io") {
  /* TEST in Firefox ESR 68 + Stylus + Windows 7 + MacType */
 /* 
まぶしい色に変わったFlatを見やすい色に変えます。
This changes Flat, which has changed to a dazzling color, into an easy-to-see color.
私は画面最上部の横長に広い青色を変更したい。
私は素人ですから、それが不可能です。
*/
}

@-moz-document domain("flat.io") {
  /* 色彩設計 Color Design
見やすい基本
色相数 Hue number→１（白・黒・グレー＋青１色）
目の認識＝明暗差 Light and dark difference（明るい青・暗い青）
高彩度→目が疲れる eyes get tired
広い面積 Large area＋色 color→目が疲れる eyes get tired
狭い面積 Narrow area＋色 color→部分強調 partial enhancement
*/

:root {
	--f-foo: #fff;
	--f-ink: #2F3446;
	--f-ink-20: #d5d6da;
	--f-ink-10: #EAEAEC;
	--f-subdue: #646F8D;
	--f-subdue-40: #C1C5D1;
	--f-subdue-10: #eeeff2;
  /* 蛍光青を低彩度シアンに変更 */
	--f-flat-blue: #86bde7;
	--f-flat-blue-10: #e9f3ff;
	--f-flat-blue-ultra-light: EEEEEE;
	--f-edu-green-dark: #0E5D36;
	--f-edu-green: #11844B;
	--f-edu-green-40: rgba(17, 132, 75, 0.4);
	--f-edu-green-10: #E7F3ED;
	--f-score-voice-0: var(--f-primary);
  /* 蛍光マゼンタを低彩度マゼンタに変更 */
	--f-score-voice-1: #e680c3;
	--f-white: #fff;
	--f-happy-green: #7AC70C;
	--f-safe-red: #DE001F;
	--f-safe-red-40: rgba(222, 0, 31, 0.4);
	--f-safe-red-light: #FFEDF0;
	--f-safe-terracota: #BF3C00;
	--f-safe-terracota-light: #FEE7DC;
	--f-safe-blue: #0A69C2;
	--f-safe-blue-light: #E6F0F8;
	--f-yellow: #FF9F00;
	--f-safe-purple: #880F8C;
	--f-safe-purple-light: #EEE2EF;
	--f-grey-bg: #FAFAFB;
	--f-grey-2: #CFD8DC;
	--f-grey-3: #858FA9;
	--f-grey-4: #9CA7B7;
	--f-grey-disabled-container: #D7D8DC;
	--f-grey-disabled-content: #B7B7B7;
	--f-primary: var(--f-flat-blue);
	--f-primary-dark: var(--f-safe-blue);
	--f-primary-10: var(--f-flat-blue-10);
	--f-primary-ultra-light: var(--f-flat-blue-ultra-light);
}
}

@-moz-document domain("flat.io") {

/* 組版設計 Typesetting Design
    
画面・映像・見出し・表題 Screen, Video, Headline, Title
Regular→見にくい hard to see
Bold→見やすい easy to see
かな・欧数字の字間を詰める（プロポーショナルメトリクス Proportional metrics）→見やすい  easy to see
    
本・長文 Books, Long sentences
Regular→見やすい easy to see
字間を少し空ける Insert a little space between characters→見やすい easy to see

非常に大きい文字 Very Large Character
Thin→見やすい easy to see
    
明朝体／Serif…………………目に刺激 Visual noise
ゴシック体／Sans-serif……中間的 Mid
丸ゴシック体／Rounded……見やすい Easy to see
    
「P」付きフォント……無条件で字間が詰まる
「メイリオ」「F+UD-スーラ」……字詰め情報を持っていない
    */

    :root {    
	--f-font-common: "F+UD-スーラ DB", "ヒラギノ丸ゴ Pro W4", "源ノ角ゴシック Medium", "Source Han Sans Medium", "Noto Sans Medium", "BIZ UDPゴシック", "UD デジタル教科書体 NK-R", "小塚ゴシックPr6N M", "メイリオ", "SF Compact Rounded Medium", "Helvetica Rounded Medium", "Helvetica Rounded LT", sans-serif;
	--f-font-heading: "F+UD-ニューロダン B", "F+UD-スーラ B",  "ヒラギノ角ゴ ProN W8", "ヒラギノ丸ゴ Pro W8", "メイリオ Bold", "UD デジタル教科書体 NK-B", "平成丸ゴシック Std W8", "貂明朝", "Helvetica Now Display", "New York", "SF Pro Display", serif;
	--f-font-monospace: "BIZ UDゴシック", "BIZ UD明朝", "Noto Sans Mono CJK JP", "UD デジタル教科書体 N-R", Consolas, "DejaVu Sans Mono", Courier, monospace;
        
    font-family :  "F+UD-スーラ", "ヒラギノ丸ゴ ProN", "Helvetica Rounded", "Helvetica Rounded LT" ;
    font-size : 1em ;
    font-weight : 500 ;
    -webkit-text-stroke : 0.1px ;

    -font-feature-settings: 'palt' 1;
}
}