Skip to content

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

Details

Authoriwd1_japan

LicenseNo License

Category色彩設計 Color Design

Created

Updated

Size4.4 kB

Statistics

Learn how we calculate statistics in the FAQ.

Failed to fetch stats.

Description

まぶしい色に変わったFlatを見やすい色に変えます。
This changes Flat, which has changed to a dazzling color, into an easy-to-see color.

Notes

TEST in Firefox ESR 68 + Stylus + Windows 7 + MacType

Source code

/* ==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→1(白・黒・グレー+青1色)
目の認識=明暗差 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;
}
}

Reviews

No reviews yet.