Typing Tube MOD Add CSS

Typing Tube MOD用のCSSを追加するライブラリ

当前为 2022-07-10 提交的版本,查看 最新版本

此脚本不应直接安装。它是供其他脚本使用的外部库,要使用该库请加入元指令 // @require https://update.cn-greasyfork.org/scripts/447674/1068933/Typing%20Tube%20MOD%20Add%20CSS.js

  1. // ==UserScript==
  2. // @name Typing Tube MOD Add CSS
  3. // @namespace http://tampermonkey.net/
  4. // @version 0.1
  5. // @description Typing Tube MOD用のCSSを追加するライブラリ
  6. // @author You
  7. // @match http://*/*
  8. // @icon data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==
  9. // @grant none
  10. // ==/UserScript==
  11.  
  12. const play_css = document.createElement('style')
  13. play_css.type = 'text/css';
  14. play_css.innerHTML =
  15. `#kashi_roma:after,#kashi_sub:after,#skip-guide:after,#kashi_next:after,#next-kpm:after,#combo-value:after{content:'\u200b';}
  16. .bar_text{display: flex;justify-content: space-between;align-items: baseline;position: relative;}
  17. .flex_space_between{display: flex;justify-content: space-between;}
  18. #combo-value{position: relative;top: -3px;font-size: 20px;}
  19. #complete_effect{font-size: 140%;letter-spacing: 2px;position: absolute;left: 50%;transform: translate(-50%);-webkit-transform: translate(-50%);}
  20. #line_remaining_time{font-size: 14px;}
  21. #count-anime{
  22. font-size: 45px;
  23. font-weight: 600;
  24. position: relative;
  25. }
  26. #count-anime > span{
  27. position: absolute;
  28. top: 1rem;
  29. left: 50%;
  30. transform: translate(-50%, -50%);
  31. -webkit-transform: translate(-50%, -50%);
  32. -ms-transform: translate(-50%, -50%);
  33. }
  34. body ::-webkit-scrollbar {
  35. width: 10px;
  36. background-color: rgb(0 0 0 / 39%);
  37. -webkit-border-radius: 100px;
  38. height:10px;
  39. }
  40. body ::-webkit-scrollbar-corner {
  41. background:transparent;
  42. }
  43. body ::-webkit-scrollbar-thumb {
  44. background: hsla(0,0%,100%,.5);
  45. -webkit-border-radius: 100px;
  46. background-clip: padding-box;
  47. border: 2px solid hsla(0,0%,100%,0);
  48. min-height: 10px;
  49. }
  50.  
  51. .status_border {
  52. border-bottom: solid thin;
  53. opacity: 0.25;
  54. }
  55. .status_name{font-weight:normal;margin-left:1.5px;}
  56. .flex_space_between{display: flex;justify-content: space-between;}
  57. #missmark{text-shadow: initial;}
  58. .gothicfont{font-family: Segoe UI , "Yu Gothic","YuGothic",sans-serif !important;}
  59. #kashi_area{cursor:none!important;user-select: none !important;-ms-user-select: none !important;-moz-user-select: none !important;-webkit-user-select: none !important;}
  60. .select_none{user-select: none !important;-ms-user-select: none !important;-moz-user-select: none !important;-webkit-user-select: none !important;}
  61. [onclick='submit_score()']:after,[onclick='submit_kana_score()']:after{content:'Enterキーでランキング送信';}
  62. .character-scroll{white-space: nowrap;position:relative;height: 1.5em;overflow:hidden;}
  63. .jp_word{word-break:break-all;}
  64. .eng_word{word-wrap: break-word;overflow-wrap:break-word;}
  65. .daken_moji{font-family:sans-serif;letter-spacing: 0.7px;font-weight:normal;}
  66. .progress{margin-bottom: 0!important;}
  67. #kashi_sub{margin-bottom:0.5rem;}
  68. #kashi{font-size:1.65rem;}
  69. #kashi_next{margin-top:0px!important; text-overflow: ellipsis;}
  70. #controlbox .col-6{padding-right: 0!important;}
  71. #controlbox{margin-left:0px!important; padding-top: 6px;}
  72. #status{font-size:1.4rem;white-space: nowrap;letter-spacing:0.1em;margin-bottom: 0;}
  73. #life,#keep{font-size: 80%;background: rgb(0 0 0 / 60%);padding: 3px 7px 3px 7px;border-radius: 15px;color:gold;}
  74. .correct_sub{line-height:0;padding-top: 8px;padding-bottom:15.5px;font-size:95%;font-weight:normal;}
  75. #total-time{font-weight:600;color:#fff;font-family: sans-serif;}
  76. #seek_line_close:hover{ cursor: pointer;text-decoration : underline;}
  77. .practice-mode .result_lyric:hover{ cursor: pointer; text-decoration: underline;background: rgb(0 0 0 / 60%);
  78. width: fit-content;
  79. padding-right: 7px;
  80. border-radius: 5px;
  81. }
  82. #typing-line-list-container {
  83. text-indent: 5px;
  84. background-color: rgba(0,0,0,.33);
  85. position: relative;
  86. }
  87. #typing-line-result {
  88. word-break: break-all;
  89. overflow: scroll;
  90. max-height: 700px;
  91. font-size: 130%;
  92. font-weight: 600;
  93. list-style-type: none;
  94. padding-left: 0;
  95. }
  96. #line-result-head {
  97. font-size:21px;
  98. margin:0px!important;
  99. padding-bottom: 5px;
  100. color:#FFF;
  101. font-weight: 600;
  102. }
  103. #gauge2{height:13px!important;border-top:thin #FFEB3B solid;border-right:thin #FFEB3B solid;border-bottom:thin #FFEB3B solid;}
  104. .kashi_omit{
  105. overflow: hidden;
  106. white-space: nowrap;}
  107. .col-4{padding-top:4px;}
  108. #gauge{width: 75%;padding-left: 10px;}
  109. .underline, .hover_underline:hover{text-decoration: underline;}
  110. .uppercase{text-transform:uppercase;}
  111. .lyric_space{text-indent: -1rem;}
  112. #btn_container{
  113. display: flex;
  114. margin-top: 10px;
  115. align-content: stretch;
  116. flex-direction: column;
  117. justify-content: center;
  118. flex-wrap: wrap;
  119. align-items: flex-end;
  120. }
  121. .result_lyric {
  122. list-style-type: none;
  123. }
  124. ol .result_lyric {
  125. margin-bottom: 3rem;
  126. }
  127. .seikou,.sippai{
  128. margin-left:5px;
  129. }
  130. .line_numbering{
  131. text-indent:2px;
  132. font-size:80%;
  133. font-weight:normal;
  134. }
  135. .flex_status_position{margin-left: 3px;position:relative;}
  136. #status td{
  137. position: relative;
  138. }
  139. .status_label{
  140. position: absolute;
  141. top:1rem;
  142. left: -40px;
  143. font-size:75%;
  144. }
  145. .flex_status_border{
  146. border-top: solid thin;
  147. position: absolute;
  148. width: 100%;
  149. bottom: 0.5px;
  150. min-width: 5.5rem;
  151. left: -2px;
  152. }
  153.  
  154.  
  155. progress{width:100%;height:3px!important;-webkit-appearance: scale-horizontal;appearance: scale-horizontal;margin-top:1vw;}
  156. @-moz-document url-prefix() {
  157. progress{height:5px!important;appearance:none;}
  158. }
  159.  
  160. div#gauge1 {
  161. position: relative;
  162. top: 5px;
  163. border-top: thin solid;
  164. border-bottom: thin solid;
  165. border-left: thin solid;
  166. }
  167. .progress2{margin-bottom: 0.5vw; -webkit-box-shadow: inset 0 0.1vw 0.2vw rgba(0,0,0,.1);box-shadow: inset 0 0.1vw 0.2vw rgba(0,0,0,.1);border-radius: 0;display: flex;font-size: .75rem;line-height: 3px;text-align: center;background-color: rgba(255,255,255,.1);}
  168.  
  169. .combo_animated {
  170. animation-duration: 0.6s;
  171. animation-fill-mode: both;
  172. }
  173.  
  174.  
  175. @keyframes combo_anime {
  176. 0% {
  177. transform:scale(1.1,1.2);
  178. } 2% {
  179. transform:scale(1.1,1.3);
  180. } 9% {
  181. transform:scale(1,1);
  182. }
  183. }
  184.  
  185. #combo_anime {
  186. animation-name: combo_anime;
  187. display: inline-block;
  188. }
  189.  
  190. .count_animated {
  191. -webkit-animation-duration: 1s;
  192. animation-duration: 1s;
  193. -webkit-animation-fill-mode: both;
  194. animation-fill-mode: both;
  195. }
  196.  
  197.  
  198. @keyframes countdown_animation {
  199. from {
  200. opacity: 1;
  201. } to {
  202. opacity: 0.0;
  203. } 10% {
  204. opacity: 0.9;
  205. } 20% {
  206. opacity: 0.8;
  207. } 30% {
  208. opacity: 0.7;
  209. } 40% {
  210. opacity: 0.6;
  211. } 50% {
  212. opacity: 0.5;
  213. } 60% {
  214. opacity: 0.4;
  215. } 70% {
  216. opacity: 0.3;
  217. } 80% {
  218. opacity: 0.2;
  219. } 90% {
  220.  
  221. opacity: 0.1;
  222. }
  223. }
  224. .complete_animated {
  225. -webkit-animation-duration: 0.7s;
  226. animation-duration: 0.7s;
  227. -webkit-animation-fill-mode: both;
  228. animation-fill-mode: both;
  229. }
  230. .countdown_animation {
  231. -webkit-animation-name: countdown_animation;
  232. animation-name: countdown_animation;
  233. -webkit-transform-origin: center center;
  234. transform-origin: center center;
  235. }
  236. #volume_control {
  237. -webkit-appearance: none;
  238. width: 11rem;
  239. background: transparent;
  240. }
  241.  
  242. #volume_control:focus {
  243. outline: none;
  244. }
  245.  
  246. #volume_control::-webkit-slider-runnable-track {
  247. height: 1.5rem;
  248. margin: 0;
  249. width: 100%;
  250. background: #464646;
  251. background: linear-gradient(
  252. to bottom right,
  253. transparent 50%,
  254. #000000bb 50%
  255. );
  256. }
  257.  
  258. #volume_control::-moz-range-track {
  259. height: 1.5rem;
  260. margin: 0;
  261. width: 100%;
  262. background: #464646;
  263. background: linear-gradient(
  264. to bottom right,
  265. transparent 50%,
  266. #000000bb 50%
  267. );
  268. }
  269.  
  270.  
  271. #volume_control::-webkit-slider-thumb {
  272. -webkit-appearance: none;
  273. height: 1.9rem;
  274. width: 0.5rem;
  275. background: #ffffff;
  276. border: 1px solid;
  277. margin-top: -3px;
  278. border-radius: 3px;
  279. }
  280.  
  281.  
  282.  
  283. #volume_control::-moz-range-thumb {
  284. -webkit-appearance: none;
  285. height: 1.9rem;
  286. width: 0.5rem;
  287. background: #ffffff;
  288. border: 1px solid;
  289. border-radius: 3px;
  290. margin-top: 0;
  291. }
  292.  
  293. #volume_control:focus::-moz-range-thumb {
  294. box-shadow: 0px 0px 7px 3px #0065c4;
  295. }
  296. .control_option{
  297. color:rgba(255,255,255,.85);
  298. background:transparent;
  299. border:outset thin;
  300. border-radius: 15px;
  301. padding-left: 8px;
  302. padding-right: 8px;
  303. display:inline-flex;
  304. }
  305. .time_adjust_head{
  306. border: solid thin #777;
  307. background: #222;
  308. color: #eee;
  309. display: inline-flex;
  310. align-items: center;
  311. }
  312. [id*="time_settings"]{
  313. margin-top: 8px;
  314. width: 100%;
  315. justify-content: space-between;
  316. align-items: baseline;
  317. }
  318. #time_{
  319. transform: scale(0.8,0.8);
  320. margin-right:5px;
  321. position:relative;
  322. top:0.5px;
  323. left: -4px;
  324. }
  325. #time_diff{
  326. transform: scale(1.1,1.1);
  327. position: relative;
  328. left: -4px;
  329. }
  330. #more_shortcutkey{
  331. background: #4d4d4d;
  332. color: #ccc;
  333. border: solid thin #777;
  334. padding-right:0px;
  335. padding-left:0px;
  336. }
  337. #restart span{
  338. transform: scale(0.9,0.9);
  339. }
  340. #more_shortcutkey span{
  341. transform: scale(0.8,0.8);
  342. }
  343. .shortcut_navi{
  344. background: #4d4d4d;
  345. color:#ccc;
  346. padding:1px 5px 2px 5px;
  347. border-radius: 5px;
  348. margin-left: 2px;
  349. }
  350. .shortcut-navi-display-block {
  351. display:block;
  352. background: #4d4d4d;
  353. color: #ccc;
  354. margin-left: auto;
  355. margin-right: auto!important;
  356. width: min-content;
  357. padding: 1px 3px 1px 3px;
  358. border-radius: 5px;
  359. margin-top: 3px;
  360. font-size: 10px;
  361. }
  362. .control-option2 {
  363. border-radius: 15px;
  364. width: 12rem;
  365. display: inline-flex;
  366. justify-content: center;
  367. border: none;
  368. padding: 1px 10px 0px 10px;
  369. color: #FFF;
  370. }
  371. .short_popup{
  372. position: absolute;
  373. background: hsl(0deg 0% 8%);
  374. border: solid #FFF;
  375. z-index: 5;
  376. font-weight: 600;
  377. display:none;
  378. padding-top:1.5rem;
  379. }
  380. #shortcut {
  381. top: 252px;
  382. right: 0;
  383. }
  384. #shortcut > div{
  385. margin-bottom:1.5rem;
  386. display: flex;
  387. justify-content: flex-start;
  388. }
  389. #practice-shortcutkeys{
  390. margin-top: 1rem;
  391. }
  392. #practice-shortcutkeys > div{
  393. margin-bottom:12px;
  394. }
  395. .line-list-text-shadow{
  396. text-shadow: 0.6px 0.6px 0px #000, -0.6px -0.6px 0px #000, -0.6px 0.6px 0px #000, 0.6px -0.6px 0px #000, 0.6px 0px 0px #000, -0.6px 0px 0px #000, 0px 0.6px 0px #000, 0px -0.6px 0px #000;
  397. }
  398. `
  399. document.getElementsByTagName('HEAD').item(0).appendChild(play_css);
  400.  
  401. var setting_css = document.createElement('style')
  402. setting_css.type = 'text/css';
  403. setting_css.innerHTML=`
  404. #mod-menu{
  405. color:#fff;
  406. z-index:102;
  407. display:none;
  408. position:fixed;
  409. word-break: break-all;
  410. max-height: 900px;
  411. background-color: rgba(0,0,0,0.96);
  412. right:0px;
  413. top:70px;
  414. }
  415. #osusume{
  416. position:absolute;
  417. right:130px;
  418. bottom:10px;
  419. margin-right:5px;
  420. z-index:3;
  421. background:#333;
  422. }
  423. #mod-menu label:not(.default-pointer),#mod-menu details,#mod-menu button,#mod-menu .color,#mod-menu select,.col-6 label,.status .nav-fill,.cursor-pointer{cursor: pointer;}
  424. #mod-menu label{margin-right: 5px;}
  425. #modal-open:hover,.pointer:hover{ cursor: pointer;text-decoration : underline;}
  426. .help_pointer:hover{ cursor: help;text-decoration : underline;}
  427. .caret:hover{ cursor: text; background: #ffffff45;
  428. border-radius: 3px;}
  429. .ui-dialog-buttonset button:last-of-type{opacity:0.5;zoom:70%;}
  430. .fa-cog:hover{transform:rotate(90deg);}
  431. /*タブのスタイル*/
  432. .tab-item {
  433. width: calc(100%/4);
  434. height: 30px;
  435. line-height: 30px;
  436. overflow:hidden;
  437. font-size: 16px;
  438. text-align: center;
  439. color: #565656;
  440. display: block;
  441. float: left;
  442. text-align: center;
  443. transition: all 0.2s ease;
  444. margin:0px!important;
  445. border-left: 1px solid #fff;
  446. border-top: 1px solid #fff;
  447. border-bottom:2px solid #aaa;
  448.  
  449. }
  450. .form-control {
  451. border-width: 0 0 1px;
  452. padding-left: 1px;
  453. padding-right: 1px;
  454. resize: none;
  455. -webkit-appearance: none;
  456. -moz-appearance: none;
  457. appearance: none;
  458. -ms-overflow-style: none;
  459. }
  460. .p-0 {
  461. padding: 0!important;
  462. }
  463. .form-control-sm {
  464. padding: .25rem .55rem;
  465. font-size: .875rem;
  466. line-height: 1.5;
  467. border-radius: 0;
  468. }
  469.  
  470. .mod-menu-round-wrapper{
  471. border: solid thin;
  472. padding-left: 1rem;
  473. transform: scale(0.9);
  474. border-radius: 30px;
  475. }
  476. .colorChooser {
  477.  
  478. top: -130px;
  479. zoom:80%;
  480. }
  481. .tab-item:hover{
  482. border-left: 1px solid #ffcd05!important;
  483. border-top: 1px solid #ffcd05!important;
  484.  
  485. color: #ffcd05!important;
  486. }
  487. [for="etc"]{
  488. border-right: 1px solid #fff;
  489. }
  490. [for="etc"]:hover{
  491. border-right: 1px solid #ffcd05!important;
  492.  
  493. }
  494. [for="all"]:hover~[for="design"],
  495. [for="design"]:hover~[for="playcolor"],
  496. [for="playcolor"]:hover~[for="etc"],
  497. [for="etc"]:hover~.solid
  498. {
  499. border-left: 1px solid #ffcd05!important;
  500.  
  501. }
  502. .mod-tab-content-description{
  503. white-space: nowrap;
  504. border-bottom:1px solid #fff;
  505. border-left:1px solid #fff;
  506. border-right:1px solid #fff;
  507. overflow: scroll;
  508. max-height: 380px;
  509. display:flex;
  510. flex-direction: column;
  511. }
  512.  
  513. .mod-tab-content-description h6{
  514. margin-bottom: 8px;
  515. margin-left: 10px;
  516. }
  517. .mod-tab-content-description label {
  518. margin-left: 10px;
  519. display:block;
  520. }
  521. .mod-tab-content-description label input {
  522. margin-right: 5px;
  523. margin-left: 5px;
  524. }
  525. form #mod-menu p {
  526. margin-bottom: 0;
  527. }
  528. /*ラジオボタンを全て消す*/
  529. input[name="tab-item"],input[name="input_page"],input[name="details"] {
  530. display: none;
  531. }
  532.  
  533. /*タブ切り替えの中身のスタイル*/
  534. .mod-tab-content,
  535. .page_content{
  536. display: none;
  537. clear: both;
  538.  
  539. }
  540. select {
  541. font-weight: 600;
  542. padding: 5px 8px;
  543. width: 130%;
  544. color:#FFF;
  545. box-shadow: none;
  546. background-color: #000000CC;
  547. background-image: none;
  548. -webkit-appearance: none;
  549. -moz-appearance: none;
  550. appearance: none;
  551. border-radius: 5px;
  552. width: auto;
  553. }
  554. select:focus {
  555. outline: none;
  556. }
  557. select:hover{
  558. background:#1E90FF;
  559. }
  560. option{
  561. background:#333;
  562. color:#FFF;
  563. }
  564. .mod-tab-content h6{
  565. padding-top: 10px;
  566. }
  567. .input_page{
  568. margin-bottom:2px;
  569. padding-top: 7.5px;
  570. margin-left: 0px!important;
  571.  
  572. }
  573. .input_page:hover{
  574. text-decoration: underline;
  575. }
  576. .folded-luled-line{
  577. font-size: 1.5rem;
  578. position: relative;
  579. bottom: 6px;
  580. left: 3px;
  581. font-family: cursive;
  582. }
  583. .three-digits[type=number]{
  584. width: 46px;
  585. }
  586. .four_digits[type=number]{
  587. width: 50px;
  588. }
  589. .sound-effect-list{
  590. display: flex;
  591. align-items: center;
  592. }
  593.  
  594. input[type="number"]::-webkit-outer-spin-button,
  595. input[type="number"]::-webkit-inner-spin-button {
  596. cursor:pointer;
  597. }
  598. .mod-tab-content [id*='config']:not(:first-of-type){
  599. border-top-style: inset;
  600. }
  601. #status-config{
  602. margin-bottom:10px;
  603. }
  604. .mod-tab-content-description > [id*='config']:last-of-type{
  605. margin-bottom:30px;
  606. }
  607. .mod-tab-content [id*='config']{
  608. margin:0 10px 0 10px;
  609. }
  610. #input-config h6{
  611. margin-right:10px;
  612. }
  613. #miss-limit-mode-config{
  614. justify-content: flex-start;
  615. align-items: flex-end;
  616. margin-bottom: 4px;
  617. }
  618. #character-scroll-config{
  619. justify-content: flex-start;
  620. align-items: center;
  621. }
  622. #difficult > span > span:nth-of-type(-n+4) {
  623. margin-right: 0.9rem;
  624. }
  625. .EntrySymbol{
  626. margin-bottom:0.5rem;
  627. }
  628. .AppearanceSymbol {
  629. font-size: large;
  630. }
  631. .SymbolColumn{
  632. display: inline-flex;
  633. flex-direction: column;
  634. }
  635. .SymbolColumn:not(:last-child){
  636. margin-right:3rem;
  637. }
  638. /*選択されているタブのコンテンツのみを表示*/
  639. #all:checked ~ #all-content,
  640. #design:checked ~ #design-content,
  641. #playcolor:checked ~ #playarea-color-content,
  642. #etc:checked ~ #etc-content,
  643. #page1:checked ~ #page1_content,
  644. #page2:checked ~ #page2_content{
  645. display: block!important;
  646. }
  647.  
  648. /*選択されているタブのスタイルを変える*/
  649. input:checked + .tab-item {
  650. border-bottom:hidden;
  651.  
  652. color: #fff!important;
  653. }
  654. input:checked + .input_page {
  655.  
  656. color: #919395!important;
  657. }
  658. #modal-overlay{
  659. z-index:101;display:none;position:fixed;top:0;left:0;width:100%;height:120%;
  660. }
  661.  
  662.  
  663. #osusume1,#osusume2 {
  664. cursor: pointer;
  665. width: 200px;
  666. border: 1px solid #ccc;
  667. border-radius: 4px;
  668. text-align: center;
  669. padding: 12px;
  670. margin: 0px auto 0;
  671. background: #4caf50;
  672. z-index: 105;
  673.  
  674. color: white;
  675. }
  676. #osusume1 {
  677. float:left;
  678. }#osusume2{
  679. float:right;
  680. }
  681. #mask {
  682. background: rgba(0, 0, 0, 0.4);
  683. position: fixed;
  684. top: 0;
  685. bottom: 0;
  686. right: 0;
  687. left: 0;
  688. z-index: 104;
  689. }
  690.  
  691. #modal {
  692. background: #fff;
  693. color: #555;
  694. width: 520px;
  695. padding: 25px;
  696. border-radius: 4px;
  697. position: fixed;
  698. top: 270px;
  699. left: 0;
  700. right: 0;
  701. margin: 0 auto;
  702. z-index: 105;
  703. }
  704. #mask.hidden {
  705. display: none;
  706. }
  707.  
  708. #modal.hidden {
  709. display: none;
  710. }
  711. .rgba-color-scroll-padding{
  712. padding-bottom:130px;
  713. padding-top: 60px;
  714. }
  715. .c-txtsp{
  716. margin-bottom: 0;
  717. }
  718. #practice-setting fieldset{
  719. padding: revert!important;
  720. margin: revert!important;
  721. border: groove!important;
  722. height: 160px;
  723. margin-left: 1rem!important;
  724.  
  725. }
  726. #practice-setting > * {
  727. margin-left: 1rem!important;
  728. }
  729. #practice-setting legend{
  730. width:auto;
  731. }
  732. #practice-setting{
  733. display: inline-flex;
  734. flex-direction: row;
  735. align-items: flex-end;
  736. margin-bottom: 1rem;
  737. }
  738. #practice-setting fieldset div {
  739. margin-bottom: 1rem;
  740. }
  741. `
  742. document.getElementsByTagName('HEAD').item(0).appendChild(setting_css);