style.css

html, body {
    font-family: "Source Han Sans CN", -apple-system, "Microsoft YaHei UI", "微软雅黑", sans-serif;
    background-color: #fefefe;
    width: 100%;
    height: 100%;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    align-items: center;
    /* center in v/h */
    text-align: center;
    -webkit-app-region: drag;
    /* let the app draggable */
}

.flower {
    color: #0099cc;
}

.flowerbtn {
    background-color: #0099cc;
    color: #fefefe;
    border: 8px solid transparent;
}

.flowerbtn:hover {
    background-color: #0099ccb0;
    color: #fefefe;
    text-decoration: none;
}

label {
    display: inline-block;
    vertical-align: middle;
}

input[type="checkbox"] {
    -webkit-appearance: none;
    /* remove default style */
    border: solid #0099cc 2px;
    border-radius: 10px;
    width: 12px;
    height: 12px;
    display: inline-block;
}

input[type="checkbox"]:checked {
    background-image: url(./res/icons/check.png);
    background-size: contain;
}

.form {
    -webkit-appearance: none;
    /* remove default style */
    line-height: inherit;
    margin: 0rem;
    padding: 1px 0px;
    outline: none;
    border: none;
    text-align: center;
}

.form::-webkit-input-placeholder {
    color: #999999;
    transition: color.5s;
    text-align: center;
}

.form:focus::-webkit-input-placeholder, .form:hover::-webkit-input-placeholder {
    color: #999999c2;
    transition: color.5s;
}

#controller {
    position: fixed;
    top: 5px;
    right: 8px;
    font-size: 18px;
    -webkit-app-region: no-drag;
    /* let it clickable */
    -webkit-user-select: none;
}

#versioninfo {
    position: fixed;
    bottom: 5px;
    font-size: 6px;
    -webkit-app-region: no-drag;
    /* let it clickable */
    -webkit-user-select: text;
}

#main {
    -webkit-app-region: no-drag;
    /* let it clickable */
    -webkit-user-select: text;
}