☰

Typing Tube MOD Add CSS

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

当前为 2022-07-13 提交的版本，查看 最新版本。

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

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