☰

Frostclear for TweetDeck

TweetDeck Theme

  1. /* ==UserStyle==
  2. @name           Frostclear for TweetDeck
  3. @namespace      midra.me
  4. @version        1.0.1
  5. @description    TweetDeck Theme
  6. @author         Midra(@mdr_anm)
  7. ==/UserStyle== */
  8.  
  9. @-moz-document domain("tweetdeck.twitter.com") {
  10. :root {
  11.   --theme-name: 'Frostclear';
  12.   --theme-author: 'Midra(@mdr_anm)';
  13. }
  14. /* 生産者表示 */
  15. #settings-modal .mdl-inner > footer::after {
  16.   content: var(--theme-name)' designed by  'var(--theme-author);
  17.   display: block;
  18.   position: relative;
  19.   bottom: -15px;
  20.   width: 100%;
  21.   font-size: 12px;
  22.   color: var(--md-fcolor-sub1);
  23.   text-align: left;
  24. }
  25.  
  26. ::selection {
  27.   background-color: #899ea980 !important;
  28. }
  29. .dark ::selection {
  30.   color: #d9d9d9 !important;
  31. }
  32.  
  33. /* スクロールバー */
  34. .scroll-styled-h::-webkit-scrollbar,
  35. .scroll-styled-v::-webkit-scrollbar {
  36. /*   display: none; */
  37.   width: 0 !important;
  38.   height: 8px !important;
  39.   background-color: #0000;
  40. }
  41. .scroll-styled-h::-webkit-scrollbar-button:start,
  42. .scroll-styled-v::-webkit-scrollbar-button:start {
  43.   background-color: #0000;
  44.   height: 200px;
  45. }
  46. .scroll-styled-h::-webkit-scrollbar-thumb,
  47. .scroll-styled-v::-webkit-scrollbar-thumb {
  48.   background-color: var(--md-border-c1) !important;
  49. }
  50. .scroll-styled-h::-webkit-scrollbar-thumb:hover,
  51. .scroll-styled-v::-webkit-scrollbar-thumb:hover {
  52.   background-color: var(--md-border-c2) !important;
  53. }
  54. .scroll-styled-h::-webkit-scrollbar-track,
  55. .scroll-styled-v::-webkit-scrollbar-track {
  56.   background-color: #0000 !important;
  57.   border: none !important;
  58. }
  59.  
  60. /* アニメーション */
  61. .column-holder > .column-panel {
  62.   transition-property: transform, opacity;
  63.   transition-duration: 0.2s;
  64. }
  65. .is-shifted-1 > .column-holder,
  66. .is-shifted-2 > .column-holder {
  67.   transform: none !important;
  68. }
  69. .is-shifted-1 > .column-holder > .column-panel:first-child,
  70. .is-shifted-2 > .column-holder > .column-panel:first-child {
  71.   transform: scale(0.9);
  72.   opacity: 0;
  73. }
  74. .is-shifted-1 > .column-holder > .column-panel:nth-child(2) {
  75.   transform: translateX(-100%);
  76. }
  77. .is-shifted-2 > .column-holder > .column-panel:nth-child(2) {
  78.   transform: translateX(-100%) scale(0.9);
  79.   opacity: 0;
  80. }
  81. .is-shifted-2 > .column-holder > .column-panel:nth-child(3) {
  82.   transform: translateX(-200%);
  83. }
  84.  
  85. /*******************************
  86. * 共通変数
  87. ********************************/
  88. html {
  89.   --md-backcolor: #bdcad3;
  90.   --md-backimg: linear-gradient(-45deg, #d2e2e1 0%, #acb5ca 100%);
  91.   
  92.   --md-accent-1: #1F74E8;
  93.   --md-accent-2: #2389ff;
  94.   
  95.   --md-focused-s: inset 0 0 10px 4px #0076e778 !important;
  96.   --md-option-back: #F9FBFB;
  97.   
  98.   --md-hover-shadow: #a1a1a1f0;
  99.   --md-txthover-shadow: 1px 1px 3px var(--md-hover-shadow);
  100.   
  101.   --md-btn-back1: rgba(255, 255, 255, .5);
  102.   --md-btn-back1-h: rgba(255, 255, 255, .8);
  103.   --md-btn-hover-s: #00000087;
  104.   
  105.   --md-border-c1: #00000029;
  106.   --md-border-c2: #909fac;
  107.   
  108.   --md-c-red: #f41f5b;
  109.   
  110.   --md-fcolor-main: #47484d;
  111.   --md-fcolor-sub1: #7d8a94;
  112.   --md-fcolor-sub2: #97a4ae;
  113.   
  114.   --md-back-header: rgba(238, 238, 238, .5);
  115.   --md-back-header-nt: #D3D8DF;
  116.   --md-shadow-header: rgba(0, 0, 0, .29);
  117.   --md-back1: rgba(238, 238, 238, .7);
  118.   --md-back2: rgba(255, 255, 255, .6);
  119.   --md-back3: #d1d4d7;
  120.   
  121.   --md-pop-back: rgba(255, 255, 255, .5);
  122.   --md-pop-backshadow: #fff;
  123.   --md-shadow-c1: rgba(0, 0, 0, .3);
  124.   
  125.   --md-modal-header: #fff;
  126.   --md-modal-back: #2e2e2e30;
  127.   
  128.   --md-solid: #fff;
  129. }
  130.  
  131. html.dark {
  132.   --md-backcolor: #2c3139;
  133.   --md-backimg: linear-gradient(-45deg, #303030 0%, #101010 100%);
  134.   
  135. /*   --md-accent-1: #1F74E8; */
  136. /*   --md-accent-2: #1f84e3; */
  137.   
  138.   --md-focused-s: inset 0 0 10px 2px #7eb9f2cc !important;
  139.   --md-option-back: #212121;
  140.   
  141.   --md-hover-shadow: #505050;
  142.   --md-txthover-shadow: 1px 1px 3px var(--md-hover-shadow);
  143.   
  144.   --md-btn-back1: rgba(255, 255, 255, .5);
  145.   --md-btn-back1: rgba(0, 0, 0, .5);
  146.   --md-btn-back1-h: rgba(255, 255, 255, .8);
  147.   --md-btn-back1-h: rgba(0, 0, 0, .8);
  148.   --md-btn-hover-s: #000000bf;
  149.   
  150.   --md-border-c1: #ffffff29;
  151.   --md-border-c2: #474d51;
  152.   
  153. /*   --md-c-red: #f41f5b; */
  154.   
  155.   --md-fcolor-main: #cdd0db;
  156.   --md-fcolor-sub1: #7f8893;
  157.   --md-fcolor-sub2: #656c70;
  158.   
  159.   --md-back-header: rgba(45, 45, 50, .5);
  160.   --md-back-header-nt: #1f1f22;
  161.   --md-shadow-header: rgba(0, 0, 0, .8);
  162.   --md-back1: rgba(45, 45, 50, .6);
  163.   --md-back2: rgba(0, 0, 0, .4);
  164.   --md-back3: #2f3033;
  165.   
  166.   --md-pop-back: rgba(23, 23, 25, .6);
  167.   --md-pop-backshadow: #000000de;
  168.   --md-shadow-c1: rgba(0, 0, 0, .8);
  169.   
  170.   --md-modal-header: #1d1f21;
  171.   --md-modal-back: #00000059;
  172.   
  173.   --md-solid: #000;
  174. }
  175.  
  176. /*******************************
  177. * 全体
  178. ********************************/
  179. :root {
  180.   --md-border-r1: 12px;
  181.   --md-border-r2: 8px;
  182.   --md-border-r3: 6px;
  183.   
  184.   --md-item-margin-v: var(--md-margin-v, 6px);
  185.   --md-item-margin-h: var(--md-margin-h, 4px);
  186.   --md-item-width: calc(100% - var(--md-item-margin-h) * 2);
  187. }
  188.  
  189. /* :root {
  190.   --md-margin-v: 8px;
  191.   --md-margin-h: 8px;
  192. } */
  193.  
  194. /* ログイン画面 */
  195. body:before,
  196. .startflow-background,
  197. .startflow-background:before {
  198.   background: none !important;
  199. }
  200. .app-info-title {
  201.   color: var(--md-fcolor-main) !important;
  202. }
  203. .app-info-text p {
  204.   color: var(--md-fcolor-sub1) !important;
  205. }
  206. .app-signin-form {
  207.   margin-top: 60px !important;
  208. }
  209. .startflow-panel,
  210. .startflow-panel-rounded {
  211.   color: var(--md-fcolor-main) !important;
  212.   border: none !important;
  213.   border-radius: var(--md-border-r1) !important;
  214.   background-color: var(--md-back1) !important;
  215.   box-shadow: 1px 1px 6px -2px var(--md-shadow-c1) !important;
  216. }
  217. .form-legend {
  218.   color: var(--md-fcolor-main) !important;
  219.   border-color: var(--md-border-c1) !important;
  220. }
  221. .privacy-info {
  222.   color: var(--md-fcolor-sub1) !important;
  223. }
  224.  
  225. html {
  226.   color: var(--md-fcolor-main) !important;
  227. }
  228. .txt-mute,
  229. .txt-mute a:not(:hover):not(:focus) {
  230.   color: var(--md-fcolor-sub1) !important;
  231. }
  232.  
  233. /* アクセントカラー系 */
  234. .bg-color-twitter-deep-black,
  235. html.dark .bg-color-twitter-deep-black {
  236.   background-color: var(--md-back3);
  237. }
  238. .bg-color-twitter-white,
  239. html.dark .bg-color-twitter-white {
  240.   background-color: var(--md-back2) !important;
  241. }
  242. html .color-twitter-blue {
  243.   color: var(--md-accent-1) !important;
  244. }
  245. html .color-twitter-blue,
  246. html .stroke-twitter-blue {
  247.   stroke: var(--md-accent-1) !important;
  248. }
  249. html .color-twitter-dark-gray,
  250. html .color-twitter-darker-gray {
  251.   color: var(--md-fcolor-sub1) !important;
  252. }
  253.  
  254. /* リンク */
  255. html a[href],
  256. html.dark a[href] {
  257.   color: var(--md-accent-1);
  258. }
  259. a[href]:hover,
  260. a[href]:active,
  261. a[href]:focus,
  262. html.dark a[href]:hover,
  263. html.dark a[href]:active,
  264. html.dark a[href]:focus {
  265.   color: var(--md-accent-2);
  266.   text-shadow: var(--md-txthover-shadow);
  267. }
  268. a.account-link {
  269.   color: var(--md-fcolor-main) !important;
  270. }
  271. .column-header-link {
  272.   color: var(--md-accent-1) !important;
  273. }
  274. .column-header-link:active,
  275. .column-header-link:focus,
  276. .column-header-link:hover {
  277.   color: var(--md-accent-2) !important;
  278. }
  279.  
  280. /* テキストボックス */
  281. .column-title-edit-box,
  282. .detail-view-inline-text,
  283. input,
  284. select,
  285. textarea {
  286.   background-color: var(--md-back2) !important;
  287.   border: 1px solid #0000 !important;
  288.   transition: border 0.1s;
  289.   color: var(--md-fcolor-main) !important;
  290. }
  291. .focus,
  292. input:focus,
  293. select:focus,
  294. .mdl textarea:focus {
  295.   box-shadow: none !important;
  296.   border: 1px solid var(--md-accent-2) !important;
  297. }
  298.  
  299. /* セレクトボックス */
  300. select > option {
  301.   color: var(--md-fcolor-main) !important;
  302.   background-color: var(--md-option-back) !important;
  303. }
  304.  
  305. /* iframe */
  306. iframe {
  307.   border-radius: var(--md-border-r2);
  308.   background-color: var(--md-back2);
  309.   padding: 4px !important;
  310.   box-sizing: border-box;
  311.   box-shadow: 1px 1px 6px -2px var(--md-shadow-c1) !important;
  312. }
  313.  
  314. /* 背景 */
  315. .app-content,
  316. .app-columns-container,
  317. .column,
  318. .column-panel,
  319. .column-background-fill,
  320. .scroll-conversation,
  321. .tweet-detail-wrapper{
  322.   background-color: #0000 !important;
  323. }
  324. body,
  325. #open-modal .column-scroller {
  326.   background-color: var(--md-backcolor) !important;
  327.   background-image: var(--md-backimg);
  328.   background-size: cover;
  329.   background-position: center, center;
  330.   background-repeat: no-repeat;
  331. }
  332.  
  333. /* ローディング */
  334. .login-container .js-signin-ui:not(.app-signin-form) img[alt='Loading…'] {
  335.   display: none;
  336. }
  337. .med-embeditem {
  338.   background: none !important;
  339. }
  340. .med-embeditem::before,
  341. .med-embeditem::after {
  342.   content: '' !important;
  343.   position: absolute !important;
  344.   top: 50% !important;
  345.   left: 50% !important;
  346.   transform: translate(-50%, -50%) !important;
  347. }
  348. .med-embeditem.is-loaded::before,
  349. .med-embeditem.is-loaded::after {
  350.   display: none !important;
  351. }
  352. .login-container .js-signin-ui:not(.app-signin-form),
  353. .login-container .js-signin-ui:not(.app-signin-form)::after,
  354. .med-embeditem::before,
  355. .med-embeditem::after,
  356. .spinner-large,
  357. .spinner-large::after,
  358. .spinner-small,
  359. .spinner-small::after {
  360.   background-image: none !important;
  361.   border-radius: 50%;
  362.   padding: 0 !important;
  363.   vertical-align: unset !important;
  364.   box-sizing: border-box;
  365. }
  366. .login-container .js-signin-ui:not(.app-signin-form),
  367. .login-container .js-signin-ui:not(.app-signin-form)::after,
  368. .med-embeditem::before,
  369. .med-embeditem::after {
  370.   width: 40px !important;
  371.   height: 40px !important;
  372. }
  373. .spinner-large,
  374. .spinner-large::after {
  375.   width: 15px !important;
  376.   height: 15px !important;
  377. }
  378. .spinner-small,
  379. .spinner-small::after {
  380.   width: 10px !important;
  381.   height: 10px !important;
  382. }
  383. .login-container .js-signin-ui:not(.app-signin-form),
  384. .med-embeditem::after,
  385. .spinner-large,
  386. .spinner-small {
  387.   margin: 0 auto;
  388.   position: relative;
  389.   text-indent: -9999em;
  390.   border-top: 5px solid rgba(255, 255, 255, 0.2);
  391.   border-right: 5px solid rgba(255, 255, 255, 0.2);
  392.   border-bottom: 5px solid rgba(255, 255, 255, 0.2);
  393.   border-left: 5px solid #fff;
  394.   transform: translateZ(0);
  395.   animation: loading1 1.1s infinite linear;
  396. }
  397. .med-embeditem::after {
  398.   animation: loading2 1.1s infinite linear;
  399. }
  400. .spinner-large {
  401.   border-width: 4px;
  402. }
  403. .spinner-small {
  404.   border-width: 3px;
  405. }
  406. @keyframes loading1 {
  407.   from {
  408.     transform: rotate(0deg);
  409.   }
  410.   to {
  411.     transform: rotate(360deg);
  412.   }
  413. }
  414. @keyframes loading2 {
  415.   from {
  416.     transform: translate(-50%, -50%) rotate(0deg);
  417.   }
  418.   to {
  419.     transform: translate(-50%, -50%) rotate(360deg);
  420.   }
  421. }
  422.  
  423. /*******************************
  424. * ボタン
  425. ********************************/
  426. /* 基礎 */
  427. button,
  428. button:focus,
  429. button:active,
  430. button:visited {
  431.   background-color: var(--md-btn-back1) !important;
  432.   border: 1px solid #0000 !important;
  433.   color: var(--md-fcolor-main) !important;
  434.   transition-property: background-color, box-shadow !important;
  435.   transition-duration: 0.1s !important;
  436. }
  437. button:focus,
  438. button:active {
  439.   box-shadow: none !important;
  440. }
  441. button:focus,
  442. button:active,
  443. button:hover {
  444.   background-color: var(--md-btn-back1-h) !important;
  445.   box-shadow: 1px 1px 4px -1px var(--md-btn-hover-s);
  446. }
  447.  
  448. /* 背景色あり */
  449. .Button--primary,
  450. .Button--primary:hover {
  451.   background-color: var(--md-accent-1) !important;
  452.   border: 1px solid var(--md-accent-1) !important;
  453.   color: #fff !important;
  454.   box-shadow: none !important;
  455. }
  456. .Button--primary:hover:not(.is-disabled) {
  457.   background-color: var(--md-accent-2) !important;
  458.   border: 1px solid var(--md-accent-2) !important;
  459.   box-shadow: 1px 1px 4px -1px var(--md-btn-hover-s) !important;
  460. }
  461. .attach-compose-buttons .tweet-button:hover:not(.is-disabled) {
  462.   border: none !important;
  463.   box-shadow: none !important;
  464. }
  465. .Button--primary:focus:not(.is-disabled),
  466. .Button--primary:active:not(.is-disabled) {
  467.   background-color: var(--md-accent-1) !important;
  468.   color: #fff !important;
  469.   box-shadow: none !important;
  470. }
  471.  
  472. /* 背景色もボーダーもないやつ */
  473. .Button--link,
  474. .Button--link:focus,
  475. .Button--link:active,
  476. .Button--link:hover {
  477.   border-color: #0000 !important;
  478.   background-color: #0000 !important;
  479. }
  480. /* Unfollow */
  481. .s-following .follow-btn:hover .unfollow-text {
  482.   color: #fff !important;
  483.   background-color: var(--md-c-red) !important;
  484.   border: 1px solid var(--md-c-red) !important;
  485. }
  486. .follow-btn .icon,
  487. .follow-btn .Icon {
  488.   color: var(--md-fcolor-main) !important;
  489. }
  490. /* カラム設定の下のボタン */
  491. button.btn-options-tray:focus,
  492. button.btn-options-tray:hover,
  493. input[type=button].btn-options-tray:focus,
  494. input[type=button].btn-options-tray:hover,
  495. html.dark button.btn-options-tray:focus,
  496. html.dark button.btn-options-tray:hover,
  497. html.dark input[type=button].btn-options-tray:focus,
  498. html.dark input[type=button].btn-options-tray:hover{
  499.   color: var(--md-accent-2) !important;
  500. }
  501.  
  502. /* 怪レい日本语ボタンがあるときの表示をなおす */
  503. .compose .cf > .pull-right,
  504. .inline-reply .cf > .pull-right {
  505.   display: flex;
  506.   align-items: center;
  507. }
  508. .compose .cf > .pull-right > :not(:first-child),
  509. .inline-reply .cf > .pull-right > :not(:first-child) {
  510.   margin-left: 5px;
  511. }
  512. button.cjp + .js-send-button-container {
  513.   padding-left: 0 !important;
  514. }
  515.  
  516. /*******************************
  517. * サイドバー
  518. ********************************/
  519. .app-header {
  520.   background-color: var(--md-back-header-nt) !important;
  521.   box-shadow: 2px 0 10px -4px var(--md-shadow-header);
  522. }
  523. .column-nav-item,
  524. .app-navigator {
  525.   background-color: #0000 !important;
  526. }
  527. .column-nav-link,
  528. .column-nav-link .column-heading,
  529. .app-nav-link-text,
  530. .app-nav-tab-text {
  531.   color: var(--md-fcolor-main) !important;
  532. }
  533. .column-nav-link.is-selected,
  534. .column-nav-link:hover,
  535. .column-nav-link.is-selected .column-heading,
  536. .column-nav-link:hover .column-heading {
  537.   color: var(--md-fcolor-main) !important;
  538. }
  539. .column-nav-updates {
  540.   color: var(--md-accent-2) !important;
  541. }
  542. .app-nav-link,
  543. .app-nav-tab {
  544.   color: var(--md-accent-1) !important;
  545. }
  546. .app-nav-link.is-selected,
  547. .app-nav-link:hover,
  548. .app-nav-tab:hover {
  549.   color: var(--md-accent-2) !important;
  550. }
  551. .app-nav-tab.is-selected {
  552.   background-color: #0000 !important;
  553. }
  554. .nav-user-info .fullname {
  555.   color: var(--md-fcolor-main) !important;
  556. }
  557. .nav-user-info .username {
  558.   color: var(--md-fcolor-sub1) !important;
  559. }
  560. .app-title {
  561.   background-color: var(--md-back-header-nt) !important;
  562. }
  563. .app-title img[alt='TweetDeck'],
  564. .app-title .tweetdeck-logo {
  565.   filter: drop-shadow(1px 1px 2px var(--md-btn-hover-s));
  566. }
  567.  
  568. /* ホバー時に浮いてくるあれ */
  569. .column-nav-flyout {
  570.   background-color: var(--md-pop-back) !important;
  571.   backdrop-filter: blur(10px);
  572.   -webkit-backdrop-filter: blur(10px);
  573.   filter: drop-shadow(0 0 0 var(--md-pop-backshadow));
  574.   box-shadow: 1px 1px 6px -2px var(--md-shadow-c1) !important;
  575.   color: var(--md-fcolor-main) !important;
  576.   border-radius: var(--md-border-r3) !important;
  577. }
  578. .column-nav-flyout > * {
  579.   color: var(--md-fcolor-main) !important;
  580. }
  581.  
  582. /*******************************
  583. * ツイート画面
  584. ********************************/
  585. .compose,
  586. .old-composer-footer {
  587.   background-color: var(--md-back1) !important;
  588.   color: var(--md-fcolor-main) !important;
  589. }
  590. .compose-header {
  591.   border-bottom: 1px solid var(--md-border-c1) !important;
  592. }
  593. .compose-account {
  594.   color: var(--md-fcolor-main) !important;
  595. }
  596. .is-selected.compose-account:focus .compose-account-img,
  597. .compose-account:focus .compose-account-img {
  598.   box-shadow: none !important;
  599. }
  600. html .color-twitter-white {
  601.   color: var(--md-fcolor-sub1) !important;
  602. }
  603. .compose-text-title {
  604.   color: var(--md-fcolor-main) !important;
  605. }
  606. .compose-message-recipient {
  607.   border-color: var(--md-border-c2) !important;
  608. }
  609. .compose-message-recipient-input-container.is-focused,
  610. html.dark .compose-message-recipient-input-container.is-focused {
  611.   box-shadow: none;
  612. }
  613. .compose-remember-state {
  614.   color: var(--md-fcolor-main) !important;
  615. }
  616. .compose .compose-text-container {
  617.   margin-top: 4px;
  618. }
  619. .replyto-caret {
  620.   border-bottom-color: var(--md-back2) !important;
  621. }
  622. .compose-reply-tweet {
  623.   background-color: var(--md-back1) !important;
  624.   color: var(--md-fcolor-sub1) !important;
  625. }
  626. .compose-reply-tweet .fullname {
  627.   color: var(--md-fcolor-main) !important;
  628. }
  629. div.js-quote-tweet-holder.margin-t---4 {
  630.   margin-top: 0px !important;
  631.   border-radius: 0 0 4px 4px;
  632. }
  633. .js-quote-tweet-holder > .quoted-tweet.margin-b--8 {
  634.   margin-bottom: 0 !important;
  635. }
  636. div.compose-media-bar-holder.margin-t---4,
  637. div.compose-media-grid-holder.margin-t---4 {
  638.   margin-top: 0px !important;
  639. }
  640. div.compose-media-bar-holder.margin-t---4 {
  641.   background-color: var(--md-back2) !important;
  642. }
  643. .compose-account-selected {
  644.   background-color: #12c67e !important;
  645.   box-shadow: 1px 1px 6px -2px var(--md-shadow-c1) !important;
  646. }
  647. .compose-account-selected i {
  648.   color: #fff !important;
  649. }
  650.  
  651. /* アカウントの候補 */
  652. :not(.js-popover-content) > .js-typeahead-dropdown,
  653. .lst-modal {
  654.   background-color: var(--md-pop-back) !important;
  655.   backdrop-filter: blur(10px);
  656.   -webkit-backdrop-filter: blur(10px);
  657.   filter: drop-shadow(0 0 0 var(--md-pop-backshadow));
  658.   border: none !important;
  659.   box-shadow: 1px 1px 6px -2px var(--md-shadow-c1) !important;
  660.   border-radius: var(--md-border-r2);
  661. }
  662. .lst li {
  663.   border-color: var(--md-border-c1) !important;
  664. }
  665. .lst .s-selected {
  666.   background-color: var(--md-accent-1) !important;
  667. }
  668. .typeahead .fullname {
  669.   color: var(--md-fcolor-main) !important;
  670. }
  671. .typeahead .username {
  672.   color: var(--md-fcolor-sub1) !important;
  673. }
  674. .lst .s-selected .fullname,
  675. .lst .s-selected .username {
  676.   color: #fff !important;
  677. }
  678. .list-item-last {
  679.   border-bottom-left-radius: var(--md-border-r2) !important;
  680.   border-bottom-right-radius: var(--md-border-r2) !important;
  681. }
  682.  
  683. /*******************************
  684. * ドロワー（アカウント管理のとことか）
  685. ********************************/
  686. /* .drawer {
  687.   overflow: hidden;
  688. } */
  689. .drawer-header,
  690. .account-settings-bt,
  691. .account-settings-bb {
  692.   border-color: var(--md-border-c1) !important;
  693. }
  694. .account-row-separator-b:after {
  695.   content: none !important;
  696. }
  697. .js-accounts-column-holder {
  698.   overflow: hidden !important;
  699. }
  700. .column-panel.accounts-drawer,
  701. html.dark .column-panel.accounts-drawer {
  702.   background-color: #0000 !important;
  703. }
  704. .column-panel .account-settings-row,
  705. .column-panel .join-team,
  706. .column-panel .manage-team-summary {
  707.   background-color: var(--md-pop-back) !important;
  708.   backdrop-filter: blur(10px);
  709.   -webkit-backdrop-filter: blur(10px);
  710.   filter: drop-shadow(0 0 0 var(--md-pop-backshadow));
  711.   border: none !important;
  712. }
  713. .avatar-border--2 {
  714.   background-color: var(--md-solid) !important;
  715.   border-color: var(--md-solid) !important;
  716. }
  717. .dark .avatar-border--2 {
  718.   background-color: var(--md-solid) !important;
  719.   border-color: var(--md-solid) !important;
  720. }
  721. .manage-team-summary {
  722.   border-radius: var(--md-border-r2) !important;
  723.   background-color: var(--md-back2) !important;
  724.   padding: 4px !important;
  725.   box-shadow: 1px 1px 6px -2px var(--md-shadow-c1) !important;
  726. }
  727. .contributor-manager .link-complex {
  728.   border: none !important;
  729. }
  730. .color-twitter-gray {
  731.   color: var(--md-fcolor-sub1) !important;
  732. }
  733.  
  734. /*******************************
  735. * カラム
  736. ********************************/
  737. :root {
  738.   --md-col-head-h: calc(50px + var(--md-item-margin-v));
  739. }
  740.  
  741. /* カラム */
  742. .column {
  743.   margin-right: 0 !important;
  744. }
  745.  
  746. /* 新着ありの光るやつ */
  747. .more-tweets-btn-container {
  748.   position: fixed !important;
  749.   top: var(--md-item-margin-v) !important;
  750.   z-index: 2 !important;
  751.   margin: 0 var(--md-item-margin-h) !important;
  752.   border-radius: var(--md-border-r1) !important;
  753.   overflow: hidden;
  754. }
  755. .more-tweets-btn-container > div.more-tweets-glow {
  756.   background-color: var(--md-accent-1) !important;
  757.   opacity: 0.45;
  758.   height: calc(var(--md-col-head-h) - var(--md-item-margin-v)) !important;
  759.   margin: 0 !important;
  760. }
  761.  
  762. .column-drag-handle {
  763.   filter: drop-shadow(0 0 0 var(--md-btn-hover-s));
  764. }
  765. .column-number {
  766.   color: var(--md-fcolor-sub1) !important;
  767. }
  768.  
  769. .list-placeholder {
  770.   color: var(--md-fcolor-sub1) !important;
  771.   text-shadow: none !important;
  772. }
  773.  
  774. /* ドラッグする部分 */
  775. .column-drag-handle {
  776.   height: 25px !important;
  777.   margin-top: 18px !important;
  778.   margin-left: 7px !important;
  779. }
  780. /* カラム番号 */
  781. .column-number {
  782.   top: 4px !important;
  783.   left: 6px !important;
  784. }
  785.  
  786. /* カラムアイコン */
  787. .column-type-icon {
  788.   color: var(--md-fcolor-main) !important;
  789. }
  790. .is-new .column-type-icon {
  791.   color: var(--md-accent-1) !important;
  792. }
  793.  
  794. /* カラムに移動したときのあれ(PC) */
  795. .column {
  796.   box-shadow: none !important;
  797.   border-radius: 0 !important;
  798.   transition-property: box-shadow, border-radius;
  799.   transition-duration: 0.4s;
  800. }
  801. .column.is-focused {
  802.   box-shadow: var(--md-focused-s) !important;
  803.   border-radius: var(--md-border-r1) !important;
  804. }
  805.  
  806. /* トレンド */
  807. .column-panel > .bg-color-twitter-midnight-dark-gray,
  808. .column-panel > .bg-color-twitter-white {
  809.   background-color: #0000 !important;
  810. }
  811. [data-testid="columnContent"] {
  812.   width: var(--md-item-width);
  813.   margin: var(--md-item-margin-v) auto 4px !important;
  814.   padding: 0 !important;
  815.   border-radius: var(--md-border-r1);
  816.   background-color: var(--md-back1) !important;
  817.   box-shadow: 1px 1px 6px -2px var(--md-shadow-c1) !important;
  818. }
  819. .border-divider {
  820.   border-color: var(--md-border-c1) !important;
  821. }
  822. .dark-only--color-twitter-gray {
  823.   color: var(--md-fcolor-sub1) !important;
  824. }
  825.  
  826. /* ヘッダー */
  827. .column-header,
  828. .column-header-temp {
  829.   z-index: 3;
  830.   width: var(--md-item-width) !important;
  831.   margin: var(--md-item-margin-v) auto 0;
  832.   border-bottom: none !important;
  833.   background-color: var(--md-back-header) !important;
  834.   backdrop-filter: blur(5px);
  835.   -webkit-backdrop-filter: blur(5px);
  836.   box-shadow: 0 2px 10px -4px var(--md-shadow-header);
  837.   border-radius: var(--md-border-r1);
  838.   color: var(--md-fcolor-main) !important;
  839. }
  840. .column-title-container {
  841.   color: var(--md-fcolor-main) !important;
  842. }
  843. .column-title-back {
  844.   color: var(--md-fcolor-main) !important;
  845. }
  846.  
  847. /* スクロールする部分 */
  848. .column-scroller {
  849.   padding-top: 200px;
  850.   margin-top: -200px;
  851.   z-index: 0 !important;
  852. }
  853. .column-content > :not(.pin-all) {
  854.   position: relative;
  855.   z-index: 1;
  856. }
  857.  
  858. /* カラムの説明とかいろいろ */
  859. .with-column-divider-bottom {
  860.   border: none !important;
  861.   box-sizing: content-box;
  862. }
  863. .with-column-divider-bottom.column-message,
  864. .with-column-divider-bottom:not(:empty):not(.column-message) {
  865.   width: var(--md-item-width);
  866.   margin: var(--md-item-margin-v) auto 0 !important;
  867.   border-radius: var(--md-border-r2);
  868.   background-color: var(--md-back-header) !important;
  869.   backdrop-filter: blur(5px);
  870.   -webkit-backdrop-filter: blur(5px);
  871.   box-shadow: 1px 1px 6px -2px var(--md-shadow-c1) !important;
  872. /*   overflow: hidden; */
  873. }
  874. .js-column-options > .with-column-divider-bottom:not(:empty):not(.column-message) {
  875.   background-color: var(--md-back-header-nt) !important;
  876. }
  877. .with-column-divider-bottom.column-message {
  878.   width: calc(var(--md-item-width) - 23px);
  879. }
  880. .js-column-message {
  881.   overflow: visible !important;
  882.   z-index: 2 !important;
  883. }
  884.  
  885. /* カラムのオプションとか */
  886. .column-options,
  887. .with-column-divider-bottom {
  888.   border: none !important;
  889.   background-color: #0000 !important;
  890. }
  891. .facet-type {
  892.   border-color: var(--md-border-c1) !important;
  893. }
  894. .accordion-header {
  895.   color: var(--md-fcolor-sub1) !important;
  896. }
  897. .accordion > .js-accordion-item:first-child {
  898.   border-radius: var(--md-border-r1) var(--md-border-r1) 0 0;
  899. }
  900. .accordion .is-active {
  901.   color: var(--md-fcolor-main) !important;
  902. }
  903. .facet-type.is-active {
  904.   background-color: var(--md-back1) !important;
  905. }
  906. .facet-subtitle {
  907.   color: var(--md-accent-1) !important;
  908. }
  909. .column-options .button-tray,
  910. button.btn-options-tray,
  911. input[type=button].btn-options-tray,
  912. html.dark button.btn-options-tray,
  913. html.dark input[type=button].btn-options-tray {
  914.   background-color: #0000 !important;
  915.   color: var(--md-fcolor-sub1) !important;
  916. }
  917. .location-form .Icon--close,
  918. .location-form .icon-close {
  919.   background-color: #0000 !important;
  920. }
  921.  
  922. /* ツイートとか諸々 */
  923. .stream-item {
  924.   width: var(--md-item-width);
  925.   margin: var(--md-item-margin-v) auto;
  926.   border-bottom: none !important;
  927.   border-radius: var(--md-border-r1);
  928.   background-color: var(--md-back1) !important;
  929.   box-shadow: 1px 1px 6px -2px var(--md-shadow-c1) !important;
  930.   box-sizing: border-box;
  931. }
  932. .account-link {
  933.   color: var(--md-fcolor-main) !important;
  934. }
  935.  
  936. /* ツイート内のボーダー */
  937. .in-tweet-divider:before {
  938.   background-color: var(--md-border-c1);
  939.   left: -46px;
  940. }
  941.  
  942. /* Show more */
  943. .gap-chirp {
  944.   top: 0 !important;
  945.   width: 90% !important;
  946.   color: var(--md-fcolor-sub2) !important;
  947. }
  948. .gap-chirp::before,
  949. .gap-chirp::after {
  950.   display: none !important;
  951. }
  952.  
  953. /* 画像 */
  954. .media-caret {
  955.   display: none;
  956. }
  957. .media-size-large {
  958.   border-radius: 0 0 var(--md-border-r1) var(--md-border-r1);
  959. }
  960.  
  961. /* 画像、投票とかのあれ & 引用ツイート */
  962. .media-badge,
  963. .quoted-tweet {
  964.   border-color: var(--md-border-c1) !important;
  965. }
  966. .media-badge:hover {
  967.   background-color: var(--md-back2) !important;
  968. }
  969. .quoted-tweet {
  970.   color: var(--md-fcolor-sub2) !important;
  971. }
  972.  
  973. /* 返信先 */
  974. .other-replies {
  975.   color: var(--md-fcolor-sub2) !important;
  976. }
  977.  
  978. /* ツイートアクション */
  979. .tweet-actions {
  980.   display: flex;
  981.   flex-direction: row;
  982.   justify-content: space-between;
  983. }
  984. .tweet-actions > li {
  985.   margin: 0 !important;
  986. }
  987. .chirp-container .stream-item:not(:hover):not(.is-selected-tweet) .dm-action,
  988. .chirp-container .stream-item:not(:hover):not(.is-selected-tweet) .tweet-action,
  989. .chirp-container .stream-item:not(:hover):not(.is-selected-tweet) .tweet-detail-action {
  990.   color: var(--md-fcolor-sub2) !important;
  991. }
  992. .dm-action,
  993. .tweet-action,
  994. .tweet-detail-action {
  995.   color: var(--md-fcolor-sub1) !important;
  996. }
  997.  
  998. /* ツイート詳細 */
  999. .js-detail-content {
  1000.   padding-bottom: 0 !important;
  1001. }
  1002. .tweet-detail-wrapper {
  1003.   margin-top: 0 !important;
  1004. }
  1005. .detail-view-inline {
  1006.   border-left: none !important;
  1007.   border-right: none !important;
  1008.   border-bottom: none !important;
  1009. }
  1010. .tweet-stats,
  1011. .tweet-detail-actions,
  1012. .detail-view-inline {
  1013.   border-color: var(--md-border-c1) !important;
  1014. }
  1015. .tweet-stat {
  1016.   color: var(--md-fcolor-sub1) !important;
  1017. }
  1018. .tweet-stat.is-actionable:hover {
  1019.   color: var(--md-fcolor-main) !important;
  1020. }
  1021. .stat-word {
  1022.   color: var(--md-fcolor-sub2) !important;
  1023. }
  1024. .tweet-stat.is-actionable:hover .stat-word {
  1025.   color: var(--md-fcolor-sub1) !important;
  1026. }
  1027.  
  1028. /* いいね、リツイートした人のとこ */
  1029. .social-proof-for-tweet-title {
  1030.   width: var(--md-item-width);
  1031.   margin: 0 auto;
  1032.   background-color: #0000 !important;
  1033.   border: none !important;
  1034.   color: var(--md-fcolor-sub1) !important;
  1035. }
  1036.  
  1037. /* 返信を表示 */
  1038. .conversation-more {
  1039.   color: var(--md-accent-1) !important;
  1040. }
  1041. /* スレッドの縦線 */
  1042. .thread {
  1043.   background-color: var(--md-border-c2) !important;
  1044.   height: calc(100% - 44px + var(--md-item-margin-v)) !important;
  1045. }
  1046. .dot-thread {
  1047.   height: 3px !important;
  1048. }
  1049. .dot-thread,
  1050. .cursor-top-thread,
  1051. .show-more-thread {
  1052.   margin-left: var(--md-item-margin-h) !important;
  1053. }
  1054. .cursor-top-thread {
  1055.   margin-top: calc(-11px - var(--md-item-margin-v)) !important;
  1056.   height: calc(17px + var(--md-item-margin-v)) !important;
  1057. }
  1058. .dot-thread-top {
  1059.   margin-top: calc(-16px - var(--md-item-margin-v)) !important;
  1060. }
  1061. .dot-thread-top.middle {
  1062.   margin-top: calc(-21px - var(--md-item-margin-v)) !important;
  1063. }
  1064. .dot-thread-top.top {
  1065.   margin-top: calc(-26px - var(--md-item-margin-v)) !important;
  1066. }
  1067. .show-more-thread {
  1068.   height: 13px !important;
  1069. }
  1070. .dot-thread-more {
  1071.   margin-top: 13px !important;
  1072. }
  1073. .dot-thread-more.middle {
  1074.   margin-top: 18px !important;
  1075. }
  1076. .dot-thread-more.top {
  1077.   margin-top: 23px !important;
  1078. }
  1079.  
  1080. /* 返信欄 */
  1081. .reply-triangle {
  1082.   display: none !important;
  1083. }
  1084. .inline-reply {
  1085.   border-radius: 0 0 var(--md-border-r1) var(--md-border-r1);
  1086.   background-color: var(--md-back2) !important;
  1087.   background-color: var(--md-back1) !important;
  1088.   background-color: var(--md-back3) !important;
  1089. }
  1090. .inline-reply i.color-twitter-white,
  1091. .inline-reply i.color-twitter-midnight-dark-gray {
  1092.   color: var(--md-fcolor-sub1) !important;
  1093. }
  1094. .compose-text-container {
  1095.   background-color: var(--md-back2) !important;
  1096. }
  1097. .compose-text-container .compose-text.bg-color-twitter-white {
  1098.   background-color: #0000 !important;
  1099. }
  1100.  
  1101. /* DM */
  1102. html div.edit-conversation-name,
  1103. html.dark div.edit-conversation-name{
  1104.   top: calc((var(--md-item-margin-v) + var(--md-col-head-h)) * -1);
  1105.   background-color: var(--md-back1) !important;
  1106.   backdrop-filter: blur(10px);
  1107.   -webkit-backdrop-filter: blur(10px);
  1108.   filter: drop-shadow(0 0 0 var(--md-pop-backshadow));
  1109.   box-shadow: 1px 1px 6px -2px var(--md-shadow-c1) !important;
  1110.   border-radius: var(--md-border-r2);
  1111.   border: none !important;
  1112. }
  1113. .add-participant {
  1114.   background-color: #0000 !important;
  1115.   width: var(--md-item-width) !important;
  1116.   margin: 0 auto;
  1117. }
  1118. .add-participant + .column-content > .column-scroller {
  1119.   padding-top: unset !important;
  1120.   margin-top: unset !important;
  1121.   z-index: unset !important;
  1122. }
  1123. .rpl {
  1124.   width: var(--md-item-width);
  1125.   margin: 0 auto;
  1126.   padding: 10px 5px;
  1127.   box-sizing: border-box;
  1128. }
  1129.  
  1130. /* 通知 */
  1131. /* .activity-header.has-source-avatar > .item-img {
  1132.   width: 20px !important;
  1133. }
  1134. .activity-header.has-source-avatar + .tweet {
  1135.   padding-left: 30px !important;
  1136. } */
  1137.  
  1138. /*******************************
  1139. * ドロップダウンメニュー
  1140. ********************************/
  1141. .caret {
  1142.   display: none;
  1143. }
  1144. .dropdown-menu:not(.js-typeahead-dropdown) {
  1145.   background-color: var(--md-pop-back) !important;
  1146.   backdrop-filter: blur(10px);
  1147.   -webkit-backdrop-filter: blur(10px);
  1148.   filter: drop-shadow(0 0 0 var(--md-pop-backshadow));
  1149.   padding: 6px 0 !important;
  1150.   box-shadow: 1px 1px 6px -2px var(--md-shadow-c1) !important;
  1151.   border-radius: var(--md-border-r2);
  1152. }
  1153. .dropdown-menu li {
  1154.   background-color: #0000 !important;
  1155. }
  1156. .dropdown-menu li > a {
  1157.   margin: 0 6px;
  1158.   border-radius: var(--md-border-r3);
  1159.   background-color: #0000;
  1160.   transition-property: background-color, color;
  1161.   transition-duration:  0.1s;
  1162. }
  1163. .dropdown-menu a:not(:hover):not(:focus) {
  1164.   color: var(--md-fcolor-main) !important;
  1165. }
  1166. .dropdown-menu .is-selected > a,
  1167. .dropdown-menu .js-typeahead-item.is-selected {
  1168.   background-color: var(--md-accent-1) !important;
  1169.   color: #fff !important;
  1170. }
  1171. .dropdown-menu .is-selected > a[data-action="destroy"],
  1172. .dropdown-menu .is-selected > a[data-action="flag-media"] {
  1173.   background-color: var(--md-c-red);
  1174. }
  1175. .non-selectable-item {
  1176.   color: var(--md-fcolor-sub2) !important;
  1177. }
  1178. .drp-h-divider {
  1179.   margin: 2px 15px !important;
  1180.   border-color: var(--md-border-c1) !important;
  1181. }
  1182. .dropdown-menu .release-notes-item,
  1183. .dropdown-menu .typeahead-item,
  1184. .dropdown-menu [data-action] {
  1185.   padding: 5px 15px;
  1186. }
  1187.  
  1188. /*******************************
  1189. * モーダル
  1190. ********************************/
  1191. .js-modals-container > .overlay,
  1192. .ovl {
  1193.   background-color: var(--md-modal-back) !important;
  1194. }
  1195. .mdl {
  1196.   background-color: var(--md-pop-back) !important;
  1197.   backdrop-filter: blur(10px);
  1198.   -webkit-backdrop-filter: blur(10px);
  1199.   filter: drop-shadow(0 0 0 var(--md-pop-backshadow));
  1200.   box-shadow: 1px 1px 6px -2px var(--md-shadow-c1) !important;
  1201.   border-radius: var(--md-border-r1) !important;
  1202. }
  1203. header.mdl-header,
  1204. .mdl-header.mdl-header-divider {
  1205.   background-color: var(--md-modal-header);
  1206.   border-radius: var(--md-border-r1) var(--md-border-r1) 0 0;
  1207.   color: var(--md-fcolor-main) !important;
  1208.   border: none !important;
  1209. }
  1210. .mdl-header-divider {
  1211.   border-color: var(--md-border-c1) !important;
  1212. }
  1213. header.mdl-header.padding-a--12,
  1214. .mdl-header.mdl-header-divider.padding-a--12 {
  1215.   padding: 8px 12px !important;
  1216. }
  1217. .mdl-header-title {
  1218.   font-weight: 500 !important;
  1219. }
  1220. .mdl-dismiss {
  1221.   top: 5px !important;
  1222.   color: var(--md-fcolor-sub1) !important;
  1223. }
  1224. .mdl-accent {
  1225.   background-color: #0000 !important;
  1226. }
  1227. .mdl-content,
  1228. .mdl-col-settings {
  1229.   border-color: var(--md-border-c1) !important;
  1230. }
  1231. .divider-bar {
  1232.   background-color: var(--md-border-c1) !important;
  1233. }
  1234. .mdl-placeholder {
  1235.   color: var(--md-fcolor-sub1) !important;
  1236.   text-shadow: none !important;
  1237. }
  1238.  
  1239. /* プロフィール */
  1240. .prf-meta {
  1241.   border-color: var(--md-border-c1) !important;
  1242. }
  1243. .prf-stats a {
  1244.   color: var(--md-fcolor-main) !important;
  1245. }
  1246. .prf-stats a strong {
  1247.   color: var(--md-fcolor-sub1) !important;
  1248. }
  1249. .prf .lst-profile i,
  1250. .prf .lst-profile span {
  1251.   color: var(--md-fcolor-sub1) !important;
  1252. }
  1253. .prf .lst-profile a:hover i,
  1254. .prf .lst-profile a:hover span {
  1255.   color: var(--md-fcolor-main) !important;
  1256. }
  1257.  
  1258. /* 設定 */
  1259. .frm {
  1260.   color: var(--md-fcolor-main) !important;
  1261. }
  1262. .list-account,
  1263. .list-filter,
  1264. .list-link,
  1265. .list-listaccount,
  1266. .list-listmember,
  1267. .list-subtitle,
  1268. .list-twitter-list {
  1269.   color: var(--md-fcolor-main) !important;
  1270. }
  1271. .lst-group .selected .fullname,
  1272. .lst-group .selected .inner strong,
  1273. .lst-group .selected .list-account,
  1274. .lst-group .selected .list-link,
  1275. .lst-group .selected .list-listmember,
  1276. .lst-group .selected .list-subtitle,
  1277. .lst-group .selected .list-twitter-list,
  1278. .lst-group .selected .txt-ellipsis {
  1279.   color: #fff !important;
  1280. }
  1281. .mdl-links,
  1282. .mdl-links a {
  1283.   color: var(--md-fcolor-sub2) !important;
  1284. }
  1285.  
  1286. /* カラム追加 */
  1287. .lst-launcher .top-row {
  1288.   border-color: var(--md-border-c1) !important;
  1289. }
  1290. .lst-launcher a .color-twitter-blue,
  1291. .lst-launcher a span,
  1292. .lst-launcher .is-disabled a i,
  1293. .lst-launcher .is-disabled a:hover i,
  1294. .lst-launcher .is-disabled a:active i,
  1295. .lst-launcher .is-disabled a:focus i,
  1296. html.dark .lst-launcher a span,
  1297. html.dark .lst-launcher .is-disabled a i,
  1298. html.dark .lst-launcher .is-disabled a:hover i,
  1299. html.dark .lst-launcher .is-disabled a:active i,
  1300. html.dark .lst-launcher .is-disabled a:focus i {
  1301.   color: var(--md-fcolor-sub1) !important;
  1302.   stroke: var(--md-fcolor-sub1) !important;
  1303. }
  1304. .lst-launcher a:hover i,
  1305. .lst-launcher a:hover span {
  1306.   color: var(--md-accent-2) !important;
  1307. }
  1308. .lst-launcher .is-disabled {
  1309.   display: none;
  1310. }
  1311. .lst-launcher .is-disabled a {
  1312.   transform: scale(1) !important;
  1313. }
  1314.  
  1315. /* リスト編集 */
  1316. .list-listmember .bio {
  1317.   color: var(--md-fcolor-sub2) !important;
  1318. }
  1319. /* スマホ用 */
  1320. #lists-modal .mdl {
  1321.   height: 100% !important;
  1322. }
  1323. .modal-content .control-group {
  1324.   display: flex;
  1325.   flex-direction: column;
  1326. }
  1327. .modal-content .control-group .controls {
  1328.   margin: 0 !important;
  1329. }
  1330. .modal-content .control-group > *,
  1331. .modal-content .control-group .controls > *:not(span){
  1332.   width: 100% !important;
  1333. }
  1334.  
  1335. /* アカウント選択時（リツイートとか） */
  1336. .is-selected.compose-account:focus .compose-account-img,
  1337. .compose-account:focus .compose-account-img {
  1338.   box-shadow: none;
  1339. }
  1340.  
  1341. /* サイド */
  1342. .mdl-column-med {
  1343.   background-color: #0000 !important;
  1344. }
  1345. .lst-group li {
  1346.   margin: 0 6px !important;
  1347. }
  1348. .lst-group a {
  1349.   text-decoration: none !important;
  1350. }
  1351. .lst-group .selected {
  1352.   border-radius: var(--md-border-r2) !important;
  1353.   background-color: var(--md-accent-1) !important;
  1354. }
  1355. .lst-group .selected a:hover {
  1356.   background-color: #0000 !important;
  1357. }
  1358.  
  1359. .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 {
  1360.   background-color: #0000 !important;
  1361. }
  1362.  
  1363. /* メディアビュアー */
  1364. :root {
  1365.   --med-b: 0px;
  1366. }
  1367. .med-tray {
  1368.   padding-bottom: 0 !important;
  1369. }
  1370. .med-tweet,
  1371. .med-tray > a {
  1372.   display: none !important;
  1373. }
  1374. .med-embeditem {
  1375.   top: 0 !important;
  1376.   bottom: var(--med-b, 0px) !important;
  1377. }
  1378. .mdl.s-full,
  1379. .mdl.s-full .media-img,
  1380. .mdl.s-full .js-media-native-video {
  1381.   width: 100vw !important;
  1382.   height: calc(100vh - var(--med-b, 0px)) !important;
  1383. }
  1384. .mdl.s-full {
  1385.   max-width: unset !important;
  1386.   padding-bottom: var(--med-b, 0px) !important;
  1387. }
  1388. .mdl.s-full .margin-vm {
  1389.   margin-top: 0 !important;
  1390. }
  1391. .mdl.s-full .media-img {
  1392.   object-fit: contain !important;
  1393. }
  1394.  
  1395. /* プロフィール */
  1396. .prf-meta {
  1397.   background-color: #0000 !important;
  1398. }
  1399. .prf-header {
  1400.   border-radius: var(--md-border-r1) var(--md-border-r1) 0 0;
  1401. }
  1402. .prf .lst-profile a {
  1403.   border-color: var(--md-border-c1) !important;
  1404. }
  1405. .prf-stats li + li a {
  1406.   border-color: var(--md-border-c1) !important;
  1407. }
  1408.  
  1409. /* カラム */
  1410. .mdl-column-rhs {
  1411.   border-color: var(--md-border-c1) !important;
  1412. }
  1413. .l-fullheight {
  1414.   overflow-x: hidden;
  1415. }
  1416.  
  1417. /*******************************
  1418. * ポップオーバー（検索とか）
  1419. ********************************/
  1420. .popover {
  1421.   background-color: var(--md-pop-back) !important;
  1422.   backdrop-filter: blur(10px);
  1423.   -webkit-backdrop-filter: blur(10px);
  1424.   filter: drop-shadow(0 0 0 var(--md-pop-backshadow));
  1425.   box-shadow: 1px 1px 6px 0 var(--md-shadow-c1) !important;
  1426. }
  1427. .list-item {
  1428.   color: var(--md-fcolor-main) !important;
  1429. }
  1430. .list-item.is-selected,
  1431. .list-item:active,
  1432. .list-item:hover {
  1433.   color: #fff !important;
  1434.   background-color: var(--md-accent-1) !important;
  1435. }
  1436. .list-item.is-selected .txt-mute,
  1437. .list-item:active .txt-mute,
  1438. .list-item:hover .txt-mute {
  1439.   color: #d4d4d4 !important;
  1440. }
  1441.  
  1442. /* 予約ツイートカレンダー */
  1443. .cal,
  1444. #caldays span,
  1445. #calweeks a {
  1446.   color: var(--md-fcolor-main) !important;
  1447. }
  1448. #calweeks a.caloff {
  1449.   color: var(--md-fcolor-sub2) !important;
  1450. }
  1451. #calweeks #calcurrent {
  1452.   color: #fff !important;
  1453.   background-color: var(--md-accent-1) !important;
  1454. }
  1455. #calweeks #calcurrent:hover {
  1456.   background-color: var(--md-accent-2) !important;
  1457. }
  1458. .cal input.light-on-dark {
  1459.   border-color: var(--md-border-c1) !important;
  1460. }
  1461. .cal button {
  1462.   background-color: var(--md-back2) !important;
  1463. }
  1464. #calbody,
  1465. #calweeks {
  1466.   background-color: var(--md-back2) !important;
  1467. }
  1468. #calbody {
  1469.   border-radius: 5px;
  1470.   overflow: hidden;
  1471. }
  1472. #caldays {
  1473.   border-bottom-color: var(--md-border-c1) !important;
  1474. }
  1475. #calweeks a.caldisabled {
  1476.   background-color: var(--md-back1)!important;
  1477.   color: var(--md-fcolor-sub2)!important;
  1478. }
  1479. #caltoday,
  1480. .calweek a:hover {
  1481.   background-color: var(--md-back1) !important;
  1482. }
  1483. .js-schedule-datepicker-holder .Button--danger {
  1484.   background-color: var(--md-c-red) !important;
  1485.   color: #fff !important;
  1486. }
  1487.  
  1488. /*******************************
  1489. * 日付選択のカレンダー
  1490. ********************************/
  1491. .Dropdown {
  1492.   background-color: var(--md-pop-back) !important;
  1493.   backdrop-filter: blur(10px);
  1494.   -webkit-backdrop-filter: blur(10px);
  1495.   filter: drop-shadow(0 0 0 var(--md-pop-backshadow));
  1496.   box-shadow: 1px 1px 6px 0 var(--md-shadow-c1) !important;
  1497.   border-radius: var(--md-border-r2) !important;
  1498.   overflow: hidden !important;
  1499. }
  1500. .DatePicker-nav button.is-focus {
  1501.   box-shadow: none !important;
  1502. }
  1503. .DatePicker-nav > button {
  1504.   background-color: #0000 !important;
  1505. }
  1506. .DatePicker-calendarDayHeader {
  1507.   color: var(--md-fcolor-sub1) !important;
  1508. }
  1509. .DatePicker-calendarDay.is-selectable {
  1510.   color: var(--md-fcolor-main) !important;
  1511. }
  1512. .DatePicker-calendarDay.is-selectable.is-adjacentMonth {
  1513.   color: var(--md-fcolor-sub1) !important;
  1514. }
  1515. .DatePicker-time {
  1516.   border-color: var(--md-border-c1) !important;
  1517. }
  1518. .DatePickerDropdown-menuItem--footer {
  1519.   background-color: #0000 !important;
  1520.   border-color: var(--md-border-c1) !important;
  1521. }
  1522. .Dropdown-menuItem.is-focus {
  1523.   background-color: var(--md-accent-1) !important;
  1524. }
  1525. .Dropdown-menuGroupLabel,
  1526. .Dropdown-menuItem .Dropdown-menuItemContent {
  1527.   border-radius: 0 !important;
  1528. }
  1529.  
  1530. /*******************************
  1531. * ツールチップ
  1532. ********************************/
  1533. .tooltip-arrow {
  1534.   display: none;
  1535. }
  1536. .tooltip-inner {
  1537.   background-color: var(--md-pop-back) !important;
  1538.   backdrop-filter: blur(10px);
  1539.   -webkit-backdrop-filter: blur(10px);
  1540.   filter: drop-shadow(0 0 0 var(--md-pop-backshadow));
  1541.   box-shadow: 1px 1px 6px -2px var(--md-shadow-c1) !important;
  1542.   color: var(--md-fcolor-main) !important;
  1543. }
  1544.  
  1545. /*******************************
  1546. * 認証バッジ
  1547. ********************************/
  1548. .sprite-verified,
  1549. .sprite-verified-mini,
  1550. .badge-verified:before {
  1551.   filter: grayscale(100%) invert(100%) brightness(300%) drop-shadow(0 0 1px rgba(0, 0, 0, .5)) !important;
  1552.   background-size: cover !important;
  1553.   background-position: center, center !important;
  1554.   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;
  1555. }
  1556.  
  1557. /*******************************
  1558. * リンクプレビュー
  1559. ********************************/
  1560. .hw-card-container * {
  1561.   border: none !important;
  1562. }
  1563. .hw-card-container span {
  1564.   color: var(--md-fcolor-main) !important;
  1565. }
  1566. .hw-card-container > div {
  1567.   background-color: var(--md-back1) !important;
  1568.   box-shadow: 1px 1px 6px -2px var(--md-shadow-c1) !important;
  1569.   border-radius: var(--md-border-r2) !important;
  1570. }
  1571. .hw-card-container > div > :first-child > a > div {
  1572.   background-color: var(--md-back2) !important;
  1573. }
  1574. .hw-card-container a:hover {
  1575.   color: inherit !important;
  1576.   text-shadow: none !important;
  1577. }
  1578. }