@import 'flavours/glitch/styles/mastodon-light';

/* 背景色と文字色の設定 */
/* 全体 */
.ui{
  -webkit-background-size: 128px 128px;
  -moz-background-size: 128px 128px;
  background-size: 128px 128px;
  background-color: #fffbe7;
  background-image: -webkit-gradient(linear, 0 0, 100% 0, color-stop(.5, #08bec6), color-stop(.5, transparent), to(transparent));
  background-image: -moz-linear-gradient(to left, #08bec6 50%, transparent 50%, transparent);
  background-image: -o-linear-gradient(to left, #08bec6 50%, transparent 50%, transparent);
  background-image: linear-gradient(to left, #08bec6 50%, transparent 50%, transparent);
}
/* drawer */
.drawer__inner,
.drawer__inner strong,
.navigation-bar__profile{
  background-color: #ffe4ad !important;
  color: #20455a;
}
.navigation-bar__profile a:hover{
  text-decoration: underline;
}
.reply-indicator,
.reply-indicator strong{
  background-color: #fac578 !important;
}
.compose-form__buttons-wrapper,
.announcements li,
.trend-tags__sparkline.normal,
.trend-tags__sparkline.normal svg{
  background-color: #ebfaf8 !important;
}
.privacy-dropdown__value.active,
.privacy-dropdown__value,
.text-icon-button.active{
  background-color: #63dbdb !important;
}
.navigation-bar,
.navigation-bar__profile,
.navigation-bar__profile strong,
.compose__extra__header{
  background-color: #fac578 !important;
  padding: 6px;
  border-radius: 4px;
}
.compose__extra,
.compose__extra__body li,
.compose__extra__body li a,
.favourite-tags__icon,
.favourite-tags__lock{
  background-color: #ffe4ad !important;
}
.drawer__inner__mastodon{
  background-color: #ffe4ad !important;
  background-image: none;
}
/* ヘッダー */
.column-header,
.column-header *,
.getting-started__wrapper,
.getting-started__wrapper *,
.column-icon,
.tabs-bar,
.drawer__header,
.drawer__header *,
.column-back-button,
.search-results__header,
.favourite-tags *,
.trend-tags__header,
.column-header__collapsible-inner{
  background-color: #520021;
  color: #ffffff;
}
/* スタートカラム */
.column-subheading{
  background-color: #f77163 !important;
  color: #520021 !important;
}
.getting-started__wrapper,
.column-link,
.getting-started__footer{
  background-color: #ffb2c6 !important;
  color: #520021 !important;
  margin: 1px;
}
.getting-started.getting-started__footer{
  background-color: #fff3ef !important;
}
.getting-started__footer a span{
      color: #7b3484 !important;
}
.getting-started__footer span{
      color: #520021 !important;
}
.getting-started__footer p span a{
      color: #7b3484 !important;
}
/* トゥートカラム */
.scrollable,
.drawer__inner.darker,
.search-results__section *,
.status.status-direct,
.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: #f7fbff !important;
  color: #2f0016 !important;
}
/* 通知カラム */
.notification__filter-bar button{
  background-color: #e9f1f8;
  color: #383a3c;
}
.notification__filter-bar button.active{
  background-color: #cbdbe9;
  color: #131313 !important;
}
/* ボタン */
.status__content a,
.status__content a>span,
span.ellipsis,
.active,
.search__icon *{
  color: #067193 !important;
}
.compose-form__buttons .active{
  background-color: #282c37;
}
.button{
  opacity: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: clip;
  display: inline-block;
  padding: 0.5em 1em;
  text-decoration: none;
  border-radius: 4px;
  color: #ffffff;
  background-image: -webkit-linear-gradient(#08c3c6 0%, #0086c6 100%);
  background-image: linear-gradient(#08c3c6 0%, #0086c6 100%);
  box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.29);
  border-bottom: solid 3px #0869b5;
}
.button:hover{
  color: #ffffff;
  background-image: -webkit-linear-gradient(#bd9ade 0%, #ad559c 100%);
  background-image: linear-gradient(#bd9ade 0%, #ad559c 100%);
  box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.29);
  border-bottom: solid 3px #6b3073;
}
.button:active{
  -ms-transform: translateY(2px);
  -webkit-transform: translateY(2px);
  transform: translateY(2px);
  box-shadow: 2px 0px 0px rgba(0, 0, 0, 0.2);
  border-bottom: none;
}
.button.confirmation-modal__cancel-button,
.button.mute-modal__cancel-button{
  color: #ffffff;
}
.button.confirmation-modal__cancel-button:hover,
.button.mute-modal__cancel-button:hover{
  color: #2a1b0a;
}
.spoiler-button.spoiler-button--visible:hover,
.icon-button.overlayed:hover{
  background-color: #fff28a;
}

/* 未収載トゥートの色分け */
.status-unlisted{
  background: #ffd7df;
}

/* 角を丸くする */
/* 全体 */
.column .scrollable,
.drawer__pager,
.privacy-dropdown__value,
.compose-form__sensitive-button__icon{
  border-radius: 4px;    /* CSS3草案 */  
  -webkit-border-radius: 4px;    /* Safari,Google Chrome用 */  
  -moz-border-radius: 4px;    /* Firefox用 */
}
/* ヘッダーとボタン */
.drawer__header,
.drawer__tab,
.column-header__wrapper,
.column-header,
.column-header__button,
.column-header__buttons,
.column-header__collapsible,
.column-back-button{
  border-radius: 8px;    /* CSS3草案 */  
  -webkit-border-radius: 8px;    /* Safari,Google Chrome用 */  
  -moz-border-radius: 8px;    /* Firefox用 */
}
/* トゥートカラム */
.compose__extra,
.compose__extra__header{
  border-radius: 0 4px 4px 0;   /* CSS3草案 */  
  -webkit-border-radius: 0 4px 4px 0;    /* Safari,Google Chrome用 */  
  -moz-border-radius: 0 4px 4px 0;    /* Firefox用 */
}
.compose__extra__header{
  border-radius: 0 4px 0 0;   /* CSS3草案 */  
  -webkit-border-radius: 0 4px 0 0;    /* Safari,Google Chrome用 */  
  -moz-border-radius: 0 4px 0 0;    /* Firefox用 */
}
.compose__extra__body,
.compose__extra__body li{
  border-radius: 0 0 4px 0;   /* CSS3草案 */  
  -webkit-border-radius: 0 0 4px 0;    /* Safari,Google Chrome用 */  
  -moz-border-radius: 0 0 4px 0;    /* Firefox用 */
}
/* スタートカラム */
.getting-started__wrapper,
.getting-started__footer,
.column-subheading,
.column-link{
  border-radius: 4px;    /* CSS3草案 */  
  -webkit-border-radius: 4px;    /* Safari,Google Chrome用 */  
  -moz-border-radius: 4px;    /* Firefox用 */
}

/* スクロールバーの設定 */
/* 全体 */
::-webkit-scrollbar,
::-webkit-scrollbar-track-piece{
  background: #fff3ef;
  border-radius: 4px;
  width: 8px;
  -webkit-border-radius: 4px;
}
::-webkit-scrollbar:hover,
::-webkit-scrollbar-track-piece:hover{
  background: #fff39c;
}
::-webkit-scrollbar-thumb,
::-webkit-scrollbar-thumb:hover{
  background: #ffb2b5;
}
::-webkit-scrollbar-thumb,
::-webkit-scrollbar-track{
  border-radius: 4px;
  -webkit-border-radius: 4px;
}
.compose__extra .scrollable.optionally-scrollable::-webkit-scrollbar,
.compose__extra .scrollable.optionally-scrollable::-webkit-scrollbar-track-piece{
  background: #ffe4ad;
  border-radius: 4px;
  width: 8px;
  -webkit-border-radius: 4px;
}
.compose__extra .scrollable.optionally-scrollable::-webkit-scrollbar:hover,
.compose__extra .scrollable.optionally-scrollable::-webkit-scrollbar-track-piece:hover{
  background: #ffe4ad;
}
.compose__extra .scrollable.optionally-scrollable::-webkit-scrollbar-thumb,
.compose__extra .scrollable.optionally-scrollable::-webkit-scrollbar-thumb:hover{
  background: #916d4a;
}
/* ヘッダー */
.column-header__collapsible::-webkit-scrollbar,
.column-header__collapsible::-webkit-scrollbar-track-piece{
  background: #ffffff;
  border-radius: 4px;
  -webkit-border-radius: 4px;
}
.column-header__collapsible::-webkit-scrollbar:hover,
.column-header__collapsible::-webkit-scrollbar-track-piece:hover{
  background: #ffffff;
}
.column-header__collapsible::-webkit-scrollbar-thumb,
.column-header__collapsible::-webkit-scrollbar-thumb:hover{
  background: #3e0d1d;
}
.column-header__collapsible::-webkit-scrollbar-thumb,
.column-header__collapsible::-webkit-scrollbar-track{
  border-radius: 4px;
  -webkit-border-radius: 4px;
}
/* スタートカラム */
.getting-started__footer.scrollable.optionally-scrollable::-webkit-scrollbar,
.getting-started__footer.scrollable.optionally-scrollable::-webkit-scrollbar-track-piece{
  background: #ff9790;
  border-radius: 0 4px 4px 0;
  -webkit-border-radius: 0 4px 4px 0;
}
.getting-started__footer.scrollable.optionally-scrollable::-webkit-scrollbar:hover,
.getting-started__footer.scrollable.optionally-scrollable::-webkit-scrollbar-track-piece:hover{
  background: #ff9790;
}
.getting-started__footer.scrollable.optionally-scrollable::-webkit-scrollbar-thumb,
.getting-started__footer.scrollable.optionally-scrollable::-webkit-scrollbar-thumb:hover{
  background: #b92e4e;
}
/* トゥートカラム */
.drawer__pager .drawer__inner{    /* スクロールバーを常時表示したくない場合はこの行全体を削除またはコメントアウトしてください */
  overflow-y: scroll;    /* スクロールバーを常時表示したくない場合はこの行全体を削除またはコメントアウトしてください */
}    /* スクロールバーを常時表示したくない場合はこの行全体を削除またはコメントアウトしてください */
.drawer__pager .drawer__inner::-webkit-scrollbar,
.drawer__pager .drawer__inner::-webkit-scrollbar-track-piece{
  background: #fac578;
  border-radius: 4px;
  -webkit-border-radius: 4px;
}
.drawer__pager .drawer__inner::-webkit-scrollbar:hover,
.drawer__pager .drawer__inner::-webkit-scrollbar-track-piece:hover{
  background: #fac578;
}
.drawer__pager .drawer__inner::-webkit-scrollbar-thumb,
.drawer__pager .drawer__inner::-webkit-scrollbar-thumb:hover{
  background: #794a2f;
}
/* .compose__extra .scrollable.optionally-scrollable{ */
/*     overflow: hidden; */
/* } */

.getting-started__trends {
background: #ff9790;
border-radius: 4px;
}

.getting-started__footer {
margin-bottom: 7px;
}

.column-link--transparent.active {
color: #000 !important;
}

.status-card__actions button {
color: #ccc;
}

.status-card__actions button:hover {
color: #fff;
}

.navigation-panel hr {
border-top: 0;
}

.glitch.local-settings__navigation__item {
border-bottom: 0;
}

.account__avatar,
.account__avatar-overlay-base,
.account__avatar-overlay-overlay {
border-radius: 50% !important;
}

/* Metu Life edits */
.icon-button.active {
     color: #ff5050 !important;
}