API tools faq
paste
Advertisement
Turgen

SSM2CSS

Turgen
Dec 3rd, 2019 (edited)
27,898
1
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
CSS 19.24 KB | None | 1 0
raw download clone embed print report
  1. //SSM2CSS
  2. $yellow: #FFE800;
  3. $brown: #404040;
  4. $blue: #1CD3F8;
  5. $angle: 8px;
  6. $angle-o: 4px;
  7.  
  8.  
  9. .box
  10. {
  11.     text-align:center;
  12.     padding:0px;
  13.     box-shadow:none;
  14. }
  15.  
  16. .thing,.box-header,.box-footer,.box-bit
  17. {
  18.     background:#39f;
  19.     box-shadow:0px 0px 4px rgba(0,0,0,0.2),1px 1px 2px rgba(0,0,0,0.5),0px 0px 4px rgba(255,255,255,0.5) inset;
  20. }
  21. .box-bit{border-radius:0px;}
  22.  
  23. .box-header
  24. {
  25.     border-bottom-left-radius:20px;
  26.     border-bottom-right-radius:20px;
  27.     margin-bottom:0px;
  28.     text-align: center;
  29. }
  30. .box-footer
  31. {
  32.     border-top-left-radius:20px;
  33.     border-top-right-radius:20px;
  34.     margin-top:1px;
  35. }
  36.  
  37.  
  38. #game{
  39. background-image: hidden !important;
  40. z-index: 3 !important;
  41. }
  42.  
  43. .thing .shiny .noClick .noText{
  44.  
  45. z-index: -1 !important;
  46.  
  47. }
  48.  
  49. .thing .shiny .bigButton .noText{
  50.  
  51. z-index: 4 !important;
  52.  
  53. }
  54.  
  55.  
  56.  
  57. .shiny-icon{
  58.  
  59.  
  60. //opacity: 0.2;
  61. //transform: rotate(90deg) !important;
  62.  
  63. }
  64.  
  65. #box-main
  66. {
  67.     left:0px;
  68.     top:0px;
  69.     bottom:0px;
  70.     overflow:hidden;
  71.     width:30%;
  72.     position:absolute;
  73. }
  74. #box-res.fullWidth
  75. {
  76.     width:100%;
  77.     top:40%;
  78.     height:5%;
  79.     min-height:32px;
  80.     z-index:100;
  81.     position:absolute;
  82. }
  83. #box-buttons
  84. {
  85.     top:0px;
  86.     right:0px;
  87.     bottom:0px;
  88.     left:0px;
  89.     position:absolute;
  90. }
  91. #box-store
  92. {
  93.     right:0px;
  94.     top:0px;
  95.     bottom:0px;
  96.     margin-bottom:0px;
  97.     width:70%;
  98.     position:absolute;
  99. }
  100. #box-buildings,#box-upgrades,#box-buildings2,#box-upgrades2
  101. {
  102.     top:0px;
  103.     bottom:0px;
  104.     width:25%;
  105.     //right:0px;
  106.     overflow-x:hidden;
  107.     overflow-y:scroll;
  108.     padding-bottom:48px;/* this is to accommodate the info and settings buttons */
  109.     position:absolute;
  110. }
  111. #box-buildings
  112. {right:75%;}
  113.  
  114. #box-upgrades
  115. {right:50%;}
  116.  
  117. #box-buildings2
  118. {
  119. right:0%;
  120.  
  121. }
  122.  
  123. #box-upgrades2
  124. {right:25%;}
  125.  
  126.  
  127. //#box-buildings{background:linear-gradient(to right,rgba(0,0,0,0) 0%,rgba(0,0,0,0.25) 20%);}
  128. //#box-upgrades{background:rgba(0,0,0,0.3);}
  129. //#box-buildings2{background:linear-gradient(to right,rgba(0,0,0,0) 0%,rgba(0,0,0,0.25) 20%);}
  130. //#box-upgrades2{background:rgba(0,0,0,0.3);}
  131.  
  132. #bulkDisplay{margin:-11px 24px 4px 24px;}
  133.  
  134.  
  135. .thing
  136. {
  137.     display:inline-block;
  138.     padding:auto;
  139.     margin:auto;
  140.     margin-bottom:1px;
  141.     cursor:pointer;
  142. }
  143. .thing:hover,.thing.lit
  144. {
  145.     background:#6cf;
  146. }
  147. .thing.cantAfford
  148. {
  149.     opacity:0.65;
  150. }
  151. .upgrade.cantAfford
  152. {
  153.     box-shadow:0px 0px 4px #39f;
  154.     border-radius:8px;
  155. }
  156. .upgrade.cantAfford:hover
  157. {
  158.     box-shadow:0px 0px 4px #6cf;
  159. }
  160. .upgrade.owned,.achiev.owned
  161. {
  162.     background:#6cf;
  163. }
  164. .thing-text,.thing-costs{font-weight:bold;}
  165.  
  166.  
  167.  
  168. .building
  169. {
  170.     padding-left: 10% !important;
  171.     border-top-left-radius:20px;
  172.     border-bottom-left-radius:20px;
  173.     display:block;
  174.     padding-right: auto;
  175.     margin-right:auto;
  176.     font-size:14px;
  177. }
  178.  
  179. .fullWidth
  180. {
  181.     display:block;
  182.     margin-left:0px;
  183.     margin-right:0px;
  184.     z-index:10;
  185. }
  186. #game .fullWidth
  187. {
  188.     height:auto;
  189.     min-height:auto;
  190. }
  191. .fullWidth,.fullWidth:hover
  192. {
  193.     /*background:rgba(0,0,0,0.5);
  194.     background:linear-gradient(to bottom,rgba(0,0,0,0.5) 0%,rgba(0,0,0,0.25) 50%,rgba(0,0,0,0.5) 100%);*/
  195.     background:linear-gradient(to right,rgba(0,0,0,0) 0%,rgba(0,0,0,0.25) 50%,rgba(0,0,0,0) 100%);
  196.     box-shadow:none;
  197. }
  198. .fullWidth:before,.fullWidth:after
  199. {
  200.     content:'';
  201.     height:1px;
  202.     background:linear-gradient(to right,rgba(255,255,255,0) 0%,rgba(255,255,255,0.25) 50%,rgba(255,255,255,0) 100%);
  203.     position:absolute;
  204.     left:0px;
  205.     right:0px;
  206.     z-index:-1;
  207. }
  208. .fullWidth:before{top:-1px;}
  209. .fullWidth:after{bottom:-1px;}
  210.  
  211. .fullWidth .thing-icon
  212. {
  213.     margin-top:-14px;
  214.     margin-bottom:-14px;
  215. }
  216. .fullWidth .thing-text
  217. {
  218.     margin-top:-4px;
  219.     margin-bottom:-4px;
  220. }
  221.  
  222. #game.filtersOn .thing-icon{filter:drop-shadow(0px 0px 0px rgba(0,0,0,0));}
  223.  
  224.  
  225. //---------------------------------------------------------------------------------------------------------
  226.  
  227.  
  228.  
  229.  
  230.  
  231. #game
  232.   {
  233.     background:#002130;
  234.     background-size: cover;
  235.     font-family: DejaVu Sans Mono, monospace !important;
  236.     letter-spacing: 0px;
  237.     //font-size: 12px;
  238.     font-stretch: ultra-expanded;
  239.    
  240.    // font-family:Century Gothic,sans-serif;
  241.     //font-weight:100;
  242.     color:#93f8ff;
  243.   }
  244. .upgrade, .building
  245.   {
  246.  
  247. background-repeat: no-repeat;
  248.     font-weight:100 !important;
  249.     margin-top:0px;
  250.     padding: 6% 6%;
  251.     text-align: left;
  252.     //height: 48px;
  253.     border-radius:0px;
  254.     //background:#002130;
  255.     border: 0px solid #002130;
  256.     background:rgba(255,255,255,0.0);
  257.     background-image: linear-gradient(to right, #00000000 , #4286f433 , #93f8ff55);
  258.     width: 100%;
  259.  
  260.   transition: all .15s linear 0s;
  261.   position: relative;
  262.   display: inline-block;
  263.  
  264.   background-color: $yellow;
  265.   color: $brown;
  266.  
  267.  
  268.  
  269.   box-shadow: -6px 6px 0 $brown;
  270.   text-decoration: none;
  271.  
  272.   &:hover {
  273.     top: 3px;
  274.     left: -3px;
  275.     box-shadow: -3px 3px 0 $brown;
  276.    
  277.     &::after {
  278.       top: 1px;
  279.       left: -2px;
  280.       width: $angle-o;
  281.       height: $angle-o;
  282.     }
  283.    
  284.     &::before {
  285.       bottom: -2px;
  286.       right: 1px;
  287.       width: $angle-o;
  288.       height: $angle-o;
  289.     }
  290.   }
  291.  
  292.   &::after {
  293.     transition: all .15s linear 0s;
  294.     content: '';
  295.     position: absolute;
  296.     top: 2px;
  297.     left: -4px;
  298.     width: $angle;
  299.     height: $angle;
  300.     background-color: $brown;
  301.     transform: rotate(45deg);
  302.     z-index: -1;
  303.    
  304.   }
  305.  
  306.   &::before {
  307.     transition: all .15s linear 0s;
  308.     content: '';
  309.     position: absolute;
  310.     bottom: -4px;
  311.     right: 2px;
  312.     width: $angle;
  313.     height: $angle;
  314.     background-color: $brown;
  315.     transform: rotate(45deg);
  316.     z-index: -1;
  317.   }
  318. }
  319.  
  320. .thing-text
  321. {
  322.  
  323.  
  324.  
  325. }
  326. .thing-icon
  327. {
  328.    
  329.  }
  330.  
  331.  
  332. #thing-0
  333.   {
  334.    
  335.     background-repeat: no-repeat;
  336.     //max-width: 250px;
  337.     //max-height: 250px;
  338.     padding: 0px 50px;
  339.     border-radius:50%;
  340.     float: left;
  341.     padding-left: 21%;
  342.     background:rgba(0,55,79,0.00);
  343.      
  344.    
  345.  
  346. /*-webkit-animation-name: spin;
  347.     -webkit-animation-duration: 4000ms;
  348.     -webkit-animation-iteration-count: infinite;
  349.     -webkit-animation-timing-function: linear;
  350.     -moz-animation-name: spin;
  351.     -moz-animation-duration: 4000ms;
  352.     -moz-animation-iteration-count: infinite;
  353.     -moz-animation-timing-function: linear;
  354.     -ms-animation-name: spin;
  355.     -ms-animation-duration: 4000ms;
  356.     -ms-animation-iteration-count: infinite;
  357.     -ms-animation-timing-function: linear;
  358.    
  359.     animation-name: spin;
  360.     animation-duration: 910000ms;
  361.     animation-iteration-count: infinite;
  362.     animation-timing-function: linear;*/
  363. }
  364. @-ms-keyframes spin {
  365.     from { -ms-transform: rotate(0deg); }
  366.     to { -ms-transform: rotate(360deg); }
  367. }
  368. @-moz-keyframes spin {
  369.     from { -moz-transform: rotate(0deg); }
  370.     to { -moz-transform: rotate(360deg); }
  371. }
  372. @-webkit-keyframes spin {
  373.     from { -webkit-transform: rotate(0deg); }
  374.     to { -webkit-transform: rotate(360deg); }
  375. }
  376. @keyframes spin {
  377.     from {
  378.         transform:rotate(0deg);
  379.     }
  380.     to {
  381.         transform:rotate(360deg);
  382.     }
  383. }
  384.  
  385.  
  386.  
  387. #thing-0:hover
  388.   {
  389.    
  390.     padding: 50px 50px;
  391.     border-radius:50%;
  392.     float: left;
  393.     padding-left: 21%;
  394.     color:#93f8ff;
  395.     background:rgba(0,55,79,0.00);
  396.     //background-image: linear-gradient(to right, #00000000 , #4286f466 , #93f8ff99);
  397.    
  398.   }
  399.  
  400. .thing-text{
  401.  
  402. font-weight:100;
  403.  
  404. }
  405.  
  406. #thing-1
  407.   {
  408.     padding: 40px 40px;
  409.     float: left;
  410.     padding-left: 14%;
  411.     width: 90%;
  412.    
  413.   }
  414.  
  415. #thing-2
  416.   {
  417.     padding: 40px 40px;
  418.     padding-left: 14%;
  419.     padding-top: 10px !important;
  420.     float: left;
  421.     width: 90%;
  422.    
  423.   }
  424. #thing-3
  425.   {
  426.     padding: 40px 40px;
  427.     padding-left: 14%;
  428.     padding-top: 10px !important;
  429.     float: left;
  430.     width: 90%;
  431.    
  432.   }
  433. #thing-4
  434.   {
  435.     padding: 40px 40px;
  436.     padding-left: 14%;
  437.     padding-top: 10px !important;
  438.     float: left;
  439.     width: 90%;
  440.    
  441.   }
  442.  
  443.  
  444. .building:hover {
  445.  top: 0px !important;
  446. right: 0px !important;
  447. left: 0px !important;
  448.     //transform: skew(30deg);
  449.    
  450. }
  451.  
  452. .thing:hover
  453.   {
  454.     border: 0px solid #93f8ff;
  455.     //background:#002130;
  456.     color:#93f8ff;
  457.     background:rgba(0,55,79,0.00);
  458.     background-image: linear-gradient(to right, #00000000 , #4286f466 , #93f8ff99);
  459.    
  460.   }
  461. .thing:active
  462.   {
  463.    
  464.     border: 0px solid #FFFFFF;
  465.     background:#002130;
  466.     color:#002130;
  467.     transform: translateY(2px);
  468.     background:rgba(255,255,255,0.0);
  469.     background-image: linear-gradient(to right, #00000000 , #93f8ff55);
  470.   }
  471.  
  472. .upgrade.owned, .achiev.owned {
  473.     //width: 100%;
  474.     //padding: 6% 6%;
  475.     text-align: left;
  476.     //height: 48px;
  477.     border-radius:0px;
  478.     //background:#002130;
  479.     border: 0px solid #002130;
  480.     background:rgba(255,255,255,0.0);
  481.     background-image: linear-gradient(to right, #00000000 , #4286f433 , #93f8ff55);
  482. }
  483. .upgrade:hover{
  484. top: 0px !important;
  485. right: 0px !important;
  486. left: 0px !important;
  487.     //width: 100%;
  488.     float: left;
  489.     border: 0px solid #93f8ff;
  490.     //background:#002130;
  491.     color:#93f8ff;
  492.     text-align: left;
  493.     background:rgba(0,55,79,0.00);
  494.     background-image: linear-gradient(to left, #00000000 , #4286f466 , #93f8ff99);
  495.     box-shadow: 0px 0px 0px #39f;
  496. }
  497. .upgrade.owned:hover{
  498.     //width: 100%;
  499.     float: left;
  500.     padding: 6% 6%;
  501.     text-align: left;
  502.     //height: 48px;
  503.     border-radius:0px;
  504.     //background:#002130;
  505.     border: 0px solid #002130;
  506.     background:rgba(255,255,255,0.0);
  507.     background-image: linear-gradient(to right, #00000000 , #4286f466 , #93f8ff99);
  508. }
  509. .upgrade.cantAfford {
  510.     //width: 100%;
  511.     float: left;
  512.     padding: 6% 6%;
  513.     text-align: left;
  514.     //height: 48px;
  515.     border-radius:0px;
  516.     //background:#002130;
  517.     border: 0px solid #002130;
  518.     background:rgba(255,255,255,0.0);
  519.     background-image: linear-gradient(to left, #00000000 , #4286f433 , #93f8ff55);
  520.     box-shadow: 0px 0px 0px #39f;
  521. }
  522. .upgrade {
  523.     width: 100%;
  524.     float: left;
  525.     padding: 6% 6%;
  526.     padding-left: 10% !important;
  527.     text-align: left;
  528.     //height: 48px;
  529.     border-radius:0px;
  530.     //background:#002130;
  531.     border: 0px solid #002130;
  532.     background:rgba(255,255,255,0.0);
  533.     background-image: linear-gradient(to left, #00000000 , #4286f433 , #93f8ff55);
  534.     box-shadow: 0px 0px 0px #39f;
  535.     font-family: DejaVu Sans Mono, monospace !important;
  536.     font-size: 14px;
  537. }
  538. .upgrade.notOwned {
  539.     width: 101% !important;
  540.     float: left;
  541.     margin-left: auto;
  542.     margin-right: auto;
  543.     padding: 6% 6%;
  544.     text-align: left;
  545.     //height: 48px;
  546.     border-radius:0px;
  547.     //background:#002130;
  548.     border: 0px solid #002130;
  549.     background:rgba(255,255,255,0.0);
  550.     background-image: linear-gradient(to left, #00000000 , #4286f433 , #93f8ff55);
  551.     box-shadow: 0px 0px 0px #39f;
  552. }
  553.  
  554. .upgrade.notOwned:hover{
  555.    
  556.     //float: left;
  557.     border: 0px solid #93f8ff;
  558.     //background:#002130;
  559.     color:#93f8ff;
  560.     text-align: left;
  561.     background:rgba(0,55,79,0.00);
  562.     background-image: linear-gradient(to left, #00000000 , #4286f466 , #93f8ff99);
  563.     box-shadow: 0px 0px 0px #39f;
  564. }
  565.  
  566.  
  567. .thing,.box-header,.box-footer,.box-bit
  568. {
  569.    
  570.     border: 0px solid #000000;
  571.     //font-family:"Courier",Courier,monospace;
  572.     //font-weight:300;
  573.     color:#93f8ff;
  574.     background:#002130;
  575.     background:rgba(255,255,255,0.0);
  576.     box-shadow:0px 0px 0px rgba(0,0,0,0),0px 0px 0px rgba(0,0,0,0),0px 0px 0px rgba(0,55,79,0) inset;
  577.     background-image: linear-gradient(to right, #00000000 , #4286f433 , #93f8ff55);
  578. }
  579.  
  580. .glow {
  581.     animation: glow 0.0s;
  582. }
  583.  
  584.  
  585.  
  586. .box-header {
  587.    
  588.     margin-bottom:1px;
  589.     padding: 15px 15px;
  590.     height: 40px;
  591.     border: 0px solid #000000;
  592.     border-radius: 0px;
  593.     //font-family: "Courier",Courier,monospace;
  594.     font-size: 18px;
  595.     color: #93f8ff;
  596.     background: #002130;
  597.     background: rgba(255,255,255,0.0);
  598.     box-shadow: 0px 0px 0px rgba(0,0,0,0), 0px 0px 0px rgba(0,0,0,0), 0px 0px 0px rgba(0,55,79,0) inset;
  599.     background-image: linear-gradient(to right, #00000000 , #4286f433 , #93f8ff55);
  600.     text-align: center;
  601. }
  602.  
  603.  
  604. #bulkDisplay {
  605.     position: relative;
  606.     top: 0px;
  607.     margin: 0px 0px 0px 0px;
  608.     margin-bottom: 0px;
  609. }
  610.  
  611. #box-things-Buildings {
  612. position: relative;
  613.    
  614.  
  615. }
  616.  
  617. .box-bit{
  618. padding: 0% 0%;
  619. margin-bottom:0px;
  620. position: relative;
  621. top: 0px;
  622. border-radius: 0px;
  623. background: #00213000;
  624. }
  625.  
  626. //#game.filtersOn .thing-icon{filter:drop-shadow(3px 3px 1px rgba(0,0,0,0.5));}
  627. #game.filtersOn .thing-icon{filter:drop-shadow(0px 0px 0px rgba(0,0,0,0));}
  628.  
  629. .popup, #tooltip, .toast {
  630.     background: #000000FF;
  631.     background-image: linear-gradient(to top, #00000000 , #4286f455);
  632.     //text-shadow: 1px 1px 0px rgba(0,0,0,0.5);
  633.     color: #93f8ff;
  634.     //border: 0px solid #93f8ff;
  635.     //background: url(lib/img/darkNoise.jpg);
  636.     border-radius: 0px;
  637.     /*box-shadow: 0px 0px 0px 1px #000, 0px 0px 0px 2px rgba(255,255,255,0.5), 0px 0px 15px 1px rgba(255,255,255,0.15) inset, 4px 4px 2px rgba(0,0,0,0.25), 4px 4px 20px rgba(0,0,0,0.5);*/
  638.     box-sizing: border-box;
  639.     padding: 8px 8px;
  640.  
  641. }
  642.  
  643.  
  644. #tooltipContent{
  645. color: #93f8ff;
  646. font-weight: 100;
  647.  
  648. }
  649.  
  650. ::-webkit-scrollbar-thumb {
  651.     background: #93f8ff33;
  652.     //background: #1f546a;
  653.  
  654.     //background-image: linear-gradient(to left, #00000000 , #93f8ff55);
  655.     box-shadow: 0px 0px 0px 0px #333 inset, 0px 0px 0px 0px #999 inset, 0px 0px 0px 0px #fff inset;
  656. }
  657.  
  658. ::-webkit-scrollbar-track {
  659.     background: #4286f400;
  660.     box-shadow: 0px 0px 0px 0px #00000000 inset, 0px 0px 0px 0px #444 inset, 0px 0px 0px 0px #222 inset;
  661.     width: 20px !important;
  662. }
  663. ::-webkit-scrollbar-thumb {
  664.     background: #93f8ff33;
  665.     //background: #1f546a;
  666.    
  667.     //background-image: linear-gradient(to left, #00000000, #93f8ff55);
  668.     box-shadow: 0px 0px 0px 0px #000 inset, 0px 0px 0px 0px #999 inset, 0px 0px 0px 0px #fff inset;
  669. }
  670. ::-webkit-scrollbar-thumb:hover {
  671.     background: #93f8ff99;
  672.     //background: #5cb2c5;
  673.  
  674.     box-shadow: 0px 0px 0px 0px #000 inset, 0px 0px 0px 0px #999 inset, 0px 0px 0px 0px #fff inset;
  675. }
  676. .achiev, .achiev:hover{
  677.     padding:5px 5px;
  678.     background-image: linear-gradient(to right, #00000000 , #4286f400 , #93f8ff00);
  679. }
  680. title {
  681.     display: none;
  682. }
  683.  
  684. .my-anim {
  685.     animation-name: my-anim;
  686.     animation-duration: 0s;
  687. }
  688.  
  689. .thing.bigButton, .thing-icon {
  690. top: 21%;
  691. left: 51%;
  692. background-repeat: no-repeat;
  693.     opacity: 1;
  694.     transform: scale(1);
  695.     transition: transform 0.00s ease-out;
  696.    
  697. }
  698. #thing-icon-0{
  699. z-index: -2 !important;
  700.  
  701. }
  702. .thing.bigButton:hover, .thing-icon:hover {
  703. background-repeat: no-repeat;
  704.     transform: scale(1);
  705.     transition: transform 0.00s ease-out;
  706.     transition: transform 0.00s ease-in;
  707.    
  708.    
  709. }
  710.  
  711. #game.filtersOn .shadowed {
  712.     filter: drop-shadow(0px 0px 0px rgba(0,0,0,0.0));
  713. }
  714.  
  715. .wobble {
  716.     animation: wobble 1s;
  717.     transform: scale(1);
  718.     animation-duration: 5s;
  719.     transition: transform 5.00s ease-out;
  720.     transition: transform 0.00s ease-in;
  721. }
  722.  
  723. @keyframes wobble {
  724. 0% {
  725.     opacity: 0.7;
  726.     transform: scale(1.3);
  727. }
  728. 10% {
  729.     opacity: 1;
  730.     transform: scale(1.3);
  731. }
  732. 100%
  733.     opacity: 1;
  734.     transform: scale(1);
  735. }
  736. }
  737.  
  738. .thing.bigButton .thing-icon{transform:scale(1);}
  739. .thing.bigButton:hover .thing-icon{transform:scale(1);}
  740. .thing.bigButton:active .thing-icon{transform:scale(1);}
  741.  
  742. div {
  743.     display: visible !important;
  744. }
  745.  
  746. #bulkDisplay {
  747.     position: relative;
  748.     top: 0px;
  749.     margin: 0px 0px 0px 0px;
  750.     margin-top: 5px;
  751.     margin-right: 0px;
  752.     margin-bottom: 0px;
  753.     margin-left: 0px;
  754.     margin-bottom: 0px;
  755.     visibility: visible !important;
  756.    
  757.     text-align: right;
  758. }
  759.  
  760.  
  761. .box-bit-content{
  762.  
  763. display: inline !important;
  764. }
  765.  
  766. div#bulkDisplay.box-bit {
  767. float: right;
  768. margin-right: auto;
  769. margin-left: auto;
  770.  
  771. }
  772.  
  773. .popup {
  774.     position: relative;
  775.     left: 50%;
  776.     top: 50%;
  777.     width: 30%;
  778.     pointer-events: auto;
  779.     transition: opacity 0.15s,left 0.15s,top 0.15s;
  780.     opacity: 0;
  781. }
  782. .box{
  783. margin: 0px !important;
  784. padding: 0px !important;
  785. }
  786.  
  787. #fpsGraph {
  788.     background: #333;
  789.     color: #93f8ff33;
  790.     position: absolute;
  791.     left: 0px;
  792.     bottom: 0px;
  793.     padding: 3px;
  794.     width: 128px;
  795.     height: 64px;
  796.     z-index: 10000000;
  797.     opacity: 0.5;
  798.     pointer-events: none;
  799. }
  800.  
  801.  
  802.  
  803. #box-upgrades::-webkit-scrollbar, #box-buildings::-webkit-scrollbar, #box-upgrades2::-webkit-scrollbar, #box-buildings2::-webkit-scrollbar {
  804.     width: 8px !important;
  805. }
  806.  
  807. #box-upgrades, #box-buildings, #box-upgrades2, #box-buildings2{
  808.     top: 41px !important;
  809.     overflow-y: auto !important;
  810. }
  811.  
  812. #box-upgrades{
  813. width: 25%;
  814. }
  815.  
  816.  
  817.  
  818. .outFrame #game {
  819.     right: 0% !important;
  820.     bottom: 0px;
  821. }
  822. div#bulkDisplay.box-bit
  823. {
  824.  
  825. }
  826. #box-store{
  827.  
  828. top: 0px !important;
  829. }
  830.  
  831. #box-buildings2Header{
  832.  
  833. right:0%;
  834.  
  835.  
  836. }
  837. #box-upgrades2Header{
  838.  
  839. right:25%;
  840.  
  841.  
  842. }
  843. #box-upgradesHeader{
  844.  
  845. right:50%;
  846.  
  847.  
  848. }
  849. #box-buildingsHeader{
  850.  
  851. right:75%;
  852.  
  853.  
  854. }
  855.  
  856. #box-buildings2Header, #box-upgrades2Header, #box-upgradesHeader, #box-buildingsHeader{
  857. top: 0px;
  858. position:absolute;
  859. width: 25%;
  860. height: 40px;
  861. }
  862.  
  863. #toasts {
  864. position: absolute !important;
  865. right: 72% !important;
  866.  
  867. }
  868. #fpsCounter, #fpsGraph{
  869. position: absolute !important;
  870. bottom: 0px !important;
  871. left: 0px !important;
  872. width: 128px !important;
  873. height: 64px !important;
  874. }
  875.  
  876. #thing-8{
  877. position: absolute !important;
  878. top: -39vh;
  879. font-size: 2.8vh;
  880. left: 0.2vw;
  881. color: #ffffff44;
  882. background-color: #00000000;
  883. background:linear-gradient(to right,rgba(0,0,0,0) 0%,rgba(0,0,0,0.25) 0%,rgba(0,0,0,0) 0%);
  884. }
  885.  
  886. #thing-text-8{
  887. font-weight: 900 !important;
  888. }
  889.  
  890. #thing-9{
  891. position: absolute !important;
  892. top: -37vh;
  893. font-size: 1.8vh;
  894. left: 0.2vw;
  895. color: #93f8ff44;
  896. background-color: #00000000;
  897. background:linear-gradient(to right,rgba(0,0,0,0) 0%,rgba(0,0,0,0.25) 0%,rgba(0,0,0,0) 0%);
  898.  
  899. }
  900.  
  901. #log::-webkit-scrollbar {
  902.   display: none;
  903. }
  904.  
  905.  
  906.  
  907. #logOuter{
  908. border-style: solid !important;
  909. border-radius: 10% !important;
  910. border-color: #FFFFFF !important;
  911. }
  912. #logInner{
  913. display: flex;
  914. flex-direction: column;
  915. width: 20vw !important;
  916. padding: 5%;
  917. font-family: 'Courier Prime', monospace !important;
  918. color: #FFFFFF;
  919. overflow:auto;
  920. }
  921. #box-log{
  922. border-style: solid !important;
  923. border-radius: 10% !important;
  924. border: 1px;
  925. border-color: #FFFFFF !important;
  926. background-color: #002130;
  927. }
  928. .log{
  929. width: 100% !important;
  930. opacity: 50% !important;
  931. top: 81% !important;
  932. left: 4% !important;
  933. height: 12% !important;
  934. width: 20% !important;
  935. }
  936.  
  937. #thing-text-1, #thing-text-2, #thing-text-3, #thing-text-4{
  938.  
  939. }
  940.  
  941. #box-res{
  942. }
  943.  
  944. #thing-icon-1, #thing-icon-2, #thing-icon-3, #thing-icon-4{
  945.  
  946.  
  947. }
  948. #thing-1, #thing-2, #thing-3, #thing-4{
  949.  
  950. }
  951.  
  952. img{object-fit: contain !important;}
  953.  
  954. #box-things-sortup, #box-things-sortup2, #box-things-Upgrades, #box-things-upgrades2  /*if necessary, change this to the name of the box containing your upgrades. it should start with "box-things" and you can use inspect element to find it*/
  955. {
  956.     display:flex;
  957.     flex-wrap:wrap;
  958.     justify-content:center; /*you can change this to "flex-start" if you want upgrades aligned to the left*/
  959.     flex-direction: column-reverse;
  960. }
  961.  
  962. #box-things-Buildings, #box-things-buildings2{
  963.     display:flex;
  964.     flex-wrap:wrap;
  965.     justify-content:center; /*you can change this to "flex-start" if you want upgrades aligned to the left*/
  966.  
  967.     flex-direction: column-reverse;
  968. }
  969.  
  970. .tag-sortup, .tag-sortup2, .building, .thing-77, .upgrade2.notOwned, .upgrade2.cantAfford{
  971.     order:3;
  972. }
  973. .upgrade.notOwned {
  974.     order:2;
  975. }
  976. .upgrade.owned, .upgrade2.owned
  977. {
  978.     order:1;
  979. }#tooltip{
  980.  
  981. width: 38em;
  982.  
  983.  
  984. }
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement
Public Pastes
Advertisement
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!