terrain-generator

digital terrain generation and animation
git clone https://tongong.net/git/terrain-generator.git
Log | Files | Refs | README

styles.css (2281B)

      1 @font-face {
      2     font-family: "Montserrat";
      3     font-style: normal;
      4     font-weight: 700;
      5     src: local("Montserrat Bold"), local("Montserrat-Bold"), url("../fonts/montserrat-v14-latin-700.woff2") format("woff2"),
      6         /* Chrome 26+, Opera 23+, Firefox 39+ */ url("../fonts/montserrat-v14-latin-700.woff") format("woff"); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
      7 }
      8 
      9 @keyframes rotate {
     10     from {
     11         transform: rotate(0);
     12     }
     13     to {
     14         transform: rotate(360deg);
     15     }
     16 }
     17 
     18 .icon.animated {
     19     animation: rotate 0.8s;
     20 }
     21 
     22 .icon {
     23     float: right;
     24 }
     25 
     26 #defaultCanvas0 {
     27     z-index: 0;
     28     width: 100%;
     29     height: 100%;
     30     position: absolute;
     31     top: 0;
     32     left: 0;
     33 }
     34 
     35 #overlay {
     36     z-index: 1;
     37     position: absolute;
     38     top: 0;
     39     right: 0;
     40     margin: 10px;
     41 }
     42 
     43 #settings {
     44     margin: 10px;
     45     z-index: 2;
     46     right: -310px;
     47     position: absolute;
     48     top: 50px;
     49     width: 270px;
     50     height: 250px;
     51     background-color: #000000;
     52     border-radius: 20px;
     53     padding: 15px;
     54     padding-top: 0;
     55     -webkit-transition: right 500ms ease-in;
     56     -moz-transition: right 500ms ease-in;
     57     transition: right 500ms ease-in;
     58 }
     59 
     60 #settings.in {
     61     right: 0px;
     62 }
     63 
     64 body {
     65     margin: 25px;
     66     height: 100%;
     67     overflow: hidden;
     68 }
     69 
     70 #tongong {
     71     position: absolute;
     72     right: 15px;
     73     bottom: 15px;
     74     margin: 0;
     75 }
     76 
     77 p {
     78     color: white;
     79     font-family: "Montserrat", sans-serif;
     80 }
     81 
     82 a {
     83     color: white;
     84     text-decoration: none;
     85     position: relative;
     86     overflow: hidden;
     87     top: 3px;
     88     display: inline-block;
     89 }
     90 
     91 a:before {
     92     left: 0;
     93     bottom: 0;
     94     width: 100%;
     95     height: 2px;
     96     background: #ffffff;
     97     transform: translateX(-100%);
     98     position: absolute;
     99     transition: transform 0.5s ease;
    100     content: "";
    101 }
    102 
    103 a:hover:before {
    104     transform: translateX(0);
    105 }
    106 
    107 .slider {
    108     -webkit-appearance: none;
    109     width: 100%;
    110     height: 10px;
    111     border-radius: 5px;
    112     background: #ffffff;
    113     outline: none;
    114 }
    115 
    116 .slider::-webkit-slider-thumb {
    117     -webkit-appearance: none;
    118     appearance: none;
    119     width: 25px;
    120     height: 25px;
    121     border-radius: 50%;
    122     background: white;
    123     border: none;
    124 }
    125 
    126 .slider::-moz-range-thumb {
    127     width: 25px;
    128     height: 25px;
    129     border-radius: 50%;
    130     background: white;
    131     border: none;
    132 }