☰

Typing Tube MOD Add CSS

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

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

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

  1. // ==UserScript==
  2. // @name         Typing Tube MOD Add CSS
  3. // @namespace    http://tampermonkey.net/
  4. // @version      2.1.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. 		`
  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. .bar_text{display: flex;justify-content: space-between;align-items: baseline;position: relative;}
  403. .flex_space_between{display: flex;justify-content: space-between;}
  404. #combo-value{position: relative;top: -3px;font-size: 20px;}
  405. #complete_effect{font-size: 140%;letter-spacing: 2px;position: absolute;left: 50%;transform: translate(-50%);-webkit-transform: translate(-50%);}
  406. #line_remaining_time{font-size: 14px;}
  407. #count-anime{
  408.     font-size: 45px;
  409.     font-weight: 600;
  410.     position: relative;
  411. }
  412. #count-anime > span{
  413.     position: absolute;
  414.     top: 1rem;
  415.     left: 50%;
  416.     transform: translate(-50%, -50%);
  417.     -webkit-transform: translate(-50%, -50%);
  418.     -ms-transform: translate(-50%, -50%);
  419. }
  420. body ::-webkit-scrollbar {
  421.     width: 10px;
  422.     background-color: rgb(0 0 0 / 39%);
  423.     -webkit-border-radius: 100px;
  424.     height:10px;
  425. }
  426. body ::-webkit-scrollbar-corner {
  427.   background:transparent;
  428. }
  429. body ::-webkit-scrollbar-thumb {
  430.     background: hsla(0,0%,100%,.5);
  431.     -webkit-border-radius: 100px;
  432.     background-clip: padding-box;
  433.     border: 2px solid hsla(0,0%,100%,0);
  434.     min-height: 10px;
  435. }
  436.  
  437. .status_border {
  438.     border-bottom: solid thin;
  439.     opacity: 0.25;
  440. }
  441. #volume_control_area{
  442.     display: flex;
  443.     position: relative;
  444.     align-items: baseline;
  445.     margin-right: 42px;
  446. }
  447.  
  448. #volume-label{
  449.     position: absolute;
  450.     z-index: -1;
  451.     top: -22px;
  452.     color: #FFFFFF88;
  453. }
  454. #volume{
  455.     background: #00000088;
  456.     padding: 3px;
  457.     border: solid thin;
  458.     border-radius: 5px;
  459.     position: absolute;
  460.     top: -5px;
  461.     min-width: 25px;
  462.     text-align: center;
  463. }
  464. group + group {
  465. 	margin-top: 20px;
  466. 	font-weight:600;
  467.   }
  468.   .inline-radio {
  469. 	display: flex;
  470. 	overflow: hidden;
  471. 	border: 1.5px solid #ffffff;
  472. 	font-weight:600;
  473. 	border-radius: 0;
  474.     margin-top: 12px;
  475.   }
  476.   .inline-radio div {
  477. 	position: relative;
  478. 	flex: 1;
  479.     word-break: keep-all;
  480.     text-align: center;
  481.   }
  482.   .inline-radio input {
  483. 	width: 100%;
  484. 	height: 60px;
  485. 	opacity: 0;
  486.   }
  487.   .inline-radio label {
  488. 	display: grid;
  489.     justify-items: center;
  490.     align-content: center;
  491. 	position: absolute;
  492. 	top: 0;
  493. 	left: 0;
  494. 	width: 100%;
  495. 	height: 100%;
  496. 	align-items: center;
  497. 	justify-content: center;
  498. 	pointer-events: none;
  499. 	color:#fff;
  500. 	border-right: 1.5px solid #ffffff;
  501. 	border-radius: 0;
  502. }
  503.   .inline-radio div:last-child label {
  504. 	border-right: 0;
  505.   }
  506.   .inline-radio .roma:checked + label {
  507. 	background: #17a3b8d2!important;
  508. 	color: #fff;
  509.   }
  510.   .inline-radio .kana:checked + label {
  511. 	background: #de781fde!important;
  512. 	color: #fff;
  513.   }
  514.   .inline-radio .flick:checked + label {
  515. 	background: #59e04db6!important;
  516. 	color: #fff;
  517.   }
  518.   .inline-radio .roma:hover + label {
  519. 	background: #17a3b856;
  520. 	color: #fff;
  521.   }
  522.   .inline-radio .kana:hover + label {
  523. 	background: #de781f85;
  524. 	color: #fff;
  525.   }
  526.   .inline-radio .flick:hover + label {
  527. 	background: #59e04d3b;
  528. 	color: #fff;
  529.   }
  530.   span.btn-border:hover {
  531. 	background: rgba(245, 245, 245, 0.356);
  532.   }
  533. .status_name{font-weight:normal;margin-left:1.5px;}
  534. .flex_space_between{display: flex;justify-content: space-between;}
  535. #missmark{text-shadow: initial;}
  536. .gothicfont{font-family: Segoe UI , "Yu Gothic","YuGothic",sans-serif !important;}
  537. #kashi_area{cursor:none!important;user-select: none !important;-ms-user-select: none !important;-moz-user-select: none !important;-webkit-user-select: none !important;}
  538. .select_none{user-select: none !important;-ms-user-select: none !important;-moz-user-select: none !important;-webkit-user-select: none !important;}
  539. [onclick='submit_score()']:after{content:'Enterキーでランキング送信';}
  540. .character-scroll{white-space: nowrap;position:relative;height: 1.5em;overflow:hidden;}
  541. .jp_word{word-break:break-all;}
  542. .eng_word{word-wrap: break-word;overflow-wrap:break-word;}
  543. .daken_moji{font-family:sans-serif;letter-spacing: 0.7px;font-weight:normal;}
  544. .progress{margin-bottom: 0!important;}
  545. #kashi_sub{margin-bottom:0.5rem;}
  546. #kashi{font-size:1.65rem;}
  547. #kashi_next{margin-top:0px!important; text-overflow: ellipsis;}
  548. #controlbox .col-6{padding-right: 0!important;}
  549. #controlbox{margin-left:0px!important;    padding-top: 6px;}
  550. #status{font-size:1.4rem;white-space: nowrap;letter-spacing:0.1em;margin-bottom: 0;}
  551. #life,#keep{font-size: 80%;background: rgb(0 0 0 / 60%);padding: 3px 7px 3px 7px;border-radius: 15px;color:gold;}
  552. .correct_sub{line-height:0;padding-top: 8px;padding-bottom:15.5px;font-size:95%;font-weight:normal;}
  553. #total-time{font-weight:600;color:#fff;font-family: sans-serif;}
  554. #seek_line_close:hover{  cursor: pointer;text-decoration : underline;}
  555. .practice-mode .result_lyric:hover{  cursor: pointer; text-decoration: underline;background: rgb(0 0 0 / 60%);
  556.     width: fit-content;
  557.     padding-right: 7px;
  558.     border-radius: 5px;
  559. 	}
  560. #typing-line-list-container {
  561.     text-indent: 5px;
  562. 	background-color: rgba(0,0,0,.33);
  563.     position: relative;
  564.     }
  565. #typing-line-result {
  566.     word-break: break-all;
  567.     overflow: scroll;
  568.     max-height: 700px;
  569.     font-size: 130%;
  570.     font-weight: 600;
  571.     list-style-type: none;
  572.     padding-left: 0;
  573. }
  574. #line-result-head {
  575.     font-size:21px;
  576.     margin:0px!important;
  577.     padding-bottom: 5px;
  578.     color:#FFF;
  579. 	font-weight: 600;
  580. }
  581. #gauge2{height:13px!important;border-top:thin #FFEB3B solid;border-right:thin #FFEB3B solid;border-bottom:thin #FFEB3B solid;}
  582. .kashi_omit{
  583.         overflow: hidden;
  584.         white-space: nowrap;}
  585. .col-4{padding-top:4px;}
  586. #gauge{width: 75%;padding-left: 10px;}
  587. .underline, .hover_underline:hover{text-decoration: underline;}
  588. .uppercase{text-transform:uppercase;}
  589. .lyric_space{text-indent: -1rem;}
  590. #btn_container{
  591.     display: flex;
  592.     margin-top: 10px;
  593.     align-content: stretch;
  594.     flex-direction: column;
  595.     justify-content: center;
  596.     flex-wrap: wrap;
  597.     align-items: flex-end;
  598. }
  599. .result_lyric {
  600.     list-style-type: none;
  601. }
  602. ol .result_lyric {
  603.     margin-bottom: 3rem;
  604. }
  605. .seikou,.sippai{
  606.    margin-left:5px;
  607. }
  608. .line_numbering{
  609.     text-indent:2px;
  610.     font-size:80%;
  611.     font-weight:normal;
  612. }
  613. .flex_status_position{margin-left: 3px;position:relative;}
  614. #status td{
  615. position: relative;
  616. }
  617. .status_label{
  618.     position: absolute;
  619.     top:1rem;
  620.     left: -40px;
  621.     font-size:75%;
  622. }
  623. .flex_status_border{
  624.     border-top: solid thin;
  625.     position: absolute;
  626.     width: 100%;
  627.     bottom: 0.5px;
  628.     min-width: 5.5rem;
  629.     left: -2px;
  630. }
  631.  
  632.  
  633. progress{width:100%;height:3px!important;-webkit-appearance: scale-horizontal;appearance: scale-horizontal;margin-top:1vw;}
  634. @-moz-document url-prefix() {
  635. progress{height:5px!important;appearance:none;}
  636. }
  637.  
  638. div#gauge1 {
  639.     position: relative;
  640.     top: 5px;
  641.     border-top: thin solid;
  642.     border-bottom: thin solid;
  643.     border-left: thin solid;
  644. }
  645. .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);}
  646.  
  647. .combo_animated {
  648. 	animation-duration: 0.6s;
  649. 	animation-fill-mode: both;
  650. }
  651.  
  652.  
  653. @keyframes combo_anime {
  654. 	0% {
  655. 		transform:scale(1.1,1.2);
  656. 	} 2% {
  657. 		transform:scale(1.1,1.3);
  658. 	} 9% {
  659. 		transform:scale(1,1);
  660. 	}
  661. }
  662.  
  663. #combo_anime {
  664. 	animation-name: combo_anime;
  665.     display: inline-block;
  666. }
  667.  
  668. .count_animated {
  669. 	-webkit-animation-duration: 1s;
  670. 	animation-duration: 1s;
  671. 	-webkit-animation-fill-mode: both;
  672. 	animation-fill-mode: both;
  673. }
  674.  
  675.  
  676. @keyframes countdown_animation {
  677. 	from {
  678. 		opacity: 1;
  679. 	} to {
  680. 		opacity: 0.0;
  681. 	} 10% {
  682. 		opacity: 0.9;
  683. 	} 20% {
  684. 		opacity: 0.8;
  685. 	} 30% {
  686. 		opacity: 0.7;
  687. 	} 40% {
  688. 		opacity: 0.6;
  689. 	} 50% {
  690.  		opacity: 0.5;
  691. 	} 60% {
  692. 		opacity: 0.4;
  693. 	} 70% {
  694. 		opacity: 0.3;
  695. 	} 80% {
  696. 		opacity: 0.2;
  697. 	} 90% {
  698.  
  699. 		opacity: 0.1;
  700. 	}
  701. }
  702. .complete_animated {
  703. 	-webkit-animation-duration: 0.7s;
  704. 	animation-duration: 0.7s;
  705. 	-webkit-animation-fill-mode: both;
  706. 	animation-fill-mode: both;
  707. }
  708. .countdown_animation {
  709. 	-webkit-animation-name: countdown_animation;
  710. 	animation-name: countdown_animation;
  711. 	-webkit-transform-origin: center center;
  712. 	transform-origin: center center;
  713. }
  714. #volume_control {
  715.   -webkit-appearance: none;
  716.   width: 11rem;
  717.   background: transparent;
  718.   margin-right: 10px;
  719. }
  720.  
  721. #volume_control:focus {
  722.   outline: none;
  723. }
  724.  
  725. #volume_control::-webkit-slider-runnable-track {
  726.   height: 1.5rem;
  727.   margin: 0;
  728.   width: 100%;
  729.   background: #464646;
  730.   background: linear-gradient(
  731.     to bottom right,
  732.     transparent 50%,
  733.     #000000bb 50%
  734.   );
  735. }
  736.  
  737. #volume_control::-moz-range-track {
  738.   height: 1.5rem;
  739.   margin: 0;
  740.   width: 100%;
  741.   background: #464646;
  742.   background: linear-gradient(
  743.     to bottom right,
  744.     transparent 50%,
  745.      #000000bb 50%
  746.   );
  747. }
  748.  
  749.  
  750. #volume_control::-webkit-slider-thumb {
  751.   -webkit-appearance: none;
  752.   height: 1.9rem;
  753.   width: 0.5rem;
  754.   background: #ffffff;
  755.   border: 1px solid;
  756.   margin-top: -3px;
  757.   border-radius: 3px;
  758. }
  759.  
  760.  
  761.  
  762. #volume_control::-moz-range-thumb {
  763.   -webkit-appearance: none;
  764.   height: 1.9rem;
  765.   width: 0.5rem;
  766.   background: #ffffff;
  767.   border: 1px solid;
  768.   border-radius: 3px;
  769.   margin-top: 0;
  770. }
  771.  
  772. #volume_control:focus::-moz-range-thumb {
  773.   box-shadow: 0px 0px 7px 3px #0065c4;
  774. }
  775.  
  776.  
  777. .control_option{
  778.     color:rgba(255,255,255,.85);
  779.     background:transparent;
  780.     border:outset thin;
  781.     border-radius: 15px;
  782.     padding-left: 8px;
  783.     padding-right: 8px;
  784. display:inline-flex;
  785. }
  786. .time_adjust_head{
  787.     border: solid thin #777;
  788.     background: #222;
  789.     color: #eee;
  790.     display: inline-flex;
  791.     align-items: center;
  792. }
  793. [id*="time_settings"]{
  794.     margin-top: 8px;
  795.     width: 100%;
  796.     justify-content: space-between;
  797.     align-items: baseline;
  798. }
  799. #time_{
  800. transform: scale(0.8,0.8);
  801. margin-right:5px;
  802. position:relative;
  803. top:0.5px;
  804. left: -4px;
  805. }
  806. #time_diff{
  807.     transform: scale(1.1,1.1);
  808.     position: relative;
  809.     left: -4px;
  810. }
  811. #more_shortcutkey{
  812.     background: #4d4d4d;
  813.     color: #ccc;
  814.     border: solid thin #777;
  815.     padding-right:0px;
  816.     padding-left:0px;
  817. }
  818. #restart span{
  819.     transform: scale(0.9,0.9);
  820. }
  821. #more_shortcutkey span{
  822.     transform: scale(0.8,0.8);
  823. }
  824. .shortcut_navi{
  825.     background: #4d4d4d;
  826.     color:#ccc;
  827.     padding:1px 5px 2px 5px;
  828.     border-radius: 5px;
  829.     margin-left: 2px;
  830. }
  831. .shortcut-navi-display-block {
  832.     display:block;
  833.     background: #4d4d4d;
  834.     color: #ccc;
  835.     margin-left: auto;
  836.     margin-right: auto!important;
  837.     width: min-content;
  838.     padding: 1px 3px 1px 3px;
  839.     border-radius: 5px;
  840. 	margin-top: 3px;
  841.     font-size: 10px;
  842. }
  843. .control-option2 {
  844.     border-radius: 15px;
  845.     width: 12rem;
  846.     display: inline-flex;
  847.     justify-content: center;
  848.     border: none;
  849.     padding: 1px 10px 0px 10px;
  850.     color: #FFF;
  851. }
  852. .short_popup{
  853.     position: absolute;
  854.     background: hsl(0deg 0% 8%);
  855.     border: solid #FFF;
  856.     z-index: 5;
  857.     font-weight: 600;
  858.     display:none;
  859. 	padding-top:1.5rem;
  860. }
  861. #shortcut {
  862.     top: 252px;
  863.     right: 0;
  864. }
  865. #shortcut > div{
  866. margin-bottom:1.5rem;
  867. display: flex;
  868. justify-content: flex-start;
  869. }
  870. #practice-shortcutkeys{
  871.     margin-top: 1rem;
  872. }
  873. #practice-shortcutkeys > div{
  874. margin-bottom:12px;
  875. }
  876. .line-list-text-shadow{
  877.     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;
  878. }
  879. `
  880. 	document.getElementsByTagName('HEAD').item(0).appendChild(setting_css);