From 52ccb7801bbfa8cfe1fa32e93d8cc4c41dd5ba24 Mon Sep 17 00:00:00 2001 From: Welton Moura Date: Thu, 26 Jun 2025 11:52:19 -0300 Subject: [PATCH 01/11] framework css cdn --- gestaoRaul/db.sqlite3 | Bin 339968 -> 339968 bytes .../__pycache__/settings.cpython-312.pyc | Bin 4405 -> 4405 bytes gestaoRaul/gestaoRaul/settings.py | 28 +++++++++--------- gestaoRaul/templates/base.html | 6 +++- 4 files changed, 19 insertions(+), 15 deletions(-) diff --git a/gestaoRaul/db.sqlite3 b/gestaoRaul/db.sqlite3 index 02f176715929d1ab48ff43564d5f98e24db7c50b..89e3afe276ba1d50bf7dff1156871ee0de1ddd56 100644 GIT binary patch delta 334 zcmZp8Aky$aWP&uK!$cWpMu&|FTzNu9W(tNTRwkBKhQ@jphNkAGrkiW>It+Ok#0~`Y-o{TWaiQw zw`zObD#m55%o^O9)7d{T`ZIBBZZ=f7$Ti*LHzSX@p#idW7Dg6^E^^F{jMMk2u}Zb4 z{bmGWCLm_sp7xt%o{9t)OCJNzMD83ecTOetzkIiOx3S$|-OSRrIZ&X8MWac{h1It? z*pZN{CQqEa$-6W(uQbWZ&9gACEGfdR#3(VjGBdk4sW8I1B)%xn)2t{m-mf&#B*4kV c+}tOqtTNfiz{phBz+4y8$=f%pvifoX05Cyk?*IS* delta 147 zcmZp8Aky$aWP&uK?L--8M%#@ETzNu<<_d-uR;K1wCKh_e78YifCYx*WIt;ngx#AeO zzjC+n_G}hdpvg6HfqHY?s_k*B7?-&+t8;ryXaB(Hzu8dX6W4Uj-;6xdkEyW=wWs}N z1Y#y2X5OCmn`NGg7$@sy2A+xBIb80XO6-66Zu4$qyTQ77bD+RX*6o{BS$(+xz3MS6 diff --git a/gestaoRaul/gestaoRaul/__pycache__/settings.cpython-312.pyc b/gestaoRaul/gestaoRaul/__pycache__/settings.cpython-312.pyc index d69eacf8fdc081fb55892cfc73b3130c1da92c7a..1ea2b0265fc72e2e5fe933c65a2fd737978945f1 100644 GIT binary patch delta 20 acmdn0v{i}wG%qg~0}wFB#%|=+5(EG>galmx delta 20 acmdn0v{i}wG%qg~0}$*HjoHYpB?tgG-UQ76 diff --git a/gestaoRaul/gestaoRaul/settings.py b/gestaoRaul/gestaoRaul/settings.py index f4cede5..e61b008 100644 --- a/gestaoRaul/gestaoRaul/settings.py +++ b/gestaoRaul/gestaoRaul/settings.py @@ -106,26 +106,26 @@ WSGI_APPLICATION = 'gestaoRaul.wsgi.application' # Database # https://docs.djangoproject.com/en/5.1/ref/settings/#databases -# DATABASES = { -# 'default': { -# 'ENGINE': 'django.db.backends.sqlite3', -# 'NAME': BASE_DIR / 'db.sqlite3', -# } -# } - - DATABASES = { 'default': { - 'ENGINE': DB_ENGINE, - 'NAME': DB_NAME, - 'USER': DB_USER, - 'PASSWORD': DB_PASSWORD, - 'HOST': DB_HOST, - 'PORT': DB_PORT, + 'ENGINE': 'django.db.backends.sqlite3', + 'NAME': BASE_DIR / 'db.sqlite3', } } +# DATABASES = { +# 'default': { +# 'ENGINE': DB_ENGINE, +# 'NAME': DB_NAME, +# 'USER': DB_USER, +# 'PASSWORD': DB_PASSWORD, +# 'HOST': DB_HOST, +# 'PORT': DB_PORT, +# } +# } + + # Password validation # https://docs.djangoproject.com/en/5.1/ref/settings/#auth-password-validators diff --git a/gestaoRaul/templates/base.html b/gestaoRaul/templates/base.html index 32fbb0d..a7786e5 100644 --- a/gestaoRaul/templates/base.html +++ b/gestaoRaul/templates/base.html @@ -11,7 +11,11 @@ {% load pwa %} {% progressive_web_app_meta %} - + + {% block 'head' %} From 0911483e62b6bd81a7b0653f71b17779df9521ce Mon Sep 17 00:00:00 2001 From: Welton Moura Date: Thu, 26 Jun 2025 13:19:27 -0300 Subject: [PATCH 02/11] style: remodelagem menu mobile --- .../__pycache__/settings.cpython-312.pyc | Bin 4405 -> 4405 bytes gestaoRaul/templates/base.html | 103 +- gestaoRaul/templates/static/base.css | 254 +- gestaoRaul/templates/static/pico.css | 2770 ----------------- 4 files changed, 89 insertions(+), 3038 deletions(-) delete mode 100644 gestaoRaul/templates/static/pico.css diff --git a/gestaoRaul/gestaoRaul/__pycache__/settings.cpython-312.pyc b/gestaoRaul/gestaoRaul/__pycache__/settings.cpython-312.pyc index 1ea2b0265fc72e2e5fe933c65a2fd737978945f1..694a69b6b2da002da3d36727d5fde7637444b59d 100644 GIT binary patch delta 19 Zcmdn0v{i}gG%qg~0}!yqZ{*Sz1OPC$1Oxy8 delta 19 Zcmdn0v{i}gG%qg~0}wFBZsgJy1OPCa1OEU3 diff --git a/gestaoRaul/templates/base.html b/gestaoRaul/templates/base.html index a7786e5..2080a6b 100644 --- a/gestaoRaul/templates/base.html +++ b/gestaoRaul/templates/base.html @@ -11,7 +11,6 @@ {% load pwa %} {% progressive_web_app_meta %} - - +
    @@ -61,87 +60,62 @@
- - -
- +
- - -
-
- - - - - + -
@@ -158,30 +132,15 @@ - - -
- - - -
\ No newline at end of file diff --git a/gestaoRaul/templates/static/base.css b/gestaoRaul/templates/static/base.css index b94f9d0..8ea0c8d 100644 --- a/gestaoRaul/templates/static/base.css +++ b/gestaoRaul/templates/static/base.css @@ -43,7 +43,7 @@ } - @keyframes jump { +@keyframes jump { 0% { transform: scale(0.0); } @@ -53,7 +53,7 @@ 100% { transform: scale(1); } - } +} @@ -76,7 +76,6 @@ input, textarea, select { width: 95%; max-width: 95%; max-height: 300px; - /* padding: 8px; */ margin-top: 5px; border-radius: 8px; border: 1px solid #cccccc52; @@ -93,14 +92,14 @@ input, textarea, select { line-height: 20px; padding: 15px 30px 15px 30px; transition: box-shadow 0.4s; - } +} - .btn-primary:hover { +.btn-primary:hover { box-shadow: 0px 0px 15px rgba(86, 187, 255, 0.815); text-align: left; line-height: 20px; padding: 15px 30px 15px 30px; - } +} .btn-secondary { align-items: center; @@ -112,14 +111,14 @@ input, textarea, select { line-height: 20px; padding: 15px 30px 15px 30px; transition: box-shadow 0.4s; - } +} - .btn-secondary:hover { +.btn-secondary:hover { box-shadow: 0px 0px 15px rgb(53, 241, 62); text-align: left; line-height: 20px; padding: 15px 30px 15px 30px; - } +} .btn-cancel { align-items: center; @@ -131,14 +130,14 @@ input, textarea, select { line-height: 20px; padding: 15px 30px 15px 30px; transition: box-shadow 0.4s; - } +} - .btn-cancel:hover { - box-shadow: 0px 0px 15px rgba(255, 86, 86, 0.815); - text-align: left; - line-height: 20px; - padding: 15px 30px 15px 30px; - } +.btn-cancel:hover { + box-shadow: 0px 0px 15px rgba(255, 86, 86, 0.815); + text-align: left; + line-height: 20px; + padding: 15px 30px 15px 30px; +} * { padding: 0; @@ -238,121 +237,54 @@ input, textarea, select { } - .dropdown { +.dropdown { position: relative; display: inline-block; color: #fff; cursor: pointer; transition: display 0.9s, animation 0.9s; - } +} - .dropdown-content { +.dropdown-content { display: none; position: absolute; border-radius: 5px; background-color: #313238; min-width: 160px; box-shadow: 0px 3px 10px #464646; - } +} - .dropdown-content a { +.dropdown-content a { color: rgb(255, 255, 255); padding: 12px 16px; text-decoration: none; display: block; animation: jump 0.7s; - - - } +} - .dropdown-content a:hover { +.dropdown-content a:hover { background-color: #7a7a7a; border-radius: 5px; display: block; - /* animation: jump 0.7s; */ +} - } - - .img-drop { +.img-drop { width: 35px; transition: transform 0.3s ease-in-out; - } +} - .dropdown:hover .img-drop { +.dropdown:hover .img-drop { transform: rotate(180deg); - } +} - .dropdown:hover .dropdown-content { - display: block; - animation: jump 0.7s; - -} - - - -.navigation { - position: fixed; - bottom: 0; - width: 100%; - height: 60px; - background: var(--main-gradient); - display: none; - justify-content: center; - align-items: center; - border-radius: 10px 10px 0px 0px; - box-shadow: 10px 0px 8px rgb(255, 255, 255); -} - -.navigation ul { - width: 350px; - display: flex; - justify-content: space-around; - padding: 0; - margin: 0; -} - -.navigation ul li { - list-style: none; - position: relative; - width: 70px; - height: 60px; - z-index: 2; -} - -.navigation ul li a { - text-decoration: none; - color: #555; - position: relative; - display: flex; - justify-content: center; - align-items: center; - width: 100%; - height: 100%; -} - -.navigation ul li a .icon { - position: fixed; - background: #add7ff; +.dropdown:hover .dropdown-content { display: block; - width: 55px; - height: 55px; - text-align: center; - line-height: 65px; - border-radius: 50%; - color: #222327; - font-size: 1.5em; - transition: 0.5s; - transition-delay: 0s; - z-index: 100; + animation: jump 0.7s; + } -.navigation ul li a .icon:hover { - background: #222327; - color: #fff; - transform: translateY(-10px); -} .toast { position: fixed; @@ -372,12 +304,7 @@ input, textarea, select { transition: opacity 0.5s ease-in-out, visibility 0.5s ease-in-out; z-index: 999 ; } -@media screen and (max-width: 730px) { - .toast-add { - width: 90%; - - } -} + .toast p { color: #000000; } @@ -388,100 +315,25 @@ input, textarea, select { } -@media screen and (max-width: 730px) { - .dropdown-content { - display: none; - margin-top: 40px; - position: relative; - border-radius: 0px; - min-width: 160px; - } - .nav-bar { - padding: 0.1rem 2rem; - } - .nav-item { - display: none; - } - .logout-button { - display: none; - } - .mobile-menu-icon { - display: block; - } - .mobile-menu-icon button { - background-color: transparent; - border: none; - cursor: pointer; - } - .mobile-menu ul { - display: flex; - flex-direction: column; - text-align: center; - padding-bottom: 1rem; - } - .mobile-menu .nav-item { - display: block; - padding-top: 1.2rem; - } - .mobile-menu .logout-button { - display: block; - justify-items: center; - justify-self: center; - padding: 1rem 2rem; - } - .mobile-menu .logout-button button { - width: 100%; - } - .open { - display: block; - transition: transform 0.2s; - } - - .navigation { - display: flex; - } -} - - - - - - - .header-mobile { display: none; - justify-content: space-between; + justify-content: flex-start; align-items: center; background-color: #171525; box-shadow: 0 4px 10px rgba(0, 0, 0, 0.5); - /* backdrop-filter: blur(5px); */ - padding: 1rem; - padding-right: 50px; - padding-left: 10px; + border-radius: 25px;; position: fixed; - top: 0; - width: 100%; + + top: 50%; + right: 0%; + + width: 55px; + height: 55px; z-index: 9999; } -.header-mobile .logo { - display: flex; - align-items: center; - margin-left: 25px; -} -.header-mobile .logo i { - color: #fbbf24; - font-size: 2rem; -} - -.header-mobile .logo span { - - font-size: 1.25rem; - font-weight: bold; - margin-left: .5rem; -} .header-mobile .nav-toggle { display: block; @@ -500,10 +352,10 @@ input, textarea, select { .header-mobile .nav-links { max-width: 70%; position: fixed; - top: 83px; + top: 0px; left: -100%; width: 100%; - height: 100vh; + height: 100%; background-color: #222033b9; box-shadow: 0 10px 10px rgba(0, 0, 0, 0.5); backdrop-filter: blur(5px); @@ -532,7 +384,7 @@ input, textarea, select { font-size: 1.2rem; margin: 1rem 0; display: block; - width: 90%; + width: 100%; text-align: center; padding: 1rem; transition: all 0.3s; @@ -540,19 +392,29 @@ input, textarea, select { .header-mobile .nav-links a:hover { color: white; - scale: 1.1; - background-color: #373543; - box-shadow: 0 0px 10px rgba(0, 0, 0, 0.5); + scale: 1.3; transition: all 0.3s ; } @media screen and (max-width: 768px) { - .background .bg1 { - max-height: 21.5%; + .toast-add { + width: 90%; + } + + .dropdown-content { + display: none; } .header-mobile { - display: flex; + display: flex; + } + + .nav-bar { + display:none; + } + + body { + margin: 8px 0px 0px 0px; } } diff --git a/gestaoRaul/templates/static/pico.css b/gestaoRaul/templates/static/pico.css deleted file mode 100644 index cec23f8..0000000 --- a/gestaoRaul/templates/static/pico.css +++ /dev/null @@ -1,2770 +0,0 @@ -@charset "UTF-8"; - -@media (min-width: 576px) { - :root { - --pico-font-size: 106.25%; - } -} -@media (min-width: 768px) { - :root { - --pico-font-size: 112.5%; - } -} -@media (min-width: 1024px) { - :root { - --pico-font-size: 118.75%; - } -} -@media (min-width: 1280px) { - :root { - --pico-font-size: 125%; - } -} -@media (min-width: 1536px) { - :root { - --pico-font-size: 131.25%; - } -} - -a { - --pico-text-decoration: underline; -} -a.secondary, a.contrast { - --pico-text-decoration: underline; -} - -small { - --pico-font-size: 0.875em; -} - -h1, -h2, -h3, -h4, -h5, -h6 { - --pico-font-weight: 700; -} - -h1 { - --pico-font-size: 2rem; - --pico-line-height: 1.125; - --pico-typography-spacing-top: 3rem; -} - -h2 { - --pico-font-size: 1.75rem; - --pico-line-height: 1.15; - --pico-typography-spacing-top: 2.625rem; -} - -h3 { - --pico-font-size: 1.5rem; - --pico-line-height: 1.175; - --pico-typography-spacing-top: 2.25rem; -} - -h4 { - --pico-font-size: 1.25rem; - --pico-line-height: 1.2; - --pico-typography-spacing-top: 1.874rem; -} - -h5 { - --pico-font-size: 1.125rem; - --pico-line-height: 1.225; - --pico-typography-spacing-top: 1.6875rem; -} - -h6 { - --pico-font-size: 1rem; - --pico-line-height: 1.25; - --pico-typography-spacing-top: 1.5rem; -} - -thead th, -thead td, -tfoot th, -tfoot td { - --pico-font-weight: 600; - --pico-border-width: 0.1875rem; -} - -pre, -code, -kbd, -samp { - --pico-font-family: var(--pico-font-family-monospace); -} - -kbd { - --pico-font-weight: bolder; -} - -input:not([type=submit], -[type=button], -[type=reset], -[type=checkbox], -[type=radio], -[type=file]), -:where(select, textarea) { - --pico-outline-width: 0.0625rem; -} - -[type=search] { - --pico-border-radius: 5rem; -} - -[type=checkbox], -[type=radio] { - --pico-border-width: 0.125rem; -} - -[type=checkbox][role=switch] { - --pico-border-width: 0.1875rem; -} - -details.dropdown summary:not([role=button]) { - --pico-outline-width: 0.0625rem; -} - -nav details.dropdown summary:focus-visible { - --pico-outline-width: 0.125rem; -} - -[role=search] { - --pico-border-radius: 5rem; -} - -[role=search]:has(button.secondary:focus, -[type=submit].secondary:focus, -[type=button].secondary:focus, -[role=button].secondary:focus), -[role=group]:has(button.secondary:focus, -[type=submit].secondary:focus, -[type=button].secondary:focus, -[role=button].secondary:focus) { - --pico-group-box-shadow-focus-with-button: 0 0 0 var(--pico-outline-width) var(--pico-secondary-focus); -} -[role=search]:has(button.contrast:focus, -[type=submit].contrast:focus, -[type=button].contrast:focus, -[role=button].contrast:focus), -[role=group]:has(button.contrast:focus, -[type=submit].contrast:focus, -[type=button].contrast:focus, -[role=button].contrast:focus) { - --pico-group-box-shadow-focus-with-button: 0 0 0 var(--pico-outline-width) var(--pico-contrast-focus); -} -[role=search] button, -[role=search] [type=submit], -[role=search] [type=button], -[role=search] [role=button], -[role=group] button, -[role=group] [type=submit], -[role=group] [type=button], -[role=group] [role=button] { - --pico-form-element-spacing-horizontal: 2rem; -} - -details summary[role=button]:not(.outline)::after { - filter: brightness(0) invert(1); -} - -[aria-busy=true]:not(input, select, textarea):is(button, [type=submit], [type=button], [type=reset], [role=button]):not(.outline)::before { - filter: brightness(0) invert(1); -} - -/** - * Color schemes - */ -[data-theme=light], -:root:not([data-theme=dark]) { - --pico-background-color: #fff; - --pico-color: #373c44; - --pico-text-selection-color: rgba(2, 154, 232, 0.25); - --pico-muted-color: #646b79; - --pico-muted-border-color: #e7eaf0; - --pico-primary: #0172ad; - --pico-primary-background: #0172ad; - --pico-primary-border: var(--pico-primary-background); - --pico-primary-underline: rgba(1, 114, 173, 0.5); - --pico-primary-hover: #015887; - --pico-primary-hover-background: #02659a; - --pico-primary-hover-border: var(--pico-primary-hover-background); - --pico-primary-hover-underline: var(--pico-primary-hover); - --pico-primary-focus: rgba(2, 154, 232, 0.5); - --pico-primary-inverse: #fff; - --pico-secondary: #5d6b89; - --pico-secondary-background: #525f7a; - --pico-secondary-border: var(--pico-secondary-background); - --pico-secondary-underline: rgba(93, 107, 137, 0.5); - --pico-secondary-hover: #48536b; - --pico-secondary-hover-background: #48536b; - --pico-secondary-hover-border: var(--pico-secondary-hover-background); - --pico-secondary-hover-underline: var(--pico-secondary-hover); - --pico-secondary-focus: rgba(93, 107, 137, 0.25); - --pico-secondary-inverse: #fff; - --pico-contrast: #181c25; - --pico-contrast-background: #181c25; - --pico-contrast-border: var(--pico-contrast-background); - --pico-contrast-underline: rgba(24, 28, 37, 0.5); - --pico-contrast-hover: #000; - --pico-contrast-hover-background: #000; - --pico-contrast-hover-border: var(--pico-contrast-hover-background); - --pico-contrast-hover-underline: var(--pico-secondary-hover); - --pico-contrast-focus: rgba(93, 107, 137, 0.25); - --pico-contrast-inverse: #fff; - --pico-box-shadow: 0.0145rem 0.029rem 0.174rem rgba(129, 145, 181, 0.01698), 0.0335rem 0.067rem 0.402rem rgba(129, 145, 181, 0.024), 0.0625rem 0.125rem 0.75rem rgba(129, 145, 181, 0.03), 0.1125rem 0.225rem 1.35rem rgba(129, 145, 181, 0.036), 0.2085rem 0.417rem 2.502rem rgba(129, 145, 181, 0.04302), 0.5rem 1rem 6rem rgba(129, 145, 181, 0.06), 0 0 0 0.0625rem rgba(129, 145, 181, 0.015); - --pico-h1-color: #2d3138; - --pico-h2-color: #373c44; - --pico-h3-color: #424751; - --pico-h4-color: #4d535e; - --pico-h5-color: #5c6370; - --pico-h6-color: #646b79; - --pico-mark-background-color: #fde7c0; - --pico-mark-color: #0f1114; - --pico-ins-color: #1d6a54; - --pico-del-color: #883935; - --pico-blockquote-border-color: var(--pico-muted-border-color); - --pico-blockquote-footer-color: var(--pico-muted-color); - --pico-button-box-shadow: 0 0 0 rgba(0, 0, 0, 0); - --pico-button-hover-box-shadow: 0 0 0 rgba(0, 0, 0, 0); - --pico-table-border-color: var(--pico-muted-border-color); - --pico-table-row-stripped-background-color: rgba(111, 120, 135, 0.0375); - --pico-code-background-color: #f3f5f7; - --pico-code-color: #646b79; - --pico-code-kbd-background-color: var(--pico-color); - --pico-code-kbd-color: var(--pico-background-color); - --pico-form-element-background-color: #fbfcfc; - --pico-form-element-selected-background-color: #dfe3eb; - --pico-form-element-border-color: #cfd5e2; - --pico-form-element-color: #23262c; - --pico-form-element-placeholder-color: var(--pico-muted-color); - --pico-form-element-active-background-color: #fff; - --pico-form-element-active-border-color: var(--pico-primary-border); - --pico-form-element-focus-color: var(--pico-primary-border); - --pico-form-element-disabled-opacity: 0.5; - --pico-form-element-invalid-border-color: #b86a6b; - --pico-form-element-invalid-active-border-color: #c84f48; - --pico-form-element-invalid-focus-color: var(--pico-form-element-invalid-active-border-color); - --pico-form-element-valid-border-color: #4c9b8a; - --pico-form-element-valid-active-border-color: #279977; - --pico-form-element-valid-focus-color: var(--pico-form-element-valid-active-border-color); - --pico-switch-background-color: #bfc7d9; - --pico-switch-checked-background-color: var(--pico-primary-background); - --pico-switch-color: #fff; - --pico-switch-thumb-box-shadow: 0 0 0 rgba(0, 0, 0, 0); - --pico-range-border-color: #dfe3eb; - --pico-range-active-border-color: #bfc7d9; - --pico-range-thumb-border-color: var(--pico-background-color); - --pico-range-thumb-color: var(--pico-secondary-background); - --pico-range-thumb-active-color: var(--pico-primary-background); - --pico-accordion-border-color: var(--pico-muted-border-color); - --pico-accordion-active-summary-color: var(--pico-primary-hover); - --pico-accordion-close-summary-color: var(--pico-color); - --pico-accordion-open-summary-color: var(--pico-muted-color); - --pico-card-background-color: linear-gradient(145deg, #1E2A3B, #2C3E50); - --pico-card-border-color: var(--pico-muted-border-color); - --pico-card-box-shadow: var(--pico-box-shadow); - --pico-card-sectioning-background-color: #fbfcfc; - --pico-dropdown-background-color: #fff; - --pico-dropdown-border-color: #eff1f4; - --pico-dropdown-box-shadow: var(--pico-box-shadow); - --pico-dropdown-color: var(--pico-color); - --pico-dropdown-hover-background-color: #eff1f4; - --pico-loading-spinner-opacity: 0.5; - --pico-modal-overlay-background-color: rgba(232, 234, 237, 0.75); - --pico-progress-background-color: #dfe3eb; - --pico-progress-color: var(--pico-primary-background); - --pico-tooltip-background-color: var(--pico-contrast-background); - --pico-tooltip-color: var(--pico-contrast-inverse); - --pico-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='rgb(76, 155, 138)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E"); - --pico-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='rgb(200, 79, 72)' 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"); - color-scheme: light; -} -[data-theme=light] input:is([type=submit], -[type=button], -[type=reset], -[type=checkbox], -[type=radio], -[type=file]), -:root:not([data-theme=dark]) input:is([type=submit], -[type=button], -[type=reset], -[type=checkbox], -[type=radio], -[type=file]) { - --pico-form-element-focus-color: var(--pico-primary-focus); -} - -@media only screen and (prefers-color-scheme: dark) { - :root:not([data-theme]) { - --pico-background-color: #13171f; - --pico-color: #c2c7d0; - --pico-text-selection-color: rgba(1, 170, 255, 0.1875); - --pico-muted-color: #7b8495; - --pico-muted-border-color: #202632; - --pico-primary: #01aaff; - --pico-primary-background: #0172ad; - --pico-primary-border: var(--pico-primary-background); - --pico-primary-underline: rgba(1, 170, 255, 0.5); - --pico-primary-hover: #79c0ff; - --pico-primary-hover-background: #017fc0; - --pico-primary-hover-border: var(--pico-primary-hover-background); - --pico-primary-hover-underline: var(--pico-primary-hover); - --pico-primary-focus: rgba(1, 170, 255, 0.375); - --pico-primary-inverse: #fff; - --pico-secondary: #969eaf; - --pico-secondary-background: #525f7a; - --pico-secondary-border: var(--pico-secondary-background); - --pico-secondary-underline: rgba(150, 158, 175, 0.5); - --pico-secondary-hover: #b3b9c5; - --pico-secondary-hover-background: #5d6b89; - --pico-secondary-hover-border: var(--pico-secondary-hover-background); - --pico-secondary-hover-underline: var(--pico-secondary-hover); - --pico-secondary-focus: rgba(144, 158, 190, 0.25); - --pico-secondary-inverse: #fff; - --pico-contrast: #dfe3eb; - --pico-contrast-background: #eff1f4; - --pico-contrast-border: var(--pico-contrast-background); - --pico-contrast-underline: rgba(223, 227, 235, 0.5); - --pico-contrast-hover: #fff; - --pico-contrast-hover-background: #fff; - --pico-contrast-hover-border: var(--pico-contrast-hover-background); - --pico-contrast-hover-underline: var(--pico-contrast-hover); - --pico-contrast-focus: rgba(207, 213, 226, 0.25); - --pico-contrast-inverse: #000; - --pico-box-shadow: 0.0145rem 0.029rem 0.174rem rgba(7, 9, 12, 0.01698), 0.0335rem 0.067rem 0.402rem rgba(7, 9, 12, 0.024), 0.0625rem 0.125rem 0.75rem rgba(7, 9, 12, 0.03), 0.1125rem 0.225rem 1.35rem rgba(7, 9, 12, 0.036), 0.2085rem 0.417rem 2.502rem rgba(7, 9, 12, 0.04302), 0.5rem 1rem 6rem rgba(7, 9, 12, 0.06), 0 0 0 0.0625rem rgba(7, 9, 12, 0.015); - --pico-h1-color: #f0f1f3; - --pico-h2-color: #e0e3e7; - --pico-h3-color: #c2c7d0; - --pico-h4-color: #b3b9c5; - --pico-h5-color: #a4acba; - --pico-h6-color: #8891a4; - --pico-mark-background-color: #014063; - --pico-mark-color: #fff; - --pico-ins-color: #62af9a; - --pico-del-color: #ce7e7b; - --pico-blockquote-border-color: var(--pico-muted-border-color); - --pico-blockquote-footer-color: var(--pico-muted-color); - --pico-button-box-shadow: 0 0 0 rgba(0, 0, 0, 0); - --pico-button-hover-box-shadow: 0 0 0 rgba(0, 0, 0, 0); - --pico-table-border-color: var(--pico-muted-border-color); - --pico-table-row-stripped-background-color: rgba(111, 120, 135, 0.0375); - --pico-code-background-color: #1a1f28; - --pico-code-color: #8891a4; - --pico-code-kbd-background-color: var(--pico-color); - --pico-code-kbd-color: var(--pico-background-color); - --pico-form-element-background-color: #1c212c; - --pico-form-element-selected-background-color: #2a3140; - --pico-form-element-border-color: #2a3140; - --pico-form-element-color: #e0e3e7; - --pico-form-element-placeholder-color: #8891a4; - --pico-form-element-active-background-color: #1a1f28; - --pico-form-element-active-border-color: var(--pico-primary-border); - --pico-form-element-focus-color: var(--pico-primary-border); - --pico-form-element-disabled-opacity: 0.5; - --pico-form-element-invalid-border-color: #964a50; - --pico-form-element-invalid-active-border-color: #b7403b; - --pico-form-element-invalid-focus-color: var(--pico-form-element-invalid-active-border-color); - --pico-form-element-valid-border-color: #2a7b6f; - --pico-form-element-valid-active-border-color: #16896a; - --pico-form-element-valid-focus-color: var(--pico-form-element-valid-active-border-color); - --pico-switch-background-color: #333c4e; - --pico-switch-checked-background-color: var(--pico-primary-background); - --pico-switch-color: #fff; - --pico-switch-thumb-box-shadow: 0 0 0 rgba(0, 0, 0, 0); - --pico-range-border-color: #202632; - --pico-range-active-border-color: #2a3140; - --pico-range-thumb-border-color: var(--pico-background-color); - --pico-range-thumb-color: var(--pico-secondary-background); - --pico-range-thumb-active-color: var(--pico-primary-background); - --pico-accordion-border-color: var(--pico-muted-border-color); - --pico-accordion-active-summary-color: var(--pico-primary-hover); - --pico-accordion-close-summary-color: var(--pico-color); - --pico-accordion-open-summary-color: var(--pico-muted-color); - --pico-card-background-color: #181c25; - --pico-card-border-color: var(--pico-card-background-color); - --pico-card-box-shadow: var(--pico-box-shadow); - --pico-card-sectioning-background-color: #1a1f28; - --pico-dropdown-background-color: #181c25; - --pico-dropdown-border-color: #202632; - --pico-dropdown-box-shadow: var(--pico-box-shadow); - --pico-dropdown-color: var(--pico-color); - --pico-dropdown-hover-background-color: #202632; - --pico-loading-spinner-opacity: 0.5; - --pico-modal-overlay-background-color: rgba(8, 9, 10, 0.75); - --pico-progress-background-color: #202632; - --pico-progress-color: var(--pico-primary-background); - --pico-tooltip-background-color: var(--pico-contrast-background); - --pico-tooltip-color: var(--pico-contrast-inverse); - --pico-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='rgb(42, 123, 111)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E"); - --pico-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='rgb(150, 74, 80)' 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"); - color-scheme: dark; - } - :root:not([data-theme]) input:is([type=submit], - [type=button], - [type=reset], - [type=checkbox], - [type=radio], - [type=file]) { - --pico-form-element-focus-color: var(--pico-primary-focus); - } - :root:not([data-theme]) details summary[role=button].contrast:not(.outline)::after { - filter: brightness(0); - } - :root:not([data-theme]) [aria-busy=true]:not(input, select, textarea).contrast:is(button, - [type=submit], - [type=button], - [type=reset], - [role=button]):not(.outline)::before { - filter: brightness(0); - } -} -/* [data-theme=dark] { - --pico-background-color: #13171f; - --pico-color: #c2c7d0; - --pico-text-selection-color: rgba(1, 170, 255, 0.1875); - --pico-muted-color: #7b8495; - --pico-muted-border-color: #202632; - --pico-primary: #01aaff; - --pico-primary-background: #0172ad; - --pico-primary-border: var(--pico-primary-background); - --pico-primary-underline: rgba(1, 170, 255, 0.5); - --pico-primary-hover: #79c0ff; - --pico-primary-hover-background: #017fc0; - --pico-primary-hover-border: var(--pico-primary-hover-background); - --pico-primary-hover-underline: var(--pico-primary-hover); - --pico-primary-focus: rgba(1, 170, 255, 0.375); - --pico-primary-inverse: #fff; - --pico-secondary: #969eaf; - --pico-secondary-background: #525f7a; - --pico-secondary-border: var(--pico-secondary-background); - --pico-secondary-underline: rgba(150, 158, 175, 0.5); - --pico-secondary-hover: #b3b9c5; - --pico-secondary-hover-background: #5d6b89; - --pico-secondary-hover-border: var(--pico-secondary-hover-background); - --pico-secondary-hover-underline: var(--pico-secondary-hover); - --pico-secondary-focus: rgba(144, 158, 190, 0.25); - --pico-secondary-inverse: #fff; - --pico-contrast: #dfe3eb; - --pico-contrast-background: #eff1f4; - --pico-contrast-border: var(--pico-contrast-background); - --pico-contrast-underline: rgba(223, 227, 235, 0.5); - --pico-contrast-hover: #fff; - --pico-contrast-hover-background: #fff; - --pico-contrast-hover-border: var(--pico-contrast-hover-background); - --pico-contrast-hover-underline: var(--pico-contrast-hover); - --pico-contrast-focus: rgba(207, 213, 226, 0.25); - --pico-contrast-inverse: #000; - --pico-box-shadow: 0.0145rem 0.029rem 0.174rem rgba(7, 9, 12, 0.01698), 0.0335rem 0.067rem 0.402rem rgba(7, 9, 12, 0.024), 0.0625rem 0.125rem 0.75rem rgba(7, 9, 12, 0.03), 0.1125rem 0.225rem 1.35rem rgba(7, 9, 12, 0.036), 0.2085rem 0.417rem 2.502rem rgba(7, 9, 12, 0.04302), 0.5rem 1rem 6rem rgba(7, 9, 12, 0.06), 0 0 0 0.0625rem rgba(7, 9, 12, 0.015); - --pico-h1-color: #f0f1f3; - --pico-h2-color: #e0e3e7; - --pico-h3-color: #c2c7d0; - --pico-h4-color: #b3b9c5; - --pico-h5-color: #a4acba; - --pico-h6-color: #8891a4; - --pico-mark-background-color: #014063; - --pico-mark-color: #fff; - --pico-ins-color: #62af9a; - --pico-del-color: #ce7e7b; - --pico-blockquote-border-color: var(--pico-muted-border-color); - --pico-blockquote-footer-color: var(--pico-muted-color); - --pico-button-box-shadow: 0 0 0 rgba(0, 0, 0, 0); - --pico-button-hover-box-shadow: 0 0 0 rgba(0, 0, 0, 0); - --pico-table-border-color: var(--pico-muted-border-color); - --pico-table-row-stripped-background-color: rgba(111, 120, 135, 0.0375); - --pico-code-background-color: #1a1f28; - --pico-code-color: #8891a4; - --pico-code-kbd-background-color: var(--pico-color); - --pico-code-kbd-color: var(--pico-background-color); - --pico-form-element-background-color: #1c212c; - --pico-form-element-selected-background-color: #2a3140; - --pico-form-element-border-color: #2a3140; - --pico-form-element-color: #e0e3e7; - --pico-form-element-placeholder-color: #8891a4; - --pico-form-element-active-background-color: #1a1f28; - --pico-form-element-active-border-color: var(--pico-primary-border); - --pico-form-element-focus-color: var(--pico-primary-border); - --pico-form-element-disabled-opacity: 0.5; - --pico-form-element-invalid-border-color: #964a50; - --pico-form-element-invalid-active-border-color: #b7403b; - --pico-form-element-invalid-focus-color: var(--pico-form-element-invalid-active-border-color); - --pico-form-element-valid-border-color: #2a7b6f; - --pico-form-element-valid-active-border-color: #16896a; - --pico-form-element-valid-focus-color: var(--pico-form-element-valid-active-border-color); - --pico-switch-background-color: #333c4e; - --pico-switch-checked-background-color: var(--pico-primary-background); - --pico-switch-color: #fff; - --pico-switch-thumb-box-shadow: 0 0 0 rgba(0, 0, 0, 0); - --pico-range-border-color: #202632; - --pico-range-active-border-color: #2a3140; - --pico-range-thumb-border-color: var(--pico-background-color); - --pico-range-thumb-color: var(--pico-secondary-background); - --pico-range-thumb-active-color: var(--pico-primary-background); - --pico-accordion-border-color: var(--pico-muted-border-color); - --pico-accordion-active-summary-color: var(--pico-primary-hover); - --pico-accordion-close-summary-color: var(--pico-color); - --pico-accordion-open-summary-color: var(--pico-muted-color); - --pico-card-background-color: #181c25; - --pico-card-border-color: var(--pico-card-background-color); - --pico-card-box-shadow: var(--pico-box-shadow); - --pico-card-sectioning-background-color: #1a1f28; - --pico-dropdown-background-color: #181c25; - --pico-dropdown-border-color: #202632; - --pico-dropdown-box-shadow: var(--pico-box-shadow); - --pico-dropdown-color: var(--pico-color); - --pico-dropdown-hover-background-color: #202632; - --pico-loading-spinner-opacity: 0.5; - --pico-modal-overlay-background-color: rgba(8, 9, 10, 0.75); - --pico-progress-background-color: #202632; - --pico-progress-color: var(--pico-primary-background); - --pico-tooltip-background-color: var(--pico-contrast-background); - --pico-tooltip-color: var(--pico-contrast-inverse); - --pico-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='rgb(42, 123, 111)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E"); - --pico-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='rgb(150, 74, 80)' 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"); - color-scheme: dark; -} */ -[data-theme=dark] input:is([type=submit], -[type=button], -[type=reset], -[type=checkbox], -[type=radio], -[type=file]) { - --pico-form-element-focus-color: var(--pico-primary-focus); -} -[data-theme=dark] details summary[role=button].contrast:not(.outline)::after { - filter: brightness(0); -} -[data-theme=dark] [aria-busy=true]:not(input, select, textarea).contrast:is(button, -[type=submit], -[type=button], -[type=reset], -[role=button]):not(.outline)::before { - filter: brightness(0); -} - -progress, -[type=checkbox], -[type=radio], -[type=range] { - accent-color: var(--pico-primary); -} - -/** - * Document - * Content-box & Responsive typography - */ -*, -*::before, -*::after { - box-sizing: border-box; - background-repeat: no-repeat; -} - -::before, -::after { - text-decoration: inherit; - vertical-align: inherit; -} - -:where(:root) { - -webkit-tap-highlight-color: transparent; - -webkit-text-size-adjust: 100%; - -moz-text-size-adjust: 100%; - text-size-adjust: 100%; - background-color: var(--pico-background-color); - color: var(--pico-color); - font-weight: var(--pico-font-weight); - font-size: var(--pico-font-size); - line-height: var(--pico-line-height); - font-family: var(--pico-font-family); - text-underline-offset: var(--pico-text-underline-offset); - text-rendering: optimizeLegibility; - overflow-wrap: break-word; - -moz-tab-size: 4; - -o-tab-size: 4; - tab-size: 4; -} - -/** - * Landmarks - */ -body { - width: 100%; - margin: 0; -} - -main { - display: block; -} - -body > header, -body > main, -body > footer { - padding-block: var(--pico-block-spacing-vertical); -} - -/** - * Section - */ -section { - margin-bottom: var(--pico-block-spacing-vertical); -} - -/** - * Container - */ -.container, -.container-fluid { - width: 100%; - margin-right: auto; - margin-left: auto; - padding-right: var(--pico-spacing); - padding-left: var(--pico-spacing); -} - - - -@media (min-width: 576px) { - .container { - max-width: 510px; - padding-right: 0; - padding-left: 0; - } -} -@media (min-width: 768px) { - .container { - max-width: 700px; - } -} -@media (min-width: 1024px) { - .container { - max-width: 950px; - } -} -@media (min-width: 1280px) { - .container { - max-width: 1200px; - } -} -@media (min-width: 1536px) { - .container { - max-width: 1450px; - } -} - -/** - * Grid - * Minimal grid system with auto-layout columns - */ -.grid { - grid-column-gap: var(--pico-grid-column-gap); - grid-row-gap: var(--pico-grid-row-gap); - display: grid; - grid-template-columns: repeat(4, 2fr); - gap: 20px; - max-width: 800px; /* Define a largura máxima do grid */ - margin: 0 auto; /* Centraliza o grid na página */ - /* grid-template-columns: 1fr; */ -} -@media (min-width: 768px) { - .grid { - grid-template-columns: repeat(auto-fit, minmax(2%, 3fr)); - } -} -.grid > * { - min-width: 0; -} - -/** - * Overflow auto - */ -.overflow-auto { - overflow: auto; -} - -/** - * Typography - */ -b, -strong { - font-weight: bolder; -} - -sub, -sup { - position: relative; - font-size: 0.75em; - line-height: 0; - vertical-align: baseline; -} - -sub { - bottom: -0.25em; -} - -sup { - top: -0.5em; -} - -address, -blockquote, -dl, -ol, -p, -pre, -table, -ul { - margin-top: 0; - margin-bottom: var(--pico-typography-spacing-vertical); - color: var(--pico-color); - font-style: normal; - font-weight: var(--pico-font-weight); -} - -h1, -h2, -h3, -h4, -h5, -h6 { - margin-top: 0; - margin-bottom: var(--pico-typography-spacing-vertical); - color: var(--pico-color); - font-weight: var(--pico-font-weight); - font-size: var(--pico-font-size); - line-height: var(--pico-line-height); - font-family: var(--pico-font-family); -} - -h1 { - --pico-color: var(--pico-h1-color); -} - -h2 { - --pico-color: var(--pico-h2-color); -} - -h3 { - --pico-color: var(--pico-h3-color); -} - -h4 { - --pico-color: var(--pico-h4-color); -} - -h5 { - --pico-color: var(--pico-h5-color); -} - -h6 { - --pico-color: var(--pico-h6-color); -} - -:where(article, address, blockquote, dl, figure, form, ol, p, pre, table, ul) ~ :is(h1, h2, h3, h4, h5, h6) { - margin-top: var(--pico-typography-spacing-top); -} - -p { - margin-bottom: var(--pico-typography-spacing-vertical); -} - -hgroup { - margin-bottom: var(--pico-typography-spacing-vertical); -} -hgroup > * { - margin-top: 0; - margin-bottom: 0; -} -hgroup > *:not(:first-child):last-child { - --pico-color: var(--pico-muted-color); - --pico-font-weight: unset; - font-size: 1rem; -} - -:where(ol, ul) li { - margin-bottom: calc(var(--pico-typography-spacing-vertical) * 0.25); -} - -:where(dl, ol, ul) :where(dl, ol, ul) { - margin: 0; - margin-top: calc(var(--pico-typography-spacing-vertical) * 0.25); -} - -ul li { - list-style: square; -} - -mark { - padding: 0.125rem 0.25rem; - background-color: var(--pico-mark-background-color); - color: var(--pico-mark-color); - vertical-align: baseline; -} - -blockquote { - display: block; - margin: var(--pico-typography-spacing-vertical) 0; - padding: var(--pico-spacing); - border-right: none; - border-left: 0.25rem solid var(--pico-blockquote-border-color); - border-inline-start: 0.25rem solid var(--pico-blockquote-border-color); - border-inline-end: none; -} -blockquote footer { - margin-top: calc(var(--pico-typography-spacing-vertical) * 0.5); - color: var(--pico-blockquote-footer-color); -} - -abbr[title] { - border-bottom: 1px dotted; - text-decoration: none; - cursor: help; -} - -ins { - color: var(--pico-ins-color); - text-decoration: none; -} - -del { - color: var(--pico-del-color); -} - -::-moz-selection { - background-color: var(--pico-text-selection-color); -} - -::selection { - background-color: var(--pico-text-selection-color); -} - -/** - * Link - */ -:where(a:not([role=button])), -[role=link] { - --pico-color: var(--pico-primary); - --pico-background-color: transparent; - --pico-underline: var(--pico-primary-underline); - outline: none; - background-color: var(--pico-background-color); - color: var(--pico-color); - -webkit-text-decoration: var(--pico-text-decoration); - text-decoration: var(--pico-text-decoration); - text-decoration-color: var(--pico-underline); - text-underline-offset: 0.125em; - transition: background-color var(--pico-transition), color var(--pico-transition), box-shadow var(--pico-transition), -webkit-text-decoration var(--pico-transition); - transition: background-color var(--pico-transition), color var(--pico-transition), text-decoration var(--pico-transition), box-shadow var(--pico-transition); - transition: background-color var(--pico-transition), color var(--pico-transition), text-decoration var(--pico-transition), box-shadow var(--pico-transition), -webkit-text-decoration var(--pico-transition); -} -:where(a:not([role=button])):is([aria-current]:not([aria-current=false]), :hover, :active, :focus), -[role=link]:is([aria-current]:not([aria-current=false]), :hover, :active, :focus) { - --pico-color: var(--pico-primary-hover); - --pico-underline: var(--pico-primary-hover-underline); - --pico-text-decoration: underline; -} -:where(a:not([role=button])):focus-visible, -[role=link]:focus-visible { - box-shadow: 0 0 0 var(--pico-outline-width) var(--pico-primary-focus); -} -:where(a:not([role=button])).secondary, -[role=link].secondary { - --pico-color: var(--pico-secondary); - --pico-underline: var(--pico-secondary-underline); -} -:where(a:not([role=button])).secondary:is([aria-current]:not([aria-current=false]), :hover, :active, :focus), -[role=link].secondary:is([aria-current]:not([aria-current=false]), :hover, :active, :focus) { - --pico-color: var(--pico-secondary-hover); - --pico-underline: var(--pico-secondary-hover-underline); -} -:where(a:not([role=button])).contrast, -[role=link].contrast { - --pico-color: var(--pico-contrast); - --pico-underline: var(--pico-contrast-underline); -} -:where(a:not([role=button])).contrast:is([aria-current]:not([aria-current=false]), :hover, :active, :focus), -[role=link].contrast:is([aria-current]:not([aria-current=false]), :hover, :active, :focus) { - --pico-color: var(--pico-contrast-hover); - --pico-underline: var(--pico-contrast-hover-underline); -} - -a[role=button] { - display: inline-block; -} - -/** - * Button - */ -button { - margin: 0; - overflow: visible; - font-family: inherit; - text-transform: none; -} - -button, -[type=submit], -[type=reset], -[type=button] { - -webkit-appearance: button; -} - -button, -[type=submit], -[type=reset], -[type=button], -[type=file]::file-selector-button, -[role=button] { - --pico-background-color: var(--pico-primary-background); - --pico-border-color: var(--pico-primary-border); - --pico-color: var(--pico-primary-inverse); - --pico-box-shadow: var(--pico-button-box-shadow, 0 0 0 rgba(0, 0, 0, 0)); - padding: var(--pico-form-element-spacing-vertical) var(--pico-form-element-spacing-horizontal); - border: var(--pico-border-width) solid var(--pico-border-color); - border-radius: var(--pico-border-radius); - outline: none; - background-color: var(--pico-background-color); - box-shadow: var(--pico-box-shadow); - color: var(--pico-color); - font-weight: var(--pico-font-weight); - font-size: 1rem; - line-height: var(--pico-line-height); - text-align: center; - text-decoration: none; - cursor: pointer; - -webkit-user-select: none; - -moz-user-select: none; - user-select: none; - transition: background-color var(--pico-transition), border-color var(--pico-transition), color var(--pico-transition), box-shadow var(--pico-transition); -} -button:is([aria-current]:not([aria-current=false])), button:is(:hover, :active, :focus), -[type=submit]:is([aria-current]:not([aria-current=false])), -[type=submit]:is(:hover, :active, :focus), -[type=reset]:is([aria-current]:not([aria-current=false])), -[type=reset]:is(:hover, :active, :focus), -[type=button]:is([aria-current]:not([aria-current=false])), -[type=button]:is(:hover, :active, :focus), -[type=file]::file-selector-button:is([aria-current]:not([aria-current=false])), -[type=file]::file-selector-button:is(:hover, :active, :focus), -[role=button]:is([aria-current]:not([aria-current=false])), -[role=button]:is(:hover, :active, :focus) { - --pico-background-color: var(--pico-primary-hover-background); - --pico-border-color: var(--pico-primary-hover-border); - --pico-box-shadow: var(--pico-button-hover-box-shadow, 0 0 0 rgba(0, 0, 0, 0)); - --pico-color: var(--pico-primary-inverse); -} -button:focus, button:is([aria-current]:not([aria-current=false])):focus, -[type=submit]:focus, -[type=submit]:is([aria-current]:not([aria-current=false])):focus, -[type=reset]:focus, -[type=reset]:is([aria-current]:not([aria-current=false])):focus, -[type=button]:focus, -[type=button]:is([aria-current]:not([aria-current=false])):focus, -[type=file]::file-selector-button:focus, -[type=file]::file-selector-button:is([aria-current]:not([aria-current=false])):focus, -[role=button]:focus, -[role=button]:is([aria-current]:not([aria-current=false])):focus { - --pico-box-shadow: var(--pico-button-hover-box-shadow, 0 0 0 rgba(0, 0, 0, 0)), 0 0 0 var(--pico-outline-width) var(--pico-primary-focus); -} - -[type=submit], -[type=reset], -[type=button] { - margin-bottom: var(--pico-spacing); -} - -:is(button, [type=submit], [type=button], [role=button]).secondary, -[type=reset], -[type=file]::file-selector-button { - --pico-background-color: var(--pico-secondary-background); - --pico-border-color: var(--pico-secondary-border); - --pico-color: var(--pico-secondary-inverse); - cursor: pointer; -} -:is(button, [type=submit], [type=button], [role=button]).secondary:is([aria-current]:not([aria-current=false]), :hover, :active, :focus), -[type=reset]:is([aria-current]:not([aria-current=false]), :hover, :active, :focus), -[type=file]::file-selector-button:is([aria-current]:not([aria-current=false]), :hover, :active, :focus) { - --pico-background-color: var(--pico-secondary-hover-background); - --pico-border-color: var(--pico-secondary-hover-border); - --pico-color: var(--pico-secondary-inverse); -} -:is(button, [type=submit], [type=button], [role=button]).secondary:focus, :is(button, [type=submit], [type=button], [role=button]).secondary:is([aria-current]:not([aria-current=false])):focus, -[type=reset]:focus, -[type=reset]:is([aria-current]:not([aria-current=false])):focus, -[type=file]::file-selector-button:focus, -[type=file]::file-selector-button:is([aria-current]:not([aria-current=false])):focus { - --pico-box-shadow: var(--pico-button-hover-box-shadow, 0 0 0 rgba(0, 0, 0, 0)), 0 0 0 var(--pico-outline-width) var(--pico-secondary-focus); -} - -:is(button, [type=submit], [type=button], [role=button]).contrast { - --pico-background-color: var(--pico-contrast-background); - --pico-border-color: var(--pico-contrast-border); - --pico-color: var(--pico-contrast-inverse); -} -:is(button, [type=submit], [type=button], [role=button]).contrast:is([aria-current]:not([aria-current=false]), :hover, :active, :focus) { - --pico-background-color: var(--pico-contrast-hover-background); - --pico-border-color: var(--pico-contrast-hover-border); - --pico-color: var(--pico-contrast-inverse); -} -:is(button, [type=submit], [type=button], [role=button]).contrast:focus, :is(button, [type=submit], [type=button], [role=button]).contrast:is([aria-current]:not([aria-current=false])):focus { - --pico-box-shadow: var(--pico-button-hover-box-shadow, 0 0 0 rgba(0, 0, 0, 0)), 0 0 0 var(--pico-outline-width) var(--pico-contrast-focus); -} - -:is(button, [type=submit], [type=button], [role=button]).outline, -[type=reset].outline { - --pico-background-color: transparent; - --pico-color: var(--pico-primary); - --pico-border-color: var(--pico-primary); -} -:is(button, [type=submit], [type=button], [role=button]).outline:is([aria-current]:not([aria-current=false]), :hover, :active, :focus), -[type=reset].outline:is([aria-current]:not([aria-current=false]), :hover, :active, :focus) { - --pico-background-color: transparent; - --pico-color: var(--pico-primary-hover); - --pico-border-color: var(--pico-primary-hover); -} - -:is(button, [type=submit], [type=button], [role=button]).outline.secondary, -[type=reset].outline { - --pico-color: var(--pico-secondary); - --pico-border-color: var(--pico-secondary); -} -:is(button, [type=submit], [type=button], [role=button]).outline.secondary:is([aria-current]:not([aria-current=false]), :hover, :active, :focus), -[type=reset].outline:is([aria-current]:not([aria-current=false]), :hover, :active, :focus) { - --pico-color: var(--pico-secondary-hover); - --pico-border-color: var(--pico-secondary-hover); -} - -:is(button, [type=submit], [type=button], [role=button]).outline.contrast { - --pico-color: var(--pico-contrast); - --pico-border-color: var(--pico-contrast); -} -:is(button, [type=submit], [type=button], [role=button]).outline.contrast:is([aria-current]:not([aria-current=false]), :hover, :active, :focus) { - --pico-color: var(--pico-contrast-hover); - --pico-border-color: var(--pico-contrast-hover); -} - -:where(button, [type=submit], [type=reset], [type=button], [role=button])[disabled], -:where(fieldset[disabled]) :is(button, [type=submit], [type=button], [type=reset], [role=button]) { - opacity: 0.5; - pointer-events: none; -} - -/** - * Table - */ -:where(table) { - width: 100%; - border-collapse: collapse; - border-spacing: 0; - text-indent: 0; -} - -th, -td { - padding: calc(var(--pico-spacing) / 2) var(--pico-spacing); - border-bottom: var(--pico-border-width) solid var(--pico-table-border-color); - background-color: var(--pico-background-color); - color: var(--pico-color); - font-weight: var(--pico-font-weight); - text-align: left; - text-align: start; -} - -tfoot th, -tfoot td { - border-top: var(--pico-border-width) solid var(--pico-table-border-color); - border-bottom: 0; -} - -table.striped tbody tr:nth-child(odd) th, -table.striped tbody tr:nth-child(odd) td { - background-color: var(--pico-table-row-stripped-background-color); -} - -/** - * Embedded content - */ -:where(audio, canvas, iframe, img, svg, video) { - vertical-align: middle; -} - -audio, -video { - display: inline-block; -} - -audio:not([controls]) { - display: none; - height: 0; -} - -:where(iframe) { - border-style: none; -} - -img { - max-width: 100%; - height: auto; - border-style: none; -} - -:where(svg:not([fill])) { - fill: currentColor; -} - -svg:not(:root) { - overflow: hidden; -} - -/** - * Code - */ -pre, -code, -kbd, -samp { - font-size: 0.875em; - font-family: var(--pico-font-family); -} - -pre code { - font-size: inherit; - font-family: inherit; -} - -pre { - -ms-overflow-style: scrollbar; - overflow: auto; -} - -pre, -code, -kbd { - border-radius: var(--pico-border-radius); - background: var(--pico-code-background-color); - color: var(--pico-code-color); - font-weight: var(--pico-font-weight); - line-height: initial; -} - -code, -kbd { - display: inline-block; - padding: 0.375rem; -} - -pre { - display: block; - margin-bottom: var(--pico-spacing); - overflow-x: auto; -} -pre > code { - display: block; - padding: var(--pico-spacing); - background: none; - line-height: var(--pico-line-height); -} - -kbd { - background-color: var(--pico-code-kbd-background-color); - color: var(--pico-code-kbd-color); - vertical-align: baseline; -} - -/** - * Figure - */ -figure { - display: block; - margin: 0; - padding: 0; -} -figure figcaption { - padding: calc(var(--pico-spacing) * 0.5) 0; - color: var(--pico-muted-color); -} - -/** - * Miscs - */ -hr { - height: 0; - margin: var(--pico-typography-spacing-vertical) 0; - border: 0; - border-top: 1px solid var(--pico-muted-border-color); - color: inherit; -} - -[hidden], -template { - display: none !important; -} - -canvas { - display: inline-block; -} - -/** - * Basics form elements - */ -input, -optgroup, -select, -textarea { - margin: 0; - font-size: 0.8rem; - line-height: var(--pico-line-height); - font-family: inherit; - letter-spacing: inherit; -} - -input { - overflow: visible; - /* max-height: 45px; */ - -} - -select { - text-transform: none; -} - -legend { - max-width: 100%; - padding: 0; - color: inherit; - white-space: normal; -} - -textarea { - overflow: auto; -} - -[type=checkbox], -[type=radio] { - padding: 0; -} - -::-webkit-inner-spin-button, -::-webkit-outer-spin-button { - height: auto; -} - -[type=search] { - -webkit-appearance: textfield; - outline-offset: -2px; -} - -[type=search]::-webkit-search-decoration { - -webkit-appearance: none; -} - -::-webkit-file-upload-button { - -webkit-appearance: button; - font: inherit; -} - -::-moz-focus-inner { - padding: 0; - border-style: none; -} - -:-moz-focusring { - outline: none; -} - -:-moz-ui-invalid { - box-shadow: none; -} - -::-ms-expand { - display: none; -} - -[type=file], -[type=range] { - padding: 0; - border-width: 0; -} - -input:not([type=checkbox], [type=radio], [type=range]) { - height: calc(1rem * var(--pico-line-height) + var(--pico-form-element-spacing-vertical) * 2 + var(--pico-border-width) * 2); -} - -fieldset { - width: 100%; - margin: 0; - margin-bottom: var(--pico-spacing); - padding: 0; - border: 0; -} - -label, -fieldset legend { - display: block; - margin-bottom: calc(var(--pico-spacing) * 0.375); - color: var(--pico-color); - font-weight: var(--pico-form-label-font-weight, var(--pico-font-weight)); -} - -fieldset legend { - margin-bottom: calc(var(--pico-spacing) * 0.5); -} - -input:not([type=checkbox], [type=radio]), -button[type=submit], -select, -textarea { - width: 100%; -} - -input:not([type=checkbox], [type=radio], [type=range], [type=file]), -select, -textarea { - -webkit-appearance: none; - -moz-appearance: none; - appearance: none; - padding: var(--pico-form-element-spacing-vertical) var(--pico-form-element-spacing-horizontal); -} - -input, -select, -textarea { - --pico-background-color: var(--pico-form-element-background-color); - --pico-border-color: var(--pico-form-element-border-color); - --pico-color: var(--pico-form-element-color); - --pico-box-shadow: none; - border: var(--pico-border-width) solid var(--pico-border-color); - border-radius: var(--pico-border-radius); - outline: none; - background-color: var(--pico-background-color); - box-shadow: var(--pico-box-shadow); - color: var(--pico-color); - font-weight: var(--pico-font-weight); - transition: background-color var(--pico-transition), border-color var(--pico-transition), color var(--pico-transition), box-shadow var(--pico-transition); -} - -input:not([type=submit], -[type=button], -[type=reset], -[type=checkbox], -[type=radio], -[readonly]):is(:active, :focus), -:where(select, textarea):not([readonly]):is(:active, :focus) { - --pico-background-color: var(--pico-form-element-active-background-color); -} - -input:not([type=submit], [type=button], [type=reset], [role=switch], [readonly]):is(:active, :focus), -:where(select, textarea):not([readonly]):is(:active, :focus) { - --pico-border-color: var(--pico-form-element-active-border-color); -} - -input:not([type=submit], -[type=button], -[type=reset], -[type=range], -[type=file], -[readonly]):focus, -:where(select, textarea):not([readonly]):focus { - --pico-box-shadow: 0 0 0 var(--pico-outline-width) var(--pico-form-element-focus-color); -} - -input:not([type=submit], [type=button], [type=reset])[disabled], -select[disabled], -textarea[disabled], -label[aria-disabled=true], -:where(fieldset[disabled]) :is(input:not([type=submit], [type=button], [type=reset]), select, textarea) { - opacity: var(--pico-form-element-disabled-opacity); - pointer-events: none; -} - -label[aria-disabled=true] input[disabled] { - opacity: 1; -} - -:where(input, select, textarea):not([type=checkbox], -[type=radio], -[type=date], -[type=datetime-local], -[type=month], -[type=time], -[type=week], -[type=range])[aria-invalid] { - padding-right: calc(var(--pico-form-element-spacing-horizontal) + 1.5rem) !important; - padding-left: var(--pico-form-element-spacing-horizontal); - padding-inline-start: var(--pico-form-element-spacing-horizontal) !important; - padding-inline-end: calc(var(--pico-form-element-spacing-horizontal) + 1.5rem) !important; - background-position: center right 0.75rem; - background-size: 1rem auto; - background-repeat: no-repeat; -} -:where(input, select, textarea):not([type=checkbox], -[type=radio], -[type=date], -[type=datetime-local], -[type=month], -[type=time], -[type=week], -[type=range])[aria-invalid=false]:not(select) { - background-image: var(--pico-icon-valid); -} -:where(input, select, textarea):not([type=checkbox], -[type=radio], -[type=date], -[type=datetime-local], -[type=month], -[type=time], -[type=week], -[type=range])[aria-invalid=true]:not(select) { - background-image: var(--pico-icon-invalid); -} -:where(input, select, textarea)[aria-invalid=false] { - --pico-border-color: var(--pico-form-element-valid-border-color); -} -:where(input, select, textarea)[aria-invalid=false]:is(:active, :focus) { - --pico-border-color: var(--pico-form-element-valid-active-border-color) !important; -} -:where(input, select, textarea)[aria-invalid=false]:is(:active, :focus):not([type=checkbox], [type=radio]) { - --pico-box-shadow: 0 0 0 var(--pico-outline-width) var(--pico-form-element-valid-focus-color) !important; -} -:where(input, select, textarea)[aria-invalid=true] { - --pico-border-color: var(--pico-form-element-invalid-border-color); -} -:where(input, select, textarea)[aria-invalid=true]:is(:active, :focus) { - --pico-border-color: var(--pico-form-element-invalid-active-border-color) !important; -} -:where(input, select, textarea)[aria-invalid=true]:is(:active, :focus):not([type=checkbox], [type=radio]) { - --pico-box-shadow: 0 0 0 var(--pico-outline-width) var(--pico-form-element-invalid-focus-color) !important; -} - -[dir=rtl] :where(input, select, textarea):not([type=checkbox], [type=radio]):is([aria-invalid], [aria-invalid=true], [aria-invalid=false]) { - background-position: center left 0.75rem; -} - -input::placeholder, -input::-webkit-input-placeholder, -textarea::placeholder, -textarea::-webkit-input-placeholder, -select:invalid { - color: var(--pico-form-element-placeholder-color); - opacity: 1; -} - -input:not([type=checkbox], [type=radio]), -select, -textarea { - margin-bottom: var(--pico-spacing); -} - -select::-ms-expand { - border: 0; - background-color: transparent; -} -select:not([multiple], [size]) { - padding-right: calc(var(--pico-form-element-spacing-horizontal) + 1.5rem); - padding-left: var(--pico-form-element-spacing-horizontal); - padding-inline-start: var(--pico-form-element-spacing-horizontal); - padding-inline-end: calc(var(--pico-form-element-spacing-horizontal) + 1.5rem); - background-image: var(--pico-icon-chevron); - background-position: center right 0.75rem; - background-size: 1rem auto; - background-repeat: no-repeat; -} -select[multiple] option:checked { - background: var(--pico-form-element-selected-background-color); - color: var(--pico-form-element-color); -} - -[dir=rtl] select:not([multiple], [size]) { - background-position: center left 0.75rem; -} - -textarea { - display: block; - resize: vertical; -} -textarea[aria-invalid] { - --pico-icon-height: calc(1rem * var(--pico-line-height) + var(--pico-form-element-spacing-vertical) * 2 + var(--pico-border-width) * 2); - background-position: top right 0.75rem !important; - background-size: 1rem var(--pico-icon-height) !important; -} - -:where(input, select, textarea, fieldset, .grid) + small { - display: block; - width: 100%; - margin-top: calc(var(--pico-spacing) * -0.75); - margin-bottom: var(--pico-spacing); - color: var(--pico-muted-color); -} -:where(input, select, textarea, fieldset, .grid)[aria-invalid=false] + small { - color: var(--pico-ins-color); -} -:where(input, select, textarea, fieldset, .grid)[aria-invalid=true] + small { - color: var(--pico-del-color); -} - -label > :where(input, select, textarea) { - margin-top: calc(var(--pico-spacing) * 0.25); -} - -/** - * Checkboxes, Radios and Switches - */ -label:has([type=checkbox], [type=radio]) { - width: -moz-fit-content; - width: fit-content; - cursor: pointer; -} - -[type=checkbox], -[type=radio] { - -webkit-appearance: none; - -moz-appearance: none; - appearance: none; - width: 1.25em; - height: 1.25em; - margin-top: -0.125em; - margin-inline-end: 0.5em; - border-width: var(--pico-border-width); - vertical-align: middle; - cursor: pointer; -} -[type=checkbox]::-ms-check, -[type=radio]::-ms-check { - display: none; -} -[type=checkbox]:checked, [type=checkbox]:checked:active, [type=checkbox]:checked:focus, -[type=radio]:checked, -[type=radio]:checked:active, -[type=radio]:checked:focus { - --pico-background-color: var(--pico-primary-background); - --pico-border-color: var(--pico-primary-border); - background-image: var(--pico-icon-checkbox); - background-position: center; - background-size: 0.75em auto; - background-repeat: no-repeat; -} -[type=checkbox] ~ label, -[type=radio] ~ label { - display: inline-block; - margin-bottom: 0; - cursor: pointer; -} -[type=checkbox] ~ label:not(:last-of-type), -[type=radio] ~ label:not(:last-of-type) { - margin-inline-end: 1em; -} - -[type=checkbox]:indeterminate { - --pico-background-color: var(--pico-primary-background); - --pico-border-color: var(--pico-primary-border); - background-image: var(--pico-icon-minus); - background-position: center; - background-size: 0.75em auto; - background-repeat: no-repeat; -} - -[type=radio] { - border-radius: 50%; -} -[type=radio]:checked, [type=radio]:checked:active, [type=radio]:checked:focus { - --pico-background-color: var(--pico-primary-inverse); - border-width: 0.35em; - background-image: none; -} - -[type=checkbox][role=switch] { - --pico-background-color: var(--pico-switch-background-color); - --pico-color: var(--pico-switch-color); - width: 2.25em; - height: 1.25em; - border: var(--pico-border-width) solid var(--pico-border-color); - border-radius: 1.25em; - background-color: var(--pico-background-color); - line-height: 1.25em; -} -[type=checkbox][role=switch]:not([aria-invalid]) { - --pico-border-color: var(--pico-switch-background-color); -} -[type=checkbox][role=switch]:before { - display: block; - aspect-ratio: 1; - height: 100%; - border-radius: 50%; - background-color: var(--pico-color); - box-shadow: var(--pico-switch-thumb-box-shadow); - content: ""; - transition: margin 0.1s ease-in-out; -} -[type=checkbox][role=switch]:focus { - --pico-background-color: var(--pico-switch-background-color); - --pico-border-color: var(--pico-switch-background-color); -} -[type=checkbox][role=switch]:checked { - --pico-background-color: var(--pico-switch-checked-background-color); - --pico-border-color: var(--pico-switch-checked-background-color); - background-image: none; -} -[type=checkbox][role=switch]:checked::before { - margin-inline-start: calc(2.25em - 1.25em); -} -[type=checkbox][role=switch][disabled] { - --pico-background-color: var(--pico-border-color); -} - -[type=checkbox][aria-invalid=false]:checked, [type=checkbox][aria-invalid=false]:checked:active, [type=checkbox][aria-invalid=false]:checked:focus, -[type=checkbox][role=switch][aria-invalid=false]:checked, -[type=checkbox][role=switch][aria-invalid=false]:checked:active, -[type=checkbox][role=switch][aria-invalid=false]:checked:focus { - --pico-background-color: var(--pico-form-element-valid-border-color); -} -[type=checkbox]:checked[aria-invalid=true], [type=checkbox]:checked:active[aria-invalid=true], [type=checkbox]:checked:focus[aria-invalid=true], -[type=checkbox][role=switch]:checked[aria-invalid=true], -[type=checkbox][role=switch]:checked:active[aria-invalid=true], -[type=checkbox][role=switch]:checked:focus[aria-invalid=true] { - --pico-background-color: var(--pico-form-element-invalid-border-color); -} - -[type=checkbox][aria-invalid=false]:checked, [type=checkbox][aria-invalid=false]:checked:active, [type=checkbox][aria-invalid=false]:checked:focus, -[type=radio][aria-invalid=false]:checked, -[type=radio][aria-invalid=false]:checked:active, -[type=radio][aria-invalid=false]:checked:focus, -[type=checkbox][role=switch][aria-invalid=false]:checked, -[type=checkbox][role=switch][aria-invalid=false]:checked:active, -[type=checkbox][role=switch][aria-invalid=false]:checked:focus { - --pico-border-color: var(--pico-form-element-valid-border-color); -} -[type=checkbox]:checked[aria-invalid=true], [type=checkbox]:checked:active[aria-invalid=true], [type=checkbox]:checked:focus[aria-invalid=true], -[type=radio]:checked[aria-invalid=true], -[type=radio]:checked:active[aria-invalid=true], -[type=radio]:checked:focus[aria-invalid=true], -[type=checkbox][role=switch]:checked[aria-invalid=true], -[type=checkbox][role=switch]:checked:active[aria-invalid=true], -[type=checkbox][role=switch]:checked:focus[aria-invalid=true] { - --pico-border-color: var(--pico-form-element-invalid-border-color); -} - -/** - * Input type color - */ -[type=color]::-webkit-color-swatch-wrapper { - padding: 0; -} -[type=color]::-moz-focus-inner { - padding: 0; -} -[type=color]::-webkit-color-swatch { - border: 0; - border-radius: calc(var(--pico-border-radius) * 0.5); -} -[type=color]::-moz-color-swatch { - border: 0; - border-radius: calc(var(--pico-border-radius) * 0.5); -} - -/** - * Input type datetime - */ -input:not([type=checkbox], [type=radio], [type=range], [type=file]):is([type=date], [type=datetime-local], [type=month], [type=time], [type=week]) { - --pico-icon-position: 0.75rem; - --pico-icon-width: 1rem; - padding-right: calc(var(--pico-icon-width) + var(--pico-icon-position)); - background-image: var(--pico-icon-date); - background-position: center right var(--pico-icon-position); - background-size: var(--pico-icon-width) auto; - background-repeat: no-repeat; -} -input:not([type=checkbox], [type=radio], [type=range], [type=file])[type=time] { - background-image: var(--pico-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(--pico-icon-width); - margin-right: calc(var(--pico-icon-width) * -1); - margin-left: var(--pico-icon-position); - opacity: 0; -} - -@-moz-document url-prefix() { - [type=date], - [type=datetime-local], - [type=month], - [type=time], - [type=week] { - padding-right: var(--pico-form-element-spacing-horizontal) !important; - background-image: none !important; - } -} -[dir=rtl] :is([type=date], [type=datetime-local], [type=month], [type=time], [type=week]) { - text-align: right; -} - -/** - * Input type file - */ -[type=file] { - --pico-color: var(--pico-muted-color); - margin-left: calc(var(--pico-outline-width) * -1); - padding: calc(var(--pico-form-element-spacing-vertical) * 0.5) 0; - padding-left: var(--pico-outline-width); - border: 0; - border-radius: 0; - background: none; -} -[type=file]::file-selector-button { - margin-right: calc(var(--pico-spacing) / 2); - padding: calc(var(--pico-form-element-spacing-vertical) * 0.5) var(--pico-form-element-spacing-horizontal); -} -[type=file]:is(:hover, :active, :focus)::file-selector-button { - --pico-background-color: var(--pico-secondary-hover-background); - --pico-border-color: var(--pico-secondary-hover-border); -} -[type=file]:focus::file-selector-button { - --pico-box-shadow: var(--pico-button-hover-box-shadow, 0 0 0 rgba(0, 0, 0, 0)), 0 0 0 var(--pico-outline-width) var(--pico-secondary-focus); -} - -/** - * Input type range - */ -[type=range] { - -webkit-appearance: none; - -moz-appearance: none; - appearance: none; - width: 100%; - height: 1.25rem; - background: none; -} -[type=range]::-webkit-slider-runnable-track { - width: 100%; - height: 0.375rem; - border-radius: var(--pico-border-radius); - background-color: var(--pico-range-border-color); - -webkit-transition: background-color var(--pico-transition), box-shadow var(--pico-transition); - transition: background-color var(--pico-transition), box-shadow var(--pico-transition); -} -[type=range]::-moz-range-track { - width: 100%; - height: 0.375rem; - border-radius: var(--pico-border-radius); - background-color: var(--pico-range-border-color); - -moz-transition: background-color var(--pico-transition), box-shadow var(--pico-transition); - transition: background-color var(--pico-transition), box-shadow var(--pico-transition); -} -[type=range]::-ms-track { - width: 100%; - height: 0.375rem; - border-radius: var(--pico-border-radius); - background-color: var(--pico-range-border-color); - -ms-transition: background-color var(--pico-transition), box-shadow var(--pico-transition); - transition: background-color var(--pico-transition), box-shadow var(--pico-transition); -} -[type=range]::-webkit-slider-thumb { - -webkit-appearance: none; - width: 1.25rem; - height: 1.25rem; - margin-top: -0.4375rem; - border: 2px solid var(--pico-range-thumb-border-color); - border-radius: 50%; - background-color: var(--pico-range-thumb-color); - cursor: pointer; - -webkit-transition: background-color var(--pico-transition), transform var(--pico-transition); - transition: background-color var(--pico-transition), transform var(--pico-transition); -} -[type=range]::-moz-range-thumb { - -webkit-appearance: none; - width: 1.25rem; - height: 1.25rem; - margin-top: -0.4375rem; - border: 2px solid var(--pico-range-thumb-border-color); - border-radius: 50%; - background-color: var(--pico-range-thumb-color); - cursor: pointer; - -moz-transition: background-color var(--pico-transition), transform var(--pico-transition); - transition: background-color var(--pico-transition), transform var(--pico-transition); -} -[type=range]::-ms-thumb { - -webkit-appearance: none; - width: 1.25rem; - height: 1.25rem; - margin-top: -0.4375rem; - border: 2px solid var(--pico-range-thumb-border-color); - border-radius: 50%; - background-color: var(--pico-range-thumb-color); - cursor: pointer; - -ms-transition: background-color var(--pico-transition), transform var(--pico-transition); - transition: background-color var(--pico-transition), transform var(--pico-transition); -} -[type=range]:active, [type=range]:focus-within { - --pico-range-border-color: var(--pico-range-active-border-color); - --pico-range-thumb-color: var(--pico-range-thumb-active-color); -} -[type=range]:active::-webkit-slider-thumb { - transform: scale(1.25); -} -[type=range]:active::-moz-range-thumb { - transform: scale(1.25); -} -[type=range]:active::-ms-thumb { - transform: scale(1.25); -} - -/** - * Input type search - */ -input:not([type=checkbox], [type=radio], [type=range], [type=file])[type=search] { - padding-inline-start: calc(var(--pico-form-element-spacing-horizontal) + 1.75rem); - background-image: var(--pico-icon-search); - background-position: center left calc(var(--pico-form-element-spacing-horizontal) + 0.125rem); - background-size: 1rem auto; - background-repeat: no-repeat; -} -input:not([type=checkbox], [type=radio], [type=range], [type=file])[type=search][aria-invalid] { - padding-inline-start: calc(var(--pico-form-element-spacing-horizontal) + 1.75rem) !important; - background-position: center left 1.125rem, center right 0.75rem; -} -input:not([type=checkbox], [type=radio], [type=range], [type=file])[type=search][aria-invalid=false] { - background-image: var(--pico-icon-search), var(--pico-icon-valid); -} -input:not([type=checkbox], [type=radio], [type=range], [type=file])[type=search][aria-invalid=true] { - background-image: var(--pico-icon-search), var(--pico-icon-invalid); -} - -[dir=rtl] :where(input):not([type=checkbox], [type=radio], [type=range], [type=file])[type=search] { - background-position: center right 1.125rem; -} -[dir=rtl] :where(input):not([type=checkbox], [type=radio], [type=range], [type=file])[type=search][aria-invalid] { - background-position: center right 1.125rem, center left 0.75rem; -} - -/** - * Accordion (
) - */ -details { - display: block; - margin-bottom: var(--pico-spacing); -} -details summary { - line-height: 1rem; - list-style-type: none; - cursor: pointer; - transition: color var(--pico-transition); -} -details summary:not([role]) { - color: var(--pico-accordion-close-summary-color); -} -details summary::-webkit-details-marker { - display: none; -} -details summary::marker { - display: none; -} -details summary::-moz-list-bullet { - list-style-type: none; -} -details summary::after { - display: block; - width: 1rem; - height: 1rem; - margin-inline-start: calc(var(--pico-spacing, 1rem) * 0.5); - float: right; - transform: rotate(-90deg); - background-image: var(--pico-icon-chevron); - background-position: right center; - background-size: 1rem auto; - background-repeat: no-repeat; - content: ""; - transition: transform var(--pico-transition); -} -details summary:focus { - outline: none; -} -details summary:focus:not([role]) { - color: var(--pico-accordion-active-summary-color); -} -details summary:focus-visible:not([role]) { - outline: var(--pico-outline-width) solid var(--pico-primary-focus); - outline-offset: calc(var(--pico-spacing, 1rem) * 0.5); - color: var(--pico-primary); -} -details summary[role=button] { - width: 100%; - text-align: left; -} -details summary[role=button]::after { - height: calc(1rem * var(--pico-line-height, 1.5)); -} -details[open] > summary { - margin-bottom: var(--pico-spacing); -} -details[open] > summary:not([role]):not(:focus) { - color: var(--pico-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; -} - - -article { - margin-bottom: var(--pico-block-spacing-vertical); - margin: 0px; - max-width: 95%; - padding: var(--pico-block-spacing-vertical) var(--pico-block-spacing-horizontal); - border-radius: var(--pico-border-radius); - background: var(--pico-card-background-color); - box-shadow: var(--pico-card-box-shadow); - transition: transform 0.2s; -} -article:hover { - /* transform: scale(1.02); */ - box-shadow: 10px 10px 20px rgba(0, 0, 0, 0.3); -} -article > header, -article > footer { - margin-right: calc(var(--pico-block-spacing-horizontal) * -1); - margin-left: calc(var(--pico-block-spacing-horizontal) * -1); - padding: calc(var(--pico-block-spacing-vertical) * 0.66) var(--pico-block-spacing-horizontal); - background-color: var(--pico-card-sectioning-background-color); -} -article > header { - margin-top: calc(var(--pico-block-spacing-vertical) * -1); - margin-bottom: var(--pico-block-spacing-vertical); - border-bottom: var(--pico-border-width) solid var(--pico-card-border-color); - border-top-right-radius: var(--pico-border-radius); - border-top-left-radius: var(--pico-border-radius); -} -article > footer { - margin-top: var(--pico-block-spacing-vertical); - margin-bottom: calc(var(--pico-block-spacing-vertical) * -1); - border-top: var(--pico-border-width) solid var(--pico-card-border-color); - border-bottom-right-radius: var(--pico-border-radius); - border-bottom-left-radius: var(--pico-border-radius); -} - -/** - * Dropdown (details.dropdown) - */ -details.dropdown { - position: relative; - border-bottom: none; -} -details.dropdown summary::after, -details.dropdown > button::after, -details.dropdown > a::after { - display: block; - width: 1rem; - height: calc(1rem * var(--pico-line-height, 1.5)); - margin-inline-start: 0.25rem; - float: right; - transform: rotate(0deg) translateX(0.2rem); - background-image: var(--pico-icon-chevron); - background-position: right center; - background-size: 1rem auto; - background-repeat: no-repeat; - content: ""; -} - -nav details.dropdown { - margin-bottom: 0; -} - -details.dropdown summary:not([role]) { - height: calc(1rem * var(--pico-line-height) + var(--pico-form-element-spacing-vertical) * 2 + var(--pico-border-width) * 2); - padding: var(--pico-form-element-spacing-vertical) var(--pico-form-element-spacing-horizontal); - border: var(--pico-border-width) solid var(--pico-form-element-border-color); - border-radius: var(--pico-border-radius); - background-color: var(--pico-form-element-background-color); - color: var(--pico-form-element-placeholder-color); - line-height: inherit; - cursor: pointer; - -webkit-user-select: none; - -moz-user-select: none; - user-select: none; - transition: background-color var(--pico-transition), border-color var(--pico-transition), color var(--pico-transition), box-shadow var(--pico-transition); -} -details.dropdown summary:not([role]):active, details.dropdown summary:not([role]):focus { - border-color: var(--pico-form-element-active-border-color); - background-color: var(--pico-form-element-active-background-color); -} -details.dropdown summary:not([role]):focus { - box-shadow: 0 0 0 var(--pico-outline-width) var(--pico-form-element-focus-color); -} -details.dropdown summary:not([role]):focus-visible { - outline: none; -} -details.dropdown summary:not([role])[aria-invalid=false] { - --pico-form-element-border-color: var(--pico-form-element-valid-border-color); - --pico-form-element-active-border-color: var(--pico-form-element-valid-focus-color); - --pico-form-element-focus-color: var(--pico-form-element-valid-focus-color); -} -details.dropdown summary:not([role])[aria-invalid=true] { - --pico-form-element-border-color: var(--pico-form-element-invalid-border-color); - --pico-form-element-active-border-color: var(--pico-form-element-invalid-focus-color); - --pico-form-element-focus-color: var(--pico-form-element-invalid-focus-color); -} - -nav details.dropdown { - display: inline; - margin: calc(var(--pico-nav-element-spacing-vertical) * -1) 0; -} -nav details.dropdown summary::after { - transform: rotate(0deg) translateX(0rem); -} -nav details.dropdown summary:not([role]) { - height: calc(1rem * var(--pico-line-height) + var(--pico-nav-link-spacing-vertical) * 2); - padding: calc(var(--pico-nav-link-spacing-vertical) - var(--pico-border-width) * 2) var(--pico-nav-link-spacing-horizontal); -} -nav details.dropdown summary:not([role]):focus-visible { - box-shadow: 0 0 0 var(--pico-outline-width) var(--pico-primary-focus); -} - -details.dropdown summary + ul { - display: flex; - z-index: 99; - position: absolute; - left: 0; - flex-direction: column; - width: 100%; - min-width: -moz-fit-content; - min-width: fit-content; - margin: 0; - margin-top: var(--pico-outline-width); - padding: 0; - border: var(--pico-border-width) solid var(--pico-dropdown-border-color); - border-radius: var(--pico-border-radius); - background-color: var(--pico-dropdown-background-color); - box-shadow: var(--pico-dropdown-box-shadow); - color: var(--pico-dropdown-color); - white-space: nowrap; - opacity: 0; - transition: opacity var(--pico-transition), transform 0s ease-in-out 1s; -} -details.dropdown summary + ul[dir=rtl] { - right: 0; - left: auto; -} -details.dropdown summary + ul li { - width: 100%; - margin-bottom: 0; - padding: calc(var(--pico-form-element-spacing-vertical) * 0.5) var(--pico-form-element-spacing-horizontal); - list-style: none; -} -details.dropdown summary + ul li:first-of-type { - margin-top: calc(var(--pico-form-element-spacing-vertical) * 0.5); -} -details.dropdown summary + ul li:last-of-type { - margin-bottom: calc(var(--pico-form-element-spacing-vertical) * 0.5); -} -details.dropdown summary + ul li a { - display: block; - margin: calc(var(--pico-form-element-spacing-vertical) * -0.5) calc(var(--pico-form-element-spacing-horizontal) * -1); - padding: calc(var(--pico-form-element-spacing-vertical) * 0.5) var(--pico-form-element-spacing-horizontal); - overflow: hidden; - border-radius: 0; - color: var(--pico-dropdown-color); - text-decoration: none; - text-overflow: ellipsis; -} -details.dropdown summary + ul li a:hover, details.dropdown summary + ul li a:focus, details.dropdown summary + ul li a:active, details.dropdown summary + ul li a:focus-visible, details.dropdown summary + ul li a[aria-current]:not([aria-current=false]) { - background-color: var(--pico-dropdown-hover-background-color); -} -details.dropdown summary + ul li label { - width: 100%; -} -details.dropdown summary + ul li:has(label):hover { - background-color: var(--pico-dropdown-hover-background-color); -} - -details.dropdown[open] summary { - margin-bottom: 0; -} - -details.dropdown[open] summary + ul { - transform: scaleY(1); - opacity: 1; - transition: opacity var(--pico-transition), transform 0s ease-in-out 0s; -} - -details.dropdown[open] summary::before { - display: block; - z-index: 1; - position: fixed; - width: 100vw; - height: 100vh; - inset: 0; - background: none; - content: ""; - cursor: default; -} - -label > details.dropdown { - margin-top: calc(var(--pico-spacing) * 0.25); -} - -/** - * Group ([role="group"], [role="search"]) - */ -[role=search], -[role=group] { - display: inline-flex; - position: relative; - width: 100%; - margin-bottom: var(--pico-spacing); - border-radius: var(--pico-border-radius); - box-shadow: var(--pico-group-box-shadow, 0 0 0 rgba(0, 0, 0, 0)); - vertical-align: middle; - transition: box-shadow var(--pico-transition); -} -[role=search] > *, -[role=search] input:not([type=checkbox], [type=radio]), -[role=search] select, -[role=group] > *, -[role=group] input:not([type=checkbox], [type=radio]), -[role=group] select { - position: relative; - flex: 1 1 auto; - margin-bottom: 0; -} -[role=search] > *:not(:first-child), -[role=search] input:not([type=checkbox], [type=radio]):not(:first-child), -[role=search] select:not(:first-child), -[role=group] > *:not(:first-child), -[role=group] input:not([type=checkbox], [type=radio]):not(:first-child), -[role=group] select:not(:first-child) { - margin-left: 0; - border-top-left-radius: 0; - border-bottom-left-radius: 0; -} -[role=search] > *:not(:last-child), -[role=search] input:not([type=checkbox], [type=radio]):not(:last-child), -[role=search] select:not(:last-child), -[role=group] > *:not(:last-child), -[role=group] input:not([type=checkbox], [type=radio]):not(:last-child), -[role=group] select:not(:last-child) { - border-top-right-radius: 0; - border-bottom-right-radius: 0; -} -[role=search] > *:focus, -[role=search] input:not([type=checkbox], [type=radio]):focus, -[role=search] select:focus, -[role=group] > *:focus, -[role=group] input:not([type=checkbox], [type=radio]):focus, -[role=group] select:focus { - z-index: 2; -} -[role=search] button:not(:first-child), -[role=search] [type=submit]:not(:first-child), -[role=search] [type=reset]:not(:first-child), -[role=search] [type=button]:not(:first-child), -[role=search] [role=button]:not(:first-child), -[role=search] input:not([type=checkbox], [type=radio]):not(:first-child), -[role=search] select:not(:first-child), -[role=group] button:not(:first-child), -[role=group] [type=submit]:not(:first-child), -[role=group] [type=reset]:not(:first-child), -[role=group] [type=button]:not(:first-child), -[role=group] [role=button]:not(:first-child), -[role=group] input:not([type=checkbox], [type=radio]):not(:first-child), -[role=group] select:not(:first-child) { - margin-left: calc(var(--pico-border-width) * -1); -} -[role=search] button, -[role=search] [type=submit], -[role=search] [type=reset], -[role=search] [type=button], -[role=search] [role=button], -[role=group] button, -[role=group] [type=submit], -[role=group] [type=reset], -[role=group] [type=button], -[role=group] [role=button] { - width: auto; -} -@supports selector(:has(*)) { - [role=search]:has(button:focus, [type=submit]:focus, [type=button]:focus, [role=button]:focus), - [role=group]:has(button:focus, [type=submit]:focus, [type=button]:focus, [role=button]:focus) { - --pico-group-box-shadow: var(--pico-group-box-shadow-focus-with-button); - } - [role=search]:has(button:focus, [type=submit]:focus, [type=button]:focus, [role=button]:focus) input:not([type=checkbox], [type=radio]), - [role=search]:has(button:focus, [type=submit]:focus, [type=button]:focus, [role=button]:focus) select, - [role=group]:has(button:focus, [type=submit]:focus, [type=button]:focus, [role=button]:focus) input:not([type=checkbox], [type=radio]), - [role=group]:has(button:focus, [type=submit]:focus, [type=button]:focus, [role=button]:focus) select { - border-color: transparent; - } - [role=search]:has(input:not([type=submit], [type=button]):focus, select:focus), - [role=group]:has(input:not([type=submit], [type=button]):focus, select:focus) { - --pico-group-box-shadow: var(--pico-group-box-shadow-focus-with-input); - } - [role=search]:has(input:not([type=submit], [type=button]):focus, select:focus) button, - [role=search]:has(input:not([type=submit], [type=button]):focus, select:focus) [type=submit], - [role=search]:has(input:not([type=submit], [type=button]):focus, select:focus) [type=button], - [role=search]:has(input:not([type=submit], [type=button]):focus, select:focus) [role=button], - [role=group]:has(input:not([type=submit], [type=button]):focus, select:focus) button, - [role=group]:has(input:not([type=submit], [type=button]):focus, select:focus) [type=submit], - [role=group]:has(input:not([type=submit], [type=button]):focus, select:focus) [type=button], - [role=group]:has(input:not([type=submit], [type=button]):focus, select:focus) [role=button] { - --pico-button-box-shadow: 0 0 0 var(--pico-border-width) var(--pico-primary-border); - --pico-button-hover-box-shadow: 0 0 0 var(--pico-border-width) var(--pico-primary-hover-border); - } - [role=search] button:focus, - [role=search] [type=submit]:focus, - [role=search] [type=reset]:focus, - [role=search] [type=button]:focus, - [role=search] [role=button]:focus, - [role=group] button:focus, - [role=group] [type=submit]:focus, - [role=group] [type=reset]:focus, - [role=group] [type=button]:focus, - [role=group] [role=button]:focus { - box-shadow: none; - } -} - -[role=search] > *:first-child { - border-top-left-radius: 5rem; - border-bottom-left-radius: 5rem; -} -[role=search] > *:last-child { - border-top-right-radius: 5rem; - border-bottom-right-radius: 5rem; -} - -/** - * Loading ([aria-busy=true]) - */ -[aria-busy=true]:not(input, select, textarea, html) { - white-space: nowrap; -} -[aria-busy=true]:not(input, select, textarea, html)::before { - display: inline-block; - width: 1em; - height: 1em; - background-image: var(--pico-icon-loading); - background-size: 1em auto; - background-repeat: no-repeat; - content: ""; - vertical-align: -0.125em; -} -[aria-busy=true]:not(input, select, textarea, html):not(:empty)::before { - margin-inline-end: calc(var(--pico-spacing) * 0.5); -} -[aria-busy=true]:not(input, select, textarea, html):empty { - text-align: center; -} - -button[aria-busy=true], -[type=submit][aria-busy=true], -[type=button][aria-busy=true], -[type=reset][aria-busy=true], -[role=button][aria-busy=true], -a[aria-busy=true] { - pointer-events: none; -} - -/** - * Modal () - */ -:root { - --pico-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: 70%; - height: inherit; - min-height: 70%; - padding: 0; - border: 0; - -webkit-backdrop-filter: var(--pico-modal-overlay-backdrop-filter); - backdrop-filter: var(--pico-modal-overlay-backdrop-filter); - background-color: var(--pico-modal-overlay-background-color); - color: var(--pico-color); -} -dialog article { - width: 100%; - max-height: calc(100vh - var(--pico-spacing) * 2); - margin: var(--pico-spacing); - overflow: auto; -} -@media (min-width: 576px) { - dialog article { - max-width: 510px; - } -} -@media (min-width: 768px) { - dialog article { - max-width: 700px; - } -} -dialog article > header > * { - margin-bottom: 0; -} -dialog article > header .close, dialog article > header :is(a, button)[rel=prev] { - margin: 0; - margin-left: var(--pico-spacing); - padding: 0; - float: right; -} -dialog article > footer { - text-align: right; -} -dialog article > footer button, -dialog article > footer [role=button] { - margin-bottom: 0; -} -dialog article > footer button:not(:first-of-type), -dialog article > footer [role=button]:not(:first-of-type) { - margin-left: calc(var(--pico-spacing) * 0.5); -} -dialog article .close, dialog article :is(a, button)[rel=prev] { - display: block; - width: 1rem; - height: 1rem; - margin-top: calc(var(--pico-spacing) * -1); - margin-bottom: var(--pico-spacing); - margin-left: auto; - border: none; - background-image: var(--pico-icon-close); - background-position: center; - background-size: auto 1rem; - background-repeat: no-repeat; - background-color: transparent; - opacity: 0.5; - transition: opacity var(--pico-transition); -} -dialog article .close:is([aria-current]:not([aria-current=false]), :hover, :active, :focus), dialog article :is(a, button)[rel=prev]:is([aria-current]:not([aria-current=false]), :hover, :active, :focus) { - opacity: 1; -} -dialog:not([open]), dialog[open=false] { - display: none; -} - -.modal-is-open { - padding-right: var(--pico-scrollbar-width, 0px); - overflow: hidden; - pointer-events: none; - touch-action: none; -} -.modal-is-open dialog { - pointer-events: auto; - touch-action: auto; -} - -:where(.modal-is-opening, .modal-is-closing) dialog, -:where(.modal-is-opening, .modal-is-closing) dialog > article { - animation-duration: 0.2s; - animation-timing-function: ease-in-out; - animation-fill-mode: both; -} -:where(.modal-is-opening, .modal-is-closing) dialog { - animation-duration: 0.8s; - animation-name: modal-overlay; -} -:where(.modal-is-opening, .modal-is-closing) dialog > article { - animation-delay: 0.2s; - animation-name: modal; -} - -.modal-is-closing dialog, -.modal-is-closing dialog > article { - animation-delay: 0s; - animation-direction: reverse; -} - -@keyframes modal-overlay { - from { - -webkit-backdrop-filter: none; - backdrop-filter: none; - background-color: transparent; - } -} -@keyframes modal { - from { - transform: translateY(-100%); - opacity: 0; - } -} -/** - * Nav - */ -:where(nav li)::before { - float: left; - content: "​"; -} - -nav, -nav ul { - display: flex; -} - -nav { - justify-content: space-between; - overflow: visible; -} -nav ol, -nav ul { - align-items: center; - margin-bottom: 0; - padding: 0; - list-style: none; -} -nav ol:first-of-type, -nav ul:first-of-type { - margin-left: calc(var(--pico-nav-element-spacing-horizontal) * -1); -} -nav ol:last-of-type, -nav ul:last-of-type { - margin-right: calc(var(--pico-nav-element-spacing-horizontal) * -1); -} -nav li { - display: inline-block; - margin: 0; - padding: var(--pico-nav-element-spacing-vertical) var(--pico-nav-element-spacing-horizontal); -} -nav li :where(a, [role=link]) { - display: inline-block; - margin: calc(var(--pico-nav-link-spacing-vertical) * -1) calc(var(--pico-nav-link-spacing-horizontal) * -1); - padding: var(--pico-nav-link-spacing-vertical) var(--pico-nav-link-spacing-horizontal); - border-radius: var(--pico-border-radius); -} -nav li :where(a, [role=link]):not(:hover) { - text-decoration: none; -} -nav li button, -nav li [role=button], -nav li [type=button], -nav li input:not([type=checkbox], [type=radio], [type=range], [type=file]), -nav li select { - height: auto; - margin-right: inherit; - margin-bottom: 0; - margin-left: inherit; - padding: calc(var(--pico-nav-link-spacing-vertical) - var(--pico-border-width) * 2) var(--pico-nav-link-spacing-horizontal); -} -nav[aria-label=breadcrumb] { - align-items: center; - justify-content: start; -} -nav[aria-label=breadcrumb] ul li:not(:first-child) { - margin-inline-start: var(--pico-nav-link-spacing-horizontal); -} -nav[aria-label=breadcrumb] ul li a { - margin: calc(var(--pico-nav-link-spacing-vertical) * -1) 0; - margin-inline-start: calc(var(--pico-nav-link-spacing-horizontal) * -1); -} -nav[aria-label=breadcrumb] ul li:not(:last-child)::after { - display: inline-block; - position: absolute; - width: calc(var(--pico-nav-link-spacing-horizontal) * 4); - margin: 0 calc(var(--pico-nav-link-spacing-horizontal) * -1); - content: var(--pico-nav-breadcrumb-divider); - color: var(--pico-muted-color); - text-align: center; - text-decoration: none; - white-space: nowrap; -} -nav[aria-label=breadcrumb] a[aria-current]:not([aria-current=false]) { - background-color: transparent; - color: inherit; - text-decoration: none; - pointer-events: none; -} - -aside nav, -aside ol, -aside ul, -aside li { - display: block; -} -aside li { - padding: calc(var(--pico-nav-element-spacing-vertical) * 0.5) var(--pico-nav-element-spacing-horizontal); -} -aside li a { - display: block; -} -aside li [role=button] { - margin: inherit; -} - -[dir=rtl] nav[aria-label=breadcrumb] ul li:not(:last-child) ::after { - content: "\\"; -} - -/** - * Progress - */ -progress { - display: inline-block; - vertical-align: baseline; -} - -progress { - -webkit-appearance: none; - -moz-appearance: none; - display: inline-block; - appearance: none; - width: 100%; - height: 0.5rem; - margin-bottom: calc(var(--pico-spacing) * 0.5); - overflow: hidden; - border: 0; - border-radius: var(--pico-border-radius); - background-color: var(--pico-progress-background-color); - color: var(--pico-progress-color); -} -progress::-webkit-progress-bar { - border-radius: var(--pico-border-radius); - background: none; -} -progress[value]::-webkit-progress-value { - background-color: var(--pico-progress-color); - -webkit-transition: inline-size var(--pico-transition); - transition: inline-size var(--pico-transition); -} -progress::-moz-progress-bar { - background-color: var(--pico-progress-color); -} -@media (prefers-reduced-motion: no-preference) { - progress:indeterminate { - background: var(--pico-progress-background-color) linear-gradient(to right, var(--pico-progress-color) 30%, var(--pico-progress-background-color) 30%) top left/150% 150% no-repeat; - animation: progress-indeterminate 1s linear infinite; - } - progress:indeterminate[value]::-webkit-progress-value { - background-color: transparent; - } - progress:indeterminate::-moz-progress-bar { - background-color: transparent; - } -} - -@media (prefers-reduced-motion: no-preference) { - [dir=rtl] progress:indeterminate { - animation-direction: reverse; - } -} - -@keyframes progress-indeterminate { - 0% { - background-position: 200% 0; - } - 100% { - background-position: -200% 0; - } -} -/** - * Tooltip ([data-tooltip]) - */ -[data-tooltip] { - position: relative; -} -[data-tooltip]:not(a, button, input) { - border-bottom: 1px dotted; - text-decoration: none; - cursor: help; -} -[data-tooltip][data-placement=top]::before, [data-tooltip][data-placement=top]::after, [data-tooltip]::before, [data-tooltip]::after { - display: block; - z-index: 99; - position: absolute; - bottom: 100%; - left: 50%; - padding: 0.25rem 0.5rem; - overflow: hidden; - transform: translate(-50%, -0.25rem); - border-radius: var(--pico-border-radius); - background: var(--pico-tooltip-background-color); - content: attr(data-tooltip); - color: var(--pico-tooltip-color); - font-style: normal; - font-weight: var(--pico-font-weight); - font-size: 0.875rem; - text-decoration: none; - text-overflow: ellipsis; - white-space: nowrap; - opacity: 0; - pointer-events: none; -} -[data-tooltip][data-placement=top]::after, [data-tooltip]::after { - padding: 0; - transform: translate(-50%, 0rem); - border-top: 0.3rem solid; - border-right: 0.3rem solid transparent; - border-left: 0.3rem solid transparent; - border-radius: 0; - background-color: transparent; - content: ""; - color: var(--pico-tooltip-background-color); -} -[data-tooltip][data-placement=bottom]::before, [data-tooltip][data-placement=bottom]::after { - top: 100%; - bottom: auto; - transform: translate(-50%, 0.25rem); -} -[data-tooltip][data-placement=bottom]:after { - transform: translate(-50%, -0.3rem); - border: 0.3rem solid transparent; - border-bottom: 0.3rem solid; -} -[data-tooltip][data-placement=left]::before, [data-tooltip][data-placement=left]::after { - top: 50%; - right: 100%; - bottom: auto; - left: auto; - transform: translate(-0.25rem, -50%); -} -[data-tooltip][data-placement=left]:after { - transform: translate(0.3rem, -50%); - border: 0.3rem solid transparent; - border-left: 0.3rem solid; -} -[data-tooltip][data-placement=right]::before, [data-tooltip][data-placement=right]::after { - top: 50%; - right: auto; - bottom: auto; - left: 100%; - transform: translate(0.25rem, -50%); -} -[data-tooltip][data-placement=right]:after { - transform: translate(-0.3rem, -50%); - border: 0.3rem solid transparent; - border-right: 0.3rem solid; -} -[data-tooltip]:focus::before, [data-tooltip]:focus::after, [data-tooltip]:hover::before, [data-tooltip]:hover::after { - opacity: 1; -} -@media (hover: hover) and (pointer: fine) { - [data-tooltip]:focus::before, [data-tooltip]:focus::after, [data-tooltip]:hover::before, [data-tooltip]:hover::after { - --pico-tooltip-slide-to: translate(-50%, -0.25rem); - transform: translate(-50%, 0.75rem); - animation-duration: 0.2s; - animation-fill-mode: forwards; - animation-name: tooltip-slide; - opacity: 0; - } - [data-tooltip]:focus::after, [data-tooltip]:hover::after { - --pico-tooltip-caret-slide-to: translate(-50%, 0rem); - transform: translate(-50%, -0.25rem); - animation-name: tooltip-caret-slide; - } - [data-tooltip][data-placement=bottom]:focus::before, [data-tooltip][data-placement=bottom]:focus::after, [data-tooltip][data-placement=bottom]:hover::before, [data-tooltip][data-placement=bottom]:hover::after { - --pico-tooltip-slide-to: translate(-50%, 0.25rem); - transform: translate(-50%, -0.75rem); - animation-name: tooltip-slide; - } - [data-tooltip][data-placement=bottom]:focus::after, [data-tooltip][data-placement=bottom]:hover::after { - --pico-tooltip-caret-slide-to: translate(-50%, -0.3rem); - transform: translate(-50%, -0.5rem); - animation-name: tooltip-caret-slide; - } - [data-tooltip][data-placement=left]:focus::before, [data-tooltip][data-placement=left]:focus::after, [data-tooltip][data-placement=left]:hover::before, [data-tooltip][data-placement=left]:hover::after { - --pico-tooltip-slide-to: translate(-0.25rem, -50%); - transform: translate(0.75rem, -50%); - animation-name: tooltip-slide; - } - [data-tooltip][data-placement=left]:focus::after, [data-tooltip][data-placement=left]:hover::after { - --pico-tooltip-caret-slide-to: translate(0.3rem, -50%); - transform: translate(0.05rem, -50%); - animation-name: tooltip-caret-slide; - } - [data-tooltip][data-placement=right]:focus::before, [data-tooltip][data-placement=right]:focus::after, [data-tooltip][data-placement=right]:hover::before, [data-tooltip][data-placement=right]:hover::after { - --pico-tooltip-slide-to: translate(0.25rem, -50%); - transform: translate(-0.75rem, -50%); - animation-name: tooltip-slide; - } - [data-tooltip][data-placement=right]:focus::after, [data-tooltip][data-placement=right]:hover::after { - --pico-tooltip-caret-slide-to: translate(-0.3rem, -50%); - transform: translate(-0.05rem, -50%); - animation-name: tooltip-caret-slide; - } -} -@keyframes tooltip-slide { - to { - transform: var(--pico-tooltip-slide-to); - opacity: 1; - } -} -@keyframes tooltip-caret-slide { - 50% { - opacity: 0; - } - to { - transform: var(--pico-tooltip-caret-slide-to); - opacity: 1; - } -} - -/** - * Accessibility & User interaction - */ -[aria-controls] { - cursor: pointer; -} - -[aria-disabled=true], -[disabled] { - cursor: not-allowed; -} - -[aria-hidden=false][hidden] { - display: initial; -} - -[aria-hidden=false][hidden]:not(:focus) { - clip: rect(0, 0, 0, 0); - position: absolute; -} - -a, -area, -button, -input, -label, -select, -summary, -textarea, -[tabindex] { - -ms-touch-action: manipulation; -} - -[dir=rtl] { - direction: rtl; -} - -/** - * 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; - animation-duration: 1ms !important; - animation-delay: -1ms !important; - animation-iteration-count: 1 !important; - scroll-behavior: auto !important; - transition-delay: 0s !important; - transition-duration: 0s !important; - } -} From f2320905774d2fc5e54da502e74d48975de47e86 Mon Sep 17 00:00:00 2001 From: Welton Moura Date: Thu, 26 Jun 2025 19:01:02 -0300 Subject: [PATCH 03/11] style: ajustes menu mobile --- gestaoRaul/db.sqlite3 | Bin 339968 -> 348160 bytes gestaoRaul/products/templates/products.html | 2 +- gestaoRaul/templates/static/base.css | 6 +++--- .../static/comandas/css/comandas.css | 1 + .../static/products/css/products.css | 17 +++++++++++++---- 5 files changed, 18 insertions(+), 8 deletions(-) diff --git a/gestaoRaul/db.sqlite3 b/gestaoRaul/db.sqlite3 index 89e3afe276ba1d50bf7dff1156871ee0de1ddd56..faf0e9f0506e2763214a05c4de31c1c13c3a8b3a 100644 GIT binary patch delta 2832 zcma)73v5%@8TNhnb#l-Boi?FB0+=jAfQY#d`}zS0l7RD$^CqN&#BrR&jvtBbICexE z%A$@|9fi5Ar>g6+t^-gR!V9TI=HbOKZHzW>v zeT%bVAYk=WZS8iI^*ZZ(6+OY;t@dpj1WvG&a8ijN8F`zMl^0BsXcw$}pF83S2U8ou zOJNDAWEFJ<4`IDtT$Bn2^UDH!q^Bl6>aoNUHjk~^XKiY#sB0)LZ#37~c}qu`-&5Hg zb~Ssto4ro6*ikVoh(cv>sJ1p1sUHYd^q1D9ejU!U^m!xRP|Vxx3&h>CweTgpXcXi^ z%npmK+#LyoqX;gmXgIBcKf`JG2yRa14jzLwIaC4hwL6KZMMTsc>WR2%`Jj;eRTlZr z*|(r3Z;ly^Xtn+eRnD!P$MI7s!$hG5*;%9hiu?HAz^8Cl_IMc#TAENC^s_6aOP^g!NV3NV zD)=Y-9X^9U!k2Q659DkYWsjc&qo!mBeb(wS7dH~C3^M$T0>2G6;4gCM58)DAfHN}u z@GP9p!YN(mLMO4ZfhFbU5O7=RQ7hb@%$=GBZHt=HlSJ;(DT3yx)o41cy+PD#SLIaZ zAT%xCji*t1)m;L{=G+aD=giehsZwHgaI7UfXOy?)k0_X|Hj70xSIyg2W?V*yCdp#8 zNSt%tw(QD@4vsSkqFFMFm2z%d&$Zt=&bo>zBb|$Oi*ll|2rzO2|!_hNsCR=ZNKLbr-cvr*UdFYHS)lT{uBF zGCR7cKM|RlZYoL;@ytmN6(<+cWUhvi2Zl7vE-<^WnYvyobBE%nlC-vq-lo&G>z+V1 zs${a!@GdEE>yWBcwM3;?t2o&HWQ{iOr(svKo#$;4TBvyJnI-Qlcbub+PL zSt<`b{H#{JT${5aM~4ohOzyYHYI?HEa8;exGM=kfK>_hFp)VD_rmpnzC{?g-&>fAA zgd;sg+aGykJ3Z%w<_s*)abokhL5{E}8$q1qw*M;tXE8~3yI{99kHb9!tZ$8aBO!Ot zd(R3uhiEa$2W7YNJI2}UJA~)I1Fb|z!$E3s-v8u;bMT_v3c(@>nUgu{EqR3uxmm^R z&k3LkeUbKG>_vQ3bAjHgo}_%_W_eVK$(6f{s?~MhZ7#hZ4X5^}4v!7D4sZ23%BrH_ zV10Rqy(S*0sTJ+z6#-X?yUCdxZ5?n`N4tH2YOCb5S9I9I-=vEFs;t5!yNjx_dGE*U zCU143&0iOFjrdAaKS~`?Y7i<@SoYW?#qFn%1)ZNOLq+ z)+E-~3=hRx%-^hGE?w;|a%O9|pK#oxhDcw+QED6Ix@+QX{{DfMzTtM!+UxXnH%40; zHoHb$-nPz8uaFc62HFIvbWRO(Moi(v-9?qz8s_TKy<};A4K>59v4I+gE!fXhcl1P? z8fs%LomQ!&feW;4<*m)tw#K^t^2QOacc5B~mX{@>b847JyqOCt)GPH`S;q+jGG?@I z5Ct?%uc24SBQm4T7>^TI)MLu7BK5Ks-h|KL8eEmt@I0J@_uw5_;f}#!cnuD~1UwJV zz+Tt`yJ089VG#V#13RD{nxGb(un8Ps1{17=A}E9fGCLxfgTG?`!Ty!K&VI&TVSmql z#GYkOvv0G%Vvn+Ku&=T&voEsvhwKm7r`X5YUF;|uOYh+*(-{5~U&0sghxiOWg{Saw zd<4Ia58;>a3-~#_4?l^=@uN6_BRGJ2aTo5uEw~<6;xfD*OPIr}aWP(s7vcvngEd&i z%rG~Z&zWn?Rpw*nJadkDk9mhV!5m`_Gp{iRm}2B1AhX2J^e{V^ zcBYA`Wt_|=#=)2w6SI;jVhWiB=@pH1xa<^~LdVe&^g23(UP3RR=g>a%BpOGLq6CVd z0P00ur~|d2dQ^$Z(0U{x4y{JTXenBV9zYDzAX$v>XcsDSP3C5;A!{LP*^F?6xTgLO D;jad1 delta 1415 zcmah{Z)_8F7{1^A+4T?YuOMSi{uLNx;M(2q+TOKQGDh36cC2eRHnv6W?z**WxAnSq z>(+*30}aMR!P1cXV4^e8Eb$wu;nXi91mY)%CTM1+fMSe_A0Q5lL!DO^qCpdq%kRVc zJomoO`@GNWT=neDjc;zI4qzD8RWvt&1Lp>|TY;f8Ypt%LpV>sXK=|=O~-c-2JHC$W=&0v zL8G%jV|D(V=sPNAqM7LX<^n!@Ima@m{fQ z{AlQiuSEzvD+L|HuHZ<>-#Hi_>i71BeYW_B?{PWmG`p4O8N@rHLS|IT{+}MZ+u`)6 z=msgPtC$L}Velt-173s6<@FaXL9>pi1z90Am=Q=VQ3D<>MpTMxJ@NALjLE#NUgyH} z_w*+Xuj^bT_znCL{sO;;SJkCHf~DYJRr0k)z^H^J z4E_OsgFnD;;a#=Il1jJ?m8B-I*QBD074$y51AkV3z77{v^deLiBcMJ+tA61Il2vGi z+DyuK{8Y8FH9*~>la25W#CnPzZK@iF+at{BoNuIKOz1jK4F zt+rO}V7DOFf@DpTssz4|QJ6B-guh|l)?i#E9`5_2>ehAm6}$-R;8V~DwU9KfD*FcT zj}4V}x5jV{kncT@Z&X%OI0c9XxLc;vcn>iTPpJl9Hp;ta@EdBmPNrw^Uhth-ykwM3 zr*TpyB)nSLe;WVvGq6>r28iuSgZkifOI1^qvkEBzk(dDBjIt0Va=3i#C31@rjuGYG zi3TDf(*tB*Ic!?Rl}MDlkJGXEaOIO>?m&1;yuSmcyf<0KA99l}ttXi+{HCJO*K zibbTvlH}WG36p-|EKTiDjh6Mwf}Zkid|F4I!qye_qq;-do%El^CByluMXF4mQb%RT z`V%|7RQtdE z=;istow_r+(XrC{|4Nys{jB1 diff --git a/gestaoRaul/products/templates/products.html b/gestaoRaul/products/templates/products.html index 396e443..c15ba14 100644 --- a/gestaoRaul/products/templates/products.html +++ b/gestaoRaul/products/templates/products.html @@ -37,7 +37,7 @@ Produtos R$ {{product.price}} {{product.quantity}} {{product.category.name}} - +
Date: Fri, 27 Jun 2025 10:40:27 -0300 Subject: [PATCH 04/11] style: size navbar desktop --- gestaoRaul/db.sqlite3 | Bin 348160 -> 348160 bytes .../__pycache__/settings.cpython-312.pyc | Bin 4405 -> 4405 bytes gestaoRaul/home/templates/home.html | 3 + gestaoRaul/templates/base.html | 94 +++++++++--------- gestaoRaul/templates/static/base.css | 21 +++- gestaoRaul/templates/static/home/css/home.css | 2 +- 6 files changed, 69 insertions(+), 51 deletions(-) diff --git a/gestaoRaul/db.sqlite3 b/gestaoRaul/db.sqlite3 index faf0e9f0506e2763214a05c4de31c1c13c3a8b3a..70969da9cdf62a8ebe11ca28a1bcbabb7fe7caab 100644 GIT binary patch delta 262 zcmZozAlk4%bb>Tv(nJ|&#-xo2`Ff0X%@_3AFX%CDzo5rtIFXH~jbS?X_37*fnEtWX z^HlJx1af!|GHEm3+ir1?X+9S_8#5!50c+j#d#9OJurn|)fbjO-Gfbt-tad=HozvMb zFg0^=U*X=$J)e69kU!-D(_+R6+bu3K1wwR-19eZh&9si4rw**U-SrL=5HoLgy~DCc zn2qfUgDdN~>Fgg^!lx&EU@>B0J;!=(`;-qXR;(IIU3F{>jtq>9Mg~Tvx&~&tM&=5J z##V-=Rz~J}7M7;w#uf(R%3Zb79lx=NOqY{kWuGqijpZ;4(2c4SCn|3L`Hh7=5&$4C BP|E-S delta 293 zcmZozAlk4%bb>Tv!bBNo#)ORt`Ff1C%@_3AFX%CDzo5rtIFXHkfnhrLz3J=+nEtW1 z@znEF@T{E9bC5}!@%na)gG}?e*ntYzRanKR-#g8;f}M?-k;#BHX?yP(rc!3sI-u4G z)7dXDHFNRUabMxy$~~WZ#`Gx{m=-f0*=})>DUgeunN^lgmw|oygxgH(z`Dg*liFSH zFaa_1cGo*BdxSwQaAo~Go&5t#I1}5I>2V)ejF_0Jwom!MV#TT<&c?ZeVG4sI10$o6 zfsv`MfiVy%7#Ufa8d@2f>seTu8kiU>chydJ{Kg_OT~3CTeY)T`mcyz_T}f<6x=eHp eEENn*t&B{q3@!CcjSb8!Obx`h|NO?n9ti-C4OCA6 diff --git a/gestaoRaul/gestaoRaul/__pycache__/settings.cpython-312.pyc b/gestaoRaul/gestaoRaul/__pycache__/settings.cpython-312.pyc index 694a69b6b2da002da3d36727d5fde7637444b59d..0ea64b8859ac840bd7a294afd797e5bcea169ee2 100644 GIT binary patch delta 20 acmdn0v{i}wG%qg~0}zByirdJoB?tgH69ne~ delta 20 acmdn0v{i}wG%qg~0}!yq$8O}-5(EG>r37LC diff --git a/gestaoRaul/home/templates/home.html b/gestaoRaul/home/templates/home.html index ad4948b..3a578b1 100644 --- a/gestaoRaul/home/templates/home.html +++ b/gestaoRaul/home/templates/home.html @@ -35,6 +35,7 @@ RRB&C - DashBoard
+

Ticket médio

@@ -42,10 +43,12 @@ RRB&C - DashBoard
+

Mais vendidos

+

Tempo médio na cozinha

diff --git a/gestaoRaul/templates/base.html b/gestaoRaul/templates/base.html index 2080a6b..ee58c79 100644 --- a/gestaoRaul/templates/base.html +++ b/gestaoRaul/templates/base.html @@ -11,10 +11,7 @@ {% load pwa %} {% progressive_web_app_meta %} - + {% block 'head' %} @@ -22,12 +19,13 @@ {% block 'title' %}{% endblock %} -
-
+ +
+
-
+
+
- - -
+ +
+ {% if user|groupUser:"Gerente" %} + DashBoard + Produtos + {% endif %} + Comandas + Cozinha + Mapa + Clientes + {% if user|groupUser:"Admin" %} + Admin + {% endif %} + +
+ +
-
+
- + {% block 'body' %} {% endblock %} @@ -127,7 +125,7 @@

- + diff --git a/gestaoRaul/templates/static/base.css b/gestaoRaul/templates/static/base.css index 8b1ee66..55ad690 100644 --- a/gestaoRaul/templates/static/base.css +++ b/gestaoRaul/templates/static/base.css @@ -58,7 +58,7 @@ body { - margin: 70px 0px 0px 0px; + margin-top: 70px; } h1{ @@ -172,6 +172,9 @@ input, textarea, select { position: fixed; top: 0; min-width: 100%; + height: 60px; + align-items: center; + align-content: center; z-index: 100; } @@ -179,6 +182,7 @@ input, textarea, select { display: flex; justify-content: space-between; padding: 0.1rem 1rem; + align-self: center; } @@ -186,6 +190,7 @@ input, textarea, select { display: flex; margin-top: 5px; align-items: center; + height: 60px; } @@ -217,9 +222,18 @@ input, textarea, select { grid-template-columns: repeat(2, 0.5fr); border: none; border-radius: 5px; - margin-top: 10px; + margin-top: 0px; + height: 60px; + width: 180px; gap: 10px;} +#user-info { +width: 120px; +overflow: hidden; +text-overflow: ellipsis; +white-space: nowrap; +} + .logout-button button a { text-decoration: none; color: #fff; @@ -413,6 +427,9 @@ input, textarea, select { .nav-bar { display:none; } + header .p-header { + display: none; + } body { margin: 8px 0px 0px 0px; diff --git a/gestaoRaul/templates/static/home/css/home.css b/gestaoRaul/templates/static/home/css/home.css index 6c479a0..0b68d87 100644 --- a/gestaoRaul/templates/static/home/css/home.css +++ b/gestaoRaul/templates/static/home/css/home.css @@ -7,7 +7,7 @@ grid-template-columns: repeat(3, 2fr); gap: 30px; max-width: 1200px; - margin: 0px 0px 20px 0px; + margin: 0px 0px 30px 0px; padding: 10px; } From c8c3653bf8998c7048eeaa9be49b512229c5e346 Mon Sep 17 00:00:00 2001 From: Welton Moura Date: Fri, 27 Jun 2025 17:14:08 -0300 Subject: [PATCH 05/11] =?UTF-8?q?feat:=20abre=20modal=20de=20informa=C3=A7?= =?UTF-8?q?=C3=B5es=20do=20status=20da=20order=20ao=20clicar=20sobre=20o?= =?UTF-8?q?=20nome=20do=20product=20na=20viewcomanda?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../comandas/templates/viewcomanda.html | 29 ++++++------ .../custom_filter_tag.cpython-312.pyc | Bin 3737 -> 3707 bytes .../templatetags/custom_filter_tag.py | 2 +- gestaoRaul/db.sqlite3 | Bin 348160 -> 348160 bytes .../orders/__pycache__/models.cpython-312.pyc | Bin 1697 -> 2142 bytes gestaoRaul/orders/models.py | 13 +++++- gestaoRaul/orders/templates/orders.html | 2 +- .../htmx_list_products_in_comanda.html | 5 +-- gestaoRaul/templates/static/base.css | 2 +- gestaoRaul/templates/static/base.js | 16 ++++--- .../static/comandas/js/viewcomanda.js | 42 +++++++++--------- .../templates/static/orders/css/orders.css | 11 +++++ 12 files changed, 72 insertions(+), 50 deletions(-) diff --git a/gestaoRaul/comandas/templates/viewcomanda.html b/gestaoRaul/comandas/templates/viewcomanda.html index ad3e629..c1a1961 100644 --- a/gestaoRaul/comandas/templates/viewcomanda.html +++ b/gestaoRaul/comandas/templates/viewcomanda.html @@ -94,23 +94,24 @@ Detalhes {{comanda.name}} - {{item.product.name}} + + {{item.product.name}} {% if item.product.cuisine == True %} - + - - + onclick="openModalObs({{item.id}})" + src="{% static 'midia/icons/note.svg' %}" + style="width: 25px; height: 35px; cursor: pointer;"> + + - - + + {% endif %} @@ -129,7 +130,7 @@ Detalhes {{comanda.name}} {% endif %} - + {% endfor %} {% if config.taxa %} @@ -155,7 +156,7 @@ Detalhes {{comanda.name}} - + {% if config.taxa %} Total R$ {{valores.totalComTaxa}} diff --git a/gestaoRaul/comandas/templatetags/__pycache__/custom_filter_tag.cpython-312.pyc b/gestaoRaul/comandas/templatetags/__pycache__/custom_filter_tag.cpython-312.pyc index 0fdae451f8dfdbda45feba1746471f61e26692b6..ae3a7a4e9026da1ee5b1e0b819a625a58c534067 100644 GIT binary patch delta 103 zcmbO!`&)+hG%qg~0}w=QkIQ(pk#`0+=->JpW?BX>EQYCfr*h-=qA75uVNmcT$3ZCBMZYp7A8lI$y&U77~Lm7=iLMVc{dvm delta 134 zcmew@GgFrLG%qg~0}yOc{+j-5Bkv4u##NJ-ad(Pjaezco!DM|NJt@{AcA#jH7>E!D z5v)Ms7IS`5@#G>NJ4WBh8+q&%`zt#uFK|fw_`t--Ds+=y@K-SpP*sy7w<90JK|Ur& Qp~*bFdl)??pXA*H00@5|M*si- diff --git a/gestaoRaul/comandas/templatetags/custom_filter_tag.py b/gestaoRaul/comandas/templatetags/custom_filter_tag.py index 2f29302..82eccfb 100644 --- a/gestaoRaul/comandas/templatetags/custom_filter_tag.py +++ b/gestaoRaul/comandas/templatetags/custom_filter_tag.py @@ -62,7 +62,7 @@ def obsOrder(id): try: productComanda_obj = ProductComanda.objects.get(pk=id) order = Order.objects.get(productComanda=productComanda_obj) - return order.obs + return order except: return '' diff --git a/gestaoRaul/db.sqlite3 b/gestaoRaul/db.sqlite3 index 70969da9cdf62a8ebe11ca28a1bcbabb7fe7caab..f91d0895857d8540f497a09f8813516b22fde216 100644 GIT binary patch delta 3220 zcmai03v3j}8J?ZpxyP>W&OjWSnA*k$5(9Va`xTM)jBSjc7&~?$O>Cciw$Jw6nKS2C zm7LEehSVg5xXB{55~iw9iqxvTwcvWvOx=&HZ5_`2>HCv)=OMCO~rlF3Btvt(1 zepdGLN*O2WET{8wKoBHJVteD$k=S6*SUi*nm&M}IaF)vXd9{q=bwSZxg51^<>r3=x zZbev`E%k=eZTJ@@)`WD}wB!dOy@jfbV!v^LHUt0R4hfl*Bx z2!}>xO_*v}{KpTQ*K)%=7f%k2a_q!#JR}SZP4)IB`N4_MWO8yZmk2e^J#o@};v{jR zhTKG-F`U*B*x#N*q|`CFYpvd=28tI>8)c-p`w7&N4q@e#`udImNtU*1Zlp z=~@R#Km{Gh!n_3|H4Vd|N~#&^!b5y-T@cn(TTnwetuG7+YS*=^RHgOF~vmKUM}P7*>w zM)NjSq5aD^w~VvPm|n)2WlUw4+YuF_gTOd?9-gp6Dnw74HGhDwt|Du_qd4Diniw@_ zuEW239Eb!EoHWP(1D_+XRer%qE` z!iN@U-~$U(aKYU0F!?@(y=F}3*T_`_q%+0?L2@LIzDS>^e@DMfzd@hEzDwPz6%ZkV zD>hbT1174#rRC>~%V-}TzqjSUc)`3@Pp&Q?Dh$+3K1ew>Ix5V~-DD{=TS8= zd&xmaQ*f0P69reATtE5l#}MAaT}M6UfVXIs^k-W0pNDQvqd^dS1rSEh098<+1{6`2 zc`X>*_r@!+NF288tZ6p=y;K;1C&lsGzU1`dVcd4gVgo|PON(~bqpG=>(qgQ zchE~{7JUQBD4+U^<6Y|4)G_og^9R?dPsmjHg42OFBZ%BS#Z9W|92ejeUeP3_uwubs zli*z>RcFP3BJez~DTG|HK;6r-2eYIGG?5cIRwt?|7RVe{DtCTk8pnw&E7&xcL%V~e z1b9gm@W{8E5&w@RW0ofKoXrAX$YOOIQa})SUJy0x>|3dOX#$>CIxhtTNyLX#i7Mlr zo7DOZ3P zJd8&Os`mXCLGojG82+1jiTWn_Ra~bsOoh`S1{4Q_K>!E{hqJ%jD6+}NnNSr?;qS8W z_(}@M`1n}=oSR(JB@ycwU~yisL_`%zSEqX!;IX!`_PI??eSYstxFQrzP{i9NY_a`t zT0oLzR|NiIW9QBYLXP%*J%sI+hhut~|HZv6@d5RI6Xm{*CFrFClZhqAI*ao^w;ckB3TS zYBJqzD~EG%*A}(m=SuryWIJi_q^w4j^CpU z8G+SADfJv){MkdZy-+O^@{ba{b^;pZq zP_VTs+!fhAGCbKiuEyo|X!X9(zOXn^H8olt8QqZ-TZTL8gMK~~4Yef(ll$7(zR_5F zw7H{ppgp05;_d24V^4KgQxzYZ-nBCo+A~teCX$hAEy0C)6I01SB`L6VwO>#8xgE8U zrs?{q*xAyxdvIVd7;Nb5jkMRu4XhZc^|wUgJL|%6wSQnBx^pNJW`hI5XjibRVP{L7 zs&mN>tuLwfRZn9j9_{D5dUsFm(OUORXk6EJH6jWPo!c5Frq*wZiOCM7#^2w(T-8~v x>^Wh7y<1k)FULZlnQl_%nw8ZZ=_ksRQ3>{n?R+>Gxjipg99 zCCppH;w7OWt~hE0+i)r^P{YL`bDAKSEp8#UYo|RD>E7(Gt9oT`G+NQuRMpYe6^&Gu z?Q$yXI=bt3ukEa=+uT{Qv3c#5>K%>!ALY$@-!jMYLd#u>zt0~MjwYSu4q7Y3^Fpie4c{mpw{~&w3Xl02 z;hZ&>3&f?-Q;x;neDr@OPaPwDnXl}LMkm)hUn9B7JmM|b->{AzC`T7Gcb z8M5sR7%xMG+$?72KsCF9ui!auR?pRO4qurE0)99TRxXtnK1vCyZprKMdAxFYCJF)k zaXynyS{{S9wwtVXC|T5uzf*QNu7UnlzW9x)f|X4qYU5C%i4A zGU^Y^j>4m{^|tNEH@pJRjllwvJqCZsG$kFPF#j!KFGC3=-{5cXGyE6)C;TP;JpVpF z&c976CgF=*xt<`_$z&PGH1Ldp3*Wa|U)|^Hu0cKEa>hKmGSZDy~AvRdb?7+1DV8sEIC$MU2xxu7Ml_ z*#;a2vJ7MMP9_GP?$) z*+DjD!l;1AVUz_?p(&SCH=$hs^pS}OYJ<3Y8!Zw~3z~TZkxQ>KdaKENg!3a;yw3I+ zB(4bUpdqJ_npQdpU{L@oEp#&OYNaj7e#xhKy=tJx7&WzJ)#PFuz4|a~x<-{T(*T?2 z=)?Bkm}zDjZh|u8!7pGEoB~m>p1dyb6hnS$kebc!fzK~F&PsIuSdb8h%Y z^Gbe?B6~Dv;Hl;gYJN$U-I`B+YRk*+pc0VWs&0%Y@6qX^tOVVfq_|bT`t$(%Vs)W^ zD3a`zHIM2{v0T7o_vmCz4QlS7?3MyQ2-dt$L*5c4pleS_sNo)2t{$? z>HBmZ%6)YZhaS*NtePBD+>-3`27Iayl;E@n^rb|*$&1z5vdNE0*+Ar>;2 z9K9e&Q3mrh%1DBxRMH6F$*s2JuusJ6!bhg>=wnPAwZl@~l@pTE9A+KNFK4O_ZV3Hf z>%t?s%=yZm*1f@ye?V?p+gHD%tz%=8f{{*s047eH9-=sOJ~&9-7d^-BakW{ zJRld+^uU3bz)1`jyy?lSi7_dO31kz04tnrnG-|v$Z?_nXaSq>n?|pA(-g`5%9Ddi@ z{3;v{B0fHRxpwQGSZ&^g$Ew}kofr{BL|r!gqkcmfRWK6JSwy4*y~@|eTcXyyct`+k&r7ZAaBaRn8()NL~ph~R3%Hm66s5f^=~DE=dYCc2tj zi}+%a#J5*~#pMcKPs)DaD8X$(5xNE2mRru<4oi|RKV*|Ige zY*~<2qPFI{IEA`l{Z5z^QpPiW~^(rANZ-cQ=73p9(Vom+5QhZ+7^1N zz4gf6rM*kp$0N%lO9Ly~n!GZ(Ht{U_BK|zSaeQd~_)z`W@Jp?(W;fK_x|-Wi$+}85 z)WW)2s9z}7i?`qCcMjJlE58t$!hOOwZ~BT*T2O`W2pRaIz%3nLf~hqF7{~~geZBfl&3l+EY8g*D8>??bpiyoK&kDQUe5%ijNqvt3@1ZQfE2aT zO|yrLF?irkv|*R+f^PMAzsK^ftEEwg)#Lp!uaK6;_5Sg?wYV*ihTt!HIUImQ&L;pN zF-JMcH!15h#SU>3{+hLq!&e{1_$}&qiw=H5``)7?KjbLR2($h3gAWIPBH(WRzX8=? B5pe(j delta 647 zcmca7u#lJUG%qg~0}yOc{+jN|Jdsa=F>Io`x=1ct6dNN06N5WL3QG$^3TrB37T?4? zX%UV}Hcj@IAPt&~x7c#?Q&Mw^H?9$5;^zbjG2LQK%1O-2F5;Sekx5JqWN;BTkVs|( z5-`99WH1Bq=L{e*ogrm1KeKrKY=#u38ip(;m?8uXlwk(SupmTWtSpd8Xka$OT()2a zO%}f@_JGus%#?hEDjo%0g@B^`l+u!XD+tdyKQ}QiCDBSjljRmuX38zDOpTQI0+5pA z5+ElfJ{h9m7E4}YZYt2DEXAogX~iH4 oD*%ZP%#4hTcNt`!GAQ3?F#f{E!GPEV#0HxH0DF&{jQ{`u diff --git a/gestaoRaul/orders/models.py b/gestaoRaul/orders/models.py index 46c008b..6744de9 100644 --- a/gestaoRaul/orders/models.py +++ b/gestaoRaul/orders/models.py @@ -1,5 +1,6 @@ from django.db import models - +from django.utils.formats import date_format + from products.models import Product from comandas.models import Comanda, ProductComanda @@ -16,4 +17,12 @@ class Order(models.Model): canceled = models.DateTimeField(null=True, blank=True) def __str__(self): - return f"Pedido {self.id} - Produto: {self.id_product} - Comanda: {self.id_comanda.name}" \ No newline at end of file + status = 'Em espera' + if self.preparing: + status = 'Preparando' + if self.finished: + status = 'Pronto' + if self.delivered: + status = 'Entregue' + + return f"{self.id_product}| {self.obs}|{status}|{self.id_comanda.name}|{self.id_comanda.mesa.name}|{date_format(self.queue, 'd/m/Y H:i')}" \ No newline at end of file diff --git a/gestaoRaul/orders/templates/orders.html b/gestaoRaul/orders/templates/orders.html index 379c914..775d088 100644 --- a/gestaoRaul/orders/templates/orders.html +++ b/gestaoRaul/orders/templates/orders.html @@ -23,7 +23,7 @@ {% block 'body' %}
-

Pedidos cozinha

+

Pedidos cozinha

{% csrf_token %}
diff --git a/gestaoRaul/templates/htmx_components/comandas/htmx_list_products_in_comanda.html b/gestaoRaul/templates/htmx_components/comandas/htmx_list_products_in_comanda.html index 1415b62..4ed56e1 100644 --- a/gestaoRaul/templates/htmx_components/comandas/htmx_list_products_in_comanda.html +++ b/gestaoRaul/templates/htmx_components/comandas/htmx_list_products_in_comanda.html @@ -11,17 +11,16 @@ - {{item.product.name}} + + {{item.product.name}} {% if item.product.cuisine == True %} - - td, th { - border-collapse: collapse; - padding-top: 20px; - margin: 20px; + padding-top: 10px; + margin: 10px; text-align: center; font-size: 20px;} - ${item} - ${obs} - ${cliente}${local} - ${dateString} + ${order[0]} + ${order[1]} + ${order[3]} - ${order[4]} + ${order[5]} `; var printWindow = window.open('', '_blank'); @@ -254,11 +246,11 @@ function troco(){ function addOrder(){ - obs = document.getElementById('obs') - + var obs = document.getElementById('obs') id = document.getElementById('id-temp').value var obsPrint = document.getElementById(id+'-obsOrder') - tooltipObs = document.getElementById('tooltip-id-'+id) + var order = obsPrint.value.split('|'); + var newOrder = ''; fetch(`/comandas/editOrders/${id}/${obs.value}`, { method: 'POST', @@ -270,9 +262,12 @@ function addOrder(){ .then(data => { if(data.status == 'ok'){ showToast('✅Pedido atualizado com sucesso!😁','success') - tooltipObs.dataset.tooltip = data.obs obs.value = '' - obsPrint.value = data.obs + order[1] = data.obs; + for(var i = 0; i < order.length; i++){ + newOrder += order[i] + '|'; + } + obsPrint.value = newOrder; document.getElementById('modal-obs').style.display = 'none'; } @@ -338,3 +333,8 @@ function taxa(){ } +function inforOrders(id){ + var order = document.getElementById(id+'-obsOrder').value.split('|'); + + feedback(order[2], "", order[1]+' - '+order[5]); +} \ No newline at end of file diff --git a/gestaoRaul/templates/static/orders/css/orders.css b/gestaoRaul/templates/static/orders/css/orders.css index 38497bf..2243797 100644 --- a/gestaoRaul/templates/static/orders/css/orders.css +++ b/gestaoRaul/templates/static/orders/css/orders.css @@ -4,7 +4,14 @@ color: black; } +h2 { + font-size: 18px; + justify-self: center; + margin-bottom: 0px; +} + .container { + margin-top: -50px; border-radius: 8px; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); padding: 0px; @@ -91,4 +98,8 @@ } + #title { + display:none; + } + } \ No newline at end of file From 8cb63832e50647f439d4ca33d898fd6e78afec45 Mon Sep 17 00:00:00 2001 From: Welton Moura Date: Sat, 28 Jun 2025 13:05:38 -0300 Subject: [PATCH 06/11] =?UTF-8?q?refactor:=20altera=C3=A7=C3=A3o=20na=20mo?= =?UTF-8?q?dal=20de=20confirma=C3=A7=C3=A3o=20para=20encerrar=20a=20comand?= =?UTF-8?q?a?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- gestaoRaul/db.sqlite3 | Bin 348160 -> 348160 bytes .../orders/__pycache__/models.cpython-312.pyc | Bin 2142 -> 2142 bytes .../static/comandas/js/viewcomanda.js | 34 ++++++++++++++---- 3 files changed, 27 insertions(+), 7 deletions(-) diff --git a/gestaoRaul/db.sqlite3 b/gestaoRaul/db.sqlite3 index f91d0895857d8540f497a09f8813516b22fde216..7762e6fdbf83d2e76332ba87cb89bbb0cd41b505 100644 GIT binary patch delta 469 zcmZozAlk4%bb>VF+=(*IjB^_kS`!$zCNM3ESNX+Y!1t7y{}2Cn{ulg@`S0=Hn!uOx=1K-!}Y6(o|__!@tm^m4(_}?ERpPCT!tK-%(|Nc1&%Up*G*W>H~-%BE$pykE+?oB0s4Jm|GfKS}{7YHdizzfE7DB0u7$N;VX;S Kc2!Z<+g1R7uXKL^ delta 460 zcmZozAlk4%bb>VFjEOSNj58V&S`!$zCNM3ESNY0d!1t7y{}2Cn{ulg@`S0=Hn!uOx=7vG2NY6(o|_}HxY-!iZ=OqcIxlG`qk&-8W!69>4pcH<+g89WcFec`1R0zok+EuD<^|GFFPkE?{ppwW_{%-1_1^nz|PFX#M;8} z6ihcWJmIKfkeKKw(q5#&yuC<+WwJRl(=Xxa90@Fu>=8`AxGb1;HwOw#V&XQm#XrE+Z@X?Xivo)nM<)X})E-?6kXmsDPKa6sh_d!{7A8g( zE<*;x$$e8_S=@13!;50HYGSxLO(={?vFto5Tv9vNY(=#wN zG_f$q%1_J(+nAQc@_s4n3YKbSd!Xygn5It { + if (result.isConfirmed) { + + + fetch(`/comandas/closeComanda/${id}/`, { method: 'PUT', headers: { 'Content-Type': 'application/json', @@ -209,15 +222,22 @@ function closeConta(id){ buttonAdd.style.display = 'none' buttonreOpenComanda.style.display = 'flex' buttonPayment.style.display = 'flex' - showToast('✅Comanda encerrada!😁','success') imprimirConta() } }) .catch(error => { - showToast('❌Ocorreu um erro!😢','error') + Swal.fire({ + color: 'white', + title: "Algo deu errado!😢", + confirmButtonColor: 'linear-gradient(145deg, #1E2A3B, #2C3E50)', + background: 'rgb(23, 38, 54)', + text: "Erro: " + error.message, + icon: "error", + }); }); -} + } +}); } From 7dd76db5bad02c9ac67cf59b760aaf97178aa602 Mon Sep 17 00:00:00 2001 From: Welton Moura Date: Sat, 28 Jun 2025 18:54:44 -0300 Subject: [PATCH 07/11] =?UTF-8?q?refactor:altera=C3=A7=C3=A3o=20modal=20de?= =?UTF-8?q?=20obs=20do=20pedido=20na=20tela=20viewcomanda?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../comandas/templates/viewcomanda.html | 15 ---- gestaoRaul/db.sqlite3 | Bin 348160 -> 348160 bytes gestaoRaul/templates/static/base.js | 2 + .../static/comandas/js/viewcomanda.js | 84 ++++++++++++------ 4 files changed, 58 insertions(+), 43 deletions(-) diff --git a/gestaoRaul/comandas/templates/viewcomanda.html b/gestaoRaul/comandas/templates/viewcomanda.html index c1a1961..d46ef9b 100644 --- a/gestaoRaul/comandas/templates/viewcomanda.html +++ b/gestaoRaul/comandas/templates/viewcomanda.html @@ -196,21 +196,6 @@ Detalhes {{comanda.name}}
- - - -