github.com/xiaq/elvish@v0.12.0/website/assets/home-demos.css (about)

     1  #demo-window {
     2    background-color: #f0ede2;
     3    margin-bottom: 16px;
     4    border-radius: 5px;
     5    /* Graceful degrading: the demo window starts with a scrollbar, which gets
     6     * hiden only when the JavaScript code finishes adding demo switchers. */
     7    overflow: scroll;
     8  }
     9  
    10  .overflow-hidden {
    11    overflow: hidden !important;
    12  }
    13  
    14  .animated-transition {
    15    transition: all 300ms cubic-bezier(0.165, 0.84, 0.44, 1);
    16  }
    17  
    18  #demo-container {
    19    transform: translateX(0);
    20    width: 500%;
    21  }
    22  
    23  .demo-wrapper {
    24    width: 20%;
    25    float: left;
    26  }
    27  
    28  /* Expanded view. */
    29  #demo-container.expanded {
    30    width: 100%;
    31  }
    32  #demo-container.expanded .demo-wrapper {
    33    width: 100%;
    34  }
    35  
    36  .demo:after {
    37    content: "";
    38    display: table;
    39    clear: both;
    40  }
    41  
    42  .demo {
    43    padding: 16px;
    44  }
    45  
    46  .demo-col {
    47    width: 100%;
    48    height: 100%;
    49    float: left;
    50  }
    51  
    52  .demo-col .demo-ttyshot {
    53    text-align: center;
    54  }
    55  
    56  .demo-col .demo-ttyshot .ttyshot {
    57    text-align: left;
    58  }
    59  
    60  .demo-description {
    61    margin: 16px 5% 0;
    62  }
    63  
    64  @media screen and (min-width: 1024px) {
    65    .demo-col.left {
    66      width: 60%;
    67    }
    68    .demo-col.right {
    69      width: 40%;
    70    }
    71    .demo-description {
    72      margin: 0 5%;
    73    }
    74    .animated-transition {
    75      transition-duration: 400ms;
    76    }
    77  }
    78  
    79  .demo-title {
    80    font-size: 1.3em;
    81  }
    82  
    83  .demo-col p {
    84    margin-top: 16px;
    85    margin-bottom: 0;
    86  }
    87  
    88  ul#demo-switcher {
    89    display: inline;
    90    margin: 0;
    91  }
    92  
    93  ul#demo-switcher > li {
    94    list-style: none;
    95    display: inline-block;
    96  }
    97  
    98  ul#demo-switcher > li > a {
    99    color: black;
   100    padding: 4px 14px;
   101  }
   102  
   103  ul#demo-switcher > li > a.current , ul#demo-switcher > li > a.current:hover {
   104    color: white;
   105    background-color: black;
   106  }
   107  
   108  ul#demo-switcher > li > a:hover {
   109    background-color: #ccc;
   110    cursor: pointer;
   111  }