/* ==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;
}
}