deemixer/public/css/style.css

2 lines
22 KiB
CSS
Raw Normal View History

html{height:100vh;--main-scroll: #555;--panels-scroll: #2a2c2c;--accent-color: #0a84ff;--tag-background: #0062c4;--tag-text: #ffffff;--toast-background: #000000dd;--toast-secondary: #ffffff22;--toast-text: #ffffffde;--separator: #8f8f8f;--explicit-separator: 0.3125em}html[data-theme=light]{--main-background: #ffffff;--secondary-background: #eeeeee;--main-text: #333333;--main-text-inverted: #eeeeee;--panels-background: #222324;--panels-text: #ffffff;--accent-text: black;--table-bg: #ffffff;--table-zebra: #c9c9c9;--table-highlight: #8f8f8f}html[data-theme=dark]{--main-background: hsl(0, 0%, 8%);--secondary-background: hsl(0, 0%, 14%);--main-text: hsl(0, 0%, 93%);--main-text-inverted: hsl(0, 0%, 20%);--panels-background: hsl(0, 0%, 10%);--panels-text: hsl(0, 0%, 100%);--accent-text: hsl(0, 0%, 87%);--table-bg: hsl(0, 0%, 8%);--table-zebra: hsl(0, 0%, 14%);--table-highlight: hsl(0, 0%, 20%)}html[data-theme=purple]{--main-background: hsl(261, 74%, 6%);--secondary-background: hsl(257, 61%, 10%);--main-text: hsl(0, 0%, 93%);--accent-color: hsl(261, 85%, 37%);--main-text-inverted: hsl(258, 62%, 8%);--panels-background: hsl(257, 70%, 9%);--panels-text: hsl(0, 0%, 100%);--accent-text: hsl(0, 0%, 87%);--table-bg: hsl(261, 74%, 6%);--table-zebra: hsl(257, 61%, 10%);--table-highlight: hsl(257, 66%, 27%)}body{margin:0px;width:100%;height:100%;font-family:"Open Sans";overflow:hidden;background:var(--main-background);color:var(--main-text)}*{margin:0;padding:0;box-sizing:border-box}:root{font-size:16px}table,caption,tbody,tfoot,thead,tr,th,td{margin:0;padding:0;border:0;font-size:100%;font:inherit;vertical-align:baseline}table{border-collapse:collapse;border-spacing:0}input[type=text],input[type=password],input[type=number]{width:calc(100% - 16px);border:0px solid #000;line-height:36px;padding:0px 8px;border-radius:4px;background-color:var(--secondary-background);color:var(--primary-text);margin-bottom:8px}input[type=checkbox]{-webkit-appearance:none;appearance:none;background-color:none;border:2px solid gray;opacity:.5;border-radius:2px;padding:7px;margin:3px;display:inline-block;position:relative}input[type=checkbox]:checked{opacity:1;background-color:var(--accent-color);background-image:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' height='18' viewBox='3 3 18 18' width='18'%3E%3Cpath fill='%23ffffff' d='M 10,17 5,12 6.41,10.59 10,14.17 17.59,6.58 19,8 Z'/%3E%3Cpath d='M0 0h24v24H0z' fill='none'/%3E%3C/svg%3E");background-position:center center;border:0px solid var(--accent-color);border-radius:2px;padding:9px;margin:3px;color:var(--accent-text)}select{-webkit-appearance:none;appearance:none;width:100%;border:0px solid #000;line-height:36px;padding:0px 40px 0px 8px;border-radius:4px;background-color:var(--secondary-background);background-image:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' height='24' viewBox='0 0 24 24' width='24'%3E%3Cpath style='fill%3A%23000000%3Bfill-opacity%3A0.25' d='M7 10l5 5 5-5z'/%3E%3Cpath d='M0 0h24v24H0z' fill='none'/%3E%3C/svg%3E");background-repeat:no-repeat;background-size:24px;background-position:calc(100% - 8px) center;background-clip:border-box;color:var(--primary-text);margin-bottom:8px}p{word-break:break-word}button{min-width:64px;color:var(--accent-text);position:relative;background-color:var(--accent-color);border:1px solid transparent;border-radius:4px;font-family:inherit;font-weight:600;font-size:14px;padding:0px 8px;margin-right:8px;height:36px;text-transform:uppercase;cursor:pointer;transition:transform 50ms ease-in-out,background-color 200ms ease}button:active{background-color:var(--accent-color);transform:scale(0.95)}button:hover{background:none;border:1px solid var(--accent-color)}#loading_overlay{justify-content:center;align-items:center;position:absolute;flex-direction:column;top:0;left:0;width:100vw;height:100vh;background:rgba(0,0,0,.5);display:none;z-index:1000}#loading_overlay.active{display:flex}#loading_text{margin-bottom:20px}#main_content{margin-left:48px;width:calc(100% - 48px);height:100%;display:flex}img.rou