API tools faq
paste
Advertisement
Mac15001900

Stylesheet experiment

Mac15001900
May 6th, 2015
412
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
CSS 9.36 KB | None | 0 0
raw download clone embed print report
  1. /*ahklanding8*/
  2. body
  3.     {background:#E68D37;}
  4. #log div:nth-child(2)::after{
  5.     content: 'version 1.8.1';
  6. }
  7. #box-store{
  8.     width: 612px;
  9.     //width: 816px;
  10.     border-collapse:collapse;
  11.     height: 100%;
  12.     float: right;
  13. }
  14. #title
  15.     {position: fixed;
  16.     left: 320px;
  17.     right: 602px;
  18.     top: 28px;
  19.     height: 5%;
  20.     border-style: hidden;
  21.     box-shadow: initial;}
  22. .gametitle
  23.     {font-size: 40px;
  24.     background-color: blue;}
  25. .gametitle .gameAuthor::before{
  26.     content: ' nope ';
  27. }
  28. #upgrades
  29.     {height: auto;
  30.     width: auto;
  31.     overflow: auto;
  32.     left: 315px;
  33.     right: 602px;
  34.     top: 28px;
  35.     margin-top: 40px;
  36.     bottom: 35%;
  37.     margin-bottom: 0px;
  38.     position: fixed;
  39.     border-style: groove;
  40.     border-color: blue;}
  41. #clickables
  42.     {position: fixed;
  43.     left: 315px;
  44.     /*right: 65%;*/
  45.     min-width: 140px;
  46.     width: 140px;
  47.     top: 65%;
  48.     margin-top: -3px;
  49.     margin-right: -1px;
  50.     bottom: 2%;
  51.     overflow-x: none;
  52.     overflow-y: auto;
  53.     border-style: groove;
  54.     border-color: blue;}
  55. #achievements
  56.     {min-width: 1px;
  57.     position: fixed;
  58.     right: 602px;
  59.     left: 476px;
  60.     top: 65%;
  61.     bottom: 2%;
  62.     margin-top: -3px;
  63.     margin-left: -1px;
  64.     overflow-x: none;
  65.     overflow-y: auto;
  66.     border-style: groove;
  67.     border-color: blue;}
  68. #resources
  69.     {position: fixed;
  70.     top: 28px;
  71.     bottom: 30px;
  72.     width: 300px;
  73.     float: left;
  74.     overflow-x: none;
  75.     overflow-y: auto;
  76.     border-style: groove;
  77.     border-color: blue;}
  78. #popups{
  79.     bottom: 35px;
  80.     left: 12px;
  81. }
  82. #buildings
  83.     {/*position: fixed;*/
  84.     top: 28px;
  85.     bottom: 30px;
  86.     float: right;
  87.     /*width: 300px;*/
  88.     overflow-x: none;
  89.     overflow-y: auto;
  90.     z-index: 42;
  91.     border-style: groove;
  92.     border-color: blue;
  93.     display:inline-block;
  94.     padding-left: 11px;
  95.     padding-right:0px;
  96.     padding-bottom: 12px;
  97.     }
  98. #buildings>td{
  99.     height:100%;
  100. }
  101. #clickableTitle
  102.     {display: none;}
  103. .biggerresource
  104.     {font-size: 18px;}
  105. .bigresource
  106.     {font-size: 16px;}
  107. .smallresource
  108.     {font-size: 12px;}
  109. .upgrade
  110.     {margin: 1px;}
  111. .bought
  112.     {/*font-size: 0px;*/
  113.     margin: 2px;
  114.     padding: 0px;}
  115. .upgrade .upgradeType
  116.     {font-weight: bold;}
  117. /*#save
  118.     {position:fixed;
  119.     left:78%;
  120.     top:80%;
  121.     height:17%;}*/
  122. .achievement
  123.     {/*font-size: 0px;*/
  124.     margin: 2px;
  125.     padding: 0px;}
  126.    
  127.    
  128.    
  129.    
  130. /*Buildings*/
  131.    
  132. .costs .label
  133.     {font-size: 0px;}
  134. #buildingTitle
  135.     {display:none;}
  136.    
  137. .building{
  138.     opacity: 0.87;
  139.     background: black;
  140.     border: 2px solid rgb(2, 250, 2);
  141.     border-style: solid;
  142.     width: 170px;
  143.     height:100%;
  144.     vertical-align: text-top;
  145.     margin-top: 8px;
  146.     margin-right:0px;
  147.     margin-left:4px;
  148.     /*display:inline-block;*/
  149. }
  150. .building .name.buildingType{
  151.     font-size: 16px;
  152.     font-weight: bold;
  153.     position: absolute;
  154.     width: 100%;
  155. }
  156. .building .name~.amount{
  157.     position: absolute;
  158.     right: 3px;
  159.     bottom: 3px;
  160.     font-size: 16px;
  161.     font-weight: bold
  162. }
  163. .building:not(.moreThan0) .name~.amount{
  164.     font-size: 0px;
  165. }
  166. .building:not(.moreThan0) .name~.amount::after{
  167.     content: 'NEW';
  168.     font-size: 16px;
  169. }
  170.  
  171.  
  172. .building .costs .cost:first-child{
  173.     margin-top: 19px;
  174. }
  175. .building .costs .disabled{
  176.     color: rgb(255,120,120);
  177. }
  178. .occupations  .label{
  179.     font-size:0px;
  180. }
  181. .occupations .label::after{
  182.     font-size:12px;
  183.     content: 'occupies ';
  184. }
  185. .occupations .disabled{
  186.     color: rgb(255,120,120);
  187. }
  188.  
  189. .building .sell{
  190.     width: 30px;
  191.     padding-left: 2px;
  192.     padding-right: 2px;
  193. }
  194. .building .sell:hover, .building .sell:focus{
  195.     background-color: rgb(200,50,50);
  196. }
  197. .line{
  198.     height:1px;
  199.     min-height: 1px;
  200.     opacity: 0;
  201.     width: 100%;
  202.     margin: 0px;
  203.     padding: 0px;
  204.     border: none;
  205.     width: 500px;
  206. }
  207. .line .name, .line  .amount{
  208.     display:none;
  209. }
  210.  
  211.  
  212.  
  213. .upgrade{
  214.     opacity: 0.80;
  215.     background: black;
  216.     border: 1px solid rgb(2, 250, 2);
  217.     border-style: solid;   
  218.     vertical-align: middle;
  219. }  
  220. .upgrade.bought{
  221.     //background: black;
  222.     opacity: 0.7;
  223.     border-color: white;
  224. }
  225. .thing.disabled {
  226.   opacity: 0.50;
  227.   border-color: rgb(255, 2, 2);
  228.   background: black;
  229.   color: limegreen;}
  230. .upgrade .costs .disabled{
  231.     color: rgb(255,100,100);
  232. }
  233.  
  234. .clickable{
  235.     opacity: 0.80;
  236.     background: black;
  237.     border: 1px solid rgb(2, 250, 2);
  238.     border-style: solid;
  239.     margin-left: auto;
  240.     margin-right: auto;
  241. }
  242. .clickables:active{
  243.     -webkit-transform:scale(0.98,0.98);opacity:1;
  244. }
  245.  
  246. /*Rescources*/
  247.  
  248. #resourceTitle{
  249.     font-size: 0px;
  250.     width: 100%;
  251.     background-color: rgba(5,5,5,.3);
  252.     text-align: center;
  253.     margin-top: 2px;
  254.     margin-bottom: 2px;
  255.     padding-top: 1px;
  256.     padding-bottom: 1px;
  257. }
  258. #resourceTitle::after{
  259.     content: 'Key resources';
  260.     font-size: 14px;
  261. }
  262.  
  263. .resource{
  264.     margin-top: 1px;
  265.     margin-bottom: 1px;
  266. }
  267.  
  268. .resHeader{
  269.     font-size: 0px;
  270.     width: 100%;
  271.     background-color: rgba(5,5,5,.3);
  272.     text-align: center;
  273.     margin-top: 2px;
  274.     margin-bottom: 2px;
  275.     padding-top: 1px;
  276.     padding-bottom: 1px;
  277. }
  278. .resHeader .name{
  279.     font-size: 14px;
  280.     font-weight: bold;
  281. }
  282.  
  283.  
  284. /*Achievements*/
  285.  
  286. .achievement{
  287.     border: hidden;
  288.     box-shadow: initial;
  289.     font-size: 15px;
  290. }
  291. .achievement:hover{
  292.     background-color: rgba(10,10,10,0.3);
  293. }
  294. .achievement div:after{
  295.     content: ',';
  296. }
  297. .stats .title{
  298.     font-size:0px;
  299. }
  300. .stats .title:after{
  301.     content: 'Story';
  302.     font-size:15px;
  303. }
  304.  
  305.  
  306. /*Titles*/
  307. .gameTitle:not(.title) + .gameAuthor{
  308.     color: rgb(50,250,50);
  309.     font-size:0px;
  310. }
  311. .gameTitle:not(.title) + .gameAuthor::after{
  312.     color: rgb(50,250,50);
  313.     font-size: 10px;
  314.     content: 'Mac15001900';
  315. }
  316. .gameTitle:not(.title){
  317.     font-size: 0px;
  318. }
  319. .gameTitle:not(.title)::after{
  320.     font-size: 10px;
  321.     color: rgb(50,250,50);
  322.     content: 'Cut Trees, Reach Singularity';
  323. }
  324.  
  325. #title{
  326.     border-style: hidden;
  327.     font-size: 25px;
  328.     color: rgb(0,255,0);
  329.     text-align: center;
  330. }
  331. #title>.gameAuthor{
  332.     color: blue;
  333.     background: yellow;
  334.     }
  335.  
  336. /*#title>.gameAuthor:before{
  337.     content:' nope ';
  338.     font-size: 0px;
  339.     background: yellow;}*/
  340.  
  341. #tooltip{
  342.     border-style: groove;
  343.     border-color: rgb(40,255,40);
  344.     background: white;
  345.     background-color: rgba(2,0,2,0.93);
  346. }
  347. #tooltip .name{
  348.     text-align: center;
  349.     color: rgb(40,255,40);
  350.     margin-bottom: 8px;
  351. }
  352. #tooltip .description{
  353.     /*color: rgb(40,255,40);*/
  354. }
  355.    
  356. #topBar .gameAuthor{
  357.     color: green;
  358. }
  359. #topBar>div{
  360.     color: rgb(80,255,80);
  361. }
  362.    
  363.    
  364. #tooltip b{
  365.     color: rgb(40,255,40);
  366. }
  367. #tooltip i{
  368.     text-decoration: none;
  369.     font-style: normal;
  370.     font-weight: bold;
  371.     color: rgb(255,40,40);
  372. }
  373.    
  374.  
  375. /*Savebox*/
  376.  
  377. #saveBox{
  378.     border-style: groove;
  379.     border-color: blue;
  380.     opacity: 0.87;
  381.     background: black;
  382.     float: right;
  383.     min-width: 1px;
  384.     margin-bottom: 10px;
  385. }
  386. #saveBox .button:last-child{
  387.     border: 2px solid rgb(200, 30, 30);
  388.     color: rgb(200, 30, 30);
  389.     float: right;
  390. }
  391. #saveBox .button:last-child:hover{
  392.     background:rgba(200,50,50,0.2);
  393. }
  394. #saveBox .button:first-child{
  395.     border: 2px solid rgb(2, 250, 2);
  396. }
  397. #saveBox .button:first-child:hover{
  398.     background:rgba(50,200,50,0.6);
  399. }
  400.  
  401.  
  402. /*Popups*/
  403. .popup{
  404.     border-style: groove;
  405.     border-color: rgb(40,255,40);
  406.     background: white;
  407.     background-color: rgba(2,0,2,0.93);
  408.     color: white;
  409. }
  410. .popup b{
  411.     color: rgb(40,250,40);
  412. }
  413. .popup .close:hover{
  414.     background-color: rgba(150,20,20,0.93);
  415. }
  416. .popup .close{
  417.     top: 0px;
  418.     padding-bottom: 8px;
  419.     padding-left: 5px;
  420. }
  421.  
  422.  
  423. /*Changelog*/
  424. #log
  425.     {background: rgba(20,20,20,0.85);
  426.     width: 300px;
  427.     min-width: 300px;
  428.     height: 15px;}
  429. /*#log div{
  430.     font-size: 0px;
  431. }*/
  432. #log div::after{
  433.     font-size: 10px;
  434. }
  435. #log div:first-child, #log div:nth-child(2){
  436.     width: 100%;
  437.     text-align: center;
  438.     margin-bottom: 2px;
  439. }
  440. #log div:first-child::after{
  441.     font-size: 20px;
  442.     content: 'Changelog';
  443. }
  444. #log div:nth-child(2)::after{
  445.     font-size: 12px;
  446. }
  447. #log div:last-child::after{
  448.     font-size: 0px;
  449. }
  450. #log div:nth-child(3)::after{
  451.     content: 'TO-DO: make a working changelog';
  452. }
  453.  
  454.  
  455.  
  456.  
  457. /*Begin testing grounds. Proceed with caution*/
  458.  
  459. .button:not(.disabled){
  460.   /*display: inline-block;
  461.   vertical-align: middle;*/
  462.   -webkit-transform: translateZ(0);
  463.   transform: translateZ(0);
  464.   /*box-shadow: 0 0 1px rgba(0, 0, 0, 0);*/
  465.   -webkit-backface-visibility: hidden;
  466.   backface-visibility: hidden;
  467.   -moz-osx-font-smoothing: grayscale;
  468.   position: relative;
  469.   /*background: #e1e1e1;*/
  470.   -webkit-transition-property: color;
  471.   transition-property: color;
  472.   -webkit-transition-duration: 0.3s;
  473.   transition-duration: 0.3s;
  474. }
  475. .button:not(.disabled)::before{
  476.   content: '';
  477.   position: absolute;
  478.   z-index: -1;
  479.   top: 0;
  480.   left: 0;
  481.   right: 0;
  482.   bottom: 0;
  483.   background: #2ac52a;
  484.   -webkit-transform: scale(0);
  485.   transform: scale(0);
  486.   -webkit-transition-property: transform;
  487.   transition-property: transform;
  488.   -webkit-transition-duration: 0.3s;
  489.   transition-duration: 0.3s;
  490.   -webkit-transition-timing-function: ease-out;
  491.   transition-timing-function: ease-out;
  492. }
  493. .button:not(.disabled):hover, .button:not(.disabled):focus, .button:not(.disabled):active {
  494.   color: white;
  495. }
  496. .button:not(.disabled):hover:before, .button:not(.disabled):focus:before, .button:not(.disabled):active:before {
  497.   -webkit-transform: scale(1);
  498.   transform: scale(1);
  499. }
  500.  
  501. #saveBox .button:last-child::before{
  502.     background: rgb(100,25,25);
  503. }
  504.  
  505.  
  506. /*Things that don't work and probably won't until an IGM update (aka never)*/
  507.  
  508.  
  509. /*@font-face {
  510.     font-family: titleFont;
  511.     src: url(http://www.dafont.com/old-republic.font);
  512. }*/
  513.  
  514.  
  515. /*@media screen and (max-width: 1700px){
  516.     #box-store{width: 612px;}
  517. }*/
  518. /*@media screen and (max-width: 300px) {
  519.     body {
  520.         background-color: lightblue;
  521.     }
  522. }*/
  523.  
  524. div[id="support"]
  525. {
  526.     position: fixed;
  527.     margin-right: 15px;
  528.     right: 13%;
  529.     bottom: 0;
  530. }
  531.  
  532. </style>
  533. <script>alert('worth trying though');
  534. </script>
  535. <style>
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!