mirror of
https://github.com/HASwitchPlate/openHASP.git
synced 2025-04-20 21:37:19 +00:00
608 lines
20 KiB
CSS
608 lines
20 KiB
CSS
/* Icons SVG files */
|
|
:root {
|
|
--info: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" id="mdi-information-outline" viewBox="0 0 24 24"><path d="M11,9H13V7H11M12,20C7.59,20 4,16.41 4,12C4,7.59 7.59,4 12,4C16.41,4 20,7.59 20,12C20,16.41 16.41,20 12,20M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12A10,10 0 0,0 12,2M11,17H13V11H11V17Z" /></svg>');
|
|
--home: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" id="mdi-home-outline" viewBox="0 0 24 24"><path d="M12 5.69L17 10.19V18H15V12H9V18H7V10.19L12 5.69M12 3L2 12H5V20H11V14H13V20H19V12H22" /></svg>');
|
|
--shot: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" id="mdi-camera-outline" viewBox="0 0 24 24"><path d="M20,4H16.83L15,2H9L7.17,4H4A2,2 0 0,0 2,6V18A2,2 0 0,0 4,20H20A2,2 0 0,0 22,18V6A2,2 0 0,0 20,4M20,18H4V6H8.05L9.88,4H14.12L15.95,6H20V18M12,7A5,5 0 0,0 7,12A5,5 0 0,0 12,17A5,5 0 0,0 17,12A5,5 0 0,0 12,7M12,15A3,3 0 0,1 9,12A3,3 0 0,1 12,9A3,3 0 0,1 15,12A3,3 0 0,1 12,15Z" /></svg>');
|
|
--ota: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" id="mdi-cpu-32-bit" viewBox="0 0 24 24"><path d="M9,3V5H7A2,2 0 0,0 5,7V9H3V11H5V13H3V15H5V17A2,2 0 0,0 7,19H9V21H11V19H13V21H15V19H17A2,2 0 0,0 19,17V15H21V13H19V11H21V9H19V7A2,2 0 0,0 17,5H15V3H13V5H11V3M7,9H10.5A1,1 0 0,1 11.5,10V14A1,1 0 0,1 10.5,15H7V13.5H10V12.75H8.5V11.25H10V10.5H7M12.5,9H16A1,1 0 0,1 17,10V11.75A1,1 0 0,1 16,12.75H14V13.5H17V15H12.5V12.25A1,1 0 0,1 13.5,11.25H15.5V10.5H12.5" /></svg>');
|
|
--browse: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" id="mdi-file-edit-outline" viewBox="0 0 24 24"><path d="M10 20H6V4H13V9H18V12.1L20 10.1V8L14 2H6C4.9 2 4 2.9 4 4V20C4 21.1 4.9 22 6 22H10V20M20.2 13C20.3 13 20.5 13.1 20.6 13.2L21.9 14.5C22.1 14.7 22.1 15.1 21.9 15.3L20.9 16.3L18.8 14.2L19.8 13.2C19.9 13.1 20 13 20.2 13M20.2 16.9L14.1 23H12V20.9L18.1 14.8L20.2 16.9Z" /></svg>');
|
|
--cog: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" id="mdi-cog-outline" viewBox="0 0 24 24"><path d="M12,8A4,4 0 0,1 16,12A4,4 0 0,1 12,16A4,4 0 0,1 8,12A4,4 0 0,1 12,8M12,10A2,2 0 0,0 10,12A2,2 0 0,0 12,14A2,2 0 0,0 14,12A2,2 0 0,0 12,10M10,22C9.75,22 9.54,21.82 9.5,21.58L9.13,18.93C8.5,18.68 7.96,18.34 7.44,17.94L4.95,18.95C4.73,19.03 4.46,18.95 4.34,18.73L2.34,15.27C2.21,15.05 2.27,14.78 2.46,14.63L4.57,12.97L4.5,12L4.57,11L2.46,9.37C2.27,9.22 2.21,8.95 2.34,8.73L4.34,5.27C4.46,5.05 4.73,4.96 4.95,5.05L7.44,6.05C7.96,5.66 8.5,5.32 9.13,5.07L9.5,2.42C9.54,2.18 9.75,2 10,2H14C14.25,2 14.46,2.18 14.5,2.42L14.87,5.07C15.5,5.32 16.04,5.66 16.56,6.05L19.05,5.05C19.27,4.96 19.54,5.05 19.66,5.27L21.66,8.73C21.79,8.95 21.73,9.22 21.54,9.37L19.43,11L19.5,12L19.43,13L21.54,14.63C21.73,14.78 21.79,15.05 21.66,15.27L19.66,18.73C19.54,18.95 19.27,19.04 19.05,18.95L16.56,17.95C16.04,18.34 15.5,18.68 14.87,18.93L14.5,21.58C14.46,21.82 14.25,22 14,22H10M11.25,4L10.88,6.61C9.68,6.86 8.62,7.5 7.85,8.39L5.44,7.35L4.69,8.65L6.8,10.2C6.4,11.37 6.4,12.64 6.8,13.8L4.68,15.36L5.43,16.66L7.86,15.62C8.63,16.5 9.68,17.14 10.87,17.38L11.24,20H12.76L13.13,17.39C14.32,17.14 15.37,16.5 16.14,15.62L18.57,16.66L19.32,15.36L17.2,13.81C17.6,12.64 17.6,11.37 17.2,10.2L19.31,8.65L18.56,7.35L16.15,8.39C15.38,7.5 14.32,6.86 13.12,6.62L12.75,4H11.25Z" /></svg>');
|
|
--star: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="-10 -6 16 16"><line y1="-3" y2="3" stroke="red" transform="rotate(15)"></line><line y1="-3" y2="3" stroke="red" transform="rotate(75)"></line><line y1="-3" y2="3" stroke="red" transform="rotate(-45)"></line></svg>');
|
|
--trash: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" id="mdi-trash-can-outline" width="24" height="24" viewBox="0 0 24 24"><path d="M9,3V4H4V6H5V19A2,2 0 0,0 7,21H17A2,2 0 0,0 19,19V6H20V4H15V3H9M7,6H17V19H7V6M9,8V17H11V8H9M13,8V17H15V8H13Z" /></svg>');
|
|
--download: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" id="mdi-download" width="24" height="24" viewBox="0 0 24 24"><path d="M5,20H19V18H5M19,9H15V3H9V9H5L12,16L19,9Z" /></svg>');
|
|
--upload: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" id="mdi-file-upload-outline" viewBox="0 0 24 24"><path d="M14,2L20,8V20A2,2 0 0,1 18,22H6A2,2 0 0,1 4,20V4A2,2 0 0,1 6,2H14M18,20V9H13V4H6V20H18M12,12L16,16H13.5V19H10.5V16H8L12,12Z" /></svg>');
|
|
--flash: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" id="mdi-chip" viewBox="0 0 24 24"><path d="M6,4H18V5H21V7H18V9H21V11H18V13H21V15H18V17H21V19H18V20H6V19H3V17H6V15H3V13H6V11H3V9H6V7H3V5H6V4M11,15V18H12V15H11M13,15V18H14V15H13M15,15V18H16V15H15Z" /></svg>');
|
|
--file: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" id="mdi-file-outline" viewBox="0 0 24 24"><path d="M14,2H6A2,2 0 0,0 4,4V20A2,2 0 0,0 6,22H18A2,2 0 0,0 20,20V8L14,2M18,20H6V4H13V9H18V20Z" /></svg>');
|
|
--dir: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" id="mdi-folder-outline" viewBox="0 0 24 24"><path d="M20,18H4V8H20M20,6H12L10,4H4C2.89,4 2,4.89 2,6V18A2,2 0 0,0 4,20H20A2,2 0 0,0 22,18V8C22,6.89 21.1,6 20,6Z" /></svg>');
|
|
--diropen: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" id="mdi-folder-open-outline" viewBox="0 0 24 24"><path d="M6.1,10L4,18V8H21A2,2 0 0,0 19,6H12L10,4H4A2,2 0 0,0 2,6V18A2,2 0 0,0 4,20H19C19.9,20 20.7,19.4 20.9,18.5L23.2,10H6.1M19,18H6L7.6,12H20.6L19,18Z" /></svg>');
|
|
--html: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" id="mdi-code-tags" viewBox="0 0 24 24"><path d="M14.6,16.6L19.2,12L14.6,7.4L16,6L22,12L16,18L14.6,16.6M9.4,16.6L4.8,12L9.4,7.4L8,6L2,12L8,18L9.4,16.6Z" /></svg>');
|
|
--image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" id="mdi-file-image-outline" viewBox="0 0 24 24"><path d="M14,2L20,8V20A2,2 0 0,1 18,22H6A2,2 0 0,1 4,20V4A2,2 0 0,1 6,2H14M18,20V9H13V4H6V20H18M17,13V19H7L12,14L14,16M10,10.5A1.5,1.5 0 0,1 8.5,12A1.5,1.5 0 0,1 7,10.5A1.5,1.5 0 0,1 8.5,9A1.5,1.5 0 0,1 10,10.5Z" /></svg>');
|
|
--zip: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" id="mdi-file-cabinet" viewBox="0 0 24 24"><path d="M14,8H10V6H14V8M20,4V20C20,21.11 19.11,22 18,22H6C4.89,22 4,21.11 4,20V4A2,2 0 0,1 6,2H18C19.11,2 20,2.9 20,4M18,13H6V20H18V13M18,4H6V11H18V4M14,15H10V17H14V15Z" /></svg>');
|
|
--cmd: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" id="mdi-application-outline" viewBox="0 0 24 24"><path d="M21 2H3C1.9 2 1 2.9 1 4V20C1 21.1 1.9 22 3 22H21C22.1 22 23 21.1 23 20V4C23 2.9 22.1 2 21 2M21 20H3V6H21V20Z" /></svg>');
|
|
--css: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" id="mdi-script-outline" viewBox="0 0 24 24"><path d="M15,20A1,1 0 0,0 16,19V4H8A1,1 0 0,0 7,5V16H5V5A3,3 0 0,1 8,2H19A3,3 0 0,1 22,5V6H20V5A1,1 0 0,0 19,4A1,1 0 0,0 18,5V9L18,19A3,3 0 0,1 15,22H5A3,3 0 0,1 2,19V18H13A2,2 0 0,0 15,20Z" /></svg>');
|
|
--ttf: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" id="mdi-format-text" viewBox="0 0 24 24"><path d="M18.5,4L19.66,8.35L18.7,8.61C18.25,7.74 17.79,6.87 17.26,6.43C16.73,6 16.11,6 15.5,6H13V16.5C13,17 13,17.5 13.33,17.75C13.67,18 14.33,18 15,18V19H9V18C9.67,18 10.33,18 10.67,17.75C11,17.5 11,17 11,16.5V6H8.5C7.89,6 7.27,6 6.74,6.43C6.21,6.87 5.75,7.74 5.3,8.61L4.34,8.35L5.5,4H18.5Z" /></svg>');
|
|
--eye: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" id="mdi-eye-outline" viewBox="0 0 24 24"><path d="M12,9A3,3 0 0,1 15,12A3,3 0 0,1 12,15A3,3 0 0,1 9,12A3,3 0 0,1 12,9M12,4.5C17,4.5 21.27,7.61 23,12C21.27,16.39 17,19.5 12,19.5C7,19.5 2.73,16.39 1,12C2.73,7.61 7,4.5 12,4.5M3.18,12C4.83,15.36 8.24,17.5 12,17.5C15.76,17.5 19.17,15.36 20.82,12C19.17,8.64 15.76,6.5 12,6.5C8.24,6.5 4.83,8.64 3.18,12Z" /></svg>');
|
|
--json: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" id="mdi-code-braces" viewBox="0 0 24 24"><path d="M8,3A2,2 0 0,0 6,5V9A2,2 0 0,1 4,11H3V13H4A2,2 0 0,1 6,15V19A2,2 0 0,0 8,21H10V19H8V14A2,2 0 0,0 6,12A2,2 0 0,0 8,10V5H10V3M16,3A2,2 0 0,1 18,5V9A2,2 0 0,0 20,11H21V13H20A2,2 0 0,0 18,15V19A2,2 0 0,1 16,21H14V19H16V14A2,2 0 0,1 18,12A2,2 0 0,1 16,10V5H14V3H16Z" /></svg>');
|
|
--audio: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" id="mdi-file-music-outline" viewBox="0 0 24 24"><path d="M14,2L20,8V20A2,2 0 0,1 18,22H6A2,2 0 0,1 4,20V4A2,2 0 0,1 6,2H14M18,20V9H13V4H6V20H18M13,10V12H11V17A2,2 0 0,1 9,19A2,2 0 0,1 7,17A2,2 0 0,1 9,15C9.4,15 9.7,15.1 10,15.3V10H13Z" /></svg>');
|
|
}
|
|
|
|
.fn:hover {
|
|
text-decoration: underline;
|
|
}
|
|
.fi {
|
|
display: inline-block;
|
|
vertical-align: middle;
|
|
width: 1.1rem;
|
|
height: 1.25rem;
|
|
mask-size: auto;
|
|
mask-repeat: no-repeat;
|
|
mask-position: center;
|
|
-webkit-mask-size: auto;
|
|
-webkit-mask-repeat: no-repeat;
|
|
-webkit-mask-position: center;
|
|
background-color: var(--txt);
|
|
}
|
|
.fa {
|
|
display: block;
|
|
text-indent: -9999px;
|
|
width: clamp(2rem, 7.5vw, 5rem);
|
|
height: 2rem;
|
|
mask-size: auto;
|
|
mask-repeat: no-repeat;
|
|
mask-position: center;
|
|
-webkit-mask-size: auto;
|
|
-webkit-mask-repeat: no-repeat;
|
|
-webkit-mask-position: center;
|
|
background-color: var(--clr-primary-400);
|
|
transition: 0.5s;
|
|
padding: 1rem;
|
|
margin-top: 0.5rem;
|
|
margin-bottom: 0.5rem;
|
|
}
|
|
.fa-browse { mask-image: var(--browse); -webkit-mask-image: var(--browse)}
|
|
.fa-cog { mask-image: var(--cog); -webkit-mask-image: var(--cog)}
|
|
.fa-download{ mask-image: var(--download); -webkit-mask-image: var(--download)}
|
|
.fa-upload { mask-image: var(--upload); -webkit-mask-image: var(--upload)}
|
|
.fa-home { mask-image: var(--home); -webkit-mask-image: var(--home)}
|
|
.fa-info { mask-image: var(--info); -webkit-mask-image: var(--info)}
|
|
.fa-ota { mask-image: var(--ota); -webkit-mask-image: var(--ota)}
|
|
.fa-shot { mask-image: var(--shot); -webkit-mask-image: var(--shot)}
|
|
.fa-star { mask-image: var(--star); -webkit-mask-image: var(--star)}
|
|
.fa-trash { mask-image: var(--trash); -webkit-mask-image: var(--trask)}
|
|
.fa-flash { mask-image: var(--flash); -webkit-mask-image: var(--flash)}
|
|
.fa-file { mask-image: var(--file); -webkit-mask-image: var(--file)}
|
|
.fa-dir { mask-image: var(--dir); -webkit-mask-image: var(--dir)}
|
|
.fa-diropen { mask-image: var(--diropen); -webkit-mask-image: var(--diropen)}
|
|
.fa-eye { mask-image: var(--eye); -webkit-mask-image: var(--eye)}
|
|
.fa-zip { mask-image: var(--zip); -webkit-mask-image: var(--zip)}
|
|
.fa-css { mask-image: var(--css); -webkit-mask-image: var(--css)}
|
|
.fa-cmd { mask-image: var(--cmd); -webkit-mask-image: var(--cmd)}
|
|
.fa-json { mask-image: var(--json); -webkit-mask-image: var(--json)}
|
|
.fa-jsonl { mask-image: var(--json); -webkit-mask-image: var(--json)}
|
|
.fa-image { mask-image: var(--image); -webkit-mask-image: var(--image)}
|
|
.fa-audio { mask-image: var(--audio); -webkit-mask-image: var(--audio)}
|
|
.fa-html { mask-image: var(--html); -webkit-mask-image: var(--html)}
|
|
.fa-ttf { mask-image: var(--ttf); -webkit-mask-image: var(--ttf)}
|
|
|
|
.nav-list {
|
|
font-size: var(--fs-nav);
|
|
padding: 0;
|
|
display: flex;
|
|
justify-content: space-evenly;
|
|
gap: clamp(1.5rem, 10vw, var(--size-500));
|
|
width: clamp(275px, 80vw, 600px);
|
|
}
|
|
.nav-list a {
|
|
position: relative;
|
|
display: flex;
|
|
justify-content: space-evenly;
|
|
align-items: center;
|
|
flex-direction: column;
|
|
text-decoration: none;
|
|
color: var(--clr-primary-400);
|
|
}
|
|
.nav-list a:hover,
|
|
.nav-list a:focus-visible {
|
|
color: var(--clr-accent-400);
|
|
}
|
|
.nav-list a .text {
|
|
position: absolute;
|
|
letter-spacing: -0.05rem;
|
|
font-size: var(--fs-500);
|
|
font-weight: var(--fw-semi-bold);
|
|
white-space: nowrap;
|
|
opacity: 0;
|
|
transition: 0.5s;
|
|
transform: translateY(0.5rem);
|
|
}
|
|
.nav-list a:hover .text,
|
|
.nav-list a:focus-visible .text {
|
|
opacity: 1;
|
|
transform: translateY(1rem);
|
|
}
|
|
.nav-list a:hover .fa,
|
|
.nav-list a:focus-visible .fa {
|
|
background-color: var(--clr-accent-400);
|
|
transform: translateY(-0.5rem);
|
|
}
|
|
|
|
/* Box sizing rules */
|
|
*,
|
|
*::before,
|
|
*::after {
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
/* Set default margin */
|
|
* {
|
|
margin: 0px;
|
|
padding: 0px;
|
|
}
|
|
p {
|
|
margin: 1em 0px;
|
|
}
|
|
|
|
/* Main Style */
|
|
body {
|
|
font-family: 'Inter', sans-serif;
|
|
line-height: 1.5;
|
|
height: 100%;
|
|
background: var(--bg);
|
|
color: var(--txt)
|
|
}
|
|
a {
|
|
text-decoration: none;
|
|
}
|
|
a[href],
|
|
input[type='submit'],
|
|
label[for],
|
|
select,
|
|
button,
|
|
.pointer {
|
|
cursor: pointer;
|
|
}
|
|
|
|
/* Message Fields */
|
|
.error,
|
|
.info,
|
|
.success,
|
|
.validation,
|
|
.warning {
|
|
border: 1px solid;
|
|
margin: 1rem auto;
|
|
padding: 2rem 1rem 1rem 3rem;
|
|
background-repeat: no-repeat;
|
|
background-position: 10px center;
|
|
max-width: 500px
|
|
}
|
|
.info { color: #00529B; background-color: #BDE5F8 }
|
|
.success{ color: #4F8A10; background-color: #DFF2BF }
|
|
.warning{ color: #9F6000; background-color: #FEEFB3 }
|
|
.error { color: #D8000C; background-color: #FFD2D2 }
|
|
|
|
.left { float: left }
|
|
.right { float: right }
|
|
.bold { font-weight: bold }
|
|
|
|
/* Main Page */
|
|
#doc {
|
|
text-align: left;
|
|
margin: 0 auto;
|
|
/* display: inline-block;
|
|
display: table; */
|
|
color: var(--txt);
|
|
width: 80%;
|
|
min-width: 300px;
|
|
max-width: 600px;
|
|
}
|
|
|
|
#doc>a,
|
|
.dist>a,
|
|
#doc button,
|
|
#doc input[type=submit] {
|
|
/* padding: 12px; */
|
|
height: 3rem;
|
|
border: 1px solid var(--btnbrd);
|
|
border-radius: .6rem;
|
|
background-color: var(--btnbg);
|
|
color: var(--btnfg);
|
|
font-size: 1rem;
|
|
width: 100%;
|
|
margin: 12px 0;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
text-align: center;
|
|
text-decoration: none
|
|
}
|
|
|
|
#doc>a:hover,
|
|
.dist>a:hover,
|
|
#doc button:hover,
|
|
#doc input[type=submit]:hover {
|
|
background-color: var(--btnbghi)
|
|
}
|
|
|
|
#doc input:not([type=file]) {
|
|
background-color: var(--fldbg);
|
|
color: var(--fldfg)
|
|
}
|
|
#doc input[type=checkbox],
|
|
#doc input[type=radio] {
|
|
width: 1rem;
|
|
height: 1rem;
|
|
margin: 0.25rem
|
|
}
|
|
#doc input[type=color] {
|
|
width: 30%;
|
|
padding: 5px
|
|
}
|
|
#doc input:invalid {
|
|
border: 1px solid var(--fldred)
|
|
}
|
|
#doc select {
|
|
background-color: var(--fldbg);
|
|
color: var(--fldfg)
|
|
}
|
|
|
|
.c {
|
|
text-align: center
|
|
}
|
|
|
|
#doc>a.red,
|
|
#doc button.red {
|
|
background-color: var(--btnred)
|
|
}
|
|
|
|
#doc>a.red:focus,
|
|
#doc>a.red:hover,
|
|
#doc button.red:focus,
|
|
#doc button.red:hover {
|
|
background-color: var(--btnredhi)
|
|
}
|
|
|
|
#doc td {
|
|
padding-bottom: 0;
|
|
padding-top: 0
|
|
}
|
|
#doc th {
|
|
padding-top: .5rem
|
|
}
|
|
|
|
#doc input,
|
|
#doc select,
|
|
#doc textarea {
|
|
width: 100%;
|
|
padding: 1rem;
|
|
border: 1px solid #ccc;
|
|
border-radius: .6rem;
|
|
resize: vertical
|
|
}
|
|
#doc select {
|
|
appearance: none;
|
|
background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2.7' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e");
|
|
background-repeat: no-repeat;
|
|
background-position: right .8rem center;
|
|
background-size: 1rem
|
|
}
|
|
|
|
#doc label {
|
|
padding-right: 18px;
|
|
padding-left: .25rem;
|
|
display: inline-block
|
|
}
|
|
|
|
#bmp {
|
|
max-width: 100%;
|
|
height: auto;
|
|
}
|
|
|
|
.required {
|
|
background-image: var(--star);
|
|
background-position: right;
|
|
background-repeat: no-repeat;
|
|
background-size: 1.5rem 1.5rem;
|
|
}
|
|
|
|
.icon {
|
|
background-size: 1.25rem 1.25rem;
|
|
background-position: left;
|
|
background-repeat: no-repeat;
|
|
width: 1.5rem;
|
|
display: inline-block;
|
|
text-decoration: none
|
|
}
|
|
|
|
.icon:before{content: "\0000a0"}
|
|
.edit{background-image: var(--browse)}
|
|
.trash{background-image: var(--trash)}
|
|
|
|
/* Forms */
|
|
.container {
|
|
background-color: var(--grpbg);
|
|
color: var(--grpfg);
|
|
border-radius: .6rem;
|
|
padding: 10px;
|
|
margin: 20px 0
|
|
}
|
|
|
|
.dist {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
width: 100%;
|
|
margin: 1rem 0
|
|
}
|
|
|
|
.dist>a {
|
|
flex-grow: 1;
|
|
margin: 0 6px
|
|
}
|
|
|
|
.dist>a:first-child {
|
|
margin-left: 0
|
|
}
|
|
|
|
.dist>a:last-child {
|
|
margin-right: 0
|
|
}
|
|
|
|
.row:after {
|
|
content: "";
|
|
display: table;
|
|
clear: both
|
|
}
|
|
|
|
.row {
|
|
/* font-size: .833rem; */
|
|
margin: 5px
|
|
}
|
|
|
|
.gap,
|
|
.row:last-of-type {
|
|
margin-bottom: 1rem
|
|
}
|
|
|
|
.col-25 {
|
|
/* float: left;
|
|
width: 25%; */
|
|
text-align: left;
|
|
}
|
|
|
|
/* .col-75 {
|
|
float: left;
|
|
width: 75%
|
|
} */
|
|
|
|
#doc label,
|
|
#doc legend {
|
|
padding: 5px 18px 5px 0;
|
|
}
|
|
#doc fieldset {
|
|
display: contents
|
|
}
|
|
[v-cloak] > * { display:none }
|
|
/* [v-cloak]::before { content: "Loading…"; margin: auto; } */
|
|
|
|
|
|
@media screen and (min-width:800px) {
|
|
.row {
|
|
display:flex;
|
|
align-items:center
|
|
}
|
|
.col-25,
|
|
.col-75
|
|
{
|
|
float: left;
|
|
width: 75%;
|
|
margin-top: 0
|
|
}
|
|
|
|
.col-25 {
|
|
width: 25%;
|
|
text-align: right
|
|
}
|
|
}
|
|
|
|
|
|
/*
|
|
@media screen and (max-width:800px) {
|
|
|
|
// #doc input[type=submit],
|
|
.col-25,
|
|
.col-75
|
|
{
|
|
width: 100%;
|
|
margin-top: 0
|
|
}
|
|
|
|
.col-25 {
|
|
text-align: left
|
|
}
|
|
|
|
#doc label {
|
|
padding: 5px 18px 5px 0
|
|
}
|
|
}
|
|
*/
|
|
|
|
/* ********** Page Footer ********** */
|
|
.foot {
|
|
background-color: transparent !important;
|
|
all: revert;
|
|
float: right;
|
|
margin: 0;
|
|
font-size: .6rem
|
|
}
|
|
a.foot:link,
|
|
a.foot:visited {
|
|
color: var(--footfg)
|
|
}
|
|
.clear {
|
|
clear: both
|
|
}
|
|
|
|
/* ********** File Editor ********** */
|
|
.container__editor {
|
|
/* display: none; */
|
|
display: flex;
|
|
|
|
/* Misc */
|
|
border: 0;
|
|
width: 100vw;
|
|
height: 100vh;
|
|
background-color: var(--bg);
|
|
}
|
|
.container__left {
|
|
/* Initially, the left takes 3/4 width */
|
|
width: 10rem;
|
|
min-width: 6rem;
|
|
max-width: 20rem;
|
|
|
|
/* Misc */
|
|
/* align-items: center; */
|
|
display: flex;
|
|
justify-content: left;
|
|
overflow-x: clip;
|
|
overflow-y: scroll;
|
|
background-color: var(--treebg);
|
|
|
|
/* Popout */
|
|
top: 0;
|
|
bottom: 0;
|
|
left: 0;
|
|
right: clamp(10rem, 15vw, 80rem);
|
|
z-index: 10;
|
|
/* position: absolute; */
|
|
/* visibility: hidden; */
|
|
}
|
|
.resizer {
|
|
background-color: #d5dbe2;
|
|
cursor: ew-resize;
|
|
height: 100%;
|
|
width: 5px;
|
|
}
|
|
.container__right {
|
|
/* Take the remaining width */
|
|
flex: 1;
|
|
flex-direction: column;
|
|
|
|
/* Misc */
|
|
align-items: center;
|
|
display: flex;
|
|
background-color: #888;
|
|
}
|
|
.toolbar {
|
|
text-align: center;
|
|
width: 100%;
|
|
padding: 0.5rem;
|
|
color: var(--btnfg);
|
|
background-color: var(--toolbg)
|
|
}
|
|
.container__bottom {
|
|
/* Take the remaining width */
|
|
flex: 1;
|
|
|
|
/* Misc */
|
|
align-items: center;
|
|
display: flex;
|
|
justify-content: center;
|
|
top: 0;
|
|
bottom: 0;
|
|
width: 100%;
|
|
/* background-color: bisque; */
|
|
}
|
|
#sizeList {
|
|
width: 4rem;
|
|
}
|
|
#ctx {
|
|
display: none;
|
|
top: 10px;
|
|
left: 50px;
|
|
position: absolute;
|
|
background: #fff;
|
|
z-index: 10;
|
|
padding: 0.75rem;
|
|
border-radius: 0.5rem;
|
|
box-shadow: 0 0.5rem 0.75rem rgba(0,0,0,0.25);
|
|
}
|
|
#ctx > ul {
|
|
padding-left: 0px;
|
|
}
|
|
#ctx > ul > li {
|
|
white-space: nowrap
|
|
}
|
|
#ctx > ul > li:hover {
|
|
background: #ccc;
|
|
}
|
|
#fontsize, #page {
|
|
width: 3rem
|
|
}
|
|
#preview {
|
|
padding: 0.3rem;
|
|
overflow: scroll;
|
|
}
|
|
#preview > img {
|
|
max-width:100%;
|
|
max-height:100%;
|
|
height: 100%;
|
|
margin: auto;
|
|
display: block
|
|
}
|
|
#download-frame,
|
|
#preview {
|
|
display:none;
|
|
}
|
|
#tree {
|
|
width: 100%;
|
|
line-height: 1.3rem;
|
|
font-size: 0.95rem;
|
|
}
|
|
.download{background-image: var(--download)}
|
|
.upload{background-image: var(--upload)}
|
|
.eye{background-image: var(--eye)}
|
|
.flash{background-image: var(--flash)}
|
|
.file{background-image: var(--file)}
|
|
.zip{background-image: var(--zip)}
|
|
.css{background-image: var(--css)}
|
|
.cmd{background-image: var(--cmd)}
|
|
.json{background-image: var(--json)}
|
|
.jsonl{background-image: var(--json)}
|
|
.image{background-image: var(--image)}
|
|
.audio{background-image: var(--audio)}
|
|
.html{background-image: var(--html)}
|
|
.dir{background-image: var(--dir)}
|
|
.diropen{background-image: var(--diropen)}
|
|
|
|
|
|
#toast {
|
|
position: fixed;
|
|
bottom: 1rem;
|
|
right: 1.5rem;
|
|
display: grid;
|
|
align-items: end;
|
|
align-content: end;
|
|
gap: 1rem;
|
|
}
|
|
|
|
.toast {
|
|
font-size: 1rem;
|
|
margin: 0;
|
|
font-weight: bold;
|
|
line-height: 1;
|
|
padding: 0.5em 1em;
|
|
background-color: lightblue;
|
|
animation: toastIt 3000ms cubic-bezier(0.785, 0.135, 0.15, 0.86) forwards;
|
|
}
|
|
|
|
@keyframes toastIt {
|
|
0%,
|
|
100% {
|
|
transform: translateY(150%);
|
|
opacity: 0;
|
|
}
|
|
10%,
|
|
90% {
|
|
transform: translateY(0);
|
|
opacity: 1;
|
|
}
|
|
}
|