sleeb

an experimental input method
git clone https://tongong.net/git/sleeb.git
Log | Files | Refs | README

styles.css (2335B)

      1 /* GLOBAL */
      2 html {
      3     width: 100vw;
      4     overflow-x: hidden;
      5 }
      6 body {
      7     height: 100%;
      8     width: 100%;
      9     font-family: monospace, monospace;
     10     background-color: #222;
     11     color: #EEE;
     12     line-height: 1.6em;
     13     font-size: 18px;
     14     margin: 0;
     15 }
     16 a {
     17     text-decoration: underline;
     18     color: #f08700;
     19 }
     20 a:hover {
     21     cursor: pointer;
     22 }
     23 .bold {
     24     font-weight: bold;
     25 }
     26 h1 {
     27     margin-top: 20px;
     28     text-align: center;
     29     line-height: 1.1em;
     30 }
     31 .invisible {
     32     display: none !important;
     33 }
     34 kbd {
     35     border: 1px solid #EEE;
     36     border-bottom: 3px solid #EEE;
     37     border-radius: 5px;
     38     padding: 0.1rem;
     39 }
     40 
     41 
     42 /* LAYOUT */
     43 .header {
     44     margin: 0 auto;
     45     height: 70px;
     46     width: 90%;
     47     max-width: 650px;
     48     display: flex;
     49     flex-direction: row;
     50 }
     51 .header > div {
     52     flex: 1;
     53     text-align: center;
     54     line-height: 65px;
     55 }
     56 .main-content {
     57     height: calc(100vh - 70px);
     58     overflow-y: scroll;
     59     overflow-x: hidden;
     60 }
     61 .main-content > div {
     62     height: calc(100vh - 90px);
     63     margin: 20px auto;
     64     margin-bottom: 0px;
     65     width: 90%;
     66     max-width: 1000px;
     67 }
     68 .main-content > div > div {
     69     height: 100%;
     70     width: 100%;
     71 }
     72 
     73 
     74 /* key visualization boxes */
     75 .keyBoxWrapWrap {
     76     width: 100%;
     77     height: 100%;
     78     position: relative;
     79 }
     80 .keyBoxWrap {
     81     height: 100%;
     82     width: 100%;
     83     display: flex;
     84     justify-content: center;
     85     align-items: center;
     86 }
     87 .keyBox {
     88     height: 100px;
     89     width: 100px;
     90     margin: 20px;
     91     border-radius: 10px;
     92     transition: background-color 0.1s
     93 }
     94 .keyBoxHighlight {
     95     background-color: #f08700;
     96 }
     97 .keyBoxHint {
     98     position: absolute;
     99     top: 0;
    100     right: 0;
    101 }
    102 
    103 /* input page */
    104 .inputTop {
    105     white-space: pre;
    106     width: 100%;
    107     height: 40%;
    108 }
    109 .inputBottom {
    110     width: 100%;
    111     height: 60%;
    112 }
    113 .blindOverlay {
    114     position: fixed;
    115     top: 0;
    116     left: 0;
    117     width: 100vw;
    118     height: 100vh;
    119     background-color: #222;
    120     z-index: 50000;
    121 }
    122 
    123 /* trainer page */
    124 .trainerTop {
    125     position: relative;
    126     width: 100%;
    127     height: 40%;
    128 }
    129 .trainerBottom {
    130     width: 100%;
    131     height: 60%;
    132 }
    133 .bigletter {
    134     width: 100%;
    135     height: 100%;
    136     font-size: 200px;
    137     display: flex;
    138     justify-content: center;
    139     align-items: center;
    140 }
    141 .hint {
    142     position: absolute;
    143     bottom: 0;
    144     left: 0;
    145     width: 100%;
    146     text-align: center;
    147 }
    148 .red {
    149     color: red;
    150 }