-
Notifications
You must be signed in to change notification settings - Fork 0
/
style.css
1 lines (1 loc) · 4.36 KB
/
style.css
1
:root{--radius-cursor: 15px;--color-cursor: black;--key-width: 40px}*{outline:none}input[type=range].custom-slider{-webkit-appearance:none;padding:0;font:inherit;outline:none;color:green;opacity:.8;background:#ccc;box-sizing:border-box;transition:opacity .2s;cursor:pointer}input[type=range].custom-slider::-webkit-slider-runnable-track{width:100%;height:5px;cursor:pointer;background:#ccc;border-radius:10%;border:none}input[type=range].custom-slider::-webkit-slider-thumb{box-shadow:1px 1px 1px #000;border:none;height:12px;width:12px;border-radius:50%;background:var(--color-cursor);cursor:pointer;-webkit-appearance:none;margin-top:-4px}::-webkit-scrollbar{height:15px}::-webkit-scrollbar-track{background:#f1f1f1}::-webkit-scrollbar-thumb{background:#888}::-webkit-scrollbar-thumb:hover{background:#555}canvas{cursor:none}body{margin:0;padding:0;height:100%;width:100%}.help{position:absolute;top:20px;right:20px;z-index:99999;background-color:rgba(0,0,0,0);padding:15px}.help .space-bar{text-align:center;width:160px;background-color:red}.help .space-bar:hover::after{position:absolute;transform:translate(-5%, 30%);background-color:rgba(98,98,98,.3803921569);color:rgba(255,255,255,.9215686275);width:180px;border-radius:7px;display:table;font-size:12px;text-align:center;vertical-align:text-top;content:"Press to save your drawing !";height:30px;animation:fade-in .5s ease-in-out}@keyframes fade-in{0%{opacity:0}100%{opacity:1}}#tools{position:absolute;z-index:99999;background-color:#fff;display:flex;flex-direction:row;padding:15px;margin:15px;border-radius:5px;align-items:center;width:170px;gap:7px;box-shadow:0px 0px 8px gray;flex-wrap:wrap;align-content:center;justify-content:center}#tools .btn-tool{width:30px;height:30px;border:none}#tools .btn-tool#eraser.active{filter:invert(1)}#tools .btn-tool#loop.active{filter:invert(1)}#tools>*{cursor:pointer}#frame{width:100%;height:100%;position:absolute;z-index:1;background-color:red;opacity:.9;background-color:rgba(0,0,0,0)}#saved-frame{width:100%;height:100%;position:absolute;z-index:-1;pointer-events:none;opacity:.3}.js-timeline{z-index:9;position:absolute;box-shadow:0px 0px 11px rgba(0,0,0,.3490196078);gap:25px;height:80px;overflow-y:hidden;cursor:pointer}.js-timeline .frame{position:relative;display:flex;align-items:center;justify-content:center}.js-timeline .frame .add-frame{display:flex;justify-content:center;align-items:center;width:30px;height:30px;background:#eee;border-radius:50%;margin-left:25px}.js-timeline .frame .add-frame:hover{background:#ccc}.js-timeline .frame:nth-child(1){margin-left:0}.js-timeline .frame img{background-color:#606060;border-right:solid .1px rgba(195,195,195,.933);width:120px;height:80px;opacity:.3}.js-timeline .frame img.playing{opacity:1}.js-timeline .frame .fas{position:absolute;top:5%;right:37%;color:red;opacity:1;cursor:pointer;z-index:10}.js-color-picker{background:rgba(0,0,0,0);appearance:none;width:30px;height:30px;border:dotted 2px}.js-timeline{position:absolute;bottom:0;z-index:10;overflow-x:scroll;white-space:nowrap;width:100%;display:flex}#cursor{position:fixed;z-index:5;width:var(--radius-cursor);height:var(--radius-cursor);border-radius:50%;opacity:1;background-color:var(--color-cursor);pointer-events:none;transform:translate(-50%, -50%)}.keys{width:800px;display:block;margin:35vh auto}.key__button{box-sizing:border-box;line-height:var(--key-width);font-size:22px;text-align:center;width:var(--key-width);color:#555;cursor:pointer;margin:0 8px;height:var(--key-width);border-color:#f2f2f2;border-style:solid;text-shadow:0 .5px 1px #777,0 2px 6px #f2f2f2;border-width:1px;border-radius:10px;background:-webkit-linear-gradient(top, #f9f9f9 0%, #D2D2D2 80%, #c0c0c0 100%);font-family:sans-serif;display:inline-block;transition:box-shadow .3s ease,transform .15s ease;box-shadow:0 0 1px #888,0 1px 0 #fff,0 6px 0 silver,0 8px 17px rgba(68,68,68,.4),2px 1px 4px rgba(68,68,68,.25),-2px 1px 4px rgba(68,68,68,.25),0 9px 16px rgba(68,68,68,.1)}.key__button:hover,.key__button:focus{box-shadow:0 0 1px #888,0 1px 0 #fff,0 4px 0 silver,0 2px 35px rgba(68,68,68,.3),2px 2px 1px rgba(68,68,68,.25),-2px 2px 4px rgba(68,68,68,.25),0 7px 4px rgba(68,68,68,.1);transform:translateY(2px)}.key__button:active{box-shadow:0 0 1px #888,0 1px 0 #fff,0 0 0 silver,0 0px 30px rgba(68,68,68,.15),2px 2px 4px rgba(68,68,68,.25),-2px 2px 4px rgba(68,68,68,.25),0 0px 4px rgba(68,68,68,.25);transform:translateY(4px)}/*# sourceMappingURL=style.css.map */