2 lines
32 KiB
CSS
2 lines
32 KiB
CSS
|
.header{margin:10px 0;width:100%;display:flex;flex-direction:row;align-items:center;justify-content:space-between;user-select:none}.header>h1{flex-shrink:0;font-size:24px;color:#2c8af8;font-weight:500;text-shadow:0 2px 6px rgba(44,138,248,.4);line-height:32px}.switch{display:inline-block;width:32px;height:16px;border-radius:8px;background-color:#d8dee2;transition:background-color .3s ease;position:relative;cursor:pointer}.switch.checked{background-color:#57befc}.switch.checked:after{transform:translate(16px)}.switch.disabled{cursor:not-allowed;background-color:#b7c5d6}.switch.disabled:after{background-color:#e4eaef;box-shadow:0 0 8px #90939980}.switch.checked.disabled{background-color:#e4eaef}.switch:after{content:"";position:absolute;top:-1px;height:18px;width:18px;border-radius:9px;background-color:#fff;box-shadow:0 0 8px #2c8af866;transition:transform .3s ease;transform:translate(-2px)}.switch-icon{position:absolute;transform:translate(-1px) scale(.4);color:#fff;line-height:16px}.card{padding:15px;box-shadow:2px 5px 20px -3px #2c8af82e;background-color:#fff;border-radius:4px}.button-select{display:flex;flex-direction:row}.button-select .button-select-options{height:30px;padding:0 15px;color:#54759a;font-size:12px;line-height:30px;background:#fff;border:1px solid #e4eaef;border-right:none;transition:all .3s ease;cursor:pointer;outline:0;display:block}.button-select .button-select-options:first-child{border-radius:3px 0 0 3px}.button-select .button-select-options:last-child{border-radius:0 3px 3px 0;border-right:1px solid #e4eaef}.button-select .button-select-options.actived{background:#57befc;color:#fff;border-color:#57befc;box-shadow:0 2px 5px #57befc80}.button-select .button-select-options.actived:active{box-shadow:none}.tags{display:flex;flex:1;align-items:center;list-style:none;flex-wrap:wrap;box-sizing:content-box}.tags li{position:relative;display:flex;align-items:center;justify-content:center;border:1px solid #2c8af8;color:#54759a;height:22px;border-radius:11px;padding:0 6px;margin:3px 4px;font-size:10px}.tags li.error{color:#fff;background-color:#f56c6c;border-color:#f56c6c}.tags li.tags-selected.error{background:linear-gradient(135deg,#2c8af8,#f56c6c);border:none;height:24px;padding:0 7px}.tags .tags-selected{background-color:#2c8af8;color:#fff}.input{display:inline-block;height:30px;width:100%;padding:0 10px;font-size:14px;color:#54759a;border-radius:3px;border:1px solid #e4eaef;transition:all .3s;transition-property:border-color,color,box-shadow}.input:focus{outline:0;border-color:#57befc;color:#2c8af8;box-shadow:0 2px 5px #57befc80}.select{cursor:pointer;font-size:14px;line-height:30px;color:#54759a;display:flex;overflow:hidden}.select>i{margin-left:5px;color:#54759a}.select-list{position:absolute;max-width:170px;border-radius:4px;pointer-events:none;transition:all .2s ease}.select-list .list{opacity:0;max-height:300px;overflow:auto;background:#fff;padding:5px 0;transition:all .2s ease}.select-list .list>.option{color:#54759a;padding:10px 15px;font-size:14px;list-style:none;cursor:pointer}.select-list .list>.option:hover{background:rgba(228,234,239,.5)}.select-list .list>.selected{background:rgba(228,234,239,.5)}.select-list-show{pointer-events:visible;transform:scaleY(1);box-shadow:0 2px 5px #b7c5d680}.select-list-show .list{opacity:1;transform:scaleY(1)}.modal-mask{position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,.15);opacity:0;pointer-events:none;transition:all .5s ease;display:flex;justify-content:center;align-items:center;z-index:9999}.modal-mask .modal{margin-top:-50px;padding:20px 30px;background:#fff;box-shadow:0 2px 16px #54759a33;border-radius:4px;display:flex;flex-direction:column;transform:scale(0);transition:all .3s cubic-bezier(.32,.26,.71,1.29)}.modal-mask .modal .modal-title{margin:5px 0;width:100%;display:flex;align-items:center;justify-content:space-between;font-weight:700;font-size:18px;color:#2c8af8;text-shadow:0 2px 6px rgba(44,138,248,.4)}.modal-mask .modal .modal-body{margin:10px 0;font-size:14px;color:#54759a}.modal-mask .modal .footer{width:100%;margin:5px 0
|