Frostclear for TweetDeck

TweetDeck Theme

/* ==UserStyle==
@name           Frostclear for TweetDeck
@namespace      midra.me
@version        1.0.1
@description    TweetDeck Theme
@author         Midra(@mdr_anm)
==/UserStyle== */

@-moz-document domain("tweetdeck.twitter.com") {
:root {
  --theme-name: 'Frostclear';
  --theme-author: 'Midra(@mdr_anm)';
}
/* 生産者表示 */
#settings-modal .mdl-inner > footer::after {
  content: var(--theme-name)' designed by  'var(--theme-author);
  display: block;
  position: relative;
  bottom: -15px;
  width: 100%;
  font-size: 12px;
  color: var(--md-fcolor-sub1);
  text-align: left;
}

::selection {
  background-color: #899ea980 !important;
}
.dark ::selection {
  color: #d9d9d9 !important;
}

/* スクロールバー */
.scroll-styled-h::-webkit-scrollbar,
.scroll-styled-v::-webkit-scrollbar {
/*   display: none; */
  width: 0 !important;
  height: 8px !important;
  background-color: #0000;
}
.scroll-styled-h::-webkit-scrollbar-button:start,
.scroll-styled-v::-webkit-scrollbar-button:start {
  background-color: #0000;
  height: 200px;
}
.scroll-styled-h::-webkit-scrollbar-thumb,
.scroll-styled-v::-webkit-scrollbar-thumb {
  background-color: var(--md-border-c1) !important;
}
.scroll-styled-h::-webkit-scrollbar-thumb:hover,
.scroll-styled-v::-webkit-scrollbar-thumb:hover {
  background-color: var(--md-border-c2) !important;
}
.scroll-styled-h::-webkit-scrollbar-track,
.scroll-styled-v::-webkit-scrollbar-track {
  background-color: #0000 !important;
  border: none !important;
}

/* アニメーション */
.column-holder > .column-panel {
  transition-property: transform, opacity;
  transition-duration: 0.2s;
}
.is-shifted-1 > .column-holder,
.is-shifted-2 > .column-holder {
  transform: none !important;
}
.is-shifted-1 > .column-holder > .column-panel:first-child,
.is-shifted-2 > .column-holder > .column-panel:first-child {
  transform: scale(0.9);
  opacity: 0;
}
.is-shifted-1 > .column-holder > .column-panel:nth-child(2) {
  transform: translateX(-100%);
}
.is-shifted-2 > .column-holder > .column-panel:nth-child(2) {
  transform: translateX(-100%) scale(0.9);
  opacity: 0;
}
.is-shifted-2 > .column-holder > .column-panel:nth-child(3) {
  transform: translateX(-200%);
}

