diff --git a/assets/private.html b/assets/private.html new file mode 100644 index 0000000..d4bb736 --- /dev/null +++ b/assets/private.html @@ -0,0 +1,61 @@ + + + + + + + Portal User + + + + + + + +
+
+

Bienvenue sur kitoy.me

+

Gérez votre compte sur kitoy.me

+
+ + +
+ + +
+

Gérer votre compte

+ +

message debug: $msg$

+ +
+ + + + + + + diff --git a/assets/private_test.html b/assets/private_test.html deleted file mode 100644 index 9ee1072..0000000 --- a/assets/private_test.html +++ /dev/null @@ -1,5 +0,0 @@ - - -

BRAVO

- - diff --git a/assets/style.css b/assets/style.css index f53a0c4..74564ab 100644 --- a/assets/style.css +++ b/assets/style.css @@ -1,6 +1,7 @@ +@charset "UTF-8"; /*! - * Pico.css v1.4.1 (https://picocss.com) - * Copyright 2019-2021 - Licensed under MIT + * Pico.css v1.5.2 (https://picocss.com) + * Copyright 2019-2022 - Licensed under MIT */ /** * Theme: default @@ -23,6 +24,11 @@ --grid-spacing-horizontal: var(--spacing); --form-element-spacing-vertical: 0.75rem; --form-element-spacing-horizontal: 1rem; + --nav-element-spacing-vertical: 1rem; + --nav-element-spacing-horizontal: 0.5rem; + --nav-link-spacing-vertical: 0.5rem; + --nav-link-spacing-horizontal: 0.5rem; + --form-label-font-weight: var(--font-weight); --transition: 0.2s ease-in-out; } @media (min-width: 576px) { @@ -100,6 +106,23 @@ section { } } +dialog > article { + --block-spacing-vertical: calc(var(--spacing) * 2); + --block-spacing-horizontal: var(--spacing); +} +@media (min-width: 576px) { + dialog > article { + --block-spacing-vertical: calc(var(--spacing) * 2.5); + --block-spacing-horizontal: calc(var(--spacing) * 1.25); + } +} +@media (min-width: 768px) { + dialog > article { + --block-spacing-vertical: calc(var(--spacing) * 3); + --block-spacing-horizontal: calc(var(--spacing) * 1.5); + } +} + a { --text-decoration: none; } @@ -155,11 +178,13 @@ h5 { } thead th, -thead td { +thead td, +tfoot th, +tfoot td { --border-width: 3px; } -:not(thead) > * > td { +:not(thead):not(tfoot) > * > td { --font-size: 0.875em; } @@ -180,24 +205,24 @@ kbd { :root:not([data-theme=dark]) { color-scheme: light; --background-color: #fff; - --color: #415462; - --h1-color: #1b2832; + --color: hsl(205deg, 20%, 32%); + --h1-color: hsl(205deg, 30%, 15%); --h2-color: #24333e; - --h3-color: #2c3d49; + --h3-color: hsl(205deg, 25%, 23%); --h4-color: #374956; - --h5-color: #415462; + --h5-color: hsl(205deg, 20%, 32%); --h6-color: #4d606d; - --muted-color: #73828c; - --muted-border-color: #edf0f3; - --primary: #1095c1; - --primary-hover: #08769b; + --muted-color: hsl(205deg, 10%, 50%); + --muted-border-color: hsl(205deg, 20%, 94%); + --primary: hsl(195deg, 85%, 41%); + --primary-hover: hsl(195deg, 90%, 32%); --primary-focus: rgba(16, 149, 193, 0.125); --primary-inverse: #fff; - --secondary: #596b78; - --secondary-hover: #415462; + --secondary: hsl(205deg, 15%, 41%); + --secondary-hover: hsl(205deg, 20%, 32%); --secondary-focus: rgba(89, 107, 120, 0.125); --secondary-inverse: #fff; - --contrast: #1b2832; + --contrast: hsl(205deg, 30%, 15%); --contrast-hover: #000; --contrast-focus: rgba(89, 107, 120, 0.125); --contrast-inverse: #fff; @@ -210,38 +235,40 @@ kbd { --button-box-shadow: 0 0 0 rgba(0, 0, 0, 0); --button-hover-box-shadow: 0 0 0 rgba(0, 0, 0, 0); --form-element-background-color: transparent; - --form-element-border-color: #a2afb9; + --form-element-border-color: hsl(205deg, 14%, 68%); --form-element-color: var(--color); --form-element-placeholder-color: var(--muted-color); --form-element-active-background-color: transparent; --form-element-active-border-color: var(--primary); --form-element-focus-color: var(--primary-focus); - --form-element-disabled-background-color: #d5dce2; - --form-element-disabled-border-color: #a2afb9; + --form-element-disabled-background-color: hsl(205deg, 18%, 86%); + --form-element-disabled-border-color: hsl(205deg, 14%, 68%); --form-element-disabled-opacity: 0.5; --form-element-invalid-border-color: #c62828; - --form-element-invalid-active-border-color: #b71c1c; + --form-element-invalid-active-border-color: #d32f2f; + --form-element-invalid-focus-color: rgba(211, 47, 47, 0.125); --form-element-valid-border-color: #388e3c; - --form-element-valid-active-border-color: #2e7d32; - --switch-background-color: #bbc6ce; + --form-element-valid-active-border-color: #43a047; + --form-element-valid-focus-color: rgba(67, 160, 71, 0.125); + --switch-background-color: hsl(205deg, 16%, 77%); --switch-color: var(--primary-inverse); --switch-checked-background-color: var(--primary); - --range-border-color: #d5dce2; - --range-active-border-color: #bbc6ce; + --range-border-color: hsl(205deg, 18%, 86%); + --range-active-border-color: hsl(205deg, 16%, 77%); --range-thumb-border-color: var(--background-color); --range-thumb-color: var(--secondary); --range-thumb-hover-color: var(--secondary-hover); --range-thumb-active-color: var(--primary); --table-border-color: var(--muted-border-color); --table-row-stripped-background-color: #f6f8f9; - --code-background-color: #edf0f3; + --code-background-color: hsl(205deg, 20%, 94%); --code-color: var(--muted-color); --code-kbd-background-color: var(--contrast); --code-kbd-color: var(--contrast-inverse); - --code-tag-color: #b34d80; - --code-property-color: #3d888f; - --code-value-color: #998866; - --code-comment-color: #a2afb9; + --code-tag-color: hsl(330deg, 40%, 50%); + --code-property-color: hsl(185deg, 40%, 40%); + --code-value-color: hsl(40deg, 20%, 50%); + --code-comment-color: hsl(205deg, 14%, 68%); --accordion-border-color: var(--muted-border-color); --accordion-close-summary-color: var(--color); --accordion-open-summary-color: var(--muted-color); @@ -251,43 +278,52 @@ kbd { 0 0.125rem 2rem rgba(27, 40, 50, 0.08), 0 0 0 0.0625rem rgba(27, 40, 50, 0.024); --card-sectionning-background-color: #fbfbfc; - --progress-background-color: #d5dce2; + --dropdown-background-color: #fbfbfc; + --dropdown-border-color: #e1e6eb; + --dropdown-box-shadow: var(--card-box-shadow); + --dropdown-color: var(--color); + --dropdown-hover-background-color: hsl(205deg, 20%, 94%); + --modal-overlay-background-color: rgba(213, 220, 226, 0.8); + --progress-background-color: hsl(205deg, 18%, 86%); --progress-color: var(--primary); --loading-spinner-opacity: 0.5; --tooltip-background-color: var(--contrast); --tooltip-color: var(--contrast-inverse); - --icon-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgba(65, 84, 98, 0.999)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E"); - --icon-date: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgba(65, 84, 98, 0.999)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='18' rx='2' ry='2'%3E%3C/rect%3E%3Cline x1='16' y1='2' x2='16' y2='6'%3E%3C/line%3E%3Cline x1='8' y1='2' x2='8' y2='6'%3E%3C/line%3E%3Cline x1='3' y1='10' x2='21' y2='10'%3E%3C/line%3E%3C/svg%3E"); - --icon-time: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgba(65, 84, 98, 0.999)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cpolyline points='12 6 12 12 16 14'%3E%3C/polyline%3E%3C/svg%3E"); - --icon-search: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgba(65, 84, 98, 0.999)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'%3E%3C/circle%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'%3E%3C/line%3E%3C/svg%3E"); --icon-checkbox: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23FFF' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E"); - --icon-minus: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23FFF' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='5' y1='12' x2='19' y2='12'%3E%3C/line%3E%3C/svg%3E"); - --icon-valid: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgba(56, 142, 60, 0.999)' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E"); + --icon-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgba(65, 84, 98, 0.999)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E"); + --icon-chevron-button: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgba(255, 255, 255, 0.999)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E"); + --icon-chevron-button-inverse: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgba(255, 255, 255, 0.999)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E"); + --icon-close: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgba(115, 130, 140, 0.999)' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='18' y1='6' x2='6' y2='18'%3E%3C/line%3E%3Cline x1='6' y1='6' x2='18' y2='18'%3E%3C/line%3E%3C/svg%3E"); + --icon-date: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgba(65, 84, 98, 0.999)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='18' rx='2' ry='2'%3E%3C/rect%3E%3Cline x1='16' y1='2' x2='16' y2='6'%3E%3C/line%3E%3Cline x1='8' y1='2' x2='8' y2='6'%3E%3C/line%3E%3Cline x1='3' y1='10' x2='21' y2='10'%3E%3C/line%3E%3C/svg%3E"); --icon-invalid: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgba(198, 40, 40, 0.999)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cline x1='12' y1='8' x2='12' y2='12'%3E%3C/line%3E%3Cline x1='12' y1='16' x2='12.01' y2='16'%3E%3C/line%3E%3C/svg%3E"); + --icon-minus: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23FFF' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='5' y1='12' x2='19' y2='12'%3E%3C/line%3E%3C/svg%3E"); + --icon-search: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgba(65, 84, 98, 0.999)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'%3E%3C/circle%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'%3E%3C/line%3E%3C/svg%3E"); + --icon-time: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgba(65, 84, 98, 0.999)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cpolyline points='12 6 12 12 16 14'%3E%3C/polyline%3E%3C/svg%3E"); + --icon-valid: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgba(56, 142, 60, 0.999)' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E"); } @media only screen and (prefers-color-scheme: dark) { :root:not([data-theme=light]) { color-scheme: dark; --background-color: #11191f; - --color: #bbc6ce; - --h1-color: #edf0f3; + --color: hsl(205deg, 16%, 77%); + --h1-color: hsl(205deg, 20%, 94%); --h2-color: #e1e6eb; - --h3-color: #d5dce2; + --h3-color: hsl(205deg, 18%, 86%); --h4-color: #c8d1d8; - --h5-color: #bbc6ce; + --h5-color: hsl(205deg, 16%, 77%); --h6-color: #afbbc4; - --muted-color: #73828c; + --muted-color: hsl(205deg, 10%, 50%); --muted-border-color: #1f2d38; - --primary: #1095c1; - --primary-hover: #1ab3e6; + --primary: hsl(195deg, 85%, 41%); + --primary-hover: hsl(195deg, 80%, 50%); --primary-focus: rgba(16, 149, 193, 0.25); --primary-inverse: #fff; - --secondary: #596b78; - --secondary-hover: #73828c; + --secondary: hsl(205deg, 15%, 41%); + --secondary-hover: hsl(205deg, 10%, 50%); --secondary-focus: rgba(115, 130, 140, 0.25); --secondary-inverse: #fff; - --contrast: #edf0f3; + --contrast: hsl(205deg, 20%, 94%); --contrast-hover: #fff; --contrast-focus: rgba(115, 130, 140, 0.25); --contrast-inverse: #000; @@ -306,18 +342,20 @@ kbd { --form-element-active-background-color: var(--form-element-background-color); --form-element-active-border-color: var(--primary); --form-element-focus-color: var(--primary-focus); - --form-element-disabled-background-color: #2c3d49; - --form-element-disabled-border-color: #415462; + --form-element-disabled-background-color: hsl(205deg, 25%, 23%); + --form-element-disabled-border-color: hsl(205deg, 20%, 32%); --form-element-disabled-opacity: 0.5; --form-element-invalid-border-color: #b71c1c; --form-element-invalid-active-border-color: #c62828; + --form-element-invalid-focus-color: rgba(198, 40, 40, 0.25); --form-element-valid-border-color: #2e7d32; --form-element-valid-active-border-color: #388e3c; + --form-element-valid-focus-color: rgba(56, 142, 60, 0.25); --switch-background-color: #374956; --switch-color: var(--primary-inverse); --switch-checked-background-color: var(--primary); --range-border-color: #24333e; - --range-active-border-color: #2c3d49; + --range-active-border-color: hsl(205deg, 25%, 23%); --range-thumb-border-color: var(--background-color); --range-thumb-color: var(--secondary); --range-thumb-hover-color: var(--secondary-hover); @@ -328,9 +366,9 @@ kbd { --code-color: var(--muted-color); --code-kbd-background-color: var(--contrast); --code-kbd-color: var(--contrast-inverse); - --code-tag-color: #a65980; - --code-property-color: #599fa6; - --code-value-color: #8c8473; + --code-tag-color: hsl(330deg, 30%, 50%); + --code-property-color: hsl(185deg, 30%, 50%); + --code-value-color: hsl(40deg, 10%, 50%); --code-comment-color: #4d606d; --accordion-border-color: var(--muted-border-color); --accordion-active-summary-color: var(--primary); @@ -342,42 +380,51 @@ kbd { 0 0.125rem 2rem rgba(0, 0, 0, 0.12), 0 0 0 0.0625rem rgba(0, 0, 0, 0.036); --card-sectionning-background-color: #18232c; + --dropdown-background-color: hsl(205deg, 30%, 15%); + --dropdown-border-color: #24333e; + --dropdown-box-shadow: var(--card-box-shadow); + --dropdown-color: var(--color); + --dropdown-hover-background-color: rgba(36, 51, 62, 0.75); + --modal-overlay-background-color: rgba(36, 51, 62, 0.9); --progress-background-color: #24333e; --progress-color: var(--primary); --loading-spinner-opacity: 0.5; --tooltip-background-color: var(--contrast); --tooltip-color: var(--contrast-inverse); - --icon-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgba(162, 175, 185, 0.999)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E"); - --icon-date: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgba(162, 175, 185, 0.999)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='18' rx='2' ry='2'%3E%3C/rect%3E%3Cline x1='16' y1='2' x2='16' y2='6'%3E%3C/line%3E%3Cline x1='8' y1='2' x2='8' y2='6'%3E%3C/line%3E%3Cline x1='3' y1='10' x2='21' y2='10'%3E%3C/line%3E%3C/svg%3E"); - --icon-time: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgba(162, 175, 185, 0.999)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cpolyline points='12 6 12 12 16 14'%3E%3C/polyline%3E%3C/svg%3E"); - --icon-search: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgba(162, 175, 185, 0.999)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'%3E%3C/circle%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'%3E%3C/line%3E%3C/svg%3E"); --icon-checkbox: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23FFF' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E"); - --icon-minus: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23FFF' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='5' y1='12' x2='19' y2='12'%3E%3C/line%3E%3C/svg%3E"); - --icon-valid: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgba(46, 125, 50, 0.999)' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E"); + --icon-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgba(162, 175, 185, 0.999)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E"); + --icon-chevron-button: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgba(255, 255, 255, 0.999)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E"); + --icon-chevron-button-inverse: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgba(0, 0, 0, 0.999)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E"); + --icon-close: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgba(115, 130, 140, 0.999)' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='18' y1='6' x2='6' y2='18'%3E%3C/line%3E%3Cline x1='6' y1='6' x2='18' y2='18'%3E%3C/line%3E%3C/svg%3E"); + --icon-date: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgba(162, 175, 185, 0.999)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='18' rx='2' ry='2'%3E%3C/rect%3E%3Cline x1='16' y1='2' x2='16' y2='6'%3E%3C/line%3E%3Cline x1='8' y1='2' x2='8' y2='6'%3E%3C/line%3E%3Cline x1='3' y1='10' x2='21' y2='10'%3E%3C/line%3E%3C/svg%3E"); --icon-invalid: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgba(183, 28, 28, 0.999)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cline x1='12' y1='8' x2='12' y2='12'%3E%3C/line%3E%3Cline x1='12' y1='16' x2='12.01' y2='16'%3E%3C/line%3E%3C/svg%3E"); + --icon-minus: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23FFF' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='5' y1='12' x2='19' y2='12'%3E%3C/line%3E%3C/svg%3E"); + --icon-search: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgba(162, 175, 185, 0.999)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'%3E%3C/circle%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'%3E%3C/line%3E%3C/svg%3E"); + --icon-time: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgba(162, 175, 185, 0.999)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cpolyline points='12 6 12 12 16 14'%3E%3C/polyline%3E%3C/svg%3E"); + --icon-valid: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgba(46, 125, 50, 0.999)' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E"); } } [data-theme=dark] { color-scheme: dark; --background-color: #11191f; - --color: #bbc6ce; - --h1-color: #edf0f3; + --color: hsl(205deg, 16%, 77%); + --h1-color: hsl(205deg, 20%, 94%); --h2-color: #e1e6eb; - --h3-color: #d5dce2; + --h3-color: hsl(205deg, 18%, 86%); --h4-color: #c8d1d8; - --h5-color: #bbc6ce; + --h5-color: hsl(205deg, 16%, 77%); --h6-color: #afbbc4; - --muted-color: #73828c; + --muted-color: hsl(205deg, 10%, 50%); --muted-border-color: #1f2d38; - --primary: #1095c1; - --primary-hover: #1ab3e6; + --primary: hsl(195deg, 85%, 41%); + --primary-hover: hsl(195deg, 80%, 50%); --primary-focus: rgba(16, 149, 193, 0.25); --primary-inverse: #fff; - --secondary: #596b78; - --secondary-hover: #73828c; + --secondary: hsl(205deg, 15%, 41%); + --secondary-hover: hsl(205deg, 10%, 50%); --secondary-focus: rgba(115, 130, 140, 0.25); --secondary-inverse: #fff; - --contrast: #edf0f3; + --contrast: hsl(205deg, 20%, 94%); --contrast-hover: #fff; --contrast-focus: rgba(115, 130, 140, 0.25); --contrast-inverse: #000; @@ -396,18 +443,20 @@ kbd { --form-element-active-background-color: var(--form-element-background-color); --form-element-active-border-color: var(--primary); --form-element-focus-color: var(--primary-focus); - --form-element-disabled-background-color: #2c3d49; - --form-element-disabled-border-color: #415462; + --form-element-disabled-background-color: hsl(205deg, 25%, 23%); + --form-element-disabled-border-color: hsl(205deg, 20%, 32%); --form-element-disabled-opacity: 0.5; --form-element-invalid-border-color: #b71c1c; --form-element-invalid-active-border-color: #c62828; + --form-element-invalid-focus-color: rgba(198, 40, 40, 0.25); --form-element-valid-border-color: #2e7d32; --form-element-valid-active-border-color: #388e3c; + --form-element-valid-focus-color: rgba(56, 142, 60, 0.25); --switch-background-color: #374956; --switch-color: var(--primary-inverse); --switch-checked-background-color: var(--primary); --range-border-color: #24333e; - --range-active-border-color: #2c3d49; + --range-active-border-color: hsl(205deg, 25%, 23%); --range-thumb-border-color: var(--background-color); --range-thumb-color: var(--secondary); --range-thumb-hover-color: var(--secondary-hover); @@ -418,9 +467,9 @@ kbd { --code-color: var(--muted-color); --code-kbd-background-color: var(--contrast); --code-kbd-color: var(--contrast-inverse); - --code-tag-color: #a65980; - --code-property-color: #599fa6; - --code-value-color: #8c8473; + --code-tag-color: hsl(330deg, 30%, 50%); + --code-property-color: hsl(185deg, 30%, 50%); + --code-value-color: hsl(40deg, 10%, 50%); --code-comment-color: #4d606d; --accordion-border-color: var(--muted-border-color); --accordion-active-summary-color: var(--primary); @@ -432,19 +481,28 @@ kbd { 0 0.125rem 2rem rgba(0, 0, 0, 0.12), 0 0 0 0.0625rem rgba(0, 0, 0, 0.036); --card-sectionning-background-color: #18232c; + --dropdown-background-color: hsl(205deg, 30%, 15%); + --dropdown-border-color: #24333e; + --dropdown-box-shadow: var(--card-box-shadow); + --dropdown-color: var(--color); + --dropdown-hover-background-color: rgba(36, 51, 62, 0.75); + --modal-overlay-background-color: rgba(36, 51, 62, 0.9); --progress-background-color: #24333e; --progress-color: var(--primary); --loading-spinner-opacity: 0.5; --tooltip-background-color: var(--contrast); --tooltip-color: var(--contrast-inverse); - --icon-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgba(162, 175, 185, 0.999)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E"); - --icon-date: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgba(162, 175, 185, 0.999)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='18' rx='2' ry='2'%3E%3C/rect%3E%3Cline x1='16' y1='2' x2='16' y2='6'%3E%3C/line%3E%3Cline x1='8' y1='2' x2='8' y2='6'%3E%3C/line%3E%3Cline x1='3' y1='10' x2='21' y2='10'%3E%3C/line%3E%3C/svg%3E"); - --icon-time: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgba(162, 175, 185, 0.999)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cpolyline points='12 6 12 12 16 14'%3E%3C/polyline%3E%3C/svg%3E"); - --icon-search: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgba(162, 175, 185, 0.999)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'%3E%3C/circle%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'%3E%3C/line%3E%3C/svg%3E"); --icon-checkbox: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23FFF' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E"); - --icon-minus: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23FFF' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='5' y1='12' x2='19' y2='12'%3E%3C/line%3E%3C/svg%3E"); - --icon-valid: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgba(46, 125, 50, 0.999)' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E"); + --icon-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgba(162, 175, 185, 0.999)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E"); + --icon-chevron-button: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgba(255, 255, 255, 0.999)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E"); + --icon-chevron-button-inverse: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgba(0, 0, 0, 0.999)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E"); + --icon-close: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgba(115, 130, 140, 0.999)' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='18' y1='6' x2='6' y2='18'%3E%3C/line%3E%3Cline x1='6' y1='6' x2='18' y2='18'%3E%3C/line%3E%3C/svg%3E"); + --icon-date: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgba(162, 175, 185, 0.999)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='18' rx='2' ry='2'%3E%3C/rect%3E%3Cline x1='16' y1='2' x2='16' y2='6'%3E%3C/line%3E%3Cline x1='8' y1='2' x2='8' y2='6'%3E%3C/line%3E%3Cline x1='3' y1='10' x2='21' y2='10'%3E%3C/line%3E%3C/svg%3E"); --icon-invalid: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgba(183, 28, 28, 0.999)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cline x1='12' y1='8' x2='12' y2='12'%3E%3C/line%3E%3Cline x1='12' y1='16' x2='12.01' y2='16'%3E%3C/line%3E%3C/svg%3E"); + --icon-minus: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23FFF' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='5' y1='12' x2='19' y2='12'%3E%3C/line%3E%3C/svg%3E"); + --icon-search: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgba(162, 175, 185, 0.999)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'%3E%3C/circle%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'%3E%3C/line%3E%3C/svg%3E"); + --icon-time: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgba(162, 175, 185, 0.999)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cpolyline points='12 6 12 12 16 14'%3E%3C/polyline%3E%3C/svg%3E"); + --icon-valid: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgba(46, 125, 50, 0.999)' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E"); } /** @@ -455,6 +513,7 @@ kbd { *::before, *::after { box-sizing: border-box; + background-repeat: no-repeat; } ::before, @@ -463,21 +522,23 @@ kbd { vertical-align: inherit; } -html { +:where(:root) { + -webkit-tap-highlight-color: transparent; -webkit-text-size-adjust: 100%; - -webkit-tap-highlight-color: rgba(0, 0, 0, 0); - -moz-tab-size: 4; - -o-tab-size: 4; - tab-size: 4; - -ms-text-size-adjust: 100%; + -moz-text-size-adjust: 100%; + text-size-adjust: 100%; + text-rendering: optimizeLegibility; background-color: var(--background-color); color: var(--color); - font-family: var(--font-family); - font-size: var(--font-size); font-weight: var(--font-weight); + font-size: var(--font-size); line-height: var(--line-height); - text-rendering: optimizeLegibility; + font-family: var(--font-family); + overflow-wrap: break-word; cursor: default; + -moz-tab-size: 4; + -o-tab-size: 4; + tab-size: 4; } /** @@ -602,21 +663,6 @@ sup { top: -0.5em; } -dl dl, -dl ol, -dl ul, -ol dl, -ul dl { - margin: 0; -} - -ol ol, -ol ul, -ul ol, -ul ul { - margin: 0; -} - address, blockquote, dl, @@ -630,46 +676,55 @@ ul { margin-top: 0; margin-bottom: var(--typography-spacing-vertical); color: var(--color); - font-size: var(--font-size); - font-weight: var(--font-weight); font-style: normal; + font-weight: var(--font-weight); + font-size: var(--font-size); } -a { +a, +[role=link] { --color: var(--primary); --background-color: transparent; outline: none; background-color: var(--background-color); color: var(--color); -webkit-text-decoration: var(--text-decoration); - text-decoration: var(--text-decoration); + text-decoration: var(--text-decoration); transition: background-color var(--transition), color var(--transition), box-shadow var(--transition), -webkit-text-decoration var(--transition); transition: background-color var(--transition), color var(--transition), text-decoration var(--transition), box-shadow var(--transition); transition: background-color var(--transition), color var(--transition), text-decoration var(--transition), box-shadow var(--transition), -webkit-text-decoration var(--transition); } -a:hover, a:active, a:focus { +a:is([aria-current], :hover, :active, :focus), +[role=link]:is([aria-current], :hover, :active, :focus) { --color: var(--primary-hover); --text-decoration: underline; } -a:focus { +a:focus, +[role=link]:focus { --background-color: var(--primary-focus); } -a.secondary { +a.secondary, +[role=link].secondary { --color: var(--secondary); } -a.secondary:hover, a.secondary:active, a.secondary:focus { +a.secondary:is([aria-current], :hover, :active, :focus), +[role=link].secondary:is([aria-current], :hover, :active, :focus) { --color: var(--secondary-hover); } -a.secondary:focus { +a.secondary:focus, +[role=link].secondary:focus { --background-color: var(--secondary-focus); } -a.contrast { +a.contrast, +[role=link].contrast { --color: var(--contrast); } -a.contrast:hover, a.contrast:active, a.contrast:focus { +a.contrast:is([aria-current], :hover, :active, :focus), +[role=link].contrast:is([aria-current], :hover, :active, :focus) { --color: var(--contrast-hover); } -a.contrast:focus { +a.contrast:focus, +[role=link].contrast:focus { --background-color: var(--contrast-focus); } @@ -682,9 +737,9 @@ h6 { margin-top: 0; margin-bottom: var(--typography-spacing-vertical); color: var(--color); - font-family: var(--font-family); - font-size: var(--font-size); font-weight: var(--font-weight); + font-size: var(--font-size); + font-family: var(--font-family); } h1 { @@ -711,75 +766,24 @@ h6 { --color: var(--h6-color); } -address ~ h1, address ~ h2, address ~ h3, address ~ h4, address ~ h5, address ~ h6, -blockquote ~ h1, -blockquote ~ h2, -blockquote ~ h3, -blockquote ~ h4, -blockquote ~ h5, -blockquote ~ h6, -dl ~ h1, -dl ~ h2, -dl ~ h3, -dl ~ h4, -dl ~ h5, -dl ~ h6, -figure ~ h1, -figure ~ h2, -figure ~ h3, -figure ~ h4, -figure ~ h5, -figure ~ h6, -form ~ h1, -form ~ h2, -form ~ h3, -form ~ h4, -form ~ h5, -form ~ h6, -ol ~ h1, -ol ~ h2, -ol ~ h3, -ol ~ h4, -ol ~ h5, -ol ~ h6, -p ~ h1, -p ~ h2, -p ~ h3, -p ~ h4, -p ~ h5, -p ~ h6, -pre ~ h1, -pre ~ h2, -pre ~ h3, -pre ~ h4, -pre ~ h5, -pre ~ h6, -table ~ h1, -table ~ h2, -table ~ h3, -table ~ h4, -table ~ h5, -table ~ h6, -ul ~ h1, -ul ~ h2, -ul ~ h3, -ul ~ h4, -ul ~ h5, -ul ~ h6 { +:where(address, blockquote, dl, figure, form, ol, p, pre, table, ul) ~ :is(h1, h2, h3, h4, h5, h6) { margin-top: var(--typography-spacing-vertical); } -hgroup { +hgroup, +.headings { margin-bottom: var(--typography-spacing-vertical); } -hgroup > * { +hgroup > *, +.headings > * { margin-bottom: 0; } -hgroup > *:last-child { +hgroup > *:last-child, +.headings > *:last-child { --color: var(--muted-color); --font-weight: unset; - font-family: unset; font-size: 1rem; + font-family: unset; } p { @@ -790,20 +794,23 @@ small { font-size: var(--font-size); } -ul, -ol { +:where(dl, ol, ul) { padding-right: 0; padding-left: var(--spacing); - -webkit-padding-end: 0; - padding-inline-end: 0; -webkit-padding-start: var(--spacing); - padding-inline-start: var(--spacing); + padding-inline-start: var(--spacing); + -webkit-padding-end: 0; + padding-inline-end: 0; } -ul li, -ol li { +:where(dl, ol, ul) li { margin-bottom: calc(var(--typography-spacing-vertical) * 0.25); } +:where(dl, ol, ul) :is(dl, ol, ul) { + margin: 0; + margin-top: calc(var(--typography-spacing-vertical) * 0.25); +} + ul li { list-style: square; } @@ -812,7 +819,7 @@ mark { padding: 0.125rem 0.25rem; background-color: var(--mark-background-color); color: var(--mark-color); - vertical-align: middle; + vertical-align: baseline; } blockquote { @@ -821,10 +828,10 @@ blockquote { padding: var(--spacing); border-right: none; border-left: 0.25rem solid var(--blockquote-border-color); - -webkit-border-end: none; - border-inline-end: none; -webkit-border-start: 0.25rem solid var(--blockquote-border-color); - border-inline-start: 0.25rem solid var(--blockquote-border-color); + border-inline-start: 0.25rem solid var(--blockquote-border-color); + -webkit-border-end: none; + border-inline-end: none; } blockquote footer { margin-top: calc(var(--typography-spacing-vertical) * 0.5); @@ -857,12 +864,7 @@ del { /** * Embedded content */ -audio, -canvas, -iframe, -img, -svg, -video { +:where(audio, canvas, iframe, img, svg, video) { vertical-align: middle; } @@ -876,7 +878,7 @@ audio:not([controls]) { height: 0; } -iframe { +:where(iframe) { border-style: none; } @@ -886,7 +888,7 @@ img { border-style: none; } -svg:not([fill]) { +:where(svg:not([fill])) { fill: currentColor; } @@ -911,21 +913,13 @@ button, -webkit-appearance: button; } -button::-moz-focus-inner, -[type=button]::-moz-focus-inner, -[type=reset]::-moz-focus-inner, -[type=submit]::-moz-focus-inner { - padding: 0; - border-style: none; -} - button { display: block; width: 100%; margin-bottom: var(--spacing); } -a[role=button] { +[role=button] { display: inline-block; text-decoration: none; } @@ -934,7 +928,7 @@ button, input[type=submit], input[type=button], input[type=reset], -a[role=button] { +[role=button] { --background-color: var(--primary); --border-color: var(--primary); --color: var(--primary-inverse); @@ -946,195 +940,96 @@ a[role=button] { background-color: var(--background-color); box-shadow: var(--box-shadow); color: var(--color); - font-size: 1rem; font-weight: var(--font-weight); + font-size: 1rem; line-height: var(--line-height); text-align: center; cursor: pointer; transition: background-color var(--transition), border-color var(--transition), color var(--transition), box-shadow var(--transition); } -button:hover, button:active, button:focus, -input[type=submit]:hover, -input[type=submit]:active, -input[type=submit]:focus, -input[type=button]:hover, -input[type=button]:active, -input[type=button]:focus, -input[type=reset]:hover, -input[type=reset]:active, -input[type=reset]:focus, -a[role=button]:hover, -a[role=button]:active, -a[role=button]:focus { +button:is([aria-current], :hover, :active, :focus), +input[type=submit]:is([aria-current], :hover, :active, :focus), +input[type=button]:is([aria-current], :hover, :active, :focus), +input[type=reset]:is([aria-current], :hover, :active, :focus), +[role=button]:is([aria-current], :hover, :active, :focus) { --background-color: var(--primary-hover); --border-color: var(--primary-hover); --box-shadow: var(--button-hover-box-shadow, 0 0 0 rgba(0, 0, 0, 0)); + --color: var(--primary-inverse); } button:focus, input[type=submit]:focus, input[type=button]:focus, input[type=reset]:focus, -a[role=button]:focus { +[role=button]:focus { --box-shadow: var(--button-hover-box-shadow, 0 0 0 rgba(0, 0, 0, 0)), 0 0 0 var(--outline-width) var(--primary-focus); } +:is(button, input[type=submit], input[type=button], [role=button]).secondary, input[type=reset] { --background-color: var(--secondary); --border-color: var(--secondary); --color: var(--secondary-inverse); cursor: pointer; } -input[type=reset]:hover, input[type=reset]:active, input[type=reset]:focus { +:is(button, input[type=submit], input[type=button], [role=button]).secondary:is([aria-current], :hover, :active, :focus), +input[type=reset]:is([aria-current], :hover, :active, :focus) { --background-color: var(--secondary-hover); --border-color: var(--secondary-hover); + --color: var(--secondary-inverse); } +:is(button, input[type=submit], input[type=button], [role=button]).secondary:focus, input[type=reset]:focus { --box-shadow: var(--button-hover-box-shadow, 0 0 0 rgba(0, 0, 0, 0)), 0 0 0 var(--outline-width) var(--secondary-focus); } -button.secondary, -input[type=submit].secondary, -input[type=button].secondary, -input[type=reset].secondary, -a[role=button].secondary { - --background-color: var(--secondary); - --border-color: var(--secondary); - --color: var(--secondary-inverse); - cursor: pointer; -} -button.secondary:hover, button.secondary:active, button.secondary:focus, -input[type=submit].secondary:hover, -input[type=submit].secondary:active, -input[type=submit].secondary:focus, -input[type=button].secondary:hover, -input[type=button].secondary:active, -input[type=button].secondary:focus, -input[type=reset].secondary:hover, -input[type=reset].secondary:active, -input[type=reset].secondary:focus, -a[role=button].secondary:hover, -a[role=button].secondary:active, -a[role=button].secondary:focus { - --background-color: var(--secondary-hover); - --border-color: var(--secondary-hover); -} -button.secondary:focus, -input[type=submit].secondary:focus, -input[type=button].secondary:focus, -input[type=reset].secondary:focus, -a[role=button].secondary:focus { - --box-shadow: var(--button-hover-box-shadow, 0 0 0 rgba(0, 0, 0, 0)), - 0 0 0 var(--outline-width) var(--secondary-focus); -} -button.contrast, -input[type=submit].contrast, -input[type=button].contrast, -input[type=reset].contrast, -a[role=button].contrast { +:is(button, input[type=submit], input[type=button], [role=button]).contrast { --background-color: var(--contrast); --border-color: var(--contrast); --color: var(--contrast-inverse); } -button.contrast:hover, button.contrast:active, button.contrast:focus, -input[type=submit].contrast:hover, -input[type=submit].contrast:active, -input[type=submit].contrast:focus, -input[type=button].contrast:hover, -input[type=button].contrast:active, -input[type=button].contrast:focus, -input[type=reset].contrast:hover, -input[type=reset].contrast:active, -input[type=reset].contrast:focus, -a[role=button].contrast:hover, -a[role=button].contrast:active, -a[role=button].contrast:focus { +:is(button, input[type=submit], input[type=button], [role=button]).contrast:is([aria-current], :hover, :active, :focus) { --background-color: var(--contrast-hover); --border-color: var(--contrast-hover); + --color: var(--contrast-inverse); } -button.contrast:focus, -input[type=submit].contrast:focus, -input[type=button].contrast:focus, -input[type=reset].contrast:focus, -a[role=button].contrast:focus { +:is(button, input[type=submit], input[type=button], [role=button]).contrast:focus { --box-shadow: var(--button-hover-box-shadow, 0 0 0 rgba(0, 0, 0, 0)), 0 0 0 var(--outline-width) var(--contrast-focus); } -button.outline, -input[type=submit].outline, -input[type=button].outline, -input[type=reset].outline, -a[role=button].outline { + +:is(button, input[type=submit], input[type=button], [role=button]).outline, +input[type=reset].outline { --background-color: transparent; --color: var(--primary); } -button.outline:hover, button.outline:active, button.outline:focus, -input[type=submit].outline:hover, -input[type=submit].outline:active, -input[type=submit].outline:focus, -input[type=button].outline:hover, -input[type=button].outline:active, -input[type=button].outline:focus, -input[type=reset].outline:hover, -input[type=reset].outline:active, -input[type=reset].outline:focus, -a[role=button].outline:hover, -a[role=button].outline:active, -a[role=button].outline:focus { +:is(button, input[type=submit], input[type=button], [role=button]).outline:is([aria-current], :hover, :active, :focus), +input[type=reset].outline:is([aria-current], :hover, :active, :focus) { --background-color: transparent; --color: var(--primary-hover); } -button.outline.secondary, -input[type=submit].outline.secondary, -input[type=button].outline.secondary, -input[type=reset].outline.secondary, -a[role=button].outline.secondary { + +:is(button, input[type=submit], input[type=button], [role=button]).outline.secondary, +input[type=reset].outline { --color: var(--secondary); } -button.outline.secondary:hover, button.outline.secondary:active, button.outline.secondary:focus, -input[type=submit].outline.secondary:hover, -input[type=submit].outline.secondary:active, -input[type=submit].outline.secondary:focus, -input[type=button].outline.secondary:hover, -input[type=button].outline.secondary:active, -input[type=button].outline.secondary:focus, -input[type=reset].outline.secondary:hover, -input[type=reset].outline.secondary:active, -input[type=reset].outline.secondary:focus, -a[role=button].outline.secondary:hover, -a[role=button].outline.secondary:active, -a[role=button].outline.secondary:focus { +:is(button, input[type=submit], input[type=button], [role=button]).outline.secondary:is([aria-current], :hover, :active, :focus), +input[type=reset].outline:is([aria-current], :hover, :active, :focus) { --color: var(--secondary-hover); } -button.outline.contrast, -input[type=submit].outline.contrast, -input[type=button].outline.contrast, -input[type=reset].outline.contrast, -a[role=button].outline.contrast { + +:is(button, input[type=submit], input[type=button], [role=button]).outline.contrast { --color: var(--contrast); } -button.outline.contrast:hover, button.outline.contrast:active, button.outline.contrast:focus, -input[type=submit].outline.contrast:hover, -input[type=submit].outline.contrast:active, -input[type=submit].outline.contrast:focus, -input[type=button].outline.contrast:hover, -input[type=button].outline.contrast:active, -input[type=button].outline.contrast:focus, -input[type=reset].outline.contrast:hover, -input[type=reset].outline.contrast:active, -input[type=reset].outline.contrast:focus, -a[role=button].outline.contrast:hover, -a[role=button].outline.contrast:active, -a[role=button].outline.contrast:focus { +:is(button, input[type=submit], input[type=button], [role=button]).outline.contrast:is([aria-current], :hover, :active, :focus) { --color: var(--contrast-hover); } -button[disabled], -input[type=submit][disabled], -input[type=button][disabled], -input[type=reset][disabled], -a[role=button][disabled] { +:where(button, [type=submit], [type=button], [type=reset], [role=button])[disabled], +:where(fieldset[disabled]) :is(button, [type=submit], [type=button], [type=reset], [role=button]), +a[role=button]:not([href]) { opacity: 0.5; pointer-events: none; } @@ -1147,10 +1042,10 @@ optgroup, select, textarea { margin: 0; - font-family: inherit; font-size: 1rem; - letter-spacing: inherit; line-height: var(--line-height); + font-family: inherit; + letter-spacing: inherit; } input { @@ -1234,6 +1129,7 @@ label, fieldset legend { display: block; margin-bottom: calc(var(--spacing) * 0.25); + font-weight: var(--form-label-font-weight, var(--font-weight)); } input:not([type=checkbox]):not([type=radio]), @@ -1246,8 +1142,8 @@ input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file]), select, textarea { -webkit-appearance: none; - -moz-appearance: none; - appearance: none; + -moz-appearance: none; + appearance: none; padding: var(--form-element-spacing-vertical) var(--form-element-spacing-horizontal); vertical-align: middle; } @@ -1269,19 +1165,13 @@ textarea { transition: background-color var(--transition), border-color var(--transition), color var(--transition), box-shadow var(--transition); } -input:not([type=submit]):not([type=button]):not([type=reset]):not([type=checkbox]):not([type=radio]):not([readonly]):active, input:not([type=submit]):not([type=button]):not([type=reset]):not([type=checkbox]):not([type=radio]):not([readonly]):focus, -select:active, -select:focus, -textarea:active, -textarea:focus { +input:not([type=submit]):not([type=button]):not([type=reset]):not([type=checkbox]):not([type=radio]):not([readonly]):is(:active, :focus), +:where(select, textarea):is(:active, :focus) { --background-color: var(--form-element-active-background-color); } -input:not([type=submit]):not([type=button]):not([type=reset]):not([role=switch]):not([readonly]):active, input:not([type=submit]):not([type=button]):not([type=reset]):not([role=switch]):not([readonly]):focus, -select:active, -select:focus, -textarea:active, -textarea:focus { +input:not([type=submit]):not([type=button]):not([type=reset]):not([role=switch]):not([readonly]):is(:active, :focus), +:where(select, textarea):is(:active, :focus) { --border-color: var(--form-element-active-border-color); } @@ -1293,67 +1183,47 @@ textarea:focus { input:not([type=submit]):not([type=button]):not([type=reset])[disabled], select[disabled], -textarea[disabled] { +textarea[disabled], +:where(fieldset[disabled]) :is(input:not([type=submit]):not([type=button]):not([type=reset]), select, textarea) { --background-color: var(--form-element-disabled-background-color); --border-color: var(--form-element-disabled-border-color); opacity: var(--form-element-disabled-opacity); + pointer-events: none; } -input:not([type=checkbox]):not([type=radio])[aria-invalid], -select:not([type=checkbox]):not([type=radio])[aria-invalid], -textarea:not([type=checkbox]):not([type=radio])[aria-invalid] { +:where(input, select, textarea):not([type=checkbox]):not([type=radio])[aria-invalid] { padding-right: calc(var(--form-element-spacing-horizontal) + 1.5rem) !important; padding-left: var(--form-element-spacing-horizontal); - -webkit-padding-end: calc(var(--form-element-spacing-horizontal) + 1.5rem) !important; - padding-inline-end: calc(var(--form-element-spacing-horizontal) + 1.5rem) !important; -webkit-padding-start: var(--form-element-spacing-horizontal) !important; - padding-inline-start: var(--form-element-spacing-horizontal) !important; + padding-inline-start: var(--form-element-spacing-horizontal) !important; + -webkit-padding-end: calc(var(--form-element-spacing-horizontal) + 1.5rem) !important; + padding-inline-end: calc(var(--form-element-spacing-horizontal) + 1.5rem) !important; background-position: center right 0.75rem; - background-repeat: no-repeat; background-size: 1rem auto; + background-repeat: no-repeat; } -input:not([type=checkbox]):not([type=radio])[aria-invalid=false], -select:not([type=checkbox]):not([type=radio])[aria-invalid=false], -textarea:not([type=checkbox]):not([type=radio])[aria-invalid=false] { +:where(input, select, textarea):not([type=checkbox]):not([type=radio])[aria-invalid=false] { background-image: var(--icon-valid); } -input:not([type=checkbox]):not([type=radio])[aria-invalid=true], -select:not([type=checkbox]):not([type=radio])[aria-invalid=true], -textarea:not([type=checkbox]):not([type=radio])[aria-invalid=true] { +:where(input, select, textarea):not([type=checkbox]):not([type=radio])[aria-invalid=true] { background-image: var(--icon-invalid); } -input[aria-invalid=false], -select[aria-invalid=false], -textarea[aria-invalid=false] { +:where(input, select, textarea)[aria-invalid=false] { --border-color: var(--form-element-valid-border-color); } -input[aria-invalid=false]:active, input[aria-invalid=false]:focus, -select[aria-invalid=false]:active, -select[aria-invalid=false]:focus, -textarea[aria-invalid=false]:active, -textarea[aria-invalid=false]:focus { - --border-color: var( - --form-element-valid-active-border-color - ) !important; +:where(input, select, textarea)[aria-invalid=false]:is(:active, :focus) { + --border-color: var(--form-element-valid-active-border-color) !important; + --box-shadow: 0 0 0 var(--outline-width) var(--form-element-valid-focus-color) !important; } -input[aria-invalid=true], -select[aria-invalid=true], -textarea[aria-invalid=true] { +:where(input, select, textarea)[aria-invalid=true] { --border-color: var(--form-element-invalid-border-color); } -input[aria-invalid=true]:active, input[aria-invalid=true]:focus, -select[aria-invalid=true]:active, -select[aria-invalid=true]:focus, -textarea[aria-invalid=true]:active, -textarea[aria-invalid=true]:focus { - --border-color: var( - --form-element-invalid-active-border-color - ) !important; +:where(input, select, textarea)[aria-invalid=true]:is(:active, :focus) { + --border-color: var(--form-element-invalid-active-border-color) !important; + --box-shadow: 0 0 0 var(--outline-width) var(--form-element-invalid-focus-color) !important; } -[dir=rtl] input[aria-invalid], -[dir=rtl] select[aria-invalid], -[dir=rtl] textarea[aria-invalid] { +[dir=rtl] :where(input, select, textarea):not([type=checkbox]):not([type=radio])[aria-invalid], [dir=rtl] :where(input, select, textarea):not([type=checkbox]):not([type=radio])[aria-invalid=true], [dir=rtl] :where(input, select, textarea):not([type=checkbox]):not([type=radio])[aria-invalid=false] { background-position: center left 0.75rem; } @@ -1379,23 +1249,21 @@ select::-ms-expand { select:not([multiple]):not([size]) { padding-right: calc(var(--form-element-spacing-horizontal) + 1.5rem); padding-left: var(--form-element-spacing-horizontal); - -webkit-padding-end: calc(var(--form-element-spacing-horizontal) + 1.5rem); - padding-inline-end: calc(var(--form-element-spacing-horizontal) + 1.5rem); -webkit-padding-start: var(--form-element-spacing-horizontal); - padding-inline-start: var(--form-element-spacing-horizontal); + padding-inline-start: var(--form-element-spacing-horizontal); + -webkit-padding-end: calc(var(--form-element-spacing-horizontal) + 1.5rem); + padding-inline-end: calc(var(--form-element-spacing-horizontal) + 1.5rem); background-image: var(--icon-chevron); background-position: center right 0.75rem; - background-repeat: no-repeat; background-size: 1rem auto; + background-repeat: no-repeat; } [dir=rtl] select:not([multiple]):not([size]) { background-position: center left 0.75rem; } -input + small, -select + small, -textarea + small { +:where(input, select, textarea) + small { display: block; width: 100%; margin-top: calc(var(--spacing) * -0.75); @@ -1403,7 +1271,7 @@ textarea + small { color: var(--muted-color); } -label > input, label > select, label > textarea { +label > :where(input, select, textarea) { margin-top: calc(var(--spacing) * 0.25); } @@ -1421,11 +1289,12 @@ label > input, label > select, label > textarea { margin-top: -0.125em; margin-right: 0.375em; margin-left: 0; - -webkit-margin-end: 0.375em; - margin-inline-end: 0.375em; -webkit-margin-start: 0; - margin-inline-start: 0; + margin-inline-start: 0; + -webkit-margin-end: 0.375em; + margin-inline-end: 0.375em; border-width: var(--border-width); + font-size: inherit; vertical-align: middle; cursor: pointer; } @@ -1441,8 +1310,8 @@ label > input, label > select, label > textarea { --border-color: var(--primary); background-image: var(--icon-checkbox); background-position: center; - background-repeat: no-repeat; background-size: 0.75em auto; + background-repeat: no-repeat; } [type=checkbox] ~ label, [type=radio] ~ label { @@ -1457,8 +1326,8 @@ label > input, label > select, label > textarea { --border-color: var(--primary); background-image: var(--icon-minus); background-position: center; - background-repeat: no-repeat; background-size: 0.75em auto; + background-repeat: no-repeat; } [type=radio] { @@ -1502,29 +1371,27 @@ label > input, label > select, label > textarea { background-image: none; } [type=checkbox][role=switch]:checked::before { - margin-right: 0; margin-left: calc(1.125em - var(--border-width)); - -webkit-margin-end: 0; - margin-inline-end: 0; -webkit-margin-start: calc(1.125em - var(--border-width)); - margin-inline-start: calc(1.125em - var(--border-width)); + margin-inline-start: calc(1.125em - var(--border-width)); } -[type=checkbox][role=switch][aria-invalid=false] { + +[type=checkbox][aria-invalid=false], +[type=checkbox]:checked[aria-invalid=false], +[type=radio][aria-invalid=false], +[type=radio]:checked[aria-invalid=false], +[type=checkbox][role=switch][aria-invalid=false], +[type=checkbox][role=switch]:checked[aria-invalid=false] { --border-color: var(--form-element-valid-border-color); } -[type=checkbox][role=switch][aria-invalid=false]:active, [type=checkbox][role=switch][aria-invalid=false]:focus { - --border-color: var( - --form-element-valid-active-border-color - ) !important; -} -[type=checkbox][role=switch][aria-invalid=true] { +[type=checkbox][aria-invalid=true], +[type=checkbox]:checked[aria-invalid=true], +[type=radio][aria-invalid=true], +[type=radio]:checked[aria-invalid=true], +[type=checkbox][role=switch][aria-invalid=true], +[type=checkbox][role=switch]:checked[aria-invalid=true] { --border-color: var(--form-element-invalid-border-color); } -[type=checkbox][role=switch][aria-invalid=true]:active, [type=checkbox][role=switch][aria-invalid=true]:focus { - --border-color: var( - --form-element-invalid-active-border-color - ) !important; -} /** * Form elements @@ -1537,56 +1404,59 @@ label > input, label > select, label > textarea { padding: 0; } [type=color]::-webkit-color-swatch { - border: none; + border: 0; border-radius: calc(var(--border-radius) * 0.5); } [type=color]::-moz-color-swatch { - border: none; + border: 0; border-radius: calc(var(--border-radius) * 0.5); } -:not(:dir(rtl)) [type=date], -:not(:dir(rtl)) [type=datetime-local], -:not(:dir(rtl)) [type=month], -:not(:dir(rtl)) [type=time], -:not(:dir(rtl)) [type=week] { +input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file])[type=date], input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file])[type=datetime-local], input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file])[type=month], input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file])[type=time], input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file])[type=week] { + --icon-position: 0.75rem; + --icon-width: 1rem; + padding-right: calc(var(--icon-width) + var(--icon-position)); background-image: var(--icon-date); - background-position: center right 0.75rem; + background-position: center right var(--icon-position); + background-size: var(--icon-width) auto; background-repeat: no-repeat; - background-size: 1rem auto; } -:not(:dir(rtl)) [type=date]::-webkit-calendar-picker-indicator, -:not(:dir(rtl)) [type=datetime-local]::-webkit-calendar-picker-indicator, -:not(:dir(rtl)) [type=month]::-webkit-calendar-picker-indicator, -:not(:dir(rtl)) [type=time]::-webkit-calendar-picker-indicator, -:not(:dir(rtl)) [type=week]::-webkit-calendar-picker-indicator { +input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file])[type=time] { + background-image: var(--icon-time); +} + +[type=date]::-webkit-calendar-picker-indicator, +[type=datetime-local]::-webkit-calendar-picker-indicator, +[type=month]::-webkit-calendar-picker-indicator, +[type=time]::-webkit-calendar-picker-indicator, +[type=week]::-webkit-calendar-picker-indicator { + width: var(--icon-width); + margin-right: calc(var(--icon-width) * -1); + margin-left: var(--icon-position); opacity: 0; } -:not(:dir(rtl)) [type=time] { - background-image: var(--icon-time); + +[dir=rtl] :is([type=date], [type=datetime-local], [type=month], [type=time], [type=week]) { + text-align: right; } [type=file] { --color: var(--muted-color); padding: calc(var(--form-element-spacing-vertical) * 0.5) 0; - border: none; + border: 0; border-radius: 0; background: none; } -[type=file]:hover, [type=file]:active, [type=file]:focus { - border: none; - background: none; -} [type=file]::-webkit-file-upload-button { --background-color: var(--secondary); --border-color: var(--secondary); --color: var(--secondary-inverse); margin-right: calc(var(--spacing) / 2); margin-left: 0; - -webkit-margin-end: calc(var(--spacing) / 2); - margin-inline-end: calc(var(--spacing) / 2); -webkit-margin-start: 0; - margin-inline-start: 0; + margin-inline-start: 0; + -webkit-margin-end: calc(var(--spacing) / 2); + margin-inline-end: calc(var(--spacing) / 2); padding: calc(var(--form-element-spacing-vertical) * 0.5) calc(var(--form-element-spacing-horizontal) * 0.5); border: var(--border-width) solid var(--border-color); border-radius: var(--border-radius); @@ -1594,8 +1464,8 @@ label > input, label > select, label > textarea { background-color: var(--background-color); box-shadow: var(--box-shadow); color: var(--color); - font-size: 1rem; font-weight: var(--font-weight); + font-size: 1rem; line-height: var(--line-height); text-align: center; cursor: pointer; @@ -1608,10 +1478,10 @@ label > input, label > select, label > textarea { --color: var(--secondary-inverse); margin-right: calc(var(--spacing) / 2); margin-left: 0; - -webkit-margin-end: calc(var(--spacing) / 2); - margin-inline-end: calc(var(--spacing) / 2); -webkit-margin-start: 0; - margin-inline-start: 0; + margin-inline-start: 0; + -webkit-margin-end: calc(var(--spacing) / 2); + margin-inline-end: calc(var(--spacing) / 2); padding: calc(var(--form-element-spacing-vertical) * 0.5) calc(var(--form-element-spacing-horizontal) * 0.5); border: var(--border-width) solid var(--border-color); border-radius: var(--border-radius); @@ -1619,18 +1489,18 @@ label > input, label > select, label > textarea { background-color: var(--background-color); box-shadow: var(--box-shadow); color: var(--color); - font-size: 1rem; font-weight: var(--font-weight); + font-size: 1rem; line-height: var(--line-height); text-align: center; cursor: pointer; transition: background-color var(--transition), border-color var(--transition), color var(--transition), box-shadow var(--transition); } -[type=file]::-webkit-file-upload-button:hover, [type=file]::-webkit-file-upload-button:active, [type=file]::-webkit-file-upload-button:focus { +[type=file]::-webkit-file-upload-button:is(:hover, :active, :focus) { --background-color: var(--secondary-hover); --border-color: var(--secondary-hover); } -[type=file]::file-selector-button:hover, [type=file]::file-selector-button:active, [type=file]::file-selector-button:focus { +[type=file]::file-selector-button:is(:hover, :active, :focus) { --background-color: var(--secondary-hover); --border-color: var(--secondary-hover); } @@ -1640,10 +1510,10 @@ label > input, label > select, label > textarea { --color: var(--secondary-inverse); margin-right: calc(var(--spacing) / 2); margin-left: 0; - -webkit-margin-end: calc(var(--spacing) / 2); - margin-inline-end: calc(var(--spacing) / 2); -webkit-margin-start: 0; - margin-inline-start: 0; + margin-inline-start: 0; + -webkit-margin-end: calc(var(--spacing) / 2); + margin-inline-end: calc(var(--spacing) / 2); padding: calc(var(--form-element-spacing-vertical) * 0.5) calc(var(--form-element-spacing-horizontal) * 0.5); border: var(--border-width) solid var(--border-color); border-radius: var(--border-radius); @@ -1651,15 +1521,15 @@ label > input, label > select, label > textarea { background-color: var(--background-color); box-shadow: var(--box-shadow); color: var(--color); - font-size: 1rem; font-weight: var(--font-weight); + font-size: 1rem; line-height: var(--line-height); text-align: center; cursor: pointer; -webkit-transition: background-color var(--transition), border-color var(--transition), color var(--transition), box-shadow var(--transition); transition: background-color var(--transition), border-color var(--transition), color var(--transition), box-shadow var(--transition); } -[type=file]::-webkit-file-upload-button:hover, [type=file]::-webkit-file-upload-button:active, [type=file]::-webkit-file-upload-button:focus { +[type=file]::-webkit-file-upload-button:is(:hover, :active, :focus) { --background-color: var(--secondary-hover); --border-color: var(--secondary-hover); } @@ -1669,8 +1539,8 @@ label > input, label > select, label > textarea { --color: var(--secondary-inverse); margin-right: calc(var(--spacing) / 2); margin-left: 0; - margin-inline-end: calc(var(--spacing) / 2); margin-inline-start: 0; + margin-inline-end: calc(var(--spacing) / 2); padding: calc(var(--form-element-spacing-vertical) * 0.5) calc(var(--form-element-spacing-horizontal) * 0.5); border: var(--border-width) solid var(--border-color); border-radius: var(--border-radius); @@ -1678,15 +1548,15 @@ label > input, label > select, label > textarea { background-color: var(--background-color); box-shadow: var(--box-shadow); color: var(--color); - font-size: 1rem; font-weight: var(--font-weight); + font-size: 1rem; line-height: var(--line-height); text-align: center; cursor: pointer; -ms-transition: background-color var(--transition), border-color var(--transition), color var(--transition), box-shadow var(--transition); transition: background-color var(--transition), border-color var(--transition), color var(--transition), box-shadow var(--transition); } -[type=file]::-ms-browse:hover, [type=file]::-ms-browse:active, [type=file]::-ms-browse:focus { +[type=file]::-ms-browse:is(:hover, :active, :focus) { --background-color: var(--secondary-hover); --border-color: var(--secondary-hover); } @@ -1697,7 +1567,7 @@ label > input, label > select, label > textarea { appearance: none; width: 100%; height: 1.25rem; - background: transparent; + background: none; } [type=range]::-webkit-slider-runnable-track { width: 100%; @@ -1776,25 +1646,44 @@ label > input, label > select, label > textarea { transform: scale(1.25); } -[type=search] { +input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file])[type=search] { + -webkit-padding-start: calc(var(--form-element-spacing-horizontal) + 1.75rem); + padding-inline-start: calc(var(--form-element-spacing-horizontal) + 1.75rem); border-radius: 5rem; - padding-left: calc(var(--form-element-spacing-horizontal) + 1.75rem) !important; background-image: var(--icon-search); background-position: center left 1.125rem; - background-repeat: no-repeat; background-size: 1rem auto; + background-repeat: no-repeat; } +input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file])[type=search][aria-invalid] { + -webkit-padding-start: calc(var(--form-element-spacing-horizontal) + 1.75rem) !important; + padding-inline-start: calc(var(--form-element-spacing-horizontal) + 1.75rem) !important; + background-position: center left 1.125rem, center right 0.75rem; +} +input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file])[type=search][aria-invalid=false] { + background-image: var(--icon-search), var(--icon-valid); +} +input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file])[type=search][aria-invalid=true] { + background-image: var(--icon-search), var(--icon-invalid); +} + [type=search]::-webkit-search-cancel-button { -webkit-appearance: none; display: none; } +[dir=rtl] :where(input):not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file])[type=search] { + background-position: center right 1.125rem; +} +[dir=rtl] :where(input):not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file])[type=search][aria-invalid] { + background-position: center right 1.125rem, center left 0.75rem; +} + /** * Table */ -table { +:where(table) { width: 100%; - border-color: inherit; border-collapse: collapse; border-spacing: 0; text-indent: 0; @@ -1805,18 +1694,20 @@ td { padding: calc(var(--spacing) / 2) var(--spacing); border-bottom: var(--border-width) solid var(--table-border-color); color: var(--color); - font-size: var(--font-size); font-weight: var(--font-weight); + font-size: var(--font-size); text-align: left; text-align: start; } -tr { - background-color: var(--background-color); +tfoot th, +tfoot td { + border-top: var(--border-width) solid var(--table-border-color); + border-bottom: 0; } table[role=grid] tbody tr:nth-child(odd) { - --background-color: var(--table-row-stripped-background-color); + background-color: var(--table-row-stripped-background-color); } /** @@ -1826,8 +1717,8 @@ pre, code, kbd, samp { - font-family: var(--font-family); font-size: 0.875em; + font-family: var(--font-family); } pre { @@ -1838,11 +1729,11 @@ pre { pre, code, kbd { + border-radius: var(--border-radius); background: var(--code-background-color); color: var(--code-color); font-weight: var(--font-weight); line-height: initial; - border-radius: var(--border-radius); } code, @@ -1857,9 +1748,9 @@ pre { overflow-x: auto; } pre > code { - background: transparent; display: block; padding: var(--spacing); + background: none; font-size: 14px; line-height: var(--line-height); } @@ -1884,18 +1775,17 @@ code em { kbd { background-color: var(--code-kbd-background-color); color: var(--code-kbd-color); - vertical-align: middle; + vertical-align: baseline; } /** * Miscs */ hr { - box-sizing: content-box; height: 0; - overflow: visible; - border: none; + border: 0; border-top: 1px solid var(--muted-border-color); + color: inherit; } [hidden], @@ -1903,50 +1793,28 @@ template { display: none !important; } -dialog { - display: block; - position: absolute; - right: 0; - left: 0; - width: -moz-fit-content; - width: -webkit-fit-content; - width: fit-content; - height: -moz-fit-content; - height: -webkit-fit-content; - height: fit-content; - margin: auto; - padding: 1em; - border: solid; - background-color: white; - color: black; -} - -dialog:not([open]) { - display: none; -} - canvas { display: inline-block; } /** * Accordion (
) - * Inspiration: https://codepen.io/koca/pen/RyeLLV */ details { display: block; margin-bottom: var(--spacing); - padding-bottom: calc(var(--spacing) * 0.5); + padding-bottom: var(--spacing); border-bottom: var(--border-width) solid var(--accordion-border-color); } details summary { - color: var(--accordion-close-summary-color); line-height: 1rem; list-style-type: none; - list-style-type: none; cursor: pointer; transition: color var(--transition); } +details summary:not([role]) { + color: var(--accordion-close-summary-color); +} details summary::-webkit-details-marker { display: none; } @@ -1960,37 +1828,50 @@ details summary::after { display: block; width: 1rem; height: 1rem; + -webkit-margin-start: calc(var(--spacing, 1rem) * 0.5); + margin-inline-start: calc(var(--spacing, 1rem) * 0.5); float: right; transform: rotate(-90deg); background-image: var(--icon-chevron); - background-position: center; - background-repeat: no-repeat; + background-position: right center; background-size: 1rem auto; + background-repeat: no-repeat; content: ""; transition: transform var(--transition); } details summary:focus { outline: none; +} +details summary:focus:not([role=button]) { color: var(--accordion-active-summary-color); } -details summary ~ * { - margin-top: calc(var(--spacing) * 0.5); +details summary[role=button] { + width: 100%; + text-align: left; } -details summary ~ * ~ * { - margin-top: 0; +details summary[role=button]::after { + height: calc(1rem * var(--line-height, 1.5)); + background-image: var(--icon-chevron-button); +} +details summary[role=button]:not(.outline).contrast::after { + background-image: var(--icon-chevron-button-inverse); } details[open] > summary { - margin-bottom: calc(var(--spacing) * 0.25); + margin-bottom: calc(var(--spacing)); } -details[open] > summary:not(:focus) { +details[open] > summary:not([role]):not(:focus) { color: var(--accordion-open-summary-color); } details[open] > summary::after { transform: rotate(0); } +[dir=rtl] details summary { + text-align: right; +} [dir=rtl] details summary::after { float: left; + background-position: left center; } /** @@ -1999,7 +1880,6 @@ details[open] > summary::after { article { margin: var(--block-spacing-vertical) 0; padding: var(--block-spacing-vertical) var(--block-spacing-horizontal); - overflow: hidden; border-radius: var(--border-radius); background: var(--card-background-color); box-shadow: var(--card-box-shadow); @@ -2022,9 +1902,171 @@ article > footer { border-top: var(--border-width) solid var(--card-border-color); } +/** + * Modal () + */ +:root { + --scrollbar-width: 0px; +} + +dialog { + display: flex; + z-index: 999; + position: fixed; + top: 0; + right: 0; + bottom: 0; + left: 0; + align-items: center; + justify-content: center; + width: inherit; + min-width: 100%; + height: inherit; + min-height: 100%; + padding: var(--spacing); + border: 0; + background-color: var(--modal-overlay-background-color); + color: var(--color); +} +dialog article { + max-height: calc(100vh - var(--spacing) * 2); + overflow: auto; +} +@media (min-width: 576px) { + dialog article { + max-width: 510px; + } +} +@media (min-width: 768px) { + dialog article { + max-width: 700px; + } +} +dialog article > header, +dialog article > footer { + padding: calc(var(--block-spacing-vertical) * 0.5) var(--block-spacing-horizontal); +} +dialog article > header .close { + margin: 0; + margin-left: var(--spacing); + float: right; +} +dialog article > footer { + text-align: right; +} +dialog article > footer [role=button] { + margin-bottom: 0; +} +dialog article > footer [role=button]:not(:first-of-type) { + margin-left: calc(var(--spacing) * 0.5); +} +dialog article p:last-of-type { + margin: 0; +} +dialog article .close { + display: block; + width: 1rem; + height: 1rem; + margin-top: calc(var(--block-spacing-vertical) * -0.5); + margin-bottom: var(--typography-spacing-vertical); + margin-left: auto; + background-image: var(--icon-close); + background-position: center; + background-size: auto 1rem; + background-repeat: no-repeat; + opacity: 0.5; + transition: opacity var(--transition); +} +dialog article .close:is([aria-current], :hover, :active, :focus) { + opacity: 1; +} +dialog:not([open]), dialog[open=false] { + display: none; +} + +.modal-is-open { + padding-right: var(--scrollbar-width, 0px); + overflow: hidden; + pointer-events: none; +} +.modal-is-open dialog { + pointer-events: auto; +} + +:where(.modal-is-opening, .modal-is-closing) dialog, +:where(.modal-is-opening, .modal-is-closing) dialog > article { + -webkit-animation-duration: 0.2s; + animation-duration: 0.2s; + -webkit-animation-timing-function: ease-in-out; + animation-timing-function: ease-in-out; + -webkit-animation-fill-mode: both; + animation-fill-mode: both; +} +:where(.modal-is-opening, .modal-is-closing) dialog { + -webkit-animation-duration: 0.8s; + animation-duration: 0.8s; + -webkit-animation-name: fadeIn; + animation-name: fadeIn; +} +:where(.modal-is-opening, .modal-is-closing) dialog > article { + -webkit-animation-delay: 0.2s; + animation-delay: 0.2s; + -webkit-animation-name: slideInDown; + animation-name: slideInDown; +} + +.modal-is-closing dialog, +.modal-is-closing dialog > article { + -webkit-animation-delay: 0s; + animation-delay: 0s; + animation-direction: reverse; +} + +@-webkit-keyframes fadeIn { + from { + background-color: transparent; + } + to { + background-color: var(--modal-overlay-background-color); + } +} + +@keyframes fadeIn { + from { + background-color: transparent; + } + to { + background-color: var(--modal-overlay-background-color); + } +} +@-webkit-keyframes slideInDown { + from { + transform: translateY(-100%); + opacity: 0; + } + to { + transform: translateY(0); + opacity: 1; + } +} +@keyframes slideInDown { + from { + transform: translateY(-100%); + opacity: 0; + } + to { + transform: translateY(0); + opacity: 1; + } +} /** * Nav */ +:where(nav li)::before { + float: left; + content: "​"; +} + nav, nav ul { display: flex; @@ -2033,6 +2075,7 @@ nav ul { nav { justify-content: space-between; } + nav ol, nav ul { align-items: center; @@ -2042,31 +2085,35 @@ nav ul { } nav ol:first-of-type, nav ul:first-of-type { - margin-left: calc(var(--spacing) * -0.5); + margin-left: calc(var(--nav-element-spacing-horizontal) * -1); } nav ol:last-of-type, nav ul:last-of-type { - margin-right: calc(var(--spacing) * -0.5); + margin-right: calc(var(--nav-element-spacing-horizontal) * -1); } nav li { display: inline-block; margin: 0; - padding: var(--spacing) calc(var(--spacing) * 0.5); + padding: var(--nav-element-spacing-vertical) var(--nav-element-spacing-horizontal); } -nav li > *, -nav li > input:not([type=checkbox]):not([type=radio]) { - margin-bottom: 0; +nav li > * { + --spacing: 0; } -nav a { - display: block; - margin: calc(var(--spacing) * -1) calc(var(--spacing) * -0.5); - padding: var(--spacing) calc(var(--spacing) * 0.5); +nav :where(a, [role=link]) { + display: inline-block; + margin: calc(var(--nav-link-spacing-vertical) * -1) calc(var(--nav-link-spacing-horizontal) * -1); + padding: var(--nav-link-spacing-vertical) var(--nav-link-spacing-horizontal); border-radius: var(--border-radius); text-decoration: none; } -nav a:hover, nav a:active, nav a:focus { +nav :where(a, [role=link]):is([aria-current], :hover, :active, :focus) { text-decoration: none; } +nav [role=button] { + margin-right: inherit; + margin-left: inherit; + padding: var(--nav-link-spacing-vertical) var(--nav-link-spacing-horizontal); +} aside nav, aside ol, @@ -2075,11 +2122,13 @@ aside li { display: block; } aside li { - padding: calc(var(--spacing) * 0.5); + padding: calc(var(--nav-element-spacing-vertical) * 0.5) var(--nav-element-spacing-horizontal); } aside li a { - margin: calc(var(--spacing) * -0.5); - padding: calc(var(--spacing) * 0.5); + display: block; +} +aside li [role=button] { + margin: inherit; } /** @@ -2093,8 +2142,8 @@ progress { progress { -webkit-appearance: none; -moz-appearance: none; - appearance: none; display: inline-block; + appearance: none; width: 100%; height: 0.5rem; margin-bottom: calc(var(--spacing) * 0.5); @@ -2106,7 +2155,7 @@ progress { } progress::-webkit-progress-bar { border-radius: var(--border-radius); - background: transparent; + background: none; } progress[value]::-webkit-progress-value { background-color: var(--progress-color); @@ -2118,7 +2167,7 @@ progress::-moz-progress-bar { progress:indeterminate { background: var(--progress-background-color) linear-gradient(to right, var(--progress-color) 30%, var(--progress-background-color) 30%) top left/150% 150% no-repeat; -webkit-animation: progressIndeterminate 1s linear infinite; - animation: progressIndeterminate 1s linear infinite; + animation: progressIndeterminate 1s linear infinite; } progress:indeterminate[value]::-webkit-progress-value { background-color: transparent; @@ -2128,6 +2177,12 @@ progress::-moz-progress-bar { } } +@media (prefers-reduced-motion: no-preference) { + [dir=rtl] progress:indeterminate { + animation-direction: reverse; + } +} + @-webkit-keyframes progressIndeterminate { 0% { background-position: 200% 0; @@ -2145,6 +2200,177 @@ progress::-moz-progress-bar { background-position: -200% 0; } } +/** + * Dropdown ([role="list"]) + */ +details[role=list], +li[role=list] { + position: relative; +} + +details[role=list] summary + ul, +li[role=list] > ul { + display: flex; + z-index: 99; + position: absolute; + top: auto; + right: 0; + left: 0; + flex-direction: column; + margin: 0; + padding: 0; + border: var(--border-width) solid var(--dropdown-border-color); + border-radius: var(--border-radius); + border-top-right-radius: 0; + border-top-left-radius: 0; + background-color: var(--dropdown-background-color); + box-shadow: var(--card-box-shadow); + color: var(--dropdown-color); + white-space: nowrap; +} +details[role=list] summary + ul li, +li[role=list] > ul li { + width: 100%; + margin-bottom: 0; + padding: calc(var(--form-element-spacing-vertical) * 0.5) var(--form-element-spacing-horizontal); + list-style: none; +} +details[role=list] summary + ul li:first-of-type, +li[role=list] > ul li:first-of-type { + margin-top: calc(var(--form-element-spacing-vertical) * 0.5); +} +details[role=list] summary + ul li:last-of-type, +li[role=list] > ul li:last-of-type { + margin-bottom: calc(var(--form-element-spacing-vertical) * 0.5); +} +details[role=list] summary + ul li a, +li[role=list] > ul li a { + display: block; + margin: calc(var(--form-element-spacing-vertical) * -0.5) calc(var(--form-element-spacing-horizontal) * -1); + padding: calc(var(--form-element-spacing-vertical) * 0.5) var(--form-element-spacing-horizontal); + overflow: hidden; + color: var(--dropdown-color); + text-decoration: none; + text-overflow: ellipsis; +} +details[role=list] summary + ul li a:hover, +li[role=list] > ul li a:hover { + background-color: var(--dropdown-hover-background-color); +} + +details[role=list] summary::after, +li[role=list] > a::after { + display: block; + width: 1rem; + height: calc(1rem * var(--line-height, 1.5)); + -webkit-margin-start: 0.5rem; + margin-inline-start: 0.5rem; + float: right; + transform: rotate(0deg); + background-position: right center; + background-size: 1rem auto; + background-repeat: no-repeat; + content: ""; +} + +details[role=list] { + padding: 0; + border-bottom: none; +} +details[role=list] summary { + margin-bottom: 0; +} +details[role=list] summary:not([role]) { + height: calc(1rem * var(--line-height) + var(--form-element-spacing-vertical) * 2 + var(--border-width) * 2); + padding: var(--form-element-spacing-vertical) var(--form-element-spacing-horizontal); + border: var(--border-width) solid var(--form-element-border-color); + border-radius: var(--border-radius); + background-color: var(--form-element-background-color); + color: var(--form-element-placeholder-color); + line-height: inherit; + cursor: pointer; + transition: background-color var(--transition), border-color var(--transition), color var(--transition), box-shadow var(--transition); +} +details[role=list] summary:not([role]):active, details[role=list] summary:not([role]):focus { + border-color: var(--form-element-active-border-color); + background-color: var(--form-element-active-background-color); +} +details[role=list] summary:not([role]):focus { + box-shadow: 0 0 0 var(--outline-width) var(--form-element-focus-color); +} +details[role=list][open] summary { + border-bottom-right-radius: 0; + border-bottom-left-radius: 0; +} +details[role=list][open] summary::before { + display: block; + z-index: 1; + position: fixed; + top: 0; + right: 0; + bottom: 0; + left: 0; + background: none; + content: ""; + cursor: default; +} + +nav details[role=list] summary, +nav li[role=list] a { + display: flex; + direction: ltr; +} + +nav details[role=list] summary + ul, +nav li[role=list] > ul { + min-width: -webkit-fit-content; + min-width: -moz-fit-content; + min-width: fit-content; + border-radius: var(--border-radius); +} +nav details[role=list] summary + ul li a, +nav li[role=list] > ul li a { + border-radius: 0; +} + +nav details[role=list] summary, +nav details[role=list] summary:not([role]) { + height: auto; + padding: var(--nav-link-spacing-vertical) var(--nav-link-spacing-horizontal); +} +nav details[role=list][open] summary { + border-radius: var(--border-radius); +} +nav details[role=list] summary + ul { + margin-top: var(--outline-width); + -webkit-margin-start: 0; + margin-inline-start: 0; +} +nav details[role=list] summary[role=link] { + margin-bottom: calc(var(--nav-link-spacing-vertical) * -1); + line-height: var(--line-height); +} +nav details[role=list] summary[role=link] + ul { + margin-top: calc(var(--nav-link-spacing-vertical) + var(--outline-width)); + -webkit-margin-start: calc(var(--nav-link-spacing-horizontal) * -1); + margin-inline-start: calc(var(--nav-link-spacing-horizontal) * -1); +} + +li[role=list]:hover > ul, +li[role=list] a:active ~ ul, +li[role=list] a:focus ~ ul { + display: flex; +} +li[role=list] > ul { + display: none; + margin-top: calc(var(--nav-link-spacing-vertical) + var(--outline-width)); + -webkit-margin-start: calc(var(--nav-element-spacing-horizontal) - var(--nav-link-spacing-horizontal)); + margin-inline-start: calc(var(--nav-element-spacing-horizontal) - var(--nav-link-spacing-horizontal)); +} +li[role=list] > a::after { + background-image: var(--icon-chevron); +} + /** * Loading ([aria-busy=true]) */ @@ -2159,20 +2385,20 @@ progress::-moz-progress-bar { border: 0.1875em solid currentColor; border-radius: 1em; border-right-color: transparent; + content: ""; vertical-align: text-bottom; vertical-align: -0.125em; -webkit-animation: spinner 0.75s linear infinite; - animation: spinner 0.75s linear infinite; - content: ""; + animation: spinner 0.75s linear infinite; opacity: var(--loading-spinner-opacity); } [aria-busy=true]:not(input):not(select):not(textarea):not(:empty)::before { margin-right: calc(var(--spacing) * 0.5); margin-left: 0; - -webkit-margin-end: calc(var(--spacing) * 0.5); - margin-inline-end: calc(var(--spacing) * 0.5); -webkit-margin-start: 0; - margin-inline-start: 0; + margin-inline-start: 0; + -webkit-margin-end: calc(var(--spacing) * 0.5); + margin-inline-end: calc(var(--spacing) * 0.5); } [aria-busy=true]:not(input):not(select):not(textarea):empty { text-align: center; @@ -2219,14 +2445,14 @@ a[aria-busy=true] { transform: translate(-50%, -0.25rem); border-radius: var(--border-radius); background: var(--tooltip-background-color); + content: attr(data-tooltip); color: var(--tooltip-color); - font-size: 0.875rem; font-style: normal; font-weight: var(--font-weight); + font-size: 0.875rem; text-decoration: none; text-overflow: ellipsis; white-space: nowrap; - content: attr(data-tooltip); opacity: 0; pointer-events: none; } @@ -2238,19 +2464,23 @@ a[aria-busy=true] { border-left: 0.3rem solid transparent; border-radius: 0; background-color: transparent; - color: var(--tooltip-background-color); content: ""; + color: var(--tooltip-background-color); } [data-tooltip]:focus::before, [data-tooltip]:focus::after, [data-tooltip]:hover::before, [data-tooltip]:hover::after { opacity: 1; - -webkit-animation-name: slide; - animation-name: slide; - -webkit-animation-duration: 0.2s; - animation-duration: 0.2s; } -[data-tooltip]:focus::after, [data-tooltip]:hover::after { - -webkit-animation-name: slideCaret; - animation-name: slideCaret; +@media (hover: hover) and (pointer: fine) { + [data-tooltip]:focus::before, [data-tooltip]:focus::after, [data-tooltip]:hover::before, [data-tooltip]:hover::after { + -webkit-animation-duration: 0.2s; + animation-duration: 0.2s; + -webkit-animation-name: slide; + animation-name: slide; + } + [data-tooltip]:focus::after, [data-tooltip]:hover::after { + -webkit-animation-name: slideCaret; + animation-name: slideCaret; + } } @-webkit-keyframes slide { @@ -2338,21 +2568,23 @@ textarea, } /** - * Reduce Motion Features - */ +* Reduce Motion Features +*/ @media (prefers-reduced-motion: reduce) { *:not([aria-busy=true]), :not([aria-busy=true])::before, :not([aria-busy=true])::after { background-attachment: initial !important; -webkit-animation-duration: 1ms !important; - animation-duration: 1ms !important; + animation-duration: 1ms !important; -webkit-animation-delay: -1ms !important; - animation-delay: -1ms !important; + animation-delay: -1ms !important; -webkit-animation-iteration-count: 1 !important; - animation-iteration-count: 1 !important; + animation-iteration-count: 1 !important; scroll-behavior: auto !important; transition-delay: 0s !important; transition-duration: 0s !important; } } + +/*# sourceMappingURL=pico.css.map */ diff --git a/conf/portal_user.conf b/conf/portal_user.conf index 847850b..cdb11e9 100644 --- a/conf/portal_user.conf +++ b/conf/portal_user.conf @@ -38,8 +38,9 @@ domain * { route /css/style.css asset_serve_style_css route /js/theme-switcher.js asset_serve_theme_switcher_js route /signup create_user - route /portal/bienvenue asset_serve_private_test_html auth_example - + route /portal/bienvenue private_portal auth_example + route /logout v_session_remove + params post / { validate login v_login validate password v_password diff --git a/kore.core b/kore.core index 2aa48ba..0560b6b 100644 Binary files a/kore.core and b/kore.core differ diff --git a/src/portal_user.c b/src/portal_user.c index 955be73..77447b6 100644 --- a/src/portal_user.c +++ b/src/portal_user.c @@ -34,6 +34,7 @@ int v_password_func(struct http_request *, char *); int create_user(struct http_request *); int v_session_validate(struct http_request *, char *); int v_session_remove(struct http_request *, char *); +int private_portal(struct http_request *); hashtable_t *hashtable = NULL; @@ -142,9 +143,10 @@ int create_user(struct http_request *req) } sqlite3_close(db); + http_response_header(req, "location", "/"); http_response_header(req, "content-type", "text/html"); d = kore_buf_release(b, &len); - http_response(req, 200, d, len); + http_response(req, HTTP_STATUS_FOUND, NULL, 0); kore_free(d); return (KORE_RESULT_OK); @@ -266,8 +268,10 @@ int portal_user_load(struct http_request *req) if (cookie != NULL) http_response_header(req, "set-cookie", cookie); d = kore_buf_release(b, &len); - http_response(req, 200, d, len); - kore_free(d); + + http_response_header(req, "location", "/portal/bienvenue"); + http_response(req, HTTP_STATUS_FOUND, NULL, 0); + kore_free(d); return (KORE_RESULT_OK); } @@ -294,10 +298,10 @@ int v_session_remove (struct http_request *req, char *data) if (ht_get(hashtable, buffer) != NULL) ht_delete(hashtable, buffer); - + http_response_header(req, "location", "/"); http_response_header(req, "content-type", "text/html"); - http_response_header(req, "set-cookie", "session_id="); - http_response(req, 200, asset_index_html, asset_len_index_html); + http_response_header(req, "set-cookie", "session_id="""); + http_response(req, HTTP_STATUS_FOUND, NULL, 0); return (KORE_RESULT_OK); } @@ -311,3 +315,27 @@ int v_session_validate(struct http_request *req, char *data) return (KORE_RESULT_ERROR); } + +int private_portal(struct http_request *req) +{ + struct kore_buf *b = NULL; + u_int8_t *d = NULL; + size_t len = 0; + + if (req->method == HTTP_METHOD_GET) + http_populate_get(req); + + b = kore_buf_alloc(asset_len_signup_html); + kore_buf_append(b, asset_private_html, asset_len_private_html); + + + if (req->method == HTTP_METHOD_GET) { + kore_buf_replace_string(b, "$msg$", "GO", 4); + + http_response_header(req, "content-type", "text/html"); + d = kore_buf_release(b, &len); + http_response(req, 200, d, len); + kore_free(d); + return (KORE_RESULT_OK); + } +}