2 lines
4.5 KiB
CSS
2 lines
4.5 KiB
CSS
.rtf{box-sizing:border-box;margin:25px;position:fixed;white-space:nowrap;z-index:9998;padding-left:0;list-style:none}.rtf.open .rtf--mb{box-shadow:0 5px 5px -3px #0003,0 8px 10px 1px #00000024,0 3px 14px 2px #0000001f}.rtf.open .rtf--mb>ul{list-style:none;margin:0;padding:0}.rtf.open .rtf--ab__c:hover>span,.rtf.open .rtf--ab__c>span.always-show{transition:ease-in-out opacity .2s;opacity:.9}.rtf.open .rtf--ab__c:nth-child(1){transform:translateY(-60px) scale(1);transition-delay:.03s}.rtf.open .rtf--ab__c:nth-child(1).top{transform:translateY(60px) scale(1)}.rtf.open .rtf--ab__c:nth-child(2){transform:translateY(-120px) scale(1);transition-delay:.09s}.rtf.open .rtf--ab__c:nth-child(2).top{transform:translateY(120px) scale(1)}.rtf.open .rtf--ab__c:nth-child(3){transform:translateY(-180px) scale(1);transition-delay:.12s}.rtf.open .rtf--ab__c:nth-child(3).top{transform:translateY(180px) scale(1)}.rtf.open .rtf--ab__c:nth-child(4){transform:translateY(-240px) scale(1);transition-delay:.15s}.rtf.open .rtf--ab__c:nth-child(4).top{transform:translateY(240px) scale(1)}.rtf.open .rtf--ab__c:nth-child(5){transform:translateY(-300px) scale(1);transition-delay:.18s}.rtf.open .rtf--ab__c:nth-child(5).top{transform:translateY(300px) scale(1)}.rtf.open .rtf--ab__c:nth-child(6){transform:translateY(-360px) scale(1);transition-delay:.21s}.rtf.open .rtf--ab__c:nth-child(6).top{transform:translateY(360px) scale(1)}.rtf--mb__c{padding:25px;margin:-25px}.rtf--mb__c *:last-child{margin-bottom:0}.rtf--mb__c:hover>span,.rtf--mb__c>span.always-show{transition:ease-in-out opacity .2s;opacity:.9}.rtf--mb__c>span{opacity:0;transition:ease-in-out opacity .2s;position:absolute;top:50%;transform:translateY(-50%);margin-right:6px;margin-left:4px;background:rgba(0,0,0,.75);padding:2px 4px;border-radius:2px;color:#fff;font-size:13px;box-shadow:0 0 4px #00000024,0 4px 8px #00000047}.rtf--mb__c>span.right{right:100%}.rtf--mb{width:48px;height:48px;background:var(--btn-bg);z-index:9999;display:inline-flex;justify-content:center;align-items:center;position:relative;border:none;border-radius:50%;box-shadow:0 0 4px #00000024,0 4px 8px #00000047;cursor:pointer;outline:none;padding:0;-webkit-user-drag:none;font-weight:bold;color:#f1f1f1;font-size:18px}.rtf--mb>*{transition:ease-in-out transform .2s}.rtf--ab__c{display:block;position:absolute;top:0;right:1px;padding:10px 0;margin:-10px 0;transition:ease-in-out transform .2s}.rtf--ab__c>span{opacity:0;transition:ease-in-out opacity .2s;position:absolute;top:50%;transform:translateY(-50%);margin-right:6px;background:rgba(0,0,0,.75);padding:2px 4px;border-radius:2px;color:#fff;font-size:13px;box-shadow:0 0 4px #00000024,0 4px 8px #00000047}.rtf--ab__c>span.right{right:100%}.rtf--ab__c:nth-child(1){transform:translateY(-60px) scale(0);transition-delay:.21s}.rtf--ab__c:nth-child(1).top{transform:translateY(60px) scale(0)}.rtf--ab__c:nth-child(2){transform:translateY(-120px) scale(0);transition-delay:.18s}.rtf--ab__c:nth-child(2).top{transform:translateY(120px) scale(0)}.rtf--ab__c:nth-child(3){transform:translateY(-180px) scale(0);transition-delay:.15s}.rtf--ab__c:nth-child(3).top{transform:translateY(180px) scale(0)}.rtf--ab__c:nth-child(4){transform:translateY(-240px) scale(0);transition-delay:.12s}.rtf--ab__c:nth-child(4).top{transform:translateY(240px) scale(0)}.rtf--ab__c:nth-child(5){transform:translateY(-300px) scale(0);transition-delay:.09s}.rtf--ab__c:nth-child(5).top{transform:translateY(300px) scale(0)}.rtf--ab__c:nth-child(6){transform:translateY(-360px) scale(0);transition-delay:.03s}.rtf--ab__c:nth-child(6).top{transform:translateY(360px) scale(0)}.rtf--ab{height:40px;width:40px;margin-right:4px;background-color:#aaa;display:inline-flex;justify-content:center;align-items:center;position:relative;border:none;border-radius:50%;box-shadow:0 0 4px #00000024,0 4px 8px #00000047;cursor:pointer;outline:none;padding:0;-webkit-user-drag:none;font-weight:bold;color:#f1f1f1;font-size:16px;z-index:10000}.rtf--ab:hover{background:#387cec;border:1px solid #387cec;color:#fff}.rtf--ab:focus{border-color:var(--color-focus-blue)}._spining_4i8sg_1{position:relative;border-radius:50%;background:linear-gradient(60deg,#e66465,#9198e5);width:48px;height:48px;display:flex;justify-content:center;align-items:center}._spining_4i8sg_1:before{content:"";position:absolute;top:0;bottom:0;left:0;right:0;border:2px solid transparent;border-top-color:currentColor;border-radius:50%;animation:_spining_keyframes_4i8sg_1 1s linear infinite}@keyframes _spining_keyframes_4i8sg_1{0%{transform:rotate(0)}to{transform:rotate(360deg)}}
|