/*******************************
* 共通変数
********************************/
html {
  --md-backcolor: #bdcad3;
  --md-backimg: linear-gradient(-45deg, #d2e2e1 0%, #acb5ca 100%);
  
  --md-accent-1: #1F74E8;
  --md-accent-2: #2389ff;
  
  --md-focused-s: inset 0 0 10px 4px #0076e778 !important;
  --md-option-back: #F9FBFB;
  
  --md-hover-shadow: #a1a1a1f0;
  --md-txthover-shadow: 1px 1px 3px var(--md-hover-shadow);
  
  --md-btn-back1: rgba(255, 255, 255, .5);
  --md-btn-back1-h: rgba(255, 255, 255, .8);
  --md-btn-hover-s: #00000087;
  
  --md-border-c1: #00000029;
  --md-border-c2: #909fac;
  
  --md-c-red: #f41f5b;
  
  --md-fcolor-main: #47484d;
  --md-fcolor-sub1: #7d8a94;
  --md-fcolor-sub2: #97a4ae;
  
  --md-back-header: rgba(238, 238, 238, .5);
  --md-back-header-nt: #D3D8DF;
  --md-shadow-header: rgba(0, 0, 0, .29);
  --md-back1: rgba(238, 238, 238, .7);
  --md-back2: rgba(255, 255, 255, .6);
  --md-back3: #d1d4d7;
  
  --md-pop-back: rgba(255, 255, 255, .5);
  --md-pop-backshadow: #fff;
  --md-shadow-c1: rgba(0, 0, 0, .3);
  
  --md-modal-header: #fff;
  --md-modal-back: #2e2e2e30;
  
  --md-solid: #fff;
}

html.dark {
  --md-backcolor: #2c3139;
  --md-backimg: linear-gradient(-45deg, #303030 0%, #101010 100%);
  
/*   --md-accent-1: #1F74E8; */
/*   --md-accent-2: #1f84e3; */
  
  --md-focused-s: inset 0 0 10px 2px #7eb9f2cc !important;
  --md-option-back: #212121;
  
  --md-hover-shadow: #505050;
  --md-txthover-shadow: 1px 1px 3px var(--md-hover-shadow);
  
  --md-btn-back1: rgba(255, 255, 255, .5);
  --md-btn-back1: rgba(0, 0, 0, .5);
  --md-btn-back1-h: rgba(255, 255, 255, .8);
  --md-btn-back1-h: rgba(0, 0, 0, .8);
  --md-btn-hover-s: #000000bf;
  
  --md-border-c1: #ffffff29;
  --md-border-c2: #474d51;
  
/*   --md-c-red: #f41f5b; */
  
  --md-fcolor-main: #cdd0db;
  --md-fcolor-sub1: #7f8893;
  --md-fcolor-sub2: #656c70;
  
  --md-back-header: rgba(45, 45, 50, .5);
  --md-back-header-nt: #1f1f22;
  --md-shadow-header: rgba(0, 0, 0, .8);
  --md-back1: rgba(45, 45, 50, .6);
  --md-back2: rgba(0, 0, 0, .4);
  --md-back3: #2f3033;
  
  --md-pop-back: rgba(23, 23, 25, .6);
  --md-pop-backshadow: #000000de;
  --md-shadow-c1: rgba(0, 0, 0, .8);
  
  --md-modal-header: #1d1f21;
  --md-modal-back: #00000059;
  
  --md-solid: #000;
}

/*******************************
* 全体
********************************/
:root {
  --md-border-r1: 12px;
  --md-border-r2: 8px;
  --md-border-r3: 6px;
  
  --md-item-margin-v: var(--md-margin-v, 6px);
  --md-item-margin-h: var(--md-margin-h, 4px);
  --md-item-width: calc(100% - var(--md-item-margin-h) * 2);
}

/* :root {
  --md-margin-v: 8px;
  --md-margin-h: 8px;
} */

/* ログイン画面 */
body:before,
.startflow-background,
.startflow-background:before {
  background: none !important;
}
.app-info-title {
  color: var(--md-fcolor-main) !important;
}
.app-info-text p {
  color: var(--md-fcolor-sub1) !important;
}
.app-signin-form {
  margin-top: 60px !important;
}
.startflow-panel,
.startflow-panel-rounded {
  color: var(--md-fcolor-main) !important;
  border: none !important;
  border-radius: var(--md-border-r1) !important;
  background-color: var(--md-back1) !important;
  box-shadow: 1px 1px 6px -2px var(--md-shadow-c1) !important;
}
.form-legend {
  color: var(--md-fcolor-main) !important;
  border-color: var(--md-border-c1) !important;
}
.privacy-info {
  color: var(--md-fcolor-sub1) !important;
}

html {
  color: var(--md-fcolor-main) !important;
}
.txt-mute,
.txt-mute a:not(:hover):not(:focus) {
  color: var(--md-fcolor-sub1) !important;
}

/* アクセントカラー系 */
.bg-color-twitter-deep-black,
html.dark .bg-color-twitter-deep-black {
  background-color: var(--md-back3);
}
.bg-color-twitter-white,
html.dark .bg-color-twitter-white {
  background-color: var(--md-back2) !important;
}
html .color-twitter-blue {
  color: var(--md-accent-1) !important;
}
html .color-twitter-blue,
html .stroke-twitter-blue {
  stroke: var(--md-accent-1) !important;
}
html .color-twitter-dark-gray,
html .color-twitter-darker-gray {
  color: var(--md-fcolor-sub1) !important;
}

/* リンク */
html a[href],
html.dark a[href] {
  color: var(--md-accent-1);
}
a[href]:hover,
a[href]:active,
a[href]:focus,
html.dark a[href]:hover,
html.dark a[href]:active,
html.dark a[href]:focus {
  color: var(--md-accent-2);
  text-shadow: var(--md-txthover-shadow);
}
a.account-link {
  color: var(--md-fcolor-main) !important;
}
.column-header-link {
  color: var(--md-accent-1) !important;
}
.column-header-link:active,
.column-header-link:focus,
.column-header-link:hover {
  color: var(--md-accent-2) !important;
}

/* テキストボックス */
.column-title-edit-box,
.detail-view-inline-text,
input,
select,
textarea {
  background-color: var(--md-back2) !important;
  border: 1px solid #0000 !important;
  transition: border 0.1s;
  color: var(--md-fcolor-main) !important;
}
.focus,
input:focus,
select:focus,
.mdl textarea:focus {
  box-shadow: none !important;
  border: 1px solid var(--md-accent-2) !important;
}

/* セレクトボックス */
select > option {
  color: var(--md-fcolor-main) !important;
  background-color: var(--md-option-back) !important;
}

/* iframe */
iframe {
  border-radius: var(--md-border-r2);
  background-color: var(--md-back2);
  padding: 4px !important;
  box-sizing: border-box;
  box-shadow: 1px 1px 6px -2px var(--md-shadow-c1) !important;
}

/* 背景 */
.app-content,
.app-columns-container,
.column,
.column-panel,
.column-background-fill,
.scroll-conversation,
.tweet-detail-wrapper{
  background-color: #0000 !important;
}
body,
#open-modal .column-scroller {
  background-color: var(--md-backcolor) !important;
  background-image: var(--md-backimg);
  background-size: cover;
  background-position: center, center;
  background-repeat: no-repeat;
}

/* ローディング */
.login-container .js-signin-ui:not(.app-signin-form) img[alt='Loading…'] {
  display: none;
}
.med-embeditem {
  background: none !important;
}
.med-embeditem::before,
.med-embeditem::after {
  content: '' !important;
  position: absolute !important;
  top: 50% !important;
  left: 50% !important;
  transform: translate(-50%, -50%) !important;
}
.med-embeditem.is-loaded::before,
.med-embeditem.is-loaded::after {
  display: none !important;
}
.login-container .js-signin-ui:not(.app-signin-form),
.login-container .js-signin-ui:not(.app-signin-form)::after,
.med-embeditem::before,
.med-embeditem::after,
.spinner-large,
.spinner-large::after,
.spinner-small,
.spinner-small::after {
  background-image: none !important;
  border-radius: 50%;
  padding: 0 !important;
  vertical-align: unset !important;
  box-sizing: border-box;
}
.login-container .js-signin-ui:not(.app-signin-form),
.login-container .js-signin-ui:not(.app-signin-form)::after,
.med-embeditem::before,
.med-embeditem::after {
  width: 40px !important;
  height: 40px !important;
}
.spinner-large,
.spinner-large::after {
  width: 15px !important;
  height: 15px !important;
}
.spinner-small,
.spinner-small::after {
  width: 10px !important;
  height: 10px !important;
}
.login-container .js-signin-ui:not(.app-signin-form),
.med-embeditem::after,
.spinner-large,
.spinner-small {
  margin: 0 auto;
  position: relative;
  text-indent: -9999em;
  border-top: 5px solid rgba(255, 255, 255, 0.2);
  border-right: 5px solid rgba(255, 255, 255, 0.2);
  border-bottom: 5px solid rgba(255, 255, 255, 0.2);
  border-left: 5px solid #fff;
  transform: translateZ(0);
  animation: loading1 1.1s infinite linear;
}
.med-embeditem::after {
  animation: loading2 1.1s infinite linear;
}
.spinner-large {
  border-width: 4px;
}
.spinner-small {
  border-width: 3px;
}
@keyframes loading1 {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}
@keyframes loading2 {
  from {
    transform: translate(-50%, -50%) rotate(0deg);
  }
  to {
    transform: translate(-50%, -50%) rotate(360deg);
  }
}

/*******************************
* ボタン
********************************/
/* 基礎 */
button,
button:focus,
button:active,
button:visited {
  background-color: var(--md-btn-back1) !important;
  border: 1px solid #0000 !important;
  color: var(--md-fcolor-main) !important;
  transition-property: background-color, box-shadow !important;
  transition-duration: 0.1s !important;
}
button:focus,
button:active {
  box-shadow: none !important;
}
button:focus,
button:active,
button:hover {
  background-color: var(--md-btn-back1-h) !important;
  box-shadow: 1px 1px 4px -1px var(--md-btn-hover-s);
}

/* 背景色あり */
.Button--primary,
.Button--primary:hover {
  background-color: var(--md-accent-1) !important;
  border: 1px solid var(--md-accent-1) !important;
  color: #fff !important;
  box-shadow: none !important;
}
.Button--primary:hover:not(.is-disabled) {
  background-color: var(--md-accent-2) !important;
  border: 1px solid var(--md-accent-2) !important;
  box-shadow: 1px 1px 4px -1px var(--md-btn-hover-s) !important;
}
.attach-compose-buttons .tweet-button:hover:not(.is-disabled) {
  border: none !important;
  box-shadow: none !important;
}
.Button--primary:focus:not(.is-disabled),
.Button--primary:active:not(.is-disabled) {
  background-color: var(--md-accent-1) !important;
  color: #fff !important;
  box-shadow: none !important;
}

/* 背景色もボーダーもないやつ */
.Button--link,
.Button--link:focus,
.Button--link:active,
.Button--link:hover {
  border-color: #0000 !important;
  background-color: #0000 !important;
}
/* Unfollow */
.s-following .follow-btn:hover .unfollow-text {
  color: #fff !important;
  background-color: var(--md-c-red) !important;
  border: 1px solid var(--md-c-red) !important;
}
.follow-btn .icon,
.follow-btn .Icon {
  color: var(--md-fcolor-main) !important;
}
/* カラム設定の下のボタン */
button.btn-options-tray:focus,
button.btn-options-tray:hover,
input[type=button].btn-options-tray:focus,
input[type=button].btn-options-tray:hover,
html.dark button.btn-options-tray:focus,
html.dark button.btn-options-tray:hover,
html.dark input[type=button].btn-options-tray:focus,
html.dark input[type=button].btn-options-tray:hover{
  color: var(--md-accent-2) !important;
}

/* 怪レい日本语ボタンがあるときの表示をなおす */
.compose .cf > .pull-right,
.inline-reply .cf > .pull-right {
  display: flex;
  align-items: center;
}
.compose .cf > .pull-right > :not(:first-child),
.inline-reply .cf > .pull-right > :not(:first-child) {
  margin-left: 5px;
}
button.cjp + .js-send-button-container {
  padding-left: 0 !important;
}

/*******************************
* サイドバー
********************************/
.app-header {
  background-color: var(--md-back-header-nt) !important;
  box-shadow: 2px 0 10px -4px var(--md-shadow-header);
}
.column-nav-item,
.app-navigator {
  background-color: #0000 !important;
}
.column-nav-link,
.column-nav-link .column-heading,
.app-nav-link-text,
.app-nav-tab-text {
  color: var(--md-fcolor-main) !important;
}
.column-nav-link.is-selected,
.column-nav-link:hover,
.column-nav-link.is-selected .column-heading,
.column-nav-link:hover .column-heading {
  color: var(--md-fcolor-main) !important;
}
.column-nav-updates {
  color: var(--md-accent-2) !important;
}
.app-nav-link,
.app-nav-tab {
  color: var(--md-accent-1) !important;
}
.app-nav-link.is-selected,
.app-nav-link:hover,
.app-nav-tab:hover {
  color: var(--md-accent-2) !important;
}
.app-nav-tab.is-selected {
  background-color: #0000 !important;
}
.nav-user-info .fullname {
  color: var(--md-fcolor-main) !important;
}
.nav-user-info .username {
  color: var(--md-fcolor-sub1) !important;
}
.app-title {
  background-color: var(--md-back-header-nt) !important;
}
.app-title img[alt='TweetDeck'],
.app-title .tweetdeck-logo {
  filter: drop-shadow(1px 1px 2px var(--md-btn-hover-s));
}

/* ホバー時に浮いてくるあれ */
.column-nav-flyout {
  background-color: var(--md-pop-back) !important;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  filter: drop-shadow(0 0 0 var(--md-pop-backshadow));
  box-shadow: 1px 1px 6px -2px var(--md-shadow-c1) !important;
  color: var(--md-fcolor-main) !important;
  border-radius: var(--md-border-r3) !important;
}
.column-nav-flyout > * {
  color: var(--md-fcolor-main) !important;
}

/*******************************
* ツイート画面
********************************/
.compose,
.old-composer-footer {
  background-color: var(--md-back1) !important;
  color: var(--md-fcolor-main) !important;
}
.compose-header {
  border-bottom: 1px solid var(--md-border-c1) !important;
}
.compose-account {
  color: var(--md-fcolor-main) !important;
}
.is-selected.compose-account:focus .compose-account-img,
.compose-account:focus .compose-account-img {
  box-shadow: none !important;
}
html .color-twitter-white {
  color: var(--md-fcolor-sub1) !important;
}
.compose-text-title {
  color: var(--md-fcolor-main) !important;
}
.compose-message-recipient {
  border-color: var(--md-border-c2) !important;
}
.compose-message-recipient-input-container.is-focused,
html.dark .compose-message-recipient-input-container.is-focused {
  box-shadow: none;
}
.compose-remember-state {
  color: var(--md-fcolor-main) !important;
}
.compose .compose-text-container {
  margin-top: 4px;
}
.replyto-caret {
  border-bottom-color: var(--md-back2) !important;
}
.compose-reply-tweet {
  background-color: var(--md-back1) !important;
  color: var(--md-fcolor-sub1) !important;
}
.compose-reply-tweet .fullname {
  color: var(--md-fcolor-main) !important;
}
div.js-quote-tweet-holder.margin-t---4 {
  margin-top: 0px !important;
  border-radius: 0 0 4px 4px;
}
.js-quote-tweet-holder > .quoted-tweet.margin-b--8 {
  margin-bottom: 0 !important;
}
div.compose-media-bar-holder.margin-t---4,
div.compose-media-grid-holder.margin-t---4 {
  margin-top: 0px !important;
}
div.compose-media-bar-holder.margin-t---4 {
  background-color: var(--md-back2) !important;
}
.compose-account-selected {
  background-color: #12c67e !important;
  box-shadow: 1px 1px 6px -2px var(--md-shadow-c1) !important;
}
.compose-account-selected i {
  color: #fff !important;
}

/* アカウントの候補 */
:not(.js-popover-content) > .js-typeahead-dropdown,
.lst-modal {
  background-color: var(--md-pop-back) !important;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  filter: drop-shadow(0 0 0 var(--md-pop-backshadow));
  border: none !important;
  box-shadow: 1px 1px 6px -2px var(--md-shadow-c1) !important;
  border-radius: var(--md-border-r2);
}
.lst li {
  border-color: var(--md-border-c1) !important;
}
.lst .s-selected {
  background-color: var(--md-accent-1) !important;
}
.typeahead .fullname {
  color: var(--md-fcolor-main) !important;
}
.typeahead .username {
  color: var(--md-fcolor-sub1) !important;
}
.lst .s-selected .fullname,
.lst .s-selected .username {
  color: #fff !important;
}
.list-item-last {
  border-bottom-left-radius: var(--md-border-r2) !important;
  border-bottom-right-radius: var(--md-border-r2) !important;
}

/*******************************
* ドロワー（アカウント管理のとことか）
********************************/
/* .drawer {
  overflow: hidden;
} */
.drawer-header,
.account-settings-bt,
.account-settings-bb {
  border-color: var(--md-border-c1) !important;
}
.account-row-separator-b:after {
  content: none !important;
}
.js-accounts-column-holder {
  overflow: hidden !important;
}
.column-panel.accounts-drawer,
html.dark .column-panel.accounts-drawer {
  background-color: #0000 !important;
}
.column-panel .account-settings-row,
.column-panel .join-team,
.column-panel .manage-team-summary {
  background-color: var(--md-pop-back) !important;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  filter: drop-shadow(0 0 0 var(--md-pop-backshadow));
  border: none !important;
}
.avatar-border--2 {
  background-color: var(--md-solid) !important;
  border-color: var(--md-solid) !important;
}
.dark .avatar-border--2 {
  background-color: var(--md-solid) !important;
  border-color: var(--md-solid) !important;
}
.manage-team-summary {
  border-radius: var(--md-border-r2) !important;
  background-color: var(--md-back2) !important;
  padding: 4px !important;
  box-shadow: 1px 1px 6px -2px var(--md-shadow-c1) !important;
}
.contributor-manager .link-complex {
  border: none !important;
}
.color-twitter-gray {
  color: var(--md-fcolor-sub1) !important;
}

/*******************************
* カラム
********************************/
:root {
  --md-col-head-h: calc(50px + var(--md-item-margin-v));
}

/* カラム */
.column {
  margin-right: 0 !important;
}

/* 新着ありの光るやつ */
.more-tweets-btn-container {
  position: fixed !important;
  top: var(--md-item-margin-v) !important;
  z-index: 2 !important;
  margin: 0 var(--md-item-margin-h) !important;
  border-radius: var(--md-border-r1) !important;
  overflow: hidden;
}
.more-tweets-btn-container > div.more-tweets-glow {
  background-color: var(--md-accent-1) !important;
  opacity: 0.45;
  height: calc(var(--md-col-head-h) - var(--md-item-margin-v)) !important;
  margin: 0 !important;
}

.column-drag-handle {
  filter: drop-shadow(0 0 0 var(--md-btn-hover-s));
}
.column-number {
  color: var(--md-fcolor-sub1) !important;
}

.list-placeholder {
  color: var(--md-fcolor-sub1) !important;
  text-shadow: none !important;
}

/* ドラッグする部分 */
.column-drag-handle {
  height: 25px !important;
  margin-top: 18px !important;
  margin-left: 7px !important;
}
/* カラム番号 */
.column-number {
  top: 4px !important;
  left: 6px !important;
}

/* カラムアイコン */
.column-type-icon {
  color: var(--md-fcolor-main) !important;
}
.is-new .column-type-icon {
  color: var(--md-accent-1) !important;
}

/* カラムに移動したときのあれ(PC) */
.column {
  box-shadow: none !important;
  border-radius: 0 !important;
  transition-property: box-shadow, border-radius;
  transition-duration: 0.4s;
}
.column.is-focused {
  box-shadow: var(--md-focused-s) !important;
  border-radius: var(--md-border-r1) !important;
}

/* トレンド */
.column-panel > .bg-color-twitter-midnight-dark-gray,
.column-panel > .bg-color-twitter-white {
  background-color: #0000 !important;
}
[data-testid="columnContent"] {
  width: var(--md-item-width);
  margin: var(--md-item-margin-v) auto 4px !important;
  padding: 0 !important;
  border-radius: var(--md-border-r1);
  background-color: var(--md-back1) !important;
  box-shadow: 1px 1px 6px -2px var(--md-shadow-c1) !important;
}
.border-divider {
  border-color: var(--md-border-c1) !important;
}
.dark-only--color-twitter-gray {
  color: var(--md-fcolor-sub1) !important;
}

/* ヘッダー */
.column-header,
.column-header-temp {
  z-index: 3;
  width: var(--md-item-width) !important;
  margin: var(--md-item-margin-v) auto 0;
  border-bottom: none !important;
  background-color: var(--md-back-header) !important;
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
  box-shadow: 0 2px 10px -4px var(--md-shadow-header);
  border-radius: var(--md-border-r1);
  color: var(--md-fcolor-main) !important;
}
.column-title-container {
  color: var(--md-fcolor-main) !important;
}
.column-title-back {
  color: var(--md-fcolor-main) !important;
}

/* スクロールする部分 */
.column-scroller {
  padding-top: 200px;
  margin-top: -200px;
  z-index: 0 !important;
}
.column-content > :not(.pin-all) {
  position: relative;
  z-index: 1;
}

/* カラムの説明とかいろいろ */
.with-column-divider-bottom {
  border: none !important;
  box-sizing: content-box;
}
.with-column-divider-bottom.column-message,
.with-column-divider-bottom:not(:empty):not(.column-message) {
  width: var(--md-item-width);
  margin: var(--md-item-margin-v) auto 0 !important;
  border-radius: var(--md-border-r2);
  background-color: var(--md-back-header) !important;
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
  box-shadow: 1px 1px 6px -2px var(--md-shadow-c1) !important;
/*   overflow: hidden; */
}
.js-column-options > .with-column-divider-bottom:not(:empty):not(.column-message) {
  background-color: var(--md-back-header-nt) !important;
}
.with-column-divider-bottom.column-message {
  width: calc(var(--md-item-width) - 23px);
}
.js-column-message {
  overflow: visible !important;
  z-index: 2 !important;
}

/* カラムのオプションとか */
.column-options,
.with-column-divider-bottom {
  border: none !important;
  background-color: #0000 !important;
}
.facet-type {
  border-color: var(--md-border-c1) !important;
}
.accordion-header {
  color: var(--md-fcolor-sub1) !important;
}
.accordion > .js-accordion-item:first-child {
  border-radius: var(--md-border-r1) var(--md-border-r1) 0 0;
}
.accordion .is-active {
  color: var(--md-fcolor-main) !important;
}
.facet-type.is-active {
  background-color: var(--md-back1) !important;
}
.facet-subtitle {
  color: var(--md-accent-1) !important;
}
.column-options .button-tray,
button.btn-options-tray,
input[type=button].btn-options-tray,
html.dark button.btn-options-tray,
html.dark input[type=button].btn-options-tray {
  background-color: #0000 !important;
  color: var(--md-fcolor-sub1) !important;
}
.location-form .Icon--close,
.location-form .icon-close {
  background-color: #0000 !important;
}

/* ツイートとか諸々 */
.stream-item {
  width: var(--md-item-width);
  margin: var(--md-item-margin-v) auto;
  border-bottom: none !important;
  border-radius: var(--md-border-r1);
  background-color: var(--md-back1) !important;
  box-shadow: 1px 1px 6px -2px var(--md-shadow-c1) !important;
  box-sizing: border-box;
}
.account-link {
  color: var(--md-fcolor-main) !important;
}

/* ツイート内のボーダー */
.in-tweet-divider:before {
  background-color: var(--md-border-c1);
  left: -46px;
}

/* Show more */
.gap-chirp {
  top: 0 !important;
  width: 90% !important;
  color: var(--md-fcolor-sub2) !important;
}
.gap-chirp::before,
.gap-chirp::after {
  display: none !important;
}

/* 画像 */
.media-caret {
  display: none;
}
.media-size-large {
  border-radius: 0 0 var(--md-border-r1) var(--md-border-r1);
}

/* 画像、投票とかのあれ & 引用ツイート */
.media-badge,
.quoted-tweet {
  border-color: var(--md-border-c1) !important;
}
.media-badge:hover {
  background-color: var(--md-back2) !important;
}
.quoted-tweet {
  color: var(--md-fcolor-sub2) !important;
}

/* 返信先 */
.other-replies {
  color: var(--md-fcolor-sub2) !important;
}

/* ツイートアクション */
.tweet-actions {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}
.tweet-actions > li {
  margin: 0 !important;
}
.chirp-container .stream-item:not(:hover):not(.is-selected-tweet) .dm-action,
.chirp-container .stream-item:not(:hover):not(.is-selected-tweet) .tweet-action,
.chirp-container .stream-item:not(:hover):not(.is-selected-tweet) .tweet-detail-action {
  color: var(--md-fcolor-sub2) !important;
}
.dm-action,
.tweet-action,
.tweet-detail-action {
  color: var(--md-fcolor-sub1) !important;
}

/* ツイート詳細 */
.js-detail-content {
  padding-bottom: 0 !important;
}
.tweet-detail-wrapper {
  margin-top: 0 !important;
}
.detail-view-inline {
  border-left: none !important;
  border-right: none !important;
  border-bottom: none !important;
}
.tweet-stats,
.tweet-detail-actions,
.detail-view-inline {
  border-color: var(--md-border-c1) !important;
}
.tweet-stat {
  color: var(--md-fcolor-sub1) !important;
}
.tweet-stat.is-actionable:hover {
  color: var(--md-fcolor-main) !important;
}
.stat-word {
  color: var(--md-fcolor-sub2) !important;
}
.tweet-stat.is-actionable:hover .stat-word {
  color: var(--md-fcolor-sub1) !important;
}

/* いいね、リツイートした人のとこ */
.social-proof-for-tweet-title {
  width: var(--md-item-width);
  margin: 0 auto;
  background-color: #0000 !important;
  border: none !important;
  color: var(--md-fcolor-sub1) !important;
}

/* 返信を表示 */
.conversation-more {
  color: var(--md-accent-1) !important;
}
/* スレッドの縦線 */
.thread {
  background-color: var(--md-border-c2) !important;
  height: calc(100% - 44px + var(--md-item-margin-v)) !important;
}
.dot-thread {
  height: 3px !important;
}
.dot-thread,
.cursor-top-thread,
.show-more-thread {
  margin-left: var(--md-item-margin-h) !important;
}
.cursor-top-thread {
  margin-top: calc(-11px - var(--md-item-margin-v)) !important;
  height: calc(17px + var(--md-item-margin-v)) !important;
}
.dot-thread-top {
  margin-top: calc(-16px - var(--md-item-margin-v)) !important;
}
.dot-thread-top.middle {
  margin-top: calc(-21px - var(--md-item-margin-v)) !important;
}
.dot-thread-top.top {
  margin-top: calc(-26px - var(--md-item-margin-v)) !important;
}
.show-more-thread {
  height: 13px !important;
}
.dot-thread-more {
  margin-top: 13px !important;
}
.dot-thread-more.middle {
  margin-top: 18px !important;
}
.dot-thread-more.top {
  margin-top: 23px !important;
}

/* 返信欄 */
.reply-triangle {
  display: none !important;
}
.inline-reply {
  border-radius: 0 0 var(--md-border-r1) var(--md-border-r1);
  background-color: var(--md-back2) !important;
  background-color: var(--md-back1) !important;
  background-color: var(--md-back3) !important;
}
.inline-reply i.color-twitter-white,
.inline-reply i.color-twitter-midnight-dark-gray {
  color: var(--md-fcolor-sub1) !important;
}
.compose-text-container {
  background-color: var(--md-back2) !important;
}
.compose-text-container .compose-text.bg-color-twitter-white {
  background-color: #0000 !important;
}

/* DM */
html div.edit-conversation-name,
html.dark div.edit-conversation-name{
  top: calc((var(--md-item-margin-v) + var(--md-col-head-h)) * -1);
  background-color: var(--md-back1) !important;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  filter: drop-shadow(0 0 0 var(--md-pop-backshadow));
  box-shadow: 1px 1px 6px -2px var(--md-shadow-c1) !important;
  border-radius: var(--md-border-r2);
  border: none !important;
}
.add-participant {
  background-color: #0000 !important;
  width: var(--md-item-width) !important;
  margin: 0 auto;
}
.add-participant + .column-content > .column-scroller {
  padding-top: unset !important;
  margin-top: unset !important;
  z-index: unset !important;
}
.rpl {
  width: var(--md-item-width);
  margin: 0 auto;
  padding: 10px 5px;
  box-sizing: border-box;
}

/* 通知 */
/* .activity-header.has-source-avatar > .item-img {
  width: 20px !important;
}
.activity-header.has-source-avatar + .tweet {
  padding-left: 30px !important;
} */

/*******************************
* ドロップダウンメニュー
********************************/
.caret {
  display: none;
}
.dropdown-menu:not(.js-typeahead-dropdown) {
  background-color: var(--md-pop-back) !important;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  filter: drop-shadow(0 0 0 var(--md-pop-backshadow));
  padding: 6px 0 !important;
  box-shadow: 1px 1px 6px -2px var(--md-shadow-c1) !important;
  border-radius: var(--md-border-r2);
}
.dropdown-menu li {
  background-color: #0000 !important;
}
.dropdown-menu li > a {
  margin: 0 6px;
  border-radius: var(--md-border-r3);
  background-color: #0000;
  transition-property: background-color, color;
  transition-duration:  0.1s;
}
.dropdown-menu a:not(:hover):not(:focus) {
  color: var(--md-fcolor-main) !important;
}
.dropdown-menu .is-selected > a,
.dropdown-menu .js-typeahead-item.is-selected {
  background-color: var(--md-accent-1) !important;
  color: #fff !important;
}
.dropdown-menu .is-selected > a[data-action="destroy"],
.dropdown-menu .is-selected > a[data-action="flag-media"] {
  background-color: var(--md-c-red);
}
.non-selectable-item {
  color: var(--md-fcolor-sub2) !important;
}
.drp-h-divider {
  margin: 2px 15px !important;
  border-color: var(--md-border-c1) !important;
}
.dropdown-menu .release-notes-item,
.dropdown-menu .typeahead-item,
.dropdown-menu [data-action] {
  padding: 5px 15px;
}

/*******************************
* モーダル
********************************/
.js-modals-container > .overlay,
.ovl {
  background-color: var(--md-modal-back) !important;
}
.mdl {
  background-color: var(--md-pop-back) !important;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  filter: drop-shadow(0 0 0 var(--md-pop-backshadow));
  box-shadow: 1px 1px 6px -2px var(--md-shadow-c1) !important;
  border-radius: var(--md-border-r1) !important;
}
header.mdl-header,
.mdl-header.mdl-header-divider {
  background-color: var(--md-modal-header);
  border-radius: var(--md-border-r1) var(--md-border-r1) 0 0;
  color: var(--md-fcolor-main) !important;
  border: none !important;
}
.mdl-header-divider {
  border-color: var(--md-border-c1) !important;
}
header.mdl-header.padding-a--12,
.mdl-header.mdl-header-divider.padding-a--12 {
  padding: 8px 12px !important;
}
.mdl-header-title {
  font-weight: 500 !important;
}
.mdl-dismiss {
  top: 5px !important;
  color: var(--md-fcolor-sub1) !important;
}
.mdl-accent {
  background-color: #0000 !important;
}
.mdl-content,
.mdl-col-settings {
  border-color: var(--md-border-c1) !important;
}
.divider-bar {
  background-color: var(--md-border-c1) !important;
}
.mdl-placeholder {
  color: var(--md-fcolor-sub1) !important;
  text-shadow: none !important;
}

/* プロフィール */
.prf-meta {
  border-color: var(--md-border-c1) !important;
}
.prf-stats a {
  color: var(--md-fcolor-main) !important;
}
.prf-stats a strong {
  color: var(--md-fcolor-sub1) !important;
}
.prf .lst-profile i,
.prf .lst-profile span {
  color: var(--md-fcolor-sub1) !important;
}
.prf .lst-profile a:hover i,
.prf .lst-profile a:hover span {
  color: var(--md-fcolor-main) !important;
}

/* 設定 */
.frm {
  color: var(--md-fcolor-main) !important;
}
.list-account,
.list-filter,
.list-link,
.list-listaccount,
.list-listmember,
.list-subtitle,
.list-twitter-list {
  color: var(--md-fcolor-main) !important;
}
.lst-group .selected .fullname,
.lst-group .selected .inner strong,
.lst-group .selected .list-account,
.lst-group .selected .list-link,
.lst-group .selected .list-listmember,
.lst-group .selected .list-subtitle,
.lst-group .selected .list-twitter-list,
.lst-group .selected .txt-ellipsis {
  color: #fff !important;
}
.mdl-links,
.mdl-links a {
  color: var(--md-fcolor-sub2) !important;
}

/* カラム追加 */
.lst-launcher .top-row {
  border-color: var(--md-border-c1) !important;
}
.lst-launcher a .color-twitter-blue,
.lst-launcher a span,
.lst-launcher .is-disabled a i,
.lst-launcher .is-disabled a:hover i,
.lst-launcher .is-disabled a:active i,
.lst-launcher .is-disabled a:focus i,
html.dark .lst-launcher a span,
html.dark .lst-launcher .is-disabled a i,
html.dark .lst-launcher .is-disabled a:hover i,
html.dark .lst-launcher .is-disabled a:active i,
html.dark .lst-launcher .is-disabled a:focus i {
  color: var(--md-fcolor-sub1) !important;
  stroke: var(--md-fcolor-sub1) !important;
}
.lst-launcher a:hover i,
.lst-launcher a:hover span {
  color: var(--md-accent-2) !important;
}
.lst-launcher .is-disabled {
  display: none;
}
.lst-launcher .is-disabled a {
  transform: scale(1) !important;
}

/* リスト編集 */
.list-listmember .bio {
  color: var(--md-fcolor-sub2) !important;
}
/* スマホ用 */
#lists-modal .mdl {
  height: 100% !important;
}
.modal-content .control-group {
  display: flex;
  flex-direction: column;
}
.modal-content .control-group .controls {
  margin: 0 !important;
}
.modal-content .control-group > *,
.modal-content .control-group .controls > *:not(span){
  width: 100% !important;
}

