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);