@georapbox/files-dropzone-element 2.2.0 → 3.0.0

package/docs/css/water.css

@@ -0,0 +1,674 @@
+/**
+ * water.css | https://github.com/kognise/water.css
+ * NOTE: This is a customized version of water.css.
+ */
+:root {
+  /* Layout */
+  --body-max-width: 64rem; /* 1024px */
+
+  /* Colors */
+  --background-body: #ffffff;
+  --background: #efefef;
+  --background-alt: #f7f7f7;
+  --background-input: #ffffff;
+  --background-card: #ffffff;
+  --selection: #9e9e9e;
+  --text-main: #363636;
+  --text-bright: #000000;
+  --text-muted: #70777f;
+  --links: #0063af;
+  --focus: #0096bfab;
+  --border: #dbdbdb;
+  --code: #000000;
+  --button-base: #d0cfcf;
+  --button-hover: #9b9b9b;
+  --form-placeholder: #949494;
+  --form-text: #1d1d1d;
+  --variable: #39a33c;
+  --highlight: #fff000;
+
+  /* Shape */
+  --border-radius: 6px;
+
+  /* Misc */
+  --animation-duration: 0.1s;
+  --select-arrow: url("data:image/svg+xml;charset=utf-8,%3C?xml version='1.0' encoding='utf-8'?%3E %3Csvg version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' height='62.5' width='116.9' fill='%23161f27'%3E %3Cpath d='M115.3,1.6 C113.7,0 111.1,0 109.5,1.6 L58.5,52.7 L7.4,1.6 C5.8,0 3.2,0 1.6,1.6 C0,3.2 0,5.8 1.6,7.4 L55.5,61.3 C56.3,62.1 57.3,62.5 58.4,62.5 C59.4,62.5 60.5,62.1 61.3,61.3 L115.2,7.4 C116.9,5.8 116.9,3.2 115.3,1.6Z'/%3E %3C/svg%3E");
+
+  accent-color: var(--links);
+  color-scheme: light;
+}
+
+@media (prefers-color-scheme: dark) {
+  :root {
+    /* Colors */
+    --background-body: #202b38;
+    --background: #161f27;
+    --background-alt: #1a242f;
+    --background-input: var(--background);
+    --background-card: #283647;
+    --selection: #1c76c5;
+    --text-main: #dbdbdb;
+    --text-bright: #ffffff;
+    --text-muted: #a9b1ba;
+    --links: #41adff;
+    --focus: #0096bfab;
+    --border: #526980;
+    --code: #ffbe85;
+    --button-base: #0c151c;
+    --button-hover: #040a0f;
+    --form-placeholder: #a9a9a9;
+    --form-text: #ffffff;
+    --variable: #d941e2;
+    --highlight: #efdb43;
+
+    /* Misc */
+    --select-arrow: url("data:image/svg+xml;charset=utf-8,%3C?xml version='1.0' encoding='utf-8'?%3E %3Csvg version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' height='62.5' width='116.9' fill='%23ffffff'%3E %3Cpath d='M115.3,1.6 C113.7,0 111.1,0 109.5,1.6 L58.5,52.7 L7.4,1.6 C5.8,0 3.2,0 1.6,1.6 C0,3.2 0,5.8 1.6,7.4 L55.5,61.3 C56.3,62.1 57.3,62.5 58.4,62.5 C59.4,62.5 60.5,62.1 61.3,61.3 L115.2,7.4 C116.9,5.8 116.9,3.2 115.3,1.6Z'/%3E %3C/svg%3E");
+
+    color-scheme: dark;
+  }
+}
+
+body {
+  font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', 'Segoe UI Emoji', 'Apple Color Emoji', 'Noto Color Emoji', sans-serif;
+  line-height: 1.5;
+  max-width: var(--body-max-width);
+  margin: 1.25rem auto; /* 20px */
+  padding: 0 0.75rem; /* 0 12px */
+  overflow-x: hidden;
+  color: var(--text-main);
+  background: var(--background-body);
+  text-rendering: optimizeLegibility;
+}
+
+p {
+  text-wrap: pretty;
+}
+
+h1 {
+  font-size: 2.2rem;
+  margin-top: 0;
+}
+
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+  margin-bottom: 0.75rem; /* 12px */
+  margin-top: 1.5rem; /* 24px */
+  color: var(--text-bright);
+}
+
+strong {
+  color: var(--text-bright);
+}
+
+h1,
+h2,
+h3,
+h4,
+h5,
+h6,
+b,
+strong,
+th {
+  font-weight: 600;
+}
+
+q::before,
+q::after {
+  content: none;
+}
+
+blockquote,
+q {
+  border-inline-start: 0.25rem solid var(--focus); /* 4px */
+  margin: 1.5rem 0; /* 24px 0 */
+  padding: 0.5rem 1rem; /* 8px 16px */
+  font-style: italic;
+}
+
+blockquote > footer {
+  font-style: normal;
+  border: 0;
+}
+
+blockquote cite {
+  font-style: normal;
+}
+
+address {
+  font-style: normal;
+}
+
+a[href^='mailto\:']::before {
+  content: '📧 ';
+}
+
+a[href^='tel\:']::before {
+  content: '📞 ';
+}
+
+a[href^='sms\:']::before {
+  content: '💬 ';
+}
+
+mark {
+  background-color: #ff0;
+  background-color: var(--highlight);
+  border-radius: 0.125rem; /* 2px */
+  padding: 0 0.125rem;
+  color: #000000;
+}
+
+a > code,
+a > strong {
+  color: inherit;
+}
+
+button,
+select,
+input[type='submit'],
+input[type='reset'],
+input[type='button'],
+input[type='checkbox'],
+input[type='range'],
+input[type='radio'] {
+  cursor: pointer;
+}
+
+input,
+select {
+  display: block;
+}
+
+[type='checkbox'],
+[type='radio'] {
+  display: initial;
+}
+
+input,
+button,
+textarea,
+select {
+  color: var(--form-text);
+  background-color: var(--background-input);
+  font-family: inherit;
+  font-size: inherit;
+  margin-inline-end: 0.375rem; /* 6px */
+  margin-bottom: 0.375rem; /* 6px */
+  padding: 0.625em 0.75em;
+  border: none;
+  border-radius: var(--border-radius);
+  outline: none;
+}
+
+button {
+  background-color: var(--button-base);
+  padding-inline: 1.875em;
+}
+
+input[type='submit'],
+input[type='reset'],
+input[type='button'] {
+  background-color: var(--button-base);
+  padding-inline: 1.875em;
+}
+
+button:hover:not(:disabled) {
+  background: var(--button-hover);
+}
+
+input[type='submit']:hover,
+input[type='reset']:hover,
+input[type='button']:hover {
+  background: var(--button-hover);
+}
+
+input[type='color'] {
+  min-height: 2rem;
+  padding: 0.5em;
+  cursor: pointer;
+}
+
+input[type='checkbox'],
+input[type='radio'] {
+  width: 1em;
+  height: 1em;
+}
+
+input[type='radio'] {
+  border-radius: 100%;
+}
+
+input {
+  vertical-align: top;
+}
+
+input[type='text'],
+input[type='url'],
+input[type='email'],
+input[type='number'],
+input[type='password'],
+input[type='search'],
+input[type='date'],
+input[type='datetime-local'],
+input[type='time'],
+input[type='week'],
+input[type='tel'],
+input[type='file'],
+textarea,
+select {
+  border: 1px solid var(--border);
+}
+
+label {
+  vertical-align: middle;
+  margin-bottom: 0.25rem; /* 4px */
+  display: inline-block;
+}
+
+input:not([type='checkbox']):not([type='radio']),
+input[type='range'],
+select,
+button,
+textarea {
+  appearance: none;
+}
+
+textarea {
+  display: block;
+  margin-inline-end: 0;
+  box-sizing: border-box;
+  resize: vertical;
+}
+
+textarea:not([cols]) {
+  width: 100%;
+}
+
+textarea:not([rows]) {
+  min-height: 2.5rem; /* 40px */
+  height: 8.75rem; /* 140px */
+}
+
+select {
+  padding-inline-end: 2.1875rem; /* 35px: room for arrow */
+  background-color: var(--background-input);
+  background-image: var(--select-arrow);
+  background-repeat: no-repeat;
+  background-size: 0.75rem;
+  background-position: right 0.75rem center;
+}
+
+:dir(rtl) select {
+  background-position: left 0.75rem center;
+}
+
+select::-ms-expand {
+  display: none;
+}
+
+select[multiple] {
+  padding-inline-end: 0.625rem; /* 10px */
+  background-image: none;
+  overflow-y: auto;
+}
+
+input:focus-visible,
+select:focus-visible,
+button:focus-visible,
+textarea:focus-visible {
+  outline: 2px solid var(--focus);
+}
+
+input:disabled,
+select:disabled,
+button:disabled,
+textarea:disabled {
+  cursor: not-allowed;
+  opacity: 0.5;
+}
+
+::-moz-placeholder,
+:-ms-input-placeholder,
+::-ms-input-placeholder,
+::placeholder {
+  color: var(--form-placeholder);
+}
+
+fieldset {
+  border: 1px solid var(--focus);
+  border-radius: var(--border-radius);
+  margin: 0;
+  margin-bottom: 0.75rem; /* 12px */
+  padding: 0.625rem; /* 10px */
+}
+
+legend {
+  font-size: 0.9rem;
+  font-weight: 600;
+}
+
+input[type='range'] {
+  margin: 0.625rem 0; /* 10px 0 */
+  padding: 0.625rem 0; /* 10px 0 */
+  background: transparent;
+}
+
+input[type='range']::-webkit-slider-runnable-track {
+  width: 100%;
+  height: 0.375rem;
+  border-radius: 9999px;
+  background: var(--border);
+  background: color-mix(in srgb, var(--border) 60%, transparent);
+}
+
+input[type='range']::-webkit-slider-thumb {
+  width: 1.125rem;
+  height: 1.125rem;
+  margin-top: -0.375rem;
+  appearance: none;
+  border: 2px solid var(--background-body);
+  border-radius: 50%;
+  background: var(--links);
+  box-shadow: 0 0 0 3px var(--border);
+  box-shadow: 0 0 0 3px color-mix(in srgb, var(--border) 60%, transparent);
+}
+
+input[type='range']::-moz-range-track {
+  width: 100%;
+  height: 0.375rem;
+  border-radius: 9999px;
+  background: var(--border);
+  background: color-mix(in srgb, var(--border) 60%, transparent);
+}
+
+input[type='range']::-moz-range-thumb {
+  width: 1.125rem;
+  height: 1.125rem;
+  border: 2px solid var(--background-body);
+  border-radius: 50%;
+  background: var(--links);
+  box-shadow: 0 0 0 3px rgb(155 234 38 / 18%);
+  box-shadow: 0 0 0 3px light-dark(rgb(74 112 18 / 28%), rgb(155 234 38 / 18%));
+}
+
+input[type="file"]::file-selector-button {
+  border: none;
+  border-radius: var(--border-radius);
+  background: var(--button-base);
+  color: var(--form-text);
+  padding: 0.625em 1.25em;
+  margin-inline-end: 0.75rem;
+  cursor: pointer;
+}
+
+input[type="file"]:disabled::file-selector-button {
+  cursor: not-allowed;
+}
+
+input[type="file"]:not(:disabled)::file-selector-button:hover {
+  background: var(--button-hover);
+}
+
+a,
+a:hover {
+  color: var(--links);
+  text-decoration: underline;
+}
+
+code,
+samp,
+time {
+  background: var(--background);
+  color: var(--code);
+  padding: 0.15625rem 0.3125rem; /* 2.5px 5px */
+  border-radius: var(--border-radius);
+  font-size: 1em;
+}
+
+pre > code {
+  padding: 0.625rem; /* 10px */
+  display: block;
+  overflow-x: auto;
+}
+
+pre > code:empty {
+  display: none;
+}
+
+var {
+  color: var(--variable);
+  font-style: normal;
+  font-family: monospace;
+}
+
+kbd {
+  background: var(--background);
+  border: 1px solid var(--border);
+  border-radius: 0.125rem; /* 2px */
+  color: var(--text-main);
+  padding: 0.125rem 0.25rem;
+}
+
+img,
+video {
+  max-width: 100%;
+  height: auto;
+}
+
+hr {
+  border: none;
+  border-top: 1px solid var(--border);
+}
+
+table {
+  border-collapse: collapse;
+  margin-bottom: 0.625rem; /* 10px */
+  width: 100%;
+  table-layout: fixed;
+}
+
+table caption {
+  text-align: start;
+}
+
+td,
+th {
+  padding: 0.375rem; /* 6px */
+  text-align: start;
+  vertical-align: top;
+  word-wrap: break-word;
+}
+
+thead {
+  border-bottom: 1px solid var(--border);
+}
+
+tfoot {
+  border-top: 1px solid var(--border);
+}
+
+tbody tr:nth-child(even) {
+  background-color: var(--background);
+}
+
+tbody tr:nth-child(even) button {
+  background-color: var(--background-alt);
+}
+
+tbody tr:nth-child(even) button:hover {
+  background-color: var(--background-body);
+}
+
+details {
+  background-color: var(--background-alt);
+  padding: 0.625rem 0.625rem 0 0.625rem;
+  margin: 1rem 0;
+  border-radius: var(--border-radius);
+  overflow: hidden;
+}
+
+details[open] {
+  padding: 0.625rem;
+}
+
+details > :last-child {
+  margin-bottom: 0;
+}
+
+@media (prefers-reduced-motion: no-preference) {
+  details > summary {
+    transition: margin var(--animation-duration) ease-out;
+  }
+}
+
+details[open] > summary {
+  margin-bottom: 0.625rem;
+}
+
+summary {
+  display: list-item;
+  background-color: var(--background);
+  padding: 0.625rem;
+  margin: -0.625rem -0.625rem 0;
+  cursor: pointer;
+  outline: none;
+}
+
+details > :not(summary) {
+  margin-top: 0;
+}
+
+summary::marker {
+  color: var(--text-main);
+}
+
+summary:focus-visible {
+  box-shadow: inset 0 0 0 2px var(--focus);
+}
+
+dialog {
+  background-color: var(--background-alt);
+  color: var(--text-main);
+  border: none;
+  border-radius: var(--border-radius);
+  border-color: var(--border);
+  padding: 0.625rem 1.875rem; /* 10px 30px */
+}
+
+dialog > header:first-child {
+  background-color: var(--background);
+  border-radius: 0.375rem 0.375rem 0 0; /* 6px 6px 0 0 */
+  margin: -0.625rem -1.875rem 0.625rem;
+  padding: 0.625rem;
+  text-align: center;
+}
+
+dialog::backdrop {
+  background: #0000009c;
+  backdrop-filter: blur(0.25rem); /* 4px */
+}
+
+@media (prefers-reduced-motion: no-preference) {
+  dialog::backdrop {
+    opacity: 0;
+  }
+
+  dialog[open]::backdrop {
+    opacity: 1;
+  }
+
+  dialog,
+  dialog::backdrop {
+    transition: transform 0.3s, opacity 0.3s, display 0.3s allow-discrete, overlay 0.3s allow-discrete;
+  }
+
+  /* 1. IS-OPEN STATE */
+  dialog[open] {
+    transform: scale(1);
+    opacity: 1;
+  }
+
+  /* 2. EXIT STATE */
+  dialog {
+    transform: scale(0.95);
+    opacity: 0;
+  }
+
+  /* 0. BEFORE-OPEN STATE */
+  @starting-style {
+    dialog[open] {
+      transform: scale(0.95);
+      opacity: 0;
+    }
+
+    dialog[open]::backdrop {
+      opacity: 0;
+    }
+  }
+}
+
+footer {
+  border-top: 1px solid #dbdbdb;
+  border-top: 1px solid var(--border);
+  padding-top: 0.625rem; /* 10px */
+  color: #70777f;
+  color: var(--text-muted);
+}
+
+body > footer {
+  margin-top: 2.5rem; /* 40px */
+}
+
+@media print {
+  body,
+  pre,
+  code,
+  summary,
+  details,
+  button,
+  input,
+  textarea {
+    background-color: #ffffff;
+  }
+
+  button,
+  input,
+  textarea {
+    border: 1px solid #000000;
+  }
+
+  body,
+  h1,
+  h2,
+  h3,
+  h4,
+  h5,
+  h6,
+  pre,
+  code,
+  button,
+  input,
+  textarea,
+  footer,
+  summary,
+  strong {
+    color: #000000;
+  }
+
+  summary::marker {
+    color: #000000;
+  }
+
+  tbody tr:nth-child(even) {
+    background-color: #f2f2f2;
+  }
+
+  a {
+    color: #0000ff;
+    text-decoration: underline;
+  }
+}