Last active
August 16, 2019 18:18
-
-
Save hajipy/612c367f48ef0745dadbf9bedd923ead to your computer and use it in GitHub Desktop.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
:root { | |
--font-family: | |
Roboto, | |
"游ゴシック体", YuGothic, "游ゴシック", "Yu Gothic", | |
"Hiragino Kaku Gothic ProN", | |
"メイリオ", | |
sans-serif; | |
--base-color: rgb(255, 255, 255); | |
--main-color: rgb(155, 155, 155); | |
--text-color: rgb(0, 0, 0); | |
/* 動作確認用1(背景:白) */ | |
/*--base-color: rgb(255, 255, 255);*/ | |
/*--main-color: hsl(235, 61%, 49%);*/ | |
/*--text-color: rgb(0, 0, 0);*/ | |
/* 動作確認用2(Darcula) */ | |
/*--base-color: hsl(231, 15%, 18%);*/ | |
/*--main-color: hsl(232, 14%, 31%);*/ | |
/*--text-color: hsl(60, 30%, 96%);*/ | |
/*--star-count-foreground: hsl(31, 100%, 71%);*/ | |
/*--star-count-background: hsl(65, 92%, 76%);*/ | |
/*--tag-label-foreground-color: var(--base-color);*/ | |
/*--tag-label-background-color: hsl(225, 27%, 51%);*/ | |
/*--app-frame-color: var(--main-color);*/ | |
/*--badge-image-count-foreground-color: hsl(60, 30%, 96%);*/ | |
/*--badge-image-count-background-color: var(--base-color);*/ | |
/*--badge-image-count-border-color: rgb(216, 216, 216);*/ | |
/*--badge-text-foreground-color: hsl(60, 30%, 96%);*/ | |
/*--badge-text-background-color: var(--base-color);*/ | |
/*--badge-text-border-color: red;*/ | |
/*--the-calendar-not-current-month-color: hsla(232, 14%, 31%, .8);*/ | |
/*--the-pagination-current-foreground-color: black;*/ | |
/*--the-pagination-current-background-color: white;*/ | |
/*--the-pagination-hover-background-color: green;*/ | |
/* 動作確認用3(キッチンクロス) */ | |
/*--base-color: rgb(229, 227, 218);*/ | |
/*--main-color: rgb(234, 198, 180);*/ | |
/*--text-color: rgb(149, 114, 117);*/ | |
/*--tag-label-background-color: rgb(132, 157, 116);*/ | |
/* 動作確認用4(ロココ調インテリア) */ | |
/*--base-color: rgb(235, 219, 224);*/ | |
/*--main-color: rgb(194, 81, 102);*/ | |
/*--text-color: rgb(158, 115, 96);*/ | |
/*--tag-label-background-color: rgb(216, 167, 103);*/ | |
/* コンポーネント */ | |
--app-frame-color: rgb(216, 216, 216); | |
--app-button-default-foreground-color: hsl(0, 0%, 10%); | |
--app-button-default-background-color: hsl(0, 0%, 100%); | |
--app-button-default-border-color: hsl(0, 0%, 60%); | |
--app-button-default-disable-foreground-color: hsl(0, 0%, calc(10% + 40%)); | |
--app-button-default-disable-border-color: hsl(0, 0%, calc(60% + 20%)); | |
--app-button-default-hover-background-color: hsl(0, 0%, calc(60% + 20%)); | |
--app-button-default-active-background-color: hsl(0, 0%, calc(60% - 10%)); | |
--app-button-primary-foreground-color: hsl(0, 0%, 100%); | |
--app-button-primary-background-color: hsl(0, 0%, 60%); | |
--app-button-primary-border-color: hsl(0, 0%, 60%); | |
--app-button-primary-disable-background-color: hsl(0, 0%, calc(60% + 20%)); | |
--app-button-primary-disable-border-color: hsl(0, 0%, calc(60% + 20%)); | |
--app-button-primary-hover-background-color: hsl(0, 0%, calc(60% + 10%)); | |
--app-button-primary-active-background-color: hsl(0, 0%, calc(60% - 20%)); | |
--app-button-danger-foreground-color: hsl(0, 0%, 100%); | |
--app-button-danger-background-color: hsl(0, 100%, 65%); | |
--app-button-danger-border-color: hsl(0, 100%, 65%); | |
--app-button-danger-disable-background-color: hsl(0, 100%, calc(65% + 20%)); | |
--app-button-danger-disable-border-color: hsl(0, 100%, calc(65% + 20%)); | |
--app-button-danger-hover-background-color: hsl(0, 100%, calc(65% + 10%)); | |
--app-button-danger-active-background-color: hsl(0, 100%, calc(65% - 20%)); | |
--app-button-text-foreground-color: var(--text-color); | |
--app-button-text-disable-color: hsl(0, 0%, 60%); | |
--app-button-text-hover-color: hsl(210, 100%, 60%); | |
--app-button-text-active-color: hsl(210, 100%, calc(60% - 20%)); | |
--app-divider-color: rgb(216, 216, 216); | |
--app-link-normal-color: var(--text-color); | |
--app-link-hover-color: hsl(207, 50%, 50%); | |
--app-link-active-color: hsl(207, 50%, calc(50% - 10%)); | |
--app-modal-mask-color: rgba(0, 0, 0, 0.3); | |
--badge-image-count-foreground-color: rgb(216, 216, 216); | |
--badge-image-count-background-color: var(--base-color); | |
--badge-image-count-border-color: rgb(216, 216, 216); | |
--badge-text-foreground-color: rgb(216, 216, 216); | |
--badge-text-background-color: var(--base-color); | |
--badge-text-border-color: rgb(216, 216, 216); | |
--creator-display-icon-selector-drop-zone-foreground-color: hsl(0, 0%, 60%); | |
--creator-display-icon-selector-drop-zone-background-color: hsl(0, 0%, 100%); | |
--dialog-edit-tag-header-color: rgb(0, 187, 0); | |
--dialog-edit-error-color: rgb(255, 0, 0); | |
--dialog-input-text-header-color: rgb(66, 185, 131); | |
--dialog-ok-cancel-header-color: rgb(66, 185, 131); | |
--dialog-set-creator-header-color: rgb(0, 187, 0); | |
--image-detail-add-star-color: rgb(155, 155, 155); | |
--image-thumbnail-placeholder-foreground-color: hsl(0, 0%, 50%); | |
--image-thumbnail-placeholder-background-color: hsl(0, 0%, 83%); | |
--lightbox-mask-color: rgba(0, 0, 0, .5); | |
--lightbox-navigation-enable-foreground-color: rgb(255, 255, 255); | |
--lightbox-navigation-disable-foreground-color: rgb(128, 128, 128); | |
--lightbox-navigation-hover-background-color: rgba(255, 255, 255, 0.5); | |
--star-count-foreground: rgb(247, 161, 99); | |
--star-count-background: rgb(247, 235, 99); | |
--search-box-foreground-color: var(--main-color); | |
--search-box-background-color: var(--base-color); | |
--search-box-button-foreground-color: var(--base-color); | |
--search-box-button-background-color: var(--main-color); | |
--search-progress-foreground-color: rgba(155, 155, 155, 0.2); | |
--search-result-foreground-color: rgba(155, 155, 155, 0.2); | |
--tab-list-enable-color: var(--main-color); | |
--tab-list-disable-color: rgba(155, 155, 155, 0.2); | |
--tag-label-foreground-color: rgb(64, 64, 64); | |
--tag-label-background-color: rgb(173, 216, 230); | |
--tag-thumbnail-background-color: hsl(195, 53%, 79%); | |
--tag-thumbnail-name-foreground-color: rgb(0, 0, 0); | |
--tag-thumbnail-name-background-color: rgba(128, 128, 128, 0.8); | |
--tag-thumbnail-count-foreground-color: rgb(224, 224, 224); | |
--tag-thumbnail-count-background-color: rgba(204, 0, 0, 0.8); | |
--the-breadclumb-list-foreground-color: var(--text-color); | |
--the-breadclumb-list-background-color: var(--main-color); | |
--the-calendar-item-caption-foreground-color: rgb(255, 255, 255); | |
--the-calendar-item-caption-shadow-color: rgb(128, 128, 128); | |
--the-calendar-not-current-month-color: rgb(211, 211, 211); | |
--the-global-navigation-button-enable-color: var(--main-color); | |
--the-global-navigation-button-disable-color: rgba(155, 155, 155, 0.2); | |
--the-global-navigation-page-item-color: var(--main-color); | |
--the-pagination-border-color: var(--main-color); | |
--the-pagination-foreground-color: var(--text-color); | |
--the-pagination-background-color: var(--base-color); | |
--the-pagination-current-foreground-color: rgb(255, 255, 255); | |
--the-pagination-current-background-color: rgb(169, 169, 169); | |
--the-pagination-hover-background-color: rgb(211, 211, 211); | |
--year-month-selector-arrow-foreground-color: rgb(155, 155, 155); | |
--year-month-selector-arrow-active-background-color: rgb(211, 211, 211); | |
/* ページ */ | |
--page-download-status-background-color: rgb(248, 249, 250); | |
--page-download-status-item-background-color: rgb(255, 255, 255); | |
--page-download-status-button-border-color: rgb(216, 216, 216); | |
--page-download-status-button-normal-foreground-color: rgb(128, 128, 128); | |
--page-download-status-button-normal-background-color: rgb(255, 255, 255); | |
--page-download-status-button-normal-hover-foreground-color: rgb(239, 239, 239); | |
--page-download-status-button-normal-active-foreground-color: rgb(223, 223, 223); | |
--page-download-status-button-alert-foreground-color: rgb(255, 255, 255); | |
--page-download-status-button-alert-background-color: rgb(74, 179, 244); | |
--page-download-status-button-alert-hover-foreground-color: rgb(52, 170, 243); | |
--page-download-status-button-alert-active-foreground-color: rgb(29, 161, 242); | |
--page-download-status-button-remove-foreground-color: rgb(216, 216, 216); | |
--page-download-status-button-remove-hover-foreground-color: rgb(128, 128, 128); | |
--page-download-status-url-color: rgb(51, 103, 214); | |
--page-download-status-no-data-foreground-color: rgb(184, 184, 184); | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment