.tools { position: absolute; margin: 15px 0 0 15px; } .version { appearance: none; cursor: pointer; padding: 3px 6px; margin-right: 10px; vertical-align: middle; box-sizing: border-box; border: none; border-radius: 3px; } .keyCodeInfo { position: fixed; bottom: 10px; left: 10px; z-index: 9999; span + span { margin-left: 10px; } span { display: inline-block; background: #eff0f2; border-radius: 3px; padding: 5px 10px; border-top: 1px solid #f5f5f5; box-shadow: inset 0 0 25px #e8e8e8, 0 1px 0 #c3c3c3, 0 2px 0 #c9c9c9, 0 2px 3px #333; text-shadow: 0px 1px 0px #f5f5f5; } } .header { background-color: var(--color-header-bg); transition: all 0.3s; padding: 74px 0 60px 0; .title { text-align: center; font-size: 53px; font-weight: bold; color: #fff; text-shadow: -3px -3px 0 #676767, -3px -3px 0 #676767, -3px -3px 0 #676767, -2px -2px 0 #676767, -2px -2px 0 #676767, -1px -1px 0 #676767; } .lang { text-align: center; padding-top: 20px; a { color: #fff; margin: 0 5px; } } .info { padding: 25px 0 27px 0; text-align: center; font-size: 23px; line-height: 29px; color: #878787; max-width: 702px; margin: 0 auto; } .github { text-align: center; padding: 60px 0 22px 0; a + a { margin-left: 10px; } button { position: relative; display: inline-block; border: 1px solid #ddd; border-bottom-color: #bbb; padding: 9px 15px; font-family: Helvetica, arial, freesans, clean, sans-serif; font-size: 12px; font-weight: bold; color: #666; text-shadow: 0 1px rgba(255, 255, 255, 0.9); cursor: pointer; border-radius: 3px; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1); background: whitesmoke; background-image: linear-gradient(-90deg, whitesmoke 0%, #e5e5e5 100%); &:hover { color: #337797; border: 1px solid #CBE3EE; border-bottom-color: #97C7DD; background: #f0f7fa; background-image: -webkit-linear-gradient(-90deg, #f0f7fa 0%, #d8eaf2 100%); } } } }