API tools faq
paste
Advertisement
Turgen

GUICSS

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