Last active
March 28, 2018 05:21
-
-
Save hasitanai/506344f69503a9d6ab86b28dc47bfb35 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
| /*レイアウト変更*/ | |
| .drawer { | |
| height : 320px !important ; | |
| width : 320px !important ; | |
| flex: 1 1 0 !important; | |
| } | |
| .column { | |
| flex: 1 1 0 !important; | |
| } | |
| .wide .drawer { | |
| flex: 1 1 0; | |
| min-width: 0px; | |
| max-width: 320px; | |
| } | |
| .wide .column { | |
| flex: 1 1 0; | |
| min-width: 0px; | |
| max-width: none; | |
| } | |
| div.column-icon.collapsable + div { | |
| overflow: scroll !important; | |
| } | |
| @media (min-width:2560px) { | |
| .drawer, .column { | |
| margin: 0; height: 100vh; | |
| } | |
| } | |
| .column:nth-child(2) { | |
| width : 33% !important ; | |
| flex: 1 1 0 !important; | |
| position : fixed !important ; | |
| top : 320px !important ; | |
| padding-left : 10px !important ; | |
| bottom : 0px !important ; | |
| padding-top : 0px !important ; | |
| padding-bottom : 10px !important ; | |
| padding-right : 0px !important ; | |
| } | |
| .wide .column:nth-child(2) { | |
| flex: 1 1 0; | |
| min-width: 0px; | |
| max-width: 320px; | |
| padding-right : 5px !important ; | |
| } | |
| .notification__message, | |
| .muted .status__content a, | |
| .muted .status__content p, | |
| .muted .status__display-name strong { | |
| font-size: 0.8em; | |
| } | |
| .status{ | |
| padding: 2px; | |
| padding-left: 68px; | |
| } | |
| .status__info { | |
| margin: 2px 0 2px; | |
| font-size: 13px; | |
| } | |
| .status__action-bar { | |
| margin: 0px 0px; | |
| } | |
| .status__display-name{ | |
| font-size: 1em; | |
| } | |
| .notification__message { | |
| font-size: 5px; | |
| padding: 6px 10px 0px 68px; | |
| } | |
| .status .notification__message { | |
| margin: -10px -10px -5px; | |
| } | |
| /*トゥート欄をスムーズにした*/ | |
| .autosuggest-textarea__textarea { | |
| min-height: 20px; | |
| } | |
| .compose-form__buttons { | |
| padding: 5px; | |
| } | |
| .compose-form__publish-button-wrapper{ | |
| position : fixed !important ; | |
| top : 120px !important ; | |
| } | |
| .character-counter { | |
| cursor: default; | |
| font-size: 15px; | |
| position: fixed !important; | |
| top: 41px; | |
| right: 5px; | |
| margin-right: 5px; | |
| } | |
| /*非公開色分け*/ | |
| .status-private { background: rgba(0,0,40,.2); | |
| } | |
| /*未収載色分け*/ | |
| .status-unlisted { background: rgba(40,40,00,.2); | |
| } | |
| /* | |
| @font-face { | |
| font-family: 'test'; | |
| src:url(//fonts.gstatic.com/ea/notosansjapanese/v6/NotoSansJP-Light.woff2) format('woff2'), | |
| url(//fonts.gstatic.com/ea/notosansjapanese/v6/NotoSansJP-Light.woff) format('woff'), | |
| url(//fonts.gstatic.com/ea/notosansjapanese/v6/NotoSansJP-Light.otf) format('opentype'); | |
| } | |
| body { | |
| font-family: 'test' !important; | |
| } | |
| */ | |
| .status__content { | |
| font-family: 'test', sans-serif; | |
| font-size: 18px; | |
| margin: 0 0 | |
| } | |
| /*背景＆UI色設定*/ | |
| body.app-body { | |
| --main-color1: #01102b;/*content*/ | |
| --main-color2: #5aa59e;/*border1*/ | |
| --main-color3: #3d63a9;/*header-text*/ | |
| --main-color4: #60a6d8;/*border-sub*/ | |
| --main-color5: #94d2e4;/*header*/ | |
| --main-color6: #aadcf3;/*border2*/ | |
| --sub-color1: #e8ecff;/*tootの下地*/ | |
| --sub-color2: #1d2f35;/*背景*/ | |
| --sub-color3: #fdffff;/*入力欄*/ | |
| --ac-color1: #4de7ef;/*お名前シール*/ | |
| --ac-color2: #668;/*スイッチアクセント*/ | |
| --ac-color3: #fee;/*ライト用*/ | |
| --alpha1: rgba(255, 230, 250, .3);/*ヘッダー透過*/ | |
| --alpha2: rgba(50, 180, 200, .3);/*ヘッダー透過*/ | |
| --alpha3 :rgba(10,10,10,0.3);/*選択透過*/ | |
| --alpha4: rgba(0,0,0,0);/*透明指定推奨*/ | |
| background: var(--sub-color2); | |
| } | |
| .account__action-bar__tab strong { | |
| color: var(--main-color2); | |
| } | |
| .navigation-bar > div > a.permalink > strong{ | |
| color: var(--main-color2); | |
| } | |
| .column-header.active .column-header__icon { | |
| color: var(--ac-color3); | |
| text-shadow: 0 0 10px var(--alpha3) ; | |
| } | |
| .status.collapsed.has-background:before{ | |
| background:var(--alpha1) | |
| } | |
| .account__header>div { | |
| background:var(--alpha1) !important;/*ヘッダーの色調整*/ | |
| } | |
| .status__content{ | |
| color: var(--main-color1); | |
| } | |
| .drawer__inner{ | |
| background-color: var(--main-color6); | |
| color: var(--main-color3); | |
| } | |
| .ui, | |
| .tabs-bar { | |
| background-color: var(--sub-color2); | |
| color: var(--main-color3); | |
| } | |
| .status { | |
| border-bottom: 1px solid var(--main-color2); | |
| } | |
| .status__relative-time, | |
| .status__display-name, | |
| .status__prepend, | |
| .notification__message | |
| { | |
| color: var(--sub-color2); | |
| } | |
| .account__display-name strong, .status__display-name strong { | |
| color: var(--ac-color1); | |
| font-weight:500 | |
| } | |
| .status__prepend .status__display-name strong | |
| { | |
| color: var(--ac-color1); | |
| } | |
| .detailed-status { | |
| background: var(--main-color6); | |
| } | |
| .focusable:focus{ | |
| background: var(--alpha3); | |
| } | |
| .detailed-status__action-bar { | |
| background: var(--main-color5); | |
| border-top: 1px solid var(--main-color1); | |
| border-bottom: 1px solid var(--main-color1); | |
| } | |
| .scrollable, | |
| .drawer__inner.darker, | |
| .search-results__section *, | |
| .tabs-bar__link:hover, | |
| .drawer__header>a:hover, | |
| .drawer__header>a:hover *, | |
| .empty-column-indicator, | |
| .suggestion-tags__body>ul>li, | |
| .suggestion-tags__body>ul>li *{ | |
| background-color: var(--sub-color1) !important; | |
| color: var(--main-color1) !important; | |
| } | |
| -webkit-scrollbar { | |
| background:var(--main-color3); | |
| } | |
| -webkit-scrollbar:hover { | |
| background:var(--main-color1); | |
| } | |
| ::-webkit-scrollbar-thumb { | |
| background: var(--main-color2); | |
| } | |
| ::-webkit-scrollbar-thumb:hover { | |
| background: var(--main-color3); | |
| } | |
| ::-webkit-scrollbar-track { | |
| background: var(--main-color6); | |
| } | |
| ::-webkit-scrollbar-track:hover { | |
| background: var(--main-color4);; | |
| } | |
| .icon-button.inverted, | |
| .text-icon-button, | |
| .navigation-bar__profile-edit { | |
| color:var(--main-color3) | |
| } | |
| .compose-form__buttons .active { | |
| background-color: var(--main-color5); | |
| } | |
| .status__content .status__content__spoiler-link { | |
| background: var(--main-color5); | |
| } | |
| .status__content .status__content__spoiler-link:hover { | |
| background: var(--main-color2); | |
| } | |
| .account__header div *:not(.account__header__avatar), | |
| .account__header span, | |
| .account__header__content, | |
| .account__header .fa, | |
| .muted a.status__content__spoiler-link, | |
| .status__content__spoiler-link:hover >span, | |
| .drawer__tab > .fa, | |
| .drawer__tab:hover > .fa, | |
| .drawer__block { | |
| background: var(--alpha4) !important; | |
| } | |
| .account__header>div { | |
| background: var(--alpha4)!important; | |
| } | |
| .account__header *{ | |
| color:var(--main-color3) !important; | |
| } | |
| .status__content a, | |
| .status__content a>span, | |
| span.ellipsis, | |
| .active, | |
| .search__icon * { | |
| color: var(--main-color2); | |
| } | |
| .button{ | |
| background-color: var(--main-color3); | |
| opacity: 1; | |
| white-space: nowrap; | |
| overflow: hidden; | |
| text-overflow: clip; | |
| } | |
| .button:hover{ | |
| background-color: var(--main-color4); | |
| opacity: 0.8; | |
| } | |
| .search *, | |
| .compose-form__buttons .active { | |
| border-radius: 0.4em; | |
| } | |
| .search__input, | |
| .search__input:focus, | |
| .compose-form__buttons, | |
| .autosuggest-textarea__textarea, | |
| .compose-form__modifiers { | |
| background-color: var(--sub-color3); | |
| } | |
| .column-header, | |
| .column-header *, | |
| .getting-started__wrapper, | |
| .getting-started__wrapper *, | |
| .column-icon, | |
| .drawer__header, | |
| .drawer__header *, | |
| .column-back-button, | |
| .search-results__header, | |
| .favourite-tags *, | |
| .trend-tags__header, | |
| .column-header__collapsible-inner { | |
| background-color: var(--main-color5); | |
| color: var(--main-color3); | |
| } | |
| .column-header__collapsible-inner *{ | |
| color: var(--main-color3); | |
| } | |
| .status__content__spoiler-link{ | |
| border-bottom: 2px dashed var(--main-color3) ; | |
| } | |
| .status__content__spoiler-link:hover{ | |
| border-bottom-color: var(--main-color4); | |
| } | |
| .status__content__spoiler-link span{ | |
| color: var(--main-color3) !important; | |
| } | |
| .status__content__spoiler-link:hover span { | |
| color: var(--sub-color1) !important; | |
| } | |
| *::-webkit-input-placeholder, | |
| *::-moz-placeholder { | |
| color: var(--main-color3); | |
| opacity: 1; | |
| } | |
| *:-ms-input-placeholder { | |
| color: var(--main-color3); | |
| } | |
| .column-subheading, | |
| .column-link:hover, | |
| .active.column-header__button, | |
| .active.column-header__button:hover{ | |
| background: rgba(0,0,0,0.3) ; | |
| color:#fff; | |
| } | |
| .column-link>i, | |
| .column-header__button>i{ | |
| background: transparent; | |
| } | |
| .tabs-bar__link{ | |
| border-bottom: 6px solid var(--main-color2); | |
| } | |
| .active.tabs-bar__link{ | |
| border-bottom: 6px solid var(--alpha2); | |
| } | |
| .active.tabs-bar__link *{ | |
| color:var(--main-color1); | |
| } | |
| .compose__extra__header { | |
| background: var(--main-color5); | |
| } | |
| .reply-indicator, | |
| div.media-gallery > button{ | |
| background: var(--main-color4); | |
| } | |
| div.media-gallery > button > span.media-spoiler__warning{ | |
| color: var(--main-color1) | |
| } | |
| .react-toggle-track { | |
| background-color: var(--ac-color2); | |
| } | |
| .react-toggle--checked .react-toggle-track { | |
| background-color: var(--main-color3); | |
| } | |
| .react-toggle:hover:not(.react-toggle--disabled) .react-toggle-track, | |
| .react-toggle--checked:hover:not(.react-toggle--disabled) .react-toggle-track { | |
| background-color: var(--alpha2); | |
| } | |
| .account-section-headline { | |
| color: var(--main-color4); | |
| background: var(--main-color3); | |
| border-bottom: 1px solid var(--main-color1); | |
| } | |
| .account-gallery__item a { | |
| background-color: var(--main-color4); | |
| } | |
| /*レイアウト変更*/ | |
| .drawer { | |
| height : 320px !important ; | |
| width : 320px !important ; | |
| flex: 1 1 0 !important; | |
| } | |
| .column { | |
| flex: 1 1 0 !important; | |
| } | |
| .wide .drawer { | |
| flex: 1 1 0; | |
| min-width: 0px; | |
| max-width: 320px; | |
| } | |
| .wide .column { | |
| flex: 1 1 0; | |
| min-width: 0px; | |
| max-width: none; | |
| } | |
| div.column-icon.collapsable + div { | |
| overflow: scroll !important; | |
| } | |
| @media (min-width:2560px) { | |
| .drawer, .column { | |
| margin: 0; height: 100vh; | |
| } | |
| } | |
| .column:nth-child(2) { | |
| width : 33% !important ; | |
| flex: 1 1 0 !important; | |
| position : fixed !important ; | |
| top : 320px !important ; | |
| padding-left : 10px !important ; | |
| bottom : 0px !important ; | |
| padding-top : 0px !important ; | |
| padding-bottom : 10px !important ; | |
| padding-right : 0px !important ; | |
| } | |
| .wide .column:nth-child(2) { | |
| flex: 1 1 0; | |
| min-width: 0px; | |
| max-width: 320px; | |
| padding-right : 5px !important ; | |
| } | |
| .notification__message, | |
| .muted .status__content a, | |
| .muted .status__content p, | |
| .muted .status__display-name strong { | |
| font-size: 0.8em; | |
| } | |
| .status{ | |
| padding: 2px; | |
| } | |
| .status__info { | |
| margin: 2px 0 2px; | |
| font-size: 13px; | |
| } | |
| .status__action-bar { | |
| margin: 0px 0px; | |
| } | |
| .status__display-name{ | |
| font-size: 1em; | |
| } | |
| .notification__message { | |
| font-size: 5px; | |
| padding: 6px 10px 0px 68px; | |
| } | |
| .status .notification__message { | |
| margin: -10px -10px -5px; | |
| } | |
| /*トゥート欄をスムーズにした*/ | |
| .autosuggest-textarea__textarea { | |
| min-height: 20px; | |
| } | |
| .compose-form__buttons { | |
| padding: 5px; | |
| } | |
| .compose-form__publish-button-wrapper{ | |
| position : fixed !important ; | |
| top : 0px !important ; | |
| } | |
| .character-counter { | |
| cursor: default; | |
| font-size: 15px; | |
| position: fixed !important; | |
| top: 41px; | |
| right: 5px; | |
| margin-right: 5px; | |
| } | |
| /*非公開色分け*/ | |
| .status-private { background: rgba(0,0,40,.2); | |
| } | |
| /*未収載色分け*/ | |
| .status-unlisted { background: rgba(40,40,00,.2); | |
| } | |
| /* | |
| @font-face { | |
| font-family: 'test'; | |
| src:url(//fonts.gstatic.com/ea/notosansjapanese/v6/NotoSansJP-Light.woff2) format('woff2'), | |
| url(//fonts.gstatic.com/ea/notosansjapanese/v6/NotoSansJP-Light.woff) format('woff'), | |
| url(//fonts.gstatic.com/ea/notosansjapanese/v6/NotoSansJP-Light.otf) format('opentype'); | |
| } | |
| body { | |
| font-family: 'test' !important; | |
| } | |
| */ | |
| .status__content { | |
| font-family: 'test', sans-serif; | |
| font-size: 18px; | |
| margin: 0 0 | |
| } | |
| /*背景＆UI色設定*/ | |
| body.app-body { | |
| --main-color1: #01102b;/*content*/ | |
| --main-color2: #5aa59e;/*border1*/ | |
| --main-color3: #3d63a9;/*header-text*/ | |
| --main-color4: #60a6d8;/*border-sub*/ | |
| --main-color5: #94d2e4;/*header*/ | |
| --main-color6: #aadcf3;/*border2*/ | |
| --sub-color1: #e8ecff;/*tootの下地*/ | |
| --sub-color2: #1d2f35;/*背景*/ | |
| --sub-color3: #fdffff;/*入力欄*/ | |
| --ac-color1: #4de7ef;/*お名前シール*/ | |
| --ac-color2: #668;/*スイッチアクセント*/ | |
| --ac-color3: #fee;/*ライト用*/ | |
| --alpha1: rgba(255, 230, 250, .3);/*ヘッダー透過*/ | |
| --alpha2: rgba(50, 180, 200, .3);/*ヘッダー透過*/ | |
| --alpha3 :rgba(10,10,10,0.3);/*選択透過*/ | |
| --alpha4: rgba(0,0,0,0);/*透明指定推奨*/ | |
| background: var(--sub-color2); | |
| } | |
| .navigation-bar > div > a.permalink > strong{ | |
| color: var(--main-color2) !important; | |
| } | |
| .column-header.active .column-header__icon { | |
| color: var(--ac-color3); | |
| text-shadow: 0 0 10px var(--alpha3) ; | |
| } | |
| .status.collapsed.has-background:before{ | |
| background:var(--alpha1) | |
| } | |
| .account__header>div { | |
| background:var(--alpha1) !important;/*ヘッダーの色調整*/ | |
| } | |
| .status__content{ | |
| color: var(--main-color1) !important; | |
| } | |
| .drawer__inner{ | |
| background-color: var(--main-color6); | |
| color: var(--main-color3); | |
| } | |
| .ui, | |
| .tabs-bar { | |
| background-color: var(--sub-color2); | |
| color: var(--main-color3); | |
| } | |
| .status { | |
| border-bottom: 1px solid var(--main-color2); | |
| } | |
| .status__relative-time, | |
| .status__display-name, | |
| .status__prepend, | |
| .notification__message | |
| { | |
| color: var(--sub-color2); | |
| } | |
| .account__display-name strong, .status__display-name strong { | |
| color: var(--ac-color1); | |
| font-weight:500 | |
| } | |
| .status__prepend .status__display-name strong | |
| { | |
| color: var(--ac-color1); | |
| } | |
| .detailed-status { | |
| background: var(--main-color6); | |
| } | |
| .focusable:focus{ | |
| background: var(--alpha3); | |
| } | |
| .detailed-status__action-bar { | |
| background: var(--main-color5); | |
| border-top: 1px solid var(--main-color1); | |
| border-bottom: 1px solid var(--main-color1); | |
| } | |
| .scrollable, | |
| .drawer__inner.darker, | |
| .search-results__section *, | |
| .tabs-bar__link:hover, | |
| .drawer__header>a:hover, | |
| .drawer__header>a:hover *, | |
| .empty-column-indicator, | |
| .suggestion-tags__body>ul>li, | |
| .suggestion-tags__body>ul>li *{ | |
| background-color: var(--sub-color1) !important; | |
| color: var(--main-color1) !important; | |
| } | |
| -webkit-scrollbar { | |
| background:var(--main-color3); | |
| } | |
| -webkit-scrollbar:hover { | |
| background:var(--main-color1); | |
| } | |
| ::-webkit-scrollbar-thumb { | |
| background: var(--main-color2); | |
| } | |
| ::-webkit-scrollbar-thumb:hover { | |
| background: var(--main-color3); | |
| } | |
| ::-webkit-scrollbar-track { | |
| background: var(--main-color6); | |
| } | |
| ::-webkit-scrollbar-track:hover { | |
| background: var(--main-color4);; | |
| } | |
| .icon-button.inverted, | |
| .text-icon-button, | |
| .navigation-bar__profile-edit { | |
| color:var(--main-color3) | |
| } | |
| .compose-form__buttons .active { | |
| background-color: var(--main-color5); | |
| } | |
| .status__content .status__content__spoiler-link { | |
| background: var(--main-color5); | |
| } | |
| .status__content .status__content__spoiler-link:hover { | |
| background: var(--main-color2); | |
| } | |
| .account__header div *:not(.account__header__avatar), | |
| .account__header span, | |
| .account__header__content, | |
| .account__header .fa, | |
| .muted a.status__content__spoiler-link, | |
| .status__content__spoiler-link:hover >span, | |
| .drawer__tab > .fa, | |
| .drawer__tab:hover > .fa, | |
| .drawer__block { | |
| background: var(--alpha4) !important; | |
| } | |
| .account__header>div { | |
| background: var(--alpha4)!important; | |
| } | |
| .account__header *{ | |
| color:var(--main-color3) !important; | |
| } | |
| .status__content a, | |
| .status__content a>span, | |
| span.ellipsis, | |
| .active, | |
| .search__icon * { | |
| color: var(--main-color2) !important; | |
| } | |
| .button{ | |
| background-color: var(--main-color3); | |
| opacity: 1; | |
| white-space: nowrap; | |
| overflow: hidden; | |
| text-overflow: clip; | |
| } | |
| .button:hover{ | |
| background-color: var(--main-color4); | |
| opacity: 0.8; | |
| } | |
| .search *, | |
| .compose-form__buttons .active { | |
| border-radius: 0.4em; | |
| } | |
| .search__input, | |
| .search__input:focus, | |
| .compose-form__buttons, | |
| .autosuggest-textarea__textarea, | |
| .compose-form__modifiers { | |
| background-color: var(--sub-color3); | |
| } | |
| .column-header, | |
| .column-header *, | |
| .getting-started__wrapper, | |
| .getting-started__wrapper *, | |
| .column-icon, | |
| .drawer__header, | |
| .drawer__header *, | |
| .column-back-button, | |
| .search-results__header, | |
| .favourite-tags *, | |
| .trend-tags__header, | |
| .column-header__collapsible-inner { | |
| background-color: var(--main-color5); | |
| color: var(--main-color3); | |
| } | |
| .column-header__collapsible-inner *{ | |
| color: var(--main-color3); | |
| } | |
| .status__content__spoiler-link{ | |
| border-bottom: 2px dashed var(--main-color3) ; | |
| } | |
| .status__content__spoiler-link:hover{ | |
| border-bottom-color: var(--main-color4); | |
| } | |
| .status__content__spoiler-link span{ | |
| color: var(--main-color3) !important; | |
| } | |
| .status__content__spoiler-link:hover span { | |
| color: var(--sub-color1) !important; | |
| } | |
| *::-webkit-input-placeholder, | |
| *::-moz-placeholder { | |
| color: var(--main-color3); | |
| opacity: 1; | |
| } | |
| *:-ms-input-placeholder { | |
| color: var(--main-color3); | |
| } | |
| .column-subheading, | |
| .column-link:hover, | |
| .active.column-header__button, | |
| .active.column-header__button:hover{ | |
| background: rgba(0,0,0,0.3) ; | |
| color:#fff; | |
| } | |
| .column-link>i, | |
| .column-header__button>i{ | |
| background: transparent; | |
| } | |
| .tabs-bar__link{ | |
| border-bottom: 6px solid var(--main-color2); | |
| } | |
| .active.tabs-bar__link{ | |
| border-bottom: 6px solid var(--alpha2); | |
| } | |
| .active.tabs-bar__link *{ | |
| color:var(--main-color1); | |
| } | |
| .compose__extra__header { | |
| background: var(--main-color5); | |
| } | |
| .reply-indicator, | |
| div.media-gallery > button{ | |
| background: var(--main-color4); | |
| } | |
| div.media-gallery > button > span.media-spoiler__warning{ | |
| color: var(--main-color1) | |
| } | |
| .react-toggle-track { | |
| background-color: var(--ac-color2); | |
| } | |
| .react-toggle--checked .react-toggle-track { | |
| background-color: var(--main-color3); | |
| } | |
| .react-toggle:hover:not(.react-toggle--disabled) .react-toggle-track, | |
| .react-toggle--checked:hover:not(.react-toggle--disabled) .react-toggle-track { | |
| background-color: var(--alpha2); | |
| } | |
| .account-section-headline { | |
| color: var(--main-color4); | |
| background: var(--main-color3); | |
| border-bottom: 1px solid var(--main-color1); | |
| } | |
| .account-gallery__item a { | |
| background-color: var(--main-color4); | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment