MediaWiki:KeyboardStyle.css
注意:在发布之后,您可能需要清除浏览器缓存才能看到所作出的变更的影响。
- Firefox或Safari:按住Shift的同时单击刷新,或按Ctrl-F5或Ctrl-R(Mac为⌘-R)
- Google Chrome:按Ctrl-Shift-R(Mac为⌘-Shift-R)
- Internet Explorer或Edge:按住Ctrl的同时单击刷新,或按Ctrl-F5
- Opera:按 Ctrl-F5。
.KeyboardStyle { display: flex; flex-direction: column; align-items: flex-end; justify-content: space-between; background-color: #000; color: #fff; font-size: 13px; border: 0.5px solid rgba(0, 0, 0, 0.1); padding-bottom: 8px; height: 65px; padding: 12px; border-radius: 15px 15px 12px 12px; cursor: pointer; position: relative; will-change: transform; transition: all .1s ease-in-out 0s; user-select: none; /* Add gradient shading to each side */ background-image: linear-gradient(to right, rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0)), linear-gradient(to bottom, rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0)); background-position: bottom right, bottom right; background-size: 100% 100%, 100% 100%; background-repeat: no-repeat; box-shadow: inset -4px -10px 0px rgba(255, 255, 255, 0.4), inset -4px -8px 0px rgba(0, 0, 0, 0.3), 0px 2px 1px rgba(0, 0, 0, 0.3), 0px 2px 1px rgba(255, 255, 255, 0.1); transform: perspective(70px) rotateX(5deg) rotateY(0deg); } .KeyboardStyle::after { content: ''; position: absolute; top: 0; bottom: 0; left: 0; right: 0; background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0.2), rgba(0, 0, 0, 0.5)); z-index: -1; border-radius: 15px; box-shadow: inset 4px 0px 0px rgba(255, 255, 255, 0.1), inset 4px -8px 0px rgba(0, 0, 0, 0.3); transition: all .1s ease-in-out 0s; } .KeyboardStyle::before { content: ''; position: absolute; top: 0; bottom: 0; left: 0; right: 0; background-image: linear-gradient(to right, rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0)), linear-gradient(to bottom, rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0)); background-position: bottom right, bottom right; background-size: 100% 100%, 100% 100%; background-repeat: no-repeat; z-index: -1; border-radius: 15px; transition: all .1s ease-in-out 0s; } .KeyboardStyle:active { will-change: transform; transform: perspective(80px) rotateX(5deg) rotateY(1deg) translateY(3px) scale(0.96); height: 64px; border: 0.25px solid rgba(0, 0, 0, 0.2); box-shadow: inset -4px -8px 0px rgba(255, 255, 255, 0.2), inset -4px -6px 0px rgba(0, 0, 0, 0.8), 0px 1px 0px rgba(0, 0, 0, 0.9), 0px 1px 0px rgba(255, 255, 255, 0.2); transition: all .1s ease-in-out 0s; } .KeyboardStyle::after:active { background-image: linear-gradient(to bottom,rgba(0, 0, 0, 0.5), rgba(255, 255, 255, 0.2)); } .KeyboardStyle:active::before { content: ""; display: block; position: absolute; top: 5%; left: 20%; width: 50%; height: 80%; background-color: rgba(255, 255, 255, 0.1); animation: overlay 0.1s ease-in-out 0s; pointer-events: none; } .KeyboardStyle svg { width: 15px; height: 15px; } @keyframes overlay { from { opacity: 0; } to { opacity: 1; } } .KeyboardStyle:focus { outline: none; }