Knzk.css

/*レイアウト変更*/
.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);
}