まぶしい色に変わったFlatを見やすい色に変えます。
This changes Flat, which has changed to a dazzling color, into an easy-to-see color.
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
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;
}
}