/* アカウント選択時（リツイートとか） */
.is-selected.compose-account:focus .compose-account-img,
.compose-account:focus .compose-account-img {
  box-shadow: none;
}

/* サイド */
.mdl-column-med {
  background-color: #0000 !important;
}
.lst-group li {
  margin: 0 6px !important;
}
.lst-group a {
  text-decoration: none !important;
}
.lst-group .selected {
  border-radius: var(--md-border-r2) !important;
  background-color: var(--md-accent-1) !important;
}
.lst-group .selected a:hover {
  background-color: #0000 !important;
}

.list-account:hover:active, .list-account:hover:focus, .list-account:hover:hover, .list-link:hover:active, .list-link:hover:focus, .list-link:hover:hover, .list-listaccount:hover:active, .list-listaccount:hover:focus, .list-listaccount:hover:hover, .list-listmember:hover:active, .list-listmember:hover:focus, .list-listmember:hover:hover, .list-subtitle:hover:active, .list-subtitle:hover:focus, .list-subtitle:hover:hover, .list-twitter-list:hover:active, .list-twitter-list:hover:focus, .list-twitter-list:hover:hover {
  background-color: #0000 !important;
}

/* メディアビュアー */
:root {
  --med-b: 0px;
}
.med-tray {
  padding-bottom: 0 !important;
}
.med-tweet,
.med-tray > a {
  display: none !important;
}
.med-embeditem {
  top: 0 !important;
  bottom: var(--med-b, 0px) !important;
}
.mdl.s-full,
.mdl.s-full .media-img,
.mdl.s-full .js-media-native-video {
  width: 100vw !important;
  height: calc(100vh - var(--med-b, 0px)) !important;
}
.mdl.s-full {
  max-width: unset !important;
  padding-bottom: var(--med-b, 0px) !important;
}
.mdl.s-full .margin-vm {
  margin-top: 0 !important;
}
.mdl.s-full .media-img {
  object-fit: contain !important;
}

/* プロフィール */
.prf-meta {
  background-color: #0000 !important;
}
.prf-header {
  border-radius: var(--md-border-r1) var(--md-border-r1) 0 0;
}
.prf .lst-profile a {
  border-color: var(--md-border-c1) !important;
}
.prf-stats li + li a {
  border-color: var(--md-border-c1) !important;
}

/* カラム */
.mdl-column-rhs {
  border-color: var(--md-border-c1) !important;
}
.l-fullheight {
  overflow-x: hidden;
}

/*******************************
* ポップオーバー（検索とか）
********************************/
.popover {
  background-color: var(--md-pop-back) !important;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  filter: drop-shadow(0 0 0 var(--md-pop-backshadow));
  box-shadow: 1px 1px 6px 0 var(--md-shadow-c1) !important;
}
.list-item {
  color: var(--md-fcolor-main) !important;
}
.list-item.is-selected,
.list-item:active,
.list-item:hover {
  color: #fff !important;
  background-color: var(--md-accent-1) !important;
}
.list-item.is-selected .txt-mute,
.list-item:active .txt-mute,
.list-item:hover .txt-mute {
  color: #d4d4d4 !important;
}

/* 予約ツイートカレンダー */
.cal,
#caldays span,
#calweeks a {
  color: var(--md-fcolor-main) !important;
}
#calweeks a.caloff {
  color: var(--md-fcolor-sub2) !important;
}
#calweeks #calcurrent {
  color: #fff !important;
  background-color: var(--md-accent-1) !important;
}
#calweeks #calcurrent:hover {
  background-color: var(--md-accent-2) !important;
}
.cal input.light-on-dark {
  border-color: var(--md-border-c1) !important;
}
.cal button {
  background-color: var(--md-back2) !important;
}
#calbody,
#calweeks {
  background-color: var(--md-back2) !important;
}
#calbody {
  border-radius: 5px;
  overflow: hidden;
}
#caldays {
  border-bottom-color: var(--md-border-c1) !important;
}
#calweeks a.caldisabled {
  background-color: var(--md-back1)!important;
  color: var(--md-fcolor-sub2)!important;
}
#caltoday,
.calweek a:hover {
  background-color: var(--md-back1) !important;
}
.js-schedule-datepicker-holder .Button--danger {
  background-color: var(--md-c-red) !important;
  color: #fff !important;
}

