@font-face { font-family: "LigatureSymbols"; src: url("../font/LigatureSymbols-2.11.eot"); src: url("../font/LigatureSymbols-2.11.eot?#iefix") format("embedded-opentype"), url("../font/LigatureSymbols-2.11.woff") format("woff"), url("../font/LigatureSymbols-2.11.ttf") format("truetype"), url("../font/LigatureSymbols-2.11.svg#LigatureSymbols") format("svg"); font-weight: normal; font-style: normal; } .icon-font { font-family: "LigatureSymbols"; -webkit-text-rendering: optimizeLegibility; -moz-text-rendering: optimizeLegibility; -ms-text-rendering: optimizeLegibility; -o-text-rendering: optimizeLegibility; text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; -moz-font-smoothing: antialiased; -ms-font-smoothing: antialiased; -o-font-smoothing: antialiased; font-smoothing: antialiased; -webkit-font-feature-settings: "liga"1, "dlig"1; -moz-font-feature-settings: "liga=1, dlig=1"; -ms-font-feature-settings: "liga"1, "dlig"1; -o-font-feature-settings: "liga"1, "dlig"1; font-feature-settings: "liga"1, "dlig"1; } /*------------------------------------------ // User style start // change ----------------------------------------- */ .general-button { border-radius: 8px; border: 1px solid rgba(255, 255, 255, 0.28); background: rgba(20, 24, 30, 0.62); box-shadow: 0 4px 14px rgba(0, 0, 0, 0.22); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); } .general-button:before { border-radius: 8px; border-bottom: 0px solid rgba(12,12,13, 0); background-color: transparent; } .button-content { border-radius: 8px; padding: 3px 6px; box-shadow: none; color: #f3f6fa; } .button-text { padding: 0px 4px; line-height: 1em; font-size: 60px; } .icon-font { padding: 0px 3px; font-size: 28px; } /*----------------- at hover -----------------*/ .general-button:hover { transition: all 0ms; -moz-transition: all 0ms; -webkit-transition: all 0ms; -o-transition: all 0ms; background: rgba(20, 24, 30, 0.74); border-color: rgba(255, 255, 255, 0.45); } .general-button:hover:before { border-bottom: 1px solid rgba(12,12,13, 0); transition: all 0ms; -moz-transition: all 0ms; -webkit-transition: all 0ms; -o-transition: all 0ms; } .general-button:hover .button-content { box-shadow: none; transition: all 0ms; -moz-transition: all 0ms; -webkit-transition: all 0ms; -o-transition: all 0ms; } /*----------------- at active -----------------*/ .general-button:active { background: rgba(16, 20, 26, 0.78); box-shadow: 0 2px 10px rgba(0, 0, 0, 0.28) inset; } .general-button:active:before { padding-bottom: 1px; border-bottom: 0px solid rgba(12,12,13, 0); } .general-button:active .button-content { box-shadow: none; } /*------------------------------------------ // User style end ----------------------------------------- */ /*------------------------------------------ // Core style start // not change ----------------------------------------- */ .general-button { display: -moz-inline-box; display: inline-block; user-select: none; -moz-user-select: none; -webkit-user-select: none; -ms-user-select: none;transition: all 0ms; -moz-transition: all 0ms; -webkit-transition: all 0ms; -o-transition: all 0ms;position: relative; cursor: pointer; text-decoration: none; line-height: 1; } .general-button:before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; } .button-content { display: table; transition: all 0ms; -moz-transition: all 0ms; -webkit-transition: all 0ms; -o-transition: all 0ms; } .button-text { display: table-cell; vertical-align: middle; text-decoration: none; } .icon-font { display: table-cell; vertical-align: middle; } /*----------------- at hover -----------------*/ .general-button:hover { transition-timing-function: ease-in-out; } .general-button:hover:before { transition-timing-function: ease-in-out; } .general-button:hover .button-content { transition-timing-function: ease-in-out; } /*----------------- at active -----------------*/ .general-button:active { transition: all 0ms; -moz-transition: all 0ms; -webkit-transition: all 0ms; -o-transition: all 0ms; } .general-button:active:before { transition: all 0ms; -moz-transition: all 0ms; -webkit-transition: all 0ms; -o-transition: all 0ms; } .general-button:active .button-content { transition: all 0ms; -moz-transition: all 0ms; -webkit-transition: all 0ms; -o-transition: all 0ms; } /*------------------------------------------ // Core style end ----------------------------------------- */ /*------------------------------------------ // Touch style start ----------------------------------------- */ /*----------------- at hover -----------------*/ .touch .general-button:hover { background: rgba(20, 24, 30, 0.74); border-color: rgba(255, 255, 255, 0.45); } .touch .general-button:hover:before { border-bottom: 0px solid rgba(12,12,13, 0); } .touch .general-button:hover .button-content { box-shadow: none; } /*----------------- at active -----------------*/ .touch .general-button:active { background: rgba(16, 20, 26, 0.78); box-shadow: 0 2px 10px rgba(0, 0, 0, 0.28) inset; } .touch .general-button:active:before { padding-bottom: 1px; border-bottom: 0px solid rgba(12,12,13, 0); } .touch .general-button:active .button-content { box-shadow: none; } /*------------------------------------------ // Touch style end ----------------------------------------- */