/*******************************
* 日付選択のカレンダー
********************************/
.Dropdown {
  background-color: var(--md-pop-back) !important;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  filter: drop-shadow(0 0 0 var(--md-pop-backshadow));
  box-shadow: 1px 1px 6px 0 var(--md-shadow-c1) !important;
  border-radius: var(--md-border-r2) !important;
  overflow: hidden !important;
}
.DatePicker-nav button.is-focus {
  box-shadow: none !important;
}
.DatePicker-nav > button {
  background-color: #0000 !important;
}
.DatePicker-calendarDayHeader {
  color: var(--md-fcolor-sub1) !important;
}
.DatePicker-calendarDay.is-selectable {
  color: var(--md-fcolor-main) !important;
}
.DatePicker-calendarDay.is-selectable.is-adjacentMonth {
  color: var(--md-fcolor-sub1) !important;
}
.DatePicker-time {
  border-color: var(--md-border-c1) !important;
}
.DatePickerDropdown-menuItem--footer {
  background-color: #0000 !important;
  border-color: var(--md-border-c1) !important;
}
.Dropdown-menuItem.is-focus {
  background-color: var(--md-accent-1) !important;
}
.Dropdown-menuGroupLabel,
.Dropdown-menuItem .Dropdown-menuItemContent {
  border-radius: 0 !important;
}

/*******************************
* ツールチップ
********************************/
.tooltip-arrow {
  display: none;
}
.tooltip-inner {
  background-color: var(--md-pop-back) !important;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  filter: drop-shadow(0 0 0 var(--md-pop-backshadow));
  box-shadow: 1px 1px 6px -2px var(--md-shadow-c1) !important;
  color: var(--md-fcolor-main) !important;
}

/*******************************
* 認証バッジ
********************************/
.sprite-verified,
.sprite-verified-mini,
.badge-verified:before {
  filter: grayscale(100%) invert(100%) brightness(300%) drop-shadow(0 0 1px rgba(0, 0, 0, .5)) !important;
  background-size: cover !important;
  background-position: center, center !important;
  background-image: url('data:image/svg+xml,%3Csvg xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\" version=\"1.1\" id=\"Layer_1\" x=\"0px\" y=\"0px\" viewBox=\"0 0 512 512\" style=\"enable-background:new 0 0 512 512;\" xml:space=\"preserve\"%3E%3Cstyle type=\"text/css\"%3E .st0%7Bfill:%231DA1F2;%7D%0A%3C/style%3E%3Cg id=\"_x3C_Group_x3E_\"%3E%3Cpath class=\"st0\" d=\"M512,268c0,17.9-4.3,34.5-12.9,49.7c-8.6,15.2-20.1,27.1-34.6,35.4c0.4,2.7,0.6,6.9,0.6,12.6 c0,27.1-9.1,50.1-27.1,69.1c-18.1,19.1-39.9,28.6-65.4,28.6c-11.4,0-22.3-2.1-32.6-6.3c-8,16.4-19.5,29.6-34.6,39.7 C290.4,507,273.9,512,256,512c-18.3,0-34.9-4.9-49.7-14.9c-14.9-9.9-26.3-23.2-34.3-40c-10.3,4.2-21.1,6.3-32.6,6.3 c-25.5,0-47.4-9.5-65.7-28.6c-18.3-19-27.4-42.1-27.4-69.1c0-3,0.4-7.2,1.1-12.6c-14.5-8.4-26-20.2-34.6-35.4 C4.3,302.5,0,285.9,0,268c0-19,4.8-36.5,14.3-52.3c9.5-15.8,22.3-27.5,38.3-35.1c-4.2-11.4-6.3-22.9-6.3-34.3 c0-27,9.1-50.1,27.4-69.1c18.3-19,40.2-28.6,65.7-28.6c11.4,0,22.3,2.1,32.6,6.3c8-16.4,19.5-29.6,34.6-39.7 C221.6,5.1,238.1,0,256,0c17.9,0,34.4,5.1,49.4,15.1c15,10.1,26.6,23.3,34.6,39.7c10.3-4.2,21.1-6.3,32.6-6.3 c25.5,0,47.3,9.5,65.4,28.6c18.1,19.1,27.1,42.1,27.1,69.1c0,12.6-1.9,24-5.7,34.3c16,7.6,28.8,19.3,38.3,35.1 C507.2,231.5,512,249,512,268z M245.1,345.1l105.7-158.3c2.7-4.2,3.5-8.8,2.6-13.7c-1-4.9-3.5-8.8-7.7-11.4 c-4.2-2.7-8.8-3.6-13.7-2.9c-5,0.8-9,3.2-12,7.4l-93.1,140L184,263.4c-3.8-3.8-8.2-5.6-13.1-5.4c-5,0.2-9.3,2-13.1,5.4 c-3.4,3.4-5.1,7.7-5.1,12.9c0,5.1,1.7,9.4,5.1,12.9l58.9,58.9l2.9,2.3c3.4,2.3,6.9,3.4,10.3,3.4 C236.6,353.7,241.7,350.9,245.1,345.1z\"/%3E%3C/g%3E%3C/svg%3E') !important;
}

/*******************************
* リンクプレビュー
********************************/
.hw-card-container * {
  border: none !important;
}
.hw-card-container span {
  color: var(--md-fcolor-main) !important;
}
.hw-card-container > div {
  background-color: var(--md-back1) !important;
  box-shadow: 1px 1px 6px -2px var(--md-shadow-c1) !important;
  border-radius: var(--md-border-r2) !important;
}
.hw-card-container > div > :first-child > a > div {
  background-color: var(--md-back2) !important;
}
.hw-card-container a:hover {
  color: inherit !important;
  text-shadow: none !important;
}
}