diff --git a/README.md b/README.md index 5bff83c8a..4a181a367 100644 --- a/README.md +++ b/README.md @@ -10,36 +10,21 @@ ## Simple, Secure and Scalable ### Web Application Platform and Content Management System -XOOPSCube Legacy (XCL) is a Web Application Platform (WAP) free and open source well suited for general purpose -with a low code development approach maintained on GitHub. The XCL bundle package is designed for easy usage -to benefit from the performance of XCube Core and the most popular web server stack: Apache, MySQL and PHP. +XOOPSCube Legacy (XCL) is a Web Application Platform (WAP) free and open source well suited for general purpose. The XCL bundle package is designed for easy usage with the most popular web server stack: Apache, MySQL and PHP. -**Active branches in GitHub** - -Active branch for all new features and bug fixes (PHP74, PHP8). -Keep a tested high quality, up-to-date master/main branch for releases. + +

>>> Maintenance Mode - EOL

+ | Branch | PHP Version | Commit / Pull request | |:-------------:|:-------------:|:-------------:| -| Master | PHP 7.4. - PHP 8.0 | Release Candidate | -| Smarty3 | PHP 7.4. - PHP 8.0| Smarty v3 bug fixes | - -## Features -**XCL bundle package features out of the box** +| Master | PHP 8.0 | Security updates only | -- X-elFinder file manager with WYSIWYG editors (code, graphics) - Cloud Storage : Box, Dropbox, Google Drive, OneDrive, FTP, and more. - GUI-based Composer to install cloud packages and dependencies -- X-Update Manager : get and deploy deploy from stores in GitHub, - Gitlab or any other public or private, local or remote repository. -- Duplicatable modules : - Content Management System (CMS), forums, knowledge management systems, - and multiple blogs management (e.g. WordPress) . +----- -

-xcl-admin-render -

+### [The XOOPSCube Project Celebrates The 20th Anniversary](https://github.com/xoopscube/legacy/blob/master/XOOPSCube-20th-Anniversary.md) +----- ## Get Started ### Installation Wizard @@ -49,19 +34,34 @@ dedicated server, virtual private server (VPS) or shared hosting. Running a loca The following guide focuses on the user-friendly [Web installation wizard](https://xoopscube.github.io/legacy/) 1. Create a database (MySQL or MariaDB) InnoDB collation utf8mb4 -2. Clone or Unzip the package files in your root directory +2. Unpack the archive to your root directory 3. Browse to your website URL -4. Follow the steps in the Installer +4. Follow the steps in the Installation Wizard Wizard Installation ------ +## Features +**XCL bundle package features out of the box** + +- X-elFinder file manager with WYSIWYG editors (code, graphics) + Cloud Storage : Box, Dropbox, Google Drive, OneDrive, FTP, and more. + GUI-based Composer to install cloud packages and dependencies +- X-Update Manager : get and deploy deploy from stores in GitHub, + Gitlab or any other public or private, local or remote repository. +- Duplicatable modules : + Content Management System (CMS), forums, knowledge management systems, + and multiple blogs management (e.g. WordPress) . + +

+xcl-admin-render +

+ + + -### [The XOOPSCube Project Celebrates The 20th Anniversary](https://github.com/xoopscube/legacy/blob/master/XOOPSCube-20th-Anniversary.md) ------ ## Requirements @@ -94,20 +94,6 @@ Language -## Usage - -### Post-installation checklist - -Once the installation wizard completed, your website is preconfigured with default configuration settings. These settings refer to the pre-existing value of a user-configurable setting that is assigned to your web application platform. Therefore, you need to perform some post-installation tasks before launching your new website. These include setting up the site name and slogan, customizing meta tags (SEO), allowing visitors to register, and user group permissions. More detailed documents are available and highlighted throughout the built-in Help. - -- From the Admin Control Panel, set your preferences (your site is closed by default) -- Install modules, blocks or create custom blocks (HTML, CSS, JavaScript or PHP) to specific modules pages -- Create new user groups and set permissions -- Customize meta tags (SEO) -- Manage translations and localization - -Modules - ## License ### XOOPSCube - XCube Core @@ -119,39 +105,6 @@ XOOPSCube was started from scratch and the minimalist XCube Core source code is XOOPSCube Legacy source code which is a set of modules to ensure compatibility with old versions of Xoops2 is released under a GPL licence. - - - -## Download - -The source code of XOOPSCube Legacy is available on [Github](https://github.com/xoopscube/legacy) - -XOOPSCube Legacy packages are available at [downloads](https://github.com/xoopscube/legacy/downloads) - - - - -#### Documentation - -XOOPSCube features a built-in "Help" documentation and Action search function. - -**Legacy API documentation** -Previous version of the subsystem API generated by Apigen 2.7.0 - -http://xoopscube.org/documentation/api - -#### Support - -https://github.com/xoopscube/legacy/ - - -XOOPS Cube Legacy is open source project community driven. -We encourage everyone in the community to contribute their knowledge and expertise. -[enhancement request](https://github.com/xoopscube/legacy/issues) -[bug report](https://github.com/xoopscube/legacy/issues) -[patch](https://github.com/xoopscube/legacy/pulls) - - ## The Contributors diff --git a/html/modules/legacy/admin/theme/stylesheets/ui-form.css b/html/modules/legacy/admin/theme/stylesheets/ui-form.css index a751ed8d2..cf5628017 100644 --- a/html/modules/legacy/admin/theme/stylesheets/ui-form.css +++ b/html/modules/legacy/admin/theme/stylesheets/ui-form.css @@ -39,7 +39,7 @@ textarea, select { scrollbar-width : thin; } [type="number"] { - max-width: 7ch; + max-width: 8ch; } [type="color"] { border : var(--border); diff --git a/html/modules/legacy/templates/legacy_site_closed.html b/html/modules/legacy/templates/legacy_site_closed.html index dbd79ffdc..dcc67f169 100644 --- a/html/modules/legacy/templates/legacy_site_closed.html +++ b/html/modules/legacy/templates/legacy_site_closed.html @@ -31,7 +31,7 @@ <{* ----- Favicon SVG located in the root directory ----- *}> - + + +
+ +
+

<{$title}>

+

<{$slogan}>

+
+ +
\ No newline at end of file diff --git a/html/themes/blue-planet/component/_inc_nav_theme.html b/html/themes/blue-planet/component/_inc_nav_theme.html new file mode 100644 index 000000000..cb8235205 --- /dev/null +++ b/html/themes/blue-planet/component/_inc_nav_theme.html @@ -0,0 +1,8 @@ +
+ Theme + +
diff --git a/html/themes/blue-planet/component/_inc_top_center.html b/html/themes/blue-planet/component/_inc_top_center.html new file mode 100644 index 000000000..e7bce3744 --- /dev/null +++ b/html/themes/blue-planet/component/_inc_top_center.html @@ -0,0 +1,147 @@ + + +<{if $xoops_showcblock==1}> +
+ +
+

<{$xoops_sitename}>

+

<{$xoops_slogan}>

+
+
+
+<{* ---------- BLOCK Center-Left *}> +<{if !empty($xoops_clblocks)}> +
+ <{foreach item=block from=$xoops_clblocks}> + <{if $block.title|strstr:"top-" && !$block.title|strstr:"hero"}> +
+

+ <{if $xoops_isadmin}> + <{$block.title}> + <{include file="$xoops_theme/component/_inc_block_edit.html"}> + <{else}> + <{if ! $block.title|strstr:"none"}><{$block.title|replace:'top-':''}><{/if}> + <{/if}> +

+
<{$block.content}>
+
+ <{/if}> + <{/foreach}> +
+<{/if}> + +<{* ---------- BLOCK Center-Center *}> +<{if !empty($xoops_ccblocks)}> +
+ <{foreach item=block from=$xoops_ccblocks}> + <{if $block.title|strstr:"top-" && !$block.title|strstr:"hero"}> +
+

+ <{if $xoops_isadmin}> + <{$block.title}> + <{include file="$xoops_theme/component/_inc_block_edit.html"}> + <{else}> + <{if ! $block.title|strstr:"none"}><{$block.title|replace:'top-':''}><{/if}> + <{/if}> +

+
<{$block.content}>
+
+ <{/if}> + <{/foreach}> +
+<{/if}> + +<{* ---------- BLOCK Center-Right *}> +<{if !empty($xoops_crblocks)}> +
+ <{foreach item=block from=$xoops_crblocks}> + <{if $block.title|strstr:"top-" && !$block.title|strstr:"hero"}> +
+

+ <{if $xoops_isadmin}> + <{$block.title}> + <{include file="$xoops_theme/component/_inc_block_edit.html"}> + <{else}> + <{if ! $block.title|strstr:"none"}><{$block.title|replace:'top-':''}><{/if}> + <{/if}> +

+
<{$block.content}>
+
+ <{/if}> + <{/foreach}> +
+<{/if}> + +
+ +
+<{/if}> \ No newline at end of file diff --git a/html/themes/blue-planet/component/admin-panel.html b/html/themes/blue-planet/component/admin-panel.html new file mode 100644 index 000000000..b3b68d380 --- /dev/null +++ b/html/themes/blue-planet/component/admin-panel.html @@ -0,0 +1,237 @@ +<{* XCube Panel Options *}> + + + +
+
+ +
+
+ +<{* ----- RIGHT-SIDEBAR ----- *}> +
+ +
Control Panel + + + +
+ + <{* ----- RIGHT-PANEL-BLOCK ----- *}> +
+ + <{* ---------- Block-Right *}> + <{if $xoops_showrblock==1}> + <{foreach item=block from=$xoops_rblocks}> + <{if $block.title|strstr:"admin"}> +
+

+ <{* REMOVE 'admin-' FROM BLOCK-TITLE *}> + <{$block.title|replace:'admin-':''}> + <{include file="$xoops_theme/component/_inc_block_edit.html"}> +

+
<{$block.content}>
+
+ <{/if}> + <{foreachelse}> +
+ Add block with position block-right
+ and block-title with prefix admin- +
+ <{/foreach}> + <{/if}> + <{* ----- ADMIN PREVIEW ----- *}> +
Preview Layout
+
+ + + + +
+ +
+ <{* -----/ RIGHT-PANEL-BLOCK *}> + +
+<{* -----/ RIGHT-SIDEBAR *}> + diff --git a/html/themes/blue-planet/component/block-left.html b/html/themes/blue-planet/component/block-left.html new file mode 100644 index 000000000..dabcad9fe --- /dev/null +++ b/html/themes/blue-planet/component/block-left.html @@ -0,0 +1,18 @@ +<{* ---------- Block-Left *}> +<{foreach item=block from=$xoops_lblocks}> +<{if !$block.title|strstr:"Topage" && !$block.title|strstr:"User" || !$block.id==28}> +
+

+ <{if $xoops_isadmin}> + <{$block.title|replace:' ':'-'}> + <{include file="$xoops_theme/component/_inc_block_edit.html"}> + <{else}> + <{if ! $block.title|strstr:"none"}><{$block.title}><{/if}> + <{/if}> +

+
+ <{$block.content}> +
+
+<{/if}> +<{/foreach}> diff --git a/html/themes/blue-planet/component/block-right.html b/html/themes/blue-planet/component/block-right.html new file mode 100644 index 000000000..1edb488a6 --- /dev/null +++ b/html/themes/blue-planet/component/block-right.html @@ -0,0 +1,16 @@ +<{* ---------- Block-Right *}> +<{foreach item=block from=$xoops_rblocks}> +<{if !$block.title|strstr:"admin"}> +
+

+ <{if $xoops_isadmin}> + <{$block.title}> + <{include file="$xoops_theme/component/_inc_block_edit.html"}> + <{else}> + <{if ! $block.title|strstr:"none"}><{$block.title}><{/if}> + <{/if}> +

+
<{$block.content}>
+
+<{/if}> +<{/foreach}> diff --git a/html/themes/blue-planet/css/dropdown.css b/html/themes/blue-planet/css/dropdown.css new file mode 100644 index 000000000..6bd332f2b --- /dev/null +++ b/html/themes/blue-planet/css/dropdown.css @@ -0,0 +1,91 @@ +/* +* XCL Theme Dropdown +* +* @version 2.4.0 +* @update 2024-04-20 +* @Date 2024-02-02 +* @author Nuno Luciano ( https://github.com/gigamaster ) +* @copyright (c) 2005-2024 The XOOPSCube Project, authors +* @license MIT +* @link https://github.com/xoopscube +*/ +/* -------------------- Dropdown Menu */ + +div.dropdown { + position : relative; + display : block; +} +div.dropdown a.dropdown-toggle:not(.ui-tabs-anchor) { + background : transparent; /*var(--background-color);*/ + border : none; + border-radius : var(--pico-border-radius); + box-shadow : none; + color : var(--pico-primary-color); + cursor : pointer; + display : block; + font : inherit; + margin : 0; + padding : 0 .25rem .25rem; + transition : all var(--transition-time) var(--transition-cube); +} +div.dropdown a.dropdown-toggle:hover:not(.ui-tabs-anchor) { + background : var(--primary-focus); /* link [div][a] */ + box-shadow : none; + color : var(--primary-hover); + background : var(--pico-primary-hover-background); + color : var(--pico-primary-inverse); +} +div.dropdown.isopen div.dropdown-content { + display : block; + z-index : var(--z-above); +} +div.dropdown-content { + background : var(--pico-form-element-background-color); + border : var(--pico-border-width) solid var(--pico-form-element-border-color); + border-radius : var(--pico-border-radius); + box-shadow : var(--pico-card-box-shadow); /* 0px 2px 4px 1px hsla(0, 0%, 0%, 0.74); */ + color : var(--pico-primary-color); + display : none; + + min-width : 190px; + padding : .5rem; + position : absolute; + right : -10px; + + text-align : left; + top : 100%; + transition : all var(--transition-time) var(--transition-cube); +} +@media (min-width: 992px) { + .dropdown-content { + right : 1px; /* Fix device Viewport */ + } +} +div.dropdown div.dropdown-content ul { + margin : 0; + padding : 0; + list-style : none; +} +div.dropdown div.dropdown-content ul li { + background : transparent; + padding : 0; + width : 100%; +} +/* Dropdown links */ +div.dropdown div.dropdown-content a { + border-radius : var(--pico-border-radius); + color : var(--pico-primary-color); + display : block; + font-size : 16px; + padding : calc(var(--pico-form-element-spacing-vertical)* .8) var(--pico-form-element-spacing-horizontal); + text-decoration : none; +} +/* Change color of dropdown links on hover */ +div.dropdown div.dropdown-content a:hover { + background : var(--pico-primary-hover-background); + color : var(--pico-primary-inverse); +} + +div.dropdown div.dropdown-content a > svg { + margin : var(--dropdown-icon-margin); +} diff --git a/html/themes/blue-planet/css/index.html b/html/themes/blue-planet/css/index.html new file mode 100644 index 000000000..990cbd603 --- /dev/null +++ b/html/themes/blue-planet/css/index.html @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/html/themes/blue-planet/css/jquery-ui.theme.css b/html/themes/blue-planet/css/jquery-ui.theme.css new file mode 100644 index 000000000..9adef581c --- /dev/null +++ b/html/themes/blue-planet/css/jquery-ui.theme.css @@ -0,0 +1,693 @@ +/* +* XCL Theme Jquery-UI for PicoCSS v206 +* +* @version 2.4.0 +* @update 2024-04-20 +* @date 2024-02-02 +* @author Nuno Luciano ( https://github.com/gigamaster ) +* @copyright (c) 2005-2024 The XOOPSCube Project, authors +* @license MIT +* @link https://github.com/xoopscube +*/ + +/* Component containers +----------------------------------*/ +.ui-dialog.ui-widget.ui-front { + background : var(--pico-form-element-background-color); + box-shadow : var(--pico-box-shadow ); + padding : calc(var(--block-spacing-horizontal) * 1); + border : var(--pico-border-width) solid var(--pico-form-element-border-color); + background-color: var(--pico-modal-overlay-background-color); + backdrop-filter : var(--pico-modal-overlay-backdrop-filter); + -webkit-backdrop-filter: var(--pico-modal-overlay-backdrop-filter); + +} +.ui-dialog-dragging > .ui-widget-header { + background: var(--pico-primary-background); +} +.ui-widget { + font-size : 1rem +} +.ui-widget .ui-widget { + font-size : 1rem +} +.ui-widget input, +.ui-widget select, +.ui-widget textarea, +.ui-widget button { + outline : none; + font-family : inherit; + font-size : 1rem +} +.ui-widget.ui-widget-content { + /* border : 1px solid var(--pico-form-element-border-color); */ + border : 1px solid transparent; + background : var(--pico-form-element-background-color); + border-radius : var(--pico-border-radius); + box-shadow : var(--pico-card-box-shadow); + margin : 0; +} + +.ui-widget-content { + background : var(--pico-form-element-background-color); + border : 1px solid var(--pico-form-element-border-color); + color : var(--pico-color); +} +.ui-widget-content a { + color : var(--pico-primary); +} +.ui-widget-header { + background : var(--pico-card-sectioning-background-color); + border : var(--pico-border-width) solid var(--pico-border-color); + border-radius : var(--pico-border-radius); + color : var(--pico-color); + font-weight : var(--pico-font-weight); + list-style : none; +} +/* custom spacing */ +:is(.ui-menu) li.ui-widget-header { + /* custom spacing */ + padding: .175em .5em; + border: 1px solid var(--pico-dropdown-border-color) +} +.ui-widget-header a { + color : var(--pico-color); +} + +/* Interaction states +----------------------------------*/ +.ui-state-default, +.ui-widget-content .ui-state-default, +.ui-widget-header .ui-state-default, +.ui-button, +/* greater specificity when clicked or hovered */ +html .ui-button.ui-state-disabled:hover, +html .ui-button.ui-state-disabled:active { + background-color: var(--pico-background-color); + border : 1px solid var(--pico-form-element-border-color); + color : var(--pico-contrast); + font : var(--pico-font-size); + font-weight : inherit; +} +.ui-state-default a, +.ui-state-default a:link, +.ui-state-default a:visited, +a.ui-button, +a:link.ui-button, +a:visited.ui-button, +.ui-button { + background-color: var(--pico-background-color); + border: 1px solid transparent; + color : var(--pico-primary); + text-decoration : none; +} +.ui-state-hover, +.ui-widget-content .ui-state-hover, +.ui-widget-header .ui-state-hover, +.ui-state-focus, +.ui-widget-content .ui-state-focus, +.ui-widget-header .ui-state-focus, +.ui-button:hover, +.ui-button:focus { + background : var(--pico-primary-hover-background); + border : 1px solid var(--pico-primary-hover-border); + color : var(--pico-color); + font-weight : inherit; + outline : none; +} +.ui-state-hover a, +.ui-state-hover a:hover, +.ui-state-hover a:link, +.ui-state-hover a:visited, +.ui-state-focus a, +.ui-state-focus a:hover, +.ui-state-focus a:link, +.ui-state-focus a:visited, +a.ui-button:hover, +a.ui-button:focus { + background : var(--pico-primary-hover-background); + border : 1px solid var(--pico-primary-hover-border); + color : var(--pico-primary-hover); + font : var(--pico-font-size); + font-weight : inherit; + text-decoration : none; + outline : none; +} +.ui-visual-focus { + box-shadow : var(--pico-primary-focus); +} +.ui-state-active, +.ui-widget-content .ui-state-active, +.ui-widget-header .ui-state-active, +a.ui-button:active, +.ui-button:active, +.ui-button.ui-state-active:hover { + background : var(--pico-primary-hover-background); + border : 1px solid var(--pico-primary-hover-border); + color : var(--pico-primary-inverse); + font-weight : inherit; + outline : none; +} +.ui-state-active a, +.ui-state-active a:link, +.ui-state-active a:visited, +:where(.dropdown-content):not(a.dropdown-item) { + border : 1px solid var(--pico-primary-hover-border); + color : var(--pico-primary-focus); +} +/* Checkbox */ +.ui-icon-background, +.ui-state-active .ui-icon-background { + background-color: var(--pico-primary-hover-background); + border : 1px solid var(--pico-primary-hover-border); +} + +/* Interaction Cues +----------------------------------*/ +.ui-state-highlight, +.ui-widget-content .ui-state-highlight, +.ui-widget-header .ui-state-highlight { + background : var(--pico-primary-hover-background); + border : 1px solid var(--pico-primary-hover-border); + color : var(--pico-primary-inverse); +} +.ui-state-checked { + background : var(--ui-state-checked-bg); + border : var(--ui-state-checked-border); +} +.ui-state-highlight a, +.ui-widget-content .ui-state-highlight a, +.ui-widget-header .ui-state-highlight a { + color : var(--pico-primary-inverse); +} +.ui-state-error, +.ui-widget-content .ui-state-error, +.ui-widget-header .ui-state-error { + background : var(--ui-state-error-bg); + border : 1px solid var(--pico-primary-hover-border); + color : var(--ui-state-error-color); +} +.ui-state-error a, +.ui-widget-content .ui-state-error a, +.ui-widget-header .ui-state-error a { + color : var(--ui-state-error-link); +} +.ui-state-error-text, +.ui-widget-content .ui-state-error-text, +.ui-widget-header .ui-state-error-text { + color : var(--ui-state-error-text); +} +.ui-priority-primary, +.ui-widget-content .ui-priority-primary, +.ui-widget-header .ui-priority-primary { + font-weight : inherit; +} +.ui-priority-secondary, +.ui-widget-content .ui-priority-secondary, +.ui-widget-header .ui-priority-secondary { + font-weight : inherit; + opacity : 0.7; +} +.ui-state-disabled, +.ui-widget-content .ui-state-disabled, +.ui-widget-header .ui-state-disabled { + background-image: none; + border : 1px solid var(--pico-muted-border-color); + opacity : 0.35; +} + +/* Icons +----------------------------------*/ +/* states and images - RELATIVE TO XCL /COMMON */ +.ui-icon { + width: 16px; + height: 16px; +} +.ui-icon, +.ui-widget-content .ui-icon { + background-image: url("../../../common/js/images/ui-icons_cccccc_256x240.png"); +} +.ui-widget-header .ui-icon { + background-image: url("../../../common/js/images/ui-icons_cccccc_256x240.png"); +} +.ui-state-hover .ui-icon, +.ui-state-focus .ui-icon, +.ui-button:hover .ui-icon, +.ui-button:focus .ui-icon { + background-image: url("../../../common/js/images/ui-icons_ffffff_256x240.png"); +} +.ui-state-active .ui-icon, +.ui-button:active .ui-icon { + background-image: url("../../../common/js/images/ui-icons_ffffff_256x240.png"); +} +.ui-state-highlight .ui-icon, +.ui-button .ui-state-highlight.ui-icon { + background-image: url("../../../common/js/images/ui-icons_ffffff_256x240.png"); +} +.ui-state-error .ui-icon, +.ui-state-error-text .ui-icon { + background-image: url("../../../common/js/images/ui-icons_ffffff_256x240.png"); +} +.ui-button .ui-icon { + background-image: url("../../../common/js/images/ui-icons_cccccc_256x240.png"); +} + + +/* Misc visuals +----------------------------------*/ + +/* Corner radius */ +.ui-corner-all, +.ui-corner-top, +.ui-corner-left, +.ui-corner-tl { + border-top-left-radius: var(--pico-border-radius); +} +.ui-corner-all, +.ui-corner-top, +.ui-corner-right, +.ui-corner-tr { + border-top-right-radius: var(--pico-border-radius); +} +.ui-corner-all, +.ui-corner-bottom, +.ui-corner-left, +.ui-corner-bl { + border-bottom-left-radius: var(--pico-border-radius); +} +.ui-corner-all, +.ui-corner-bottom, +.ui-corner-right, +.ui-corner-br { + border-bottom-right-radius: var(--pico-border-radius); +} + +/* Overlays */ +/*Applies 100% width & height dimensions to an overlay screen*/ +.ui-widget-overlay { + background : var(--ui-widget-overlay-bg); + backdrop-filter : var(--pico-modal-overlay-backdrop-filter); + opacity : .8; +} +/*Sets box-shadow x & y offset, blur radius and color.*/ +.ui-widget-shadow { + box-shadow : var(--ui-widget-shadow); +} + +/* Accordion +----------------------------------*/ +.ui-accordion .ui-accordion-header { + background : var(--pico-background-color); + border : 1px solid var(--pico-accordion-border-color); + border-radius : var(--pico-border-radius); + box-shadow : var(--pico-box-shadow); + cursor : pointer; + display : block; + margin : var(--accordion-margin); + outline : 0; + margin-bottom : .15em; + padding : .5em; + position : relative; + -moz-user-select: none; + user-select : none; + transition : background-color var(--pico-transition); + +} +.ui-accordion .ui-accordion-content { + background : var(--pico-dropdown-background-color); + border : var(--pico-border-width) solid var(--pico-dropdown-border-color); + border-top : 0; + border-radius : var(--pico-border-radius); + color : var(--pico-color); + padding : var(--pico-form-element-spacing-vertical) var(--pico-form-element-spacing-horizontal); + overflow : auto; + transition: opacity var(--pico-transition), transform 0s ease-in-out 1s; +} +:is(.ui-accordion-header-active):not([aria-selected="false"][aria-expanded="false"]) { + color:var(--pico-primary-color); +} +:is(.ui-accordion-header):not([aria-selected="true"][aria-expanded="true"]) { + color:var(--pico-secondary); +} + +/* UI-MENU */ +.ui-menu { + background : var(--pico-form-element-background-color); + border : var(--pico-border-width) solid var(--pico-form-element-border-color); + border-radius : var(--pico-border-radius); + display : block; + list-style : none!important; + margin : var(--ui-menu-margin); + /* Override jQuery-UI css value */ + outline : 0; + padding:5px; + -moz-user-select: none; + user-select: none; +} +.ui-menu .ui-menu { + /* IMPORTANT override ui-widget-content */ + background : var(--pico-form-element-background-color); + border : var(--pico-border-width) solid var(--pico-form-element-border-color); + border-radius : var(--pico-border-radius); + position : absolute; + -moz-user-select: none; + user-select: none; +} +.ui-menu .ui-menu-item-wrapper { + background : inherit; + border : 1px solid transparent; + border-radius : var(--pico-border-radius); + color : var(--pico-color); + padding : .125em .25em; + /* position: relative;*/ +} +.ui-menu-icons { + position: relative +} +.ui-menu-icons .ui-menu-item-wrapper { + padding-left: 1.5em +} +.ui-menu .ui-icon { + position: absolute; + top: 0; + bottom: 0; + left: .2em; + margin: auto 0 +} +.ui-menu .ui-menu-icon { + left: auto; + right: 0 +} +.ui-menu .ui-state-focus, +.ui-menu .ui-state-active { + /* IMPORTANT override default UI properties */ + background : var(--pico-primary-hover-background); + border : 1px solid var(--pico-primary-hover-border); + border-radius : var(--pico-border-radius); + color : var(--pico-primary-inverse); + margin : 0; +} + +.ui-button:not(.ui-spinner-button,.ui-dialog-titlebar-close,.ui-controlgroup-item), +.ui-button:link, +.ui-button:visited { +--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)); + background-color: var(--pico-background-color); + border: var(--pico-border-width) solid var(--pico-border-color); + border-radius: var(--pico-border-radius); + box-shadow: var(--pico-box-shadow); + color: var(--pico-color); + cursor: pointer; + font-weight: var(--pico-font-weight); + font-size: var(--pico-font-size); + line-height: var(--pico-line-height); + outline: 0; + padding: var(--pico-form-element-spacing-vertical) var(--pico-form-element-spacing-horizontal); + text-align: center; + text-decoration: none; + -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); +} +.ui-button:hover { +--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); +} +/* +ref: https://api.jquery.com/first/ +*/ +:is(.ui-selectmenu-button.ui-button) { + padding : var(--pico-form-element-spacing-vertical) var(--pico-form-element-spacing-horizontal); + margin-bottom : var(--pico-spacing); + background-color: var(--pico-form-element-background-color); + border : var(--pico-border-width) solid var(--pico-form-element-border-color); + border-radius : var(--pico-border-radius); + box-shadow : var(--pico-button-hover-box-shadow, 0 0 0 rgba(0, 0, 0, 0.2)); + color : var(--pico-form-element-placeholder-color); + cursor : pointer; + height : calc(1rem* var(--pico-line-height) + var(--pico-form-element-spacing-vertical)* 2 + var(--pico-border-width)* 2); + line-height : inherit; + text-align : left; + -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); +} +:is(.ui-selectmenu-button-open.ui-button) { +background-color: var(--pico-form-element-background-color); +border : var(--pico-border-width) solid var(--pico-form-element-border-color); +color : var(--pico-form-element-placeholder-color); +} +.ui-selectmenu-menu .ui-menu .ui-selectmenu-optgroup { + font-weight : var(--pico-font-weight); + margin : 0; +} +.ui-controlgroup-horizontal:first-child .ui-controlgroup-item:nth-of-type(1), +.ui-controlgroup-horizontal > .ui-selectmenu-button { + border-top-left-radius: var(--pico-border-radius) !important; + border-bottom-left-radius: var(--pico-border-radius) !important; +} +.ui-controlgroup-horizontal .ui-controlgroup-item:last-child { + border-top-right-radius: var(--pico-border-radius) !important; + border-bottom-right-radius: var(--pico-border-radius) !important; +} +.ui-controlgroup-vertical .ui-controlgroup-item:first-child, +.ui-controlgroup-vertical .ui-selectmenu-button { + border-top-left-radius: var(--pico-border-radius) !important; + border-top-right-radius: var(--pico-border-radius) !important; +} +.ui-controlgroup-vertical .ui-controlgroup-item:last-child { + border-bottom-left-radius: var(--pico-border-radius); + border-bottom-right-radius: var(--pico-border-radius) !important; +} +.ui-controlgroup { + display : inline-block; + vertical-align : middle; +} +:where(.ui-controlgroup ) .ui-controlgroup-item:not(.ui-spinner) { + background : var(--pico-background-color); + border : var(--pico-border-width) solid var(--pico-form-element-border-color); + color : var(--pico-color); + padding : var(--pico-form-element-spacing-vertical) var(--pico-form-element-spacing-horizontal); + margin : 0; +} +.ui-controlgroup .ui-controlgroup-label span { + font-size : 1rem; + color : var(--pico-primary); +} +.ui-controlgroup-horizontal .ui-controlgroup-label + .ui-controlgroup-item { + border-left : var(--pico-border-width) solid var(--pico-accordion-border-color); +} + +/* RESET BROWSER SPINNER */ +input::-webkit-outer-spin-button, +input::-webkit-inner-spin-button { +display: none; +-webkit-appearance: none; +margin: 0; /* reset margin */ +outline: none; +} +input[type=number] { +-moz-appearance:textfield; /* Firefox */ +} +.ui-spinner-input { + -webkit-appearance: none; + -moz-appearance: textfield; + appearance: none; + border: var(--pico-border-width) solid var(--pico-form-element-border-color); + border-radius: var(--pico-border-radius); + margin: 0!important; + padding-right: 30px!important; + min-width: 8ch; + text-align: center; + vertical-align: middle; + outline: none; +} +.ui-spinner-input:focus{outline:none;box-shadow: 0 0 0 var(--pico-outline-width) var(--pico-primary-focus);} +.ui-spinner a.ui-spinner-button { + position: absolute; + height: 28px!important; + background: var(--pico-primary-underline); +} +.ui-spinner a.ui-spinner-button:hover{ +background: var(--pico-primary-hover-background); +} + +/* CHECKBOX + icon */ +.ui-checkboxradio-label .ui-icon-background { +--pico-background-color: var(--pico-primary-background); +--pico-border-color: var(--pico-primary-border); + -webkit-appearance: none; + -moz-appearance: none; + appearance: none; + accent-color : var(--pico-primary); + background : var(--pico-form-element-border-color); + border : 2px solid var(--pico-form-element-border-color); + border-radius : 3px; + box-shadow : var(--ui-state-check-shadow); + background-position: center; + background-size : .75em auto; + background-repeat: no-repeat; +} +/* RADIO */ +.ui-checkboxradio-radio-label .ui-icon-background { + background : white; + border : 8px solid var(--pico-form-element-border-color); + border-radius : 50%; + box-shadow : var(--ui-state-check-shadow); + height : var(--ui-state-check-height); + width : var(--ui-state-check-width); +} +.ui-checkboxradio-radio-label.ui-checkboxradio-checked .ui-icon, +.ui-checkboxradio-radio-label.ui-checkboxradio-checked:hover .ui-icon { + background-image: var(--pico-icon-checkbox); + background : white; + cursor : pointer; +} + +.ui-datepicker table { + font-size : 16px; +} +.ui-datepicker .ui-datepicker-prev, +.ui-datepicker .ui-datepicker-next{ + border : 1px solid transparent; + position : absolute; + top : 2px; + width : 1.8em; + height : 1.8em +} +.ui-datepicker .ui-datepicker-prev-hover, +.ui-datepicker .ui-datepicker-next-hover{ + top:2px +} +.ui-datepicker .ui-datepicker-prev{ + left:2px +} +.ui-datepicker .ui-datepicker-next{ + right:2px +} +.ui-datepicker .ui-datepicker-prev-hover{ + left:2px +} +.ui-datepicker .ui-datepicker-next-hover{ + right:2px +} +.ui-datepicker .ui-datepicker-prev span, +.ui-datepicker .ui-datepicker-next span{ + display:block; + position:absolute; + left:50%; + margin-left:-8px; + top:50%; + margin-top:-8px +} +.ui-datepicker .ui-datepicker-title{ + margin:0 2.3em; + line-height:1.8em; + text-align:center +} + +.ui-progressbar { + height : var(--ui-progressbar-height); +} +.ui-progressbar .ui-progressbar-value { + background : var(--ui-progressbar-value); +} + + +/* -------------------- -------------------- jQUERY UI TAB */ +.ui-tabs { + position : relative; + border : none; + border-radius : var(--pico-border-radius); + margin : 0; + padding:0.875rem; + list-style : none; +} +.ui-tabs .ui-tabs-nav { + margin : 0; + padding : .2em .2em 0; +} +/* The list of tabs */ +.ui-tabs .ui-tabs-nav { + background : transparent; + border : none; + border-top-left-radius : var(--pico-border-radius); + border-top-right-radius : var(--pico-border-radius); + box-shadow : var(--pico-box-shadow); + cursor : pointer; + display : inline-block; + line-height : 1.25; +} +.ui-tabs .ui-tabs-nav li { + /* border: 1px solid var(--pico-primary-underline); */ + list-style: none; + float: left; + position: relative; + top: 0; + margin: 0; + white-space: nowrap; +} +/* The anchors used to switch panels. */ +.ui-tabs .ui-tabs-nav .ui-tabs-anchor { + /* background : var(--pico-primary-underline); */ + background : transparent; + color : var(--pico-primary); + float : left; + text-decoration : none; +} +/* li .ui-tabs-anchor:first-child { +border-top-left-radius: var(--pico-border-radius); +} +li .ui-tabs-anchor:last-child { + border-top-right-radius: var(--pico-border-radius); +} */ + +.ui-tabs .ui-tabs-nav li.ui-tabs-active { + margin-bottom: 0; + padding-bottom: 0; + border-radius: var(--pico-border-radius); + border:none; +} +:is(.ui-tabs-tab).ui-state-default,.ui-state-default{ + border-radius: var(--pico-border-radius); +} +.ui-tabs-collapsible .ui-tabs-nav li.ui-tabs-active .ui-tabs-anchor { + cursor: pointer; +} +.ui-tabs .ui-tabs-nav .ui-tabs-anchor:hover, +.ui-tabs .ui-tabs-nav li.ui-tabs-active .ui-tabs-anchor { + background : var(--pico-primary-hover-background); + color : var(--pico-contrast); +} + +:where(li.ui-tabs-tab, a.ui-tabs-anchor):first-child {border-top-left-radius: var(--pico-border-radius)} +:where(li.ui-tabs-tab, a.ui-tabs-anchor):last-child {border-top-right-radius: var(--pico-border-radius)} +.ui-tabs .ui-tabs-panel { + background : var(--pico-card-background-color); + display : block; + border : var(--ui-tab-panel-border); + padding : var(--pico-block-spacing-vertical) var(--pico-block-spacing-horizontal); +} + +/* CUSTOMIZED content loading via an Ajax call will have the ui-tabs-loading class. */ +.ui-tabs-loading { + border : var(--ui-tabs-loading); /* TODO */ +} + +/* -------------------- jQUERY UI Tooltip */ +/*.ui-tooltip { + padding: 8px; + position: absolute; + z-index: 9999; + max-width: 300px; +} +body .ui-tooltip { + border-width: 2px; +}*/ diff --git a/html/themes/blue-planet/css/pico.blue.min.css b/html/themes/blue-planet/css/pico.blue.min.css new file mode 100644 index 000000000..2cfd2e4d1 --- /dev/null +++ b/html/themes/blue-planet/css/pico.blue.min.css @@ -0,0 +1,4 @@ +@charset "UTF-8";/*! + * Pico CSS ✨ v2.0.6 (https://picocss.com) + * Copyright 2019-2024 - Licensed under MIT + */:root{--pico-font-family-emoji:"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";--pico-font-family-sans-serif:system-ui,"Segoe UI",Roboto,Oxygen,Ubuntu,Cantarell,Helvetica,Arial,"Helvetica Neue",sans-serif,var(--pico-font-family-emoji);--pico-font-family-monospace:ui-monospace,SFMono-Regular,"SF Mono",Menlo,Consolas,"Liberation Mono",monospace,var(--pico-font-family-emoji);--pico-font-family:var(--pico-font-family-sans-serif);--pico-line-height:1.5;--pico-font-weight:400;--pico-font-size:100%;--pico-text-underline-offset:0.1rem;--pico-border-radius:0.25rem;--pico-border-width:0.0625rem;--pico-outline-width:0.125rem;--pico-transition:0.2s ease-in-out;--pico-spacing:1rem;--pico-typography-spacing-vertical:1rem;--pico-block-spacing-vertical:var(--pico-spacing);--pico-block-spacing-horizontal:var(--pico-spacing);--pico-grid-column-gap:var(--pico-spacing);--pico-grid-row-gap:var(--pico-spacing);--pico-form-element-spacing-vertical:0.75rem;--pico-form-element-spacing-horizontal:1rem;--pico-group-box-shadow:0 0 0 rgba(0, 0, 0, 0);--pico-group-box-shadow-focus-with-button:0 0 0 var(--pico-outline-width) var(--pico-primary-focus);--pico-group-box-shadow-focus-with-input:0 0 0 0.0625rem var(--pico-form-element-border-color);--pico-modal-overlay-backdrop-filter:blur(0.375rem);--pico-nav-element-spacing-vertical:1rem;--pico-nav-element-spacing-horizontal:0.5rem;--pico-nav-link-spacing-vertical:0.5rem;--pico-nav-link-spacing-horizontal:0.5rem;--pico-nav-breadcrumb-divider:">";--pico-icon-checkbox:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(255, 255, 255)' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");--pico-icon-minus:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(255, 255, 255)' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='5' y1='12' x2='19' y2='12'%3E%3C/line%3E%3C/svg%3E");--pico-icon-chevron:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(136, 145, 164)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");--pico-icon-date:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(136, 145, 164)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='18' rx='2' ry='2'%3E%3C/rect%3E%3Cline x1='16' y1='2' x2='16' y2='6'%3E%3C/line%3E%3Cline x1='8' y1='2' x2='8' y2='6'%3E%3C/line%3E%3Cline x1='3' y1='10' x2='21' y2='10'%3E%3C/line%3E%3C/svg%3E");--pico-icon-time:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(136, 145, 164)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cpolyline points='12 6 12 12 16 14'%3E%3C/polyline%3E%3C/svg%3E");--pico-icon-search:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(136, 145, 164)' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'%3E%3C/circle%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'%3E%3C/line%3E%3C/svg%3E");--pico-icon-close:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(136, 145, 164)' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='18' y1='6' x2='6' y2='18'%3E%3C/line%3E%3Cline x1='6' y1='6' x2='18' y2='18'%3E%3C/line%3E%3C/svg%3E");--pico-icon-loading:url("data:image/svg+xml,%3Csvg fill='none' height='24' width='24' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg' %3E%3Cstyle%3E g %7B animation: rotate 2s linear infinite; transform-origin: center center; %7D circle %7B stroke-dasharray: 75,100; stroke-dashoffset: -5; animation: dash 1.5s ease-in-out infinite; stroke-linecap: round; %7D @keyframes rotate %7B 0%25 %7B transform: rotate(0deg); %7D 100%25 %7B transform: rotate(360deg); %7D %7D @keyframes dash %7B 0%25 %7B stroke-dasharray: 1,100; stroke-dashoffset: 0; %7D 50%25 %7B stroke-dasharray: 44.5,100; stroke-dashoffset: -17.5; %7D 100%25 %7B stroke-dasharray: 44.5,100; stroke-dashoffset: -62; %7D %7D %3C/style%3E%3Cg%3E%3Ccircle cx='12' cy='12' r='10' fill='none' stroke='rgb(136, 145, 164)' stroke-width='4' /%3E%3C/g%3E%3C/svg%3E")}@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.contrast,a.secondary{--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}tfoot td,tfoot th,thead td,thead th{--pico-font-weight:600;--pico-border-width:0.1875rem}code,kbd,pre,samp{--pico-font-family:var(--pico-font-family-monospace)}kbd{--pico-font-weight:bolder}:where(select,textarea),input:not([type=submit],[type=button],[type=reset],[type=checkbox],[type=radio],[type=file]){--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=group]:has(button.secondary:focus,[type=submit].secondary:focus,[type=button].secondary:focus,[role=button].secondary:focus),[role=search]: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=group]:has(button.contrast:focus,[type=submit].contrast:focus,[type=button].contrast:focus,[role=button].contrast:focus),[role=search]: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=group] [role=button],[role=group] [type=button],[role=group] [type=submit],[role=group] button,[role=search] [role=button],[role=search] [type=button],[role=search] [type=submit],[role=search] 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)}:root:not([data-theme=dark]),[data-theme=light]{--pico-background-color:#fff;--pico-color:#373c44;--pico-text-selection-color:rgba(116, 139, 248, 0.25);--pico-muted-color:#646b79;--pico-muted-border-color:#e7eaf0;--pico-primary:#2060df;--pico-primary-background:#2060df;--pico-primary-border:var(--pico-primary-background);--pico-primary-underline:rgba(32, 96, 223, 0.5);--pico-primary-hover:#184eb8;--pico-primary-hover-background:#1d59d0;--pico-primary-hover-border:var(--pico-primary-hover-background);--pico-primary-hover-underline:var(--pico-primary-hover);--pico-primary-focus:rgba(116, 139, 248, 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:var(--pico-background-color);--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}:root:not([data-theme=dark]) input:is([type=submit],[type=button],[type=reset],[type=checkbox],[type=radio],[type=file]),[data-theme=light] 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(137, 153, 249, 0.1875);--pico-muted-color:#7b8495;--pico-muted-border-color:#202632;--pico-primary:#8999f9;--pico-primary-background:#2060df;--pico-primary-border:var(--pico-primary-background);--pico-primary-underline:rgba(137, 153, 249, 0.5);--pico-primary-hover:#aeb5fb;--pico-primary-hover-background:#3c71f7;--pico-primary-hover-border:var(--pico-primary-hover-background);--pico-primary-hover-underline:var(--pico-primary-hover);--pico-primary-focus:rgba(137, 153, 249, 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(137, 153, 249, 0.1875);--pico-muted-color:#7b8495;--pico-muted-border-color:#202632;--pico-primary:#8999f9;--pico-primary-background:#2060df;--pico-primary-border:var(--pico-primary-background);--pico-primary-underline:rgba(137, 153, 249, 0.5);--pico-primary-hover:#aeb5fb;--pico-primary-hover-background:#3c71f7;--pico-primary-hover-border:var(--pico-primary-hover-background);--pico-primary-hover-underline:var(--pico-primary-hover);--pico-primary-focus:rgba(137, 153, 249, 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)}[type=checkbox],[type=radio],[type=range],progress{accent-color:var(--pico-primary)}*,::after,::before{box-sizing:border-box;background-repeat:no-repeat}::after,::before{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}body{width:100%;margin:0}main{display:block}body>footer,body>header,body>main{padding-block:var(--pico-block-spacing-vertical)}section{margin-bottom:var(--pico-block-spacing-vertical)}.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{grid-column-gap:var(--pico-grid-column-gap);grid-row-gap:var(--pico-grid-row-gap);display:grid;grid-template-columns:1fr}@media (min-width:768px){.grid{grid-template-columns:repeat(auto-fit,minmax(0%,1fr))}}.grid>*{min-width:0}.overflow-auto{overflow:auto}b,strong{font-weight:bolder}sub,sup{position:relative;font-size:.75em;line-height:0;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.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) * .25)}:where(dl,ol,ul) :where(dl,ol,ul){margin:0;margin-top:calc(var(--pico-typography-spacing-vertical) * .25)}ul li{list-style:square}mark{padding:.125rem .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:.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) * .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)}:where(a:not([role=button])),[role=link]{--pico-color:var(--pico-primary);--pico-background-color:transparent;--pico-underline:var(--pico-primary-underline);outline:0;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{margin:0;overflow:visible;font-family:inherit;text-transform:none}[type=button],[type=reset],[type=submit],button{-webkit-appearance:button}[role=button],[type=button],[type=file]::file-selector-button,[type=reset],[type=submit],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:0;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)}[role=button]:is(:hover,:active,:focus),[role=button]:is([aria-current]:not([aria-current=false])),[type=button]:is(:hover,:active,:focus),[type=button]:is([aria-current]:not([aria-current=false])),[type=file]::file-selector-button:is(:hover,:active,:focus),[type=file]::file-selector-button:is([aria-current]:not([aria-current=false])),[type=reset]:is(:hover,:active,:focus),[type=reset]:is([aria-current]:not([aria-current=false])),[type=submit]:is(:hover,:active,:focus),[type=submit]:is([aria-current]:not([aria-current=false])),button:is(:hover,:active,:focus),button:is([aria-current]:not([aria-current=false])){--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)}[role=button]:focus,[role=button]: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,[type=reset]:focus,[type=reset]:is([aria-current]:not([aria-current=false])):focus,[type=submit]:focus,[type=submit]:is([aria-current]:not([aria-current=false])):focus,button:focus,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=button],[type=reset],[type=submit]{margin-bottom:var(--pico-spacing)}:is(button,[type=submit],[type=button],[role=button]).secondary,[type=file]::file-selector-button,[type=reset]{--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=file]::file-selector-button:is([aria-current]:not([aria-current=false]),:hover,:active,:focus),[type=reset]: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=file]::file-selector-button:focus,[type=file]::file-selector-button:is([aria-current]:not([aria-current=false])):focus,[type=reset]:focus,[type=reset]: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:.5;pointer-events:none}:where(table){width:100%;border-collapse:collapse;border-spacing:0;text-indent:0}td,th{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 td,tfoot th{border-top:var(--pico-border-width) solid var(--pico-table-border-color);border-bottom:0}table.striped tbody tr:nth-child(odd) td,table.striped tbody tr:nth-child(odd) th{background-color:var(--pico-table-row-stripped-background-color)}: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,kbd,pre,samp{font-size:.875em;font-family:var(--pico-font-family)}pre code{font-size:inherit;font-family:inherit}pre{-ms-overflow-style:scrollbar;overflow:auto}code,kbd,pre{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:.375rem}pre{display:block;margin-bottom:var(--pico-spacing);overflow-x:auto}pre>code{display:block;padding:var(--pico-spacing);background:0 0;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{display:block;margin:0;padding:0}figure figcaption{padding:calc(var(--pico-spacing) * .5) 0;color:var(--pico-muted-color)}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}input,optgroup,select,textarea{margin:0;font-size:1rem;line-height:var(--pico-line-height);font-family:inherit;letter-spacing:inherit}input{overflow:visible}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:0}:-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}fieldset legend,label{display:block;margin-bottom:calc(var(--pico-spacing) * .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) * .5)}button[type=submit],input:not([type=checkbox],[type=radio]),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:0;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)}:where(select,textarea):not([readonly]):is(:active,:focus),input:not([type=submit],[type=button],[type=reset],[type=checkbox],[type=radio],[readonly]):is(:active,:focus){--pico-background-color:var(--pico-form-element-active-background-color)}:where(select,textarea):not([readonly]):is(:active,:focus),input:not([type=submit],[type=button],[type=reset],[role=switch],[readonly]):is(:active,:focus){--pico-border-color:var(--pico-form-element-active-border-color)}:where(select,textarea):not([readonly]):focus,input:not([type=submit],[type=button],[type=reset],[type=range],[type=file],[readonly]):focus{--pico-box-shadow:0 0 0 var(--pico-outline-width) var(--pico-form-element-focus-color)}:where(fieldset[disabled]) :is(input:not([type=submit],[type=button],[type=reset]),select,textarea),input:not([type=submit],[type=button],[type=reset])[disabled],label[aria-disabled=true],select[disabled],textarea[disabled]{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 .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 .75rem}input::-webkit-input-placeholder,input::placeholder,select:invalid,textarea::-webkit-input-placeholder,textarea::placeholder{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 .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 .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 .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) * -.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) * .25)}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:-.125em;margin-inline-end:.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:.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:.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:.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 .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:active[aria-invalid=true],[type=checkbox]:checked:focus[aria-invalid=true],[type=checkbox]:checked[aria-invalid=true],[type=checkbox][role=switch]:checked:active[aria-invalid=true],[type=checkbox][role=switch]:checked:focus[aria-invalid=true],[type=checkbox][role=switch]:checked[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=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,[type=radio][aria-invalid=false]:checked,[type=radio][aria-invalid=false]:checked:active,[type=radio][aria-invalid=false]:checked:focus{--pico-border-color:var(--pico-form-element-valid-border-color)}[type=checkbox]:checked:active[aria-invalid=true],[type=checkbox]:checked:focus[aria-invalid=true],[type=checkbox]:checked[aria-invalid=true],[type=checkbox][role=switch]:checked:active[aria-invalid=true],[type=checkbox][role=switch]:checked:focus[aria-invalid=true],[type=checkbox][role=switch]:checked[aria-invalid=true],[type=radio]:checked:active[aria-invalid=true],[type=radio]:checked:focus[aria-invalid=true],[type=radio]:checked[aria-invalid=true]{--pico-border-color:var(--pico-form-element-invalid-border-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) * .5)}[type=color]::-moz-color-swatch{border:0;border-radius:calc(var(--pico-border-radius) * .5)}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}[type=file]{--pico-color:var(--pico-muted-color);margin-left:calc(var(--pico-outline-width) * -1);padding:calc(var(--pico-form-element-spacing-vertical) * .5) 0;padding-left:var(--pico-outline-width);border:0;border-radius:0;background:0 0}[type=file]::file-selector-button{margin-right:calc(var(--pico-spacing)/ 2);padding:calc(var(--pico-form-element-spacing-vertical) * .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)}[type=range]{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:100%;height:1.25rem;background:0 0}[type=range]::-webkit-slider-runnable-track{width:100%;height:.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:.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:.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:-.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:-.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:-.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: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) + .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 .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 .75rem}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) * .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:0}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);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)}article>footer,article>header{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) * .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)}details.dropdown{position:relative;border-bottom:none}details.dropdown summary::after,details.dropdown>a::after,details.dropdown>button::after{display:block;width:1rem;height:calc(1rem * var(--pico-line-height,1.5));margin-inline-start:.25rem;float:right;transform:rotate(0) translateX(.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:0}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(0) translateX(0)}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) * .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) * .5)}details.dropdown summary+ul li:last-of-type{margin-bottom:calc(var(--pico-form-element-spacing-vertical) * .5)}details.dropdown summary+ul li a{display:block;margin:calc(var(--pico-form-element-spacing-vertical) * -.5) calc(var(--pico-form-element-spacing-horizontal) * -1);padding:calc(var(--pico-form-element-spacing-vertical) * .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:active,details.dropdown summary+ul li a:focus,details.dropdown summary+ul li a:focus-visible,details.dropdown summary+ul li a:hover,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:0 0;content:"";cursor:default}label>details.dropdown{margin-top:calc(var(--pico-spacing) * .25)}[role=group],[role=search]{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 transparent);vertical-align:middle;transition:box-shadow var(--pico-transition)}[role=group] input:not([type=checkbox],[type=radio]),[role=group] select,[role=group]>*,[role=search] input:not([type=checkbox],[type=radio]),[role=search] select,[role=search]>*{position:relative;flex:1 1 auto;margin-bottom:0}[role=group] input:not([type=checkbox],[type=radio]):not(:first-child),[role=group] select:not(:first-child),[role=group]>:not(:first-child),[role=search] input:not([type=checkbox],[type=radio]):not(:first-child),[role=search] select:not(:first-child),[role=search]>:not(:first-child){margin-left:0;border-top-left-radius:0;border-bottom-left-radius:0}[role=group] input:not([type=checkbox],[type=radio]):not(:last-child),[role=group] select:not(:last-child),[role=group]>:not(:last-child),[role=search] input:not([type=checkbox],[type=radio]):not(:last-child),[role=search] select:not(:last-child),[role=search]>:not(:last-child){border-top-right-radius:0;border-bottom-right-radius:0}[role=group] input:not([type=checkbox],[type=radio]):focus,[role=group] select:focus,[role=group]>:focus,[role=search] input:not([type=checkbox],[type=radio]):focus,[role=search] select:focus,[role=search]>:focus{z-index:2}[role=group] [role=button]:not(:first-child),[role=group] [type=button]:not(:first-child),[role=group] [type=reset]:not(:first-child),[role=group] [type=submit]:not(:first-child),[role=group] button:not(:first-child),[role=group] input:not([type=checkbox],[type=radio]):not(:first-child),[role=group] select:not(:first-child),[role=search] [role=button]:not(:first-child),[role=search] [type=button]:not(:first-child),[role=search] [type=reset]:not(:first-child),[role=search] [type=submit]:not(:first-child),[role=search] button:not(:first-child),[role=search] input:not([type=checkbox],[type=radio]):not(:first-child),[role=search] select:not(:first-child){margin-left:calc(var(--pico-border-width) * -1)}[role=group] [role=button],[role=group] [type=button],[role=group] [type=reset],[role=group] [type=submit],[role=group] button,[role=search] [role=button],[role=search] [type=button],[role=search] [type=reset],[role=search] [type=submit],[role=search] button{width:auto}@supports selector(:has(*)){[role=group]:has(button:focus,[type=submit]:focus,[type=button]:focus,[role=button]:focus),[role=search]: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=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,[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{border-color:transparent}[role=group]:has(input:not([type=submit],[type=button]):focus,select:focus),[role=search]:has(input:not([type=submit],[type=button]):focus,select:focus){--pico-group-box-shadow:var(--pico-group-box-shadow-focus-with-input)}[role=group]:has(input:not([type=submit],[type=button]):focus,select:focus) [role=button],[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) [type=submit],[role=group]:has(input:not([type=submit],[type=button]):focus,select:focus) button,[role=search]:has(input:not([type=submit],[type=button]):focus,select:focus) [role=button],[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) [type=submit],[role=search]:has(input:not([type=submit],[type=button]):focus,select:focus) 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=group] [role=button]:focus,[role=group] [type=button]:focus,[role=group] [type=reset]:focus,[role=group] [type=submit]:focus,[role=group] button:focus,[role=search] [role=button]:focus,[role=search] [type=button]:focus,[role=search] [type=reset]:focus,[role=search] [type=submit]:focus,[role=search] 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}[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:-.125em}[aria-busy=true]:not(input,select,textarea,html):not(:empty)::before{margin-inline-end:calc(var(--pico-spacing) * .5)}[aria-busy=true]:not(input,select,textarea,html):empty{text-align:center}[role=button][aria-busy=true],[type=button][aria-busy=true],[type=reset][aria-busy=true],[type=submit][aria-busy=true],a[aria-busy=true],button[aria-busy=true]{pointer-events:none}: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:100%;height:inherit;min-height:100%;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 [role=button],dialog article>footer button{margin-bottom:0}dialog article>footer [role=button]:not(:first-of-type),dialog article>footer button:not(:first-of-type){margin-left:calc(var(--pico-spacing) * .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:.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,0);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:.2s;animation-timing-function:ease-in-out;animation-fill-mode:both}:where(.modal-is-opening,.modal-is-closing) dialog{animation-duration:.8s;animation-name:modal-overlay}:where(.modal-is-opening,.modal-is-closing) dialog>article{animation-delay:.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}}: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 [role=button],nav li [type=button],nav li 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 li,aside nav,aside ol,aside ul{display:block}aside li{padding:calc(var(--pico-nav-element-spacing-vertical) * .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{display:inline-block;vertical-align:baseline}progress{-webkit-appearance:none;-moz-appearance:none;display:inline-block;appearance:none;width:100%;height:.5rem;margin-bottom:calc(var(--pico-spacing) * .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:0 0}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}}[data-tooltip]{position:relative}[data-tooltip]:not(a,button,input){border-bottom:1px dotted;text-decoration:none;cursor:help}[data-tooltip]::after,[data-tooltip]::before,[data-tooltip][data-placement=top]::after,[data-tooltip][data-placement=top]::before{display:block;z-index:99;position:absolute;bottom:100%;left:50%;padding:.25rem .5rem;overflow:hidden;transform:translate(-50%,-.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:.875rem;text-decoration:none;text-overflow:ellipsis;white-space:nowrap;opacity:0;pointer-events:none}[data-tooltip]::after,[data-tooltip][data-placement=top]::after{padding:0;transform:translate(-50%,0);border-top:.3rem solid;border-right:.3rem solid transparent;border-left:.3rem solid transparent;border-radius:0;background-color:transparent;content:"";color:var(--pico-tooltip-background-color)}[data-tooltip][data-placement=bottom]::after,[data-tooltip][data-placement=bottom]::before{top:100%;bottom:auto;transform:translate(-50%,.25rem)}[data-tooltip][data-placement=bottom]:after{transform:translate(-50%,-.3rem);border:.3rem solid transparent;border-bottom:.3rem solid}[data-tooltip][data-placement=left]::after,[data-tooltip][data-placement=left]::before{top:50%;right:100%;bottom:auto;left:auto;transform:translate(-.25rem,-50%)}[data-tooltip][data-placement=left]:after{transform:translate(.3rem,-50%);border:.3rem solid transparent;border-left:.3rem solid}[data-tooltip][data-placement=right]::after,[data-tooltip][data-placement=right]::before{top:50%;right:auto;bottom:auto;left:100%;transform:translate(.25rem,-50%)}[data-tooltip][data-placement=right]:after{transform:translate(-.3rem,-50%);border:.3rem solid transparent;border-right:.3rem solid}[data-tooltip]:focus::after,[data-tooltip]:focus::before,[data-tooltip]:hover::after,[data-tooltip]:hover::before{opacity:1}@media (hover:hover) and (pointer:fine){[data-tooltip]:focus::after,[data-tooltip]:focus::before,[data-tooltip]:hover::after,[data-tooltip]:hover::before{--pico-tooltip-slide-to:translate(-50%, -0.25rem);transform:translate(-50%,.75rem);animation-duration:.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%,-.25rem);animation-name:tooltip-caret-slide}[data-tooltip][data-placement=bottom]:focus::after,[data-tooltip][data-placement=bottom]:focus::before,[data-tooltip][data-placement=bottom]:hover::after,[data-tooltip][data-placement=bottom]:hover::before{--pico-tooltip-slide-to:translate(-50%, 0.25rem);transform:translate(-50%,-.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%,-.5rem);animation-name:tooltip-caret-slide}[data-tooltip][data-placement=left]:focus::after,[data-tooltip][data-placement=left]:focus::before,[data-tooltip][data-placement=left]:hover::after,[data-tooltip][data-placement=left]:hover::before{--pico-tooltip-slide-to:translate(-0.25rem, -50%);transform:translate(.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(.05rem,-50%);animation-name:tooltip-caret-slide}[data-tooltip][data-placement=right]:focus::after,[data-tooltip][data-placement=right]:focus::before,[data-tooltip][data-placement=right]:hover::after,[data-tooltip][data-placement=right]:hover::before{--pico-tooltip-slide-to:translate(0.25rem, -50%);transform:translate(-.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(-.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}}[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}[tabindex],a,area,button,input,label,select,summary,textarea{-ms-touch-action:manipulation}[dir=rtl]{direction:rtl}@media (prefers-reduced-motion:reduce){:not([aria-busy=true]),:not([aria-busy=true])::after,:not([aria-busy=true])::before{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}} \ No newline at end of file diff --git a/html/themes/blue-planet/index.php b/html/themes/blue-planet/index.php new file mode 100644 index 000000000..2563dfcbe --- /dev/null +++ b/html/themes/blue-planet/index.php @@ -0,0 +1,1351 @@ + + + + + + + + XCL Theme built with PicoCSS for XOOPSCube + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ +
+ + +
+ +
+

Web Application Platform

+

Just Use it!

+
+ +
+
+
+
Integrate responsive frameworks and libraries in your Modules and Themes, simple customize a template set.
+
+
+

Content Management System, Cache, Duplicatable Modules (multisites), User Groups Management, Themes, built-in Search.

+
+
+
+ +
+
+
Scalability is the property of a system to handle a growing amount of work by adding resources to the system. 
+
+
+

Scalability without costly contracts, hosting cloud hidden costs, limitations or restrictions. Self-hosted and local first.

+
+
+
+ +
+
+
A secure and modular architecture design with self-contained components known as modules. 
+
+
+
Each module encapsulates a specific functionality, operates independently, and can be developed, maintained, and reused safely.
+
+
+ +
+ +
+ + +
+ + + + +
+ +
+

Default theme layout

+The placeholders for the content and blocks are defined by the theme layout. +
+ You can create a custom center-block-left to trigger a component display on the Top page
+ Add to the Block Title a prefix "top-" and select the target "Toppage".
+ +
+

Header Nav

+
+
+
Logo
+
User menu  Light | Dark
+
+
+

Component top center

+
+
grid-column
center-block-left
Block Title prefix: top-
+
grid-column
center-block-center
Block Title prefix: top-
+
grid-column
center-block-right
Block Title prefix: top-
+
+
+

Main container

+
+
aside nav
Side-Left
Default Blocks:
  • User Menu
  • Main Menu
  • Themes
+
div.content
App Start Page [template]
or
Module Content
+
+ aside nav +
Side-Right +
Block-Right and for Admin Panel a Block Title with prefix 'admin' +
+
+
+

Section container-fluid

+
+
grid-column
center-block-left
+
grid-column
center-block-left
+
grid-column
center-block-left
+
+
+
Footer
+
+ +
+ +
+

Top Page Center Blocks

+ +
    +
  1. Browse to Admin > Block Management > Add Custom Block +
  2. Give the Block Title e.g. top-none-myblock
    +the prefix top- with none- only show the block content +
  3. Select the side Center (left, center, right) +
  4. Write some content +
  5. Select Target Modules : Toppage
    6. +
  6. Select Target Groups : check all groups and submit
    7. +
+
+ + +

Pico

+

A pure HTML example, without dependencies.

+ + + +
+

Accordions

+
+ Accordion 1 +

+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque urna diam, + tincidunt nec porta sed, auctor id velit. Etiam venenatis nisl ut orci consequat, vitae + tempus quam commodo. Nulla non mauris ipsum. Aliquam eu posuere orci. Nulla convallis + lectus rutrum quam hendrerit, in facilisis elit sollicitudin. Mauris pulvinar pulvinar + mi, dictum tristique elit auctor quis. Maecenas ac ipsum ultrices, porta turpis sit + amet, congue turpis. +

+
+
+ Accordion 2 +
    +
  • Vestibulum id elit quis massa interdum sodales.
    • +
  • Nunc quis eros vel odio pretium tincidunt nec quis neque.
    • +
  • Quisque sed eros non eros ornare elementum.
    • +
  • Cras sed libero aliquet, porta dolor quis, dapibus ipsum.
    • +
+
+
+ + +
+
+

Article

+ header +
+

+ Content paragraph - Nullam dui arcu, malesuada et sodales eu, efficitur vitae dolor. Sed ultricies dolor non + ante vulputate hendrerit. Vivamus sit amet suscipit sapien. Nulla iaculis eros a elit + pharetra egestas. Nunc placerat facilisis cursus. Sed vestibulum metus eget dolor pharetra + rutrum. +

+
+ Footer - Duis nec elit placerat, suscipit nibh quis, finibus neque. +
+
+ + +
+

Buttons

+

+ + + +

+

+ + + +

+
+ + +
+
+

Form elements

+ + + + + + + + + Curabitur consequat lacus at lacus porta finibus. + + + + + + + + + + + + +
+ + + +
+ +
+ + + + + + + + +
+ +
+ +
+ Checkboxes + + +
+ + +
+ Radio buttons + + +
+ + +
+ Switches + + +
+
+ + + + +
+
+ + +
+

Group

+
+
+ + +
+
+
+ + +
+

Loading

+
+ +
+ + + + + +
+

Preview

+

+ Sed ultricies dolor non ante vulputate hendrerit. Vivamus sit amet suscipit sapien. Nulla + iaculis eros a elit pharetra egestas. +

+
+
+ + + +
+
+ +
+
+
+ + +
+

Progress bar

+ + +
+ + +
+

Tables

+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
#HeadingHeadingHeadingHeadingHeadingHeadingHeading
1CellCellCellCellCellCellCell
2CellCellCellCellCellCellCell
3CellCellCellCellCellCellCell
+
+
+ + +
+

Typography

+

+ Aliquam lobortis vitae nibh nec rhoncus. Morbi mattis neque eget efficitur feugiat. + Vivamus porta nunc a erat mattis, mattis feugiat turpis pretium. Quisque sed tristique + felis. +

+ + +
+ "Maecenas vehicula metus tellus, vitae congue turpis hendrerit non. Nam at dui sit amet + ipsum cursus ornare." +
+ - Phasellus eget lacinia +
+
+ + +

Lists

+
    +
  • Aliquam lobortis lacus eu libero ornare facilisis.
    • +
  • Nam et magna at libero scelerisque egestas.
    • +
  • Suspendisse id nisl ut leo finibus vehicula quis eu ex.
    • +
  • Proin ultricies turpis et volutpat vehicula.
    • +
+ + +

Inline text elements

+
+

Primary link

+

+ Secondary link +

+

+ Contrast link +

+
+
+

Bold

+

Italic

+

Underline

+
+
+

Deleted

+

Inserted

+

Strikethrough

+
+
+

Small

+

Text Sub

+

Text Sup

+
+
+

+ Abbr. +

+

Kbd

+

Highlighted

+
+ + +

Heading 3

+

+ Integer bibendum malesuada libero vel eleifend. Fusce iaculis turpis ipsum, at efficitur + sem scelerisque vel. Aliquam auctor diam ut purus cursus fringilla. Class aptent taciti + sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. +

+

Heading 4

+

+ Cras fermentum velit vitae auctor aliquet. Nunc non congue urna, at blandit nibh. Donec ac + fermentum felis. Vivamus tincidunt arcu ut lacus hendrerit, eget mattis dui finibus. +

+
Heading 5
+

+ Donec nec egestas nulla. Sed varius placerat felis eu suscipit. Mauris maximus ante in + consequat luctus. Morbi euismod sagittis efficitur. Aenean non eros orci. Vivamus ut diam + sem. +

+
Heading 6
+

+ Ut sed quam non mauris placerat consequat vitae id risus. Vestibulum tincidunt nulla ut + tortor posuere, vitae malesuada tortor molestie. Sed nec interdum dolor. Vestibulum id + auctor nisi, a efficitur sem. Aliquam sollicitudin efficitur turpis, sollicitudin + hendrerit ligula semper id. Nunc risus felis, egestas eu tristique eget, convallis in + velit. +

+ + +
+ + + + + + + + + + + + Legacy to Remind Us of Where We Come From + +
+ Image from + SVG Image +
+
+
+ + +
+ + + + + + +
+ + + +
+ +

jQuery UI

+ +
+

Accordion

+ +
+

Section 1

+
+

+ Mauris mauris ante, blandit et, ultrices a, suscipit eget, quam. Integer + ut neque. Vivamus nisi metus, molestie vel, gravida in, condimentum sit + amet, nunc. Nam a nibh. Donec suscipit eros. Nam mi. Proin viverra leo ut + odio. Curabitur malesuada. Vestibulum a velit eu ante scelerisque vulputate. +

+
+

Section 2

+
+

+ Sed non urna. Donec et ante. Phasellus eu ligula. Vestibulum sit amet + purus. Vivamus hendrerit, dolor at aliquet laoreet, mauris turpis porttitor + velit, faucibus interdum tellus libero ac justo. Vivamus non quam. In + suscipit faucibus urna. +

+
+

Section 3

+
+

+ Nam enim risus, molestie et, porta ac, aliquam ac, risus. Quisque lobortis. + Phasellus pellentesque purus in massa. Aenean in pede. Phasellus ac libero + ac tellus pellentesque semper. Sed ac felis. Sed commodo, magna quis + lacinia ornare, quam ante aliquam nisi, eu iaculis leo purus venenatis dui. +

+
    +
  • List item one
    • +
  • List item two
    • +
  • List item three
    • +
+
+

Section 4

+
+

+ Cras dictum. Pellentesque habitant morbi tristique senectus et netus + et malesuada fames ac turpis egestas. Vestibulum ante ipsum primis in + faucibus orci luctus et ultrices posuere cubilia Curae; Aenean lacinia + mauris vel est. +

+

+ Suspendisse eu nisl. Nullam ut libero. Integer dignissim consequat lectus. + Class aptent taciti sociosqu ad litora torquent per conubia nostra, per + inceptos himenaeos. +

+
+
+
+ + +
+
+ +
+ + +

Button Widget with icons

+
+ + + + + + +
+
+ +
+

Button - Widget

+ +
+ + + An anchor +
+
+ +
+

CSS Buttons

+
+ + + An anchor +
+
+ +
+ +
+ + + +
+

Checkbox and radio button widgets

+ + +
+
+ Rental Car +
+ + + + + + + + + + +
+
+
+ +
+ + +
+

Progress bar

+ + +
+
Starting download...
+
+
+ + +
+ + +
+

Datepicker

+ +
+ Date:
+
+
+ + +
+

Dialog

+ +
+

This is an animated dialog which is useful for displaying information. The dialog window can be moved, resized and closed with the 'x' icon.

+
+ + +
+ + +
+ +
+

Menu

+ + +
+ +
+

Menu Categories

+ + + + +
+ +
+

Menu Icons

+ + + +
+ +
+ + +
+ + +
+

select menu

+
+ +
+ + + + + + + + + + + +
+ +
+ +
+ +
+

PicoSS Dropdown

+ +
+ Dropdown + +
+ + + +
+
+ + +
+ + +
+ +

Block-center - Grid

+ +
+
+

block-center-left

+
+
block title
+

content

+
+
+
+

block-center-center

+
+
block title
+

content

+
+
+
+

block-center-rigth

+
+
block title
+

content

+
+
+
+ +
+
+
+
block title
+

content

+
+
+
+
+
block title
+

content

+
+
+
+
+
block title
+

content

+
+
+
+
+ + + + + + + +
+
+ +

Confirm your action!

+
+

+ Cras sit amet maximus risus. Pellentesque sodales odio sit amet augue finibus + pellentesque. Nullam finibus risus non semper euismod. +

+ +
+ + + + + +
+ + + + + + +
+ + + + + \ No newline at end of file diff --git a/html/themes/blue-planet/js/index.html b/html/themes/blue-planet/js/index.html new file mode 100644 index 000000000..990cbd603 --- /dev/null +++ b/html/themes/blue-planet/js/index.html @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/html/themes/blue-planet/js/plugins.js b/html/themes/blue-planet/js/plugins.js new file mode 100644 index 000000000..6c38d4256 --- /dev/null +++ b/html/themes/blue-planet/js/plugins.js @@ -0,0 +1,169 @@ +/* + * XCL Theme Blue Planet built with PicoCSS v206 + * + * @version 2.4.0 + * @update 2024-04-20 + * @Date 2024-02-02 + * @author Nuno Luciano ( https://github.com/gigamaster ) + * @copyright (c) 2005-2024 The XOOPSCube Project, authors + * @license MIT + * @link https://github.com/xoopscube + * + * + * 1. Init + * 2. Modal + * -- jQuery Document Ready - helper plugins + * 3. Render SVG + * 4. Notification Time + * 5. Dropdown - block options, menu, etc + * 6. Close on click document + * 7. Highlight Message nav-tab active + * 8.1 remove border + * 8.2 url constructor + * 9. Aria-busy Toogle + */ + +/* + * 1. Init + */ + +/* + * 2. Modal Pico.css - https://picocss.com + * Copyright 2019-2024 - Licensed under MIT + */ +// Config +const isOpenClass = "modal-is-open"; +const openingClass = "modal-is-opening"; +const closingClass = "modal-is-closing"; +const scrollbarWidthCssVar = "--pico-scrollbar-width"; +const animationDuration = 400; // ms +let visibleModal = null; + +// Toggle modal +const toggleModal = (event) => { + event.preventDefault(); + const modal = document.getElementById(event.currentTarget.dataset.target); + if (!modal) return; + modal && (modal.open ? closeModal(modal) : openModal(modal)); +}; + +// Open modal +const openModal = (modal) => { + const { documentElement: html } = document; + const scrollbarWidth = getScrollbarWidth(); + if (scrollbarWidth) { + html.style.setProperty(scrollbarWidthCssVar, `${scrollbarWidth}px`); + } + html.classList.add(isOpenClass, openingClass); + setTimeout(() => { + visibleModal = modal; + html.classList.remove(openingClass); + }, animationDuration); + modal.showModal(); +}; + +// Close modal +const closeModal = (modal) => { + visibleModal = null; + const { documentElement: html } = document; + html.classList.add(closingClass); + setTimeout(() => { + html.classList.remove(closingClass, isOpenClass); + html.style.removeProperty(scrollbarWidthCssVar); + modal.close(); + }, animationDuration); +}; + +// Close with a click outside +document.addEventListener("click", (event) => { + if (visibleModal === null) return; + const modalContent = visibleModal.querySelector("article"); + const isClickInside = modalContent.contains(event.target); + !isClickInside && closeModal(visibleModal); +}); + +// Close with Esc key +document.addEventListener("keydown", (event) => { + if (event.key === "Escape" && visibleModal) { + closeModal(visibleModal); + } +}); + +// Get scrollbar width +const getScrollbarWidth = () => { + const scrollbarWidth = window.innerWidth - document.documentElement.clientWidth; + return scrollbarWidth; +}; + +// Is scrollbar visible +const isScrollbarVisible = () => { + return document.body.scrollHeight > screen.height; +}; + + +// DOCUMENT READY - Place any jQuery/helper plugins below ! +/* ---------- ---------- ---------- ---------- ---------- */ +// Do something on document ready +$(function () { + + // 3. Inline SVG icons + $('.svg').renderClassSvg(); + + // 4. Notification Time + $('div.runtime').fadeIn( 750 ).delay( 3000 ).fadeOut( 500 ); + + // 5. Dropdown - block options, menu, etc + $(".dropdown").on("click", ".dropdown-toggle", function (event) { + event.preventDefault(); + $('.dropdown').removeClass('isopen'); + $(this).parent().toggleClass('isopen'); + }); + + // 6. Close on click document + $(document).on("click", function (event) { + var $trigger = $(".dropdown"); + if ($trigger !== event.target && !$trigger.has(event.target).length) { + $(".dropdown").removeClass("isopen"); + } + }); + + // 7. Highlight Message nav-tab active + $("#tabs-mail").tabs({ + active: false, + collapsible: true, + classes: { + "ui-tabs": "taborder" + }, + beforeActivate: function (event, ui) { + window.open($(ui.newTab).find('a').attr('href'), '_self'); + return false; + }, + } + ); + // .find('.ui-tabs-tab').removeClass('ui-corner-all ui-corner-top'); + + // 8.1 Remove border from dropdown UL children + $(".ui-tabs-tab .dropdown-content ul").children().css( "border", "0" ); + + // 8.2 url constructor + const parseUrl = new URL(window.location.href); + const msgAction = parseUrl.searchParams.get("action"); + // If module message index, highlight the first nav-tab + if (msgAction == null) { + $('#tabs-mail ul.ui-tabs-nav li:first-child').addClass('ui-state-active'); + } else { + // Highlight current action nav-tab + $('a[href="index.php?action=' + msgAction + '"]').parent('li').addClass('ui-tabs-active ui-state-active'); + } + if (msgAction == 'settings'|| msgAction == 'blacklist'){ + // Highlight dropdown menu + $('.settings ').parent('li').addClass("ui-state-active"); + } + // 9. Aria-busy Toogle + $('[aria-busy="false"]').on( "click", function(event) { + event.stopPropagation(); + event.stopImmediatePropagation(); + $(this).prop("ariaBusy", true); + }); + +}); diff --git a/html/themes/blue-planet/manifesto.ini.php b/html/themes/blue-planet/manifesto.ini.php new file mode 100644 index 000000000..bdac3a0c9 --- /dev/null +++ b/html/themes/blue-planet/manifesto.ini.php @@ -0,0 +1,22 @@ + header { + --pico-block-spacing-vertical:0 +} +body>header { + --pico-block-spacing-vertical:0; + background: rgba(24 28 37 / 50%); + box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px; + backdrop-filter: blur(10px); + -webkit-backdrop-filter: blur(10px); + position: fixed; + top: 0; + left: 0; + z-index: 200; + width: 100vw; +} +body > main { + display : grid; + grid-template-rows: 1fr; + row-gap : 2rem; + margin-bottom : calc(var(--pico-spacing) * 4); + padding : 0 +} +body > main > * { + min-width : 0; + margin-bottom : 0 +} + +body > main > article { + --pico-block-spacing-vertical: var(--pico-spacing); + --pico-block-spacing-horizontal: var(--pico-spacing); +} + +/* Body align Aside and Main */ +body > main > aside#nav-left, +body > main > aside#block-right { + margin-top : .5rem; +} +body > main > div > aside { + background : var(--pico-card-background-color); + padding : .5rem; + padding : var(--pico-nav-element-spacing-vertical) var(--pico-nav-element-spacing-horizontal); /* @todo */ + border-radius : var(--pico-border-radius); +} + +/* BODY FOOTER */ +body > footer { + display : flex; + align-items : center; + padding : 1rem 0; + justify-content : center; + flex-wrap : wrap; +} +body > footer .logos { + display : inline-flex; + padding :.25rem .5rem; + border-bottom : 1px solid var(--pico-muted-border-color) +} +body > footer .logos a { padding:.25rem; margin:.5rem 0;} +body > footer .logos svg { + width : auto; + height : 1rem; + margin-right : calc(var(--pico-spacing) * .25); + transform : translateY(-.0625rem) +} + +/* ARTICLE H* ONLY CHILD (FORM COMMENT/REPLY) */ +article header :where( h2, h3, h4 ):only-child{ + margin : var(--pico-spacing) 0; +} +article header :where( p:last-child ){ + margin-bottom : 0; +} + +/* A HREF LINK COLOR */ +[data-theme=dark] { + :is([role=button], [type=button], [type=file]::file-selector-button, [type=reset], [type=submit], + button, [type=checkbox]:checked, [type=checkbox]:checked:active, [type=checkbox]:checked:focus, + [type=radio]:checked, [type=radio]:checked:active, [type=radio]:checked:focus):not(.outline) { + /* --pico-background-color: hsl(45 70% 40% / 1); */ + } + a:hover:not([role=button]) { + color:var(--pico-secondary-inverse) + } +} +[role=link]:focus, a:focus { +--background-color : var(--pico-primary-focus); + border-radius : var(--pico-border-radius); +} +/* A LINK UNDERLINE none */ +a {--pico-text-decoration: none; border:none} +:where(a:not([role=button])):is([aria-current]:not([aria-current=false]),:hover,:active,:focus), +[role=link] :is(a,[aria-current]:not([aria-current=false]),:hover,:active,:focus) { +--pico-text-decoration: none; +--pico-primary-underline: none; +--pico-underline: none; + border:none +} +/* A LINK - ICON ONLY */ +:is(a.btn-icon) { + border-radius : var(--pico-border-radius); + box-shadow : var(--pico-box-shadow); + display : inline-flex; + justify-content : center; + font-weight : 600; + font-size : 24px; + width : 30px; + height : 28px; + opacity : .8; + transition : opacity 0.3s ease-in; +} +:is(a.btn-icon):hover { + background : var(--pico-primary-focus); + color : var(--pico-secondary-inverse); + opacity : 1; +} + +hr { margin: 2rem 1rem; } /* @todo ? */ + +/* -------------------- ARTICLE FOOTER ACTION CONTROL */ +.action-control { + align-items : center; + column-gap : 1rem; + display : flex; + flex-wrap : wrap; + justify-content : space-between; + white-space : normal; +} + +/* -------------------- BANNER */ +section[role=banner] > div > article { + border : 1px solid var(--pico-muted-border-color); + border-radius : var(--pico-border-radius); + box-shadow : var(--pico-box-shadow); + margin : calc(var(--pico-block-spacing-vertical) * 3) 0; +} +[role=banner] .advert { + background : var(--pico-code-background-color); + border : 1px dotted var(--pico-form-element-disabled-border-color); + border-radius : var(--pico-border-radius); + display : block; + padding : var(--pico-spacing); + +} +[role=banner] .banner { + padding : var(--pico-spacing); + text-align : center; +} + +/* -------------------- BREADCRUMBS - MOBILE */ + +nav[aria-label=breadcrumb] { + margin-bottom : 1rem; /* space for pico header image */ +} + +@media (max-width : 768px) { + nav[aria-label=breadcrumb] ul { + list-style-type: none; + /*font-size: 16px;*/ + margin : 0; + padding : 10px 0; + /* truncate */ + white-space : nowrap; + max-width : 100%; + overflow : hidden; + } + nav[aria-label=breadcrumb] li { + display : inline-block; + max-width : 18%; /* truncate */ + width : auto; + white-space : nowrap; + overflow : hidden; + text-overflow: ellipsis; + } + nav[aria-label=breadcrumb] li:last-child {max-width: 30%;} + nav[aria-label=breadcrumb] li:first-child:before {content: none;} + nav[aria-label=breadcrumb] li a span:hover {text-decoration: underline} + nav[aria-label=breadcrumb] li, + nav[aria-label=breadcrumb] li:last-child {display: none} + nav[aria-label=breadcrumb] li:nth-last-child(2) {display: block;max-width: 100%;} + nav[aria-label=breadcrumb] li a {text-decoration: none} + nav[aria-label=breadcrumb] li:nth-last-child(2) a:after, + nav[aria-label=breadcrumb] ul li:not(:last-child) ::after {content: '';} + nav[aria-label=breadcrumb] li:nth-last-child(2) a:before { + content : ' ↚ '; + display : inline-flex; + min-width : 5ch; + background : var(--pico-primary); + border-radius:var(--pico-border-radius); + color : var(--pico-primary-inverse); + margin-right: .5rem; + place-content: center; + } + nav[aria-label=breadcrumb] li:nth-last-child(2):before {content: none} + + section.block-center { + background : var(--pico-contrast-inverse); + border : var(--pico-muted-border-color); + margin-bottom: 0; + padding : calc(var(--pico-spacing) * 1) calc(var(--pico-spacing) * 1); + } +} + +/* -------------------- BADGE & BUTTONS */ +.badge { + background : hsla(205, 15%, 40%, 0.25); + border-radius : var(--pico-border-radius); + font-size : 12px; + min-width : 3ch; + display : inline-block; + padding : 0 0.5rem;vertical-align: baseline; +} + +/* article h3 :is(.badge){font-size: 14px; } */ +:is(article, hgroup, .list-content) h3, h4, .block-title { + display : flex; + flex-wrap : wrap; + justify-content : space-between; + width : 100%; + align-items : baseline; +} + +/* BUTTON ACTION */ +:is(.delete) { + color : var(--pico-del-color); + border-color : var(--pico-del-color); +} +:is(button.vote) { + margin-bottom : 0; +} +:where([type=submit],[type=button],[role=button]) svg { + display : inline; + margin : 0 .25rem 0; + vertical-align: -.175em; +} + +:where(footer.action-control, footer div.grid) +:is(div, button, input[type=submit],input[type=button],[role=button], details.dropdown, input, a):not(summary) { + margin-bottom : 0; + white-space : nowrap; + /* border : 2px solid orange; */ +} +:where(footer.action-control) :is(a) { + border-radius : var(--pico-border-radius); + margin : 0 .5em; + padding : .25rem; +} +:where(footer.action-control) :is(a, button[type=submit]):hover { + background : var(--pico-primary-focus); + color : var(--pico-secondary-inverse); +} + +/* -------------------- BLOCKS */ +/* BLOCKS - Title */ +[class^="block-title"] { + color : var(--pico-muted-color); + font-weight : var(--pico-font-weight); + font-size : 1rem; + line-height : 1rem; + justify-content : space-between; + flex-wrap : nowrap; + margin-bottom : var(--pico-typography-spacing-vertical); + padding : 0; +} +[class^="block-title"] a { + display : inline-block; + width : 100%; +} +[class^="block-title"]:hover a { +--text-decoration : none; + color :var(--pico-primary-inverse); +} +[class^="block-title"]:hover { + background-position: 100% 100%; + background-size : 200% 100%; + text-decoration : none; + transition : background-size .3s .3s, background-position .3s; +} +/* BLOCKS - Content */ +[class="block-content"] { + margin-bottom : var(--pico-typography-spacing-vertical); +} +[class="block-content"] > ul { + padding : 0; +} +/* BLOCKS - MAIN MENU. SUB, MESSAGE */ +.menu-sub { + padding-left : 2.25rem; +} +/* BLOCK - PRIVATE MESSAGE */ +.block-messages ul#privatemessages { + flex-direction : column; + width : 100%; +} +.block-messages ul#privatemessages li { + padding : calc(var(--pico-nav-element-spacing-vertical) * .5) var(--pico-nav-element-spacing-horizontal); + width : inherit; +} +.block-messages ul#privatemessages li a { + display : inherit; +} +/* BLOCK - LIST MEMBERS */ +/* USERS ONLINE, SITE INFO */ +ul.list-column { + border-left : 4px solid var(--pico-muted-border-color); + column-count : 3; + column-width : 140px; + column-gap : 1.5rem; + column-rule : 4px solid var(--pico-muted-border-color); + margin : 1rem 0; + padding : 1rem; +} +ul.list-column li { + list-style : none; + margin-bottom :.5rem +} +ul.list-column li > h6 { + font-size : 16px; column-span: all; +} + +/* -------------------- ICONS */ +[class^="i-"] { + padding : .25rem .5rem +} +i[class^="i-"], +:is(span.icon, i.icon) { + padding-right : .5rem; +} + +summary[role="link"].contrast:is([aria-current],:hover,:active,:focus) { + background-color: transparent; + color : var(--pico-contrast-hover); +} + +/* -------------------- SEARCH FORM - PicoCSS default pill: 5rem */ + +[role=search]>:last-child { + border-top-right-radius: 1rem; + border-bottom-right-radius: 1rem; +} +[role=search]>:first-child { + border-top-left-radius: 1rem; + border-bottom-left-radius: 1rem; +} + +/* -------------------- TABLE - FONT-SIZE IN BLOCKS */ +[class^="block-"] table tbody, tfoot { + font-size : 14px; +} + +/* -------------------- TEXT SELECTION */ +::-moz-selection{background-color:var(--pico-primary);color:var(--pico-primary-inverse)} +::selection{background-color:var(--pico-primary);color:var(--pico-primary-inverse)} + +/* -------------------- TOOLTIP */ + +[data-tooltip] { + border-bottom-color: var( + --pico-border-color + ) +} +[data-tooltip]:after, main [data-tooltip]:before { + font-size : 12px +} + +/* -------------------- TYPOGRAPHY - FONT SIZE & SCALE */ +/* HEADING */ +h1, h2, h3, h4, h5 { +--font-weight: 400; + font-weight : var(--font-weight); + position : relative; +} +h1,h2,h3 { + font-family: "Nunito", sans-serif; + font-optical-sizing: auto; + font-weight: 400; + font-style: normal; +} + +p { text-wrap: pretty } + +@media (min-width: 576px) { :root { --pico-font-size: 106.25%; } } +@media (min-width: 768px) { :root { --pico-font-size: 112.5%; /* 18px */}} +@media (min-width: 1024px) { :root { --pico-font-size: 1rem; }} +@media (min-width: 1280px) { :root { --pico-font-size: 1rem; }} +@media (min-width: 1536px) { :root { --pico-font-size: 112.5%; /* 18px */}} + +/* -------------------- WRAPPER - GRID */ +/* -------------------- MEDIA QUERIES - desktop, tablet, mobile + CSS override PicoSS rules and specificity */ +@media(max-width: 576px) { + [role=button], [type=button], [type=file]::file-selector-button, [type=reset], [type=submit], button { + --pico-form-element-spacing-horizontal: 1.5rem; + } + [role=group] [role=button], [role=group] [type=button], [role=group] [type=submit], [role=group] button, [role=search] [role=button], [role=search] [type=button], [role=search] [type=submit], [role=search] button { + --pico-form-element-spacing-horizontal: 1.5rem; + } +} +@media screen and (max-width: 1024px) { + body>main>aside#nav-left, body>main>aside#block-right { + --pico-font-size: 1rem; /* 16px - 18px picocss */ + font-size: var(--pico-font-size); + margin-top: 0; + } + [data-self~="sm-hide"] {display:none!important}/* only show icon and hide text */ + + aside#nav-left { + position: fixed; + top: 0; + left: 0; + width: 240px; + height: 100%; + padding: .25em var(--pico-block-spacing-horizontal); + background: var(--pico-card-background-color); + box-shadow: var(--pico-card-box-shadow); + overflow-y: auto; + z-index: var(--z-above); + } + aside#nav-left { + transform: translate3d(0, 0, 0) translateX(-240px); + transition: all 0.25s cubic-bezier(0.16, 0.63, 0.45, 0.98); + } + aside#nav-left:target { + transform: translate3d(0, 0, 0) translateX(0); + } + .nav-open { + display: block; + position:absolute; + left: 18px; + top: 10px; + } + aside#nav-left .nav-close { + display: block; + height: 36px; + display: block; + cursor: pointer; + position: sticky; + left: 180px; + top: 10px; + width: fit-content; + width: -moz-fit-content; + + z-index: var(--z-sticky); + } +} +@media(min-width: 1024px) { + html { + scroll-padding-top:calc(var(--pico-header-height) + 2rem - .375rem) + } + [data-self="sm-hide"] { + display: revert!important; /* show icon & show text */ + } + body>header>nav.nav-top{ + position: relative; + } + body>main { + grid-template-rows:auto 1fr; + grid-template-columns: 14rem 1fr; + grid-template-areas: "menu main" "menu block-right"; + -moz-column-gap: 2rem; + column-gap: 2rem; + row-gap: 2rem; + } + .nav-logo {margin-left:0} + .nav-open, + aside#nav-left .nav-close{display: none;} + aside#nav-left { + position:relative; + width: 220px; + } + body>main:has(aside#block-right) { + grid-template-rows: auto 1fr; + grid-template-columns: 14rem 1fr; + grid-template-areas: "menu main" "menu block-right" + } + body>main>aside#nav-left { + grid-area: menu + } + body>main>[role=main] { + grid-area: main + } + body>main>aside#block-right { + grid-area: block-right; + align-self: start /* Sticky in grid */ + } + body>main>aside#block-right { + position: sticky; + top: calc(var(--pico-main-top-offset) + var(--pico-block-spacing-vertical)/2); + max-height: calc(var(--max-height) - var(--pico-spacing)); + transition: top var(--pico-transition); + transition-delay: 50ms + } + body>main>nav[aria-label=breadcrumb] { + display: none + } + body>main>aside>nav { + margin-top: calc(var(--pico-block-spacing-vertical)/2) + } + body>main>hgroup { + grid-area: header; + margin-top: calc(var(--pico-block-spacing-vertical)/2) + } +} +@media(min-width: 1280px) { + body>main { + grid-template-rows:auto 1fr; + grid-template-columns: 14rem 1fr 14rem; + grid-template-areas: "menu main block-right" "menu main block-right"; + row-gap: 2rem; + } + body>main:has(aside#block-right) { + grid-template-rows: auto 1fr; + grid-template-columns: 14rem 1fr 15rem; + grid-template-areas: "menu main block-right" "menu main block-right" + } + body>main>aside#nav-left { + grid-area: menu + } + body>main>[role=main] { + grid-area: main + } + body>main>aside#block-right { + grid-area: block-right + } +} +@media(min-width: 1536px) { + body>main { + grid-template-rows:auto 1fr; + grid-template-columns: 16rem 1fr 16rem; + grid-template-areas: "menu main block-right" "menu main block-right"; + row-gap: 3rem; + } +} +/* GRID CUSTOM COLUMNS */ +/* @todo ?? */ +.grid-left, .grid-right, .grid-2, .grid-3 { + align-items : start; + display : grid; + grid-template-columns: 1fr; + column-gap : calc(var(--pico-spacing) * .5); + row-gap : calc(var(--pico-spacing) * .5); + margin : 0; +} +.flex-justify { + align-items : center; + display : flex; + justify-content : space-between; + flex-basis : auto; + flex-wrap : wrap; +} +@media (min-width: 1024px) { + .grid-main, .grid-left, .grid-right, .grid-2, .grid-3 { + align-items : baseline; + display : grid; + column-gap : calc(var(--pico-spacing) * 1); + row-gap : calc(var(--pico-spacing) * 1); + } + .grid-main { + grid-template-columns: 1fr 3fr; + grid-column-gap: 1rem; + grid-row-gap: 1rem; + } + .grid-left { grid-template-columns: 1fr 3fr; } + .grid-right { grid-template-columns: 3fr 1fr; } + .grid-2 { grid-template-columns: 1fr 1fr; } + .grid-3 { grid-template-columns: 1fr 1fr 1fr; } +} + +/* -------------------- MODULE CKEditor */ +/* BUTTON CKEditor forced fix button 📐*/ +:is([class^="cke_button"],[class^="cke_combo_button"] ) { + margin-left : 0!important; +} +/* fix extra space of combo dropdown */ +.cke_combo_on a.cke_combo_button, .cke_combo_off a.cke_combo_button:hover, .cke_combo_off a.cke_combo_button:focus, +.cke_combo_off a.cke_combo_button:active { + padding : 0!important; +} +/* CKEditor darkmode */ +:root[data-theme=dark] { + --cke-color : #fff; + --cke-background: #111;; + --cke-filter : invert(1) contrast(1.15); + --cke-editable : #1c212c; + --cke-inner : #181b25; +} +/* try to switch mode, fallback ?? */ +:root[data-theme=light] { + --no-var : #fff; +} +/* CKEditor darkmode rounded */ +:is([class^=cke_top],[class^=cke_bottom]) { + filter : var(--cke-filter, none); + border-color : transparent!important; + /* Prevent editor from overflow prent container */ + max-width : 100%; + border-radius : 8px; +} +:where(.cke_chrome) { + border : none!important; +} +.cke_inner { + display : block; + background : var(--cke-inner, var(--no-var), #999)!important; + border : 1px solid var(--cke-background, var(--no-var), #999)!important; + border-radius : 8px; +} +:where(.cke_contents){ + background : var(--cke-editable, var(--no-var), #999)!important; + color : var(--cke-color, var(--no-var))!important; + border-radius : 8px; +} +/* customize editable container */ +.cke_editable { + background : var(--cke-editable, var(--no-var)); + color : var(--no-var, #fff); + border-radius : 8px; + padding : 0.5rem; + cursor : text; + margin : 0.25rem; + width : auto; + min-height : calc(100vh - 1rem); +} +textarea.cke_source { + background : var( --cke-background, #fff); + color : var( --cke-color, #111); + padding : 0.5rem; +} +.cke_wysiwyg_frame, .cke_wysiwyg_div { + background : var(--cke-editable, var(--no-var))!important; + color : var(--cke-color, var(--no-var))!important; +} + + +/* -------------------- MODULE D3FORUM */ +/* Used in Dropdowm*/ +.author-info { + align-items : center; + display : flex; + flex-direction : column; + padding : .25em; +} +/* AUTHOR AVATAR */ +.avatar { + border : 2px solid var(--pico-border-color); + border-radius : 50%; + margin : 0 auto; +} +/* AUTHOR DROPDOWN */ +:is(.w96) { + width : 96px; + height : 96px; + } + +/* AVATAR css from x-layout */ +[data-self="radius-circle"] { border-radius: 50%} + +/* NAV POST TREE ORDER */ +nav.post-tree-order { + align-items : center; + display : flex; + flex-wrap : wrap; + justify-content : start; + padding : var(--pico-spacing); + width : 100%; +} +nav.post-tree-order a { + border-radius : var(--pico-border-radius); + padding : .25em; + margin-right : .5em; +} +nav.post-tree-order a:hover { + background : var(--pico-primary-focus); + color : var(--pico-secondary-inverse); +} +/* POST TREE */ +/* in main view, main list, comment list */ +ul.post-tree { + background : var(--pico-card-background-color); + border-radius : CALC(var(--pico-border-radius)*2); + margin-bottom : var(--pico-block-spacing-vertical); + padding : 1rem; +} +ul.post-tree li { + list-style : none; +} +li.post-tree-item { + align-items : center; + display : flex; + list-style : none; + margin : 0; /* NOTE The margin-left is auto-generated from template ! */ + padding : 0; +} +li.post-tree-item > span { + border-radius : var(--pico-border-radius); + padding : .25rem; +} + .post-tree-current > span { + background-color: var(--pico-form-element-selected-background-color); + border-radius : var(--pico-border-radius); +} +/* POST TREE DEPTH-IN-TREE */ +:is(ul.depth-in-tree) { + margin : 0; + padding : 0; +} +/* FORUM POST - CONTENT + SIGNATURE */ +.post-content { +} +.post-signature { + border-top : 1px solid var(--pico-blockquote-border-color); + margin-top : 1.5rem; +} + +/* FORUM - ICON LIST LEGEND */ +.forum-icon-list { + display : block; + list-style : none; + margin : 1em; + padding : 0; +} + +/* Following classes Using class badge */ +.post-vote, +.post-vote-count, +.post-vote-avg {} +.description {} + +/* ACTIVITY TOTAL POSTS, COMMENTS, VIEWS */ +.content-activity, +.forum-activity { + font-size : small; +} + +/* -------------------- MODULE PICO */ +article .header-image { + display : inline-block; + box-shadow : var(--pico-card-box-shadow); + height : 240px; + margin-top : calc(var(--pico-block-spacing-vertical) * -1.25); + margin-bottom : var(--pico-block-spacing-vertical); + object-fit : cover; + width : 100%; + border : 2px solid var(--pico-muted-color); + border-radius : var(--pico-border-radius); +} +/* Page list of contents H3 + icons folder, docs */ +article h3 :is(span[data-tooltip]) {font-size:16px;} +/* TAGS */ +article>footer>.content-tags { + color : var(--pico-code-value-color); + padding-top : 1rem; +} +/* POST OPTIONS */ +article > .content-filters, +article > .content-options, +article > .content-time, +article > .content-history { + background : none; + border : var(--pico-border); + border-radius : var(--pico-border-radius); + width : auto; + margin-bottom : var(--pico-grid-row-gap); +} +.content-filters >.filter > label { + display : flex; + justify-content : space-between; + flex-wrap : wrap; + align-content : center; + align-items : center; + flex-direction : row; + width : auto; +} +/* 🚧📐 div.category-sub:not(:last-child) ,*/ +:is(div.list-content):not(:only-of-type), +:is(div.list-content):not(:last-of-type), +:is(div.category-sub, div.category-forum):not(:only-of-type), +:is(div.category-sub, div.category-forum):not(:last-of-type){ + margin-bottom : var(--pico-typography-spacing-vertical); +} +:is(div.list-content):last-of-type {} + +/* WAITING CONTENT */ +:is(div.list-content) :where(em.warning) { + background : #f44336; + color : #fff; +} + + +/* -------------------- PAGE NAV - CONTENT PAGINATION */ +nav.page-nav div { + align-items : center; + display : flex; + justify-content : center; + flex-wrap : wrap; + justify-content : space-between; + padding : var(--pico-spacing); + margin-bottom : var(--pico-spacing); + width : 100%; +} +/* -------------------- PAGENAVI D3FORUM COMMENTS PAGINATION */ +nav.pagination { + display : flex; + margin : .5em 0; + flex-direction : row; + justify-content : flex-end; +} +ul.pagenavi li { + border : 0; + color : var(--pico-primary); + border : 1px solid var(--pico-muted-border-color); + border-radius : var(--pico-border-radius); + box-shadow : var(--pico-box-shadow); + padding : 0; + text-align : center; + user-select : none; + margin : 0 .25rem; + min-width : 4ch; +} +/* ul.pagenavi li:last-of-type { margin: 0} */ + +ul.pagenavi li:not([aria-current]) a { + background : var(--pico-form-element-background-color); + + margin : 0; + padding : .25rem .5rem; + width : 100%; +} + +ul.pagenavi li[aria-current] { + border-color : var(--pico-primary); + padding : .25rem .5rem; +} +ul.pagenavi li:not([aria-current]):hover a { + border-color : var(--pico-primary); + background : var(--pico-primary-focus); + color : var(--pico-secondary-inverse); + padding : .25rem .5rem; +} + +/* -------------------- MODULE SITEMAP */ +.grid-sitemap { + grid-column : 1 / 7; + display : grid; + grid-template-columns: repeat(auto-fit, minmax(200px, auto)); + justify-content : center; +} +.grid-map { + padding : 1rem 1rem 0; + grid-column : 1 / 7; + display : grid; + grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); + align-items : center; +} +.grid-map h1 { + font-size : 2rem +} +.grid-map .map iframe { border-radius: var(--pico-border-radius)} + +/* -------------------- SYSTEM Notification */ +/* Replacing older confirmMsg errorMsgg resultMsg msg-warning */ +.alert { + background : var(--pico-muted-border-color); + border-left : 3px solid; + border-color : var(--pico-border-color); + border-radius : var(--pico-border-radius); + padding : var(--pico-spacing); + margin : var(--pico-block-spacing-vertical) auto; +} +.error, +.warning { border-color: var(--pico-del-color) } +.success { border-color: var(--pico-ins-color) } +.info { border-color: var(--pico-code-color) } +.result { border-color: var(--pico-code-color) } + +/* -------------------- MODULE USER PROFILE AVATAR */ +/* Generate CSS Avatar Letter */ +.user-tab-avatar #avatar { +--avatar-size :96px; + background-size : 100% 100%; + background-position: 0px 0px,0px 0px,0px 0px,0px 0px,0px 0px; + background-image: repeating-linear-gradient(315deg, #00FFFF2E 92%, #073AFF00 100%),repeating-radial-gradient(75% 75% at 238% 218%, #00FFFF12 30%, #073AFF14 39%),radial-gradient(99% 99% at 109% 2%, #00C9FFFF 0%, #073AFF00 100%),radial-gradient(99% 99% at 21% 78%, #7B00FFFF 0%, #073AFF00 100%),radial-gradient(160% 154% at 711px -303px, #2000FFFF 0%, #073AFFFF 100%); + border-radius : 50%; + box-shadow : 2px 2px 2px #111; + height : var(--avatar-size); + margin : 20px 0; + text-align : center; + width : var(--avatar-size); +} +/* Avatar Letter */ +.user-tab-avatar #username { + font-size : 0; + display : block; + color : var(--pico-primary ); + position : relative; + line-height : 1; + text-transform : uppercase; + top : calc(var(--avatar-size) / 4); /* 25% of parent */ + transition : font-size 0.3s ease-in; + filter : drop-shadow(2px 2px 5px #010); /* drop-shadow(offset-x offset-y blur-radius color) */ +} +.user-tab-avatar #username::first-letter { + font-size : calc(var(--avatar-size) / 2); /* 50% of parent */ +} + +/* -------------------- MODULE MESSAGE & USER PROFILE */ +/* Note - Mail tab active overrides the default properties */ + +.mail-list-item { + border-bottom : 1px solid hsl(219, 17%, 21%); + line-height : 2.5rem; +} +.mail-list-avatar { + border-radius : 50%; + height : 24px; + margin : auto .25em; + width : 24px; + vertical-align : middle; +} +.mail-list-author { + width : 190px; +} +.mail-list-author input:disabled { + pointer-events: auto; + cursor: not-allowed; +} +.mail-list-subject { + font-size : 16px; + } +.mail-list-date { + font-size : small; + } +.mail-list-date { + font-size : small; +} +.mail-subject{} +.mail-to {} +.mail-from {} +.mail-date {} +.mail-content{} + +/* -------------------- SCROLL-TO-TOP */ +.scroll-top { + position : absolute; + top : 12rem; + right : 2rem; + bottom : 0; + pointer-events : none; + z-index : 9000; +} +.scroll-top #ntop-bg {fill: var(--pico-progress-background-color);} +.scroll-top #ntop-arrow {fill: var(--pico-primary-hover);} +.scroll-top a:hover #ntop-bg {fill: var(--pico-primary-hover-background);} +.scroll-top a:hover #ntop-arrow {fill: var(--pico-primary-inverse);} +.scroll-top a { + position : sticky; + top : -5rem; + width : 3rem; + height : 3rem; + margin-bottom : -5rem; + transform : translateY(100vh); + backface-visibility: hidden; + display : inline-block; + text-decoration : none; + user-select : none; + pointer-events : all; + outline : none; + overflow : hidden; + /* Style */ + box-shadow : var(--pico-box-shadow); + border : var(--pico-border-width) solid var(--pico-border-color); + border-radius : var(--pico-border-radius); +} +.scroll-top a svg { + display : block; + border-radius : var(--border-radius); + width : 100%; + height : 100%; +} +.scroll-top a svg path { + transition : all 0.1s; +} +.scroll-top a #ntop-arrow { + transform : scale(0.66); + transform-origin: center; +} +@media print { + .scroll-top { display: none !important; } +} + +/* -------------------- Animation / Transition */ +@keyframes bottom { + 0% { transform:translateY(10px); opacity:0; } + 100% { opacity:1; transform:none;} +} +@keyframes top { + 0% { transform:translateY(-10px); opacity:0; } + 100% { opacity:1; transform:none; } +} +@keyframes left { + 0% { transform:translateX(-10px); opacity:0; } + 100% { opacity:1; transform:none; } +} diff --git a/html/themes/blue-planet/templates/legacy/index.html b/html/themes/blue-planet/templates/legacy/index.html new file mode 100644 index 000000000..990cbd603 --- /dev/null +++ b/html/themes/blue-planet/templates/legacy/index.html @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/html/themes/blue-planet/templates/legacy/legacy_app_start_page.html b/html/themes/blue-planet/templates/legacy/legacy_app_start_page.html new file mode 100644 index 000000000..2e6f2a5bc --- /dev/null +++ b/html/themes/blue-planet/templates/legacy/legacy_app_start_page.html @@ -0,0 +1,103 @@ +<{* Dev-Mode Toggle *}> +<{if $xoops_isadmin}>
<{$smarty.template}>
<{/if}> + +
+ +

Welcome to <{$xoops_sitename}>

+

<{$xoops_meta_description}>

+ +

Getting started

+ +

Your website is preconfigured with default settings. + The backend administration provides a graphical user interface, also called control panel or admin dashboard, + to configure your website, install components, translation and localization.

+
+ +
+ General Settings +

The system module allows you to customize the general settings of your platform, such as the name and slogan of the site, + language and theme, or close your site and restrict access by user groups. +

Start Page or Module

+

You can modify this template "app_start_page.html”, or you can select a module as the starting point of your website.

+ <{if $xoops_isadmin}> +

Administration »» System »» Preferences ⭧

+ <{/if}> +
+ +
+ +
+ Closed for maintenance +
The site is currently closed for maintenance.
+

Maintenance mode allows you to close the site and display a custom notice to visitors.
+ You can also control who has access to your site when it is closed.

+

When you're ready to launch your site, simply go to System Preferences to open it to the public.

+ +
    +
  1. Maintenance Mode - Turn your site off?
    Select yes to turn your site off so that only users in selected groups have access to the site.
    2. +
  2. Maintenance Mode - Select groups
    Groups that are allowed to access while the site is turned off. Users in the default webmasters group are always granted access.
    3. +
  3. Maintenance Mode - Message
    The text that is displayed when closing the site.
    4. +
+

You can edit the Template site_closed.html" and customize the design to match your notice, maintenance, coming soon, etc.

+ <{if $xoops_isadmin}> +

Administration »» System »» Preferences »» "Maintenance mode-Turn your site off?" ⭧

+ <{/if}> +
+ +
+ +
+ User Groups Permissions +

You can assign users to multiple groups and easily grant access to content of modules and blocks. + The installation wizard creates the following system-required groups :

+
    +
  1. Webmasters (Administrators) +
  2. Registered Users (members) +
  3. Anonymous Users (Guests) +
+
Required user groups cannot be deleted !
+ You can create new groups and change permissions for each new group created.
+ <{if $xoops_isadmin}> +

Administration »» User Groups »» Preferences ⭧

+ <{/if}> +
+ +
+ +
+ Modules Preferences +

Modules also have their own settings, accessible from their "preferences" menu.

+

For example, the render module allows you to manage the meta data of your website, themes (general appearance of your website), and templates that shape the contents of modules and blocks.

+ <{if $xoops_isadmin}> +

Administration »» Render »» Preferences ⭧

+ <{/if}> +
+ +
+ +
+ Module Blocks +

When you install a module, its blocks are automatically added to the Block Management system. + These blocks often have their own functionality settings and customization templates.

+
On the frontend, click the three-dot dropdown menu to edit the block.
+

For example, the parameters of the "Main Menu" block allow you to display icons for each module and subcategories.

+ <{if $xoops_isadmin}> +

Administration »» System »» Block Management ⭧

+ <{/if}> +
+ +
+ +
+ Theme +

A theme consists of a single HTML file that can include components, a CSS stylesheet, JavaScript, modules, and block templates. On the frontend, the Themes block allows users to select their preferred theme. + You first need to enable the themes users can choose from, in Theme Management.

+
Learn more about the Theme Options - Custom Parameters link in the Theme Management
+ <{if $xoops_isadmin}> +

Administration »» System »» Theme Management ⭧

+ <{/if}> +
+ +
+ +
diff --git a/html/themes/blue-planet/templates/legacy/legacy_block_mainmenu.html b/html/themes/blue-planet/templates/legacy/legacy_block_mainmenu.html new file mode 100644 index 000000000..31c3b9bce --- /dev/null +++ b/html/themes/blue-planet/templates/legacy/legacy_block_mainmenu.html @@ -0,0 +1,31 @@ +<{if $xoops_isadmin}>
<{$smarty.template}>
<{/if}> + + diff --git a/html/themes/blue-planet/templates/legacy/legacy_block_search.html b/html/themes/blue-planet/templates/legacy/legacy_block_search.html new file mode 100644 index 000000000..c0eb26a27 --- /dev/null +++ b/html/themes/blue-planet/templates/legacy/legacy_block_search.html @@ -0,0 +1,15 @@ +<{* Dev-Mode Toggle *}> +<{if $xoops_isadmin}>
<{$smarty.template}>
<{/if}> + +
+
+ + + <{xoops_input type=hidden name=andor value=AND}> + <{xoops_input type=hidden name=action value=results}> + +
+

+ <{$smarty.const._MB_LEGACY_ADVS}> +

+
diff --git a/html/themes/blue-planet/templates/legacy/legacy_block_siteinfo.html b/html/themes/blue-planet/templates/legacy/legacy_block_siteinfo.html new file mode 100644 index 000000000..f0bb80cf2 --- /dev/null +++ b/html/themes/blue-planet/templates/legacy/legacy_block_siteinfo.html @@ -0,0 +1,30 @@ +<{* Dev-Mode Toggle *}> +<{if $xoops_isadmin}>
<{$smarty.template}>
<{/if}> + +
+<{if $block.showgroups == true}> + +<{/if}> + + + +
diff --git a/html/themes/blue-planet/templates/legacy/legacy_block_themes.html b/html/themes/blue-planet/templates/legacy/legacy_block_themes.html new file mode 100644 index 000000000..6eab64ac0 --- /dev/null +++ b/html/themes/blue-planet/templates/legacy/legacy_block_themes.html @@ -0,0 +1,37 @@ +<{* Dev-Mode Toggle *}> +<{if $xoops_isadmin}>
<{$smarty.template}>
<{/if}> + +<{if $block.isEnableChanger == false}> + <{$smarty.const._MB_LEGACY_MESSAGE_CAN_NOT_THEME_CHANGE}> +<{else}> + +
+ +
+ <{if $block.mode==1}> + <{$block.theme_selected_name}> + + + <{/if}> + <{foreach item=theme_option from=$block.theme_options}> + + <{/foreach}> + + +

<{''|cat:$block.count|cat:''|string_format:$smarty.const._MB_LEGACY_LANG_NUMTHEME}>

+ + <{if $block.mode==1}> +
+ <{/if}> + +
+
+ +<{/if}> + diff --git a/html/themes/xcl_default/component/_inc_nav_user.html b/html/themes/blue-planet/templates/legacy/legacy_block_usermenu.html similarity index 62% rename from html/themes/xcl_default/component/_inc_nav_user.html rename to html/themes/blue-planet/templates/legacy/legacy_block_usermenu.html index 778489cab..47bda4ab8 100644 --- a/html/themes/xcl_default/component/_inc_nav_user.html +++ b/html/themes/blue-planet/templates/legacy/legacy_block_usermenu.html @@ -1,28 +1,25 @@ -<{* Dev-Mode Toggle *}> -<{if $xoops_isadmin}>
<{$smarty.template}>
<{/if}> +<{* Dev-Mode Toggle +<{if $xoops_isadmin}>
<{$smarty.template}>
<{/if}>*}>
- - <{$xoops_uname}> - <{$xoops_uname}> - - + <{$xoops_uname}> + <{$xoops_uname}> -
\ No newline at end of file + diff --git a/html/themes/blue-planet/templates/legacy/legacy_redirect.html b/html/themes/blue-planet/templates/legacy/legacy_redirect.html new file mode 100644 index 000000000..87f997bed --- /dev/null +++ b/html/themes/blue-planet/templates/legacy/legacy_redirect.html @@ -0,0 +1,77 @@ + + + + + + +<{if !class_exists('AdelieDebug_Preload')}> + +<{/if}> +<{$xoops_sitename}> + + + + + + + +
+
+
+

logo

+

<{$message}>

+ +

<{$lang_ifnotreload}>

+<{if class_exists('AdelieDebug_Preload')}> +

No automatic redirect during AdelieDebug execution.

+<{/if}> +
+
+ + \ No newline at end of file diff --git a/html/themes/blue-planet/templates/legacy/legacy_redirect_function.html b/html/themes/blue-planet/templates/legacy/legacy_redirect_function.html new file mode 100644 index 000000000..8fab737e7 --- /dev/null +++ b/html/themes/blue-planet/templates/legacy/legacy_redirect_function.html @@ -0,0 +1,176 @@ + + + +<?php echo htmlspecialchars($xoopsConfig['sitename']); ?> + + + + + + +
+
+ Loading +
+
+
+
+
+

+

+
+ + diff --git a/html/themes/blue-planet/templates/legacy/legacy_site_closed.html b/html/themes/blue-planet/templates/legacy/legacy_site_closed.html new file mode 100644 index 000000000..67024c190 --- /dev/null +++ b/html/themes/blue-planet/templates/legacy/legacy_site_closed.html @@ -0,0 +1,257 @@ +<{php}> +ob_start(); +header('HTTP/1.1 503 Service Temporarily Unavailable'); +header('Status: 503 Service Temporarily Unavailable'); +header('Retry-After: 3600'); +header('X-Powered-By: XOOPSCube'); +ob_end_clean(); +ob_end_flush(); +<{/php}> + + + + + + +<{$xoops_sitename}> + + +<{* ----- Favicon SVG located in the root directory ----- *}> + + + + + + + +
+ +
+
+
+
+
+
+
+
+ +
+ + + +

Nature never rushes, yet everything gets done.

+ +
+ +
+
+ <{if $xoops_isuser}> +

<{$smarty.const._LOGOUT}>

+ <{else}> +
+

<{$lang_login}>

+

<{$lang_siteclosemsg}>

+
+
+
+ + + + +
+ <{/if}> + +
+
+ +
+<{* ---------- /top-container *}> + + diff --git a/html/themes/blue-planet/theme.html b/html/themes/blue-planet/theme.html new file mode 100644 index 000000000..83b55f30c --- /dev/null +++ b/html/themes/blue-planet/theme.html @@ -0,0 +1,304 @@ + + + + + + + + <{$xoops_sitename}> - <{$xoops_pagetitle}> + + + + + + + + + + + + + + + + + + <{if $xoops_dirname == 'pico' && isset($content.ef.pico_img)}> + + <{else}> + + <{/if}> + + + + + + + + <{* ----- Browserconfig, Webmanifest, XML Sitemap located in the root directory ----- *}> + + + + <{* ----- Favicons THEME COLOR ----- *}> + + + + <{* ----- Favicon SVG - default /images/favicon ----- *}> + + <{* ----- Favicons located in the root directory ----- *}> + + + + + <{* ----- Resquesturi $xoops_requesturi : /module/dirname/id ----- *}> + + <{* ----- CSS - PicoCSS ----- *}> + + + + <{$xoops_module_header}> + + <{* ----- Defer preload of custom styles for jQuery UI, PrismJS ----- *}> + + + + + <{* ----- CSS - Theme ----- *}> + + <{* ----- CSS - Theme JSON ----- *}> + <{assign var="theme" value="`$xoops_imageurl`theme.json"}> + <{json file="$theme" theme="theme" local="true"}> + <{foreach item=theme key=key from=$theme}> + <{assign var='name' value=$theme->name}> + <{assign var='title' value=$theme->title}> + <{assign var='slogan' value=$theme->slogan}> + <{assign var='body' value=$theme->body}> + <{assign var='color' value=$theme->color}> + <{assign var='primary' value=$theme->primary}> + <{assign var='secondary' value=$theme->secondary}> + <{assign var='inverse' value=$theme->inverse}> + <{/foreach}> + <{* ----- CSS - MainMenu Active ----- *}> + + + +
+ +
+ +<{* REMOVE SMARTY COMMENTS TO DISPLAY IN TOPPAGE ONLY *}> +<{* if $xoops_is_top|default:'' *}> +<{include file="$xoops_theme/component/_inc_hero_planet.html"}> +<{* /if *}> + + +<{* ----- TOPPAGE Center Blocks Title width prefix top- & none- (hide title) + Note : It's Center Block Left that triggers the top to display *}> +<{if !empty($xoops_clblocks)}> +<{foreach item=block from=$xoops_clblocks}> + <{if $block.title|strstr:"top-" && !$block.title|strstr:"hero"}> + <{include file="$xoops_theme/component/_inc_top_center.html"}> + <{/if}> +<{/foreach}> +<{/if}> + + + +<{* ----- Main *}> +
+ + <{if $xoops_showlblock==1}> + + <{/if}> + +
+
+ <{if !empty($xoops_contents)}> + <{$xoops_contents}> + <{else}> + <{include file='db:legacy_app_start_page.html'}> + <{/if}> +
+
+ + <{if $xoops_showrblock==1}> + + <{/if}> + +
+ +<{if $banner !=" "}> +
+
+
+ <{$xoops_banner}> +
+
+
+<{/if}> + +<{* ---------- CENTER BLOCKS *}> +<{if $xoops_showcblock==1}> +
+ +<{* ---------- BLOCK Center-Left *}> +<{if !empty($xoops_clblocks)}> +
+ <{foreach item=block from=$xoops_clblocks}> + <{if !$block.title|strstr:"admin" && !$block.title|strstr:"top" && !$block.title|strstr:"hero"}> +
+

+ <{if $xoops_isadmin}> + <{$block.title}> + <{include file="$xoops_theme/component/_inc_block_edit.html"}> + <{else}> + <{if !$block.title|strstr:"none"}><{$block.title}><{/if}> + <{/if}> +

+
<{$block.content}>
+
+ <{/if}> + <{/foreach}> +
+<{/if}> + +<{* ---------- BLOCK Center-Center *}> +<{if !empty($xoops_ccblocks)}> +
+ <{foreach item=block from=$xoops_ccblocks}> + <{if !$block.title|strstr:"admin" && !$block.title|strstr:"top" && !$block.title|strstr:"hero"}> +
+

+ <{if $xoops_isadmin}> + <{$block.title}> + <{include file="$xoops_theme/component/_inc_block_edit.html"}> + <{else}> + <{if !$block.title|strstr:"none"}><{$block.title}><{/if}> + <{/if}> +

+
<{$block.content}>
+
+ <{/if}> + <{/foreach}> +
+<{/if}> + +<{* ---------- BLOCK Center-Right *}> +<{if !empty($xoops_crblocks)}> +
+ <{foreach item=block from=$xoops_crblocks}> + <{if !$block.title|strstr:"admin" && !$block.title|strstr:"top" && !$block.title|strstr:"hero"}> +
+

+ <{if $xoops_isadmin}> + <{$block.title}> + <{include file="$xoops_theme/component/_inc_block_edit.html"}> + <{else}> + <{if !$block.title|strstr:"none"}><{$block.title}><{/if}> + <{/if}> +

+
<{$block.content}>
+
+ <{/if}> + <{/foreach}> +
+<{/if}> + +
+<{/if}> + +<{* ---------- Scroll to top *}> +
+ + + + + + +
+ +<{if $banner !=" "}> +
+
+ +
+
+<{/if}> + +
+ +<{* ---------- FOOTER CREDITS *}> + + +<{* ---------- ADMIN FRONT PANEL *}> +<{if $xoops_isadmin}> +<{include file="$xoops_theme/component/admin-panel.html"}> +<{/if}> + +<{* ---------- DO NOT DEFER Theme Plugins - LocalStoarage & SVG ! *}> + + +<{* ---------- PrismJS ----- *}> + + + \ No newline at end of file diff --git a/html/themes/blue-planet/theme.json b/html/themes/blue-planet/theme.json new file mode 100644 index 000000000..1a278c41e --- /dev/null +++ b/html/themes/blue-planet/theme.json @@ -0,0 +1,19 @@ +{ + "theme": [ + { + "name": "Bleu Planet", + "version": "2.4.0", + "date": "2024-04-20", + "author": "Nuno Luciano", + "title": "Your Dream, Your Legacy", + "slogan": "The greatest legacy that you will leave to your friends is your story.", + "body": "#13171f", + "color": "#c2c7d0", + "primary": "#3c71f7", + "secondary": "#969eaf", + "contrast": "#dfe3eb", + "inverse": "#000", + "muted": "#7b8495" + } + ] +} \ No newline at end of file diff --git a/html/themes/cosmic-dream/.editorconfig b/html/themes/cosmic-dream/.editorconfig new file mode 100644 index 000000000..ecfda4e65 --- /dev/null +++ b/html/themes/cosmic-dream/.editorconfig @@ -0,0 +1,13 @@ +# editorconfig.org +# XCL 2.3.1 +# This file is for unifying the coding style for different editors and IDEs + +root = true + +[*] +charset = utf-8 +end_of_line = lf +insert_final_newline = true +indent_size = 4 +indent_style = space +trim_trailing_whitespace = true diff --git a/html/themes/cosmic-dream/.gitignore b/html/themes/cosmic-dream/.gitignore new file mode 100644 index 000000000..b5ce3fa47 --- /dev/null +++ b/html/themes/cosmic-dream/.gitignore @@ -0,0 +1,32 @@ +# OS or Editor folders +._* +.cache +.DS_Store +.idea +.project +.settings +.tmproj +*.esproj +*.sublime-project +*.sublime-workspace +nbproject +Thumbs.db +/.vscode/ + +# Numerous always-ignore extensions +*.diff +*.err +*.log +*.orig +*.rej +*.swo +*.swp +*.vi +*.zip +*~ + +# Folders to ignore +/node_modules/ + +# Pico +.pico diff --git a/html/themes/cosmic-dream/CHANGELOG.md b/html/themes/cosmic-dream/CHANGELOG.md new file mode 100644 index 000000000..67d0bd6a5 --- /dev/null +++ b/html/themes/cosmic-dream/CHANGELOG.md @@ -0,0 +1,36 @@ +# Change Log + +## XCL Theme Cosmic Dream v.2.4.0 + +XCL Theme built with PicoCSS v2.0.6 + +All notable changes will be documented in this file. + +## [CSS Animation ] 2024-04-27 + +- Add and Edit Cosmic Dream CSS by Konstantin Denerz + inspired by Anxo Vizcaíno's video "Mentally, I'm here" +- Sound by Suno #GenAI + +## [XCL Theme 240 ] 2024-04-20 + +- Add component block-center with Title prefix 'top-' +- Add condition to show Top Block-center (prefix 'top-none') +- Add daarkmode for CKEDITOR4 +- Update PicoCSS +- Update prefix CSS classes +- Update Templates +- Update jQuery UI theme built with CSS vars +- Theme style with customized CSS vars +- Fix Smarty logic in D3Forum and Pico +- Improved Pico's menu and TOC +- Smarty 2.6 fix isset and |default:'' + +## [XCL Pico 157 ] 2024-02-02 + +- Admin front panel block-right with Title prefix 'admin-' +- Load PicoCSS from theme folder +- Fix PHP8 warning errors related to Smarty +- Admin panel (using block-right with prefix 'admin-' in block-title) +- Banner placement and link to client +- Header UserMenu and Theme mode diff --git a/html/themes/cosmic-dream/LICENSE.md b/html/themes/cosmic-dream/LICENSE.md new file mode 100644 index 000000000..7341f375b --- /dev/null +++ b/html/themes/cosmic-dream/LICENSE.md @@ -0,0 +1,22 @@ +MIT License + +Copyright (c) 2019-2024 Pico +Copyright (c) 2019-2024 Nuno Luciano, XCL Theme + +Permission is hereby granted, free of charge, to any person obtaining a copy +of this software and associated documentation files (the "Software"), to deal +in the Software without restriction, including without limitation the rights +to use, copy, modify, merge, publish, distribute, sublicense, and/or sell +copies of the Software, and to permit persons to whom the Software is +furnished to do so, subject to the following conditions: + +The above copyright notice and this permission notice shall be included in all +copies or substantial portions of the Software. + +THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR +IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, +FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE +AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER +LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, +OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE +SOFTWARE. diff --git a/html/themes/cosmic-dream/audio/cosmic_dreams.mp3 b/html/themes/cosmic-dream/audio/cosmic_dreams.mp3 new file mode 100644 index 000000000..f9a73bd1b Binary files /dev/null and b/html/themes/cosmic-dream/audio/cosmic_dreams.mp3 differ diff --git a/html/themes/cosmic-dream/component/_inc_block_edit.html b/html/themes/cosmic-dream/component/_inc_block_edit.html new file mode 100644 index 000000000..5c93fb699 --- /dev/null +++ b/html/themes/cosmic-dream/component/_inc_block_edit.html @@ -0,0 +1,27 @@ +<{assign var=admin_block_edit value="`$xoops_url`/modules/altsys/admin/index.php?mode=admin&lib=altsys&page=mytplsform&tpl_file="}> +<{assign var=admin_block_custom value="`$xoops_url`/modules/altsys/admin/index.php?mode=admin&lib=altsys&page=myblocksadmin&dirname=__CustomBlocks__&op=edit&bid="}> +
+ + + + + +
+ + + Edit B-<{$block.id}> + + + Clone Block + <{* if "" != $block.template *}> + <{if $block.template ne ""}> + + <{else}> + + <{/if}> + + + + Edit template +
+
diff --git a/html/themes/cosmic-dream/component/_inc_hero.html b/html/themes/cosmic-dream/component/_inc_hero.html new file mode 100644 index 000000000..f58b2101e --- /dev/null +++ b/html/themes/cosmic-dream/component/_inc_hero.html @@ -0,0 +1,1525 @@ + + +
+
+

<{$name}>

+ +
+
+ +
+
+
+
+
+
+
+ +
+
+
+
+
+
+
+
+
+ +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+
+
+
+
+
+
+
+
+
+
+
+ +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+ +
+
+ + + + + + + + + + + + + + + + + +
+
diff --git a/html/themes/cosmic-dream/component/_inc_top_center.html b/html/themes/cosmic-dream/component/_inc_top_center.html new file mode 100644 index 000000000..dca65cf4e --- /dev/null +++ b/html/themes/cosmic-dream/component/_inc_top_center.html @@ -0,0 +1,102 @@ + + +<{if $xoops_showcblock==1}> +
+ +
+

<{$xoops_sitename}>

+

<{$xoops_slogan}>

+
+ +
+<{* ---------- BLOCK Center-Left *}> +<{if !empty($xoops_clblocks)}> +
+ <{foreach item=block from=$xoops_clblocks}> + <{if $block.title|strstr:"top-" && !$block.title|strstr:"hero"}> +
+

+ <{if $xoops_isadmin}> + <{$block.title}> + <{include file="$xoops_theme/component/_inc_block_edit.html"}> + <{else}> + <{if ! $block.title|strstr:"none"}><{$block.title|replace:'top-':''}><{/if}> + <{/if}> +

+
<{$block.content}>
+
+ <{/if}> + <{/foreach}> +
+<{/if}> + +<{* ---------- BLOCK Center-Center *}> +<{if !empty($xoops_ccblocks)}> +
+ <{foreach item=block from=$xoops_ccblocks}> + <{if $block.title|strstr:"top-" && !$block.title|strstr:"hero"}> +
+

+ <{if $xoops_isadmin}> + <{$block.title}> + <{include file="$xoops_theme/component/_inc_block_edit.html"}> + <{else}> + <{if ! $block.title|strstr:"none"}><{$block.title|replace:'top-':''}><{/if}> + <{/if}> +

+
<{$block.content}>
+
+ <{/if}> + <{/foreach}> +
+<{/if}> + +<{* ---------- BLOCK Center-Right *}> +<{if !empty($xoops_crblocks)}> +
+ <{foreach item=block from=$xoops_crblocks}> + <{if $block.title|strstr:"top-" && !$block.title|strstr:"hero"}> +
+

+ <{if $xoops_isadmin}> + <{$block.title}> + <{include file="$xoops_theme/component/_inc_block_edit.html"}> + <{else}> + <{if ! $block.title|strstr:"none"}><{$block.title|replace:'top-':''}><{/if}> + <{/if}> +

+
<{$block.content}>
+
+ <{/if}> + <{/foreach}> +
+<{/if}> + +
+ +
+<{/if}> \ No newline at end of file diff --git a/html/themes/cosmic-dream/component/admin-panel.html b/html/themes/cosmic-dream/component/admin-panel.html new file mode 100644 index 000000000..b3b68d380 --- /dev/null +++ b/html/themes/cosmic-dream/component/admin-panel.html @@ -0,0 +1,237 @@ +<{* XCube Panel Options *}> + + + +
+
+ +
+
+ +<{* ----- RIGHT-SIDEBAR ----- *}> +
+ +
Control Panel + + + +
+ + <{* ----- RIGHT-PANEL-BLOCK ----- *}> +
+ + <{* ---------- Block-Right *}> + <{if $xoops_showrblock==1}> + <{foreach item=block from=$xoops_rblocks}> + <{if $block.title|strstr:"admin"}> +
+

+ <{* REMOVE 'admin-' FROM BLOCK-TITLE *}> + <{$block.title|replace:'admin-':''}> + <{include file="$xoops_theme/component/_inc_block_edit.html"}> +

+
<{$block.content}>
+
+ <{/if}> + <{foreachelse}> +
+ Add block with position block-right
+ and block-title with prefix admin- +
+ <{/foreach}> + <{/if}> + <{* ----- ADMIN PREVIEW ----- *}> +
Preview Layout
+
+ + + + +
+ +
+ <{* -----/ RIGHT-PANEL-BLOCK *}> + +
+<{* -----/ RIGHT-SIDEBAR *}> + diff --git a/html/themes/cosmic-dream/component/block-left.html b/html/themes/cosmic-dream/component/block-left.html new file mode 100644 index 000000000..dabcad9fe --- /dev/null +++ b/html/themes/cosmic-dream/component/block-left.html @@ -0,0 +1,18 @@ +<{* ---------- Block-Left *}> +<{foreach item=block from=$xoops_lblocks}> +<{if !$block.title|strstr:"Topage" && !$block.title|strstr:"User" || !$block.id==28}> +
+

+ <{if $xoops_isadmin}> + <{$block.title|replace:' ':'-'}> + <{include file="$xoops_theme/component/_inc_block_edit.html"}> + <{else}> + <{if ! $block.title|strstr:"none"}><{$block.title}><{/if}> + <{/if}> +

+
+ <{$block.content}> +
+
+<{/if}> +<{/foreach}> diff --git a/html/themes/cosmic-dream/component/block-right.html b/html/themes/cosmic-dream/component/block-right.html new file mode 100644 index 000000000..1edb488a6 --- /dev/null +++ b/html/themes/cosmic-dream/component/block-right.html @@ -0,0 +1,16 @@ +<{* ---------- Block-Right *}> +<{foreach item=block from=$xoops_rblocks}> +<{if !$block.title|strstr:"admin"}> +
+

+ <{if $xoops_isadmin}> + <{$block.title}> + <{include file="$xoops_theme/component/_inc_block_edit.html"}> + <{else}> + <{if ! $block.title|strstr:"none"}><{$block.title}><{/if}> + <{/if}> +

+
<{$block.content}>
+
+<{/if}> +<{/foreach}> diff --git a/html/themes/cosmic-dream/css/dropdown.css b/html/themes/cosmic-dream/css/dropdown.css new file mode 100644 index 000000000..6bd332f2b --- /dev/null +++ b/html/themes/cosmic-dream/css/dropdown.css @@ -0,0 +1,91 @@ +/* +* XCL Theme Dropdown +* +* @version 2.4.0 +* @update 2024-04-20 +* @Date 2024-02-02 +* @author Nuno Luciano ( https://github.com/gigamaster ) +* @copyright (c) 2005-2024 The XOOPSCube Project, authors +* @license MIT +* @link https://github.com/xoopscube +*/ +/* -------------------- Dropdown Menu */ + +div.dropdown { + position : relative; + display : block; +} +div.dropdown a.dropdown-toggle:not(.ui-tabs-anchor) { + background : transparent; /*var(--background-color);*/ + border : none; + border-radius : var(--pico-border-radius); + box-shadow : none; + color : var(--pico-primary-color); + cursor : pointer; + display : block; + font : inherit; + margin : 0; + padding : 0 .25rem .25rem; + transition : all var(--transition-time) var(--transition-cube); +} +div.dropdown a.dropdown-toggle:hover:not(.ui-tabs-anchor) { + background : var(--primary-focus); /* link [div][a] */ + box-shadow : none; + color : var(--primary-hover); + background : var(--pico-primary-hover-background); + color : var(--pico-primary-inverse); +} +div.dropdown.isopen div.dropdown-content { + display : block; + z-index : var(--z-above); +} +div.dropdown-content { + background : var(--pico-form-element-background-color); + border : var(--pico-border-width) solid var(--pico-form-element-border-color); + border-radius : var(--pico-border-radius); + box-shadow : var(--pico-card-box-shadow); /* 0px 2px 4px 1px hsla(0, 0%, 0%, 0.74); */ + color : var(--pico-primary-color); + display : none; + + min-width : 190px; + padding : .5rem; + position : absolute; + right : -10px; + + text-align : left; + top : 100%; + transition : all var(--transition-time) var(--transition-cube); +} +@media (min-width: 992px) { + .dropdown-content { + right : 1px; /* Fix device Viewport */ + } +} +div.dropdown div.dropdown-content ul { + margin : 0; + padding : 0; + list-style : none; +} +div.dropdown div.dropdown-content ul li { + background : transparent; + padding : 0; + width : 100%; +} +/* Dropdown links */ +div.dropdown div.dropdown-content a { + border-radius : var(--pico-border-radius); + color : var(--pico-primary-color); + display : block; + font-size : 16px; + padding : calc(var(--pico-form-element-spacing-vertical)* .8) var(--pico-form-element-spacing-horizontal); + text-decoration : none; +} +/* Change color of dropdown links on hover */ +div.dropdown div.dropdown-content a:hover { + background : var(--pico-primary-hover-background); + color : var(--pico-primary-inverse); +} + +div.dropdown div.dropdown-content a > svg { + margin : var(--dropdown-icon-margin); +} diff --git a/html/themes/cosmic-dream/css/index.html b/html/themes/cosmic-dream/css/index.html new file mode 100644 index 000000000..990cbd603 --- /dev/null +++ b/html/themes/cosmic-dream/css/index.html @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/html/themes/cosmic-dream/css/jquery-ui.theme.css b/html/themes/cosmic-dream/css/jquery-ui.theme.css new file mode 100644 index 000000000..ce551773f --- /dev/null +++ b/html/themes/cosmic-dream/css/jquery-ui.theme.css @@ -0,0 +1,692 @@ +/* +* XCL Theme Jquery-UI for PicoCSS +* +* @version 2.4.0 +* @update 2024-04-20 +* @date 2024-02-02 +* @author Nuno Luciano ( https://github.com/gigamaster ) +* @copyright (c) 2005-2024 The XOOPSCube Project, authors +* @license MIT +* @link https://github.com/xoopscube +*/ + +/* Component containers +----------------------------------*/ +.ui-dialog.ui-widget.ui-front { + background : var(--pico-form-element-background-color); + box-shadow : var(--pico-box-shadow ); + padding : calc(var(--block-spacing-horizontal) * 1); + border : var(--pico-border-width) solid var(--pico-form-element-border-color); + background-color: var(--pico-modal-overlay-background-color); + backdrop-filter : var(--pico-modal-overlay-backdrop-filter); + -webkit-backdrop-filter: var(--pico-modal-overlay-backdrop-filter); + +} +.ui-dialog-dragging > .ui-widget-header { + background: var(--pico-primary-background); +} +.ui-widget { + font-size : 1rem +} +.ui-widget .ui-widget { + font-size : 1rem +} +.ui-widget input, +.ui-widget select, +.ui-widget textarea, +.ui-widget button { + outline : none; + font-family : inherit; + font-size : 1rem +} +.ui-widget.ui-widget-content { + /* border : 1px solid var(--pico-form-element-border-color); */ + border : 1px solid transparent; + background : var(--pico-form-element-background-color); + border-radius : var(--pico-border-radius); + box-shadow : var(--pico-card-box-shadow); + margin : 0; +} + +.ui-widget-content { + background : var(--pico-form-element-background-color); + border : 1px solid var(--pico-form-element-border-color); + color : var(--pico-color); +} +.ui-widget-content a { + color : var(--pico-primary); +} +.ui-widget-header { + background : var(--pico-card-sectioning-background-color); + border : var(--pico-border-width) solid var(--pico-border-color); + border-radius : var(--pico-border-radius); + color : var(--pico-color); + font-weight : var(--pico-font-weight); + list-style : none; +} +/* custom spacing */ +:is(.ui-menu) li.ui-widget-header { + /* custom spacing */ + padding: .175em .5em; + border: 1px solid var(--pico-dropdown-border-color) +} +.ui-widget-header a { + color : var(--pico-color); +} + +/* Interaction states +----------------------------------*/ +.ui-state-default, +.ui-widget-content .ui-state-default, +.ui-widget-header .ui-state-default, +.ui-button, +/* greater specificity when clicked or hovered */ +html .ui-button.ui-state-disabled:hover, +html .ui-button.ui-state-disabled:active { + background-color: var(--pico-background-color); + border : 1px solid var(--pico-form-element-border-color); + color : var(--pico-contrast); + font : var(--pico-font-size); + font-weight : inherit; +} +.ui-state-default a, +.ui-state-default a:link, +.ui-state-default a:visited, +a.ui-button, +a:link.ui-button, +a:visited.ui-button, +.ui-button { + background-color: var(--pico-background-color); + border: 1px solid transparent; + color : var(--pico-primary); + text-decoration : none; +} +.ui-state-hover, +.ui-widget-content .ui-state-hover, +.ui-widget-header .ui-state-hover, +.ui-state-focus, +.ui-widget-content .ui-state-focus, +.ui-widget-header .ui-state-focus, +.ui-button:hover, +.ui-button:focus { + background : var(--pico-primary-hover-background); + border : 1px solid var(--pico-primary-hover-border); + color : var(--pico-color); + font-weight : inherit; + outline : none; +} +.ui-state-hover a, +.ui-state-hover a:hover, +.ui-state-hover a:link, +.ui-state-hover a:visited, +.ui-state-focus a, +.ui-state-focus a:hover, +.ui-state-focus a:link, +.ui-state-focus a:visited, +a.ui-button:hover, +a.ui-button:focus { + background : var(--pico-primary-hover-background); + border : 1px solid var(--pico-primary-hover-border); + color : var(--pico-primary-hover); + font : var(--pico-font-size); + font-weight : inherit; + text-decoration : none; + outline : none; +} +.ui-visual-focus { + box-shadow : var(--pico-primary-focus); +} +.ui-state-active, +.ui-widget-content .ui-state-active, +.ui-widget-header .ui-state-active, +a.ui-button:active, +.ui-button:active, +.ui-button.ui-state-active:hover { + background : var(--pico-primary-hover-background); + border : 1px solid var(--pico-primary-hover-border); + color : var(--pico-primary-inverse); + font-weight : inherit; + outline : none; +} +.ui-state-active a, +.ui-state-active a:link, +.ui-state-active a:visited, +:where(.dropdown-content):not(a.dropdown-item) { + border : 1px solid var(--pico-primary-hover-border); + color : var(--pico-primary-focus); +} +/* Checkbox */ +.ui-icon-background, +.ui-state-active .ui-icon-background { + background-color: var(--pico-primary-hover-background); + border : 1px solid var(--pico-primary-hover-border); +} + +/* Interaction Cues +----------------------------------*/ +.ui-state-highlight, +.ui-widget-content .ui-state-highlight, +.ui-widget-header .ui-state-highlight { + background : var(--pico-primary-hover-background); + border : 1px solid var(--pico-primary-hover-border); + color : var(--pico-primary-inverse); +} +.ui-state-checked { + background : var(--ui-state-checked-bg); + border : var(--ui-state-checked-border); +} +.ui-state-highlight a, +.ui-widget-content .ui-state-highlight a, +.ui-widget-header .ui-state-highlight a { + color : var(--pico-primary-inverse); +} +.ui-state-error, +.ui-widget-content .ui-state-error, +.ui-widget-header .ui-state-error { + background : var(--ui-state-error-bg); + border : 1px solid var(--pico-primary-hover-border); + color : var(--ui-state-error-color); +} +.ui-state-error a, +.ui-widget-content .ui-state-error a, +.ui-widget-header .ui-state-error a { + color : var(--ui-state-error-link); +} +.ui-state-error-text, +.ui-widget-content .ui-state-error-text, +.ui-widget-header .ui-state-error-text { + color : var(--ui-state-error-text); +} +.ui-priority-primary, +.ui-widget-content .ui-priority-primary, +.ui-widget-header .ui-priority-primary { + font-weight : inherit; +} +.ui-priority-secondary, +.ui-widget-content .ui-priority-secondary, +.ui-widget-header .ui-priority-secondary { + font-weight : inherit; + opacity : 0.7; +} +.ui-state-disabled, +.ui-widget-content .ui-state-disabled, +.ui-widget-header .ui-state-disabled { + background-image: none; + border : 1px solid var(--pico-muted-border-color); + opacity : 0.35; +} + +/* Icons +----------------------------------*/ +/* states and images - RELATIVE TO XCL /COMMON */ +.ui-icon { + width: 16px; + height: 16px; +} +.ui-icon, +.ui-widget-content .ui-icon { + background-image: url("../../../common/js/images/ui-icons_cccccc_256x240.png"); +} +.ui-widget-header .ui-icon { + background-image: url("../../../common/js/images/ui-icons_cccccc_256x240.png"); +} +.ui-state-hover .ui-icon, +.ui-state-focus .ui-icon, +.ui-button:hover .ui-icon, +.ui-button:focus .ui-icon { + background-image: url("../../../common/js/images/ui-icons_ffffff_256x240.png"); +} +.ui-state-active .ui-icon, +.ui-button:active .ui-icon { + background-image: url("../../../common/js/images/ui-icons_ffffff_256x240.png"); +} +.ui-state-highlight .ui-icon, +.ui-button .ui-state-highlight.ui-icon { + background-image: url("../../../common/js/images/ui-icons_ffffff_256x240.png"); +} +.ui-state-error .ui-icon, +.ui-state-error-text .ui-icon { + background-image: url("../../../common/js/images/ui-icons_ffffff_256x240.png"); +} +.ui-button .ui-icon { + background-image: url("../../../common/js/images/ui-icons_cccccc_256x240.png"); +} + + +/* Misc visuals +----------------------------------*/ + +/* Corner radius */ +.ui-corner-all, +.ui-corner-top, +.ui-corner-left, +.ui-corner-tl { + border-top-left-radius: var(--pico-border-radius); +} +.ui-corner-all, +.ui-corner-top, +.ui-corner-right, +.ui-corner-tr { + border-top-right-radius: var(--pico-border-radius); +} +.ui-corner-all, +.ui-corner-bottom, +.ui-corner-left, +.ui-corner-bl { + border-bottom-left-radius: var(--pico-border-radius); +} +.ui-corner-all, +.ui-corner-bottom, +.ui-corner-right, +.ui-corner-br { + border-bottom-right-radius: var(--pico-border-radius); +} + +/* Overlays */ +/*Applies 100% width & height dimensions to an overlay screen*/ +.ui-widget-overlay { + background : var(--ui-widget-overlay-bg); + backdrop-filter : var(--pico-modal-overlay-backdrop-filter); + opacity : .8; +} +/*Sets box-shadow x & y offset, blur radius and color.*/ +.ui-widget-shadow { + box-shadow : var(--ui-widget-shadow); +} + +/* Accordion +----------------------------------*/ +.ui-accordion .ui-accordion-header { + background : var(--pico-background-color); + border : 1px solid var(--pico-accordion-border-color); + border-radius : var(--pico-border-radius); + box-shadow : var(--pico-box-shadow); + cursor : pointer; + display : block; + margin : var(--accordion-margin); + outline : 0; + margin-bottom : .15em; + padding : .5em; + position : relative; + -moz-user-select: none; + user-select : none; + transition : background-color var(--pico-transition); + +} +.ui-accordion .ui-accordion-content { + background : var(--pico-dropdown-background-color); + border : var(--pico-border-width) solid var(--pico-dropdown-border-color); + border-top : 0; + border-radius : var(--pico-border-radius); + color : var(--pico-color); + padding : var(--pico-form-element-spacing-vertical) var(--pico-form-element-spacing-horizontal); + overflow : auto; + transition: opacity var(--pico-transition), transform 0s ease-in-out 1s; +} +:is(.ui-accordion-header-active):not([aria-selected="false"][aria-expanded="false"]) { + color:var(--pico-primary-color); +} +:is(.ui-accordion-header):not([aria-selected="true"][aria-expanded="true"]) { + color:var(--pico-secondary); +} + +/* UI-MENU */ +.ui-menu { + background : var(--pico-form-element-background-color); + border : var(--pico-border-width) solid var(--pico-form-element-border-color); + border-radius : var(--pico-border-radius); + display : block; + list-style : none!important; + margin : var(--ui-menu-margin); + /* Override jQuery-UI css value */ + outline : 0; + padding:5px; + -moz-user-select: none; + user-select: none; +} +.ui-menu .ui-menu { + /* IMPORTANT override ui-widget-content */ + background : var(--pico-form-element-background-color); + border : var(--pico-border-width) solid var(--pico-form-element-border-color); + border-radius : var(--pico-border-radius); + position : absolute; + -moz-user-select: none; + user-select: none; +} +.ui-menu .ui-menu-item-wrapper { + background : inherit; + border : 1px solid transparent; + border-radius : var(--pico-border-radius); + color : var(--pico-color); + padding : .125em .25em; + /* position: relative;*/ +} +.ui-menu-icons { + position: relative +} +.ui-menu-icons .ui-menu-item-wrapper { + padding-left: 1.5em +} +.ui-menu .ui-icon { + position: absolute; + top: 0; + bottom: 0; + left: .2em; + margin: auto 0 +} +.ui-menu .ui-menu-icon { + left: auto; + right: 0 +} +.ui-menu .ui-state-focus, +.ui-menu .ui-state-active { + /* IMPORTANT override default UI properties */ + background : var(--pico-primary-hover-background); + border : 1px solid var(--pico-primary-hover-border); + border-radius : var(--pico-border-radius); + color : var(--pico-primary-inverse); + margin : 0; +} + +.ui-button:not(.ui-spinner-button,.ui-dialog-titlebar-close,.ui-controlgroup-item), +.ui-button:link, +.ui-button:visited { +--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)); + background-color: var(--pico-background-color); + border: var(--pico-border-width) solid var(--pico-border-color); + border-radius: var(--pico-border-radius); + box-shadow: var(--pico-box-shadow); + color: var(--pico-color); + cursor: pointer; + font-weight: var(--pico-font-weight); + font-size: var(--pico-font-size); + line-height: var(--pico-line-height); + outline: 0; + padding: var(--pico-form-element-spacing-vertical) var(--pico-form-element-spacing-horizontal); + text-align: center; + text-decoration: none; + -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); +} +.ui-button:hover { +--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); +} +/* +ref: https://api.jquery.com/first/ +*/ +:is(.ui-selectmenu-button.ui-button) { + padding : var(--pico-form-element-spacing-vertical) var(--pico-form-element-spacing-horizontal); + margin-bottom : var(--pico-spacing); + background-color: var(--pico-form-element-background-color); + border : var(--pico-border-width) solid var(--pico-form-element-border-color); + border-radius : var(--pico-border-radius); + box-shadow : var(--pico-button-hover-box-shadow, 0 0 0 rgba(0, 0, 0, 0.2)); + color : var(--pico-form-element-placeholder-color); + cursor : pointer; + height : calc(1rem* var(--pico-line-height) + var(--pico-form-element-spacing-vertical)* 2 + var(--pico-border-width)* 2); + line-height : inherit; + text-align : left; + -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); +} +:is(.ui-selectmenu-button-open.ui-button) { +background-color: var(--pico-form-element-background-color); +border : var(--pico-border-width) solid var(--pico-form-element-border-color); +color : var(--pico-form-element-placeholder-color); +} +.ui-selectmenu-menu .ui-menu .ui-selectmenu-optgroup { + font-weight : var(--pico-font-weight); + margin : 0; +} +.ui-controlgroup-horizontal:first-child .ui-controlgroup-item:nth-of-type(1), +.ui-controlgroup-horizontal > .ui-selectmenu-button { + border-top-left-radius: var(--pico-border-radius) !important; + border-bottom-left-radius: var(--pico-border-radius) !important; +} +.ui-controlgroup-horizontal .ui-controlgroup-item:last-child { + border-top-right-radius: var(--pico-border-radius) !important; + border-bottom-right-radius: var(--pico-border-radius) !important; +} +.ui-controlgroup-vertical .ui-controlgroup-item:first-child, +.ui-controlgroup-vertical .ui-selectmenu-button { + border-top-left-radius: var(--pico-border-radius) !important; + border-top-right-radius: var(--pico-border-radius) !important; +} +.ui-controlgroup-vertical .ui-controlgroup-item:last-child { + border-bottom-left-radius: var(--pico-border-radius); + border-bottom-right-radius: var(--pico-border-radius) !important; +} +.ui-controlgroup { + display : inline-block; + vertical-align : middle; +} +:where(.ui-controlgroup ) .ui-controlgroup-item:not(.ui-spinner) { + background : var(--pico-background-color); + border : var(--pico-border-width) solid var(--pico-form-element-border-color); + color : var(--pico-color); + padding : var(--pico-form-element-spacing-vertical) var(--pico-form-element-spacing-horizontal); + margin : 0; +} +.ui-controlgroup .ui-controlgroup-label span { + font-size : 1rem; + color : var(--pico-primary); +} +.ui-controlgroup-horizontal .ui-controlgroup-label + .ui-controlgroup-item { + border-left : var(--pico-border-width) solid var(--pico-accordion-border-color); +} + +/* RESET BROWSER SPINNER */ +input::-webkit-outer-spin-button, +input::-webkit-inner-spin-button { +display: none; +-webkit-appearance: none; +margin: 0; /* reset margin */ +outline: none; +} +input[type=number] { +-moz-appearance:textfield; /* Firefox */ +} +.ui-spinner-input { + -webkit-appearance: none; + -moz-appearance: textfield; + appearance: none; + border: var(--pico-border-width) solid var(--pico-form-element-border-color); + border-radius: var(--pico-border-radius); + margin: 0!important; + padding-right: 30px!important; + min-width: 8ch; + text-align: center; + vertical-align: middle; + outline: none; +} +.ui-spinner-input:focus{outline:none;box-shadow: 0 0 0 var(--pico-outline-width) var(--pico-primary-focus);} +.ui-spinner a.ui-spinner-button { + position: absolute; + height: 28px!important; + background: var(--pico-primary-underline); +} +.ui-spinner a.ui-spinner-button:hover{ +background: var(--pico-primary-hover-background); +} + +/* CHECKBOX + icon */ +.ui-checkboxradio-label .ui-icon-background { +--pico-background-color: var(--pico-primary-background); +--pico-border-color: var(--pico-primary-border); + -webkit-appearance: none; + -moz-appearance: none; + appearance: none; + accent-color : var(--pico-primary); + background : var(--pico-form-element-border-color); + border : 2px solid var(--pico-form-element-border-color); + border-radius : 3px; + box-shadow : var(--ui-state-check-shadow); + background-position: center; + background-size : .75em auto; + background-repeat: no-repeat; +} +/* RADIO */ +.ui-checkboxradio-radio-label .ui-icon-background { + background : white; + border : 8px solid var(--pico-form-element-border-color); + border-radius : 50%; + box-shadow : var(--ui-state-check-shadow); + height : var(--ui-state-check-height); + width : var(--ui-state-check-width); +} +.ui-checkboxradio-radio-label.ui-checkboxradio-checked .ui-icon, +.ui-checkboxradio-radio-label.ui-checkboxradio-checked:hover .ui-icon { + background-image: var(--pico-icon-checkbox); + background : white; + cursor : pointer; +} + +.ui-datepicker table { + font-size : 16px; +} +.ui-datepicker .ui-datepicker-prev, +.ui-datepicker .ui-datepicker-next{ + border : 1px solid transparent; + position : absolute; + top : 2px; + width : 1.8em; + height : 1.8em +} +.ui-datepicker .ui-datepicker-prev-hover, +.ui-datepicker .ui-datepicker-next-hover{ + top:2px +} +.ui-datepicker .ui-datepicker-prev{ + left:2px +} +.ui-datepicker .ui-datepicker-next{ + right:2px +} +.ui-datepicker .ui-datepicker-prev-hover{ + left:2px +} +.ui-datepicker .ui-datepicker-next-hover{ + right:2px +} +.ui-datepicker .ui-datepicker-prev span, +.ui-datepicker .ui-datepicker-next span{ + display:block; + position:absolute; + left:50%; + margin-left:-8px; + top:50%; + margin-top:-8px +} +.ui-datepicker .ui-datepicker-title{ + margin:0 2.3em; + line-height:1.8em; + text-align:center +} + +.ui-progressbar { + height : var(--ui-progressbar-height); +} +.ui-progressbar .ui-progressbar-value { + background : var(--ui-progressbar-value); +} + + +/* -------------------- -------------------- jQUERY UI TAB */ +.ui-tabs { + position : relative; + border : none; + border-radius : var(--pico-border-radius); + margin : 0; + padding:0.875rem; + list-style : none; +} +.ui-tabs .ui-tabs-nav { + margin : 0; + padding : .2em .2em 0; +} +/* The list of tabs */ +.ui-tabs .ui-tabs-nav { + background : transparent; + border : none; + border-top-left-radius : var(--pico-border-radius); + border-top-right-radius : var(--pico-border-radius); + box-shadow : var(--pico-box-shadow); + cursor : pointer; + display : inline-block; + line-height : 1.25; +} +.ui-tabs .ui-tabs-nav li { + /* border: 1px solid var(--pico-primary-underline); */ + list-style: none; + float: left; + position: relative; + top: 0; + margin: 0; + white-space: nowrap; +} +/* The anchors used to switch panels. */ +.ui-tabs .ui-tabs-nav .ui-tabs-anchor { + background : var(--pico-primary-underline); + color : var(--pico-primary); + float : left; + text-decoration : none; +} +/* li .ui-tabs-anchor:first-child { +border-top-left-radius: var(--pico-border-radius); +} +li .ui-tabs-anchor:last-child { + border-top-right-radius: var(--pico-border-radius); +} */ + +.ui-tabs .ui-tabs-nav li.ui-tabs-active { + margin-bottom: 0; + padding-bottom: 0; + border-radius: var(--pico-border-radius); + border:none; +} +:is(.ui-tabs-tab).ui-state-default,.ui-state-default{ + border-radius: var(--pico-border-radius); +} +.ui-tabs-collapsible .ui-tabs-nav li.ui-tabs-active .ui-tabs-anchor { + cursor: pointer; +} +.ui-tabs .ui-tabs-nav .ui-tabs-anchor:hover, +.ui-tabs .ui-tabs-nav li.ui-tabs-active .ui-tabs-anchor { + background : var(--pico-primary-hover-background); + color : var(--pico-contrast-inverse); +} + +:where(li.ui-tabs-tab, a.ui-tabs-anchor):first-child {border-top-left-radius: var(--pico-border-radius)} +:where(li.ui-tabs-tab, a.ui-tabs-anchor):last-child {border-top-right-radius: var(--pico-border-radius)} +.ui-tabs .ui-tabs-panel { + background : var(--pico-card-background-color); + display : block; + border : var(--ui-tab-panel-border); + padding : var(--pico-block-spacing-vertical) var(--pico-block-spacing-horizontal); +} + +/* CUSTOMIZED content loading via an Ajax call will have the ui-tabs-loading class. */ +.ui-tabs-loading { + border : var(--ui-tabs-loading); /* TODO */ +} + +/* -------------------- jQUERY UI Tooltip */ +/*.ui-tooltip { + padding: 8px; + position: absolute; + z-index: 9999; + max-width: 300px; +} +body .ui-tooltip { + border-width: 2px; +}*/ diff --git a/html/themes/cosmic-dream/css/pico.zinc.min.css b/html/themes/cosmic-dream/css/pico.zinc.min.css new file mode 100644 index 000000000..c28b33468 --- /dev/null +++ b/html/themes/cosmic-dream/css/pico.zinc.min.css @@ -0,0 +1,4 @@ +@charset "UTF-8";/*! + * Pico CSS ✨ v2.0.6 (https://picocss.com) + * Copyright 2019-2024 - Licensed under MIT + */:root{--pico-font-family-emoji:"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";--pico-font-family-sans-serif:system-ui,"Segoe UI",Roboto,Oxygen,Ubuntu,Cantarell,Helvetica,Arial,"Helvetica Neue",sans-serif,var(--pico-font-family-emoji);--pico-font-family-monospace:ui-monospace,SFMono-Regular,"SF Mono",Menlo,Consolas,"Liberation Mono",monospace,var(--pico-font-family-emoji);--pico-font-family:var(--pico-font-family-sans-serif);--pico-line-height:1.5;--pico-font-weight:400;--pico-font-size:100%;--pico-text-underline-offset:0.1rem;--pico-border-radius:0.25rem;--pico-border-width:0.0625rem;--pico-outline-width:0.125rem;--pico-transition:0.2s ease-in-out;--pico-spacing:1rem;--pico-typography-spacing-vertical:1rem;--pico-block-spacing-vertical:var(--pico-spacing);--pico-block-spacing-horizontal:var(--pico-spacing);--pico-grid-column-gap:var(--pico-spacing);--pico-grid-row-gap:var(--pico-spacing);--pico-form-element-spacing-vertical:0.75rem;--pico-form-element-spacing-horizontal:1rem;--pico-group-box-shadow:0 0 0 rgba(0, 0, 0, 0);--pico-group-box-shadow-focus-with-button:0 0 0 var(--pico-outline-width) var(--pico-primary-focus);--pico-group-box-shadow-focus-with-input:0 0 0 0.0625rem var(--pico-form-element-border-color);--pico-modal-overlay-backdrop-filter:blur(0.375rem);--pico-nav-element-spacing-vertical:1rem;--pico-nav-element-spacing-horizontal:0.5rem;--pico-nav-link-spacing-vertical:0.5rem;--pico-nav-link-spacing-horizontal:0.5rem;--pico-nav-breadcrumb-divider:">";--pico-icon-checkbox:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(255, 255, 255)' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");--pico-icon-minus:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(255, 255, 255)' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='5' y1='12' x2='19' y2='12'%3E%3C/line%3E%3C/svg%3E");--pico-icon-chevron:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(136, 145, 164)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");--pico-icon-date:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(136, 145, 164)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='18' rx='2' ry='2'%3E%3C/rect%3E%3Cline x1='16' y1='2' x2='16' y2='6'%3E%3C/line%3E%3Cline x1='8' y1='2' x2='8' y2='6'%3E%3C/line%3E%3Cline x1='3' y1='10' x2='21' y2='10'%3E%3C/line%3E%3C/svg%3E");--pico-icon-time:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(136, 145, 164)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cpolyline points='12 6 12 12 16 14'%3E%3C/polyline%3E%3C/svg%3E");--pico-icon-search:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(136, 145, 164)' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'%3E%3C/circle%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'%3E%3C/line%3E%3C/svg%3E");--pico-icon-close:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(136, 145, 164)' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='18' y1='6' x2='6' y2='18'%3E%3C/line%3E%3Cline x1='6' y1='6' x2='18' y2='18'%3E%3C/line%3E%3C/svg%3E");--pico-icon-loading:url("data:image/svg+xml,%3Csvg fill='none' height='24' width='24' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg' %3E%3Cstyle%3E g %7B animation: rotate 2s linear infinite; transform-origin: center center; %7D circle %7B stroke-dasharray: 75,100; stroke-dashoffset: -5; animation: dash 1.5s ease-in-out infinite; stroke-linecap: round; %7D @keyframes rotate %7B 0%25 %7B transform: rotate(0deg); %7D 100%25 %7B transform: rotate(360deg); %7D %7D @keyframes dash %7B 0%25 %7B stroke-dasharray: 1,100; stroke-dashoffset: 0; %7D 50%25 %7B stroke-dasharray: 44.5,100; stroke-dashoffset: -17.5; %7D 100%25 %7B stroke-dasharray: 44.5,100; stroke-dashoffset: -62; %7D %7D %3C/style%3E%3Cg%3E%3Ccircle cx='12' cy='12' r='10' fill='none' stroke='rgb(136, 145, 164)' stroke-width='4' /%3E%3C/g%3E%3C/svg%3E")}@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.contrast,a.secondary{--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}tfoot td,tfoot th,thead td,thead th{--pico-font-weight:600;--pico-border-width:0.1875rem}code,kbd,pre,samp{--pico-font-family:var(--pico-font-family-monospace)}kbd{--pico-font-weight:bolder}:where(select,textarea),input:not([type=submit],[type=button],[type=reset],[type=checkbox],[type=radio],[type=file]){--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=group]:has(button.secondary:focus,[type=submit].secondary:focus,[type=button].secondary:focus,[role=button].secondary:focus),[role=search]: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=group]:has(button.contrast:focus,[type=submit].contrast:focus,[type=button].contrast:focus,[role=button].contrast:focus),[role=search]: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=group] [role=button],[role=group] [type=button],[role=group] [type=submit],[role=group] button,[role=search] [role=button],[role=search] [type=button],[role=search] [type=submit],[role=search] 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)}:root:not([data-theme=dark]),[data-theme=light]{--pico-background-color:#fff;--pico-color:#373c44;--pico-text-selection-color:rgba(136, 145, 164, 0.25);--pico-muted-color:#646b79;--pico-muted-border-color:#e7eaf0;--pico-primary:#646b79;--pico-primary-background:#646b79;--pico-primary-border:var(--pico-primary-background);--pico-primary-underline:rgba(100, 107, 121, 0.5);--pico-primary-hover:#4d535e;--pico-primary-hover-background:#5c6370;--pico-primary-hover-border:var(--pico-primary-hover-background);--pico-primary-hover-underline:var(--pico-primary-hover);--pico-primary-focus:rgba(136, 145, 164, 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:var(--pico-background-color);--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}:root:not([data-theme=dark]) input:is([type=submit],[type=button],[type=reset],[type=checkbox],[type=radio],[type=file]),[data-theme=light] 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(150, 158, 175, 0.1875);--pico-muted-color:#7b8495;--pico-muted-border-color:#202632;--pico-primary:#969eaf;--pico-primary-background:#646b79;--pico-primary-border:var(--pico-primary-background);--pico-primary-underline:rgba(150, 158, 175, 0.5);--pico-primary-hover:#b3b9c5;--pico-primary-hover-background:#6f7887;--pico-primary-hover-border:var(--pico-primary-hover-background);--pico-primary-hover-underline:var(--pico-primary-hover);--pico-primary-focus:rgba(150, 158, 175, 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(150, 158, 175, 0.1875);--pico-muted-color:#7b8495;--pico-muted-border-color:#202632;--pico-primary:#969eaf;--pico-primary-background:#646b79;--pico-primary-border:var(--pico-primary-background);--pico-primary-underline:rgba(150, 158, 175, 0.5);--pico-primary-hover:#b3b9c5;--pico-primary-hover-background:#6f7887;--pico-primary-hover-border:var(--pico-primary-hover-background);--pico-primary-hover-underline:var(--pico-primary-hover);--pico-primary-focus:rgba(150, 158, 175, 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)}[type=checkbox],[type=radio],[type=range],progress{accent-color:var(--pico-primary)}*,::after,::before{box-sizing:border-box;background-repeat:no-repeat}::after,::before{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}body{width:100%;margin:0}main{display:block}body>footer,body>header,body>main{padding-block:var(--pico-block-spacing-vertical)}section{margin-bottom:var(--pico-block-spacing-vertical)}.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{grid-column-gap:var(--pico-grid-column-gap);grid-row-gap:var(--pico-grid-row-gap);display:grid;grid-template-columns:1fr}@media (min-width:768px){.grid{grid-template-columns:repeat(auto-fit,minmax(0%,1fr))}}.grid>*{min-width:0}.overflow-auto{overflow:auto}b,strong{font-weight:bolder}sub,sup{position:relative;font-size:.75em;line-height:0;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.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) * .25)}:where(dl,ol,ul) :where(dl,ol,ul){margin:0;margin-top:calc(var(--pico-typography-spacing-vertical) * .25)}ul li{list-style:square}mark{padding:.125rem .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:.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) * .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)}:where(a:not([role=button])),[role=link]{--pico-color:var(--pico-primary);--pico-background-color:transparent;--pico-underline:var(--pico-primary-underline);outline:0;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{margin:0;overflow:visible;font-family:inherit;text-transform:none}[type=button],[type=reset],[type=submit],button{-webkit-appearance:button}[role=button],[type=button],[type=file]::file-selector-button,[type=reset],[type=submit],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:0;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)}[role=button]:is(:hover,:active,:focus),[role=button]:is([aria-current]:not([aria-current=false])),[type=button]:is(:hover,:active,:focus),[type=button]:is([aria-current]:not([aria-current=false])),[type=file]::file-selector-button:is(:hover,:active,:focus),[type=file]::file-selector-button:is([aria-current]:not([aria-current=false])),[type=reset]:is(:hover,:active,:focus),[type=reset]:is([aria-current]:not([aria-current=false])),[type=submit]:is(:hover,:active,:focus),[type=submit]:is([aria-current]:not([aria-current=false])),button:is(:hover,:active,:focus),button:is([aria-current]:not([aria-current=false])){--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)}[role=button]:focus,[role=button]: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,[type=reset]:focus,[type=reset]:is([aria-current]:not([aria-current=false])):focus,[type=submit]:focus,[type=submit]:is([aria-current]:not([aria-current=false])):focus,button:focus,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=button],[type=reset],[type=submit]{margin-bottom:var(--pico-spacing)}:is(button,[type=submit],[type=button],[role=button]).secondary,[type=file]::file-selector-button,[type=reset]{--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=file]::file-selector-button:is([aria-current]:not([aria-current=false]),:hover,:active,:focus),[type=reset]: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=file]::file-selector-button:focus,[type=file]::file-selector-button:is([aria-current]:not([aria-current=false])):focus,[type=reset]:focus,[type=reset]: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:.5;pointer-events:none}:where(table){width:100%;border-collapse:collapse;border-spacing:0;text-indent:0}td,th{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 td,tfoot th{border-top:var(--pico-border-width) solid var(--pico-table-border-color);border-bottom:0}table.striped tbody tr:nth-child(odd) td,table.striped tbody tr:nth-child(odd) th{background-color:var(--pico-table-row-stripped-background-color)}: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,kbd,pre,samp{font-size:.875em;font-family:var(--pico-font-family)}pre code{font-size:inherit;font-family:inherit}pre{-ms-overflow-style:scrollbar;overflow:auto}code,kbd,pre{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:.375rem}pre{display:block;margin-bottom:var(--pico-spacing);overflow-x:auto}pre>code{display:block;padding:var(--pico-spacing);background:0 0;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{display:block;margin:0;padding:0}figure figcaption{padding:calc(var(--pico-spacing) * .5) 0;color:var(--pico-muted-color)}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}input,optgroup,select,textarea{margin:0;font-size:1rem;line-height:var(--pico-line-height);font-family:inherit;letter-spacing:inherit}input{overflow:visible}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:0}:-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}fieldset legend,label{display:block;margin-bottom:calc(var(--pico-spacing) * .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) * .5)}button[type=submit],input:not([type=checkbox],[type=radio]),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:0;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)}:where(select,textarea):not([readonly]):is(:active,:focus),input:not([type=submit],[type=button],[type=reset],[type=checkbox],[type=radio],[readonly]):is(:active,:focus){--pico-background-color:var(--pico-form-element-active-background-color)}:where(select,textarea):not([readonly]):is(:active,:focus),input:not([type=submit],[type=button],[type=reset],[role=switch],[readonly]):is(:active,:focus){--pico-border-color:var(--pico-form-element-active-border-color)}:where(select,textarea):not([readonly]):focus,input:not([type=submit],[type=button],[type=reset],[type=range],[type=file],[readonly]):focus{--pico-box-shadow:0 0 0 var(--pico-outline-width) var(--pico-form-element-focus-color)}:where(fieldset[disabled]) :is(input:not([type=submit],[type=button],[type=reset]),select,textarea),input:not([type=submit],[type=button],[type=reset])[disabled],label[aria-disabled=true],select[disabled],textarea[disabled]{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 .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 .75rem}input::-webkit-input-placeholder,input::placeholder,select:invalid,textarea::-webkit-input-placeholder,textarea::placeholder{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 .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 .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 .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) * -.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) * .25)}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:-.125em;margin-inline-end:.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:.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:.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:.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 .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:active[aria-invalid=true],[type=checkbox]:checked:focus[aria-invalid=true],[type=checkbox]:checked[aria-invalid=true],[type=checkbox][role=switch]:checked:active[aria-invalid=true],[type=checkbox][role=switch]:checked:focus[aria-invalid=true],[type=checkbox][role=switch]:checked[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=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,[type=radio][aria-invalid=false]:checked,[type=radio][aria-invalid=false]:checked:active,[type=radio][aria-invalid=false]:checked:focus{--pico-border-color:var(--pico-form-element-valid-border-color)}[type=checkbox]:checked:active[aria-invalid=true],[type=checkbox]:checked:focus[aria-invalid=true],[type=checkbox]:checked[aria-invalid=true],[type=checkbox][role=switch]:checked:active[aria-invalid=true],[type=checkbox][role=switch]:checked:focus[aria-invalid=true],[type=checkbox][role=switch]:checked[aria-invalid=true],[type=radio]:checked:active[aria-invalid=true],[type=radio]:checked:focus[aria-invalid=true],[type=radio]:checked[aria-invalid=true]{--pico-border-color:var(--pico-form-element-invalid-border-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) * .5)}[type=color]::-moz-color-swatch{border:0;border-radius:calc(var(--pico-border-radius) * .5)}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}[type=file]{--pico-color:var(--pico-muted-color);margin-left:calc(var(--pico-outline-width) * -1);padding:calc(var(--pico-form-element-spacing-vertical) * .5) 0;padding-left:var(--pico-outline-width);border:0;border-radius:0;background:0 0}[type=file]::file-selector-button{margin-right:calc(var(--pico-spacing)/ 2);padding:calc(var(--pico-form-element-spacing-vertical) * .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)}[type=range]{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:100%;height:1.25rem;background:0 0}[type=range]::-webkit-slider-runnable-track{width:100%;height:.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:.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:.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:-.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:-.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:-.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: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) + .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 .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 .75rem}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) * .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:0}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);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)}article>footer,article>header{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) * .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)}details.dropdown{position:relative;border-bottom:none}details.dropdown summary::after,details.dropdown>a::after,details.dropdown>button::after{display:block;width:1rem;height:calc(1rem * var(--pico-line-height,1.5));margin-inline-start:.25rem;float:right;transform:rotate(0) translateX(.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:0}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(0) translateX(0)}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) * .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) * .5)}details.dropdown summary+ul li:last-of-type{margin-bottom:calc(var(--pico-form-element-spacing-vertical) * .5)}details.dropdown summary+ul li a{display:block;margin:calc(var(--pico-form-element-spacing-vertical) * -.5) calc(var(--pico-form-element-spacing-horizontal) * -1);padding:calc(var(--pico-form-element-spacing-vertical) * .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:active,details.dropdown summary+ul li a:focus,details.dropdown summary+ul li a:focus-visible,details.dropdown summary+ul li a:hover,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:0 0;content:"";cursor:default}label>details.dropdown{margin-top:calc(var(--pico-spacing) * .25)}[role=group],[role=search]{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 transparent);vertical-align:middle;transition:box-shadow var(--pico-transition)}[role=group] input:not([type=checkbox],[type=radio]),[role=group] select,[role=group]>*,[role=search] input:not([type=checkbox],[type=radio]),[role=search] select,[role=search]>*{position:relative;flex:1 1 auto;margin-bottom:0}[role=group] input:not([type=checkbox],[type=radio]):not(:first-child),[role=group] select:not(:first-child),[role=group]>:not(:first-child),[role=search] input:not([type=checkbox],[type=radio]):not(:first-child),[role=search] select:not(:first-child),[role=search]>:not(:first-child){margin-left:0;border-top-left-radius:0;border-bottom-left-radius:0}[role=group] input:not([type=checkbox],[type=radio]):not(:last-child),[role=group] select:not(:last-child),[role=group]>:not(:last-child),[role=search] input:not([type=checkbox],[type=radio]):not(:last-child),[role=search] select:not(:last-child),[role=search]>:not(:last-child){border-top-right-radius:0;border-bottom-right-radius:0}[role=group] input:not([type=checkbox],[type=radio]):focus,[role=group] select:focus,[role=group]>:focus,[role=search] input:not([type=checkbox],[type=radio]):focus,[role=search] select:focus,[role=search]>:focus{z-index:2}[role=group] [role=button]:not(:first-child),[role=group] [type=button]:not(:first-child),[role=group] [type=reset]:not(:first-child),[role=group] [type=submit]:not(:first-child),[role=group] button:not(:first-child),[role=group] input:not([type=checkbox],[type=radio]):not(:first-child),[role=group] select:not(:first-child),[role=search] [role=button]:not(:first-child),[role=search] [type=button]:not(:first-child),[role=search] [type=reset]:not(:first-child),[role=search] [type=submit]:not(:first-child),[role=search] button:not(:first-child),[role=search] input:not([type=checkbox],[type=radio]):not(:first-child),[role=search] select:not(:first-child){margin-left:calc(var(--pico-border-width) * -1)}[role=group] [role=button],[role=group] [type=button],[role=group] [type=reset],[role=group] [type=submit],[role=group] button,[role=search] [role=button],[role=search] [type=button],[role=search] [type=reset],[role=search] [type=submit],[role=search] button{width:auto}@supports selector(:has(*)){[role=group]:has(button:focus,[type=submit]:focus,[type=button]:focus,[role=button]:focus),[role=search]: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=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,[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{border-color:transparent}[role=group]:has(input:not([type=submit],[type=button]):focus,select:focus),[role=search]:has(input:not([type=submit],[type=button]):focus,select:focus){--pico-group-box-shadow:var(--pico-group-box-shadow-focus-with-input)}[role=group]:has(input:not([type=submit],[type=button]):focus,select:focus) [role=button],[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) [type=submit],[role=group]:has(input:not([type=submit],[type=button]):focus,select:focus) button,[role=search]:has(input:not([type=submit],[type=button]):focus,select:focus) [role=button],[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) [type=submit],[role=search]:has(input:not([type=submit],[type=button]):focus,select:focus) 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=group] [role=button]:focus,[role=group] [type=button]:focus,[role=group] [type=reset]:focus,[role=group] [type=submit]:focus,[role=group] button:focus,[role=search] [role=button]:focus,[role=search] [type=button]:focus,[role=search] [type=reset]:focus,[role=search] [type=submit]:focus,[role=search] 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}[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:-.125em}[aria-busy=true]:not(input,select,textarea,html):not(:empty)::before{margin-inline-end:calc(var(--pico-spacing) * .5)}[aria-busy=true]:not(input,select,textarea,html):empty{text-align:center}[role=button][aria-busy=true],[type=button][aria-busy=true],[type=reset][aria-busy=true],[type=submit][aria-busy=true],a[aria-busy=true],button[aria-busy=true]{pointer-events:none}: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:100%;height:inherit;min-height:100%;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 [role=button],dialog article>footer button{margin-bottom:0}dialog article>footer [role=button]:not(:first-of-type),dialog article>footer button:not(:first-of-type){margin-left:calc(var(--pico-spacing) * .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:.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,0);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:.2s;animation-timing-function:ease-in-out;animation-fill-mode:both}:where(.modal-is-opening,.modal-is-closing) dialog{animation-duration:.8s;animation-name:modal-overlay}:where(.modal-is-opening,.modal-is-closing) dialog>article{animation-delay:.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}}: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 [role=button],nav li [type=button],nav li 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 li,aside nav,aside ol,aside ul{display:block}aside li{padding:calc(var(--pico-nav-element-spacing-vertical) * .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{display:inline-block;vertical-align:baseline}progress{-webkit-appearance:none;-moz-appearance:none;display:inline-block;appearance:none;width:100%;height:.5rem;margin-bottom:calc(var(--pico-spacing) * .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:0 0}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}}[data-tooltip]{position:relative}[data-tooltip]:not(a,button,input){border-bottom:1px dotted;text-decoration:none;cursor:help}[data-tooltip]::after,[data-tooltip]::before,[data-tooltip][data-placement=top]::after,[data-tooltip][data-placement=top]::before{display:block;z-index:99;position:absolute;bottom:100%;left:50%;padding:.25rem .5rem;overflow:hidden;transform:translate(-50%,-.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:.875rem;text-decoration:none;text-overflow:ellipsis;white-space:nowrap;opacity:0;pointer-events:none}[data-tooltip]::after,[data-tooltip][data-placement=top]::after{padding:0;transform:translate(-50%,0);border-top:.3rem solid;border-right:.3rem solid transparent;border-left:.3rem solid transparent;border-radius:0;background-color:transparent;content:"";color:var(--pico-tooltip-background-color)}[data-tooltip][data-placement=bottom]::after,[data-tooltip][data-placement=bottom]::before{top:100%;bottom:auto;transform:translate(-50%,.25rem)}[data-tooltip][data-placement=bottom]:after{transform:translate(-50%,-.3rem);border:.3rem solid transparent;border-bottom:.3rem solid}[data-tooltip][data-placement=left]::after,[data-tooltip][data-placement=left]::before{top:50%;right:100%;bottom:auto;left:auto;transform:translate(-.25rem,-50%)}[data-tooltip][data-placement=left]:after{transform:translate(.3rem,-50%);border:.3rem solid transparent;border-left:.3rem solid}[data-tooltip][data-placement=right]::after,[data-tooltip][data-placement=right]::before{top:50%;right:auto;bottom:auto;left:100%;transform:translate(.25rem,-50%)}[data-tooltip][data-placement=right]:after{transform:translate(-.3rem,-50%);border:.3rem solid transparent;border-right:.3rem solid}[data-tooltip]:focus::after,[data-tooltip]:focus::before,[data-tooltip]:hover::after,[data-tooltip]:hover::before{opacity:1}@media (hover:hover) and (pointer:fine){[data-tooltip]:focus::after,[data-tooltip]:focus::before,[data-tooltip]:hover::after,[data-tooltip]:hover::before{--pico-tooltip-slide-to:translate(-50%, -0.25rem);transform:translate(-50%,.75rem);animation-duration:.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%,-.25rem);animation-name:tooltip-caret-slide}[data-tooltip][data-placement=bottom]:focus::after,[data-tooltip][data-placement=bottom]:focus::before,[data-tooltip][data-placement=bottom]:hover::after,[data-tooltip][data-placement=bottom]:hover::before{--pico-tooltip-slide-to:translate(-50%, 0.25rem);transform:translate(-50%,-.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%,-.5rem);animation-name:tooltip-caret-slide}[data-tooltip][data-placement=left]:focus::after,[data-tooltip][data-placement=left]:focus::before,[data-tooltip][data-placement=left]:hover::after,[data-tooltip][data-placement=left]:hover::before{--pico-tooltip-slide-to:translate(-0.25rem, -50%);transform:translate(.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(.05rem,-50%);animation-name:tooltip-caret-slide}[data-tooltip][data-placement=right]:focus::after,[data-tooltip][data-placement=right]:focus::before,[data-tooltip][data-placement=right]:hover::after,[data-tooltip][data-placement=right]:hover::before{--pico-tooltip-slide-to:translate(0.25rem, -50%);transform:translate(-.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(-.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}}[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}[tabindex],a,area,button,input,label,select,summary,textarea{-ms-touch-action:manipulation}[dir=rtl]{direction:rtl}@media (prefers-reduced-motion:reduce){:not([aria-busy=true]),:not([aria-busy=true])::after,:not([aria-busy=true])::before{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}} \ No newline at end of file diff --git a/html/themes/cosmic-dream/index.php b/html/themes/cosmic-dream/index.php new file mode 100644 index 000000000..0becfd893 --- /dev/null +++ b/html/themes/cosmic-dream/index.php @@ -0,0 +1,1350 @@ + + + + + + + + XCL Theme built with PicoCSS for XOOPSCube + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ +
+ + +
+ +
+

Web Application Platform

+

Just Use it!

+
+ +
+
+
+
Integrate responsive frameworks and libraries in your Modules and Themes, simple customize a template set.
+
+
+

Content Management System, Cache, Duplicatable Modules (multisites), User Groups Management, Themes, built-in Search.

+
+
+
+ +
+
+
Scalability is the property of a system to handle a growing amount of work by adding resources to the system. 
+
+
+

Scalability without costly contracts, hosting cloud hidden costs, limitations or restrictions. Self-hosted and local first.

+
+
+
+ +
+
+
A secure and modular architecture design with self-contained components known as modules. 
+
+
+
Each module encapsulates a specific functionality, operates independently, and can be developed, maintained, and reused safely.
+
+
+ +
+ +
+ + +
+ + + + +
+ +
+

Default theme layout

+The placeholders for the content and blocks are defined by the theme layout. +
+ You can create a custom center-block-left to trigger a component display on the Top page
+ Add to the Block Title a prefix "top-" and select the target "Toppage".
+ +
+

Header Nav

+
+
+
Logo
+
User menu  Light | Dark
+
+
+

Component top center

+
+
grid-column
center-block-left
Block Title prefix: top-
+
grid-column
center-block-center
Block Title prefix: top-
+
grid-column
center-block-right
Block Title prefix: top-
+
+
+

Main container

+
+
aside nav
Side-Left
Default Blocks:
  • User Menu
  • Main Menu
  • Themes
+
div.content
App Start Page [template]
or
Module Content
+
+ aside nav +
Side-Right +
Block-Right and for Admin Panel a Block Title with prefix 'admin' +
+
+
+

Section container-fluid

+
+
grid-column
center-block-left
+
grid-column
center-block-left
+
grid-column
center-block-left
+
+
+
Footer
+
+ +
+ +
+

Top Page Center Blocks

+ +
    +
  1. Browse to Admin > Block Management > Add Custom Block +
  2. Give the Block Title e.g. top-none-myblock
    +the prefix top- with none- only show the block content +
  3. Select the side Center (left, center, right) +
  4. Write some content +
  5. Select Target Modules : Toppage
    6. +
  6. Select Target Groups : check all groups and submit
    7. +
+
+ + +

Pico

+

A pure HTML example, without dependencies.

+ + + +
+

Accordions

+
+ Accordion 1 +

+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque urna diam, + tincidunt nec porta sed, auctor id velit. Etiam venenatis nisl ut orci consequat, vitae + tempus quam commodo. Nulla non mauris ipsum. Aliquam eu posuere orci. Nulla convallis + lectus rutrum quam hendrerit, in facilisis elit sollicitudin. Mauris pulvinar pulvinar + mi, dictum tristique elit auctor quis. Maecenas ac ipsum ultrices, porta turpis sit + amet, congue turpis. +

+
+
+ Accordion 2 +
    +
  • Vestibulum id elit quis massa interdum sodales.
    • +
  • Nunc quis eros vel odio pretium tincidunt nec quis neque.
    • +
  • Quisque sed eros non eros ornare elementum.
    • +
  • Cras sed libero aliquet, porta dolor quis, dapibus ipsum.
    • +
+
+
+ + +
+
+

Article

+ header +
+

+ Content paragraph - Nullam dui arcu, malesuada et sodales eu, efficitur vitae dolor. Sed ultricies dolor non + ante vulputate hendrerit. Vivamus sit amet suscipit sapien. Nulla iaculis eros a elit + pharetra egestas. Nunc placerat facilisis cursus. Sed vestibulum metus eget dolor pharetra + rutrum. +

+
+ Footer - Duis nec elit placerat, suscipit nibh quis, finibus neque. +
+
+ + +
+

Buttons

+

+ + + +

+

+ + + +

+
+ + +
+
+

Form elements

+ + + + + + + + + Curabitur consequat lacus at lacus porta finibus. + + + + + + + + + + + + +
+ + + +
+ +
+ + + + + + + + +
+ +
+ +
+ Checkboxes + + +
+ + +
+ Radio buttons + + +
+ + +
+ Switches + + +
+
+ + + + +
+
+ + +
+

Group

+
+
+ + +
+
+
+ + +
+

Loading

+
+ +
+ + + + + +
+

Preview

+

+ Sed ultricies dolor non ante vulputate hendrerit. Vivamus sit amet suscipit sapien. Nulla + iaculis eros a elit pharetra egestas. +

+
+
+ + + +
+
+ +
+
+
+ + +
+

Progress bar

+ + +
+ + +
+

Tables

+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
#HeadingHeadingHeadingHeadingHeadingHeadingHeading
1CellCellCellCellCellCellCell
2CellCellCellCellCellCellCell
3CellCellCellCellCellCellCell
+
+
+ + +
+

Typography

+

+ Aliquam lobortis vitae nibh nec rhoncus. Morbi mattis neque eget efficitur feugiat. + Vivamus porta nunc a erat mattis, mattis feugiat turpis pretium. Quisque sed tristique + felis. +

+ + +
+ "Maecenas vehicula metus tellus, vitae congue turpis hendrerit non. Nam at dui sit amet + ipsum cursus ornare." +
+ - Phasellus eget lacinia +
+
+ + +

Lists

+
    +
  • Aliquam lobortis lacus eu libero ornare facilisis.
    • +
  • Nam et magna at libero scelerisque egestas.
    • +
  • Suspendisse id nisl ut leo finibus vehicula quis eu ex.
    • +
  • Proin ultricies turpis et volutpat vehicula.
    • +
+ + +

Inline text elements

+
+

Primary link

+

+ Secondary link +

+

+ Contrast link +

+
+
+

Bold

+

Italic

+

Underline

+
+
+

Deleted

+

Inserted

+

Strikethrough

+
+
+

Small

+

Text Sub

+

Text Sup

+
+
+

+ Abbr. +

+

Kbd

+

Highlighted

+
+ + +

Heading 3

+

+ Integer bibendum malesuada libero vel eleifend. Fusce iaculis turpis ipsum, at efficitur + sem scelerisque vel. Aliquam auctor diam ut purus cursus fringilla. Class aptent taciti + sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. +

+

Heading 4

+

+ Cras fermentum velit vitae auctor aliquet. Nunc non congue urna, at blandit nibh. Donec ac + fermentum felis. Vivamus tincidunt arcu ut lacus hendrerit, eget mattis dui finibus. +

+
Heading 5
+

+ Donec nec egestas nulla. Sed varius placerat felis eu suscipit. Mauris maximus ante in + consequat luctus. Morbi euismod sagittis efficitur. Aenean non eros orci. Vivamus ut diam + sem. +

+
Heading 6
+

+ Ut sed quam non mauris placerat consequat vitae id risus. Vestibulum tincidunt nulla ut + tortor posuere, vitae malesuada tortor molestie. Sed nec interdum dolor. Vestibulum id + auctor nisi, a efficitur sem. Aliquam sollicitudin efficitur turpis, sollicitudin + hendrerit ligula semper id. Nunc risus felis, egestas eu tristique eget, convallis in + velit. +

+ + +
+ + + + + + + + + + + + Legacy to Remind Us of Where We Come From + +
+ Image from + SVG Image +
+
+
+ + +
+ + + + + + +
+ + + +
+ +

jQuery UI

+ +
+

Accordion

+ +
+

Section 1

+
+

+ Mauris mauris ante, blandit et, ultrices a, suscipit eget, quam. Integer + ut neque. Vivamus nisi metus, molestie vel, gravida in, condimentum sit + amet, nunc. Nam a nibh. Donec suscipit eros. Nam mi. Proin viverra leo ut + odio. Curabitur malesuada. Vestibulum a velit eu ante scelerisque vulputate. +

+
+

Section 2

+
+

+ Sed non urna. Donec et ante. Phasellus eu ligula. Vestibulum sit amet + purus. Vivamus hendrerit, dolor at aliquet laoreet, mauris turpis porttitor + velit, faucibus interdum tellus libero ac justo. Vivamus non quam. In + suscipit faucibus urna. +

+
+

Section 3

+
+

+ Nam enim risus, molestie et, porta ac, aliquam ac, risus. Quisque lobortis. + Phasellus pellentesque purus in massa. Aenean in pede. Phasellus ac libero + ac tellus pellentesque semper. Sed ac felis. Sed commodo, magna quis + lacinia ornare, quam ante aliquam nisi, eu iaculis leo purus venenatis dui. +

+
    +
  • List item one
    • +
  • List item two
    • +
  • List item three
    • +
+
+

Section 4

+
+

+ Cras dictum. Pellentesque habitant morbi tristique senectus et netus + et malesuada fames ac turpis egestas. Vestibulum ante ipsum primis in + faucibus orci luctus et ultrices posuere cubilia Curae; Aenean lacinia + mauris vel est. +

+

+ Suspendisse eu nisl. Nullam ut libero. Integer dignissim consequat lectus. + Class aptent taciti sociosqu ad litora torquent per conubia nostra, per + inceptos himenaeos. +

+
+
+
+ + +
+
+ +
+ + +

Button Widget with icons

+
+ + + + + + +
+
+ +
+

Button - Widget

+ +
+ + + An anchor +
+
+ +
+

CSS Buttons

+
+ + + An anchor +
+
+ +
+ +
+ + + +
+

Checkbox and radio button widgets

+ + +
+
+ Rental Car +
+ + + + + + + + + + +
+
+
+ +
+ + +
+

Progress bar

+ + +
+
Starting download...
+
+
+ + +
+ + +
+

Datepicker

+ +
+ Date:
+
+
+ + +
+

Dialog

+ +
+

This is an animated dialog which is useful for displaying information. The dialog window can be moved, resized and closed with the 'x' icon.

+
+ + +
+ + +
+ +
+

Menu

+ + +
+ +
+

Menu Categories

+ + + + +
+ +
+

Menu Icons

+ + + +
+ +
+ + +
+ + +
+

select menu

+
+ +
+ + + + + + + + + + + +
+ +
+ +
+ +
+

PicoSS Dropdown

+ +
+ Dropdown + +
+ + + +
+
+ + +
+ + +
+ +

Block-center - Grid

+ +
+
+

block-center-left

+
+
block title
+

content

+
+
+
+

block-center-center

+
+
block title
+

content

+
+
+
+

block-center-rigth

+
+
block title
+

content

+
+
+
+ +
+
+
+
block title
+

content

+
+
+
+
+
block title
+

content

+
+
+
+
+
block title
+

content

+
+
+
+
+ + + + + + + +
+
+ +

Confirm your action!

+
+

+ Cras sit amet maximus risus. Pellentesque sodales odio sit amet augue finibus + pellentesque. Nullam finibus risus non semper euismod. +

+ +
+ + + + + +
+ + + + + + +
+ + + + + \ No newline at end of file diff --git a/html/themes/cosmic-dream/js/index.html b/html/themes/cosmic-dream/js/index.html new file mode 100644 index 000000000..990cbd603 --- /dev/null +++ b/html/themes/cosmic-dream/js/index.html @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/html/themes/cosmic-dream/js/plugins.js b/html/themes/cosmic-dream/js/plugins.js new file mode 100644 index 000000000..3174e1540 --- /dev/null +++ b/html/themes/cosmic-dream/js/plugins.js @@ -0,0 +1,178 @@ +/* + * XCL Theme built with PicoCSS v206 + * + * @version 2.4.0 + * @update 2024-04-20 + * @Date 2024-02-02 + * @author Nuno Luciano ( https://github.com/gigamaster ) + * @copyright (c) 2005-2024 The XOOPSCube Project, authors + * @license MIT + * @link https://github.com/xoopscube + * + * + * 1. Audio + * 2. Modal + * -- jQuery Document Ready - helper plugins + * 3. Render SVG + * 4. Notification Time + * 5. Dropdown - block options, menu, etc + * 6. Close on click document + * 7. Highlight Message nav-tab active + * 8.1 remove border + * 8.2 url constructor + * 9. Aria-busy Toogle + */ + +/* + * 1. Audio + */ +(() => { + window.audiobutton.addEventListener('click', () => { + if (window.audio.paused) { + window.audio.play(); + } else { + window.audio.pause(); + } + }); +})(); + +/* + * 2. Modal Pico.css - https://picocss.com + * Copyright 2019-2024 - Licensed under MIT + */ +// Config +const isOpenClass = "modal-is-open"; +const openingClass = "modal-is-opening"; +const closingClass = "modal-is-closing"; +const scrollbarWidthCssVar = "--pico-scrollbar-width"; +const animationDuration = 400; // ms +let visibleModal = null; + +// Toggle modal +const toggleModal = (event) => { + event.preventDefault(); + const modal = document.getElementById(event.currentTarget.dataset.target); + if (!modal) return; + modal && (modal.open ? closeModal(modal) : openModal(modal)); +}; + +// Open modal +const openModal = (modal) => { + const { documentElement: html } = document; + const scrollbarWidth = getScrollbarWidth(); + if (scrollbarWidth) { + html.style.setProperty(scrollbarWidthCssVar, `${scrollbarWidth}px`); + } + html.classList.add(isOpenClass, openingClass); + setTimeout(() => { + visibleModal = modal; + html.classList.remove(openingClass); + }, animationDuration); + modal.showModal(); +}; + +// Close modal +const closeModal = (modal) => { + visibleModal = null; + const { documentElement: html } = document; + html.classList.add(closingClass); + setTimeout(() => { + html.classList.remove(closingClass, isOpenClass); + html.style.removeProperty(scrollbarWidthCssVar); + modal.close(); + }, animationDuration); +}; + +// Close with a click outside +document.addEventListener("click", (event) => { + if (visibleModal === null) return; + const modalContent = visibleModal.querySelector("article"); + const isClickInside = modalContent.contains(event.target); + !isClickInside && closeModal(visibleModal); +}); + +// Close with Esc key +document.addEventListener("keydown", (event) => { + if (event.key === "Escape" && visibleModal) { + closeModal(visibleModal); + } +}); + +// Get scrollbar width +const getScrollbarWidth = () => { + const scrollbarWidth = window.innerWidth - document.documentElement.clientWidth; + return scrollbarWidth; +}; + +// Is scrollbar visible +const isScrollbarVisible = () => { + return document.body.scrollHeight > screen.height; +}; + + +// DOCUMENT READY - Place any jQuery/helper plugins below ! +/* ---------- ---------- ---------- ---------- ---------- */ +// Do something on document ready +$(function () { + + // 3. Inline SVG icons + $('.svg').renderClassSvg(); + + // 4. Notification Time + $('div.runtime').fadeIn( 750 ).delay( 3000 ).fadeOut( 500 ); + + // 5. Dropdown - block options, menu, etc + $(".dropdown").on("click", ".dropdown-toggle", function (event) { + event.preventDefault(); + $('.dropdown').removeClass('isopen'); + $(this).parent().toggleClass('isopen'); + }); + + // 6. Close on click document + $(document).on("click", function (event) { + var $trigger = $(".dropdown"); + if ($trigger !== event.target && !$trigger.has(event.target).length) { + $(".dropdown").removeClass("isopen"); + } + }); + + // 7. Highlight Message nav-tab active + $("#tabs-mail").tabs({ + active: false, + collapsible: true, + classes: { + "ui-tabs": "taborder" + }, + beforeActivate: function (event, ui) { + window.open($(ui.newTab).find('a').attr('href'), '_self'); + return false; + }, + } + ); + // .find('.ui-tabs-tab').removeClass('ui-corner-all ui-corner-top'); + + // 8.1 Remove border from dropdown UL children + $(".ui-tabs-tab .dropdown-content ul").children().css( "border", "0" ); + + // 8.2 url constructor + const parseUrl = new URL(window.location.href); + const msgAction = parseUrl.searchParams.get("action"); + // If module message index, highlight the first nav-tab + if (msgAction == null) { + $('#tabs-mail ul.ui-tabs-nav li:first-child').addClass('ui-state-active'); + } else { + // Highlight current action nav-tab + $('a[href="index.php?action=' + msgAction + '"]').parent('li').addClass('ui-tabs-active ui-state-active'); + } + if (msgAction == 'settings'|| msgAction == 'blacklist'){ + // Highlight dropdown menu + $('.settings ').parent('li').addClass("ui-state-active"); + } + // 9. Aria-busy Toogle + $('[aria-busy="false"]').on( "click", function(event) { + event.stopPropagation(); + event.stopImmediatePropagation(); + $(this).prop("ariaBusy", true); + }); + +}); diff --git a/html/themes/cosmic-dream/manifesto.ini.php b/html/themes/cosmic-dream/manifesto.ini.php new file mode 100644 index 000000000..5e87f5541 --- /dev/null +++ b/html/themes/cosmic-dream/manifesto.ini.php @@ -0,0 +1,22 @@ +header { + --pico-block-spacing-vertical:0; + background: rgba(24 28 37 / 50%); + box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px; + backdrop-filter: blur(10px); + -webkit-backdrop-filter: blur(10px); + position: fixed; + top: 0; + left: 0; + z-index: 200; + width: 100vw; +} +body > main { + display : grid; + grid-template-rows: 1fr; + row-gap : 2rem; + margin-bottom : calc(var(--pico-spacing) * 4); + padding : 0 +} +body > main > * { + min-width : 0; + margin-bottom : 0 +} + +body > main > article { + --pico-block-spacing-vertical: var(--pico-spacing); + --pico-block-spacing-horizontal: var(--pico-spacing); +} + +/* Body align Aside and Main */ +body > main > aside#nav-left, +body > main > aside#block-right { + margin-top : .5rem; +} +body > main > div > aside { + background : var(--pico-card-background-color); + padding : .5rem; + padding : var(--pico-nav-element-spacing-vertical) var(--pico-nav-element-spacing-horizontal); /* @todo */ + border-radius : var(--pico-border-radius); +} + +/* BODY FOOTER */ +body > footer { + display : flex; + align-items : center; + padding : 1rem 0; + justify-content : center; + flex-wrap : wrap; +} +body > footer .logos { + display : inline-flex; + padding :.25rem .5rem; + border-bottom : 1px solid var(--pico-muted-border-color) +} +body > footer .logos a { padding:.25rem; margin:.5rem 0;} +body > footer .logos svg { + width : auto; + height : 1rem; + margin-right : calc(var(--pico-spacing) * .25); + transform : translateY(-.0625rem) +} + +/* ARTICLE H* ONLY CHILD (FORM COMMENT/REPLY) */ +article header :where( h2, h3, h4 ):only-child{ + margin : var(--pico-spacing) 0; +} +article header :where( p:last-child ){ + margin-bottom : 0; +} + +/* A HREF LINK COLOR */ +[data-theme=dark] { + :is([role=button], [type=button], [type=file]::file-selector-button, [type=reset], [type=submit], + button, [type=checkbox]:checked, [type=checkbox]:checked:active, [type=checkbox]:checked:focus, + [type=radio]:checked, [type=radio]:checked:active, [type=radio]:checked:focus):not(.outline) { + /* --pico-background-color: hsl(45 70% 40% / 1); */ + } + a:hover:not([role=button]) { + color:var(--pico-secondary-inverse) + } +} +[role=link]:focus, a:focus { +--background-color : var(--pico-primary-focus); + border-radius : var(--pico-border-radius); +} +/* A LINK UNDERLINE none */ +a {--pico-text-decoration: none; border:none} +:where(a:not([role=button])):is([aria-current]:not([aria-current=false]),:hover,:active,:focus), +[role=link] :is(a,[aria-current]:not([aria-current=false]),:hover,:active,:focus) { +--pico-text-decoration: none; +--pico-primary-underline: none; +--pico-underline: none; + border:none +} +/* A LINK - ICON ONLY */ +:is(a.btn-icon) { + border-radius : var(--pico-border-radius); + box-shadow : var(--pico-box-shadow); + display : inline-flex; + justify-content : center; + font-weight : 600; + font-size : 24px; + width : 30px; + height : 28px; + opacity : .8; + transition : opacity 0.3s ease-in; +} +:is(a.btn-icon):hover { + background : var(--pico-primary-focus); + color : var(--pico-secondary-inverse); + opacity : 1; +} + +hr { margin: 2rem 1rem; } /* @todo ? */ + +/* -------------------- ARTICLE FOOTER ACTION CONTROL */ +.action-control { + align-items : center; + column-gap : 1rem; + display : flex; + flex-wrap : wrap; + justify-content : space-between; + white-space : normal; +} + +/* -------------------- BANNER */ +section[role=banner] > div > article { + border : 1px solid var(--pico-muted-border-color); + border-radius : var(--pico-border-radius); + box-shadow : var(--pico-box-shadow); + margin : calc(var(--pico-block-spacing-vertical) * 3) 0; +} +[role=banner] .advert { + background : var(--pico-code-background-color); + border : 1px dotted var(--pico-form-element-disabled-border-color); + border-radius : var(--pico-border-radius); + display : block; + padding : var(--pico-spacing); + +} +[role=banner] .banner { + padding : var(--pico-spacing); + text-align : center; +} + +/* -------------------- BREADCRUMBS - MOBILE */ + +nav[aria-label=breadcrumb] { + margin-bottom : 1rem; /* space for pico header image */ +} + +@media (max-width : 768px) { + nav[aria-label=breadcrumb] ul { + list-style-type: none; + /*font-size: 16px;*/ + margin : 0; + padding : 10px 0; + /* truncate */ + white-space : nowrap; + max-width : 100%; + overflow : hidden; + } + nav[aria-label=breadcrumb] li { + display : inline-block; + max-width : 18%; /* truncate */ + width : auto; + white-space : nowrap; + overflow : hidden; + text-overflow: ellipsis; + } + nav[aria-label=breadcrumb] li:last-child {max-width: 30%;} + nav[aria-label=breadcrumb] li:first-child:before {content: none;} + nav[aria-label=breadcrumb] li a span:hover {text-decoration: underline} + nav[aria-label=breadcrumb] li, + nav[aria-label=breadcrumb] li:last-child {display: none} + nav[aria-label=breadcrumb] li:nth-last-child(2) {display: block;max-width: 100%;} + nav[aria-label=breadcrumb] li a {text-decoration: none} + nav[aria-label=breadcrumb] li:nth-last-child(2) a:after, + nav[aria-label=breadcrumb] ul li:not(:last-child) ::after {content: '';} + nav[aria-label=breadcrumb] li:nth-last-child(2) a:before { + content : ' ↚ '; + display : inline-flex; + min-width : 5ch; + background : var(--pico-primary); + border-radius:var(--pico-border-radius); + color : var(--pico-primary-inverse); + margin-right: .5rem; + place-content: center; + } + nav[aria-label=breadcrumb] li:nth-last-child(2):before {content: none} + + section.block-center { + background : var(--pico-contrast-inverse); + border : var(--pico-muted-border-color); + margin-bottom: 0; + padding : calc(var(--pico-spacing) * 1) calc(var(--pico-spacing) * 1); + } +} + +/* -------------------- BADGE & BUTTONS */ +.badge { + background : hsla(205, 15%, 40%, 0.25); + border-radius : var(--pico-border-radius); + font-size : 12px; + min-width : 3ch; + display : inline-block; + padding : 0 0.5rem;vertical-align: baseline; +} + +/* article h3 :is(.badge){font-size: 14px; } */ +:is(article, hgroup, .list-content) h3, h4, .block-title { + display : flex; + flex-wrap : wrap; + justify-content : space-between; + width : 100%; + align-items : baseline; +} + +/* BUTTON ACTION */ +:is(.delete) { + color : var(--pico-del-color); + border-color : var(--pico-del-color); +} +:is(button.vote) { + margin-bottom : 0; +} +:where([type=submit],[type=button],[role=button]) svg { + display : inline; + margin : 0 .25rem 0; + vertical-align: -.175em; +} + +:where(footer.action-control, footer div.grid) +:is(div, button, input[type=submit],input[type=button],[role=button], details.dropdown, input, a):not(summary) { + margin-bottom : 0; + white-space : nowrap; + /* border : 2px solid orange; */ +} +:where(footer.action-control) :is(a) { + border-radius : var(--pico-border-radius); + margin : 0 .5em; + padding : .25rem; +} +:where(footer.action-control) :is(a, button[type=submit]):hover { + background : var(--pico-primary-focus); + color : var(--pico-secondary-inverse); +} + +/* -------------------- BLOCKS */ +/* BLOCKS - Title */ +[class^="block-title"] { + color : var(--pico-muted-color); + font-weight : var(--pico-font-weight); + font-size : 1rem; + line-height : 1rem; + justify-content : space-between; + flex-wrap : nowrap; + margin-bottom : var(--pico-typography-spacing-vertical); + padding : 0; +} +[class^="block-title"] a { + display : inline-block; + width : 100%; +} +[class^="block-title"]:hover a { +--text-decoration : none; + color :var(--pico-primary-inverse); +} +[class^="block-title"]:hover { + background-position: 100% 100%; + background-size : 200% 100%; + text-decoration : none; + transition : background-size .3s .3s, background-position .3s; +} +/* BLOCKS - Content */ +[class="block-content"] { + margin-bottom : var(--pico-typography-spacing-vertical); +} +[class="block-content"] > ul { + padding : 0; +} +/* BLOCKS - MAIN MENU. SUB, MESSAGE */ +.menu-sub { + padding-left : 2.25rem; +} +/* BLOCK - PRIVATE MESSAGE */ +.block-messages ul#privatemessages { + flex-direction : column; + width : 100%; +} +.block-messages ul#privatemessages li { + padding : calc(var(--pico-nav-element-spacing-vertical) * .5) var(--pico-nav-element-spacing-horizontal); + width : inherit; +} +.block-messages ul#privatemessages li a { + display : inherit; +} +/* BLOCK - LIST MEMBERS */ +/* USERS ONLINE, SITE INFO */ +ul.list-column { + border-left : 4px solid var(--pico-muted-border-color); + column-count : 3; + column-width : 140px; + column-gap : 1.5rem; + column-rule : 4px solid var(--pico-muted-border-color); + margin : 1rem 0; + padding : 1rem; +} +ul.list-column li { + list-style : none; + margin-bottom :.5rem +} +ul.list-column li > h6 { + font-size : 16px; column-span: all; +} + +/* -------------------- ICONS */ +[class^="i-"] { + padding : .25rem .5rem +} +i[class^="i-"], +:is(span.icon, i.icon) { + padding-right : .5rem; +} + +summary[role="link"].contrast:is([aria-current],:hover,:active,:focus) { + background-color: transparent; + color : var(--pico-contrast-hover); +} + +/* -------------------- SEARCH FORM - PicoCSS default pill: 5rem */ + +[role=search]>:last-child { + border-top-right-radius: 1rem; + border-bottom-right-radius: 1rem; +} +[role=search]>:first-child { + border-top-left-radius: 1rem; + border-bottom-left-radius: 1rem; +} + +/* -------------------- TABLE - FONT-SIZE IN BLOCKS */ +[class^="block-"] table tbody, tfoot { + font-size : 14px; +} + +/* -------------------- TEXT SELECTION */ +::-moz-selection{background-color:var(--pico-primary);color:var(--pico-primary-inverse)} +::selection{background-color:var(--pico-primary);color:var(--pico-primary-inverse)} + +/* -------------------- TOOLTIP */ + +[data-tooltip] { + border-bottom-color: var( + --pico-border-color + ) +} +[data-tooltip]:after, main [data-tooltip]:before { + font-size : 12px +} + +/* -------------------- TYPOGRAPHY - FONT SIZE & SCALE */ +/* HEADING */ +h1, h2, h3, h4, h5, h6 { +--font-weight: 400; + font-weight : var(--font-weight); + position : relative; + font-family: "Nunito Sans", sans-serif; + font-optical-sizing: auto; + font-weight: var(--font-weight); + font-style: normal; + font-variation-settings: + "wdth" 100, + "YTLC" 500; +} + +p { text-wrap: pretty } + +@media (min-width: 576px) { :root { --pico-font-size: 106.25%; } } +@media (min-width: 768px) { :root { --pico-font-size: 112.5%; /* 18px */}} +@media (min-width: 1024px) { :root { --pico-font-size: 1rem; }} +@media (min-width: 1280px) { :root { --pico-font-size: 1rem; }} +@media (min-width: 1536px) { :root { --pico-font-size: 112.5%; /* 18px */}} + +/* -------------------- WRAPPER - GRID */ +/* -------------------- MEDIA QUERIES - desktop, tablet, mobile + CSS override PicoSS rules and specificity */ +@media(max-width: 576px) { + [role=button], [type=button], [type=file]::file-selector-button, [type=reset], [type=submit], button { + --pico-form-element-spacing-horizontal: 1.5rem; + } + [role=group] [role=button], [role=group] [type=button], [role=group] [type=submit], [role=group] button, [role=search] [role=button], [role=search] [type=button], [role=search] [type=submit], [role=search] button { + --pico-form-element-spacing-horizontal: 1.5rem; + } +} +@media screen and (max-width: 1024px) { + body>main>aside#nav-left, body>main>aside#block-right { + --pico-font-size: 1rem; /* 16px - 18px picocss */ + font-size: var(--pico-font-size); + margin-top: 0; + } + [data-self~="sm-hide"] {display:none!important}/* only show icon and hide text */ + + aside#nav-left { + position: fixed; + top: 0; + left: 0; + width: 240px; + height: 100%; + padding: .25em var(--pico-block-spacing-horizontal); + background: var(--pico-card-background-color); + box-shadow: var(--pico-card-box-shadow); + overflow-y: auto; + z-index: var(--z-above); + } + aside#nav-left { + transform: translate3d(0, 0, 0) translateX(-240px); + transition: all 0.25s cubic-bezier(0.16, 0.63, 0.45, 0.98); + } + aside#nav-left:target { + transform: translate3d(0, 0, 0) translateX(0); + } + .nav-open { + display: block; + position:absolute; + left: 18px; + top: 10px; + } + aside#nav-left .nav-close { + display: block; + height: 36px; + display: block; + cursor: pointer; + position: sticky; + left: 180px; + top: 10px; + width: fit-content; + width: -moz-fit-content; + + z-index: var(--z-sticky); + } +} +@media(min-width: 1024px) { + html { + scroll-padding-top:calc(var(--pico-header-height) + 2rem - .375rem) + } + [data-self="sm-hide"] { + display: revert!important; /* show icon & show text */ + } + body>header>nav.nav-top{ + position: relative; + } + body>main { + grid-template-rows:auto 1fr; + grid-template-columns: 14rem 1fr; + grid-template-areas: "menu main" "menu block-right"; + -moz-column-gap: 2rem; + column-gap: 2rem; + row-gap: 2rem; + } + .nav-logo {margin-left:0} + .nav-open, + aside#nav-left .nav-close{display: none;} + aside#nav-left { + position:relative; + width: 220px; + } + body>main:has(aside#block-right) { + grid-template-rows: auto 1fr; + grid-template-columns: 14rem 1fr; + grid-template-areas: "menu main" "menu block-right" + } + body>main>aside#nav-left { + grid-area: menu + } + body>main>[role=main] { + grid-area: main + } + body>main>aside#block-right { + grid-area: block-right; + align-self: start /* Sticky in grid */ + } + body>main>aside#block-right { + position: sticky; + top: calc(var(--pico-main-top-offset) + var(--pico-block-spacing-vertical)/2); + max-height: calc(var(--max-height) - var(--pico-spacing)); + transition: top var(--pico-transition); + transition-delay: 50ms + } + body>main>nav[aria-label=breadcrumb] { + display: none + } + body>main>aside>nav { + margin-top: calc(var(--pico-block-spacing-vertical)/2) + } + body>main>hgroup { + grid-area: header; + margin-top: calc(var(--pico-block-spacing-vertical)/2) + } +} +@media(min-width: 1280px) { + body>main { + grid-template-rows:auto 1fr; + grid-template-columns: 14rem 1fr 14rem; + grid-template-areas: "menu main block-right" "menu main block-right"; + row-gap: 2rem; + } + body>main:has(aside#block-right) { + grid-template-rows: auto 1fr; + grid-template-columns: 14rem 1fr 15rem; + grid-template-areas: "menu main block-right" "menu main block-right" + } + body>main>aside#nav-left { + grid-area: menu + } + body>main>[role=main] { + grid-area: main + } + body>main>aside#block-right { + grid-area: block-right + } +} +@media(min-width: 1536px) { + body>main { + grid-template-rows:auto 1fr; + grid-template-columns: 16rem 1fr 16rem; + grid-template-areas: "menu main block-right" "menu main block-right"; + row-gap: 3rem; + } +} +/* GRID CUSTOM COLUMNS */ +/* @todo ?? */ +.grid-left, .grid-right, .grid-2, .grid-3 { + align-items : start; + display : grid; + grid-template-columns: 1fr; + column-gap : calc(var(--pico-spacing) * .5); + row-gap : calc(var(--pico-spacing) * .5); + margin : 0; +} +.flex-justify { + align-items : center; + display : flex; + justify-content : space-between; + flex-basis : auto; + flex-wrap : wrap; +} +@media (min-width: 1024px) { + .grid-main, .grid-left, .grid-right, .grid-2, .grid-3 { + align-items : baseline; + display : grid; + column-gap : calc(var(--pico-spacing) * 1); + row-gap : calc(var(--pico-spacing) * 1); + } + .grid-main { + grid-template-columns: 1fr 3fr; + grid-column-gap: 1rem; + grid-row-gap: 1rem; + } + .grid-left { grid-template-columns: 1fr 3fr; } + .grid-right { grid-template-columns: 3fr 1fr; } + .grid-2 { grid-template-columns: 1fr 1fr; } + .grid-3 { grid-template-columns: 1fr 1fr 1fr; } +} + +/* -------------------- MODULE CKEditor */ +/* BUTTON CKEditor forced fix button 📐*/ +:is([class^="cke_button"],[class^="cke_combo_button"] ) { + margin-left : 0!important; +} +/* fix extra space of combo dropdown */ +.cke_combo_on a.cke_combo_button, .cke_combo_off a.cke_combo_button:hover, .cke_combo_off a.cke_combo_button:focus, +.cke_combo_off a.cke_combo_button:active { + padding : 0!important; +} +/* CKEditor darkmode */ +:root[data-theme=dark] { + --cke-color : #fff; + --cke-background: #111;; + --cke-filter : invert(1) contrast(1.15); + --cke-editable : #1c212c; + --cke-inner : #181b25; +} +/* try to switch mode, fallback ?? */ +:root[data-theme=light] { + --no-var : #fff; +} +/* CKEditor darkmode rounded */ +:is([class^=cke_top],[class^=cke_bottom]) { + filter : var(--cke-filter, none); + border-color : transparent!important; + /* Prevent editor from overflow prent container */ + max-width : 100%; + border-radius : 8px; +} +:where(.cke_chrome) { + border : none!important; +} +.cke_inner { + display : block; + background : var(--cke-inner, var(--no-var), #999)!important; + border : 1px solid var(--cke-background, var(--no-var), #999)!important; + border-radius : 8px; +} +:where(.cke_contents){ + background : var(--cke-editable, var(--no-var), #999)!important; + color : var(--cke-color, var(--no-var))!important; + border-radius : 8px; +} +/* customize editable container */ +.cke_editable { + background : var(--cke-editable, var(--no-var)); + color : var(--no-var, #fff); + border-radius : 8px; + padding : 0.5rem; + cursor : text; + margin : 0.25rem; + width : auto; + min-height : calc(100vh - 1rem); +} +textarea.cke_source { + background : var( --cke-background, #fff); + color : var( --cke-color, #111); + padding : 0.5rem; +} +.cke_wysiwyg_frame, .cke_wysiwyg_div { + background : var(--cke-editable, var(--no-var))!important; + color : var(--cke-color, var(--no-var))!important; +} + + +/* -------------------- MODULE D3FORUM */ +/* Used in Dropdowm*/ +.author-info { + align-items : center; + display : flex; + flex-direction : column; + padding : .25em; +} +/* AUTHOR AVATAR */ +.avatar { + border : 2px solid var(--pico-border-color); + border-radius : 50%; + margin : 0 auto; +} +/* AUTHOR DROPDOWN */ +:is(.w96) { + width : 96px; + height : 96px; + } + +/* AVATAR css from x-layout */ +[data-self="radius-circle"] { border-radius: 50%} + +/* NAV POST TREE ORDER */ +nav.post-tree-order { + align-items : center; + display : flex; + flex-wrap : wrap; + justify-content : start; + padding : var(--pico-spacing); + width : 100%; +} +nav.post-tree-order a { + border-radius : var(--pico-border-radius); + padding : .25em; + margin-right : .5em; +} +nav.post-tree-order a:hover { + background : var(--pico-primary-focus); + color : var(--pico-secondary-inverse); +} +/* POST TREE */ +/* in main view, main list, comment list */ +ul.post-tree { + background : var(--pico-card-background-color); + border-radius : CALC(var(--pico-border-radius)*2); + margin-bottom : var(--pico-block-spacing-vertical); + padding : 1rem; +} +ul.post-tree li { + list-style : none; +} +li.post-tree-item { + align-items : center; + display : flex; + list-style : none; + margin : 0; /* NOTE The margin-left is auto-generated from template ! */ + padding : 0; +} +li.post-tree-item > span { + border-radius : var(--pico-border-radius); + padding : .25rem; +} + .post-tree-current > span { + background-color: var(--pico-form-element-selected-background-color); + border-radius : var(--pico-border-radius); +} +/* POST TREE DEPTH-IN-TREE */ +:is(ul.depth-in-tree) { + margin : 0; + padding : 0; +} +/* FORUM POST - CONTENT + SIGNATURE */ +.post-content { +} +.post-signature { + border-top : 1px solid var(--pico-blockquote-border-color); + margin-top : 1.5rem; +} + +/* FORUM - ICON LIST LEGEND */ +.forum-icon-list { + display : block; + list-style : none; + margin : 1em; + padding : 0; +} + +/* Following classes Using class badge */ +.post-vote, +.post-vote-count, +.post-vote-avg {} +.description {} + +/* ACTIVITY TOTAL POSTS, COMMENTS, VIEWS */ +.content-activity, +.forum-activity { + font-size : small; +} + +/* -------------------- MODULE PICO */ +article .header-image { + display : inline-block; + box-shadow : var(--pico-card-box-shadow); + height : 240px; + margin-top : calc(var(--pico-block-spacing-vertical) * -1.25); + margin-bottom : var(--pico-block-spacing-vertical); + object-fit : cover; + width : 100%; + border : 2px solid var(--pico-muted-color); + border-radius : var(--pico-border-radius); +} +/* Page list of contents H3 + icons folder, docs */ +article h3 :is(span[data-tooltip]) {font-size:16px;} +/* TAGS */ +article>footer>.content-tags { + color : var(--pico-code-value-color); + padding-top : 1rem; +} +/* POST OPTIONS */ +article > .content-filters, +article > .content-options, +article > .content-time, +article > .content-history { + background : none; + border : var(--pico-border); + border-radius : var(--pico-border-radius); + width : auto; + margin-bottom : var(--pico-grid-row-gap); +} +.content-filters >.filter > label { + display : flex; + justify-content : space-between; + flex-wrap : wrap; + align-content : center; + align-items : center; + flex-direction : row; + width : auto; +} +/* 🚧📐 div.category-sub:not(:last-child) ,*/ +:is(div.list-content):not(:only-of-type), +:is(div.list-content):not(:last-of-type), +:is(div.category-sub, div.category-forum):not(:only-of-type), +:is(div.category-sub, div.category-forum):not(:last-of-type){ + margin-bottom : var(--pico-typography-spacing-vertical); +} +:is(div.list-content):last-of-type {} + +/* WAITING CONTENT */ +:is(div.list-content) :where(em.warning) { + background : #f44336; + color : #fff; +} + + +/* -------------------- PAGE NAV - CONTENT PAGINATION */ +nav.page-nav div { + align-items : center; + display : flex; + justify-content : center; + flex-wrap : wrap; + justify-content : space-between; + padding : var(--pico-spacing); + margin-bottom : var(--pico-spacing); + width : 100%; +} +/* -------------------- PAGENAVI D3FORUM COMMENTS PAGINATION */ +nav.pagination { + display : flex; + margin : .5em 0; + flex-direction : row; + justify-content : flex-end; +} +ul.pagenavi li { + border : 0; + color : var(--pico-primary); + border : 1px solid var(--pico-muted-border-color); + border-radius : var(--pico-border-radius); + box-shadow : var(--pico-box-shadow); + padding : 0; + text-align : center; + user-select : none; + margin : 0 .25rem; + min-width : 4ch; +} +/* ul.pagenavi li:last-of-type { margin: 0} */ + +ul.pagenavi li:not([aria-current]) a { + background : var(--pico-form-element-background-color); + + margin : 0; + padding : .25rem .5rem; + width : 100%; +} + +ul.pagenavi li[aria-current] { + border-color : var(--pico-primary); + padding : .25rem .5rem; +} +ul.pagenavi li:not([aria-current]):hover a { + border-color : var(--pico-primary); + background : var(--pico-primary-focus); + color : var(--pico-secondary-inverse); + padding : .25rem .5rem; +} + +/* -------------------- MODULE SITEMAP */ +.grid-sitemap { + grid-column : 1 / 7; + display : grid; + grid-template-columns: repeat(auto-fit, minmax(200px, auto)); + justify-content : center; +} +.grid-map { + padding : 1rem 1rem 0; + grid-column : 1 / 7; + display : grid; + grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); + align-items : center; +} +.grid-map h1 { + font-size : 2rem +} +.grid-map .map iframe { border-radius: var(--pico-border-radius)} + +/* -------------------- SYSTEM Notification */ +/* Replacing older confirmMsg errorMsgg resultMsg msg-warning */ +.alert { + background : var(--pico-muted-border-color); + border-left : 3px solid; + border-color : var(--pico-border-color); + border-radius : var(--pico-border-radius); + padding : var(--pico-spacing); + margin : var(--pico-block-spacing-vertical) auto; +} +.error, +.warning { border-color: var(--pico-del-color) } +.success { border-color: var(--pico-ins-color) } +.info { border-color: var(--pico-code-color) } +.result { border-color: var(--pico-code-color) } + +/* -------------------- MODULE USER PROFILE AVATAR */ +/* Generate CSS Avatar Letter */ +.user-tab-avatar #avatar { +--avatar-size :96px; + background-size : 100% 100%; + background-position: 0px 0px,0px 0px,0px 0px,0px 0px,0px 0px; + background-image: repeating-linear-gradient(315deg, #00FFFF2E 92%, #073AFF00 100%),repeating-radial-gradient(75% 75% at 238% 218%, #00FFFF12 30%, #073AFF14 39%),radial-gradient(99% 99% at 109% 2%, #00C9FFFF 0%, #073AFF00 100%),radial-gradient(99% 99% at 21% 78%, #7B00FFFF 0%, #073AFF00 100%),radial-gradient(160% 154% at 711px -303px, #2000FFFF 0%, #073AFFFF 100%); + border-radius : 50%; + box-shadow : 2px 2px 2px #111; + height : var(--avatar-size); + margin : 20px 0; + text-align : center; + width : var(--avatar-size); +} +/* Avatar Letter */ +.user-tab-avatar #username { + font-size : 0; + display : block; + color : var(--pico-primary ); + position : relative; + line-height : 1; + text-transform : uppercase; + top : calc(var(--avatar-size) / 4); /* 25% of parent */ + transition : font-size 0.3s ease-in; + filter : drop-shadow(2px 2px 5px #010); /* drop-shadow(offset-x offset-y blur-radius color) */ +} +.user-tab-avatar #username::first-letter { + font-size : calc(var(--avatar-size) / 2); /* 50% of parent */ +} + +/* -------------------- MODULE MESSAGE & USER PROFILE */ +/* Note - Mail tab active overrides the default properties */ + +.mail-list-item { + border-bottom : 1px solid hsl(219, 17%, 21%); + line-height : 2.5rem; +} +.mail-list-avatar { + border-radius : 50%; + height : 24px; + margin : auto .25em; + width : 24px; + vertical-align : middle; +} +.mail-list-author { + width : 190px; +} +.mail-list-author input:disabled { + pointer-events: auto; + cursor: not-allowed; +} +.mail-list-subject { + font-size : 16px; + } +.mail-list-date { + font-size : small; + } +.mail-list-date { + font-size : small; +} +.mail-subject{} +.mail-to {} +.mail-from {} +.mail-date {} +.mail-content{} + +/* -------------------- SCROLL-TO-TOP */ +.scroll-top { + position : absolute; + top : 12rem; + right : 2rem; + bottom : 0; + pointer-events : none; + z-index : 9000; +} +.scroll-top #ntop-bg {fill: var(--pico-progress-background-color);} +.scroll-top #ntop-arrow {fill: var(--pico-primary-hover);} +.scroll-top a:hover #ntop-bg {fill: var(--pico-primary-hover-background);} +.scroll-top a:hover #ntop-arrow {fill: var(--pico-primary-inverse);} +.scroll-top a { + position : sticky; + top : -5rem; + width : 3rem; + height : 3rem; + margin-bottom : -5rem; + transform : translateY(100vh); + backface-visibility: hidden; + display : inline-block; + text-decoration : none; + user-select : none; + pointer-events : all; + outline : none; + overflow : hidden; + /* Style */ + box-shadow : var(--pico-box-shadow); + border : var(--pico-border-width) solid var(--pico-border-color); + border-radius : var(--pico-border-radius); +} +.scroll-top a svg { + display : block; + border-radius : var(--border-radius); + width : 100%; + height : 100%; +} +.scroll-top a svg path { + transition : all 0.1s; +} +.scroll-top a #ntop-arrow { + transform : scale(0.66); + transform-origin: center; +} +@media print { + .scroll-top { display: none !important; } +} + +/* -------------------- Animation / Transition */ +@keyframes bottom { + 0% { transform:translateY(10px); opacity:0; } + 100% { opacity:1; transform:none;} +} +@keyframes top { + 0% { transform:translateY(-10px); opacity:0; } + 100% { opacity:1; transform:none; } +} +@keyframes left { + 0% { transform:translateX(-10px); opacity:0; } + 100% { opacity:1; transform:none; } +} diff --git a/html/themes/cosmic-dream/templates/legacy/legacy_app_start_page.html b/html/themes/cosmic-dream/templates/legacy/legacy_app_start_page.html new file mode 100644 index 000000000..eb57f1175 --- /dev/null +++ b/html/themes/cosmic-dream/templates/legacy/legacy_app_start_page.html @@ -0,0 +1,10 @@ +<{* Dev-Mode Toggle *}> +<{if $xoops_isadmin}>
<{$smarty.template}>
<{/if}> + + +
+
+

Welcome to <{$xoops_sitename}>

+

<{$xoops_meta_description}>

+
+
diff --git a/html/themes/cosmic-dream/templates/legacy/legacy_block_usermenu.html b/html/themes/cosmic-dream/templates/legacy/legacy_block_usermenu.html new file mode 100644 index 000000000..47bda4ab8 --- /dev/null +++ b/html/themes/cosmic-dream/templates/legacy/legacy_block_usermenu.html @@ -0,0 +1,47 @@ +<{* Dev-Mode Toggle +<{if $xoops_isadmin}>
<{$smarty.template}>
<{/if}>*}> +
+ <{$xoops_uname}> + <{$xoops_uname}> + +
diff --git a/html/themes/cosmic-dream/theme.html b/html/themes/cosmic-dream/theme.html new file mode 100644 index 000000000..b05c3292b --- /dev/null +++ b/html/themes/cosmic-dream/theme.html @@ -0,0 +1,306 @@ + + + + + + + + <{$xoops_sitename}> - <{$xoops_pagetitle}> + + + + + + + + + + + + + + + + + + <{if $xoops_dirname == 'pico' && isset($content.ef.pico_img)}> + + <{else}> + + <{/if}> + + + + + + + + <{* ----- Browserconfig, Webmanifest, XML Sitemap located in the root directory ----- *}> + + + + <{* ----- Favicons THEME COLOR ----- *}> + + + + <{* ----- Favicon SVG - default /images/favicon ----- *}> + + <{* ----- Favicons located in the root directory ----- *}> + + + + + <{* ----- Resquesturi $xoops_requesturi : /module/dirname/id ----- *}> + + <{* ----- CSS - PicoCSS ----- *}> + + + + <{* ----- Fonts ----- *}> + + + + <{$xoops_module_header}> + + <{* ----- Defer preload of custom styles for jQuery UI, PrismJS ----- *}> + + + + + <{* ----- CSS - Theme ----- *}> + + <{* ----- CSS - Theme JSON ----- *}> + <{assign var="theme" value="`$xoops_imageurl`theme.json"}> + <{json file="$theme" theme="theme" local="true"}> + <{foreach item=theme key=key from=$theme}> + <{assign var='name' value=$theme->name}> + <{assign var='title' value=$theme->title}> + <{assign var='slogan' value=$theme->slogan}> + <{assign var='body' value=$theme->body}> + <{assign var='color' value=$theme->color}> + <{assign var='primary' value=$theme->primary}> + <{assign var='secondary' value=$theme->secondary}> + <{assign var='inverse' value=$theme->inverse}> + <{/foreach}> + <{* ----- CSS - MainMenu Active ----- *}> + + + + +
+ +
+ +<{* ----- TOPPAGE Center Blocks Title width prefix top- & none- (hide title) + Note : It's Center Block Left that triggers the top to display +<{if !empty($xoops_clblocks)}> +<{foreach item=block from=$xoops_clblocks}> + <{if $block.title|strstr:"top-" && !$block.title|strstr:"hero"}> + <{include file="$xoops_theme/component/_inc_top_center.html"}> + <{/if}> +<{/foreach}> +<{/if}> + *}> + +<{include file="$xoops_theme/component/_inc_hero.html"}> + + +<{* ----- Main *}> +
+ + <{if $xoops_showlblock==1}> + + <{/if}> + +
+
+ <{if !empty($xoops_contents)}> + <{$xoops_contents}> + <{else}> + <{include file='db:legacy_app_start_page.html'}> + <{/if}> +
+
+ + <{if $xoops_showrblock==1}> + + <{/if}> + +
+ +<{if $banner !=" "}> +
+
+
+ <{$xoops_banner}> +
+
+
+<{/if}> + +<{* ---------- CENTER BLOCKS *}> +<{if $xoops_showcblock==1}> +
+ +<{* ---------- BLOCK Center-Left *}> +<{if !empty($xoops_clblocks)}> +
+ <{foreach item=block from=$xoops_clblocks}> + <{if !$block.title|strstr:"admin" && !$block.title|strstr:"top" && !$block.title|strstr:"hero"}> +
+

+ <{if $xoops_isadmin}> + <{$block.title}> + <{include file="$xoops_theme/component/_inc_block_edit.html"}> + <{else}> + <{if !$block.title|strstr:"none"}><{$block.title}><{/if}> + <{/if}> +

+
<{$block.content}>
+
+ <{/if}> + <{/foreach}> +
+<{/if}> + +<{* ---------- BLOCK Center-Center *}> +<{if !empty($xoops_ccblocks)}> +
+ <{foreach item=block from=$xoops_ccblocks}> + <{if !$block.title|strstr:"admin" && !$block.title|strstr:"top" && !$block.title|strstr:"hero"}> +
+

+ <{if $xoops_isadmin}> + <{$block.title}> + <{include file="$xoops_theme/component/_inc_block_edit.html"}> + <{else}> + <{if !$block.title|strstr:"none"}><{$block.title}><{/if}> + <{/if}> +

+
<{$block.content}>
+
+ <{/if}> + <{/foreach}> +
+<{/if}> + +<{* ---------- BLOCK Center-Right *}> +<{if !empty($xoops_crblocks)}> +
+ <{foreach item=block from=$xoops_crblocks}> + <{if !$block.title|strstr:"admin" && !$block.title|strstr:"top" && !$block.title|strstr:"hero"}> +
+

+ <{if $xoops_isadmin}> + <{$block.title}> + <{include file="$xoops_theme/component/_inc_block_edit.html"}> + <{else}> + <{if !$block.title|strstr:"none"}><{$block.title}><{/if}> + <{/if}> +

+
<{$block.content}>
+
+ <{/if}> + <{/foreach}> +
+<{/if}> + +
+<{/if}> + +<{* ---------- Scroll to top *}> +
+ + + + + + +
+ +<{if $banner !=" "}> +
+
+ +
+
+<{/if}> + +
+ +<{* ---------- FOOTER CREDITS *}> + + +<{* ---------- ADMIN FRONT PANEL *}> +<{if $xoops_isadmin}> +<{include file="$xoops_theme/component/admin-panel.html"}> +<{/if}> + +<{* ---------- DO NOT DEFER Theme Plugins - LocalStoarage & SVG ! *}> + + +<{* ---------- PrismJS ----- *}> + + + \ No newline at end of file diff --git a/html/themes/cosmic-dream/theme.json b/html/themes/cosmic-dream/theme.json new file mode 100644 index 000000000..d91824c46 --- /dev/null +++ b/html/themes/cosmic-dream/theme.json @@ -0,0 +1,19 @@ +{ + "theme": [ + { + "name": "Cosmic Dream", + "version": "2.4.0", + "date": "2024-04-20", + "author": "Nuno Luciano", + "title": "Your Dream, Your Legacy", + "slogan": "The greatest legacy that you will leave to your friends is your story.", + "body": "#13171f", + "color": "#c2c7d0", + "primary": "#c79400", + "secondary": "#969eaf", + "contrast": "#dfe3eb", + "inverse": "#000", + "muted": "#7b8495" + } + ] +} \ No newline at end of file diff --git a/html/themes/pico-blue/.editorconfig b/html/themes/pico-blue/.editorconfig new file mode 100644 index 000000000..4d87d9c2e --- /dev/null +++ b/html/themes/pico-blue/.editorconfig @@ -0,0 +1,13 @@ +# editorconfig.org +# XCL 2.4.0 +# This file is for unifying the coding style for different editors and IDEs + +root = true + +[*] +charset = utf-8 +end_of_line = lf +insert_final_newline = true +indent_size = 4 +indent_style = space +trim_trailing_whitespace = true diff --git a/html/themes/pico-blue/.gitignore b/html/themes/pico-blue/.gitignore new file mode 100644 index 000000000..0903b73bc --- /dev/null +++ b/html/themes/pico-blue/.gitignore @@ -0,0 +1,33 @@ +# XCL 2.4.0 +# OS or Editor folders +._* +.cache +.DS_Store +.idea +.project +.settings +.tmproj +*.esproj +*.sublime-project +*.sublime-workspace +nbproject +Thumbs.db +/.vscode/ + +# Numerous always-ignore extensions +*.diff +*.err +*.log +*.orig +*.rej +*.swo +*.swp +*.vi +*.zip +*~ + +# Folders to ignore +/node_modules/ + +# Pico +.pico diff --git a/html/themes/pico-blue/CHANGELOG.md b/html/themes/pico-blue/CHANGELOG.md new file mode 100644 index 000000000..946718e2a --- /dev/null +++ b/html/themes/pico-blue/CHANGELOG.md @@ -0,0 +1,30 @@ +# Change Log + +## XCL Theme Pico Blue v.2.4.0 + +XCL Theme built with PicoCSS v2.0.6 + +All notable changes will be documented in this file. + +## [XCL Theme 240 ] 2024-04-20 + +- Add component block-center with Title prefix 'top-' +- Add condition to show Top Block-center (prefix 'top-none') +- Add daarkmode for CKEDITOR4 +- Update PicoCSS +- Update prefix CSS classes +- Update Templates +- Update jQuery UI theme built with CSS vars +- Theme style with customized CSS vars +- Fix Smarty logic in D3Forum and Pico +- Improved Pico's menu and TOC +- Smarty 2.6 fix isset and |default:'' + +## [XCL Pico 157 ] 2024-02-02 + +- Admin front panel block-right with Title prefix 'admin-' +- Load PicoCSS from theme folder +- Fix PHP8 warning errors related to Smarty +- Admin panel (using block-right with prefix 'admin-' in block-title) +- Banner placement and link to client +- Header UserMenu and Theme mode diff --git a/html/themes/pico-blue/LICENSE.md b/html/themes/pico-blue/LICENSE.md new file mode 100644 index 000000000..7341f375b --- /dev/null +++ b/html/themes/pico-blue/LICENSE.md @@ -0,0 +1,22 @@ +MIT License + +Copyright (c) 2019-2024 Pico +Copyright (c) 2019-2024 Nuno Luciano, XCL Theme + +Permission is hereby granted, free of charge, to any person obtaining a copy +of this software and associated documentation files (the "Software"), to deal +in the Software without restriction, including without limitation the rights +to use, copy, modify, merge, publish, distribute, sublicense, and/or sell +copies of the Software, and to permit persons to whom the Software is +furnished to do so, subject to the following conditions: + +The above copyright notice and this permission notice shall be included in all +copies or substantial portions of the Software. + +THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR +IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, +FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE +AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER +LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, +OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE +SOFTWARE. diff --git a/html/themes/pico-blue/component/_inc_block_edit.html b/html/themes/pico-blue/component/_inc_block_edit.html new file mode 100644 index 000000000..5c93fb699 --- /dev/null +++ b/html/themes/pico-blue/component/_inc_block_edit.html @@ -0,0 +1,27 @@ +<{assign var=admin_block_edit value="`$xoops_url`/modules/altsys/admin/index.php?mode=admin&lib=altsys&page=mytplsform&tpl_file="}> +<{assign var=admin_block_custom value="`$xoops_url`/modules/altsys/admin/index.php?mode=admin&lib=altsys&page=myblocksadmin&dirname=__CustomBlocks__&op=edit&bid="}> +
+ + + + + +
+ + + Edit B-<{$block.id}> + + + Clone Block + <{* if "" != $block.template *}> + <{if $block.template ne ""}> + + <{else}> + + <{/if}> + + + + Edit template +
+
diff --git a/html/themes/pico-blue/component/_inc_hero.html b/html/themes/pico-blue/component/_inc_hero.html new file mode 100644 index 000000000..7bae8aea6 --- /dev/null +++ b/html/themes/pico-blue/component/_inc_hero.html @@ -0,0 +1,279 @@ + + + +
+ +
+ + + + + + + + +
+

<{$title}>

+

<{$slogan}>

+
+
+ +
+ + + + + + + + + + + + + + + + + + +
+
+
+
+
+
+
+
+ +
+ + +
+ + \ No newline at end of file diff --git a/html/themes/pico-blue/component/_inc_nav_theme.html b/html/themes/pico-blue/component/_inc_nav_theme.html new file mode 100644 index 000000000..cb8235205 --- /dev/null +++ b/html/themes/pico-blue/component/_inc_nav_theme.html @@ -0,0 +1,8 @@ +
+ Theme + +
diff --git a/html/themes/pico-blue/component/_inc_top_center.html b/html/themes/pico-blue/component/_inc_top_center.html new file mode 100644 index 000000000..e7bce3744 --- /dev/null +++ b/html/themes/pico-blue/component/_inc_top_center.html @@ -0,0 +1,147 @@ + + +<{if $xoops_showcblock==1}> +
+ +
+

<{$xoops_sitename}>

+

<{$xoops_slogan}>

+
+
+
+<{* ---------- BLOCK Center-Left *}> +<{if !empty($xoops_clblocks)}> +
+ <{foreach item=block from=$xoops_clblocks}> + <{if $block.title|strstr:"top-" && !$block.title|strstr:"hero"}> +
+

+ <{if $xoops_isadmin}> + <{$block.title}> + <{include file="$xoops_theme/component/_inc_block_edit.html"}> + <{else}> + <{if ! $block.title|strstr:"none"}><{$block.title|replace:'top-':''}><{/if}> + <{/if}> +

+
<{$block.content}>
+
+ <{/if}> + <{/foreach}> +
+<{/if}> + +<{* ---------- BLOCK Center-Center *}> +<{if !empty($xoops_ccblocks)}> +
+ <{foreach item=block from=$xoops_ccblocks}> + <{if $block.title|strstr:"top-" && !$block.title|strstr:"hero"}> +
+

+ <{if $xoops_isadmin}> + <{$block.title}> + <{include file="$xoops_theme/component/_inc_block_edit.html"}> + <{else}> + <{if ! $block.title|strstr:"none"}><{$block.title|replace:'top-':''}><{/if}> + <{/if}> +

+
<{$block.content}>
+
+ <{/if}> + <{/foreach}> +
+<{/if}> + +<{* ---------- BLOCK Center-Right *}> +<{if !empty($xoops_crblocks)}> +
+ <{foreach item=block from=$xoops_crblocks}> + <{if $block.title|strstr:"top-" && !$block.title|strstr:"hero"}> +
+

+ <{if $xoops_isadmin}> + <{$block.title}> + <{include file="$xoops_theme/component/_inc_block_edit.html"}> + <{else}> + <{if ! $block.title|strstr:"none"}><{$block.title|replace:'top-':''}><{/if}> + <{/if}> +

+
<{$block.content}>
+
+ <{/if}> + <{/foreach}> +
+<{/if}> + +
+ +
+<{/if}> \ No newline at end of file diff --git a/html/themes/pico-blue/component/admin-panel.html b/html/themes/pico-blue/component/admin-panel.html new file mode 100644 index 000000000..b3b68d380 --- /dev/null +++ b/html/themes/pico-blue/component/admin-panel.html @@ -0,0 +1,237 @@ +<{* XCube Panel Options *}> + + + +
+
+ +
+
+ +<{* ----- RIGHT-SIDEBAR ----- *}> +
+ +
Control Panel + + + +
+ + <{* ----- RIGHT-PANEL-BLOCK ----- *}> +
+ + <{* ---------- Block-Right *}> + <{if $xoops_showrblock==1}> + <{foreach item=block from=$xoops_rblocks}> + <{if $block.title|strstr:"admin"}> +
+

+ <{* REMOVE 'admin-' FROM BLOCK-TITLE *}> + <{$block.title|replace:'admin-':''}> + <{include file="$xoops_theme/component/_inc_block_edit.html"}> +

+
<{$block.content}>
+
+ <{/if}> + <{foreachelse}> +
+ Add block with position block-right
+ and block-title with prefix admin- +
+ <{/foreach}> + <{/if}> + <{* ----- ADMIN PREVIEW ----- *}> +
Preview Layout
+
+ + + + +
+ +
+ <{* -----/ RIGHT-PANEL-BLOCK *}> + +
+<{* -----/ RIGHT-SIDEBAR *}> + diff --git a/html/themes/pico-blue/component/block-left.html b/html/themes/pico-blue/component/block-left.html new file mode 100644 index 000000000..dabcad9fe --- /dev/null +++ b/html/themes/pico-blue/component/block-left.html @@ -0,0 +1,18 @@ +<{* ---------- Block-Left *}> +<{foreach item=block from=$xoops_lblocks}> +<{if !$block.title|strstr:"Topage" && !$block.title|strstr:"User" || !$block.id==28}> +
+

+ <{if $xoops_isadmin}> + <{$block.title|replace:' ':'-'}> + <{include file="$xoops_theme/component/_inc_block_edit.html"}> + <{else}> + <{if ! $block.title|strstr:"none"}><{$block.title}><{/if}> + <{/if}> +

+
+ <{$block.content}> +
+
+<{/if}> +<{/foreach}> diff --git a/html/themes/pico-blue/component/block-right.html b/html/themes/pico-blue/component/block-right.html new file mode 100644 index 000000000..1edb488a6 --- /dev/null +++ b/html/themes/pico-blue/component/block-right.html @@ -0,0 +1,16 @@ +<{* ---------- Block-Right *}> +<{foreach item=block from=$xoops_rblocks}> +<{if !$block.title|strstr:"admin"}> +
+

+ <{if $xoops_isadmin}> + <{$block.title}> + <{include file="$xoops_theme/component/_inc_block_edit.html"}> + <{else}> + <{if ! $block.title|strstr:"none"}><{$block.title}><{/if}> + <{/if}> +

+
<{$block.content}>
+
+<{/if}> +<{/foreach}> diff --git a/html/themes/pico-blue/css/dropdown.css b/html/themes/pico-blue/css/dropdown.css new file mode 100644 index 000000000..6bd332f2b --- /dev/null +++ b/html/themes/pico-blue/css/dropdown.css @@ -0,0 +1,91 @@ +/* +* XCL Theme Dropdown +* +* @version 2.4.0 +* @update 2024-04-20 +* @Date 2024-02-02 +* @author Nuno Luciano ( https://github.com/gigamaster ) +* @copyright (c) 2005-2024 The XOOPSCube Project, authors +* @license MIT +* @link https://github.com/xoopscube +*/ +/* -------------------- Dropdown Menu */ + +div.dropdown { + position : relative; + display : block; +} +div.dropdown a.dropdown-toggle:not(.ui-tabs-anchor) { + background : transparent; /*var(--background-color);*/ + border : none; + border-radius : var(--pico-border-radius); + box-shadow : none; + color : var(--pico-primary-color); + cursor : pointer; + display : block; + font : inherit; + margin : 0; + padding : 0 .25rem .25rem; + transition : all var(--transition-time) var(--transition-cube); +} +div.dropdown a.dropdown-toggle:hover:not(.ui-tabs-anchor) { + background : var(--primary-focus); /* link [div][a] */ + box-shadow : none; + color : var(--primary-hover); + background : var(--pico-primary-hover-background); + color : var(--pico-primary-inverse); +} +div.dropdown.isopen div.dropdown-content { + display : block; + z-index : var(--z-above); +} +div.dropdown-content { + background : var(--pico-form-element-background-color); + border : var(--pico-border-width) solid var(--pico-form-element-border-color); + border-radius : var(--pico-border-radius); + box-shadow : var(--pico-card-box-shadow); /* 0px 2px 4px 1px hsla(0, 0%, 0%, 0.74); */ + color : var(--pico-primary-color); + display : none; + + min-width : 190px; + padding : .5rem; + position : absolute; + right : -10px; + + text-align : left; + top : 100%; + transition : all var(--transition-time) var(--transition-cube); +} +@media (min-width: 992px) { + .dropdown-content { + right : 1px; /* Fix device Viewport */ + } +} +div.dropdown div.dropdown-content ul { + margin : 0; + padding : 0; + list-style : none; +} +div.dropdown div.dropdown-content ul li { + background : transparent; + padding : 0; + width : 100%; +} +/* Dropdown links */ +div.dropdown div.dropdown-content a { + border-radius : var(--pico-border-radius); + color : var(--pico-primary-color); + display : block; + font-size : 16px; + padding : calc(var(--pico-form-element-spacing-vertical)* .8) var(--pico-form-element-spacing-horizontal); + text-decoration : none; +} +/* Change color of dropdown links on hover */ +div.dropdown div.dropdown-content a:hover { + background : var(--pico-primary-hover-background); + color : var(--pico-primary-inverse); +} + +div.dropdown div.dropdown-content a > svg { + margin : var(--dropdown-icon-margin); +} diff --git a/html/themes/pico-blue/css/index.html b/html/themes/pico-blue/css/index.html new file mode 100644 index 000000000..990cbd603 --- /dev/null +++ b/html/themes/pico-blue/css/index.html @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/html/themes/pico-blue/css/jquery-ui.theme.css b/html/themes/pico-blue/css/jquery-ui.theme.css new file mode 100644 index 000000000..9adef581c --- /dev/null +++ b/html/themes/pico-blue/css/jquery-ui.theme.css @@ -0,0 +1,693 @@ +/* +* XCL Theme Jquery-UI for PicoCSS v206 +* +* @version 2.4.0 +* @update 2024-04-20 +* @date 2024-02-02 +* @author Nuno Luciano ( https://github.com/gigamaster ) +* @copyright (c) 2005-2024 The XOOPSCube Project, authors +* @license MIT +* @link https://github.com/xoopscube +*/ + +/* Component containers +----------------------------------*/ +.ui-dialog.ui-widget.ui-front { + background : var(--pico-form-element-background-color); + box-shadow : var(--pico-box-shadow ); + padding : calc(var(--block-spacing-horizontal) * 1); + border : var(--pico-border-width) solid var(--pico-form-element-border-color); + background-color: var(--pico-modal-overlay-background-color); + backdrop-filter : var(--pico-modal-overlay-backdrop-filter); + -webkit-backdrop-filter: var(--pico-modal-overlay-backdrop-filter); + +} +.ui-dialog-dragging > .ui-widget-header { + background: var(--pico-primary-background); +} +.ui-widget { + font-size : 1rem +} +.ui-widget .ui-widget { + font-size : 1rem +} +.ui-widget input, +.ui-widget select, +.ui-widget textarea, +.ui-widget button { + outline : none; + font-family : inherit; + font-size : 1rem +} +.ui-widget.ui-widget-content { + /* border : 1px solid var(--pico-form-element-border-color); */ + border : 1px solid transparent; + background : var(--pico-form-element-background-color); + border-radius : var(--pico-border-radius); + box-shadow : var(--pico-card-box-shadow); + margin : 0; +} + +.ui-widget-content { + background : var(--pico-form-element-background-color); + border : 1px solid var(--pico-form-element-border-color); + color : var(--pico-color); +} +.ui-widget-content a { + color : var(--pico-primary); +} +.ui-widget-header { + background : var(--pico-card-sectioning-background-color); + border : var(--pico-border-width) solid var(--pico-border-color); + border-radius : var(--pico-border-radius); + color : var(--pico-color); + font-weight : var(--pico-font-weight); + list-style : none; +} +/* custom spacing */ +:is(.ui-menu) li.ui-widget-header { + /* custom spacing */ + padding: .175em .5em; + border: 1px solid var(--pico-dropdown-border-color) +} +.ui-widget-header a { + color : var(--pico-color); +} + +/* Interaction states +----------------------------------*/ +.ui-state-default, +.ui-widget-content .ui-state-default, +.ui-widget-header .ui-state-default, +.ui-button, +/* greater specificity when clicked or hovered */ +html .ui-button.ui-state-disabled:hover, +html .ui-button.ui-state-disabled:active { + background-color: var(--pico-background-color); + border : 1px solid var(--pico-form-element-border-color); + color : var(--pico-contrast); + font : var(--pico-font-size); + font-weight : inherit; +} +.ui-state-default a, +.ui-state-default a:link, +.ui-state-default a:visited, +a.ui-button, +a:link.ui-button, +a:visited.ui-button, +.ui-button { + background-color: var(--pico-background-color); + border: 1px solid transparent; + color : var(--pico-primary); + text-decoration : none; +} +.ui-state-hover, +.ui-widget-content .ui-state-hover, +.ui-widget-header .ui-state-hover, +.ui-state-focus, +.ui-widget-content .ui-state-focus, +.ui-widget-header .ui-state-focus, +.ui-button:hover, +.ui-button:focus { + background : var(--pico-primary-hover-background); + border : 1px solid var(--pico-primary-hover-border); + color : var(--pico-color); + font-weight : inherit; + outline : none; +} +.ui-state-hover a, +.ui-state-hover a:hover, +.ui-state-hover a:link, +.ui-state-hover a:visited, +.ui-state-focus a, +.ui-state-focus a:hover, +.ui-state-focus a:link, +.ui-state-focus a:visited, +a.ui-button:hover, +a.ui-button:focus { + background : var(--pico-primary-hover-background); + border : 1px solid var(--pico-primary-hover-border); + color : var(--pico-primary-hover); + font : var(--pico-font-size); + font-weight : inherit; + text-decoration : none; + outline : none; +} +.ui-visual-focus { + box-shadow : var(--pico-primary-focus); +} +.ui-state-active, +.ui-widget-content .ui-state-active, +.ui-widget-header .ui-state-active, +a.ui-button:active, +.ui-button:active, +.ui-button.ui-state-active:hover { + background : var(--pico-primary-hover-background); + border : 1px solid var(--pico-primary-hover-border); + color : var(--pico-primary-inverse); + font-weight : inherit; + outline : none; +} +.ui-state-active a, +.ui-state-active a:link, +.ui-state-active a:visited, +:where(.dropdown-content):not(a.dropdown-item) { + border : 1px solid var(--pico-primary-hover-border); + color : var(--pico-primary-focus); +} +/* Checkbox */ +.ui-icon-background, +.ui-state-active .ui-icon-background { + background-color: var(--pico-primary-hover-background); + border : 1px solid var(--pico-primary-hover-border); +} + +/* Interaction Cues +----------------------------------*/ +.ui-state-highlight, +.ui-widget-content .ui-state-highlight, +.ui-widget-header .ui-state-highlight { + background : var(--pico-primary-hover-background); + border : 1px solid var(--pico-primary-hover-border); + color : var(--pico-primary-inverse); +} +.ui-state-checked { + background : var(--ui-state-checked-bg); + border : var(--ui-state-checked-border); +} +.ui-state-highlight a, +.ui-widget-content .ui-state-highlight a, +.ui-widget-header .ui-state-highlight a { + color : var(--pico-primary-inverse); +} +.ui-state-error, +.ui-widget-content .ui-state-error, +.ui-widget-header .ui-state-error { + background : var(--ui-state-error-bg); + border : 1px solid var(--pico-primary-hover-border); + color : var(--ui-state-error-color); +} +.ui-state-error a, +.ui-widget-content .ui-state-error a, +.ui-widget-header .ui-state-error a { + color : var(--ui-state-error-link); +} +.ui-state-error-text, +.ui-widget-content .ui-state-error-text, +.ui-widget-header .ui-state-error-text { + color : var(--ui-state-error-text); +} +.ui-priority-primary, +.ui-widget-content .ui-priority-primary, +.ui-widget-header .ui-priority-primary { + font-weight : inherit; +} +.ui-priority-secondary, +.ui-widget-content .ui-priority-secondary, +.ui-widget-header .ui-priority-secondary { + font-weight : inherit; + opacity : 0.7; +} +.ui-state-disabled, +.ui-widget-content .ui-state-disabled, +.ui-widget-header .ui-state-disabled { + background-image: none; + border : 1px solid var(--pico-muted-border-color); + opacity : 0.35; +} + +/* Icons +----------------------------------*/ +/* states and images - RELATIVE TO XCL /COMMON */ +.ui-icon { + width: 16px; + height: 16px; +} +.ui-icon, +.ui-widget-content .ui-icon { + background-image: url("../../../common/js/images/ui-icons_cccccc_256x240.png"); +} +.ui-widget-header .ui-icon { + background-image: url("../../../common/js/images/ui-icons_cccccc_256x240.png"); +} +.ui-state-hover .ui-icon, +.ui-state-focus .ui-icon, +.ui-button:hover .ui-icon, +.ui-button:focus .ui-icon { + background-image: url("../../../common/js/images/ui-icons_ffffff_256x240.png"); +} +.ui-state-active .ui-icon, +.ui-button:active .ui-icon { + background-image: url("../../../common/js/images/ui-icons_ffffff_256x240.png"); +} +.ui-state-highlight .ui-icon, +.ui-button .ui-state-highlight.ui-icon { + background-image: url("../../../common/js/images/ui-icons_ffffff_256x240.png"); +} +.ui-state-error .ui-icon, +.ui-state-error-text .ui-icon { + background-image: url("../../../common/js/images/ui-icons_ffffff_256x240.png"); +} +.ui-button .ui-icon { + background-image: url("../../../common/js/images/ui-icons_cccccc_256x240.png"); +} + + +/* Misc visuals +----------------------------------*/ + +/* Corner radius */ +.ui-corner-all, +.ui-corner-top, +.ui-corner-left, +.ui-corner-tl { + border-top-left-radius: var(--pico-border-radius); +} +.ui-corner-all, +.ui-corner-top, +.ui-corner-right, +.ui-corner-tr { + border-top-right-radius: var(--pico-border-radius); +} +.ui-corner-all, +.ui-corner-bottom, +.ui-corner-left, +.ui-corner-bl { + border-bottom-left-radius: var(--pico-border-radius); +} +.ui-corner-all, +.ui-corner-bottom, +.ui-corner-right, +.ui-corner-br { + border-bottom-right-radius: var(--pico-border-radius); +} + +/* Overlays */ +/*Applies 100% width & height dimensions to an overlay screen*/ +.ui-widget-overlay { + background : var(--ui-widget-overlay-bg); + backdrop-filter : var(--pico-modal-overlay-backdrop-filter); + opacity : .8; +} +/*Sets box-shadow x & y offset, blur radius and color.*/ +.ui-widget-shadow { + box-shadow : var(--ui-widget-shadow); +} + +/* Accordion +----------------------------------*/ +.ui-accordion .ui-accordion-header { + background : var(--pico-background-color); + border : 1px solid var(--pico-accordion-border-color); + border-radius : var(--pico-border-radius); + box-shadow : var(--pico-box-shadow); + cursor : pointer; + display : block; + margin : var(--accordion-margin); + outline : 0; + margin-bottom : .15em; + padding : .5em; + position : relative; + -moz-user-select: none; + user-select : none; + transition : background-color var(--pico-transition); + +} +.ui-accordion .ui-accordion-content { + background : var(--pico-dropdown-background-color); + border : var(--pico-border-width) solid var(--pico-dropdown-border-color); + border-top : 0; + border-radius : var(--pico-border-radius); + color : var(--pico-color); + padding : var(--pico-form-element-spacing-vertical) var(--pico-form-element-spacing-horizontal); + overflow : auto; + transition: opacity var(--pico-transition), transform 0s ease-in-out 1s; +} +:is(.ui-accordion-header-active):not([aria-selected="false"][aria-expanded="false"]) { + color:var(--pico-primary-color); +} +:is(.ui-accordion-header):not([aria-selected="true"][aria-expanded="true"]) { + color:var(--pico-secondary); +} + +/* UI-MENU */ +.ui-menu { + background : var(--pico-form-element-background-color); + border : var(--pico-border-width) solid var(--pico-form-element-border-color); + border-radius : var(--pico-border-radius); + display : block; + list-style : none!important; + margin : var(--ui-menu-margin); + /* Override jQuery-UI css value */ + outline : 0; + padding:5px; + -moz-user-select: none; + user-select: none; +} +.ui-menu .ui-menu { + /* IMPORTANT override ui-widget-content */ + background : var(--pico-form-element-background-color); + border : var(--pico-border-width) solid var(--pico-form-element-border-color); + border-radius : var(--pico-border-radius); + position : absolute; + -moz-user-select: none; + user-select: none; +} +.ui-menu .ui-menu-item-wrapper { + background : inherit; + border : 1px solid transparent; + border-radius : var(--pico-border-radius); + color : var(--pico-color); + padding : .125em .25em; + /* position: relative;*/ +} +.ui-menu-icons { + position: relative +} +.ui-menu-icons .ui-menu-item-wrapper { + padding-left: 1.5em +} +.ui-menu .ui-icon { + position: absolute; + top: 0; + bottom: 0; + left: .2em; + margin: auto 0 +} +.ui-menu .ui-menu-icon { + left: auto; + right: 0 +} +.ui-menu .ui-state-focus, +.ui-menu .ui-state-active { + /* IMPORTANT override default UI properties */ + background : var(--pico-primary-hover-background); + border : 1px solid var(--pico-primary-hover-border); + border-radius : var(--pico-border-radius); + color : var(--pico-primary-inverse); + margin : 0; +} + +.ui-button:not(.ui-spinner-button,.ui-dialog-titlebar-close,.ui-controlgroup-item), +.ui-button:link, +.ui-button:visited { +--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)); + background-color: var(--pico-background-color); + border: var(--pico-border-width) solid var(--pico-border-color); + border-radius: var(--pico-border-radius); + box-shadow: var(--pico-box-shadow); + color: var(--pico-color); + cursor: pointer; + font-weight: var(--pico-font-weight); + font-size: var(--pico-font-size); + line-height: var(--pico-line-height); + outline: 0; + padding: var(--pico-form-element-spacing-vertical) var(--pico-form-element-spacing-horizontal); + text-align: center; + text-decoration: none; + -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); +} +.ui-button:hover { +--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); +} +/* +ref: https://api.jquery.com/first/ +*/ +:is(.ui-selectmenu-button.ui-button) { + padding : var(--pico-form-element-spacing-vertical) var(--pico-form-element-spacing-horizontal); + margin-bottom : var(--pico-spacing); + background-color: var(--pico-form-element-background-color); + border : var(--pico-border-width) solid var(--pico-form-element-border-color); + border-radius : var(--pico-border-radius); + box-shadow : var(--pico-button-hover-box-shadow, 0 0 0 rgba(0, 0, 0, 0.2)); + color : var(--pico-form-element-placeholder-color); + cursor : pointer; + height : calc(1rem* var(--pico-line-height) + var(--pico-form-element-spacing-vertical)* 2 + var(--pico-border-width)* 2); + line-height : inherit; + text-align : left; + -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); +} +:is(.ui-selectmenu-button-open.ui-button) { +background-color: var(--pico-form-element-background-color); +border : var(--pico-border-width) solid var(--pico-form-element-border-color); +color : var(--pico-form-element-placeholder-color); +} +.ui-selectmenu-menu .ui-menu .ui-selectmenu-optgroup { + font-weight : var(--pico-font-weight); + margin : 0; +} +.ui-controlgroup-horizontal:first-child .ui-controlgroup-item:nth-of-type(1), +.ui-controlgroup-horizontal > .ui-selectmenu-button { + border-top-left-radius: var(--pico-border-radius) !important; + border-bottom-left-radius: var(--pico-border-radius) !important; +} +.ui-controlgroup-horizontal .ui-controlgroup-item:last-child { + border-top-right-radius: var(--pico-border-radius) !important; + border-bottom-right-radius: var(--pico-border-radius) !important; +} +.ui-controlgroup-vertical .ui-controlgroup-item:first-child, +.ui-controlgroup-vertical .ui-selectmenu-button { + border-top-left-radius: var(--pico-border-radius) !important; + border-top-right-radius: var(--pico-border-radius) !important; +} +.ui-controlgroup-vertical .ui-controlgroup-item:last-child { + border-bottom-left-radius: var(--pico-border-radius); + border-bottom-right-radius: var(--pico-border-radius) !important; +} +.ui-controlgroup { + display : inline-block; + vertical-align : middle; +} +:where(.ui-controlgroup ) .ui-controlgroup-item:not(.ui-spinner) { + background : var(--pico-background-color); + border : var(--pico-border-width) solid var(--pico-form-element-border-color); + color : var(--pico-color); + padding : var(--pico-form-element-spacing-vertical) var(--pico-form-element-spacing-horizontal); + margin : 0; +} +.ui-controlgroup .ui-controlgroup-label span { + font-size : 1rem; + color : var(--pico-primary); +} +.ui-controlgroup-horizontal .ui-controlgroup-label + .ui-controlgroup-item { + border-left : var(--pico-border-width) solid var(--pico-accordion-border-color); +} + +/* RESET BROWSER SPINNER */ +input::-webkit-outer-spin-button, +input::-webkit-inner-spin-button { +display: none; +-webkit-appearance: none; +margin: 0; /* reset margin */ +outline: none; +} +input[type=number] { +-moz-appearance:textfield; /* Firefox */ +} +.ui-spinner-input { + -webkit-appearance: none; + -moz-appearance: textfield; + appearance: none; + border: var(--pico-border-width) solid var(--pico-form-element-border-color); + border-radius: var(--pico-border-radius); + margin: 0!important; + padding-right: 30px!important; + min-width: 8ch; + text-align: center; + vertical-align: middle; + outline: none; +} +.ui-spinner-input:focus{outline:none;box-shadow: 0 0 0 var(--pico-outline-width) var(--pico-primary-focus);} +.ui-spinner a.ui-spinner-button { + position: absolute; + height: 28px!important; + background: var(--pico-primary-underline); +} +.ui-spinner a.ui-spinner-button:hover{ +background: var(--pico-primary-hover-background); +} + +/* CHECKBOX + icon */ +.ui-checkboxradio-label .ui-icon-background { +--pico-background-color: var(--pico-primary-background); +--pico-border-color: var(--pico-primary-border); + -webkit-appearance: none; + -moz-appearance: none; + appearance: none; + accent-color : var(--pico-primary); + background : var(--pico-form-element-border-color); + border : 2px solid var(--pico-form-element-border-color); + border-radius : 3px; + box-shadow : var(--ui-state-check-shadow); + background-position: center; + background-size : .75em auto; + background-repeat: no-repeat; +} +/* RADIO */ +.ui-checkboxradio-radio-label .ui-icon-background { + background : white; + border : 8px solid var(--pico-form-element-border-color); + border-radius : 50%; + box-shadow : var(--ui-state-check-shadow); + height : var(--ui-state-check-height); + width : var(--ui-state-check-width); +} +.ui-checkboxradio-radio-label.ui-checkboxradio-checked .ui-icon, +.ui-checkboxradio-radio-label.ui-checkboxradio-checked:hover .ui-icon { + background-image: var(--pico-icon-checkbox); + background : white; + cursor : pointer; +} + +.ui-datepicker table { + font-size : 16px; +} +.ui-datepicker .ui-datepicker-prev, +.ui-datepicker .ui-datepicker-next{ + border : 1px solid transparent; + position : absolute; + top : 2px; + width : 1.8em; + height : 1.8em +} +.ui-datepicker .ui-datepicker-prev-hover, +.ui-datepicker .ui-datepicker-next-hover{ + top:2px +} +.ui-datepicker .ui-datepicker-prev{ + left:2px +} +.ui-datepicker .ui-datepicker-next{ + right:2px +} +.ui-datepicker .ui-datepicker-prev-hover{ + left:2px +} +.ui-datepicker .ui-datepicker-next-hover{ + right:2px +} +.ui-datepicker .ui-datepicker-prev span, +.ui-datepicker .ui-datepicker-next span{ + display:block; + position:absolute; + left:50%; + margin-left:-8px; + top:50%; + margin-top:-8px +} +.ui-datepicker .ui-datepicker-title{ + margin:0 2.3em; + line-height:1.8em; + text-align:center +} + +.ui-progressbar { + height : var(--ui-progressbar-height); +} +.ui-progressbar .ui-progressbar-value { + background : var(--ui-progressbar-value); +} + + +/* -------------------- -------------------- jQUERY UI TAB */ +.ui-tabs { + position : relative; + border : none; + border-radius : var(--pico-border-radius); + margin : 0; + padding:0.875rem; + list-style : none; +} +.ui-tabs .ui-tabs-nav { + margin : 0; + padding : .2em .2em 0; +} +/* The list of tabs */ +.ui-tabs .ui-tabs-nav { + background : transparent; + border : none; + border-top-left-radius : var(--pico-border-radius); + border-top-right-radius : var(--pico-border-radius); + box-shadow : var(--pico-box-shadow); + cursor : pointer; + display : inline-block; + line-height : 1.25; +} +.ui-tabs .ui-tabs-nav li { + /* border: 1px solid var(--pico-primary-underline); */ + list-style: none; + float: left; + position: relative; + top: 0; + margin: 0; + white-space: nowrap; +} +/* The anchors used to switch panels. */ +.ui-tabs .ui-tabs-nav .ui-tabs-anchor { + /* background : var(--pico-primary-underline); */ + background : transparent; + color : var(--pico-primary); + float : left; + text-decoration : none; +} +/* li .ui-tabs-anchor:first-child { +border-top-left-radius: var(--pico-border-radius); +} +li .ui-tabs-anchor:last-child { + border-top-right-radius: var(--pico-border-radius); +} */ + +.ui-tabs .ui-tabs-nav li.ui-tabs-active { + margin-bottom: 0; + padding-bottom: 0; + border-radius: var(--pico-border-radius); + border:none; +} +:is(.ui-tabs-tab).ui-state-default,.ui-state-default{ + border-radius: var(--pico-border-radius); +} +.ui-tabs-collapsible .ui-tabs-nav li.ui-tabs-active .ui-tabs-anchor { + cursor: pointer; +} +.ui-tabs .ui-tabs-nav .ui-tabs-anchor:hover, +.ui-tabs .ui-tabs-nav li.ui-tabs-active .ui-tabs-anchor { + background : var(--pico-primary-hover-background); + color : var(--pico-contrast); +} + +:where(li.ui-tabs-tab, a.ui-tabs-anchor):first-child {border-top-left-radius: var(--pico-border-radius)} +:where(li.ui-tabs-tab, a.ui-tabs-anchor):last-child {border-top-right-radius: var(--pico-border-radius)} +.ui-tabs .ui-tabs-panel { + background : var(--pico-card-background-color); + display : block; + border : var(--ui-tab-panel-border); + padding : var(--pico-block-spacing-vertical) var(--pico-block-spacing-horizontal); +} + +/* CUSTOMIZED content loading via an Ajax call will have the ui-tabs-loading class. */ +.ui-tabs-loading { + border : var(--ui-tabs-loading); /* TODO */ +} + +/* -------------------- jQUERY UI Tooltip */ +/*.ui-tooltip { + padding: 8px; + position: absolute; + z-index: 9999; + max-width: 300px; +} +body .ui-tooltip { + border-width: 2px; +}*/ diff --git a/html/themes/pico-blue/css/pico.blue.min.css b/html/themes/pico-blue/css/pico.blue.min.css new file mode 100644 index 000000000..2cfd2e4d1 --- /dev/null +++ b/html/themes/pico-blue/css/pico.blue.min.css @@ -0,0 +1,4 @@ +@charset "UTF-8";/*! + * Pico CSS ✨ v2.0.6 (https://picocss.com) + * Copyright 2019-2024 - Licensed under MIT + */:root{--pico-font-family-emoji:"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";--pico-font-family-sans-serif:system-ui,"Segoe UI",Roboto,Oxygen,Ubuntu,Cantarell,Helvetica,Arial,"Helvetica Neue",sans-serif,var(--pico-font-family-emoji);--pico-font-family-monospace:ui-monospace,SFMono-Regular,"SF Mono",Menlo,Consolas,"Liberation Mono",monospace,var(--pico-font-family-emoji);--pico-font-family:var(--pico-font-family-sans-serif);--pico-line-height:1.5;--pico-font-weight:400;--pico-font-size:100%;--pico-text-underline-offset:0.1rem;--pico-border-radius:0.25rem;--pico-border-width:0.0625rem;--pico-outline-width:0.125rem;--pico-transition:0.2s ease-in-out;--pico-spacing:1rem;--pico-typography-spacing-vertical:1rem;--pico-block-spacing-vertical:var(--pico-spacing);--pico-block-spacing-horizontal:var(--pico-spacing);--pico-grid-column-gap:var(--pico-spacing);--pico-grid-row-gap:var(--pico-spacing);--pico-form-element-spacing-vertical:0.75rem;--pico-form-element-spacing-horizontal:1rem;--pico-group-box-shadow:0 0 0 rgba(0, 0, 0, 0);--pico-group-box-shadow-focus-with-button:0 0 0 var(--pico-outline-width) var(--pico-primary-focus);--pico-group-box-shadow-focus-with-input:0 0 0 0.0625rem var(--pico-form-element-border-color);--pico-modal-overlay-backdrop-filter:blur(0.375rem);--pico-nav-element-spacing-vertical:1rem;--pico-nav-element-spacing-horizontal:0.5rem;--pico-nav-link-spacing-vertical:0.5rem;--pico-nav-link-spacing-horizontal:0.5rem;--pico-nav-breadcrumb-divider:">";--pico-icon-checkbox:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(255, 255, 255)' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");--pico-icon-minus:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(255, 255, 255)' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='5' y1='12' x2='19' y2='12'%3E%3C/line%3E%3C/svg%3E");--pico-icon-chevron:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(136, 145, 164)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");--pico-icon-date:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(136, 145, 164)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='18' rx='2' ry='2'%3E%3C/rect%3E%3Cline x1='16' y1='2' x2='16' y2='6'%3E%3C/line%3E%3Cline x1='8' y1='2' x2='8' y2='6'%3E%3C/line%3E%3Cline x1='3' y1='10' x2='21' y2='10'%3E%3C/line%3E%3C/svg%3E");--pico-icon-time:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(136, 145, 164)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cpolyline points='12 6 12 12 16 14'%3E%3C/polyline%3E%3C/svg%3E");--pico-icon-search:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(136, 145, 164)' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'%3E%3C/circle%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'%3E%3C/line%3E%3C/svg%3E");--pico-icon-close:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(136, 145, 164)' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='18' y1='6' x2='6' y2='18'%3E%3C/line%3E%3Cline x1='6' y1='6' x2='18' y2='18'%3E%3C/line%3E%3C/svg%3E");--pico-icon-loading:url("data:image/svg+xml,%3Csvg fill='none' height='24' width='24' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg' %3E%3Cstyle%3E g %7B animation: rotate 2s linear infinite; transform-origin: center center; %7D circle %7B stroke-dasharray: 75,100; stroke-dashoffset: -5; animation: dash 1.5s ease-in-out infinite; stroke-linecap: round; %7D @keyframes rotate %7B 0%25 %7B transform: rotate(0deg); %7D 100%25 %7B transform: rotate(360deg); %7D %7D @keyframes dash %7B 0%25 %7B stroke-dasharray: 1,100; stroke-dashoffset: 0; %7D 50%25 %7B stroke-dasharray: 44.5,100; stroke-dashoffset: -17.5; %7D 100%25 %7B stroke-dasharray: 44.5,100; stroke-dashoffset: -62; %7D %7D %3C/style%3E%3Cg%3E%3Ccircle cx='12' cy='12' r='10' fill='none' stroke='rgb(136, 145, 164)' stroke-width='4' /%3E%3C/g%3E%3C/svg%3E")}@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.contrast,a.secondary{--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}tfoot td,tfoot th,thead td,thead th{--pico-font-weight:600;--pico-border-width:0.1875rem}code,kbd,pre,samp{--pico-font-family:var(--pico-font-family-monospace)}kbd{--pico-font-weight:bolder}:where(select,textarea),input:not([type=submit],[type=button],[type=reset],[type=checkbox],[type=radio],[type=file]){--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=group]:has(button.secondary:focus,[type=submit].secondary:focus,[type=button].secondary:focus,[role=button].secondary:focus),[role=search]: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=group]:has(button.contrast:focus,[type=submit].contrast:focus,[type=button].contrast:focus,[role=button].contrast:focus),[role=search]: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=group] [role=button],[role=group] [type=button],[role=group] [type=submit],[role=group] button,[role=search] [role=button],[role=search] [type=button],[role=search] [type=submit],[role=search] 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)}:root:not([data-theme=dark]),[data-theme=light]{--pico-background-color:#fff;--pico-color:#373c44;--pico-text-selection-color:rgba(116, 139, 248, 0.25);--pico-muted-color:#646b79;--pico-muted-border-color:#e7eaf0;--pico-primary:#2060df;--pico-primary-background:#2060df;--pico-primary-border:var(--pico-primary-background);--pico-primary-underline:rgba(32, 96, 223, 0.5);--pico-primary-hover:#184eb8;--pico-primary-hover-background:#1d59d0;--pico-primary-hover-border:var(--pico-primary-hover-background);--pico-primary-hover-underline:var(--pico-primary-hover);--pico-primary-focus:rgba(116, 139, 248, 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:var(--pico-background-color);--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}:root:not([data-theme=dark]) input:is([type=submit],[type=button],[type=reset],[type=checkbox],[type=radio],[type=file]),[data-theme=light] 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(137, 153, 249, 0.1875);--pico-muted-color:#7b8495;--pico-muted-border-color:#202632;--pico-primary:#8999f9;--pico-primary-background:#2060df;--pico-primary-border:var(--pico-primary-background);--pico-primary-underline:rgba(137, 153, 249, 0.5);--pico-primary-hover:#aeb5fb;--pico-primary-hover-background:#3c71f7;--pico-primary-hover-border:var(--pico-primary-hover-background);--pico-primary-hover-underline:var(--pico-primary-hover);--pico-primary-focus:rgba(137, 153, 249, 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(137, 153, 249, 0.1875);--pico-muted-color:#7b8495;--pico-muted-border-color:#202632;--pico-primary:#8999f9;--pico-primary-background:#2060df;--pico-primary-border:var(--pico-primary-background);--pico-primary-underline:rgba(137, 153, 249, 0.5);--pico-primary-hover:#aeb5fb;--pico-primary-hover-background:#3c71f7;--pico-primary-hover-border:var(--pico-primary-hover-background);--pico-primary-hover-underline:var(--pico-primary-hover);--pico-primary-focus:rgba(137, 153, 249, 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)}[type=checkbox],[type=radio],[type=range],progress{accent-color:var(--pico-primary)}*,::after,::before{box-sizing:border-box;background-repeat:no-repeat}::after,::before{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}body{width:100%;margin:0}main{display:block}body>footer,body>header,body>main{padding-block:var(--pico-block-spacing-vertical)}section{margin-bottom:var(--pico-block-spacing-vertical)}.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{grid-column-gap:var(--pico-grid-column-gap);grid-row-gap:var(--pico-grid-row-gap);display:grid;grid-template-columns:1fr}@media (min-width:768px){.grid{grid-template-columns:repeat(auto-fit,minmax(0%,1fr))}}.grid>*{min-width:0}.overflow-auto{overflow:auto}b,strong{font-weight:bolder}sub,sup{position:relative;font-size:.75em;line-height:0;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.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) * .25)}:where(dl,ol,ul) :where(dl,ol,ul){margin:0;margin-top:calc(var(--pico-typography-spacing-vertical) * .25)}ul li{list-style:square}mark{padding:.125rem .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:.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) * .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)}:where(a:not([role=button])),[role=link]{--pico-color:var(--pico-primary);--pico-background-color:transparent;--pico-underline:var(--pico-primary-underline);outline:0;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{margin:0;overflow:visible;font-family:inherit;text-transform:none}[type=button],[type=reset],[type=submit],button{-webkit-appearance:button}[role=button],[type=button],[type=file]::file-selector-button,[type=reset],[type=submit],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:0;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)}[role=button]:is(:hover,:active,:focus),[role=button]:is([aria-current]:not([aria-current=false])),[type=button]:is(:hover,:active,:focus),[type=button]:is([aria-current]:not([aria-current=false])),[type=file]::file-selector-button:is(:hover,:active,:focus),[type=file]::file-selector-button:is([aria-current]:not([aria-current=false])),[type=reset]:is(:hover,:active,:focus),[type=reset]:is([aria-current]:not([aria-current=false])),[type=submit]:is(:hover,:active,:focus),[type=submit]:is([aria-current]:not([aria-current=false])),button:is(:hover,:active,:focus),button:is([aria-current]:not([aria-current=false])){--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)}[role=button]:focus,[role=button]: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,[type=reset]:focus,[type=reset]:is([aria-current]:not([aria-current=false])):focus,[type=submit]:focus,[type=submit]:is([aria-current]:not([aria-current=false])):focus,button:focus,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=button],[type=reset],[type=submit]{margin-bottom:var(--pico-spacing)}:is(button,[type=submit],[type=button],[role=button]).secondary,[type=file]::file-selector-button,[type=reset]{--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=file]::file-selector-button:is([aria-current]:not([aria-current=false]),:hover,:active,:focus),[type=reset]: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=file]::file-selector-button:focus,[type=file]::file-selector-button:is([aria-current]:not([aria-current=false])):focus,[type=reset]:focus,[type=reset]: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:.5;pointer-events:none}:where(table){width:100%;border-collapse:collapse;border-spacing:0;text-indent:0}td,th{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 td,tfoot th{border-top:var(--pico-border-width) solid var(--pico-table-border-color);border-bottom:0}table.striped tbody tr:nth-child(odd) td,table.striped tbody tr:nth-child(odd) th{background-color:var(--pico-table-row-stripped-background-color)}: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,kbd,pre,samp{font-size:.875em;font-family:var(--pico-font-family)}pre code{font-size:inherit;font-family:inherit}pre{-ms-overflow-style:scrollbar;overflow:auto}code,kbd,pre{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:.375rem}pre{display:block;margin-bottom:var(--pico-spacing);overflow-x:auto}pre>code{display:block;padding:var(--pico-spacing);background:0 0;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{display:block;margin:0;padding:0}figure figcaption{padding:calc(var(--pico-spacing) * .5) 0;color:var(--pico-muted-color)}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}input,optgroup,select,textarea{margin:0;font-size:1rem;line-height:var(--pico-line-height);font-family:inherit;letter-spacing:inherit}input{overflow:visible}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:0}:-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}fieldset legend,label{display:block;margin-bottom:calc(var(--pico-spacing) * .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) * .5)}button[type=submit],input:not([type=checkbox],[type=radio]),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:0;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)}:where(select,textarea):not([readonly]):is(:active,:focus),input:not([type=submit],[type=button],[type=reset],[type=checkbox],[type=radio],[readonly]):is(:active,:focus){--pico-background-color:var(--pico-form-element-active-background-color)}:where(select,textarea):not([readonly]):is(:active,:focus),input:not([type=submit],[type=button],[type=reset],[role=switch],[readonly]):is(:active,:focus){--pico-border-color:var(--pico-form-element-active-border-color)}:where(select,textarea):not([readonly]):focus,input:not([type=submit],[type=button],[type=reset],[type=range],[type=file],[readonly]):focus{--pico-box-shadow:0 0 0 var(--pico-outline-width) var(--pico-form-element-focus-color)}:where(fieldset[disabled]) :is(input:not([type=submit],[type=button],[type=reset]),select,textarea),input:not([type=submit],[type=button],[type=reset])[disabled],label[aria-disabled=true],select[disabled],textarea[disabled]{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 .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 .75rem}input::-webkit-input-placeholder,input::placeholder,select:invalid,textarea::-webkit-input-placeholder,textarea::placeholder{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 .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 .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 .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) * -.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) * .25)}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:-.125em;margin-inline-end:.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:.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:.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:.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 .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:active[aria-invalid=true],[type=checkbox]:checked:focus[aria-invalid=true],[type=checkbox]:checked[aria-invalid=true],[type=checkbox][role=switch]:checked:active[aria-invalid=true],[type=checkbox][role=switch]:checked:focus[aria-invalid=true],[type=checkbox][role=switch]:checked[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=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,[type=radio][aria-invalid=false]:checked,[type=radio][aria-invalid=false]:checked:active,[type=radio][aria-invalid=false]:checked:focus{--pico-border-color:var(--pico-form-element-valid-border-color)}[type=checkbox]:checked:active[aria-invalid=true],[type=checkbox]:checked:focus[aria-invalid=true],[type=checkbox]:checked[aria-invalid=true],[type=checkbox][role=switch]:checked:active[aria-invalid=true],[type=checkbox][role=switch]:checked:focus[aria-invalid=true],[type=checkbox][role=switch]:checked[aria-invalid=true],[type=radio]:checked:active[aria-invalid=true],[type=radio]:checked:focus[aria-invalid=true],[type=radio]:checked[aria-invalid=true]{--pico-border-color:var(--pico-form-element-invalid-border-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) * .5)}[type=color]::-moz-color-swatch{border:0;border-radius:calc(var(--pico-border-radius) * .5)}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}[type=file]{--pico-color:var(--pico-muted-color);margin-left:calc(var(--pico-outline-width) * -1);padding:calc(var(--pico-form-element-spacing-vertical) * .5) 0;padding-left:var(--pico-outline-width);border:0;border-radius:0;background:0 0}[type=file]::file-selector-button{margin-right:calc(var(--pico-spacing)/ 2);padding:calc(var(--pico-form-element-spacing-vertical) * .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)}[type=range]{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:100%;height:1.25rem;background:0 0}[type=range]::-webkit-slider-runnable-track{width:100%;height:.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:.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:.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:-.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:-.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:-.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: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) + .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 .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 .75rem}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) * .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:0}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);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)}article>footer,article>header{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) * .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)}details.dropdown{position:relative;border-bottom:none}details.dropdown summary::after,details.dropdown>a::after,details.dropdown>button::after{display:block;width:1rem;height:calc(1rem * var(--pico-line-height,1.5));margin-inline-start:.25rem;float:right;transform:rotate(0) translateX(.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:0}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(0) translateX(0)}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) * .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) * .5)}details.dropdown summary+ul li:last-of-type{margin-bottom:calc(var(--pico-form-element-spacing-vertical) * .5)}details.dropdown summary+ul li a{display:block;margin:calc(var(--pico-form-element-spacing-vertical) * -.5) calc(var(--pico-form-element-spacing-horizontal) * -1);padding:calc(var(--pico-form-element-spacing-vertical) * .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:active,details.dropdown summary+ul li a:focus,details.dropdown summary+ul li a:focus-visible,details.dropdown summary+ul li a:hover,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:0 0;content:"";cursor:default}label>details.dropdown{margin-top:calc(var(--pico-spacing) * .25)}[role=group],[role=search]{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 transparent);vertical-align:middle;transition:box-shadow var(--pico-transition)}[role=group] input:not([type=checkbox],[type=radio]),[role=group] select,[role=group]>*,[role=search] input:not([type=checkbox],[type=radio]),[role=search] select,[role=search]>*{position:relative;flex:1 1 auto;margin-bottom:0}[role=group] input:not([type=checkbox],[type=radio]):not(:first-child),[role=group] select:not(:first-child),[role=group]>:not(:first-child),[role=search] input:not([type=checkbox],[type=radio]):not(:first-child),[role=search] select:not(:first-child),[role=search]>:not(:first-child){margin-left:0;border-top-left-radius:0;border-bottom-left-radius:0}[role=group] input:not([type=checkbox],[type=radio]):not(:last-child),[role=group] select:not(:last-child),[role=group]>:not(:last-child),[role=search] input:not([type=checkbox],[type=radio]):not(:last-child),[role=search] select:not(:last-child),[role=search]>:not(:last-child){border-top-right-radius:0;border-bottom-right-radius:0}[role=group] input:not([type=checkbox],[type=radio]):focus,[role=group] select:focus,[role=group]>:focus,[role=search] input:not([type=checkbox],[type=radio]):focus,[role=search] select:focus,[role=search]>:focus{z-index:2}[role=group] [role=button]:not(:first-child),[role=group] [type=button]:not(:first-child),[role=group] [type=reset]:not(:first-child),[role=group] [type=submit]:not(:first-child),[role=group] button:not(:first-child),[role=group] input:not([type=checkbox],[type=radio]):not(:first-child),[role=group] select:not(:first-child),[role=search] [role=button]:not(:first-child),[role=search] [type=button]:not(:first-child),[role=search] [type=reset]:not(:first-child),[role=search] [type=submit]:not(:first-child),[role=search] button:not(:first-child),[role=search] input:not([type=checkbox],[type=radio]):not(:first-child),[role=search] select:not(:first-child){margin-left:calc(var(--pico-border-width) * -1)}[role=group] [role=button],[role=group] [type=button],[role=group] [type=reset],[role=group] [type=submit],[role=group] button,[role=search] [role=button],[role=search] [type=button],[role=search] [type=reset],[role=search] [type=submit],[role=search] button{width:auto}@supports selector(:has(*)){[role=group]:has(button:focus,[type=submit]:focus,[type=button]:focus,[role=button]:focus),[role=search]: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=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,[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{border-color:transparent}[role=group]:has(input:not([type=submit],[type=button]):focus,select:focus),[role=search]:has(input:not([type=submit],[type=button]):focus,select:focus){--pico-group-box-shadow:var(--pico-group-box-shadow-focus-with-input)}[role=group]:has(input:not([type=submit],[type=button]):focus,select:focus) [role=button],[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) [type=submit],[role=group]:has(input:not([type=submit],[type=button]):focus,select:focus) button,[role=search]:has(input:not([type=submit],[type=button]):focus,select:focus) [role=button],[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) [type=submit],[role=search]:has(input:not([type=submit],[type=button]):focus,select:focus) 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=group] [role=button]:focus,[role=group] [type=button]:focus,[role=group] [type=reset]:focus,[role=group] [type=submit]:focus,[role=group] button:focus,[role=search] [role=button]:focus,[role=search] [type=button]:focus,[role=search] [type=reset]:focus,[role=search] [type=submit]:focus,[role=search] 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}[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:-.125em}[aria-busy=true]:not(input,select,textarea,html):not(:empty)::before{margin-inline-end:calc(var(--pico-spacing) * .5)}[aria-busy=true]:not(input,select,textarea,html):empty{text-align:center}[role=button][aria-busy=true],[type=button][aria-busy=true],[type=reset][aria-busy=true],[type=submit][aria-busy=true],a[aria-busy=true],button[aria-busy=true]{pointer-events:none}: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:100%;height:inherit;min-height:100%;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 [role=button],dialog article>footer button{margin-bottom:0}dialog article>footer [role=button]:not(:first-of-type),dialog article>footer button:not(:first-of-type){margin-left:calc(var(--pico-spacing) * .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:.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,0);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:.2s;animation-timing-function:ease-in-out;animation-fill-mode:both}:where(.modal-is-opening,.modal-is-closing) dialog{animation-duration:.8s;animation-name:modal-overlay}:where(.modal-is-opening,.modal-is-closing) dialog>article{animation-delay:.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}}: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 [role=button],nav li [type=button],nav li 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 li,aside nav,aside ol,aside ul{display:block}aside li{padding:calc(var(--pico-nav-element-spacing-vertical) * .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{display:inline-block;vertical-align:baseline}progress{-webkit-appearance:none;-moz-appearance:none;display:inline-block;appearance:none;width:100%;height:.5rem;margin-bottom:calc(var(--pico-spacing) * .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:0 0}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}}[data-tooltip]{position:relative}[data-tooltip]:not(a,button,input){border-bottom:1px dotted;text-decoration:none;cursor:help}[data-tooltip]::after,[data-tooltip]::before,[data-tooltip][data-placement=top]::after,[data-tooltip][data-placement=top]::before{display:block;z-index:99;position:absolute;bottom:100%;left:50%;padding:.25rem .5rem;overflow:hidden;transform:translate(-50%,-.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:.875rem;text-decoration:none;text-overflow:ellipsis;white-space:nowrap;opacity:0;pointer-events:none}[data-tooltip]::after,[data-tooltip][data-placement=top]::after{padding:0;transform:translate(-50%,0);border-top:.3rem solid;border-right:.3rem solid transparent;border-left:.3rem solid transparent;border-radius:0;background-color:transparent;content:"";color:var(--pico-tooltip-background-color)}[data-tooltip][data-placement=bottom]::after,[data-tooltip][data-placement=bottom]::before{top:100%;bottom:auto;transform:translate(-50%,.25rem)}[data-tooltip][data-placement=bottom]:after{transform:translate(-50%,-.3rem);border:.3rem solid transparent;border-bottom:.3rem solid}[data-tooltip][data-placement=left]::after,[data-tooltip][data-placement=left]::before{top:50%;right:100%;bottom:auto;left:auto;transform:translate(-.25rem,-50%)}[data-tooltip][data-placement=left]:after{transform:translate(.3rem,-50%);border:.3rem solid transparent;border-left:.3rem solid}[data-tooltip][data-placement=right]::after,[data-tooltip][data-placement=right]::before{top:50%;right:auto;bottom:auto;left:100%;transform:translate(.25rem,-50%)}[data-tooltip][data-placement=right]:after{transform:translate(-.3rem,-50%);border:.3rem solid transparent;border-right:.3rem solid}[data-tooltip]:focus::after,[data-tooltip]:focus::before,[data-tooltip]:hover::after,[data-tooltip]:hover::before{opacity:1}@media (hover:hover) and (pointer:fine){[data-tooltip]:focus::after,[data-tooltip]:focus::before,[data-tooltip]:hover::after,[data-tooltip]:hover::before{--pico-tooltip-slide-to:translate(-50%, -0.25rem);transform:translate(-50%,.75rem);animation-duration:.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%,-.25rem);animation-name:tooltip-caret-slide}[data-tooltip][data-placement=bottom]:focus::after,[data-tooltip][data-placement=bottom]:focus::before,[data-tooltip][data-placement=bottom]:hover::after,[data-tooltip][data-placement=bottom]:hover::before{--pico-tooltip-slide-to:translate(-50%, 0.25rem);transform:translate(-50%,-.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%,-.5rem);animation-name:tooltip-caret-slide}[data-tooltip][data-placement=left]:focus::after,[data-tooltip][data-placement=left]:focus::before,[data-tooltip][data-placement=left]:hover::after,[data-tooltip][data-placement=left]:hover::before{--pico-tooltip-slide-to:translate(-0.25rem, -50%);transform:translate(.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(.05rem,-50%);animation-name:tooltip-caret-slide}[data-tooltip][data-placement=right]:focus::after,[data-tooltip][data-placement=right]:focus::before,[data-tooltip][data-placement=right]:hover::after,[data-tooltip][data-placement=right]:hover::before{--pico-tooltip-slide-to:translate(0.25rem, -50%);transform:translate(-.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(-.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}}[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}[tabindex],a,area,button,input,label,select,summary,textarea{-ms-touch-action:manipulation}[dir=rtl]{direction:rtl}@media (prefers-reduced-motion:reduce){:not([aria-busy=true]),:not([aria-busy=true])::after,:not([aria-busy=true])::before{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}} \ No newline at end of file diff --git a/html/themes/pico-blue/index.php b/html/themes/pico-blue/index.php new file mode 100644 index 000000000..fcf07024f --- /dev/null +++ b/html/themes/pico-blue/index.php @@ -0,0 +1,1351 @@ + + + + + + + + XCL Theme built with PicoCSS for XOOPSCube + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ +
+ + +
+ +
+

Web Application Platform

+

Just Use it!

+
+ +
+
+
+
Integrate responsive frameworks and libraries in your Modules and Themes, simple customize a template set.
+
+
+

Content Management System, Cache, Duplicatable Modules (multisites), User Groups Management, Themes, built-in Search.

+
+
+
+ +
+
+
Scalability is the property of a system to handle a growing amount of work by adding resources to the system. 
+
+
+

Scalability without costly contracts, hosting cloud hidden costs, limitations or restrictions. Self-hosted and local first.

+
+
+
+ +
+
+
A secure and modular architecture design with self-contained components known as modules. 
+
+
+
Each module encapsulates a specific functionality, operates independently, and can be developed, maintained, and reused safely.
+
+
+ +
+ +
+ + +
+ + + + +
+ +
+

Default theme layout

+The placeholders for the content and blocks are defined by the theme layout. +
+ You can create a custom center-block-left to trigger a component display on the Top page
+ Add to the Block Title a prefix "top-" and select the target "Toppage".
+ +
+

Header Nav

+
+
+
Logo
+
User menu  Light | Dark
+
+
+

Component top center

+
+
grid-column
center-block-left
Block Title prefix: top-
+
grid-column
center-block-center
Block Title prefix: top-
+
grid-column
center-block-right
Block Title prefix: top-
+
+
+

Main container

+
+
aside nav
Side-Left
Default Blocks:
  • User Menu
  • Main Menu
  • Themes
+
div.content
App Start Page [template]
or
Module Content
+
+ aside nav +
Side-Right +
Block-Right and for Admin Panel a Block Title with prefix 'admin' +
+
+
+

Section container-fluid

+
+
grid-column
center-block-left
+
grid-column
center-block-left
+
grid-column
center-block-left
+
+
+
Footer
+
+ +
+ +
+

Top Page Center Blocks

+ +
    +
  1. Browse to Admin > Block Management > Add Custom Block +
  2. Give the Block Title e.g. top-none-myblock
    +the prefix top- with none- only show the block content +
  3. Select the side Center (left, center, right) +
  4. Write some content +
  5. Select Target Modules : Toppage
    6. +
  6. Select Target Groups : check all groups and submit
    7. +
+
+ + +

Pico

+

A pure HTML example, without dependencies.

+ + + +
+

Accordions

+
+ Accordion 1 +

+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque urna diam, + tincidunt nec porta sed, auctor id velit. Etiam venenatis nisl ut orci consequat, vitae + tempus quam commodo. Nulla non mauris ipsum. Aliquam eu posuere orci. Nulla convallis + lectus rutrum quam hendrerit, in facilisis elit sollicitudin. Mauris pulvinar pulvinar + mi, dictum tristique elit auctor quis. Maecenas ac ipsum ultrices, porta turpis sit + amet, congue turpis. +

+
+
+ Accordion 2 +
    +
  • Vestibulum id elit quis massa interdum sodales.
    • +
  • Nunc quis eros vel odio pretium tincidunt nec quis neque.
    • +
  • Quisque sed eros non eros ornare elementum.
    • +
  • Cras sed libero aliquet, porta dolor quis, dapibus ipsum.
    • +
+
+
+ + +
+
+

Article

+ header +
+

+ Content paragraph - Nullam dui arcu, malesuada et sodales eu, efficitur vitae dolor. Sed ultricies dolor non + ante vulputate hendrerit. Vivamus sit amet suscipit sapien. Nulla iaculis eros a elit + pharetra egestas. Nunc placerat facilisis cursus. Sed vestibulum metus eget dolor pharetra + rutrum. +

+
+ Footer - Duis nec elit placerat, suscipit nibh quis, finibus neque. +
+
+ + +
+

Buttons

+

+ + + +

+

+ + + +

+
+ + +
+
+

Form elements

+ + + + + + + + + Curabitur consequat lacus at lacus porta finibus. + + + + + + + + + + + + +
+ + + +
+ +
+ + + + + + + + +
+ +
+ +
+ Checkboxes + + +
+ + +
+ Radio buttons + + +
+ + +
+ Switches + + +
+
+ + + + +
+
+ + +
+

Group

+
+
+ + +
+
+
+ + +
+

Loading

+
+ +
+ + + + + +
+

Preview

+

+ Sed ultricies dolor non ante vulputate hendrerit. Vivamus sit amet suscipit sapien. Nulla + iaculis eros a elit pharetra egestas. +

+
+
+ + + +
+
+ +
+
+
+ + +
+

Progress bar

+ + +
+ + +
+

Tables

+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
#HeadingHeadingHeadingHeadingHeadingHeadingHeading
1CellCellCellCellCellCellCell
2CellCellCellCellCellCellCell
3CellCellCellCellCellCellCell
+
+
+ + +
+

Typography

+

+ Aliquam lobortis vitae nibh nec rhoncus. Morbi mattis neque eget efficitur feugiat. + Vivamus porta nunc a erat mattis, mattis feugiat turpis pretium. Quisque sed tristique + felis. +

+ + +
+ "Maecenas vehicula metus tellus, vitae congue turpis hendrerit non. Nam at dui sit amet + ipsum cursus ornare." +
+ - Phasellus eget lacinia +
+
+ + +

Lists

+
    +
  • Aliquam lobortis lacus eu libero ornare facilisis.
    • +
  • Nam et magna at libero scelerisque egestas.
    • +
  • Suspendisse id nisl ut leo finibus vehicula quis eu ex.
    • +
  • Proin ultricies turpis et volutpat vehicula.
    • +
+ + +

Inline text elements

+
+

Primary link

+

+ Secondary link +

+

+ Contrast link +

+
+
+

Bold

+

Italic

+

Underline

+
+
+

Deleted

+

Inserted

+

Strikethrough

+
+
+

Small

+

Text Sub

+

Text Sup

+
+
+

+ Abbr. +

+

Kbd

+

Highlighted

+
+ + +

Heading 3

+

+ Integer bibendum malesuada libero vel eleifend. Fusce iaculis turpis ipsum, at efficitur + sem scelerisque vel. Aliquam auctor diam ut purus cursus fringilla. Class aptent taciti + sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. +

+

Heading 4

+

+ Cras fermentum velit vitae auctor aliquet. Nunc non congue urna, at blandit nibh. Donec ac + fermentum felis. Vivamus tincidunt arcu ut lacus hendrerit, eget mattis dui finibus. +

+
Heading 5
+

+ Donec nec egestas nulla. Sed varius placerat felis eu suscipit. Mauris maximus ante in + consequat luctus. Morbi euismod sagittis efficitur. Aenean non eros orci. Vivamus ut diam + sem. +

+
Heading 6
+

+ Ut sed quam non mauris placerat consequat vitae id risus. Vestibulum tincidunt nulla ut + tortor posuere, vitae malesuada tortor molestie. Sed nec interdum dolor. Vestibulum id + auctor nisi, a efficitur sem. Aliquam sollicitudin efficitur turpis, sollicitudin + hendrerit ligula semper id. Nunc risus felis, egestas eu tristique eget, convallis in + velit. +

+ + +
+ + + + + + + + + + + + Legacy to Remind Us of Where We Come From + +
+ Image from + SVG Image +
+
+
+ + +
+ + + + + + +
+ + + +
+ +

jQuery UI

+ +
+

Accordion

+ +
+

Section 1

+
+

+ Mauris mauris ante, blandit et, ultrices a, suscipit eget, quam. Integer + ut neque. Vivamus nisi metus, molestie vel, gravida in, condimentum sit + amet, nunc. Nam a nibh. Donec suscipit eros. Nam mi. Proin viverra leo ut + odio. Curabitur malesuada. Vestibulum a velit eu ante scelerisque vulputate. +

+
+

Section 2

+
+

+ Sed non urna. Donec et ante. Phasellus eu ligula. Vestibulum sit amet + purus. Vivamus hendrerit, dolor at aliquet laoreet, mauris turpis porttitor + velit, faucibus interdum tellus libero ac justo. Vivamus non quam. In + suscipit faucibus urna. +

+
+

Section 3

+
+

+ Nam enim risus, molestie et, porta ac, aliquam ac, risus. Quisque lobortis. + Phasellus pellentesque purus in massa. Aenean in pede. Phasellus ac libero + ac tellus pellentesque semper. Sed ac felis. Sed commodo, magna quis + lacinia ornare, quam ante aliquam nisi, eu iaculis leo purus venenatis dui. +

+
    +
  • List item one
    • +
  • List item two
    • +
  • List item three
    • +
+
+

Section 4

+
+

+ Cras dictum. Pellentesque habitant morbi tristique senectus et netus + et malesuada fames ac turpis egestas. Vestibulum ante ipsum primis in + faucibus orci luctus et ultrices posuere cubilia Curae; Aenean lacinia + mauris vel est. +

+

+ Suspendisse eu nisl. Nullam ut libero. Integer dignissim consequat lectus. + Class aptent taciti sociosqu ad litora torquent per conubia nostra, per + inceptos himenaeos. +

+
+
+
+ + +
+
+ +
+ + +

Button Widget with icons

+
+ + + + + + +
+
+ +
+

Button - Widget

+ +
+ + + An anchor +
+
+ +
+

CSS Buttons

+
+ + + An anchor +
+
+ +
+ +
+ + + +
+

Checkbox and radio button widgets

+ + +
+
+ Rental Car +
+ + + + + + + + + + +
+
+
+ +
+ + +
+

Progress bar

+ + +
+
Starting download...
+
+
+ + +
+ + +
+

Datepicker

+ +
+ Date:
+
+
+ + +
+

Dialog

+ +
+

This is an animated dialog which is useful for displaying information. The dialog window can be moved, resized and closed with the 'x' icon.

+
+ + +
+ + +
+ +
+

Menu

+ + +
+ +
+

Menu Categories

+ + + + +
+ +
+

Menu Icons

+ + + +
+ +
+ + +
+ + +
+

select menu

+
+ +
+ + + + + + + + + + + +
+ +
+ +
+ +
+

PicoSS Dropdown

+ +
+ Dropdown + +
+ + + +
+
+ + +
+ + +
+ +

Block-center - Grid

+ +
+
+

block-center-left

+
+
block title
+

content

+
+
+
+

block-center-center

+
+
block title
+

content

+
+
+
+

block-center-rigth

+
+
block title
+

content

+
+
+
+ +
+
+
+
block title
+

content

+
+
+
+
+
block title
+

content

+
+
+
+
+
block title
+

content

+
+
+
+
+ + + + + + + +
+
+ +

Confirm your action!

+
+

+ Cras sit amet maximus risus. Pellentesque sodales odio sit amet augue finibus + pellentesque. Nullam finibus risus non semper euismod. +

+ +
+ + + + + +
+ + + + + + +
+ + + + + \ No newline at end of file diff --git a/html/themes/pico-blue/js/index.html b/html/themes/pico-blue/js/index.html new file mode 100644 index 000000000..990cbd603 --- /dev/null +++ b/html/themes/pico-blue/js/index.html @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/html/themes/pico-blue/js/plugins.js b/html/themes/pico-blue/js/plugins.js new file mode 100644 index 000000000..6b65081ec --- /dev/null +++ b/html/themes/pico-blue/js/plugins.js @@ -0,0 +1,242 @@ +/* + * XCL Theme Pico Blue built with PicoCSS v206 + * + * @version 2.4.0 + * @update 2024-04-20 + * @Date 2024-02-02 + * @author Nuno Luciano ( https://github.com/gigamaster ) + * @copyright (c) 2005-2024 The XOOPSCube Project, authors + * @license MIT + * @link https://github.com/xoopscube + * + * + * 1. Theme Switcher + * 2. Modal + * -- jQuery Document Ready - helper plugins + * 3. Render SVG + * 4. Notification Time + * 5. Dropdown - block options, menu, etc + * 6. Close on click document + * 7. Highlight Message nav-tab active + * 8.1 remove border + * 8.2 url constructor + * 9. Aria-busy Toogle + */ + +/* + * 1. Minimal theme switcher Pico.css - https://picocss.com + * Copyright 2019-2024 - Licensed under MIT + */ +const themeSwitcher = { + // Config + _scheme: "auto", + menuTarget: "details.dropdown", + buttonsTarget: "a[data-theme-switcher]", + buttonAttribute: "data-theme-switcher", + rootAttribute: "data-theme", + localStorageKey: "picoPreferredColorScheme", + + // Init + init() { + this.scheme = this.schemeFromLocalStorage; + this.initSwitchers(); + }, + + // Get color scheme from local storage + get schemeFromLocalStorage() { + return window.localStorage?.getItem(this.localStorageKey) ?? this._scheme; + }, + + // Preferred color scheme + get preferredColorScheme() { + return window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light"; + }, + + // Init switchers + initSwitchers() { + const buttons = document.querySelectorAll(this.buttonsTarget); + buttons.forEach((button) => { + button.addEventListener( + "click", + (event) => { + event.preventDefault(); + // Set scheme + this.scheme = button.getAttribute(this.buttonAttribute); + // Close dropdown + document.querySelector(this.menuTarget)?.removeAttribute("open"); + }, + false + ); + }); + }, + + // Set scheme + set scheme(scheme) { + if (scheme == "auto") { + this._scheme = this.preferredColorScheme; + } else if (scheme == "dark" || scheme == "light") { + this._scheme = scheme; + } + this.applyScheme(); + this.schemeToLocalStorage(); + }, + + // Get scheme + get scheme() { + return this._scheme; + }, + + // Apply scheme + applyScheme() { + document.querySelector("html")?.setAttribute(this.rootAttribute, this.scheme); + }, + + // Store scheme to local storage + schemeToLocalStorage() { + window.localStorage?.setItem(this.localStorageKey, this.scheme); + }, +}; + +// Init +themeSwitcher.init(); + +/* + * 2. Modal Pico.css - https://picocss.com + * Copyright 2019-2024 - Licensed under MIT + */ +// Config +const isOpenClass = "modal-is-open"; +const openingClass = "modal-is-opening"; +const closingClass = "modal-is-closing"; +const scrollbarWidthCssVar = "--pico-scrollbar-width"; +const animationDuration = 400; // ms +let visibleModal = null; + +// Toggle modal +const toggleModal = (event) => { + event.preventDefault(); + const modal = document.getElementById(event.currentTarget.dataset.target); + if (!modal) return; + modal && (modal.open ? closeModal(modal) : openModal(modal)); +}; + +// Open modal +const openModal = (modal) => { + const { documentElement: html } = document; + const scrollbarWidth = getScrollbarWidth(); + if (scrollbarWidth) { + html.style.setProperty(scrollbarWidthCssVar, `${scrollbarWidth}px`); + } + html.classList.add(isOpenClass, openingClass); + setTimeout(() => { + visibleModal = modal; + html.classList.remove(openingClass); + }, animationDuration); + modal.showModal(); +}; + +// Close modal +const closeModal = (modal) => { + visibleModal = null; + const { documentElement: html } = document; + html.classList.add(closingClass); + setTimeout(() => { + html.classList.remove(closingClass, isOpenClass); + html.style.removeProperty(scrollbarWidthCssVar); + modal.close(); + }, animationDuration); +}; + +// Close with a click outside +document.addEventListener("click", (event) => { + if (visibleModal === null) return; + const modalContent = visibleModal.querySelector("article"); + const isClickInside = modalContent.contains(event.target); + !isClickInside && closeModal(visibleModal); +}); + +// Close with Esc key +document.addEventListener("keydown", (event) => { + if (event.key === "Escape" && visibleModal) { + closeModal(visibleModal); + } +}); + +// Get scrollbar width +const getScrollbarWidth = () => { + const scrollbarWidth = window.innerWidth - document.documentElement.clientWidth; + return scrollbarWidth; +}; + +// Is scrollbar visible +const isScrollbarVisible = () => { + return document.body.scrollHeight > screen.height; +}; + + +// DOCUMENT READY - Place any jQuery/helper plugins below ! +/* ---------- ---------- ---------- ---------- ---------- */ +// Do something on document ready +$(function () { + + // 3. Inline SVG icons + $('.svg').renderClassSvg(); + + // 4. Notification Time + $('div.runtime').fadeIn( 750 ).delay( 3000 ).fadeOut( 500 ); + + // 5. Dropdown - block options, menu, etc + $(".dropdown").on("click", ".dropdown-toggle", function (event) { + event.preventDefault(); + $('.dropdown').removeClass('isopen'); + $(this).parent().toggleClass('isopen'); + }); + + // 6. Close on click document + $(document).on("click", function (event) { + var $trigger = $(".dropdown"); + if ($trigger !== event.target && !$trigger.has(event.target).length) { + $(".dropdown").removeClass("isopen"); + } + }); + + // 7. Highlight Message nav-tab active + $("#tabs-mail").tabs({ + active: false, + collapsible: true, + classes: { + "ui-tabs": "taborder" + }, + beforeActivate: function (event, ui) { + window.open($(ui.newTab).find('a').attr('href'), '_self'); + return false; + }, + } + ); + // .find('.ui-tabs-tab').removeClass('ui-corner-all ui-corner-top'); + + // 8.1 Remove border from dropdown UL children + $(".ui-tabs-tab .dropdown-content ul").children().css( "border", "0" ); + + // 8.2 url constructor + const parseUrl = new URL(window.location.href); + const msgAction = parseUrl.searchParams.get("action"); + // If module message index, highlight the first nav-tab + if (msgAction == null) { + $('#tabs-mail ul.ui-tabs-nav li:first-child').addClass('ui-state-active'); + } else { + // Highlight current action nav-tab + $('a[href="index.php?action=' + msgAction + '"]').parent('li').addClass('ui-tabs-active ui-state-active'); + } + if (msgAction == 'settings'|| msgAction == 'blacklist'){ + // Highlight dropdown menu + $('.settings ').parent('li').addClass("ui-state-active"); + } + // 9. Aria-busy Toogle + $('[aria-busy="false"]').on( "click", function(event) { + event.stopPropagation(); + event.stopImmediatePropagation(); + $(this).prop("ariaBusy", true); + }); + +}); diff --git a/html/themes/pico-blue/manifesto.ini.php b/html/themes/pico-blue/manifesto.ini.php new file mode 100644 index 000000000..44c101482 --- /dev/null +++ b/html/themes/pico-blue/manifesto.ini.php @@ -0,0 +1,22 @@ + header { + --pico-block-spacing-vertical:0 +} +body > main { + display : grid; + grid-template-rows: 1fr; + row-gap : 2rem; + margin-bottom : calc(var(--pico-spacing) * 4); + padding : 0 +} +body > main > * { + min-width : 0; + margin-bottom : 0 +} + +body > main > article { + --pico-block-spacing-vertical: var(--pico-spacing); + --pico-block-spacing-horizontal: var(--pico-spacing); +} + +/* Body align Aside and Main */ +body > main > aside#nav-left, +body > main > aside#block-right { + margin-top : .5rem; +} +body > main > div > aside { + background : var(--pico-card-background-color); + padding : .5rem; + padding : var(--pico-nav-element-spacing-vertical) var(--pico-nav-element-spacing-horizontal); /* @todo */ + border-radius : var(--pico-border-radius); +} + +/* BODY FOOTER */ +body > footer { + display : flex; + align-items : center; + padding : 1rem 0; + justify-content : center; + flex-wrap : wrap; +} +body > footer .logos { + display : inline-flex; + padding :.25rem .5rem; + border-bottom : 1px solid var(--pico-muted-border-color) +} +body > footer .logos a { padding:.25rem; margin:.5rem 0;} +body > footer .logos svg { + width : auto; + height : 1rem; + margin-right : calc(var(--pico-spacing) * .25); + transform : translateY(-.0625rem) +} + +/* ARTICLE H* ONLY CHILD (FORM COMMENT/REPLY) */ +article header :where( h2, h3, h4 ):only-child{ + margin : var(--pico-spacing) 0; +} +article header :where( p:last-child ){ + margin-bottom : 0; +} + +/* A HREF LINK COLOR */ +[data-theme=dark] { + :is([role=button], [type=button], [type=file]::file-selector-button, [type=reset], [type=submit], + button, [type=checkbox]:checked, [type=checkbox]:checked:active, [type=checkbox]:checked:focus, + [type=radio]:checked, [type=radio]:checked:active, [type=radio]:checked:focus):not(.outline) { + /* --pico-background-color: hsl(45 70% 40% / 1); */ + } + a:hover:not([role=button]) { + color:var(--pico-secondary-inverse) + } +} +[role=link]:focus, a:focus { +--background-color : var(--pico-primary-focus); + border-radius : var(--pico-border-radius); +} +/* A LINK UNDERLINE none */ +a {--pico-text-decoration: none; border:none} +:where(a:not([role=button])):is([aria-current]:not([aria-current=false]),:hover,:active,:focus), +[role=link] :is(a,[aria-current]:not([aria-current=false]),:hover,:active,:focus) { +--pico-text-decoration: none; +--pico-primary-underline: none; +--pico-underline: none; + border:none +} +/* A LINK - ICON ONLY */ +:is(a.btn-icon) { + border-radius : var(--pico-border-radius); + box-shadow : var(--pico-box-shadow); + display : inline-flex; + justify-content : center; + font-weight : 600; + font-size : 24px; + width : 30px; + height : 28px; + opacity : .8; + transition : opacity 0.3s ease-in; +} +:is(a.btn-icon):hover { + background : var(--pico-primary-focus); + color : var(--pico-secondary-inverse); + opacity : 1; +} + +hr { margin: 2rem 1rem; } /* @todo ? */ + +/* -------------------- ARTICLE FOOTER ACTION CONTROL */ +.action-control { + align-items : center; + column-gap : 1rem; + display : flex; + flex-wrap : wrap; + justify-content : space-between; + white-space : normal; +} + +/* -------------------- BANNER */ +section[role=banner] > div > article { + border : 1px solid var(--pico-muted-border-color); + border-radius : var(--pico-border-radius); + box-shadow : var(--pico-box-shadow); + margin : calc(var(--pico-block-spacing-vertical) * 3) 0; +} +[role=banner] .advert { + background : var(--pico-code-background-color); + border : 1px dotted var(--pico-form-element-disabled-border-color); + border-radius : var(--pico-border-radius); + display : block; + padding : var(--pico-spacing); + +} +[role=banner] .banner { + padding : var(--pico-spacing); + text-align : center; +} + +/* -------------------- BREADCRUMBS - MOBILE */ + +nav[aria-label=breadcrumb] { + margin-bottom : 1rem; /* space for pico header image */ +} + +@media (max-width : 768px) { + nav[aria-label=breadcrumb] ul { + list-style-type: none; + /*font-size: 16px;*/ + margin : 0; + padding : 10px 0; + /* truncate */ + white-space : nowrap; + max-width : 100%; + overflow : hidden; + } + nav[aria-label=breadcrumb] li { + display : inline-block; + max-width : 18%; /* truncate */ + width : auto; + white-space : nowrap; + overflow : hidden; + text-overflow: ellipsis; + } + nav[aria-label=breadcrumb] li:last-child {max-width: 30%;} + nav[aria-label=breadcrumb] li:first-child:before {content: none;} + nav[aria-label=breadcrumb] li a span:hover {text-decoration: underline} + nav[aria-label=breadcrumb] li, + nav[aria-label=breadcrumb] li:last-child {display: none} + nav[aria-label=breadcrumb] li:nth-last-child(2) {display: block;max-width: 100%;} + nav[aria-label=breadcrumb] li a {text-decoration: none} + nav[aria-label=breadcrumb] li:nth-last-child(2) a:after, + nav[aria-label=breadcrumb] ul li:not(:last-child) ::after {content: '';} + nav[aria-label=breadcrumb] li:nth-last-child(2) a:before { + content : ' ↚ '; + display : inline-flex; + min-width : 5ch; + background : var(--pico-primary); + border-radius:var(--pico-border-radius); + color : var(--pico-primary-inverse); + margin-right: .5rem; + place-content: center; + } + nav[aria-label=breadcrumb] li:nth-last-child(2):before {content: none} + + section.block-center { + background : var(--pico-contrast-inverse); + border : var(--pico-muted-border-color); + margin-bottom: 0; + padding : calc(var(--pico-spacing) * 1) calc(var(--pico-spacing) * 1); + } +} + +/* -------------------- BADGE & BUTTONS */ +.badge { + background : hsla(205, 15%, 40%, 0.25); + border-radius : var(--pico-border-radius); + font-size : 12px; + min-width : 3ch; + display : inline-block; + padding : 0 0.5rem;vertical-align: baseline; +} + +/* article h3 :is(.badge){font-size: 14px; } */ +:is(article, hgroup, .list-content) h3, h4, .block-title { + display : flex; + flex-wrap : wrap; + justify-content : space-between; + width : 100%; + align-items : baseline; +} + +/* BUTTON ACTION */ +:is(.delete) { + color : var(--pico-del-color); + border-color : var(--pico-del-color); +} +:is(button.vote) { + margin-bottom : 0; +} +:where([type=submit],[type=button],[role=button]) svg { + display : inline; + margin : 0 .25rem 0; + vertical-align: -.175em; +} + +:where(footer.action-control, footer div.grid) +:is(div, button, input[type=submit],input[type=button],[role=button], details.dropdown, input, a):not(summary) { + margin-bottom : 0; + white-space : nowrap; + /* border : 2px solid orange; */ +} +:where(footer.action-control) :is(a) { + border-radius : var(--pico-border-radius); + margin : 0 .5em; + padding : .25rem; +} +:where(footer.action-control) :is(a, button[type=submit]):hover { + background : var(--pico-primary-focus); + color : var(--pico-secondary-inverse); +} + +/* -------------------- BLOCKS */ +/* BLOCKS - Title */ +[class^="block-title"] { + color : var(--pico-muted-color); + font-weight : var(--pico-font-weight); + font-size : 1rem; + line-height : 1rem; + justify-content : space-between; + flex-wrap : nowrap; + margin-bottom : var(--pico-typography-spacing-vertical); + padding : 0; +} +[class^="block-title"] a { + display : inline-block; + width : 100%; +} +[class^="block-title"]:hover a { +--text-decoration : none; + color :var(--pico-primary-inverse); +} +[class^="block-title"]:hover { + background-position: 100% 100%; + background-size : 200% 100%; + text-decoration : none; + transition : background-size .3s .3s, background-position .3s; +} +/* BLOCKS - Content */ +[class="block-content"] { + margin-bottom : var(--pico-typography-spacing-vertical); +} +[class="block-content"] > ul { + padding : 0; +} +/* BLOCKS - MAIN MENU. SUB, MESSAGE */ +.menu-sub { + padding-left : 2.25rem; +} +/* BLOCK - PRIVATE MESSAGE */ +.block-messages ul#privatemessages { + flex-direction : column; + width : 100%; +} +.block-messages ul#privatemessages li { + padding : calc(var(--pico-nav-element-spacing-vertical) * .5) var(--pico-nav-element-spacing-horizontal); + width : inherit; +} +.block-messages ul#privatemessages li a { + display : inherit; +} +/* BLOCK - LIST MEMBERS */ +/* USERS ONLINE, SITE INFO */ +ul.list-column { + border-left : 4px solid var(--pico-muted-border-color); + column-count : 3; + column-width : 140px; + column-gap : 1.5rem; + column-rule : 4px solid var(--pico-muted-border-color); + margin : 1rem 0; + padding : 1rem; +} +ul.list-column li { + list-style : none; + margin-bottom :.5rem +} +ul.list-column li > h6 { + font-size : 16px; column-span: all; +} + +/* -------------------- ICONS */ +[class^="i-"] { + padding : .25rem .5rem +} +i[class^="i-"], +:is(span.icon, i.icon) { + padding-right : .5rem; +} + +summary[role="link"].contrast:is([aria-current],:hover,:active,:focus) { + background-color: transparent; + color : var(--pico-contrast-hover); +} + +/* -------------------- SEARCH FORM - PicoCSS default pill: 5rem */ + +[role=search]>:last-child { + border-top-right-radius: 1rem; + border-bottom-right-radius: 1rem; +} +[role=search]>:first-child { + border-top-left-radius: 1rem; + border-bottom-left-radius: 1rem; +} + +/* -------------------- TABLE - FONT-SIZE IN BLOCKS */ +[class^="block-"] table tbody, tfoot { + font-size : 14px; +} + +/* -------------------- TEXT SELECTION */ +::-moz-selection{background-color:var(--pico-primary);color:var(--pico-primary-inverse)} +::selection{background-color:var(--pico-primary);color:var(--pico-primary-inverse)} + +/* -------------------- TOOLTIP */ + +[data-tooltip] { + border-bottom-color: var( + --pico-border-color + ) +} +[data-tooltip]:after, main [data-tooltip]:before { + font-size : 12px +} + +/* -------------------- TYPOGRAPHY - FONT SIZE & SCALE */ +/* HEADING */ +h1, h2, h3, h4, h5 { +--font-weight: 400; + font-weight : var(--font-weight); + position : relative; +} +h1,h2,h3 { + font-family: "Nunito", sans-serif; + font-optical-sizing: auto; + font-weight: 400; + font-style: normal; +} + +p { text-wrap: pretty } + +@media (min-width: 576px) { :root { --pico-font-size: 106.25%; } } +@media (min-width: 768px) { :root { --pico-font-size: 112.5%; /* 18px */}} +@media (min-width: 1024px) { :root { --pico-font-size: 1rem; }} +@media (min-width: 1280px) { :root { --pico-font-size: 1rem; }} +@media (min-width: 1536px) { :root { --pico-font-size: 112.5%; /* 18px */}} + +/* -------------------- WRAPPER - GRID */ +/* -------------------- MEDIA QUERIES - desktop, tablet, mobile + CSS override PicoSS rules and specificity */ +@media(max-width: 576px) { + [role=button], [type=button], [type=file]::file-selector-button, [type=reset], [type=submit], button { + --pico-form-element-spacing-horizontal: 1.5rem; + } + [role=group] [role=button], [role=group] [type=button], [role=group] [type=submit], [role=group] button, [role=search] [role=button], [role=search] [type=button], [role=search] [type=submit], [role=search] button { + --pico-form-element-spacing-horizontal: 1.5rem; + } +} +@media screen and (max-width: 1024px) { + body>main>aside#nav-left, body>main>aside#block-right { + --pico-font-size: 1rem; /* 16px - 18px picocss */ + font-size: var(--pico-font-size); + margin-top: 0; + } + [data-self~="sm-hide"] {display:none!important}/* only show icon and hide text */ + + aside#nav-left { + position: fixed; + top: 0; + left: 0; + width: 240px; + height: 100%; + padding: .25em var(--pico-block-spacing-horizontal); + background: var(--pico-card-background-color); + box-shadow: var(--pico-card-box-shadow); + overflow-y: auto; + z-index: var(--z-above); + } + aside#nav-left { + transform: translate3d(0, 0, 0) translateX(-240px); + transition: all 0.25s cubic-bezier(0.16, 0.63, 0.45, 0.98); + } + aside#nav-left:target { + transform: translate3d(0, 0, 0) translateX(0); + } + .nav-open { + display: block; + position:absolute; + left: 18px; + top: 10px; + } + aside#nav-left .nav-close { + display: block; + height: 36px; + display: block; + cursor: pointer; + position: sticky; + left: 180px; + top: 10px; + width: fit-content; + width: -moz-fit-content; + + z-index: var(--z-sticky); + } +} +@media(min-width: 1024px) { + html { + scroll-padding-top:calc(var(--pico-header-height) + 2rem - .375rem) + } + [data-self="sm-hide"] { + display: revert!important; /* show icon & show text */ + } + body>header>nav.nav-top{ + position: relative; + } + body>main { + grid-template-rows:auto 1fr; + grid-template-columns: 14rem 1fr; + grid-template-areas: "menu main" "menu block-right"; + -moz-column-gap: 2rem; + column-gap: 2rem; + row-gap: 2rem; + } + .nav-logo {margin-left:0} + .nav-open, + aside#nav-left .nav-close{display: none;} + aside#nav-left { + position:relative; + width: 220px; + } + body>main:has(aside#block-right) { + grid-template-rows: auto 1fr; + grid-template-columns: 14rem 1fr; + grid-template-areas: "menu main" "menu block-right" + } + body>main>aside#nav-left { + grid-area: menu + } + body>main>[role=main] { + grid-area: main + } + body>main>aside#block-right { + grid-area: block-right; + align-self: start /* Sticky in grid */ + } + body>main>aside#block-right { + position: sticky; + top: calc(var(--pico-main-top-offset) + var(--pico-block-spacing-vertical)/2); + max-height: calc(var(--max-height) - var(--pico-spacing)); + transition: top var(--pico-transition); + transition-delay: 50ms + } + body>main>nav[aria-label=breadcrumb] { + display: none + } + body>main>aside>nav { + margin-top: calc(var(--pico-block-spacing-vertical)/2) + } + body>main>hgroup { + grid-area: header; + margin-top: calc(var(--pico-block-spacing-vertical)/2) + } +} +@media(min-width: 1280px) { + body>main { + grid-template-rows:auto 1fr; + grid-template-columns: 14rem 1fr 14rem; + grid-template-areas: "menu main block-right" "menu main block-right"; + row-gap: 2rem; + } + body>main:has(aside#block-right) { + grid-template-rows: auto 1fr; + grid-template-columns: 14rem 1fr 15rem; + grid-template-areas: "menu main block-right" "menu main block-right" + } + body>main>aside#nav-left { + grid-area: menu + } + body>main>[role=main] { + grid-area: main + } + body>main>aside#block-right { + grid-area: block-right + } +} +@media(min-width: 1536px) { + body>main { + grid-template-rows:auto 1fr; + grid-template-columns: 16rem 1fr 16rem; + grid-template-areas: "menu main block-right" "menu main block-right"; + row-gap: 3rem; + } +} +/* GRID CUSTOM COLUMNS */ +/* @todo ?? */ +.grid-left, .grid-right, .grid-2, .grid-3 { + align-items : start; + display : grid; + grid-template-columns: 1fr; + column-gap : calc(var(--pico-spacing) * .5); + row-gap : calc(var(--pico-spacing) * .5); + margin : 0; +} +.flex-justify { + align-items : center; + display : flex; + justify-content : space-between; + flex-basis : auto; + flex-wrap : wrap; +} +@media (min-width: 1024px) { + .grid-main, .grid-left, .grid-right, .grid-2, .grid-3 { + align-items : baseline; + display : grid; + column-gap : calc(var(--pico-spacing) * 1); + row-gap : calc(var(--pico-spacing) * 1); + } + .grid-main { + grid-template-columns: 1fr 3fr; + grid-column-gap: 1rem; + grid-row-gap: 1rem; + } + .grid-left { grid-template-columns: 1fr 3fr; } + .grid-right { grid-template-columns: 3fr 1fr; } + .grid-2 { grid-template-columns: 1fr 1fr; } + .grid-3 { grid-template-columns: 1fr 1fr 1fr; } +} + +/* -------------------- MODULE CKEditor */ +/* BUTTON CKEditor forced fix button 📐*/ +:is([class^="cke_button"],[class^="cke_combo_button"] ) { + margin-left : 0!important; +} +/* fix extra space of combo dropdown */ +.cke_combo_on a.cke_combo_button, .cke_combo_off a.cke_combo_button:hover, .cke_combo_off a.cke_combo_button:focus, +.cke_combo_off a.cke_combo_button:active { + padding : 0!important; +} +/* CKEditor darkmode */ +:root[data-theme=dark] { + --cke-color : #fff; + --cke-background: #111;; + --cke-filter : invert(1) contrast(1.15); + --cke-editable : #1c212c; + --cke-inner : #181b25; +} +/* try to switch mode, fallback ?? */ +:root[data-theme=light] { + --no-var : #fff; +} +/* CKEditor darkmode rounded */ +:is([class^=cke_top],[class^=cke_bottom]) { + filter : var(--cke-filter, none); + border-color : transparent!important; + /* Prevent editor from overflow prent container */ + max-width : 100%; + border-radius : 8px; +} +:where(.cke_chrome) { + border : none!important; +} +.cke_inner { + display : block; + background : var(--cke-inner, var(--no-var), #999)!important; + border : 1px solid var(--cke-background, var(--no-var), #999)!important; + border-radius : 8px; +} +:where(.cke_contents){ + background : var(--cke-editable, var(--no-var), #999)!important; + color : var(--cke-color, var(--no-var))!important; + border-radius : 8px; +} +/* customize editable container */ +.cke_editable { + background : var(--cke-editable, var(--no-var)); + color : var(--no-var, #fff); + border-radius : 8px; + padding : 0.5rem; + cursor : text; + margin : 0.25rem; + width : auto; + min-height : calc(100vh - 1rem); +} +textarea.cke_source { + background : var( --cke-background, #fff); + color : var( --cke-color, #111); + padding : 0.5rem; +} +.cke_wysiwyg_frame, .cke_wysiwyg_div { + background : var(--cke-editable, var(--no-var))!important; + color : var(--cke-color, var(--no-var))!important; +} + + +/* -------------------- MODULE D3FORUM */ +/* Used in Dropdowm*/ +.author-info { + align-items : center; + display : flex; + flex-direction : column; + padding : .25em; +} +/* AUTHOR AVATAR */ +.avatar { + border : 2px solid var(--pico-border-color); + border-radius : 50%; + margin : 0 auto; +} +/* AUTHOR DROPDOWN */ +:is(.w96) { + width : 96px; + height : 96px; + } + +/* AVATAR css from x-layout */ +[data-self="radius-circle"] { border-radius: 50%} + +/* NAV POST TREE ORDER */ +nav.post-tree-order { + align-items : center; + display : flex; + flex-wrap : wrap; + justify-content : start; + padding : var(--pico-spacing); + width : 100%; +} +nav.post-tree-order a { + border-radius : var(--pico-border-radius); + padding : .25em; + margin-right : .5em; +} +nav.post-tree-order a:hover { + background : var(--pico-primary-focus); + color : var(--pico-secondary-inverse); +} +/* POST TREE */ +/* in main view, main list, comment list */ +ul.post-tree { + background : var(--pico-card-background-color); + border-radius : CALC(var(--pico-border-radius)*2); + margin-bottom : var(--pico-block-spacing-vertical); + padding : 1rem; +} +ul.post-tree li { + list-style : none; +} +li.post-tree-item { + align-items : center; + display : flex; + list-style : none; + margin : 0; /* NOTE The margin-left is auto-generated from template ! */ + padding : 0; +} +li.post-tree-item > span { + border-radius : var(--pico-border-radius); + padding : .25rem; +} + .post-tree-current > span { + background-color: var(--pico-form-element-selected-background-color); + border-radius : var(--pico-border-radius); +} +/* POST TREE DEPTH-IN-TREE */ +:is(ul.depth-in-tree) { + margin : 0; + padding : 0; +} +/* FORUM POST - CONTENT + SIGNATURE */ +.post-content { +} +.post-signature { + border-top : 1px solid var(--pico-blockquote-border-color); + margin-top : 1.5rem; +} + +/* FORUM - ICON LIST LEGEND */ +.forum-icon-list { + display : block; + list-style : none; + margin : 1em; + padding : 0; +} + +/* Following classes Using class badge */ +.post-vote, +.post-vote-count, +.post-vote-avg {} +.description {} + +/* ACTIVITY TOTAL POSTS, COMMENTS, VIEWS */ +.content-activity, +.forum-activity { + font-size : small; +} + +/* -------------------- MODULE PICO */ +article .header-image { + display : inline-block; + box-shadow : var(--pico-card-box-shadow); + height : 240px; + margin-top : calc(var(--pico-block-spacing-vertical) * -1.25); + margin-bottom : var(--pico-block-spacing-vertical); + object-fit : cover; + width : 100%; + border : 2px solid var(--pico-muted-color); + border-radius : var(--pico-border-radius); +} +/* Page list of contents H3 + icons folder, docs */ +article h3 :is(span[data-tooltip]) {font-size:16px;} +/* TAGS */ +article>footer>.content-tags { + color : var(--pico-code-value-color); + padding-top : 1rem; +} +/* POST OPTIONS */ +article > .content-filters, +article > .content-options, +article > .content-time, +article > .content-history { + background : none; + border : var(--pico-border); + border-radius : var(--pico-border-radius); + width : auto; + margin-bottom : var(--pico-grid-row-gap); +} +.content-filters >.filter > label { + display : flex; + justify-content : space-between; + flex-wrap : wrap; + align-content : center; + align-items : center; + flex-direction : row; + width : auto; +} +/* 🚧📐 div.category-sub:not(:last-child) ,*/ +:is(div.list-content):not(:only-of-type), +:is(div.list-content):not(:last-of-type), +:is(div.category-sub, div.category-forum):not(:only-of-type), +:is(div.category-sub, div.category-forum):not(:last-of-type){ + margin-bottom : var(--pico-typography-spacing-vertical); +} +:is(div.list-content):last-of-type {} + +/* WAITING CONTENT */ +:is(div.list-content) :where(em.warning) { + background : #f44336; + color : #fff; +} + + +/* -------------------- PAGE NAV - CONTENT PAGINATION */ +nav.page-nav div { + align-items : center; + display : flex; + justify-content : center; + flex-wrap : wrap; + justify-content : space-between; + padding : var(--pico-spacing); + margin-bottom : var(--pico-spacing); + width : 100%; +} +/* -------------------- PAGENAVI D3FORUM COMMENTS PAGINATION */ +nav.pagination { + display : flex; + margin : .5em 0; + flex-direction : row; + justify-content : flex-end; +} +ul.pagenavi li { + border : 0; + color : var(--pico-primary); + border : 1px solid var(--pico-muted-border-color); + border-radius : var(--pico-border-radius); + box-shadow : var(--pico-box-shadow); + padding : 0; + text-align : center; + user-select : none; + margin : 0 .25rem; + min-width : 4ch; +} +/* ul.pagenavi li:last-of-type { margin: 0} */ + +ul.pagenavi li:not([aria-current]) a { + background : var(--pico-form-element-background-color); + + margin : 0; + padding : .25rem .5rem; + width : 100%; +} + +ul.pagenavi li[aria-current] { + border-color : var(--pico-primary); + padding : .25rem .5rem; +} +ul.pagenavi li:not([aria-current]):hover a { + border-color : var(--pico-primary); + background : var(--pico-primary-focus); + color : var(--pico-secondary-inverse); + padding : .25rem .5rem; +} + +/* -------------------- MODULE SITEMAP */ +.grid-sitemap { + grid-column : 1 / 7; + display : grid; + grid-template-columns: repeat(auto-fit, minmax(200px, auto)); + justify-content : center; +} +.grid-map { + padding : 1rem 1rem 0; + grid-column : 1 / 7; + display : grid; + grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); + align-items : center; +} +.grid-map h1 { + font-size : 2rem +} +.grid-map .map iframe { border-radius: var(--pico-border-radius)} + +/* -------------------- SYSTEM Notification */ +/* Replacing older confirmMsg errorMsgg resultMsg msg-warning */ +.alert { + background : var(--pico-muted-border-color); + border-left : 3px solid; + border-color : var(--pico-border-color); + border-radius : var(--pico-border-radius); + padding : var(--pico-spacing); + margin : var(--pico-block-spacing-vertical) auto; +} +.error, +.warning { border-color: var(--pico-del-color) } +.success { border-color: var(--pico-ins-color) } +.info { border-color: var(--pico-code-color) } +.result { border-color: var(--pico-code-color) } + +/* -------------------- MODULE USER PROFILE AVATAR */ +/* Generate CSS Avatar Letter */ +.user-tab-avatar #avatar { +--avatar-size :96px; + background-size : 100% 100%; + background-position: 0px 0px,0px 0px,0px 0px,0px 0px,0px 0px; + background-image: repeating-linear-gradient(315deg, #00FFFF2E 92%, #073AFF00 100%),repeating-radial-gradient(75% 75% at 238% 218%, #00FFFF12 30%, #073AFF14 39%),radial-gradient(99% 99% at 109% 2%, #00C9FFFF 0%, #073AFF00 100%),radial-gradient(99% 99% at 21% 78%, #7B00FFFF 0%, #073AFF00 100%),radial-gradient(160% 154% at 711px -303px, #2000FFFF 0%, #073AFFFF 100%); + border-radius : 50%; + box-shadow : 2px 2px 2px #111; + height : var(--avatar-size); + margin : 20px 0; + text-align : center; + width : var(--avatar-size); +} +/* Avatar Letter */ +.user-tab-avatar #username { + font-size : 0; + display : block; + color : var(--pico-primary ); + position : relative; + line-height : 1; + text-transform : uppercase; + top : calc(var(--avatar-size) / 4); /* 25% of parent */ + transition : font-size 0.3s ease-in; + filter : drop-shadow(2px 2px 5px #010); /* drop-shadow(offset-x offset-y blur-radius color) */ +} +.user-tab-avatar #username::first-letter { + font-size : calc(var(--avatar-size) / 2); /* 50% of parent */ +} + +/* -------------------- MODULE MESSAGE & USER PROFILE */ +/* Note - Mail tab active overrides the default properties */ + +.mail-list-item { + border-bottom : 1px solid hsl(219, 17%, 21%); + line-height : 2.5rem; +} +.mail-list-avatar { + border-radius : 50%; + height : 24px; + margin : auto .25em; + width : 24px; + vertical-align : middle; +} +.mail-list-author { + width : 190px; +} +.mail-list-author input:disabled { + pointer-events: auto; + cursor: not-allowed; +} +.mail-list-subject { + font-size : 16px; + } +.mail-list-date { + font-size : small; + } +.mail-list-date { + font-size : small; +} +.mail-subject{} +.mail-to {} +.mail-from {} +.mail-date {} +.mail-content{} + +/* -------------------- SCROLL-TO-TOP */ +.scroll-top { + position : absolute; + top : 12rem; + right : 2rem; + bottom : 0; + pointer-events : none; + z-index : 9000; +} +.scroll-top #ntop-bg {fill: var(--pico-progress-background-color);} +.scroll-top #ntop-arrow {fill: var(--pico-primary-hover);} +.scroll-top a:hover #ntop-bg {fill: var(--pico-primary-hover-background);} +.scroll-top a:hover #ntop-arrow {fill: var(--pico-primary-inverse);} +.scroll-top a { + position : sticky; + top : -5rem; + width : 3rem; + height : 3rem; + margin-bottom : -5rem; + transform : translateY(100vh); + backface-visibility: hidden; + display : inline-block; + text-decoration : none; + user-select : none; + pointer-events : all; + outline : none; + overflow : hidden; + /* Style */ + box-shadow : var(--pico-box-shadow); + border : var(--pico-border-width) solid var(--pico-border-color); + border-radius : var(--pico-border-radius); +} +.scroll-top a svg { + display : block; + border-radius : var(--border-radius); + width : 100%; + height : 100%; +} +.scroll-top a svg path { + transition : all 0.1s; +} +.scroll-top a #ntop-arrow { + transform : scale(0.66); + transform-origin: center; +} +@media print { + .scroll-top { display: none !important; } +} + +/* -------------------- Animation / Transition */ +@keyframes bottom { + 0% { transform:translateY(10px); opacity:0; } + 100% { opacity:1; transform:none;} +} +@keyframes top { + 0% { transform:translateY(-10px); opacity:0; } + 100% { opacity:1; transform:none; } +} +@keyframes left { + 0% { transform:translateX(-10px); opacity:0; } + 100% { opacity:1; transform:none; } +} diff --git a/html/themes/pico-blue/templates/legacy/index.html b/html/themes/pico-blue/templates/legacy/index.html new file mode 100644 index 000000000..990cbd603 --- /dev/null +++ b/html/themes/pico-blue/templates/legacy/index.html @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/html/themes/pico-blue/templates/legacy/legacy_app_start_page.html b/html/themes/pico-blue/templates/legacy/legacy_app_start_page.html new file mode 100644 index 000000000..2e6f2a5bc --- /dev/null +++ b/html/themes/pico-blue/templates/legacy/legacy_app_start_page.html @@ -0,0 +1,103 @@ +<{* Dev-Mode Toggle *}> +<{if $xoops_isadmin}>
<{$smarty.template}>
<{/if}> + +
+ +

Welcome to <{$xoops_sitename}>

+

<{$xoops_meta_description}>

+ +

Getting started

+ +

Your website is preconfigured with default settings. + The backend administration provides a graphical user interface, also called control panel or admin dashboard, + to configure your website, install components, translation and localization.

+
+ +
+ General Settings +

The system module allows you to customize the general settings of your platform, such as the name and slogan of the site, + language and theme, or close your site and restrict access by user groups. +

Start Page or Module

+

You can modify this template "app_start_page.html”, or you can select a module as the starting point of your website.

+ <{if $xoops_isadmin}> +

Administration »» System »» Preferences ⭧

+ <{/if}> +
+ +
+ +
+ Closed for maintenance +
The site is currently closed for maintenance.
+

Maintenance mode allows you to close the site and display a custom notice to visitors.
+ You can also control who has access to your site when it is closed.

+

When you're ready to launch your site, simply go to System Preferences to open it to the public.

+ +
    +
  1. Maintenance Mode - Turn your site off?
    Select yes to turn your site off so that only users in selected groups have access to the site.
    2. +
  2. Maintenance Mode - Select groups
    Groups that are allowed to access while the site is turned off. Users in the default webmasters group are always granted access.
    3. +
  3. Maintenance Mode - Message
    The text that is displayed when closing the site.
    4. +
+

You can edit the Template site_closed.html" and customize the design to match your notice, maintenance, coming soon, etc.

+ <{if $xoops_isadmin}> +

Administration »» System »» Preferences »» "Maintenance mode-Turn your site off?" ⭧

+ <{/if}> +
+ +
+ +
+ User Groups Permissions +

You can assign users to multiple groups and easily grant access to content of modules and blocks. + The installation wizard creates the following system-required groups :

+
    +
  1. Webmasters (Administrators) +
  2. Registered Users (members) +
  3. Anonymous Users (Guests) +
+
Required user groups cannot be deleted !
+ You can create new groups and change permissions for each new group created.
+ <{if $xoops_isadmin}> +

Administration »» User Groups »» Preferences ⭧

+ <{/if}> +
+ +
+ +
+ Modules Preferences +

Modules also have their own settings, accessible from their "preferences" menu.

+

For example, the render module allows you to manage the meta data of your website, themes (general appearance of your website), and templates that shape the contents of modules and blocks.

+ <{if $xoops_isadmin}> +

Administration »» Render »» Preferences ⭧

+ <{/if}> +
+ +
+ +
+ Module Blocks +

When you install a module, its blocks are automatically added to the Block Management system. + These blocks often have their own functionality settings and customization templates.

+
On the frontend, click the three-dot dropdown menu to edit the block.
+

For example, the parameters of the "Main Menu" block allow you to display icons for each module and subcategories.

+ <{if $xoops_isadmin}> +

Administration »» System »» Block Management ⭧

+ <{/if}> +
+ +
+ +
+ Theme +

A theme consists of a single HTML file that can include components, a CSS stylesheet, JavaScript, modules, and block templates. On the frontend, the Themes block allows users to select their preferred theme. + You first need to enable the themes users can choose from, in Theme Management.

+
Learn more about the Theme Options - Custom Parameters link in the Theme Management
+ <{if $xoops_isadmin}> +

Administration »» System »» Theme Management ⭧

+ <{/if}> +
+ +
+ +
diff --git a/html/themes/pico-blue/templates/legacy/legacy_block_mainmenu.html b/html/themes/pico-blue/templates/legacy/legacy_block_mainmenu.html new file mode 100644 index 000000000..31c3b9bce --- /dev/null +++ b/html/themes/pico-blue/templates/legacy/legacy_block_mainmenu.html @@ -0,0 +1,31 @@ +<{if $xoops_isadmin}>
<{$smarty.template}>
<{/if}> + + diff --git a/html/themes/pico-blue/templates/legacy/legacy_block_search.html b/html/themes/pico-blue/templates/legacy/legacy_block_search.html new file mode 100644 index 000000000..c0eb26a27 --- /dev/null +++ b/html/themes/pico-blue/templates/legacy/legacy_block_search.html @@ -0,0 +1,15 @@ +<{* Dev-Mode Toggle *}> +<{if $xoops_isadmin}>
<{$smarty.template}>
<{/if}> + +
+
+ + + <{xoops_input type=hidden name=andor value=AND}> + <{xoops_input type=hidden name=action value=results}> + +
+

+ <{$smarty.const._MB_LEGACY_ADVS}> +

+
diff --git a/html/themes/pico-blue/templates/legacy/legacy_block_siteinfo.html b/html/themes/pico-blue/templates/legacy/legacy_block_siteinfo.html new file mode 100644 index 000000000..f0bb80cf2 --- /dev/null +++ b/html/themes/pico-blue/templates/legacy/legacy_block_siteinfo.html @@ -0,0 +1,30 @@ +<{* Dev-Mode Toggle *}> +<{if $xoops_isadmin}>
<{$smarty.template}>
<{/if}> + +
+<{if $block.showgroups == true}> + +<{/if}> + + + +
diff --git a/html/themes/pico-blue/templates/legacy/legacy_block_themes.html b/html/themes/pico-blue/templates/legacy/legacy_block_themes.html new file mode 100644 index 000000000..6eab64ac0 --- /dev/null +++ b/html/themes/pico-blue/templates/legacy/legacy_block_themes.html @@ -0,0 +1,37 @@ +<{* Dev-Mode Toggle *}> +<{if $xoops_isadmin}>
<{$smarty.template}>
<{/if}> + +<{if $block.isEnableChanger == false}> + <{$smarty.const._MB_LEGACY_MESSAGE_CAN_NOT_THEME_CHANGE}> +<{else}> + +
+ +
+ <{if $block.mode==1}> + <{$block.theme_selected_name}> + + + <{/if}> + <{foreach item=theme_option from=$block.theme_options}> + + <{/foreach}> + + +

<{''|cat:$block.count|cat:''|string_format:$smarty.const._MB_LEGACY_LANG_NUMTHEME}>

+ + <{if $block.mode==1}> +
+ <{/if}> + +
+
+ +<{/if}> + diff --git a/html/themes/pico-blue/templates/legacy/legacy_block_usermenu.html b/html/themes/pico-blue/templates/legacy/legacy_block_usermenu.html new file mode 100644 index 000000000..47bda4ab8 --- /dev/null +++ b/html/themes/pico-blue/templates/legacy/legacy_block_usermenu.html @@ -0,0 +1,47 @@ +<{* Dev-Mode Toggle +<{if $xoops_isadmin}>
<{$smarty.template}>
<{/if}>*}> +
+ <{$xoops_uname}> + <{$xoops_uname}> + +
diff --git a/html/themes/pico-blue/templates/legacy/legacy_redirect.html b/html/themes/pico-blue/templates/legacy/legacy_redirect.html new file mode 100644 index 000000000..08a4d0593 --- /dev/null +++ b/html/themes/pico-blue/templates/legacy/legacy_redirect.html @@ -0,0 +1,354 @@ + + + + + + +<{if !class_exists('AdelieDebug_Preload')}> + +<{/if}> +<{$xoops_sitename}> + + + + + + + + +
+
+

logo

+

<{$message}>

+ +

<{$lang_ifnotreload}>

+<{if class_exists('AdelieDebug_Preload')}> +

No automatic redirect during AdelieDebug execution.

+<{/if}> +
+
+ + + + + \ No newline at end of file diff --git a/html/themes/pico-blue/templates/legacy/legacy_redirect_function.html b/html/themes/pico-blue/templates/legacy/legacy_redirect_function.html new file mode 100644 index 000000000..8fab737e7 --- /dev/null +++ b/html/themes/pico-blue/templates/legacy/legacy_redirect_function.html @@ -0,0 +1,176 @@ + + + +<?php echo htmlspecialchars($xoopsConfig['sitename']); ?> + + + + + + +
+
+ Loading +
+
+
+
+
+

+

+
+ + diff --git a/html/themes/pico-blue/templates/legacy/legacy_site_closed.html b/html/themes/pico-blue/templates/legacy/legacy_site_closed.html new file mode 100644 index 000000000..67024c190 --- /dev/null +++ b/html/themes/pico-blue/templates/legacy/legacy_site_closed.html @@ -0,0 +1,257 @@ +<{php}> +ob_start(); +header('HTTP/1.1 503 Service Temporarily Unavailable'); +header('Status: 503 Service Temporarily Unavailable'); +header('Retry-After: 3600'); +header('X-Powered-By: XOOPSCube'); +ob_end_clean(); +ob_end_flush(); +<{/php}> + + + + + + +<{$xoops_sitename}> + + +<{* ----- Favicon SVG located in the root directory ----- *}> + + + + + + + +
+ +
+
+
+
+
+
+
+
+ +
+ + + +

Nature never rushes, yet everything gets done.

+ +
+ +
+
+ <{if $xoops_isuser}> +

<{$smarty.const._LOGOUT}>

+ <{else}> +
+

<{$lang_login}>

+

<{$lang_siteclosemsg}>

+
+
+
+ + + + +
+ <{/if}> + +
+
+ +
+<{* ---------- /top-container *}> + + diff --git a/html/themes/pico-blue/theme.html b/html/themes/pico-blue/theme.html new file mode 100644 index 000000000..74ac37d1c --- /dev/null +++ b/html/themes/pico-blue/theme.html @@ -0,0 +1,305 @@ + + + + + + + + <{$xoops_sitename}> - <{$xoops_pagetitle}> + + + + + + + + + + + + + + + + + + <{if $xoops_dirname == 'pico' && isset($content.ef.pico_img)}> + + <{else}> + + <{/if}> + + + + + + + + <{* ----- Browserconfig, Webmanifest, XML Sitemap located in the root directory ----- *}> + + + + <{* ----- Favicons THEME COLOR ----- *}> + + + + <{* ----- Favicon SVG - default /images/favicon ----- *}> + + <{* ----- Favicons located in the root directory ----- *}> + + + + + <{* ----- Resquesturi $xoops_requesturi : /module/dirname/id ----- *}> + + <{* ----- CSS - PicoCSS ----- *}> + + + + <{$xoops_module_header}> + + <{* ----- Defer preload of custom styles for jQuery UI, PrismJS ----- *}> + + + + + <{* ----- CSS - Theme ----- *}> + + <{* ----- CSS - Theme JSON ----- *}> + <{assign var="theme" value="`$xoops_imageurl`theme.json"}> + <{json file="$theme" theme="theme" local="true"}> + <{foreach item=theme key=key from=$theme}> + <{assign var='name' value=$theme->name}> + <{assign var='title' value=$theme->title}> + <{assign var='slogan' value=$theme->slogan}> + <{assign var='body' value=$theme->body}> + <{assign var='color' value=$theme->color}> + <{assign var='primary' value=$theme->primary}> + <{assign var='secondary' value=$theme->secondary}> + <{assign var='inverse' value=$theme->inverse}> + <{/foreach}> + <{* ----- CSS - MainMenu Active ----- *}> + + + +
+ +
+ +<{* REMOVE SMARTY COMMENTS TO DISPLAY IN TOPPAGE ONLY *}> +<{* if $xoops_is_top|default:'' *}> +<{include file="$xoops_theme/component/_inc_hero.html"}> +<{* /if *}> + + +<{* ----- TOPPAGE Center Blocks Title width prefix top- & none- (hide title) + Note : It's Center Block Left that triggers the top to display *}> +<{if !empty($xoops_clblocks)}> +<{foreach item=block from=$xoops_clblocks}> + <{if $block.title|strstr:"top-" && !$block.title|strstr:"hero"}> + <{include file="$xoops_theme/component/_inc_top_center.html"}> + <{/if}> +<{/foreach}> +<{/if}> + + + +<{* ----- Main *}> +
+ + <{if $xoops_showlblock==1}> + + <{/if}> + +
+
+ <{if !empty($xoops_contents)}> + <{$xoops_contents}> + <{else}> + <{include file='db:legacy_app_start_page.html'}> + <{/if}> +
+
+ + <{if $xoops_showrblock==1}> + + <{/if}> + +
+ +<{if $banner !=" "}> +
+
+
+ <{$xoops_banner}> +
+
+
+<{/if}> + +<{* ---------- CENTER BLOCKS *}> +<{if $xoops_showcblock==1}> +
+ +<{* ---------- BLOCK Center-Left *}> +<{if !empty($xoops_clblocks)}> +
+ <{foreach item=block from=$xoops_clblocks}> + <{if !$block.title|strstr:"admin" && !$block.title|strstr:"top" && !$block.title|strstr:"hero"}> +
+

+ <{if $xoops_isadmin}> + <{$block.title}> + <{include file="$xoops_theme/component/_inc_block_edit.html"}> + <{else}> + <{if !$block.title|strstr:"none"}><{$block.title}><{/if}> + <{/if}> +

+
<{$block.content}>
+
+ <{/if}> + <{/foreach}> +
+<{/if}> + +<{* ---------- BLOCK Center-Center *}> +<{if !empty($xoops_ccblocks)}> +
+ <{foreach item=block from=$xoops_ccblocks}> + <{if !$block.title|strstr:"admin" && !$block.title|strstr:"top" && !$block.title|strstr:"hero"}> +
+

+ <{if $xoops_isadmin}> + <{$block.title}> + <{include file="$xoops_theme/component/_inc_block_edit.html"}> + <{else}> + <{if !$block.title|strstr:"none"}><{$block.title}><{/if}> + <{/if}> +

+
<{$block.content}>
+
+ <{/if}> + <{/foreach}> +
+<{/if}> + +<{* ---------- BLOCK Center-Right *}> +<{if !empty($xoops_crblocks)}> +
+ <{foreach item=block from=$xoops_crblocks}> + <{if !$block.title|strstr:"admin" && !$block.title|strstr:"top" && !$block.title|strstr:"hero"}> +
+

+ <{if $xoops_isadmin}> + <{$block.title}> + <{include file="$xoops_theme/component/_inc_block_edit.html"}> + <{else}> + <{if !$block.title|strstr:"none"}><{$block.title}><{/if}> + <{/if}> +

+
<{$block.content}>
+
+ <{/if}> + <{/foreach}> +
+<{/if}> + +
+<{/if}> + +<{* ---------- Scroll to top *}> +
+ + + + + + +
+ +<{if $banner !=" "}> +
+
+ +
+
+<{/if}> + +
+ +<{* ---------- FOOTER CREDITS *}> + + +<{* ---------- ADMIN FRONT PANEL *}> +<{if $xoops_isadmin}> +<{include file="$xoops_theme/component/admin-panel.html"}> +<{/if}> + +<{* ---------- DO NOT DEFER Theme Plugins - LocalStoarage & SVG ! *}> + + +<{* ---------- PrismJS ----- *}> + + + \ No newline at end of file diff --git a/html/themes/pico-blue/theme.json b/html/themes/pico-blue/theme.json new file mode 100644 index 000000000..973c35db9 --- /dev/null +++ b/html/themes/pico-blue/theme.json @@ -0,0 +1,19 @@ +{ + "theme": [ + { + "name": "Pico Bleu", + "version": "2.4.0", + "date": "2024-04-20", + "author": "Nuno Luciano", + "title": "Your Dream, Your Legacy", + "slogan": "The greatest legacy that you will leave to your friends is your story.", + "body": "#13171f", + "color": "#c2c7d0", + "primary": "#3c71f7", + "secondary": "#969eaf", + "contrast": "#dfe3eb", + "inverse": "#000", + "muted": "#7b8495" + } + ] +} \ No newline at end of file diff --git a/html/themes/pico-green/.editorconfig b/html/themes/pico-green/.editorconfig new file mode 100644 index 000000000..4d87d9c2e --- /dev/null +++ b/html/themes/pico-green/.editorconfig @@ -0,0 +1,13 @@ +# editorconfig.org +# XCL 2.4.0 +# This file is for unifying the coding style for different editors and IDEs + +root = true + +[*] +charset = utf-8 +end_of_line = lf +insert_final_newline = true +indent_size = 4 +indent_style = space +trim_trailing_whitespace = true diff --git a/html/themes/pico-green/.gitignore b/html/themes/pico-green/.gitignore new file mode 100644 index 000000000..0903b73bc --- /dev/null +++ b/html/themes/pico-green/.gitignore @@ -0,0 +1,33 @@ +# XCL 2.4.0 +# OS or Editor folders +._* +.cache +.DS_Store +.idea +.project +.settings +.tmproj +*.esproj +*.sublime-project +*.sublime-workspace +nbproject +Thumbs.db +/.vscode/ + +# Numerous always-ignore extensions +*.diff +*.err +*.log +*.orig +*.rej +*.swo +*.swp +*.vi +*.zip +*~ + +# Folders to ignore +/node_modules/ + +# Pico +.pico diff --git a/html/themes/pico-green/CHANGELOG.md b/html/themes/pico-green/CHANGELOG.md new file mode 100644 index 000000000..accb690d4 --- /dev/null +++ b/html/themes/pico-green/CHANGELOG.md @@ -0,0 +1,30 @@ +# Change Log + +## XCL Theme Pico Green v.2.4.0 + +XCL Theme built with PicoCSS v2.0.6 + +All notable changes will be documented in this file. + +## [XCL Theme 240 ] 2024-04-20 + +- Add component block-center with Title prefix 'top-' +- Add condition to show Top Block-center (prefix 'top-none') +- Add daarkmode for CKEDITOR4 +- Update PicoCSS +- Update prefix CSS classes +- Update Templates +- Update jQuery UI theme built with CSS vars +- Theme style with customized CSS vars +- Fix Smarty logic in D3Forum and Pico +- Improved Pico's menu and TOC +- Smarty 2.6 fix isset and |default:'' + +## [XCL Pico 157 ] 2024-02-02 + +- Admin front panel block-right with Title prefix 'admin-' +- Load PicoCSS from theme folder +- Fix PHP8 warning errors related to Smarty +- Admin panel (using block-right with prefix 'admin-' in block-title) +- Banner placement and link to client +- Header UserMenu and Theme mode diff --git a/html/themes/pico-green/LICENSE.md b/html/themes/pico-green/LICENSE.md new file mode 100644 index 000000000..7341f375b --- /dev/null +++ b/html/themes/pico-green/LICENSE.md @@ -0,0 +1,22 @@ +MIT License + +Copyright (c) 2019-2024 Pico +Copyright (c) 2019-2024 Nuno Luciano, XCL Theme + +Permission is hereby granted, free of charge, to any person obtaining a copy +of this software and associated documentation files (the "Software"), to deal +in the Software without restriction, including without limitation the rights +to use, copy, modify, merge, publish, distribute, sublicense, and/or sell +copies of the Software, and to permit persons to whom the Software is +furnished to do so, subject to the following conditions: + +The above copyright notice and this permission notice shall be included in all +copies or substantial portions of the Software. + +THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR +IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, +FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE +AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER +LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, +OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE +SOFTWARE. diff --git a/html/themes/pico-green/component/_inc_block_edit.html b/html/themes/pico-green/component/_inc_block_edit.html new file mode 100644 index 000000000..5c93fb699 --- /dev/null +++ b/html/themes/pico-green/component/_inc_block_edit.html @@ -0,0 +1,27 @@ +<{assign var=admin_block_edit value="`$xoops_url`/modules/altsys/admin/index.php?mode=admin&lib=altsys&page=mytplsform&tpl_file="}> +<{assign var=admin_block_custom value="`$xoops_url`/modules/altsys/admin/index.php?mode=admin&lib=altsys&page=myblocksadmin&dirname=__CustomBlocks__&op=edit&bid="}> +
+ + + + + +
+ + + Edit B-<{$block.id}> + + + Clone Block + <{* if "" != $block.template *}> + <{if $block.template ne ""}> + + <{else}> + + <{/if}> + + + + Edit template +
+
diff --git a/html/themes/pico-green/component/_inc_hero.html b/html/themes/pico-green/component/_inc_hero.html new file mode 100644 index 000000000..dc1b82e8f --- /dev/null +++ b/html/themes/pico-green/component/_inc_hero.html @@ -0,0 +1,280 @@ + + + +
+ +
+ + + + + + + + +
+

<{$title}>

+

<{$slogan}>

+
+
+ +
+ + + + + + + + + + + + + + + + + + +
+
+
+
+
+
+
+
+ +
+ + +
+ + \ No newline at end of file diff --git a/html/themes/pico-green/component/_inc_nav_theme.html b/html/themes/pico-green/component/_inc_nav_theme.html new file mode 100644 index 000000000..cb8235205 --- /dev/null +++ b/html/themes/pico-green/component/_inc_nav_theme.html @@ -0,0 +1,8 @@ +
+ Theme + +
diff --git a/html/themes/pico-green/component/_inc_top_center.html b/html/themes/pico-green/component/_inc_top_center.html new file mode 100644 index 000000000..750d86eb6 --- /dev/null +++ b/html/themes/pico-green/component/_inc_top_center.html @@ -0,0 +1,146 @@ + + +<{if $xoops_showcblock==1}> +
+ +
+

<{$xoops_sitename}>

+

<{$xoops_slogan}>

+
+
+
+<{* ---------- BLOCK Center-Left *}> +<{if !empty($xoops_clblocks)}> +
+ <{foreach item=block from=$xoops_clblocks}> + <{if $block.title|strstr:"top-" && !$block.title|strstr:"hero"}> +
+

+ <{if $xoops_isadmin}> + <{$block.title}> + <{include file="$xoops_theme/component/_inc_block_edit.html"}> + <{else}> + <{if ! $block.title|strstr:"none"}><{$block.title|replace:'top-':''}><{/if}> + <{/if}> +

+
<{$block.content}>
+
+ <{/if}> + <{/foreach}> +
+<{/if}> + +<{* ---------- BLOCK Center-Center *}> +<{if !empty($xoops_ccblocks)}> +
+ <{foreach item=block from=$xoops_ccblocks}> + <{if $block.title|strstr:"top-" && !$block.title|strstr:"hero"}> +
+

+ <{if $xoops_isadmin}> + <{$block.title}> + <{include file="$xoops_theme/component/_inc_block_edit.html"}> + <{else}> + <{if ! $block.title|strstr:"none"}><{$block.title|replace:'top-':''}><{/if}> + <{/if}> +

+
<{$block.content}>
+
+ <{/if}> + <{/foreach}> +
+<{/if}> + +<{* ---------- BLOCK Center-Right *}> +<{if !empty($xoops_crblocks)}> +
+ <{foreach item=block from=$xoops_crblocks}> + <{if $block.title|strstr:"top-" && !$block.title|strstr:"hero"}> +
+

+ <{if $xoops_isadmin}> + <{$block.title}> + <{include file="$xoops_theme/component/_inc_block_edit.html"}> + <{else}> + <{if ! $block.title|strstr:"none"}><{$block.title|replace:'top-':''}><{/if}> + <{/if}> +

+
<{$block.content}>
+
+ <{/if}> + <{/foreach}> +
+<{/if}> + +
+ +
+<{/if}> \ No newline at end of file diff --git a/html/themes/pico-green/component/admin-panel.html b/html/themes/pico-green/component/admin-panel.html new file mode 100644 index 000000000..b3b68d380 --- /dev/null +++ b/html/themes/pico-green/component/admin-panel.html @@ -0,0 +1,237 @@ +<{* XCube Panel Options *}> + + + +
+
+ +
+
+ +<{* ----- RIGHT-SIDEBAR ----- *}> +
+ +
Control Panel + + + +
+ + <{* ----- RIGHT-PANEL-BLOCK ----- *}> +
+ + <{* ---------- Block-Right *}> + <{if $xoops_showrblock==1}> + <{foreach item=block from=$xoops_rblocks}> + <{if $block.title|strstr:"admin"}> +
+

+ <{* REMOVE 'admin-' FROM BLOCK-TITLE *}> + <{$block.title|replace:'admin-':''}> + <{include file="$xoops_theme/component/_inc_block_edit.html"}> +

+
<{$block.content}>
+
+ <{/if}> + <{foreachelse}> +
+ Add block with position block-right
+ and block-title with prefix admin- +
+ <{/foreach}> + <{/if}> + <{* ----- ADMIN PREVIEW ----- *}> +
Preview Layout
+
+ + + + +
+ +
+ <{* -----/ RIGHT-PANEL-BLOCK *}> + +
+<{* -----/ RIGHT-SIDEBAR *}> + diff --git a/html/themes/pico-green/component/block-left.html b/html/themes/pico-green/component/block-left.html new file mode 100644 index 000000000..dabcad9fe --- /dev/null +++ b/html/themes/pico-green/component/block-left.html @@ -0,0 +1,18 @@ +<{* ---------- Block-Left *}> +<{foreach item=block from=$xoops_lblocks}> +<{if !$block.title|strstr:"Topage" && !$block.title|strstr:"User" || !$block.id==28}> +
+

+ <{if $xoops_isadmin}> + <{$block.title|replace:' ':'-'}> + <{include file="$xoops_theme/component/_inc_block_edit.html"}> + <{else}> + <{if ! $block.title|strstr:"none"}><{$block.title}><{/if}> + <{/if}> +

+
+ <{$block.content}> +
+
+<{/if}> +<{/foreach}> diff --git a/html/themes/pico-green/component/block-right.html b/html/themes/pico-green/component/block-right.html new file mode 100644 index 000000000..1edb488a6 --- /dev/null +++ b/html/themes/pico-green/component/block-right.html @@ -0,0 +1,16 @@ +<{* ---------- Block-Right *}> +<{foreach item=block from=$xoops_rblocks}> +<{if !$block.title|strstr:"admin"}> +
+

+ <{if $xoops_isadmin}> + <{$block.title}> + <{include file="$xoops_theme/component/_inc_block_edit.html"}> + <{else}> + <{if ! $block.title|strstr:"none"}><{$block.title}><{/if}> + <{/if}> +

+
<{$block.content}>
+
+<{/if}> +<{/foreach}> diff --git a/html/themes/pico-green/css/dropdown.css b/html/themes/pico-green/css/dropdown.css new file mode 100644 index 000000000..6bd332f2b --- /dev/null +++ b/html/themes/pico-green/css/dropdown.css @@ -0,0 +1,91 @@ +/* +* XCL Theme Dropdown +* +* @version 2.4.0 +* @update 2024-04-20 +* @Date 2024-02-02 +* @author Nuno Luciano ( https://github.com/gigamaster ) +* @copyright (c) 2005-2024 The XOOPSCube Project, authors +* @license MIT +* @link https://github.com/xoopscube +*/ +/* -------------------- Dropdown Menu */ + +div.dropdown { + position : relative; + display : block; +} +div.dropdown a.dropdown-toggle:not(.ui-tabs-anchor) { + background : transparent; /*var(--background-color);*/ + border : none; + border-radius : var(--pico-border-radius); + box-shadow : none; + color : var(--pico-primary-color); + cursor : pointer; + display : block; + font : inherit; + margin : 0; + padding : 0 .25rem .25rem; + transition : all var(--transition-time) var(--transition-cube); +} +div.dropdown a.dropdown-toggle:hover:not(.ui-tabs-anchor) { + background : var(--primary-focus); /* link [div][a] */ + box-shadow : none; + color : var(--primary-hover); + background : var(--pico-primary-hover-background); + color : var(--pico-primary-inverse); +} +div.dropdown.isopen div.dropdown-content { + display : block; + z-index : var(--z-above); +} +div.dropdown-content { + background : var(--pico-form-element-background-color); + border : var(--pico-border-width) solid var(--pico-form-element-border-color); + border-radius : var(--pico-border-radius); + box-shadow : var(--pico-card-box-shadow); /* 0px 2px 4px 1px hsla(0, 0%, 0%, 0.74); */ + color : var(--pico-primary-color); + display : none; + + min-width : 190px; + padding : .5rem; + position : absolute; + right : -10px; + + text-align : left; + top : 100%; + transition : all var(--transition-time) var(--transition-cube); +} +@media (min-width: 992px) { + .dropdown-content { + right : 1px; /* Fix device Viewport */ + } +} +div.dropdown div.dropdown-content ul { + margin : 0; + padding : 0; + list-style : none; +} +div.dropdown div.dropdown-content ul li { + background : transparent; + padding : 0; + width : 100%; +} +/* Dropdown links */ +div.dropdown div.dropdown-content a { + border-radius : var(--pico-border-radius); + color : var(--pico-primary-color); + display : block; + font-size : 16px; + padding : calc(var(--pico-form-element-spacing-vertical)* .8) var(--pico-form-element-spacing-horizontal); + text-decoration : none; +} +/* Change color of dropdown links on hover */ +div.dropdown div.dropdown-content a:hover { + background : var(--pico-primary-hover-background); + color : var(--pico-primary-inverse); +} + +div.dropdown div.dropdown-content a > svg { + margin : var(--dropdown-icon-margin); +} diff --git a/html/themes/pico-green/css/index.html b/html/themes/pico-green/css/index.html new file mode 100644 index 000000000..990cbd603 --- /dev/null +++ b/html/themes/pico-green/css/index.html @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/html/themes/pico-green/css/jquery-ui.theme.css b/html/themes/pico-green/css/jquery-ui.theme.css new file mode 100644 index 000000000..9adef581c --- /dev/null +++ b/html/themes/pico-green/css/jquery-ui.theme.css @@ -0,0 +1,693 @@ +/* +* XCL Theme Jquery-UI for PicoCSS v206 +* +* @version 2.4.0 +* @update 2024-04-20 +* @date 2024-02-02 +* @author Nuno Luciano ( https://github.com/gigamaster ) +* @copyright (c) 2005-2024 The XOOPSCube Project, authors +* @license MIT +* @link https://github.com/xoopscube +*/ + +/* Component containers +----------------------------------*/ +.ui-dialog.ui-widget.ui-front { + background : var(--pico-form-element-background-color); + box-shadow : var(--pico-box-shadow ); + padding : calc(var(--block-spacing-horizontal) * 1); + border : var(--pico-border-width) solid var(--pico-form-element-border-color); + background-color: var(--pico-modal-overlay-background-color); + backdrop-filter : var(--pico-modal-overlay-backdrop-filter); + -webkit-backdrop-filter: var(--pico-modal-overlay-backdrop-filter); + +} +.ui-dialog-dragging > .ui-widget-header { + background: var(--pico-primary-background); +} +.ui-widget { + font-size : 1rem +} +.ui-widget .ui-widget { + font-size : 1rem +} +.ui-widget input, +.ui-widget select, +.ui-widget textarea, +.ui-widget button { + outline : none; + font-family : inherit; + font-size : 1rem +} +.ui-widget.ui-widget-content { + /* border : 1px solid var(--pico-form-element-border-color); */ + border : 1px solid transparent; + background : var(--pico-form-element-background-color); + border-radius : var(--pico-border-radius); + box-shadow : var(--pico-card-box-shadow); + margin : 0; +} + +.ui-widget-content { + background : var(--pico-form-element-background-color); + border : 1px solid var(--pico-form-element-border-color); + color : var(--pico-color); +} +.ui-widget-content a { + color : var(--pico-primary); +} +.ui-widget-header { + background : var(--pico-card-sectioning-background-color); + border : var(--pico-border-width) solid var(--pico-border-color); + border-radius : var(--pico-border-radius); + color : var(--pico-color); + font-weight : var(--pico-font-weight); + list-style : none; +} +/* custom spacing */ +:is(.ui-menu) li.ui-widget-header { + /* custom spacing */ + padding: .175em .5em; + border: 1px solid var(--pico-dropdown-border-color) +} +.ui-widget-header a { + color : var(--pico-color); +} + +/* Interaction states +----------------------------------*/ +.ui-state-default, +.ui-widget-content .ui-state-default, +.ui-widget-header .ui-state-default, +.ui-button, +/* greater specificity when clicked or hovered */ +html .ui-button.ui-state-disabled:hover, +html .ui-button.ui-state-disabled:active { + background-color: var(--pico-background-color); + border : 1px solid var(--pico-form-element-border-color); + color : var(--pico-contrast); + font : var(--pico-font-size); + font-weight : inherit; +} +.ui-state-default a, +.ui-state-default a:link, +.ui-state-default a:visited, +a.ui-button, +a:link.ui-button, +a:visited.ui-button, +.ui-button { + background-color: var(--pico-background-color); + border: 1px solid transparent; + color : var(--pico-primary); + text-decoration : none; +} +.ui-state-hover, +.ui-widget-content .ui-state-hover, +.ui-widget-header .ui-state-hover, +.ui-state-focus, +.ui-widget-content .ui-state-focus, +.ui-widget-header .ui-state-focus, +.ui-button:hover, +.ui-button:focus { + background : var(--pico-primary-hover-background); + border : 1px solid var(--pico-primary-hover-border); + color : var(--pico-color); + font-weight : inherit; + outline : none; +} +.ui-state-hover a, +.ui-state-hover a:hover, +.ui-state-hover a:link, +.ui-state-hover a:visited, +.ui-state-focus a, +.ui-state-focus a:hover, +.ui-state-focus a:link, +.ui-state-focus a:visited, +a.ui-button:hover, +a.ui-button:focus { + background : var(--pico-primary-hover-background); + border : 1px solid var(--pico-primary-hover-border); + color : var(--pico-primary-hover); + font : var(--pico-font-size); + font-weight : inherit; + text-decoration : none; + outline : none; +} +.ui-visual-focus { + box-shadow : var(--pico-primary-focus); +} +.ui-state-active, +.ui-widget-content .ui-state-active, +.ui-widget-header .ui-state-active, +a.ui-button:active, +.ui-button:active, +.ui-button.ui-state-active:hover { + background : var(--pico-primary-hover-background); + border : 1px solid var(--pico-primary-hover-border); + color : var(--pico-primary-inverse); + font-weight : inherit; + outline : none; +} +.ui-state-active a, +.ui-state-active a:link, +.ui-state-active a:visited, +:where(.dropdown-content):not(a.dropdown-item) { + border : 1px solid var(--pico-primary-hover-border); + color : var(--pico-primary-focus); +} +/* Checkbox */ +.ui-icon-background, +.ui-state-active .ui-icon-background { + background-color: var(--pico-primary-hover-background); + border : 1px solid var(--pico-primary-hover-border); +} + +/* Interaction Cues +----------------------------------*/ +.ui-state-highlight, +.ui-widget-content .ui-state-highlight, +.ui-widget-header .ui-state-highlight { + background : var(--pico-primary-hover-background); + border : 1px solid var(--pico-primary-hover-border); + color : var(--pico-primary-inverse); +} +.ui-state-checked { + background : var(--ui-state-checked-bg); + border : var(--ui-state-checked-border); +} +.ui-state-highlight a, +.ui-widget-content .ui-state-highlight a, +.ui-widget-header .ui-state-highlight a { + color : var(--pico-primary-inverse); +} +.ui-state-error, +.ui-widget-content .ui-state-error, +.ui-widget-header .ui-state-error { + background : var(--ui-state-error-bg); + border : 1px solid var(--pico-primary-hover-border); + color : var(--ui-state-error-color); +} +.ui-state-error a, +.ui-widget-content .ui-state-error a, +.ui-widget-header .ui-state-error a { + color : var(--ui-state-error-link); +} +.ui-state-error-text, +.ui-widget-content .ui-state-error-text, +.ui-widget-header .ui-state-error-text { + color : var(--ui-state-error-text); +} +.ui-priority-primary, +.ui-widget-content .ui-priority-primary, +.ui-widget-header .ui-priority-primary { + font-weight : inherit; +} +.ui-priority-secondary, +.ui-widget-content .ui-priority-secondary, +.ui-widget-header .ui-priority-secondary { + font-weight : inherit; + opacity : 0.7; +} +.ui-state-disabled, +.ui-widget-content .ui-state-disabled, +.ui-widget-header .ui-state-disabled { + background-image: none; + border : 1px solid var(--pico-muted-border-color); + opacity : 0.35; +} + +/* Icons +----------------------------------*/ +/* states and images - RELATIVE TO XCL /COMMON */ +.ui-icon { + width: 16px; + height: 16px; +} +.ui-icon, +.ui-widget-content .ui-icon { + background-image: url("../../../common/js/images/ui-icons_cccccc_256x240.png"); +} +.ui-widget-header .ui-icon { + background-image: url("../../../common/js/images/ui-icons_cccccc_256x240.png"); +} +.ui-state-hover .ui-icon, +.ui-state-focus .ui-icon, +.ui-button:hover .ui-icon, +.ui-button:focus .ui-icon { + background-image: url("../../../common/js/images/ui-icons_ffffff_256x240.png"); +} +.ui-state-active .ui-icon, +.ui-button:active .ui-icon { + background-image: url("../../../common/js/images/ui-icons_ffffff_256x240.png"); +} +.ui-state-highlight .ui-icon, +.ui-button .ui-state-highlight.ui-icon { + background-image: url("../../../common/js/images/ui-icons_ffffff_256x240.png"); +} +.ui-state-error .ui-icon, +.ui-state-error-text .ui-icon { + background-image: url("../../../common/js/images/ui-icons_ffffff_256x240.png"); +} +.ui-button .ui-icon { + background-image: url("../../../common/js/images/ui-icons_cccccc_256x240.png"); +} + + +/* Misc visuals +----------------------------------*/ + +/* Corner radius */ +.ui-corner-all, +.ui-corner-top, +.ui-corner-left, +.ui-corner-tl { + border-top-left-radius: var(--pico-border-radius); +} +.ui-corner-all, +.ui-corner-top, +.ui-corner-right, +.ui-corner-tr { + border-top-right-radius: var(--pico-border-radius); +} +.ui-corner-all, +.ui-corner-bottom, +.ui-corner-left, +.ui-corner-bl { + border-bottom-left-radius: var(--pico-border-radius); +} +.ui-corner-all, +.ui-corner-bottom, +.ui-corner-right, +.ui-corner-br { + border-bottom-right-radius: var(--pico-border-radius); +} + +/* Overlays */ +/*Applies 100% width & height dimensions to an overlay screen*/ +.ui-widget-overlay { + background : var(--ui-widget-overlay-bg); + backdrop-filter : var(--pico-modal-overlay-backdrop-filter); + opacity : .8; +} +/*Sets box-shadow x & y offset, blur radius and color.*/ +.ui-widget-shadow { + box-shadow : var(--ui-widget-shadow); +} + +/* Accordion +----------------------------------*/ +.ui-accordion .ui-accordion-header { + background : var(--pico-background-color); + border : 1px solid var(--pico-accordion-border-color); + border-radius : var(--pico-border-radius); + box-shadow : var(--pico-box-shadow); + cursor : pointer; + display : block; + margin : var(--accordion-margin); + outline : 0; + margin-bottom : .15em; + padding : .5em; + position : relative; + -moz-user-select: none; + user-select : none; + transition : background-color var(--pico-transition); + +} +.ui-accordion .ui-accordion-content { + background : var(--pico-dropdown-background-color); + border : var(--pico-border-width) solid var(--pico-dropdown-border-color); + border-top : 0; + border-radius : var(--pico-border-radius); + color : var(--pico-color); + padding : var(--pico-form-element-spacing-vertical) var(--pico-form-element-spacing-horizontal); + overflow : auto; + transition: opacity var(--pico-transition), transform 0s ease-in-out 1s; +} +:is(.ui-accordion-header-active):not([aria-selected="false"][aria-expanded="false"]) { + color:var(--pico-primary-color); +} +:is(.ui-accordion-header):not([aria-selected="true"][aria-expanded="true"]) { + color:var(--pico-secondary); +} + +/* UI-MENU */ +.ui-menu { + background : var(--pico-form-element-background-color); + border : var(--pico-border-width) solid var(--pico-form-element-border-color); + border-radius : var(--pico-border-radius); + display : block; + list-style : none!important; + margin : var(--ui-menu-margin); + /* Override jQuery-UI css value */ + outline : 0; + padding:5px; + -moz-user-select: none; + user-select: none; +} +.ui-menu .ui-menu { + /* IMPORTANT override ui-widget-content */ + background : var(--pico-form-element-background-color); + border : var(--pico-border-width) solid var(--pico-form-element-border-color); + border-radius : var(--pico-border-radius); + position : absolute; + -moz-user-select: none; + user-select: none; +} +.ui-menu .ui-menu-item-wrapper { + background : inherit; + border : 1px solid transparent; + border-radius : var(--pico-border-radius); + color : var(--pico-color); + padding : .125em .25em; + /* position: relative;*/ +} +.ui-menu-icons { + position: relative +} +.ui-menu-icons .ui-menu-item-wrapper { + padding-left: 1.5em +} +.ui-menu .ui-icon { + position: absolute; + top: 0; + bottom: 0; + left: .2em; + margin: auto 0 +} +.ui-menu .ui-menu-icon { + left: auto; + right: 0 +} +.ui-menu .ui-state-focus, +.ui-menu .ui-state-active { + /* IMPORTANT override default UI properties */ + background : var(--pico-primary-hover-background); + border : 1px solid var(--pico-primary-hover-border); + border-radius : var(--pico-border-radius); + color : var(--pico-primary-inverse); + margin : 0; +} + +.ui-button:not(.ui-spinner-button,.ui-dialog-titlebar-close,.ui-controlgroup-item), +.ui-button:link, +.ui-button:visited { +--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)); + background-color: var(--pico-background-color); + border: var(--pico-border-width) solid var(--pico-border-color); + border-radius: var(--pico-border-radius); + box-shadow: var(--pico-box-shadow); + color: var(--pico-color); + cursor: pointer; + font-weight: var(--pico-font-weight); + font-size: var(--pico-font-size); + line-height: var(--pico-line-height); + outline: 0; + padding: var(--pico-form-element-spacing-vertical) var(--pico-form-element-spacing-horizontal); + text-align: center; + text-decoration: none; + -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); +} +.ui-button:hover { +--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); +} +/* +ref: https://api.jquery.com/first/ +*/ +:is(.ui-selectmenu-button.ui-button) { + padding : var(--pico-form-element-spacing-vertical) var(--pico-form-element-spacing-horizontal); + margin-bottom : var(--pico-spacing); + background-color: var(--pico-form-element-background-color); + border : var(--pico-border-width) solid var(--pico-form-element-border-color); + border-radius : var(--pico-border-radius); + box-shadow : var(--pico-button-hover-box-shadow, 0 0 0 rgba(0, 0, 0, 0.2)); + color : var(--pico-form-element-placeholder-color); + cursor : pointer; + height : calc(1rem* var(--pico-line-height) + var(--pico-form-element-spacing-vertical)* 2 + var(--pico-border-width)* 2); + line-height : inherit; + text-align : left; + -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); +} +:is(.ui-selectmenu-button-open.ui-button) { +background-color: var(--pico-form-element-background-color); +border : var(--pico-border-width) solid var(--pico-form-element-border-color); +color : var(--pico-form-element-placeholder-color); +} +.ui-selectmenu-menu .ui-menu .ui-selectmenu-optgroup { + font-weight : var(--pico-font-weight); + margin : 0; +} +.ui-controlgroup-horizontal:first-child .ui-controlgroup-item:nth-of-type(1), +.ui-controlgroup-horizontal > .ui-selectmenu-button { + border-top-left-radius: var(--pico-border-radius) !important; + border-bottom-left-radius: var(--pico-border-radius) !important; +} +.ui-controlgroup-horizontal .ui-controlgroup-item:last-child { + border-top-right-radius: var(--pico-border-radius) !important; + border-bottom-right-radius: var(--pico-border-radius) !important; +} +.ui-controlgroup-vertical .ui-controlgroup-item:first-child, +.ui-controlgroup-vertical .ui-selectmenu-button { + border-top-left-radius: var(--pico-border-radius) !important; + border-top-right-radius: var(--pico-border-radius) !important; +} +.ui-controlgroup-vertical .ui-controlgroup-item:last-child { + border-bottom-left-radius: var(--pico-border-radius); + border-bottom-right-radius: var(--pico-border-radius) !important; +} +.ui-controlgroup { + display : inline-block; + vertical-align : middle; +} +:where(.ui-controlgroup ) .ui-controlgroup-item:not(.ui-spinner) { + background : var(--pico-background-color); + border : var(--pico-border-width) solid var(--pico-form-element-border-color); + color : var(--pico-color); + padding : var(--pico-form-element-spacing-vertical) var(--pico-form-element-spacing-horizontal); + margin : 0; +} +.ui-controlgroup .ui-controlgroup-label span { + font-size : 1rem; + color : var(--pico-primary); +} +.ui-controlgroup-horizontal .ui-controlgroup-label + .ui-controlgroup-item { + border-left : var(--pico-border-width) solid var(--pico-accordion-border-color); +} + +/* RESET BROWSER SPINNER */ +input::-webkit-outer-spin-button, +input::-webkit-inner-spin-button { +display: none; +-webkit-appearance: none; +margin: 0; /* reset margin */ +outline: none; +} +input[type=number] { +-moz-appearance:textfield; /* Firefox */ +} +.ui-spinner-input { + -webkit-appearance: none; + -moz-appearance: textfield; + appearance: none; + border: var(--pico-border-width) solid var(--pico-form-element-border-color); + border-radius: var(--pico-border-radius); + margin: 0!important; + padding-right: 30px!important; + min-width: 8ch; + text-align: center; + vertical-align: middle; + outline: none; +} +.ui-spinner-input:focus{outline:none;box-shadow: 0 0 0 var(--pico-outline-width) var(--pico-primary-focus);} +.ui-spinner a.ui-spinner-button { + position: absolute; + height: 28px!important; + background: var(--pico-primary-underline); +} +.ui-spinner a.ui-spinner-button:hover{ +background: var(--pico-primary-hover-background); +} + +/* CHECKBOX + icon */ +.ui-checkboxradio-label .ui-icon-background { +--pico-background-color: var(--pico-primary-background); +--pico-border-color: var(--pico-primary-border); + -webkit-appearance: none; + -moz-appearance: none; + appearance: none; + accent-color : var(--pico-primary); + background : var(--pico-form-element-border-color); + border : 2px solid var(--pico-form-element-border-color); + border-radius : 3px; + box-shadow : var(--ui-state-check-shadow); + background-position: center; + background-size : .75em auto; + background-repeat: no-repeat; +} +/* RADIO */ +.ui-checkboxradio-radio-label .ui-icon-background { + background : white; + border : 8px solid var(--pico-form-element-border-color); + border-radius : 50%; + box-shadow : var(--ui-state-check-shadow); + height : var(--ui-state-check-height); + width : var(--ui-state-check-width); +} +.ui-checkboxradio-radio-label.ui-checkboxradio-checked .ui-icon, +.ui-checkboxradio-radio-label.ui-checkboxradio-checked:hover .ui-icon { + background-image: var(--pico-icon-checkbox); + background : white; + cursor : pointer; +} + +.ui-datepicker table { + font-size : 16px; +} +.ui-datepicker .ui-datepicker-prev, +.ui-datepicker .ui-datepicker-next{ + border : 1px solid transparent; + position : absolute; + top : 2px; + width : 1.8em; + height : 1.8em +} +.ui-datepicker .ui-datepicker-prev-hover, +.ui-datepicker .ui-datepicker-next-hover{ + top:2px +} +.ui-datepicker .ui-datepicker-prev{ + left:2px +} +.ui-datepicker .ui-datepicker-next{ + right:2px +} +.ui-datepicker .ui-datepicker-prev-hover{ + left:2px +} +.ui-datepicker .ui-datepicker-next-hover{ + right:2px +} +.ui-datepicker .ui-datepicker-prev span, +.ui-datepicker .ui-datepicker-next span{ + display:block; + position:absolute; + left:50%; + margin-left:-8px; + top:50%; + margin-top:-8px +} +.ui-datepicker .ui-datepicker-title{ + margin:0 2.3em; + line-height:1.8em; + text-align:center +} + +.ui-progressbar { + height : var(--ui-progressbar-height); +} +.ui-progressbar .ui-progressbar-value { + background : var(--ui-progressbar-value); +} + + +/* -------------------- -------------------- jQUERY UI TAB */ +.ui-tabs { + position : relative; + border : none; + border-radius : var(--pico-border-radius); + margin : 0; + padding:0.875rem; + list-style : none; +} +.ui-tabs .ui-tabs-nav { + margin : 0; + padding : .2em .2em 0; +} +/* The list of tabs */ +.ui-tabs .ui-tabs-nav { + background : transparent; + border : none; + border-top-left-radius : var(--pico-border-radius); + border-top-right-radius : var(--pico-border-radius); + box-shadow : var(--pico-box-shadow); + cursor : pointer; + display : inline-block; + line-height : 1.25; +} +.ui-tabs .ui-tabs-nav li { + /* border: 1px solid var(--pico-primary-underline); */ + list-style: none; + float: left; + position: relative; + top: 0; + margin: 0; + white-space: nowrap; +} +/* The anchors used to switch panels. */ +.ui-tabs .ui-tabs-nav .ui-tabs-anchor { + /* background : var(--pico-primary-underline); */ + background : transparent; + color : var(--pico-primary); + float : left; + text-decoration : none; +} +/* li .ui-tabs-anchor:first-child { +border-top-left-radius: var(--pico-border-radius); +} +li .ui-tabs-anchor:last-child { + border-top-right-radius: var(--pico-border-radius); +} */ + +.ui-tabs .ui-tabs-nav li.ui-tabs-active { + margin-bottom: 0; + padding-bottom: 0; + border-radius: var(--pico-border-radius); + border:none; +} +:is(.ui-tabs-tab).ui-state-default,.ui-state-default{ + border-radius: var(--pico-border-radius); +} +.ui-tabs-collapsible .ui-tabs-nav li.ui-tabs-active .ui-tabs-anchor { + cursor: pointer; +} +.ui-tabs .ui-tabs-nav .ui-tabs-anchor:hover, +.ui-tabs .ui-tabs-nav li.ui-tabs-active .ui-tabs-anchor { + background : var(--pico-primary-hover-background); + color : var(--pico-contrast); +} + +:where(li.ui-tabs-tab, a.ui-tabs-anchor):first-child {border-top-left-radius: var(--pico-border-radius)} +:where(li.ui-tabs-tab, a.ui-tabs-anchor):last-child {border-top-right-radius: var(--pico-border-radius)} +.ui-tabs .ui-tabs-panel { + background : var(--pico-card-background-color); + display : block; + border : var(--ui-tab-panel-border); + padding : var(--pico-block-spacing-vertical) var(--pico-block-spacing-horizontal); +} + +/* CUSTOMIZED content loading via an Ajax call will have the ui-tabs-loading class. */ +.ui-tabs-loading { + border : var(--ui-tabs-loading); /* TODO */ +} + +/* -------------------- jQUERY UI Tooltip */ +/*.ui-tooltip { + padding: 8px; + position: absolute; + z-index: 9999; + max-width: 300px; +} +body .ui-tooltip { + border-width: 2px; +}*/ diff --git a/html/themes/pico-green/css/pico.green.min.css b/html/themes/pico-green/css/pico.green.min.css new file mode 100644 index 000000000..e5023f086 --- /dev/null +++ b/html/themes/pico-green/css/pico.green.min.css @@ -0,0 +1,4 @@ +@charset "UTF-8";/*! + * Pico CSS ✨ v2.0.6 (https://picocss.com) + * Copyright 2019-2024 - Licensed under MIT + */:root{--pico-font-family-emoji:"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";--pico-font-family-sans-serif:system-ui,"Segoe UI",Roboto,Oxygen,Ubuntu,Cantarell,Helvetica,Arial,"Helvetica Neue",sans-serif,var(--pico-font-family-emoji);--pico-font-family-monospace:ui-monospace,SFMono-Regular,"SF Mono",Menlo,Consolas,"Liberation Mono",monospace,var(--pico-font-family-emoji);--pico-font-family:var(--pico-font-family-sans-serif);--pico-line-height:1.5;--pico-font-weight:400;--pico-font-size:100%;--pico-text-underline-offset:0.1rem;--pico-border-radius:0.25rem;--pico-border-width:0.0625rem;--pico-outline-width:0.125rem;--pico-transition:0.2s ease-in-out;--pico-spacing:1rem;--pico-typography-spacing-vertical:1rem;--pico-block-spacing-vertical:var(--pico-spacing);--pico-block-spacing-horizontal:var(--pico-spacing);--pico-grid-column-gap:var(--pico-spacing);--pico-grid-row-gap:var(--pico-spacing);--pico-form-element-spacing-vertical:0.75rem;--pico-form-element-spacing-horizontal:1rem;--pico-group-box-shadow:0 0 0 rgba(0, 0, 0, 0);--pico-group-box-shadow-focus-with-button:0 0 0 var(--pico-outline-width) var(--pico-primary-focus);--pico-group-box-shadow-focus-with-input:0 0 0 0.0625rem var(--pico-form-element-border-color);--pico-modal-overlay-backdrop-filter:blur(0.375rem);--pico-nav-element-spacing-vertical:1rem;--pico-nav-element-spacing-horizontal:0.5rem;--pico-nav-link-spacing-vertical:0.5rem;--pico-nav-link-spacing-horizontal:0.5rem;--pico-nav-breadcrumb-divider:">";--pico-icon-checkbox:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(255, 255, 255)' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");--pico-icon-minus:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(255, 255, 255)' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='5' y1='12' x2='19' y2='12'%3E%3C/line%3E%3C/svg%3E");--pico-icon-chevron:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(136, 145, 164)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");--pico-icon-date:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(136, 145, 164)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='18' rx='2' ry='2'%3E%3C/rect%3E%3Cline x1='16' y1='2' x2='16' y2='6'%3E%3C/line%3E%3Cline x1='8' y1='2' x2='8' y2='6'%3E%3C/line%3E%3Cline x1='3' y1='10' x2='21' y2='10'%3E%3C/line%3E%3C/svg%3E");--pico-icon-time:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(136, 145, 164)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cpolyline points='12 6 12 12 16 14'%3E%3C/polyline%3E%3C/svg%3E");--pico-icon-search:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(136, 145, 164)' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'%3E%3C/circle%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'%3E%3C/line%3E%3C/svg%3E");--pico-icon-close:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(136, 145, 164)' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='18' y1='6' x2='6' y2='18'%3E%3C/line%3E%3Cline x1='6' y1='6' x2='18' y2='18'%3E%3C/line%3E%3C/svg%3E");--pico-icon-loading:url("data:image/svg+xml,%3Csvg fill='none' height='24' width='24' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg' %3E%3Cstyle%3E g %7B animation: rotate 2s linear infinite; transform-origin: center center; %7D circle %7B stroke-dasharray: 75,100; stroke-dashoffset: -5; animation: dash 1.5s ease-in-out infinite; stroke-linecap: round; %7D @keyframes rotate %7B 0%25 %7B transform: rotate(0deg); %7D 100%25 %7B transform: rotate(360deg); %7D %7D @keyframes dash %7B 0%25 %7B stroke-dasharray: 1,100; stroke-dashoffset: 0; %7D 50%25 %7B stroke-dasharray: 44.5,100; stroke-dashoffset: -17.5; %7D 100%25 %7B stroke-dasharray: 44.5,100; stroke-dashoffset: -62; %7D %7D %3C/style%3E%3Cg%3E%3Ccircle cx='12' cy='12' r='10' fill='none' stroke='rgb(136, 145, 164)' stroke-width='4' /%3E%3C/g%3E%3C/svg%3E")}@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.contrast,a.secondary{--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}tfoot td,tfoot th,thead td,thead th{--pico-font-weight:600;--pico-border-width:0.1875rem}code,kbd,pre,samp{--pico-font-family:var(--pico-font-family-monospace)}kbd{--pico-font-weight:bolder}:where(select,textarea),input:not([type=submit],[type=button],[type=reset],[type=checkbox],[type=radio],[type=file]){--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=group]:has(button.secondary:focus,[type=submit].secondary:focus,[type=button].secondary:focus,[role=button].secondary:focus),[role=search]: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=group]:has(button.contrast:focus,[type=submit].contrast:focus,[type=button].contrast:focus,[role=button].contrast:focus),[role=search]: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=group] [role=button],[role=group] [type=button],[role=group] [type=submit],[role=group] button,[role=search] [role=button],[role=search] [type=button],[role=search] [type=submit],[role=search] 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)}:root:not([data-theme=dark]),[data-theme=light]{--pico-background-color:#fff;--pico-color:#373c44;--pico-text-selection-color:rgba(71, 164, 23, 0.25);--pico-muted-color:#646b79;--pico-muted-border-color:#e7eaf0;--pico-primary:#33790f;--pico-primary-background:#398712;--pico-primary-border:var(--pico-primary-background);--pico-primary-underline:rgba(51, 121, 15, 0.5);--pico-primary-hover:#265e09;--pico-primary-hover-background:#33790f;--pico-primary-hover-border:var(--pico-primary-hover-background);--pico-primary-hover-underline:var(--pico-primary-hover);--pico-primary-focus:rgba(71, 164, 23, 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:var(--pico-background-color);--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}:root:not([data-theme=dark]) input:is([type=submit],[type=button],[type=reset],[type=checkbox],[type=radio],[type=file]),[data-theme=light] 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(78, 179, 27, 0.1875);--pico-muted-color:#7b8495;--pico-muted-border-color:#202632;--pico-primary:#4eb31b;--pico-primary-background:#398712;--pico-primary-border:var(--pico-primary-background);--pico-primary-underline:rgba(78, 179, 27, 0.5);--pico-primary-hover:#5dd121;--pico-primary-hover-background:#409614;--pico-primary-hover-border:var(--pico-primary-hover-background);--pico-primary-hover-underline:var(--pico-primary-hover);--pico-primary-focus:rgba(78, 179, 27, 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(78, 179, 27, 0.1875);--pico-muted-color:#7b8495;--pico-muted-border-color:#202632;--pico-primary:#4eb31b;--pico-primary-background:#398712;--pico-primary-border:var(--pico-primary-background);--pico-primary-underline:rgba(78, 179, 27, 0.5);--pico-primary-hover:#5dd121;--pico-primary-hover-background:#409614;--pico-primary-hover-border:var(--pico-primary-hover-background);--pico-primary-hover-underline:var(--pico-primary-hover);--pico-primary-focus:rgba(78, 179, 27, 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)}[type=checkbox],[type=radio],[type=range],progress{accent-color:var(--pico-primary)}*,::after,::before{box-sizing:border-box;background-repeat:no-repeat}::after,::before{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}body{width:100%;margin:0}main{display:block}body>footer,body>header,body>main{padding-block:var(--pico-block-spacing-vertical)}section{margin-bottom:var(--pico-block-spacing-vertical)}.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{grid-column-gap:var(--pico-grid-column-gap);grid-row-gap:var(--pico-grid-row-gap);display:grid;grid-template-columns:1fr}@media (min-width:768px){.grid{grid-template-columns:repeat(auto-fit,minmax(0%,1fr))}}.grid>*{min-width:0}.overflow-auto{overflow:auto}b,strong{font-weight:bolder}sub,sup{position:relative;font-size:.75em;line-height:0;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.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) * .25)}:where(dl,ol,ul) :where(dl,ol,ul){margin:0;margin-top:calc(var(--pico-typography-spacing-vertical) * .25)}ul li{list-style:square}mark{padding:.125rem .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:.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) * .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)}:where(a:not([role=button])),[role=link]{--pico-color:var(--pico-primary);--pico-background-color:transparent;--pico-underline:var(--pico-primary-underline);outline:0;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{margin:0;overflow:visible;font-family:inherit;text-transform:none}[type=button],[type=reset],[type=submit],button{-webkit-appearance:button}[role=button],[type=button],[type=file]::file-selector-button,[type=reset],[type=submit],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:0;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)}[role=button]:is(:hover,:active,:focus),[role=button]:is([aria-current]:not([aria-current=false])),[type=button]:is(:hover,:active,:focus),[type=button]:is([aria-current]:not([aria-current=false])),[type=file]::file-selector-button:is(:hover,:active,:focus),[type=file]::file-selector-button:is([aria-current]:not([aria-current=false])),[type=reset]:is(:hover,:active,:focus),[type=reset]:is([aria-current]:not([aria-current=false])),[type=submit]:is(:hover,:active,:focus),[type=submit]:is([aria-current]:not([aria-current=false])),button:is(:hover,:active,:focus),button:is([aria-current]:not([aria-current=false])){--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)}[role=button]:focus,[role=button]: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,[type=reset]:focus,[type=reset]:is([aria-current]:not([aria-current=false])):focus,[type=submit]:focus,[type=submit]:is([aria-current]:not([aria-current=false])):focus,button:focus,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=button],[type=reset],[type=submit]{margin-bottom:var(--pico-spacing)}:is(button,[type=submit],[type=button],[role=button]).secondary,[type=file]::file-selector-button,[type=reset]{--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=file]::file-selector-button:is([aria-current]:not([aria-current=false]),:hover,:active,:focus),[type=reset]: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=file]::file-selector-button:focus,[type=file]::file-selector-button:is([aria-current]:not([aria-current=false])):focus,[type=reset]:focus,[type=reset]: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:.5;pointer-events:none}:where(table){width:100%;border-collapse:collapse;border-spacing:0;text-indent:0}td,th{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 td,tfoot th{border-top:var(--pico-border-width) solid var(--pico-table-border-color);border-bottom:0}table.striped tbody tr:nth-child(odd) td,table.striped tbody tr:nth-child(odd) th{background-color:var(--pico-table-row-stripped-background-color)}: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,kbd,pre,samp{font-size:.875em;font-family:var(--pico-font-family)}pre code{font-size:inherit;font-family:inherit}pre{-ms-overflow-style:scrollbar;overflow:auto}code,kbd,pre{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:.375rem}pre{display:block;margin-bottom:var(--pico-spacing);overflow-x:auto}pre>code{display:block;padding:var(--pico-spacing);background:0 0;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{display:block;margin:0;padding:0}figure figcaption{padding:calc(var(--pico-spacing) * .5) 0;color:var(--pico-muted-color)}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}input,optgroup,select,textarea{margin:0;font-size:1rem;line-height:var(--pico-line-height);font-family:inherit;letter-spacing:inherit}input{overflow:visible}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:0}:-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}fieldset legend,label{display:block;margin-bottom:calc(var(--pico-spacing) * .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) * .5)}button[type=submit],input:not([type=checkbox],[type=radio]),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:0;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)}:where(select,textarea):not([readonly]):is(:active,:focus),input:not([type=submit],[type=button],[type=reset],[type=checkbox],[type=radio],[readonly]):is(:active,:focus){--pico-background-color:var(--pico-form-element-active-background-color)}:where(select,textarea):not([readonly]):is(:active,:focus),input:not([type=submit],[type=button],[type=reset],[role=switch],[readonly]):is(:active,:focus){--pico-border-color:var(--pico-form-element-active-border-color)}:where(select,textarea):not([readonly]):focus,input:not([type=submit],[type=button],[type=reset],[type=range],[type=file],[readonly]):focus{--pico-box-shadow:0 0 0 var(--pico-outline-width) var(--pico-form-element-focus-color)}:where(fieldset[disabled]) :is(input:not([type=submit],[type=button],[type=reset]),select,textarea),input:not([type=submit],[type=button],[type=reset])[disabled],label[aria-disabled=true],select[disabled],textarea[disabled]{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 .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 .75rem}input::-webkit-input-placeholder,input::placeholder,select:invalid,textarea::-webkit-input-placeholder,textarea::placeholder{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 .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 .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 .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) * -.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) * .25)}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:-.125em;margin-inline-end:.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:.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:.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:.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 .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:active[aria-invalid=true],[type=checkbox]:checked:focus[aria-invalid=true],[type=checkbox]:checked[aria-invalid=true],[type=checkbox][role=switch]:checked:active[aria-invalid=true],[type=checkbox][role=switch]:checked:focus[aria-invalid=true],[type=checkbox][role=switch]:checked[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=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,[type=radio][aria-invalid=false]:checked,[type=radio][aria-invalid=false]:checked:active,[type=radio][aria-invalid=false]:checked:focus{--pico-border-color:var(--pico-form-element-valid-border-color)}[type=checkbox]:checked:active[aria-invalid=true],[type=checkbox]:checked:focus[aria-invalid=true],[type=checkbox]:checked[aria-invalid=true],[type=checkbox][role=switch]:checked:active[aria-invalid=true],[type=checkbox][role=switch]:checked:focus[aria-invalid=true],[type=checkbox][role=switch]:checked[aria-invalid=true],[type=radio]:checked:active[aria-invalid=true],[type=radio]:checked:focus[aria-invalid=true],[type=radio]:checked[aria-invalid=true]{--pico-border-color:var(--pico-form-element-invalid-border-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) * .5)}[type=color]::-moz-color-swatch{border:0;border-radius:calc(var(--pico-border-radius) * .5)}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}[type=file]{--pico-color:var(--pico-muted-color);margin-left:calc(var(--pico-outline-width) * -1);padding:calc(var(--pico-form-element-spacing-vertical) * .5) 0;padding-left:var(--pico-outline-width);border:0;border-radius:0;background:0 0}[type=file]::file-selector-button{margin-right:calc(var(--pico-spacing)/ 2);padding:calc(var(--pico-form-element-spacing-vertical) * .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)}[type=range]{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:100%;height:1.25rem;background:0 0}[type=range]::-webkit-slider-runnable-track{width:100%;height:.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:.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:.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:-.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:-.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:-.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: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) + .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 .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 .75rem}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) * .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:0}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);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)}article>footer,article>header{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) * .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)}details.dropdown{position:relative;border-bottom:none}details.dropdown summary::after,details.dropdown>a::after,details.dropdown>button::after{display:block;width:1rem;height:calc(1rem * var(--pico-line-height,1.5));margin-inline-start:.25rem;float:right;transform:rotate(0) translateX(.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:0}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(0) translateX(0)}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) * .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) * .5)}details.dropdown summary+ul li:last-of-type{margin-bottom:calc(var(--pico-form-element-spacing-vertical) * .5)}details.dropdown summary+ul li a{display:block;margin:calc(var(--pico-form-element-spacing-vertical) * -.5) calc(var(--pico-form-element-spacing-horizontal) * -1);padding:calc(var(--pico-form-element-spacing-vertical) * .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:active,details.dropdown summary+ul li a:focus,details.dropdown summary+ul li a:focus-visible,details.dropdown summary+ul li a:hover,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:0 0;content:"";cursor:default}label>details.dropdown{margin-top:calc(var(--pico-spacing) * .25)}[role=group],[role=search]{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 transparent);vertical-align:middle;transition:box-shadow var(--pico-transition)}[role=group] input:not([type=checkbox],[type=radio]),[role=group] select,[role=group]>*,[role=search] input:not([type=checkbox],[type=radio]),[role=search] select,[role=search]>*{position:relative;flex:1 1 auto;margin-bottom:0}[role=group] input:not([type=checkbox],[type=radio]):not(:first-child),[role=group] select:not(:first-child),[role=group]>:not(:first-child),[role=search] input:not([type=checkbox],[type=radio]):not(:first-child),[role=search] select:not(:first-child),[role=search]>:not(:first-child){margin-left:0;border-top-left-radius:0;border-bottom-left-radius:0}[role=group] input:not([type=checkbox],[type=radio]):not(:last-child),[role=group] select:not(:last-child),[role=group]>:not(:last-child),[role=search] input:not([type=checkbox],[type=radio]):not(:last-child),[role=search] select:not(:last-child),[role=search]>:not(:last-child){border-top-right-radius:0;border-bottom-right-radius:0}[role=group] input:not([type=checkbox],[type=radio]):focus,[role=group] select:focus,[role=group]>:focus,[role=search] input:not([type=checkbox],[type=radio]):focus,[role=search] select:focus,[role=search]>:focus{z-index:2}[role=group] [role=button]:not(:first-child),[role=group] [type=button]:not(:first-child),[role=group] [type=reset]:not(:first-child),[role=group] [type=submit]:not(:first-child),[role=group] button:not(:first-child),[role=group] input:not([type=checkbox],[type=radio]):not(:first-child),[role=group] select:not(:first-child),[role=search] [role=button]:not(:first-child),[role=search] [type=button]:not(:first-child),[role=search] [type=reset]:not(:first-child),[role=search] [type=submit]:not(:first-child),[role=search] button:not(:first-child),[role=search] input:not([type=checkbox],[type=radio]):not(:first-child),[role=search] select:not(:first-child){margin-left:calc(var(--pico-border-width) * -1)}[role=group] [role=button],[role=group] [type=button],[role=group] [type=reset],[role=group] [type=submit],[role=group] button,[role=search] [role=button],[role=search] [type=button],[role=search] [type=reset],[role=search] [type=submit],[role=search] button{width:auto}@supports selector(:has(*)){[role=group]:has(button:focus,[type=submit]:focus,[type=button]:focus,[role=button]:focus),[role=search]: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=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,[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{border-color:transparent}[role=group]:has(input:not([type=submit],[type=button]):focus,select:focus),[role=search]:has(input:not([type=submit],[type=button]):focus,select:focus){--pico-group-box-shadow:var(--pico-group-box-shadow-focus-with-input)}[role=group]:has(input:not([type=submit],[type=button]):focus,select:focus) [role=button],[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) [type=submit],[role=group]:has(input:not([type=submit],[type=button]):focus,select:focus) button,[role=search]:has(input:not([type=submit],[type=button]):focus,select:focus) [role=button],[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) [type=submit],[role=search]:has(input:not([type=submit],[type=button]):focus,select:focus) 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=group] [role=button]:focus,[role=group] [type=button]:focus,[role=group] [type=reset]:focus,[role=group] [type=submit]:focus,[role=group] button:focus,[role=search] [role=button]:focus,[role=search] [type=button]:focus,[role=search] [type=reset]:focus,[role=search] [type=submit]:focus,[role=search] 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}[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:-.125em}[aria-busy=true]:not(input,select,textarea,html):not(:empty)::before{margin-inline-end:calc(var(--pico-spacing) * .5)}[aria-busy=true]:not(input,select,textarea,html):empty{text-align:center}[role=button][aria-busy=true],[type=button][aria-busy=true],[type=reset][aria-busy=true],[type=submit][aria-busy=true],a[aria-busy=true],button[aria-busy=true]{pointer-events:none}: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:100%;height:inherit;min-height:100%;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 [role=button],dialog article>footer button{margin-bottom:0}dialog article>footer [role=button]:not(:first-of-type),dialog article>footer button:not(:first-of-type){margin-left:calc(var(--pico-spacing) * .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:.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,0);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:.2s;animation-timing-function:ease-in-out;animation-fill-mode:both}:where(.modal-is-opening,.modal-is-closing) dialog{animation-duration:.8s;animation-name:modal-overlay}:where(.modal-is-opening,.modal-is-closing) dialog>article{animation-delay:.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}}: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 [role=button],nav li [type=button],nav li 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 li,aside nav,aside ol,aside ul{display:block}aside li{padding:calc(var(--pico-nav-element-spacing-vertical) * .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{display:inline-block;vertical-align:baseline}progress{-webkit-appearance:none;-moz-appearance:none;display:inline-block;appearance:none;width:100%;height:.5rem;margin-bottom:calc(var(--pico-spacing) * .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:0 0}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}}[data-tooltip]{position:relative}[data-tooltip]:not(a,button,input){border-bottom:1px dotted;text-decoration:none;cursor:help}[data-tooltip]::after,[data-tooltip]::before,[data-tooltip][data-placement=top]::after,[data-tooltip][data-placement=top]::before{display:block;z-index:99;position:absolute;bottom:100%;left:50%;padding:.25rem .5rem;overflow:hidden;transform:translate(-50%,-.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:.875rem;text-decoration:none;text-overflow:ellipsis;white-space:nowrap;opacity:0;pointer-events:none}[data-tooltip]::after,[data-tooltip][data-placement=top]::after{padding:0;transform:translate(-50%,0);border-top:.3rem solid;border-right:.3rem solid transparent;border-left:.3rem solid transparent;border-radius:0;background-color:transparent;content:"";color:var(--pico-tooltip-background-color)}[data-tooltip][data-placement=bottom]::after,[data-tooltip][data-placement=bottom]::before{top:100%;bottom:auto;transform:translate(-50%,.25rem)}[data-tooltip][data-placement=bottom]:after{transform:translate(-50%,-.3rem);border:.3rem solid transparent;border-bottom:.3rem solid}[data-tooltip][data-placement=left]::after,[data-tooltip][data-placement=left]::before{top:50%;right:100%;bottom:auto;left:auto;transform:translate(-.25rem,-50%)}[data-tooltip][data-placement=left]:after{transform:translate(.3rem,-50%);border:.3rem solid transparent;border-left:.3rem solid}[data-tooltip][data-placement=right]::after,[data-tooltip][data-placement=right]::before{top:50%;right:auto;bottom:auto;left:100%;transform:translate(.25rem,-50%)}[data-tooltip][data-placement=right]:after{transform:translate(-.3rem,-50%);border:.3rem solid transparent;border-right:.3rem solid}[data-tooltip]:focus::after,[data-tooltip]:focus::before,[data-tooltip]:hover::after,[data-tooltip]:hover::before{opacity:1}@media (hover:hover) and (pointer:fine){[data-tooltip]:focus::after,[data-tooltip]:focus::before,[data-tooltip]:hover::after,[data-tooltip]:hover::before{--pico-tooltip-slide-to:translate(-50%, -0.25rem);transform:translate(-50%,.75rem);animation-duration:.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%,-.25rem);animation-name:tooltip-caret-slide}[data-tooltip][data-placement=bottom]:focus::after,[data-tooltip][data-placement=bottom]:focus::before,[data-tooltip][data-placement=bottom]:hover::after,[data-tooltip][data-placement=bottom]:hover::before{--pico-tooltip-slide-to:translate(-50%, 0.25rem);transform:translate(-50%,-.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%,-.5rem);animation-name:tooltip-caret-slide}[data-tooltip][data-placement=left]:focus::after,[data-tooltip][data-placement=left]:focus::before,[data-tooltip][data-placement=left]:hover::after,[data-tooltip][data-placement=left]:hover::before{--pico-tooltip-slide-to:translate(-0.25rem, -50%);transform:translate(.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(.05rem,-50%);animation-name:tooltip-caret-slide}[data-tooltip][data-placement=right]:focus::after,[data-tooltip][data-placement=right]:focus::before,[data-tooltip][data-placement=right]:hover::after,[data-tooltip][data-placement=right]:hover::before{--pico-tooltip-slide-to:translate(0.25rem, -50%);transform:translate(-.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(-.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}}[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}[tabindex],a,area,button,input,label,select,summary,textarea{-ms-touch-action:manipulation}[dir=rtl]{direction:rtl}@media (prefers-reduced-motion:reduce){:not([aria-busy=true]),:not([aria-busy=true])::after,:not([aria-busy=true])::before{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}} \ No newline at end of file diff --git a/html/themes/pico-green/index.php b/html/themes/pico-green/index.php new file mode 100644 index 000000000..d3f6319ce --- /dev/null +++ b/html/themes/pico-green/index.php @@ -0,0 +1,1351 @@ + + + + + + + + XCL Theme built with PicoCSS for XOOPSCube + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ +
+ + +
+ +
+

Web Application Platform

+

Just Use it!

+
+ +
+
+
+
Integrate responsive frameworks and libraries in your Modules and Themes, simple customize a template set.
+
+
+

Content Management System, Cache, Duplicatable Modules (multisites), User Groups Management, Themes, built-in Search.

+
+
+
+ +
+
+
Scalability is the property of a system to handle a growing amount of work by adding resources to the system. 
+
+
+

Scalability without costly contracts, hosting cloud hidden costs, limitations or restrictions. Self-hosted and local first.

+
+
+
+ +
+
+
A secure and modular architecture design with self-contained components known as modules. 
+
+
+
Each module encapsulates a specific functionality, operates independently, and can be developed, maintained, and reused safely.
+
+
+ +
+ +
+ + +
+ + + + +
+ +
+

Default theme layout

+The placeholders for the content and blocks are defined by the theme layout. +
+ You can create a custom center-block-left to trigger a component display on the Top page
+ Add to the Block Title a prefix "top-" and select the target "Toppage".
+ +
+

Header Nav

+
+
+
Logo
+
User menu  Light | Dark
+
+
+

Component top center

+
+
grid-column
center-block-left
Block Title prefix: top-
+
grid-column
center-block-center
Block Title prefix: top-
+
grid-column
center-block-right
Block Title prefix: top-
+
+
+

Main container

+
+
aside nav
Side-Left
Default Blocks:
  • User Menu
  • Main Menu
  • Themes
+
div.content
App Start Page [template]
or
Module Content
+
+ aside nav +
Side-Right +
Block-Right and for Admin Panel a Block Title with prefix 'admin' +
+
+
+

Section container-fluid

+
+
grid-column
center-block-left
+
grid-column
center-block-left
+
grid-column
center-block-left
+
+
+
Footer
+
+ +
+ +
+

Top Page Center Blocks

+ +
    +
  1. Browse to Admin > Block Management > Add Custom Block +
  2. Give the Block Title e.g. top-none-myblock
    +the prefix top- with none- only show the block content +
  3. Select the side Center (left, center, right) +
  4. Write some content +
  5. Select Target Modules : Toppage
    6. +
  6. Select Target Groups : check all groups and submit
    7. +
+
+ + +

Pico

+

A pure HTML example, without dependencies.

+ + + +
+

Accordions

+
+ Accordion 1 +

+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque urna diam, + tincidunt nec porta sed, auctor id velit. Etiam venenatis nisl ut orci consequat, vitae + tempus quam commodo. Nulla non mauris ipsum. Aliquam eu posuere orci. Nulla convallis + lectus rutrum quam hendrerit, in facilisis elit sollicitudin. Mauris pulvinar pulvinar + mi, dictum tristique elit auctor quis. Maecenas ac ipsum ultrices, porta turpis sit + amet, congue turpis. +

+
+
+ Accordion 2 +
    +
  • Vestibulum id elit quis massa interdum sodales.
    • +
  • Nunc quis eros vel odio pretium tincidunt nec quis neque.
    • +
  • Quisque sed eros non eros ornare elementum.
    • +
  • Cras sed libero aliquet, porta dolor quis, dapibus ipsum.
    • +
+
+
+ + +
+
+

Article

+ header +
+

+ Content paragraph - Nullam dui arcu, malesuada et sodales eu, efficitur vitae dolor. Sed ultricies dolor non + ante vulputate hendrerit. Vivamus sit amet suscipit sapien. Nulla iaculis eros a elit + pharetra egestas. Nunc placerat facilisis cursus. Sed vestibulum metus eget dolor pharetra + rutrum. +

+
+ Footer - Duis nec elit placerat, suscipit nibh quis, finibus neque. +
+
+ + +
+

Buttons

+

+ + + +

+

+ + + +

+
+ + +
+
+

Form elements

+ + + + + + + + + Curabitur consequat lacus at lacus porta finibus. + + + + + + + + + + + + +
+ + + +
+ +
+ + + + + + + + +
+ +
+ +
+ Checkboxes + + +
+ + +
+ Radio buttons + + +
+ + +
+ Switches + + +
+
+ + + + +
+
+ + +
+

Group

+
+
+ + +
+
+
+ + +
+

Loading

+
+ +
+ + + + + +
+

Preview

+

+ Sed ultricies dolor non ante vulputate hendrerit. Vivamus sit amet suscipit sapien. Nulla + iaculis eros a elit pharetra egestas. +

+
+
+ + + +
+
+ +
+
+
+ + +
+

Progress bar

+ + +
+ + +
+

Tables

+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
#HeadingHeadingHeadingHeadingHeadingHeadingHeading
1CellCellCellCellCellCellCell
2CellCellCellCellCellCellCell
3CellCellCellCellCellCellCell
+
+
+ + +
+

Typography

+

+ Aliquam lobortis vitae nibh nec rhoncus. Morbi mattis neque eget efficitur feugiat. + Vivamus porta nunc a erat mattis, mattis feugiat turpis pretium. Quisque sed tristique + felis. +

+ + +
+ "Maecenas vehicula metus tellus, vitae congue turpis hendrerit non. Nam at dui sit amet + ipsum cursus ornare." +
+ - Phasellus eget lacinia +
+
+ + +

Lists

+
    +
  • Aliquam lobortis lacus eu libero ornare facilisis.
    • +
  • Nam et magna at libero scelerisque egestas.
    • +
  • Suspendisse id nisl ut leo finibus vehicula quis eu ex.
    • +
  • Proin ultricies turpis et volutpat vehicula.
    • +
+ + +

Inline text elements

+
+

Primary link

+

+ Secondary link +

+

+ Contrast link +

+
+
+

Bold

+

Italic

+

Underline

+
+
+

Deleted

+

Inserted

+

Strikethrough

+
+
+

Small

+

Text Sub

+

Text Sup

+
+
+

+ Abbr. +

+

Kbd

+

Highlighted

+
+ + +

Heading 3

+

+ Integer bibendum malesuada libero vel eleifend. Fusce iaculis turpis ipsum, at efficitur + sem scelerisque vel. Aliquam auctor diam ut purus cursus fringilla. Class aptent taciti + sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. +

+

Heading 4

+

+ Cras fermentum velit vitae auctor aliquet. Nunc non congue urna, at blandit nibh. Donec ac + fermentum felis. Vivamus tincidunt arcu ut lacus hendrerit, eget mattis dui finibus. +

+
Heading 5
+

+ Donec nec egestas nulla. Sed varius placerat felis eu suscipit. Mauris maximus ante in + consequat luctus. Morbi euismod sagittis efficitur. Aenean non eros orci. Vivamus ut diam + sem. +

+
Heading 6
+

+ Ut sed quam non mauris placerat consequat vitae id risus. Vestibulum tincidunt nulla ut + tortor posuere, vitae malesuada tortor molestie. Sed nec interdum dolor. Vestibulum id + auctor nisi, a efficitur sem. Aliquam sollicitudin efficitur turpis, sollicitudin + hendrerit ligula semper id. Nunc risus felis, egestas eu tristique eget, convallis in + velit. +

+ + +
+ + + + + + + + + + + + Legacy to Remind Us of Where We Come From + +
+ Image from + SVG Image +
+
+
+ + +
+ + + + + + +
+ + + +
+ +

jQuery UI

+ +
+

Accordion

+ +
+

Section 1

+
+

+ Mauris mauris ante, blandit et, ultrices a, suscipit eget, quam. Integer + ut neque. Vivamus nisi metus, molestie vel, gravida in, condimentum sit + amet, nunc. Nam a nibh. Donec suscipit eros. Nam mi. Proin viverra leo ut + odio. Curabitur malesuada. Vestibulum a velit eu ante scelerisque vulputate. +

+
+

Section 2

+
+

+ Sed non urna. Donec et ante. Phasellus eu ligula. Vestibulum sit amet + purus. Vivamus hendrerit, dolor at aliquet laoreet, mauris turpis porttitor + velit, faucibus interdum tellus libero ac justo. Vivamus non quam. In + suscipit faucibus urna. +

+
+

Section 3

+
+

+ Nam enim risus, molestie et, porta ac, aliquam ac, risus. Quisque lobortis. + Phasellus pellentesque purus in massa. Aenean in pede. Phasellus ac libero + ac tellus pellentesque semper. Sed ac felis. Sed commodo, magna quis + lacinia ornare, quam ante aliquam nisi, eu iaculis leo purus venenatis dui. +

+
    +
  • List item one
    • +
  • List item two
    • +
  • List item three
    • +
+
+

Section 4

+
+

+ Cras dictum. Pellentesque habitant morbi tristique senectus et netus + et malesuada fames ac turpis egestas. Vestibulum ante ipsum primis in + faucibus orci luctus et ultrices posuere cubilia Curae; Aenean lacinia + mauris vel est. +

+

+ Suspendisse eu nisl. Nullam ut libero. Integer dignissim consequat lectus. + Class aptent taciti sociosqu ad litora torquent per conubia nostra, per + inceptos himenaeos. +

+
+
+
+ + +
+
+ +
+ + +

Button Widget with icons

+
+ + + + + + +
+
+ +
+

Button - Widget

+ +
+ + + An anchor +
+
+ +
+

CSS Buttons

+
+ + + An anchor +
+
+ +
+ +
+ + + +
+

Checkbox and radio button widgets

+ + +
+
+ Rental Car +
+ + + + + + + + + + +
+
+
+ +
+ + +
+

Progress bar

+ + +
+
Starting download...
+
+
+ + +
+ + +
+

Datepicker

+ +
+ Date:
+
+
+ + +
+

Dialog

+ +
+

This is an animated dialog which is useful for displaying information. The dialog window can be moved, resized and closed with the 'x' icon.

+
+ + +
+ + +
+ +
+

Menu

+ + +
+ +
+

Menu Categories

+ + + + +
+ +
+

Menu Icons

+ + + +
+ +
+ + +
+ + +
+

select menu

+
+ +
+ + + + + + + + + + + +
+ +
+ +
+ +
+

PicoSS Dropdown

+ +
+ Dropdown + +
+ + + +
+
+ + +
+ + +
+ +

Block-center - Grid

+ +
+
+

block-center-left

+
+
block title
+

content

+
+
+
+

block-center-center

+
+
block title
+

content

+
+
+
+

block-center-rigth

+
+
block title
+

content

+
+
+
+ +
+
+
+
block title
+

content

+
+
+
+
+
block title
+

content

+
+
+
+
+
block title
+

content

+
+
+
+
+ + + + + + + +
+
+ +

Confirm your action!

+
+

+ Cras sit amet maximus risus. Pellentesque sodales odio sit amet augue finibus + pellentesque. Nullam finibus risus non semper euismod. +

+ +
+ + + + + +
+ + + + + + +
+ + + + + \ No newline at end of file diff --git a/html/themes/pico-green/js/index.html b/html/themes/pico-green/js/index.html new file mode 100644 index 000000000..990cbd603 --- /dev/null +++ b/html/themes/pico-green/js/index.html @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/html/themes/pico-green/js/plugins.js b/html/themes/pico-green/js/plugins.js new file mode 100644 index 000000000..353369dd0 --- /dev/null +++ b/html/themes/pico-green/js/plugins.js @@ -0,0 +1,242 @@ +/* + * XCL Theme Green built with PicoCSS v206 + * + * @version 2.4.0 + * @update 2024-04-20 + * @Date 2024-02-02 + * @author Nuno Luciano ( https://github.com/gigamaster ) + * @copyright (c) 2005-2024 The XOOPSCube Project, authors + * @license MIT + * @link https://github.com/xoopscube + * + * + * 1. Theme Switcher + * 2. Modal + * -- jQuery Document Ready - helper plugins + * 3. Render SVG + * 4. Notification Time + * 5. Dropdown - block options, menu, etc + * 6. Close on click document + * 7. Highlight Message nav-tab active + * 8.1 remove border + * 8.2 url constructor + * 9. Aria-busy Toogle + */ + +/* + * 1. Minimal theme switcher Pico.css - https://picocss.com + * Copyright 2019-2024 - Licensed under MIT + */ +const themeSwitcher = { + // Config + _scheme: "auto", + menuTarget: "details.dropdown", + buttonsTarget: "a[data-theme-switcher]", + buttonAttribute: "data-theme-switcher", + rootAttribute: "data-theme", + localStorageKey: "picoPreferredColorScheme", + + // Init + init() { + this.scheme = this.schemeFromLocalStorage; + this.initSwitchers(); + }, + + // Get color scheme from local storage + get schemeFromLocalStorage() { + return window.localStorage?.getItem(this.localStorageKey) ?? this._scheme; + }, + + // Preferred color scheme + get preferredColorScheme() { + return window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light"; + }, + + // Init switchers + initSwitchers() { + const buttons = document.querySelectorAll(this.buttonsTarget); + buttons.forEach((button) => { + button.addEventListener( + "click", + (event) => { + event.preventDefault(); + // Set scheme + this.scheme = button.getAttribute(this.buttonAttribute); + // Close dropdown + document.querySelector(this.menuTarget)?.removeAttribute("open"); + }, + false + ); + }); + }, + + // Set scheme + set scheme(scheme) { + if (scheme == "auto") { + this._scheme = this.preferredColorScheme; + } else if (scheme == "dark" || scheme == "light") { + this._scheme = scheme; + } + this.applyScheme(); + this.schemeToLocalStorage(); + }, + + // Get scheme + get scheme() { + return this._scheme; + }, + + // Apply scheme + applyScheme() { + document.querySelector("html")?.setAttribute(this.rootAttribute, this.scheme); + }, + + // Store scheme to local storage + schemeToLocalStorage() { + window.localStorage?.setItem(this.localStorageKey, this.scheme); + }, +}; + +// Init +themeSwitcher.init(); + +/* + * 2. Modal Pico.css - https://picocss.com + * Copyright 2019-2024 - Licensed under MIT + */ +// Config +const isOpenClass = "modal-is-open"; +const openingClass = "modal-is-opening"; +const closingClass = "modal-is-closing"; +const scrollbarWidthCssVar = "--pico-scrollbar-width"; +const animationDuration = 400; // ms +let visibleModal = null; + +// Toggle modal +const toggleModal = (event) => { + event.preventDefault(); + const modal = document.getElementById(event.currentTarget.dataset.target); + if (!modal) return; + modal && (modal.open ? closeModal(modal) : openModal(modal)); +}; + +// Open modal +const openModal = (modal) => { + const { documentElement: html } = document; + const scrollbarWidth = getScrollbarWidth(); + if (scrollbarWidth) { + html.style.setProperty(scrollbarWidthCssVar, `${scrollbarWidth}px`); + } + html.classList.add(isOpenClass, openingClass); + setTimeout(() => { + visibleModal = modal; + html.classList.remove(openingClass); + }, animationDuration); + modal.showModal(); +}; + +// Close modal +const closeModal = (modal) => { + visibleModal = null; + const { documentElement: html } = document; + html.classList.add(closingClass); + setTimeout(() => { + html.classList.remove(closingClass, isOpenClass); + html.style.removeProperty(scrollbarWidthCssVar); + modal.close(); + }, animationDuration); +}; + +// Close with a click outside +document.addEventListener("click", (event) => { + if (visibleModal === null) return; + const modalContent = visibleModal.querySelector("article"); + const isClickInside = modalContent.contains(event.target); + !isClickInside && closeModal(visibleModal); +}); + +// Close with Esc key +document.addEventListener("keydown", (event) => { + if (event.key === "Escape" && visibleModal) { + closeModal(visibleModal); + } +}); + +// Get scrollbar width +const getScrollbarWidth = () => { + const scrollbarWidth = window.innerWidth - document.documentElement.clientWidth; + return scrollbarWidth; +}; + +// Is scrollbar visible +const isScrollbarVisible = () => { + return document.body.scrollHeight > screen.height; +}; + + +// DOCUMENT READY - Place any jQuery/helper plugins below ! +/* ---------- ---------- ---------- ---------- ---------- */ +// Do something on document ready +$(function () { + + // 3. Inline SVG icons + $('.svg').renderClassSvg(); + + // 4. Notification Time + $('div.runtime').fadeIn( 750 ).delay( 3000 ).fadeOut( 500 ); + + // 5. Dropdown - block options, menu, etc + $(".dropdown").on("click", ".dropdown-toggle", function (event) { + event.preventDefault(); + $('.dropdown').removeClass('isopen'); + $(this).parent().toggleClass('isopen'); + }); + + // 6. Close on click document + $(document).on("click", function (event) { + var $trigger = $(".dropdown"); + if ($trigger !== event.target && !$trigger.has(event.target).length) { + $(".dropdown").removeClass("isopen"); + } + }); + + // 7. Highlight Message nav-tab active + $("#tabs-mail").tabs({ + active: false, + collapsible: true, + classes: { + "ui-tabs": "taborder" + }, + beforeActivate: function (event, ui) { + window.open($(ui.newTab).find('a').attr('href'), '_self'); + return false; + }, + } + ); + // .find('.ui-tabs-tab').removeClass('ui-corner-all ui-corner-top'); + + // 8.1 Remove border from dropdown UL children + $(".ui-tabs-tab .dropdown-content ul").children().css( "border", "0" ); + + // 8.2 url constructor + const parseUrl = new URL(window.location.href); + const msgAction = parseUrl.searchParams.get("action"); + // If module message index, highlight the first nav-tab + if (msgAction == null) { + $('#tabs-mail ul.ui-tabs-nav li:first-child').addClass('ui-state-active'); + } else { + // Highlight current action nav-tab + $('a[href="index.php?action=' + msgAction + '"]').parent('li').addClass('ui-tabs-active ui-state-active'); + } + if (msgAction == 'settings'|| msgAction == 'blacklist'){ + // Highlight dropdown menu + $('.settings ').parent('li').addClass("ui-state-active"); + } + // 9. Aria-busy Toogle + $('[aria-busy="false"]').on( "click", function(event) { + event.stopPropagation(); + event.stopImmediatePropagation(); + $(this).prop("ariaBusy", true); + }); + +}); diff --git a/html/themes/pico-green/manifesto.ini.php b/html/themes/pico-green/manifesto.ini.php new file mode 100644 index 000000000..fa2e4b377 --- /dev/null +++ b/html/themes/pico-green/manifesto.ini.php @@ -0,0 +1,22 @@ + header { + --pico-block-spacing-vertical:0 +} +body > main { + display : grid; + grid-template-rows: 1fr; + row-gap : 2rem; + margin-bottom : calc(var(--pico-spacing) * 4); + padding : 0 +} +body > main > * { + min-width : 0; + margin-bottom : 0 +} + +body > main > article { + --pico-block-spacing-vertical: var(--pico-spacing); + --pico-block-spacing-horizontal: var(--pico-spacing); +} + +/* Body align Aside and Main */ +body > main > aside#nav-left, +body > main > aside#block-right { + margin-top : .5rem; +} +body > main > div > aside { + background : var(--pico-card-background-color); + padding : .5rem; + padding : var(--pico-nav-element-spacing-vertical) var(--pico-nav-element-spacing-horizontal); /* @todo */ + border-radius : var(--pico-border-radius); +} + +/* BODY FOOTER */ +body > footer { + display : flex; + align-items : center; + padding : 1rem 0; + justify-content : center; + flex-wrap : wrap; +} +body > footer .logos { + display : inline-flex; + padding :.25rem .5rem; + border-bottom : 1px solid var(--pico-muted-border-color) +} +body > footer .logos a { padding:.25rem; margin:.5rem 0;} +body > footer .logos svg { + width : auto; + height : 1rem; + margin-right : calc(var(--pico-spacing) * .25); + transform : translateY(-.0625rem) +} + +/* ARTICLE H* ONLY CHILD (FORM COMMENT/REPLY) */ +article header :where( h2, h3, h4 ):only-child{ + margin : var(--pico-spacing) 0; +} +article header :where( p:last-child ){ + margin-bottom : 0; +} + +/* A HREF LINK COLOR */ +[data-theme=dark] { + :is([role=button], [type=button], [type=file]::file-selector-button, [type=reset], [type=submit], + button, [type=checkbox]:checked, [type=checkbox]:checked:active, [type=checkbox]:checked:focus, + [type=radio]:checked, [type=radio]:checked:active, [type=radio]:checked:focus):not(.outline) { + /* --pico-background-color: hsl(45 70% 40% / 1); */ + } + a:hover:not([role=button]) { + color:var(--pico-secondary-inverse) + } +} +[role=link]:focus, a:focus { +--background-color : var(--pico-primary-focus); + border-radius : var(--pico-border-radius); +} +/* A LINK UNDERLINE none */ +a {--pico-text-decoration: none; border:none} +:where(a:not([role=button])):is([aria-current]:not([aria-current=false]),:hover,:active,:focus), +[role=link] :is(a,[aria-current]:not([aria-current=false]),:hover,:active,:focus) { +--pico-text-decoration: none; +--pico-primary-underline: none; +--pico-underline: none; + border:none +} +/* A LINK - ICON ONLY */ +:is(a.btn-icon) { + border-radius : var(--pico-border-radius); + box-shadow : var(--pico-box-shadow); + display : inline-flex; + justify-content : center; + font-weight : 600; + font-size : 24px; + width : 30px; + height : 28px; + opacity : .8; + transition : opacity 0.3s ease-in; +} +:is(a.btn-icon):hover { + background : var(--pico-primary-focus); + color : var(--pico-secondary-inverse); + opacity : 1; +} + +hr { margin: 2rem 1rem; } /* @todo ? */ + +/* -------------------- ARTICLE FOOTER ACTION CONTROL */ +.action-control { + align-items : center; + column-gap : 1rem; + display : flex; + flex-wrap : wrap; + justify-content : space-between; + white-space : normal; +} + +/* -------------------- BANNER */ +section[role=banner] > div > article { + border : 1px solid var(--pico-muted-border-color); + border-radius : var(--pico-border-radius); + box-shadow : var(--pico-box-shadow); + margin : calc(var(--pico-block-spacing-vertical) * 3) 0; +} +[role=banner] .advert { + background : var(--pico-code-background-color); + border : 1px dotted var(--pico-form-element-disabled-border-color); + border-radius : var(--pico-border-radius); + display : block; + padding : var(--pico-spacing); + +} +[role=banner] .banner { + padding : var(--pico-spacing); + text-align : center; +} + +/* -------------------- BREADCRUMBS - MOBILE */ + +nav[aria-label=breadcrumb] { + margin-bottom : 1rem; /* space for pico header image */ +} + +@media (max-width : 768px) { + nav[aria-label=breadcrumb] ul { + list-style-type: none; + /*font-size: 16px;*/ + margin : 0; + padding : 10px 0; + /* truncate */ + white-space : nowrap; + max-width : 100%; + overflow : hidden; + } + nav[aria-label=breadcrumb] li { + display : inline-block; + max-width : 18%; /* truncate */ + width : auto; + white-space : nowrap; + overflow : hidden; + text-overflow: ellipsis; + } + nav[aria-label=breadcrumb] li:last-child {max-width: 30%;} + nav[aria-label=breadcrumb] li:first-child:before {content: none;} + nav[aria-label=breadcrumb] li a span:hover {text-decoration: underline} + nav[aria-label=breadcrumb] li, + nav[aria-label=breadcrumb] li:last-child {display: none} + nav[aria-label=breadcrumb] li:nth-last-child(2) {display: block;max-width: 100%;} + nav[aria-label=breadcrumb] li a {text-decoration: none} + nav[aria-label=breadcrumb] li:nth-last-child(2) a:after, + nav[aria-label=breadcrumb] ul li:not(:last-child) ::after {content: '';} + nav[aria-label=breadcrumb] li:nth-last-child(2) a:before { + content : ' ↚ '; + display : inline-flex; + min-width : 5ch; + background : var(--pico-primary); + border-radius:var(--pico-border-radius); + color : var(--pico-primary-inverse); + margin-right: .5rem; + place-content: center; + } + nav[aria-label=breadcrumb] li:nth-last-child(2):before {content: none} + + section.block-center { + background : var(--pico-contrast-inverse); + border : var(--pico-muted-border-color); + margin-bottom: 0; + padding : calc(var(--pico-spacing) * 1) calc(var(--pico-spacing) * 1); + } +} + +/* -------------------- BADGE & BUTTONS */ +.badge { + background : hsla(205, 15%, 40%, 0.25); + border-radius : var(--pico-border-radius); + font-size : 12px; + min-width : 3ch; + display : inline-block; + padding : 0 0.5rem;vertical-align: baseline; +} + +/* article h3 :is(.badge){font-size: 14px; } */ +:is(article, hgroup, .list-content) h3, h4, .block-title { + display : flex; + flex-wrap : wrap; + justify-content : space-between; + width : 100%; + align-items : baseline; +} + +/* BUTTON ACTION */ +:is(.delete) { + color : var(--pico-del-color); + border-color : var(--pico-del-color); +} +:is(button.vote) { + margin-bottom : 0; +} +:where([type=submit],[type=button],[role=button]) svg { + display : inline; + margin : 0 .25rem 0; + vertical-align: -.175em; +} + +:where(footer.action-control, footer div.grid) +:is(div, button, input[type=submit],input[type=button],[role=button], details.dropdown, input, a):not(summary) { + margin-bottom : 0; + white-space : nowrap; + /* border : 2px solid orange; */ +} +:where(footer.action-control) :is(a) { + border-radius : var(--pico-border-radius); + margin : 0 .5em; + padding : .25rem; +} +:where(footer.action-control) :is(a, button[type=submit]):hover { + background : var(--pico-primary-focus); + color : var(--pico-secondary-inverse); +} + +/* -------------------- BLOCKS */ +/* BLOCKS - Title */ +[class^="block-title"] { + color : var(--pico-muted-color); + font-weight : var(--pico-font-weight); + font-size : 1rem; + line-height : 1rem; + justify-content : space-between; + flex-wrap : nowrap; + margin-bottom : var(--pico-typography-spacing-vertical); + padding : 0; +} +[class^="block-title"] a { + display : inline-block; + width : 100%; +} +[class^="block-title"]:hover a { +--text-decoration : none; + color :var(--pico-primary-inverse); +} +[class^="block-title"]:hover { + background-position: 100% 100%; + background-size : 200% 100%; + text-decoration : none; + transition : background-size .3s .3s, background-position .3s; +} +/* BLOCKS - Content */ +[class="block-content"] { + margin-bottom : var(--pico-typography-spacing-vertical); +} +[class="block-content"] > ul { + padding : 0; +} +/* BLOCKS - MAIN MENU. SUB, MESSAGE */ +.menu-sub { + padding-left : 2.25rem; +} +/* BLOCK - PRIVATE MESSAGE */ +.block-messages ul#privatemessages { + flex-direction : column; + width : 100%; +} +.block-messages ul#privatemessages li { + padding : calc(var(--pico-nav-element-spacing-vertical) * .5) var(--pico-nav-element-spacing-horizontal); + width : inherit; +} +.block-messages ul#privatemessages li a { + display : inherit; +} +/* BLOCK - LIST MEMBERS */ +/* USERS ONLINE, SITE INFO */ +ul.list-column { + border-left : 4px solid var(--pico-muted-border-color); + column-count : 3; + column-width : 140px; + column-gap : 1.5rem; + column-rule : 4px solid var(--pico-muted-border-color); + margin : 1rem 0; + padding : 1rem; +} +ul.list-column li { + list-style : none; + margin-bottom :.5rem +} +ul.list-column li > h6 { + font-size : 16px; column-span: all; +} + +/* -------------------- ICONS */ +[class^="i-"] { + padding : .25rem .5rem +} +i[class^="i-"], +:is(span.icon, i.icon) { + padding-right : .5rem; +} + +summary[role="link"].contrast:is([aria-current],:hover,:active,:focus) { + background-color: transparent; + color : var(--pico-contrast-hover); +} + +/* -------------------- SEARCH FORM - PicoCSS default pill: 5rem */ + +[role=search]>:last-child { + border-top-right-radius: 1rem; + border-bottom-right-radius: 1rem; +} +[role=search]>:first-child { + border-top-left-radius: 1rem; + border-bottom-left-radius: 1rem; +} + +/* -------------------- TABLE - FONT-SIZE IN BLOCKS */ +[class^="block-"] table tbody, tfoot { + font-size : 14px; +} + +/* -------------------- TEXT SELECTION */ +::-moz-selection{background-color:var(--pico-primary);color:var(--pico-primary-inverse)} +::selection{background-color:var(--pico-primary);color:var(--pico-primary-inverse)} + +/* -------------------- TOOLTIP */ + +[data-tooltip] { + border-bottom-color: var( + --pico-border-color + ) +} +[data-tooltip]:after, main [data-tooltip]:before { + font-size : 12px +} + +/* -------------------- TYPOGRAPHY - FONT SIZE & SCALE */ +/* HEADING */ +h1, h2, h3, h4, h5 { +--font-weight: 400; + font-weight : var(--font-weight); + position : relative; +} +h1,h2,h3 { + font-family: "Nunito", sans-serif; + font-optical-sizing: auto; + font-weight: 400; + font-style: normal; +} + +p { text-wrap: pretty } + +@media (min-width: 576px) { :root { --pico-font-size: 106.25%; } } +@media (min-width: 768px) { :root { --pico-font-size: 112.5%; /* 18px */}} +@media (min-width: 1024px) { :root { --pico-font-size: 1rem; }} +@media (min-width: 1280px) { :root { --pico-font-size: 1rem; }} +@media (min-width: 1536px) { :root { --pico-font-size: 112.5%; /* 18px */}} + +/* -------------------- WRAPPER - GRID */ +/* -------------------- MEDIA QUERIES - desktop, tablet, mobile + CSS override PicoSS rules and specificity */ +@media(max-width: 576px) { + [role=button], [type=button], [type=file]::file-selector-button, [type=reset], [type=submit], button { + --pico-form-element-spacing-horizontal: 1.5rem; + } + [role=group] [role=button], [role=group] [type=button], [role=group] [type=submit], [role=group] button, [role=search] [role=button], [role=search] [type=button], [role=search] [type=submit], [role=search] button { + --pico-form-element-spacing-horizontal: 1.5rem; + } +} +@media screen and (max-width: 1024px) { + body>main>aside#nav-left, body>main>aside#block-right { + --pico-font-size: 1rem; /* 16px - 18px picocss */ + font-size: var(--pico-font-size); + margin-top: 0; + } + [data-self~="sm-hide"] {display:none!important}/* only show icon and hide text */ + + aside#nav-left { + position: fixed; + top: 0; + left: 0; + width: 240px; + height: 100%; + padding: .25em var(--pico-block-spacing-horizontal); + background: var(--pico-card-background-color); + box-shadow: var(--pico-card-box-shadow); + overflow-y: auto; + z-index: var(--z-above); + } + aside#nav-left { + transform: translate3d(0, 0, 0) translateX(-240px); + transition: all 0.25s cubic-bezier(0.16, 0.63, 0.45, 0.98); + } + aside#nav-left:target { + transform: translate3d(0, 0, 0) translateX(0); + } + .nav-open { + display: block; + position:absolute; + left: 18px; + top: 10px; + } + aside#nav-left .nav-close { + display: block; + height: 36px; + display: block; + cursor: pointer; + position: sticky; + left: 180px; + top: 10px; + width: fit-content; + width: -moz-fit-content; + + z-index: var(--z-sticky); + } +} +@media(min-width: 1024px) { + html { + scroll-padding-top:calc(var(--pico-header-height) + 2rem - .375rem) + } + [data-self="sm-hide"] { + display: revert!important; /* show icon & show text */ + } + body>header>nav.nav-top{ + position: relative; + } + body>main { + grid-template-rows:auto 1fr; + grid-template-columns: 14rem 1fr; + grid-template-areas: "menu main" "menu block-right"; + -moz-column-gap: 2rem; + column-gap: 2rem; + row-gap: 2rem; + } + .nav-logo {margin-left:0} + .nav-open, + aside#nav-left .nav-close{display: none;} + aside#nav-left { + position:relative; + width: 220px; + } + body>main:has(aside#block-right) { + grid-template-rows: auto 1fr; + grid-template-columns: 14rem 1fr; + grid-template-areas: "menu main" "menu block-right" + } + body>main>aside#nav-left { + grid-area: menu + } + body>main>[role=main] { + grid-area: main + } + body>main>aside#block-right { + grid-area: block-right; + align-self: start /* Sticky in grid */ + } + body>main>aside#block-right { + position: sticky; + top: calc(var(--pico-main-top-offset) + var(--pico-block-spacing-vertical)/2); + max-height: calc(var(--max-height) - var(--pico-spacing)); + transition: top var(--pico-transition); + transition-delay: 50ms + } + body>main>nav[aria-label=breadcrumb] { + display: none + } + body>main>aside>nav { + margin-top: calc(var(--pico-block-spacing-vertical)/2) + } + body>main>hgroup { + grid-area: header; + margin-top: calc(var(--pico-block-spacing-vertical)/2) + } +} +@media(min-width: 1280px) { + body>main { + grid-template-rows:auto 1fr; + grid-template-columns: 14rem 1fr 14rem; + grid-template-areas: "menu main block-right" "menu main block-right"; + row-gap: 2rem; + } + body>main:has(aside#block-right) { + grid-template-rows: auto 1fr; + grid-template-columns: 14rem 1fr 15rem; + grid-template-areas: "menu main block-right" "menu main block-right" + } + body>main>aside#nav-left { + grid-area: menu + } + body>main>[role=main] { + grid-area: main + } + body>main>aside#block-right { + grid-area: block-right + } +} +@media(min-width: 1536px) { + body>main { + grid-template-rows:auto 1fr; + grid-template-columns: 16rem 1fr 16rem; + grid-template-areas: "menu main block-right" "menu main block-right"; + row-gap: 3rem; + } +} +/* GRID CUSTOM COLUMNS */ +/* @todo ?? */ +.grid-left, .grid-right, .grid-2, .grid-3 { + align-items : start; + display : grid; + grid-template-columns: 1fr; + column-gap : calc(var(--pico-spacing) * .5); + row-gap : calc(var(--pico-spacing) * .5); + margin : 0; +} +.flex-justify { + align-items : center; + display : flex; + justify-content : space-between; + flex-basis : auto; + flex-wrap : wrap; +} +@media (min-width: 1024px) { + .grid-main, .grid-left, .grid-right, .grid-2, .grid-3 { + align-items : baseline; + display : grid; + column-gap : calc(var(--pico-spacing) * 1); + row-gap : calc(var(--pico-spacing) * 1); + } + .grid-main { + grid-template-columns: 1fr 3fr; + grid-column-gap: 1rem; + grid-row-gap: 1rem; + } + .grid-left { grid-template-columns: 1fr 3fr; } + .grid-right { grid-template-columns: 3fr 1fr; } + .grid-2 { grid-template-columns: 1fr 1fr; } + .grid-3 { grid-template-columns: 1fr 1fr 1fr; } +} + +/* -------------------- MODULE CKEditor */ +/* BUTTON CKEditor forced fix button 📐*/ +:is([class^="cke_button"],[class^="cke_combo_button"] ) { + margin-left : 0!important; +} +/* fix extra space of combo dropdown */ +.cke_combo_on a.cke_combo_button, .cke_combo_off a.cke_combo_button:hover, .cke_combo_off a.cke_combo_button:focus, +.cke_combo_off a.cke_combo_button:active { + padding : 0!important; +} +/* CKEditor darkmode */ +:root[data-theme=dark] { + --cke-color : #fff; + --cke-background: #111;; + --cke-filter : invert(1) contrast(1.15); + --cke-editable : #1c212c; + --cke-inner : #181b25; +} +/* try to switch mode, fallback ?? */ +:root[data-theme=light] { + --no-var : #fff; +} +/* CKEditor darkmode rounded */ +:is([class^=cke_top],[class^=cke_bottom]) { + filter : var(--cke-filter, none); + border-color : transparent!important; + /* Prevent editor from overflow prent container */ + max-width : 100%; + border-radius : 8px; +} +:where(.cke_chrome) { + border : none!important; +} +.cke_inner { + display : block; + background : var(--cke-inner, var(--no-var), #999)!important; + border : 1px solid var(--cke-background, var(--no-var), #999)!important; + border-radius : 8px; +} +:where(.cke_contents){ + background : var(--cke-editable, var(--no-var), #999)!important; + color : var(--cke-color, var(--no-var))!important; + border-radius : 8px; +} +/* customize editable container */ +.cke_editable { + background : var(--cke-editable, var(--no-var)); + color : var(--no-var, #fff); + border-radius : 8px; + padding : 0.5rem; + cursor : text; + margin : 0.25rem; + width : auto; + min-height : calc(100vh - 1rem); +} +textarea.cke_source { + background : var( --cke-background, #fff); + color : var( --cke-color, #111); + padding : 0.5rem; +} +.cke_wysiwyg_frame, .cke_wysiwyg_div { + background : var(--cke-editable, var(--no-var))!important; + color : var(--cke-color, var(--no-var))!important; +} + + +/* -------------------- MODULE D3FORUM */ +/* Used in Dropdowm*/ +.author-info { + align-items : center; + display : flex; + flex-direction : column; + padding : .25em; +} +/* AUTHOR AVATAR */ +.avatar { + border : 2px solid var(--pico-border-color); + border-radius : 50%; + margin : 0 auto; +} +/* AUTHOR DROPDOWN */ +:is(.w96) { + width : 96px; + height : 96px; + } + +/* AVATAR css from x-layout */ +[data-self="radius-circle"] { border-radius: 50%} + +/* NAV POST TREE ORDER */ +nav.post-tree-order { + align-items : center; + display : flex; + flex-wrap : wrap; + justify-content : start; + padding : var(--pico-spacing); + width : 100%; +} +nav.post-tree-order a { + border-radius : var(--pico-border-radius); + padding : .25em; + margin-right : .5em; +} +nav.post-tree-order a:hover { + background : var(--pico-primary-focus); + color : var(--pico-secondary-inverse); +} +/* POST TREE */ +/* in main view, main list, comment list */ +ul.post-tree { + background : var(--pico-card-background-color); + border-radius : CALC(var(--pico-border-radius)*2); + margin-bottom : var(--pico-block-spacing-vertical); + padding : 1rem; +} +ul.post-tree li { + list-style : none; +} +li.post-tree-item { + align-items : center; + display : flex; + list-style : none; + margin : 0; /* NOTE The margin-left is auto-generated from template ! */ + padding : 0; +} +li.post-tree-item > span { + border-radius : var(--pico-border-radius); + padding : .25rem; +} + .post-tree-current > span { + background-color: var(--pico-form-element-selected-background-color); + border-radius : var(--pico-border-radius); +} +/* POST TREE DEPTH-IN-TREE */ +:is(ul.depth-in-tree) { + margin : 0; + padding : 0; +} +/* FORUM POST - CONTENT + SIGNATURE */ +.post-content { +} +.post-signature { + border-top : 1px solid var(--pico-blockquote-border-color); + margin-top : 1.5rem; +} + +/* FORUM - ICON LIST LEGEND */ +.forum-icon-list { + display : block; + list-style : none; + margin : 1em; + padding : 0; +} + +/* Following classes Using class badge */ +.post-vote, +.post-vote-count, +.post-vote-avg {} +.description {} + +/* ACTIVITY TOTAL POSTS, COMMENTS, VIEWS */ +.content-activity, +.forum-activity { + font-size : small; +} + +/* -------------------- MODULE PICO */ +article .header-image { + display : inline-block; + box-shadow : var(--pico-card-box-shadow); + height : 240px; + margin-top : calc(var(--pico-block-spacing-vertical) * -1.25); + margin-bottom : var(--pico-block-spacing-vertical); + object-fit : cover; + width : 100%; + border : 2px solid var(--pico-muted-color); + border-radius : var(--pico-border-radius); +} +/* Page list of contents H3 + icons folder, docs */ +article h3 :is(span[data-tooltip]) {font-size:16px;} +/* TAGS */ +article>footer>.content-tags { + color : var(--pico-code-value-color); + padding-top : 1rem; +} +/* POST OPTIONS */ +article > .content-filters, +article > .content-options, +article > .content-time, +article > .content-history { + background : none; + border : var(--pico-border); + border-radius : var(--pico-border-radius); + width : auto; + margin-bottom : var(--pico-grid-row-gap); +} +.content-filters >.filter > label { + display : flex; + justify-content : space-between; + flex-wrap : wrap; + align-content : center; + align-items : center; + flex-direction : row; + width : auto; +} +/* 🚧📐 div.category-sub:not(:last-child) ,*/ +:is(div.list-content):not(:only-of-type), +:is(div.list-content):not(:last-of-type), +:is(div.category-sub, div.category-forum):not(:only-of-type), +:is(div.category-sub, div.category-forum):not(:last-of-type){ + margin-bottom : var(--pico-typography-spacing-vertical); +} +:is(div.list-content):last-of-type {} + +/* WAITING CONTENT */ +:is(div.list-content) :where(em.warning) { + background : #f44336; + color : #fff; +} + + +/* -------------------- PAGE NAV - CONTENT PAGINATION */ +nav.page-nav div { + align-items : center; + display : flex; + justify-content : center; + flex-wrap : wrap; + justify-content : space-between; + padding : var(--pico-spacing); + margin-bottom : var(--pico-spacing); + width : 100%; +} +/* -------------------- PAGENAVI D3FORUM COMMENTS PAGINATION */ +nav.pagination { + display : flex; + margin : .5em 0; + flex-direction : row; + justify-content : flex-end; +} +ul.pagenavi li { + border : 0; + color : var(--pico-primary); + border : 1px solid var(--pico-muted-border-color); + border-radius : var(--pico-border-radius); + box-shadow : var(--pico-box-shadow); + padding : 0; + text-align : center; + user-select : none; + margin : 0 .25rem; + min-width : 4ch; +} +/* ul.pagenavi li:last-of-type { margin: 0} */ + +ul.pagenavi li:not([aria-current]) a { + background : var(--pico-form-element-background-color); + + margin : 0; + padding : .25rem .5rem; + width : 100%; +} + +ul.pagenavi li[aria-current] { + border-color : var(--pico-primary); + padding : .25rem .5rem; +} +ul.pagenavi li:not([aria-current]):hover a { + border-color : var(--pico-primary); + background : var(--pico-primary-focus); + color : var(--pico-secondary-inverse); + padding : .25rem .5rem; +} + +/* -------------------- MODULE SITEMAP */ +.grid-sitemap { + grid-column : 1 / 7; + display : grid; + grid-template-columns: repeat(auto-fit, minmax(200px, auto)); + justify-content : center; +} +.grid-map { + padding : 1rem 1rem 0; + grid-column : 1 / 7; + display : grid; + grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); + align-items : center; +} +.grid-map h1 { + font-size : 2rem +} +.grid-map .map iframe { border-radius: var(--pico-border-radius)} + +/* -------------------- SYSTEM Notification */ +/* Replacing older confirmMsg errorMsgg resultMsg msg-warning */ +.alert { + background : var(--pico-muted-border-color); + border-left : 3px solid; + border-color : var(--pico-border-color); + border-radius : var(--pico-border-radius); + padding : var(--pico-spacing); + margin : var(--pico-block-spacing-vertical) auto; +} +.error, +.warning { border-color: var(--pico-del-color) } +.success { border-color: var(--pico-ins-color) } +.info { border-color: var(--pico-code-color) } +.result { border-color: var(--pico-code-color) } + +/* -------------------- MODULE USER PROFILE AVATAR */ +/* Generate CSS Avatar Letter */ +.user-tab-avatar #avatar { +--avatar-size :96px; + background-size : 100% 100%; + background-position: 0px 0px,0px 0px,0px 0px,0px 0px,0px 0px; + background-image: repeating-linear-gradient(315deg, #00FFFF2E 92%, #073AFF00 100%),repeating-radial-gradient(75% 75% at 238% 218%, #00FFFF12 30%, #073AFF14 39%),radial-gradient(99% 99% at 109% 2%, #00C9FFFF 0%, #073AFF00 100%),radial-gradient(99% 99% at 21% 78%, #7B00FFFF 0%, #073AFF00 100%),radial-gradient(160% 154% at 711px -303px, #2000FFFF 0%, #073AFFFF 100%); + border-radius : 50%; + box-shadow : 2px 2px 2px #111; + height : var(--avatar-size); + margin : 20px 0; + text-align : center; + width : var(--avatar-size); +} +/* Avatar Letter */ +.user-tab-avatar #username { + font-size : 0; + display : block; + color : var(--pico-primary ); + position : relative; + line-height : 1; + text-transform : uppercase; + top : calc(var(--avatar-size) / 4); /* 25% of parent */ + transition : font-size 0.3s ease-in; + filter : drop-shadow(2px 2px 5px #010); /* drop-shadow(offset-x offset-y blur-radius color) */ +} +.user-tab-avatar #username::first-letter { + font-size : calc(var(--avatar-size) / 2); /* 50% of parent */ +} + +/* -------------------- MODULE MESSAGE & USER PROFILE */ +/* Note - Mail tab active overrides the default properties */ + +.mail-list-item { + border-bottom : 1px solid hsl(219, 17%, 21%); + line-height : 2.5rem; +} +.mail-list-avatar { + border-radius : 50%; + height : 24px; + margin : auto .25em; + width : 24px; + vertical-align : middle; +} +.mail-list-author { + width : 190px; +} +.mail-list-author input:disabled { + pointer-events: auto; + cursor: not-allowed; +} +.mail-list-subject { + font-size : 16px; + } +.mail-list-date { + font-size : small; + } +.mail-list-date { + font-size : small; +} +.mail-subject{} +.mail-to {} +.mail-from {} +.mail-date {} +.mail-content{} + +/* -------------------- SCROLL-TO-TOP */ +.scroll-top { + position : absolute; + top : 12rem; + right : 2rem; + bottom : 0; + pointer-events : none; + z-index : 9000; +} +.scroll-top #ntop-bg {fill: var(--pico-progress-background-color);} +.scroll-top #ntop-arrow {fill: var(--pico-primary-hover);} +.scroll-top a:hover #ntop-bg {fill: var(--pico-primary-hover-background);} +.scroll-top a:hover #ntop-arrow {fill: var(--pico-primary-inverse);} +.scroll-top a { + position : sticky; + top : -5rem; + width : 3rem; + height : 3rem; + margin-bottom : -5rem; + transform : translateY(100vh); + backface-visibility: hidden; + display : inline-block; + text-decoration : none; + user-select : none; + pointer-events : all; + outline : none; + overflow : hidden; + /* Style */ + box-shadow : var(--pico-box-shadow); + border : var(--pico-border-width) solid var(--pico-border-color); + border-radius : var(--pico-border-radius); +} +.scroll-top a svg { + display : block; + border-radius : var(--border-radius); + width : 100%; + height : 100%; +} +.scroll-top a svg path { + transition : all 0.1s; +} +.scroll-top a #ntop-arrow { + transform : scale(0.66); + transform-origin: center; +} +@media print { + .scroll-top { display: none !important; } +} + +/* -------------------- Animation / Transition */ +@keyframes bottom { + 0% { transform:translateY(10px); opacity:0; } + 100% { opacity:1; transform:none;} +} +@keyframes top { + 0% { transform:translateY(-10px); opacity:0; } + 100% { opacity:1; transform:none; } +} +@keyframes left { + 0% { transform:translateX(-10px); opacity:0; } + 100% { opacity:1; transform:none; } +} diff --git a/html/themes/pico-green/templates/legacy/index.html b/html/themes/pico-green/templates/legacy/index.html new file mode 100644 index 000000000..990cbd603 --- /dev/null +++ b/html/themes/pico-green/templates/legacy/index.html @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/html/themes/pico-green/templates/legacy/legacy_app_start_page.html b/html/themes/pico-green/templates/legacy/legacy_app_start_page.html new file mode 100644 index 000000000..2e6f2a5bc --- /dev/null +++ b/html/themes/pico-green/templates/legacy/legacy_app_start_page.html @@ -0,0 +1,103 @@ +<{* Dev-Mode Toggle *}> +<{if $xoops_isadmin}>
<{$smarty.template}>
<{/if}> + +
+ +

Welcome to <{$xoops_sitename}>

+

<{$xoops_meta_description}>

+ +

Getting started

+ +

Your website is preconfigured with default settings. + The backend administration provides a graphical user interface, also called control panel or admin dashboard, + to configure your website, install components, translation and localization.

+
+ +
+ General Settings +

The system module allows you to customize the general settings of your platform, such as the name and slogan of the site, + language and theme, or close your site and restrict access by user groups. +

Start Page or Module

+

You can modify this template "app_start_page.html”, or you can select a module as the starting point of your website.

+ <{if $xoops_isadmin}> +

Administration »» System »» Preferences ⭧

+ <{/if}> +
+ +
+ +
+ Closed for maintenance +
The site is currently closed for maintenance.
+

Maintenance mode allows you to close the site and display a custom notice to visitors.
+ You can also control who has access to your site when it is closed.

+

When you're ready to launch your site, simply go to System Preferences to open it to the public.

+ +
    +
  1. Maintenance Mode - Turn your site off?
    Select yes to turn your site off so that only users in selected groups have access to the site.
    2. +
  2. Maintenance Mode - Select groups
    Groups that are allowed to access while the site is turned off. Users in the default webmasters group are always granted access.
    3. +
  3. Maintenance Mode - Message
    The text that is displayed when closing the site.
    4. +
+

You can edit the Template site_closed.html" and customize the design to match your notice, maintenance, coming soon, etc.

+ <{if $xoops_isadmin}> +

Administration »» System »» Preferences »» "Maintenance mode-Turn your site off?" ⭧

+ <{/if}> +
+ +
+ +
+ User Groups Permissions +

You can assign users to multiple groups and easily grant access to content of modules and blocks. + The installation wizard creates the following system-required groups :

+
    +
  1. Webmasters (Administrators) +
  2. Registered Users (members) +
  3. Anonymous Users (Guests) +
+
Required user groups cannot be deleted !
+ You can create new groups and change permissions for each new group created.
+ <{if $xoops_isadmin}> +

Administration »» User Groups »» Preferences ⭧

+ <{/if}> +
+ +
+ +
+ Modules Preferences +

Modules also have their own settings, accessible from their "preferences" menu.

+

For example, the render module allows you to manage the meta data of your website, themes (general appearance of your website), and templates that shape the contents of modules and blocks.

+ <{if $xoops_isadmin}> +

Administration »» Render »» Preferences ⭧

+ <{/if}> +
+ +
+ +
+ Module Blocks +

When you install a module, its blocks are automatically added to the Block Management system. + These blocks often have their own functionality settings and customization templates.

+
On the frontend, click the three-dot dropdown menu to edit the block.
+

For example, the parameters of the "Main Menu" block allow you to display icons for each module and subcategories.

+ <{if $xoops_isadmin}> +

Administration »» System »» Block Management ⭧

+ <{/if}> +
+ +
+ +
+ Theme +

A theme consists of a single HTML file that can include components, a CSS stylesheet, JavaScript, modules, and block templates. On the frontend, the Themes block allows users to select their preferred theme. + You first need to enable the themes users can choose from, in Theme Management.

+
Learn more about the Theme Options - Custom Parameters link in the Theme Management
+ <{if $xoops_isadmin}> +

Administration »» System »» Theme Management ⭧

+ <{/if}> +
+ +
+ +
diff --git a/html/themes/pico-green/templates/legacy/legacy_block_mainmenu.html b/html/themes/pico-green/templates/legacy/legacy_block_mainmenu.html new file mode 100644 index 000000000..31c3b9bce --- /dev/null +++ b/html/themes/pico-green/templates/legacy/legacy_block_mainmenu.html @@ -0,0 +1,31 @@ +<{if $xoops_isadmin}>
<{$smarty.template}>
<{/if}> + + diff --git a/html/themes/pico-green/templates/legacy/legacy_block_search.html b/html/themes/pico-green/templates/legacy/legacy_block_search.html new file mode 100644 index 000000000..c0eb26a27 --- /dev/null +++ b/html/themes/pico-green/templates/legacy/legacy_block_search.html @@ -0,0 +1,15 @@ +<{* Dev-Mode Toggle *}> +<{if $xoops_isadmin}>
<{$smarty.template}>
<{/if}> + +
+
+ + + <{xoops_input type=hidden name=andor value=AND}> + <{xoops_input type=hidden name=action value=results}> + +
+

+ <{$smarty.const._MB_LEGACY_ADVS}> +

+
diff --git a/html/themes/pico-green/templates/legacy/legacy_block_siteinfo.html b/html/themes/pico-green/templates/legacy/legacy_block_siteinfo.html new file mode 100644 index 000000000..f0bb80cf2 --- /dev/null +++ b/html/themes/pico-green/templates/legacy/legacy_block_siteinfo.html @@ -0,0 +1,30 @@ +<{* Dev-Mode Toggle *}> +<{if $xoops_isadmin}>
<{$smarty.template}>
<{/if}> + +
+<{if $block.showgroups == true}> + +<{/if}> + + + +
diff --git a/html/themes/pico-green/templates/legacy/legacy_block_themes.html b/html/themes/pico-green/templates/legacy/legacy_block_themes.html new file mode 100644 index 000000000..6eab64ac0 --- /dev/null +++ b/html/themes/pico-green/templates/legacy/legacy_block_themes.html @@ -0,0 +1,37 @@ +<{* Dev-Mode Toggle *}> +<{if $xoops_isadmin}>
<{$smarty.template}>
<{/if}> + +<{if $block.isEnableChanger == false}> + <{$smarty.const._MB_LEGACY_MESSAGE_CAN_NOT_THEME_CHANGE}> +<{else}> + +
+ +
+ <{if $block.mode==1}> + <{$block.theme_selected_name}> + + + <{/if}> + <{foreach item=theme_option from=$block.theme_options}> + + <{/foreach}> + + +

<{''|cat:$block.count|cat:''|string_format:$smarty.const._MB_LEGACY_LANG_NUMTHEME}>

+ + <{if $block.mode==1}> +
+ <{/if}> + +
+
+ +<{/if}> + diff --git a/html/themes/pico-green/templates/legacy/legacy_block_usermenu.html b/html/themes/pico-green/templates/legacy/legacy_block_usermenu.html new file mode 100644 index 000000000..47bda4ab8 --- /dev/null +++ b/html/themes/pico-green/templates/legacy/legacy_block_usermenu.html @@ -0,0 +1,47 @@ +<{* Dev-Mode Toggle +<{if $xoops_isadmin}>
<{$smarty.template}>
<{/if}>*}> +
+ <{$xoops_uname}> + <{$xoops_uname}> + +
diff --git a/html/themes/pico-green/templates/legacy/legacy_redirect.html b/html/themes/pico-green/templates/legacy/legacy_redirect.html new file mode 100644 index 000000000..e626aa713 --- /dev/null +++ b/html/themes/pico-green/templates/legacy/legacy_redirect.html @@ -0,0 +1,44 @@ + + + + + + +<{if !class_exists('AdelieDebug_Preload')}> + +<{/if}> +<{$xoops_sitename}> + + + + + + +
+
+

logo

+

<{$message}>

+ +

<{$lang_ifnotreload}>

+<{if class_exists('AdelieDebug_Preload')}> +

No automatic redirect during AdelieDebug execution.

+<{/if}> +
+
+ + + \ No newline at end of file diff --git a/html/themes/pico-green/templates/legacy/legacy_redirect_function.html b/html/themes/pico-green/templates/legacy/legacy_redirect_function.html new file mode 100644 index 000000000..8fab737e7 --- /dev/null +++ b/html/themes/pico-green/templates/legacy/legacy_redirect_function.html @@ -0,0 +1,176 @@ + + + +<?php echo htmlspecialchars($xoopsConfig['sitename']); ?> + + + + + + +
+
+ Loading +
+
+
+
+
+

+

+
+ + diff --git a/html/themes/pico-green/theme.html b/html/themes/pico-green/theme.html new file mode 100644 index 000000000..4782e9d87 --- /dev/null +++ b/html/themes/pico-green/theme.html @@ -0,0 +1,305 @@ + + + + + + + + <{$xoops_sitename}> - <{$xoops_pagetitle}> + + + + + + + + + + + + + + + + + + <{if $xoops_dirname == 'pico' && isset($content.ef.pico_img)}> + + <{else}> + + <{/if}> + + + + + + + + <{* ----- Browserconfig, Webmanifest, XML Sitemap located in the root directory ----- *}> + + + + <{* ----- Favicons THEME COLOR ----- *}> + + + + <{* ----- Favicon SVG - default /images/favicon ----- *}> + + <{* ----- Favicons located in the root directory ----- *}> + + + + + <{* ----- Resquesturi $xoops_requesturi : /module/dirname/id ----- *}> + + <{* ----- CSS - PicoCSS ----- *}> + + + + <{$xoops_module_header}> + + <{* ----- Defer preload of custom styles for jQuery UI, PrismJS ----- *}> + + + + + <{* ----- CSS - Theme ----- *}> + + <{* ----- CSS - Theme JSON ----- *}> + <{assign var="theme" value="`$xoops_imageurl`theme.json"}> + <{json file="$theme" theme="theme" local="true"}> + <{foreach item=theme key=key from=$theme}> + <{assign var='name' value=$theme->name}> + <{assign var='title' value=$theme->title}> + <{assign var='slogan' value=$theme->slogan}> + <{assign var='body' value=$theme->body}> + <{assign var='color' value=$theme->color}> + <{assign var='primary' value=$theme->primary}> + <{assign var='secondary' value=$theme->secondary}> + <{assign var='inverse' value=$theme->inverse}> + <{/foreach}> + <{* ----- CSS - MainMenu Active ----- *}> + + + +
+ +
+ +<{* REMOVE SMARTY COMMENTS TO DISPLAY IN TOPPAGE ONLY *}> +<{* if $xoops_is_top|default:'' *}> +<{include file="$xoops_theme/component/_inc_hero.html"}> +<{* /if *}> + + +<{* ----- TOPPAGE Center Blocks Title width prefix top- & none- (hide title) + Note : It's Center Block Left that triggers the top to display *}> +<{if !empty($xoops_clblocks)}> +<{foreach item=block from=$xoops_clblocks}> + <{if $block.title|strstr:"top-" && !$block.title|strstr:"hero"}> + <{include file="$xoops_theme/component/_inc_top_center.html"}> + <{/if}> +<{/foreach}> +<{/if}> + + + +<{* ----- Main *}> +
+ + <{if $xoops_showlblock==1}> + + <{/if}> + +
+
+ <{if !empty($xoops_contents)}> + <{$xoops_contents}> + <{else}> + <{include file='db:legacy_app_start_page.html'}> + <{/if}> +
+
+ + <{if $xoops_showrblock==1}> + + <{/if}> + +
+ +<{if $banner !=" "}> +
+
+
+ <{$xoops_banner}> +
+
+
+<{/if}> + +<{* ---------- CENTER BLOCKS *}> +<{if $xoops_showcblock==1}> +
+ +<{* ---------- BLOCK Center-Left *}> +<{if !empty($xoops_clblocks)}> +
+ <{foreach item=block from=$xoops_clblocks}> + <{if !$block.title|strstr:"admin" && !$block.title|strstr:"top" && !$block.title|strstr:"hero"}> +
+

+ <{if $xoops_isadmin}> + <{$block.title}> + <{include file="$xoops_theme/component/_inc_block_edit.html"}> + <{else}> + <{if !$block.title|strstr:"none"}><{$block.title}><{/if}> + <{/if}> +

+
<{$block.content}>
+
+ <{/if}> + <{/foreach}> +
+<{/if}> + +<{* ---------- BLOCK Center-Center *}> +<{if !empty($xoops_ccblocks)}> +
+ <{foreach item=block from=$xoops_ccblocks}> + <{if !$block.title|strstr:"admin" && !$block.title|strstr:"top" && !$block.title|strstr:"hero"}> +
+

+ <{if $xoops_isadmin}> + <{$block.title}> + <{include file="$xoops_theme/component/_inc_block_edit.html"}> + <{else}> + <{if !$block.title|strstr:"none"}><{$block.title}><{/if}> + <{/if}> +

+
<{$block.content}>
+
+ <{/if}> + <{/foreach}> +
+<{/if}> + +<{* ---------- BLOCK Center-Right *}> +<{if !empty($xoops_crblocks)}> +
+ <{foreach item=block from=$xoops_crblocks}> + <{if !$block.title|strstr:"admin" && !$block.title|strstr:"top" && !$block.title|strstr:"hero"}> +
+

+ <{if $xoops_isadmin}> + <{$block.title}> + <{include file="$xoops_theme/component/_inc_block_edit.html"}> + <{else}> + <{if !$block.title|strstr:"none"}><{$block.title}><{/if}> + <{/if}> +

+
<{$block.content}>
+
+ <{/if}> + <{/foreach}> +
+<{/if}> + +
+<{/if}> + +<{* ---------- Scroll to top *}> +
+ + + + + + +
+ +<{if $banner !=" "}> +
+
+ +
+
+<{/if}> + +
+ +<{* ---------- FOOTER CREDITS *}> + + +<{* ---------- ADMIN FRONT PANEL *}> +<{if $xoops_isadmin}> +<{include file="$xoops_theme/component/admin-panel.html"}> +<{/if}> + +<{* ---------- DO NOT DEFER Theme Plugins - LocalStoarage & SVG ! *}> + + +<{* ---------- PrismJS ----- *}> + + + \ No newline at end of file diff --git a/html/themes/pico-green/theme.json b/html/themes/pico-green/theme.json new file mode 100644 index 000000000..54ab2ebdd --- /dev/null +++ b/html/themes/pico-green/theme.json @@ -0,0 +1,19 @@ +{ + "theme": [ + { + "name": "Pico Green", + "version": "2.4.0", + "date": "2024-04-20", + "author": "Nuno Luciano", + "title": "Your Dream, Your Legacy", + "slogan": "The greatest legacy that you will leave to your friends is your story.", + "body": "#13171f", + "color": "#c2c7d0", + "primary": "#3c71f7", + "secondary": "#969eaf", + "contrast": "#dfe3eb", + "inverse": "#000", + "muted": "#7b8495" + } + ] +} \ No newline at end of file diff --git a/html/themes/pico-jade/.editorconfig b/html/themes/pico-jade/.editorconfig new file mode 100644 index 000000000..4d87d9c2e --- /dev/null +++ b/html/themes/pico-jade/.editorconfig @@ -0,0 +1,13 @@ +# editorconfig.org +# XCL 2.4.0 +# This file is for unifying the coding style for different editors and IDEs + +root = true + +[*] +charset = utf-8 +end_of_line = lf +insert_final_newline = true +indent_size = 4 +indent_style = space +trim_trailing_whitespace = true diff --git a/html/themes/pico-jade/.gitignore b/html/themes/pico-jade/.gitignore new file mode 100644 index 000000000..0903b73bc --- /dev/null +++ b/html/themes/pico-jade/.gitignore @@ -0,0 +1,33 @@ +# XCL 2.4.0 +# OS or Editor folders +._* +.cache +.DS_Store +.idea +.project +.settings +.tmproj +*.esproj +*.sublime-project +*.sublime-workspace +nbproject +Thumbs.db +/.vscode/ + +# Numerous always-ignore extensions +*.diff +*.err +*.log +*.orig +*.rej +*.swo +*.swp +*.vi +*.zip +*~ + +# Folders to ignore +/node_modules/ + +# Pico +.pico diff --git a/html/themes/pico-jade/CHANGELOG.md b/html/themes/pico-jade/CHANGELOG.md new file mode 100644 index 000000000..cd33105ae --- /dev/null +++ b/html/themes/pico-jade/CHANGELOG.md @@ -0,0 +1,30 @@ +# Change Log + +## XCL Theme Pico Jade v.2.4.0 + +XCL Theme built with PicoCSS v2.0.6 + +All notable changes will be documented in this file. + +## [XCL Theme 240 ] 2024-04-20 + +- Add component block-center with Title prefix 'top-' +- Add condition to show Top Block-center (prefix 'top-none') +- Add daarkmode for CKEDITOR4 +- Update PicoCSS +- Update prefix CSS classes +- Update Templates +- Update jQuery UI theme built with CSS vars +- Theme style with customized CSS vars +- Fix Smarty logic in D3Forum and Pico +- Improved Pico's menu and TOC +- Smarty 2.6 fix isset and |default:'' + +## [XCL Pico 157 ] 2024-02-02 + +- Admin front panel block-right with Title prefix 'admin-' +- Load PicoCSS from theme folder +- Fix PHP8 warning errors related to Smarty +- Admin panel (using block-right with prefix 'admin-' in block-title) +- Banner placement and link to client +- Header UserMenu and Theme mode diff --git a/html/themes/pico-jade/LICENSE.md b/html/themes/pico-jade/LICENSE.md new file mode 100644 index 000000000..7341f375b --- /dev/null +++ b/html/themes/pico-jade/LICENSE.md @@ -0,0 +1,22 @@ +MIT License + +Copyright (c) 2019-2024 Pico +Copyright (c) 2019-2024 Nuno Luciano, XCL Theme + +Permission is hereby granted, free of charge, to any person obtaining a copy +of this software and associated documentation files (the "Software"), to deal +in the Software without restriction, including without limitation the rights +to use, copy, modify, merge, publish, distribute, sublicense, and/or sell +copies of the Software, and to permit persons to whom the Software is +furnished to do so, subject to the following conditions: + +The above copyright notice and this permission notice shall be included in all +copies or substantial portions of the Software. + +THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR +IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, +FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE +AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER +LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, +OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE +SOFTWARE. diff --git a/html/themes/pico-jade/component/_inc_block_edit.html b/html/themes/pico-jade/component/_inc_block_edit.html new file mode 100644 index 000000000..5c93fb699 --- /dev/null +++ b/html/themes/pico-jade/component/_inc_block_edit.html @@ -0,0 +1,27 @@ +<{assign var=admin_block_edit value="`$xoops_url`/modules/altsys/admin/index.php?mode=admin&lib=altsys&page=mytplsform&tpl_file="}> +<{assign var=admin_block_custom value="`$xoops_url`/modules/altsys/admin/index.php?mode=admin&lib=altsys&page=myblocksadmin&dirname=__CustomBlocks__&op=edit&bid="}> +
+ + + + + +
+ + + Edit B-<{$block.id}> + + + Clone Block + <{* if "" != $block.template *}> + <{if $block.template ne ""}> + + <{else}> + + <{/if}> + + + + Edit template +
+
diff --git a/html/themes/pico-jade/component/_inc_hero.html b/html/themes/pico-jade/component/_inc_hero.html new file mode 100644 index 000000000..dc1b82e8f --- /dev/null +++ b/html/themes/pico-jade/component/_inc_hero.html @@ -0,0 +1,280 @@ + + + +
+ +
+ + + + + + + + +
+

<{$title}>

+

<{$slogan}>

+
+
+ +
+ + + + + + + + + + + + + + + + + + +
+
+
+
+
+
+
+
+ +
+ + +
+ + \ No newline at end of file diff --git a/html/themes/pico-jade/component/_inc_nav_theme.html b/html/themes/pico-jade/component/_inc_nav_theme.html new file mode 100644 index 000000000..cb8235205 --- /dev/null +++ b/html/themes/pico-jade/component/_inc_nav_theme.html @@ -0,0 +1,8 @@ +
+ Theme + +
diff --git a/html/themes/pico-jade/component/_inc_top_center.html b/html/themes/pico-jade/component/_inc_top_center.html new file mode 100644 index 000000000..e7bce3744 --- /dev/null +++ b/html/themes/pico-jade/component/_inc_top_center.html @@ -0,0 +1,147 @@ + + +<{if $xoops_showcblock==1}> +
+ +
+

<{$xoops_sitename}>

+

<{$xoops_slogan}>

+
+
+
+<{* ---------- BLOCK Center-Left *}> +<{if !empty($xoops_clblocks)}> +
+ <{foreach item=block from=$xoops_clblocks}> + <{if $block.title|strstr:"top-" && !$block.title|strstr:"hero"}> +
+

+ <{if $xoops_isadmin}> + <{$block.title}> + <{include file="$xoops_theme/component/_inc_block_edit.html"}> + <{else}> + <{if ! $block.title|strstr:"none"}><{$block.title|replace:'top-':''}><{/if}> + <{/if}> +

+
<{$block.content}>
+
+ <{/if}> + <{/foreach}> +
+<{/if}> + +<{* ---------- BLOCK Center-Center *}> +<{if !empty($xoops_ccblocks)}> +
+ <{foreach item=block from=$xoops_ccblocks}> + <{if $block.title|strstr:"top-" && !$block.title|strstr:"hero"}> +
+

+ <{if $xoops_isadmin}> + <{$block.title}> + <{include file="$xoops_theme/component/_inc_block_edit.html"}> + <{else}> + <{if ! $block.title|strstr:"none"}><{$block.title|replace:'top-':''}><{/if}> + <{/if}> +

+
<{$block.content}>
+
+ <{/if}> + <{/foreach}> +
+<{/if}> + +<{* ---------- BLOCK Center-Right *}> +<{if !empty($xoops_crblocks)}> +
+ <{foreach item=block from=$xoops_crblocks}> + <{if $block.title|strstr:"top-" && !$block.title|strstr:"hero"}> +
+

+ <{if $xoops_isadmin}> + <{$block.title}> + <{include file="$xoops_theme/component/_inc_block_edit.html"}> + <{else}> + <{if ! $block.title|strstr:"none"}><{$block.title|replace:'top-':''}><{/if}> + <{/if}> +

+
<{$block.content}>
+
+ <{/if}> + <{/foreach}> +
+<{/if}> + +
+ +
+<{/if}> \ No newline at end of file diff --git a/html/themes/pico-jade/component/admin-panel.html b/html/themes/pico-jade/component/admin-panel.html new file mode 100644 index 000000000..b3b68d380 --- /dev/null +++ b/html/themes/pico-jade/component/admin-panel.html @@ -0,0 +1,237 @@ +<{* XCube Panel Options *}> + + + +
+
+ +
+
+ +<{* ----- RIGHT-SIDEBAR ----- *}> +
+ +
Control Panel + + + +
+ + <{* ----- RIGHT-PANEL-BLOCK ----- *}> +
+ + <{* ---------- Block-Right *}> + <{if $xoops_showrblock==1}> + <{foreach item=block from=$xoops_rblocks}> + <{if $block.title|strstr:"admin"}> +
+

+ <{* REMOVE 'admin-' FROM BLOCK-TITLE *}> + <{$block.title|replace:'admin-':''}> + <{include file="$xoops_theme/component/_inc_block_edit.html"}> +

+
<{$block.content}>
+
+ <{/if}> + <{foreachelse}> +
+ Add block with position block-right
+ and block-title with prefix admin- +
+ <{/foreach}> + <{/if}> + <{* ----- ADMIN PREVIEW ----- *}> +
Preview Layout
+
+ + + + +
+ +
+ <{* -----/ RIGHT-PANEL-BLOCK *}> + +
+<{* -----/ RIGHT-SIDEBAR *}> + diff --git a/html/themes/pico-jade/component/block-left.html b/html/themes/pico-jade/component/block-left.html new file mode 100644 index 000000000..dabcad9fe --- /dev/null +++ b/html/themes/pico-jade/component/block-left.html @@ -0,0 +1,18 @@ +<{* ---------- Block-Left *}> +<{foreach item=block from=$xoops_lblocks}> +<{if !$block.title|strstr:"Topage" && !$block.title|strstr:"User" || !$block.id==28}> +
+

+ <{if $xoops_isadmin}> + <{$block.title|replace:' ':'-'}> + <{include file="$xoops_theme/component/_inc_block_edit.html"}> + <{else}> + <{if ! $block.title|strstr:"none"}><{$block.title}><{/if}> + <{/if}> +

+
+ <{$block.content}> +
+
+<{/if}> +<{/foreach}> diff --git a/html/themes/pico-jade/component/block-right.html b/html/themes/pico-jade/component/block-right.html new file mode 100644 index 000000000..1edb488a6 --- /dev/null +++ b/html/themes/pico-jade/component/block-right.html @@ -0,0 +1,16 @@ +<{* ---------- Block-Right *}> +<{foreach item=block from=$xoops_rblocks}> +<{if !$block.title|strstr:"admin"}> +
+

+ <{if $xoops_isadmin}> + <{$block.title}> + <{include file="$xoops_theme/component/_inc_block_edit.html"}> + <{else}> + <{if ! $block.title|strstr:"none"}><{$block.title}><{/if}> + <{/if}> +

+
<{$block.content}>
+
+<{/if}> +<{/foreach}> diff --git a/html/themes/pico-jade/css/dropdown.css b/html/themes/pico-jade/css/dropdown.css new file mode 100644 index 000000000..6bd332f2b --- /dev/null +++ b/html/themes/pico-jade/css/dropdown.css @@ -0,0 +1,91 @@ +/* +* XCL Theme Dropdown +* +* @version 2.4.0 +* @update 2024-04-20 +* @Date 2024-02-02 +* @author Nuno Luciano ( https://github.com/gigamaster ) +* @copyright (c) 2005-2024 The XOOPSCube Project, authors +* @license MIT +* @link https://github.com/xoopscube +*/ +/* -------------------- Dropdown Menu */ + +div.dropdown { + position : relative; + display : block; +} +div.dropdown a.dropdown-toggle:not(.ui-tabs-anchor) { + background : transparent; /*var(--background-color);*/ + border : none; + border-radius : var(--pico-border-radius); + box-shadow : none; + color : var(--pico-primary-color); + cursor : pointer; + display : block; + font : inherit; + margin : 0; + padding : 0 .25rem .25rem; + transition : all var(--transition-time) var(--transition-cube); +} +div.dropdown a.dropdown-toggle:hover:not(.ui-tabs-anchor) { + background : var(--primary-focus); /* link [div][a] */ + box-shadow : none; + color : var(--primary-hover); + background : var(--pico-primary-hover-background); + color : var(--pico-primary-inverse); +} +div.dropdown.isopen div.dropdown-content { + display : block; + z-index : var(--z-above); +} +div.dropdown-content { + background : var(--pico-form-element-background-color); + border : var(--pico-border-width) solid var(--pico-form-element-border-color); + border-radius : var(--pico-border-radius); + box-shadow : var(--pico-card-box-shadow); /* 0px 2px 4px 1px hsla(0, 0%, 0%, 0.74); */ + color : var(--pico-primary-color); + display : none; + + min-width : 190px; + padding : .5rem; + position : absolute; + right : -10px; + + text-align : left; + top : 100%; + transition : all var(--transition-time) var(--transition-cube); +} +@media (min-width: 992px) { + .dropdown-content { + right : 1px; /* Fix device Viewport */ + } +} +div.dropdown div.dropdown-content ul { + margin : 0; + padding : 0; + list-style : none; +} +div.dropdown div.dropdown-content ul li { + background : transparent; + padding : 0; + width : 100%; +} +/* Dropdown links */ +div.dropdown div.dropdown-content a { + border-radius : var(--pico-border-radius); + color : var(--pico-primary-color); + display : block; + font-size : 16px; + padding : calc(var(--pico-form-element-spacing-vertical)* .8) var(--pico-form-element-spacing-horizontal); + text-decoration : none; +} +/* Change color of dropdown links on hover */ +div.dropdown div.dropdown-content a:hover { + background : var(--pico-primary-hover-background); + color : var(--pico-primary-inverse); +} + +div.dropdown div.dropdown-content a > svg { + margin : var(--dropdown-icon-margin); +} diff --git a/html/themes/pico-jade/css/index.html b/html/themes/pico-jade/css/index.html new file mode 100644 index 000000000..990cbd603 --- /dev/null +++ b/html/themes/pico-jade/css/index.html @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/html/themes/pico-jade/css/jquery-ui.theme.css b/html/themes/pico-jade/css/jquery-ui.theme.css new file mode 100644 index 000000000..9adef581c --- /dev/null +++ b/html/themes/pico-jade/css/jquery-ui.theme.css @@ -0,0 +1,693 @@ +/* +* XCL Theme Jquery-UI for PicoCSS v206 +* +* @version 2.4.0 +* @update 2024-04-20 +* @date 2024-02-02 +* @author Nuno Luciano ( https://github.com/gigamaster ) +* @copyright (c) 2005-2024 The XOOPSCube Project, authors +* @license MIT +* @link https://github.com/xoopscube +*/ + +/* Component containers +----------------------------------*/ +.ui-dialog.ui-widget.ui-front { + background : var(--pico-form-element-background-color); + box-shadow : var(--pico-box-shadow ); + padding : calc(var(--block-spacing-horizontal) * 1); + border : var(--pico-border-width) solid var(--pico-form-element-border-color); + background-color: var(--pico-modal-overlay-background-color); + backdrop-filter : var(--pico-modal-overlay-backdrop-filter); + -webkit-backdrop-filter: var(--pico-modal-overlay-backdrop-filter); + +} +.ui-dialog-dragging > .ui-widget-header { + background: var(--pico-primary-background); +} +.ui-widget { + font-size : 1rem +} +.ui-widget .ui-widget { + font-size : 1rem +} +.ui-widget input, +.ui-widget select, +.ui-widget textarea, +.ui-widget button { + outline : none; + font-family : inherit; + font-size : 1rem +} +.ui-widget.ui-widget-content { + /* border : 1px solid var(--pico-form-element-border-color); */ + border : 1px solid transparent; + background : var(--pico-form-element-background-color); + border-radius : var(--pico-border-radius); + box-shadow : var(--pico-card-box-shadow); + margin : 0; +} + +.ui-widget-content { + background : var(--pico-form-element-background-color); + border : 1px solid var(--pico-form-element-border-color); + color : var(--pico-color); +} +.ui-widget-content a { + color : var(--pico-primary); +} +.ui-widget-header { + background : var(--pico-card-sectioning-background-color); + border : var(--pico-border-width) solid var(--pico-border-color); + border-radius : var(--pico-border-radius); + color : var(--pico-color); + font-weight : var(--pico-font-weight); + list-style : none; +} +/* custom spacing */ +:is(.ui-menu) li.ui-widget-header { + /* custom spacing */ + padding: .175em .5em; + border: 1px solid var(--pico-dropdown-border-color) +} +.ui-widget-header a { + color : var(--pico-color); +} + +/* Interaction states +----------------------------------*/ +.ui-state-default, +.ui-widget-content .ui-state-default, +.ui-widget-header .ui-state-default, +.ui-button, +/* greater specificity when clicked or hovered */ +html .ui-button.ui-state-disabled:hover, +html .ui-button.ui-state-disabled:active { + background-color: var(--pico-background-color); + border : 1px solid var(--pico-form-element-border-color); + color : var(--pico-contrast); + font : var(--pico-font-size); + font-weight : inherit; +} +.ui-state-default a, +.ui-state-default a:link, +.ui-state-default a:visited, +a.ui-button, +a:link.ui-button, +a:visited.ui-button, +.ui-button { + background-color: var(--pico-background-color); + border: 1px solid transparent; + color : var(--pico-primary); + text-decoration : none; +} +.ui-state-hover, +.ui-widget-content .ui-state-hover, +.ui-widget-header .ui-state-hover, +.ui-state-focus, +.ui-widget-content .ui-state-focus, +.ui-widget-header .ui-state-focus, +.ui-button:hover, +.ui-button:focus { + background : var(--pico-primary-hover-background); + border : 1px solid var(--pico-primary-hover-border); + color : var(--pico-color); + font-weight : inherit; + outline : none; +} +.ui-state-hover a, +.ui-state-hover a:hover, +.ui-state-hover a:link, +.ui-state-hover a:visited, +.ui-state-focus a, +.ui-state-focus a:hover, +.ui-state-focus a:link, +.ui-state-focus a:visited, +a.ui-button:hover, +a.ui-button:focus { + background : var(--pico-primary-hover-background); + border : 1px solid var(--pico-primary-hover-border); + color : var(--pico-primary-hover); + font : var(--pico-font-size); + font-weight : inherit; + text-decoration : none; + outline : none; +} +.ui-visual-focus { + box-shadow : var(--pico-primary-focus); +} +.ui-state-active, +.ui-widget-content .ui-state-active, +.ui-widget-header .ui-state-active, +a.ui-button:active, +.ui-button:active, +.ui-button.ui-state-active:hover { + background : var(--pico-primary-hover-background); + border : 1px solid var(--pico-primary-hover-border); + color : var(--pico-primary-inverse); + font-weight : inherit; + outline : none; +} +.ui-state-active a, +.ui-state-active a:link, +.ui-state-active a:visited, +:where(.dropdown-content):not(a.dropdown-item) { + border : 1px solid var(--pico-primary-hover-border); + color : var(--pico-primary-focus); +} +/* Checkbox */ +.ui-icon-background, +.ui-state-active .ui-icon-background { + background-color: var(--pico-primary-hover-background); + border : 1px solid var(--pico-primary-hover-border); +} + +/* Interaction Cues +----------------------------------*/ +.ui-state-highlight, +.ui-widget-content .ui-state-highlight, +.ui-widget-header .ui-state-highlight { + background : var(--pico-primary-hover-background); + border : 1px solid var(--pico-primary-hover-border); + color : var(--pico-primary-inverse); +} +.ui-state-checked { + background : var(--ui-state-checked-bg); + border : var(--ui-state-checked-border); +} +.ui-state-highlight a, +.ui-widget-content .ui-state-highlight a, +.ui-widget-header .ui-state-highlight a { + color : var(--pico-primary-inverse); +} +.ui-state-error, +.ui-widget-content .ui-state-error, +.ui-widget-header .ui-state-error { + background : var(--ui-state-error-bg); + border : 1px solid var(--pico-primary-hover-border); + color : var(--ui-state-error-color); +} +.ui-state-error a, +.ui-widget-content .ui-state-error a, +.ui-widget-header .ui-state-error a { + color : var(--ui-state-error-link); +} +.ui-state-error-text, +.ui-widget-content .ui-state-error-text, +.ui-widget-header .ui-state-error-text { + color : var(--ui-state-error-text); +} +.ui-priority-primary, +.ui-widget-content .ui-priority-primary, +.ui-widget-header .ui-priority-primary { + font-weight : inherit; +} +.ui-priority-secondary, +.ui-widget-content .ui-priority-secondary, +.ui-widget-header .ui-priority-secondary { + font-weight : inherit; + opacity : 0.7; +} +.ui-state-disabled, +.ui-widget-content .ui-state-disabled, +.ui-widget-header .ui-state-disabled { + background-image: none; + border : 1px solid var(--pico-muted-border-color); + opacity : 0.35; +} + +/* Icons +----------------------------------*/ +/* states and images - RELATIVE TO XCL /COMMON */ +.ui-icon { + width: 16px; + height: 16px; +} +.ui-icon, +.ui-widget-content .ui-icon { + background-image: url("../../../common/js/images/ui-icons_cccccc_256x240.png"); +} +.ui-widget-header .ui-icon { + background-image: url("../../../common/js/images/ui-icons_cccccc_256x240.png"); +} +.ui-state-hover .ui-icon, +.ui-state-focus .ui-icon, +.ui-button:hover .ui-icon, +.ui-button:focus .ui-icon { + background-image: url("../../../common/js/images/ui-icons_ffffff_256x240.png"); +} +.ui-state-active .ui-icon, +.ui-button:active .ui-icon { + background-image: url("../../../common/js/images/ui-icons_ffffff_256x240.png"); +} +.ui-state-highlight .ui-icon, +.ui-button .ui-state-highlight.ui-icon { + background-image: url("../../../common/js/images/ui-icons_ffffff_256x240.png"); +} +.ui-state-error .ui-icon, +.ui-state-error-text .ui-icon { + background-image: url("../../../common/js/images/ui-icons_ffffff_256x240.png"); +} +.ui-button .ui-icon { + background-image: url("../../../common/js/images/ui-icons_cccccc_256x240.png"); +} + + +/* Misc visuals +----------------------------------*/ + +/* Corner radius */ +.ui-corner-all, +.ui-corner-top, +.ui-corner-left, +.ui-corner-tl { + border-top-left-radius: var(--pico-border-radius); +} +.ui-corner-all, +.ui-corner-top, +.ui-corner-right, +.ui-corner-tr { + border-top-right-radius: var(--pico-border-radius); +} +.ui-corner-all, +.ui-corner-bottom, +.ui-corner-left, +.ui-corner-bl { + border-bottom-left-radius: var(--pico-border-radius); +} +.ui-corner-all, +.ui-corner-bottom, +.ui-corner-right, +.ui-corner-br { + border-bottom-right-radius: var(--pico-border-radius); +} + +/* Overlays */ +/*Applies 100% width & height dimensions to an overlay screen*/ +.ui-widget-overlay { + background : var(--ui-widget-overlay-bg); + backdrop-filter : var(--pico-modal-overlay-backdrop-filter); + opacity : .8; +} +/*Sets box-shadow x & y offset, blur radius and color.*/ +.ui-widget-shadow { + box-shadow : var(--ui-widget-shadow); +} + +/* Accordion +----------------------------------*/ +.ui-accordion .ui-accordion-header { + background : var(--pico-background-color); + border : 1px solid var(--pico-accordion-border-color); + border-radius : var(--pico-border-radius); + box-shadow : var(--pico-box-shadow); + cursor : pointer; + display : block; + margin : var(--accordion-margin); + outline : 0; + margin-bottom : .15em; + padding : .5em; + position : relative; + -moz-user-select: none; + user-select : none; + transition : background-color var(--pico-transition); + +} +.ui-accordion .ui-accordion-content { + background : var(--pico-dropdown-background-color); + border : var(--pico-border-width) solid var(--pico-dropdown-border-color); + border-top : 0; + border-radius : var(--pico-border-radius); + color : var(--pico-color); + padding : var(--pico-form-element-spacing-vertical) var(--pico-form-element-spacing-horizontal); + overflow : auto; + transition: opacity var(--pico-transition), transform 0s ease-in-out 1s; +} +:is(.ui-accordion-header-active):not([aria-selected="false"][aria-expanded="false"]) { + color:var(--pico-primary-color); +} +:is(.ui-accordion-header):not([aria-selected="true"][aria-expanded="true"]) { + color:var(--pico-secondary); +} + +/* UI-MENU */ +.ui-menu { + background : var(--pico-form-element-background-color); + border : var(--pico-border-width) solid var(--pico-form-element-border-color); + border-radius : var(--pico-border-radius); + display : block; + list-style : none!important; + margin : var(--ui-menu-margin); + /* Override jQuery-UI css value */ + outline : 0; + padding:5px; + -moz-user-select: none; + user-select: none; +} +.ui-menu .ui-menu { + /* IMPORTANT override ui-widget-content */ + background : var(--pico-form-element-background-color); + border : var(--pico-border-width) solid var(--pico-form-element-border-color); + border-radius : var(--pico-border-radius); + position : absolute; + -moz-user-select: none; + user-select: none; +} +.ui-menu .ui-menu-item-wrapper { + background : inherit; + border : 1px solid transparent; + border-radius : var(--pico-border-radius); + color : var(--pico-color); + padding : .125em .25em; + /* position: relative;*/ +} +.ui-menu-icons { + position: relative +} +.ui-menu-icons .ui-menu-item-wrapper { + padding-left: 1.5em +} +.ui-menu .ui-icon { + position: absolute; + top: 0; + bottom: 0; + left: .2em; + margin: auto 0 +} +.ui-menu .ui-menu-icon { + left: auto; + right: 0 +} +.ui-menu .ui-state-focus, +.ui-menu .ui-state-active { + /* IMPORTANT override default UI properties */ + background : var(--pico-primary-hover-background); + border : 1px solid var(--pico-primary-hover-border); + border-radius : var(--pico-border-radius); + color : var(--pico-primary-inverse); + margin : 0; +} + +.ui-button:not(.ui-spinner-button,.ui-dialog-titlebar-close,.ui-controlgroup-item), +.ui-button:link, +.ui-button:visited { +--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)); + background-color: var(--pico-background-color); + border: var(--pico-border-width) solid var(--pico-border-color); + border-radius: var(--pico-border-radius); + box-shadow: var(--pico-box-shadow); + color: var(--pico-color); + cursor: pointer; + font-weight: var(--pico-font-weight); + font-size: var(--pico-font-size); + line-height: var(--pico-line-height); + outline: 0; + padding: var(--pico-form-element-spacing-vertical) var(--pico-form-element-spacing-horizontal); + text-align: center; + text-decoration: none; + -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); +} +.ui-button:hover { +--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); +} +/* +ref: https://api.jquery.com/first/ +*/ +:is(.ui-selectmenu-button.ui-button) { + padding : var(--pico-form-element-spacing-vertical) var(--pico-form-element-spacing-horizontal); + margin-bottom : var(--pico-spacing); + background-color: var(--pico-form-element-background-color); + border : var(--pico-border-width) solid var(--pico-form-element-border-color); + border-radius : var(--pico-border-radius); + box-shadow : var(--pico-button-hover-box-shadow, 0 0 0 rgba(0, 0, 0, 0.2)); + color : var(--pico-form-element-placeholder-color); + cursor : pointer; + height : calc(1rem* var(--pico-line-height) + var(--pico-form-element-spacing-vertical)* 2 + var(--pico-border-width)* 2); + line-height : inherit; + text-align : left; + -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); +} +:is(.ui-selectmenu-button-open.ui-button) { +background-color: var(--pico-form-element-background-color); +border : var(--pico-border-width) solid var(--pico-form-element-border-color); +color : var(--pico-form-element-placeholder-color); +} +.ui-selectmenu-menu .ui-menu .ui-selectmenu-optgroup { + font-weight : var(--pico-font-weight); + margin : 0; +} +.ui-controlgroup-horizontal:first-child .ui-controlgroup-item:nth-of-type(1), +.ui-controlgroup-horizontal > .ui-selectmenu-button { + border-top-left-radius: var(--pico-border-radius) !important; + border-bottom-left-radius: var(--pico-border-radius) !important; +} +.ui-controlgroup-horizontal .ui-controlgroup-item:last-child { + border-top-right-radius: var(--pico-border-radius) !important; + border-bottom-right-radius: var(--pico-border-radius) !important; +} +.ui-controlgroup-vertical .ui-controlgroup-item:first-child, +.ui-controlgroup-vertical .ui-selectmenu-button { + border-top-left-radius: var(--pico-border-radius) !important; + border-top-right-radius: var(--pico-border-radius) !important; +} +.ui-controlgroup-vertical .ui-controlgroup-item:last-child { + border-bottom-left-radius: var(--pico-border-radius); + border-bottom-right-radius: var(--pico-border-radius) !important; +} +.ui-controlgroup { + display : inline-block; + vertical-align : middle; +} +:where(.ui-controlgroup ) .ui-controlgroup-item:not(.ui-spinner) { + background : var(--pico-background-color); + border : var(--pico-border-width) solid var(--pico-form-element-border-color); + color : var(--pico-color); + padding : var(--pico-form-element-spacing-vertical) var(--pico-form-element-spacing-horizontal); + margin : 0; +} +.ui-controlgroup .ui-controlgroup-label span { + font-size : 1rem; + color : var(--pico-primary); +} +.ui-controlgroup-horizontal .ui-controlgroup-label + .ui-controlgroup-item { + border-left : var(--pico-border-width) solid var(--pico-accordion-border-color); +} + +/* RESET BROWSER SPINNER */ +input::-webkit-outer-spin-button, +input::-webkit-inner-spin-button { +display: none; +-webkit-appearance: none; +margin: 0; /* reset margin */ +outline: none; +} +input[type=number] { +-moz-appearance:textfield; /* Firefox */ +} +.ui-spinner-input { + -webkit-appearance: none; + -moz-appearance: textfield; + appearance: none; + border: var(--pico-border-width) solid var(--pico-form-element-border-color); + border-radius: var(--pico-border-radius); + margin: 0!important; + padding-right: 30px!important; + min-width: 8ch; + text-align: center; + vertical-align: middle; + outline: none; +} +.ui-spinner-input:focus{outline:none;box-shadow: 0 0 0 var(--pico-outline-width) var(--pico-primary-focus);} +.ui-spinner a.ui-spinner-button { + position: absolute; + height: 28px!important; + background: var(--pico-primary-underline); +} +.ui-spinner a.ui-spinner-button:hover{ +background: var(--pico-primary-hover-background); +} + +/* CHECKBOX + icon */ +.ui-checkboxradio-label .ui-icon-background { +--pico-background-color: var(--pico-primary-background); +--pico-border-color: var(--pico-primary-border); + -webkit-appearance: none; + -moz-appearance: none; + appearance: none; + accent-color : var(--pico-primary); + background : var(--pico-form-element-border-color); + border : 2px solid var(--pico-form-element-border-color); + border-radius : 3px; + box-shadow : var(--ui-state-check-shadow); + background-position: center; + background-size : .75em auto; + background-repeat: no-repeat; +} +/* RADIO */ +.ui-checkboxradio-radio-label .ui-icon-background { + background : white; + border : 8px solid var(--pico-form-element-border-color); + border-radius : 50%; + box-shadow : var(--ui-state-check-shadow); + height : var(--ui-state-check-height); + width : var(--ui-state-check-width); +} +.ui-checkboxradio-radio-label.ui-checkboxradio-checked .ui-icon, +.ui-checkboxradio-radio-label.ui-checkboxradio-checked:hover .ui-icon { + background-image: var(--pico-icon-checkbox); + background : white; + cursor : pointer; +} + +.ui-datepicker table { + font-size : 16px; +} +.ui-datepicker .ui-datepicker-prev, +.ui-datepicker .ui-datepicker-next{ + border : 1px solid transparent; + position : absolute; + top : 2px; + width : 1.8em; + height : 1.8em +} +.ui-datepicker .ui-datepicker-prev-hover, +.ui-datepicker .ui-datepicker-next-hover{ + top:2px +} +.ui-datepicker .ui-datepicker-prev{ + left:2px +} +.ui-datepicker .ui-datepicker-next{ + right:2px +} +.ui-datepicker .ui-datepicker-prev-hover{ + left:2px +} +.ui-datepicker .ui-datepicker-next-hover{ + right:2px +} +.ui-datepicker .ui-datepicker-prev span, +.ui-datepicker .ui-datepicker-next span{ + display:block; + position:absolute; + left:50%; + margin-left:-8px; + top:50%; + margin-top:-8px +} +.ui-datepicker .ui-datepicker-title{ + margin:0 2.3em; + line-height:1.8em; + text-align:center +} + +.ui-progressbar { + height : var(--ui-progressbar-height); +} +.ui-progressbar .ui-progressbar-value { + background : var(--ui-progressbar-value); +} + + +/* -------------------- -------------------- jQUERY UI TAB */ +.ui-tabs { + position : relative; + border : none; + border-radius : var(--pico-border-radius); + margin : 0; + padding:0.875rem; + list-style : none; +} +.ui-tabs .ui-tabs-nav { + margin : 0; + padding : .2em .2em 0; +} +/* The list of tabs */ +.ui-tabs .ui-tabs-nav { + background : transparent; + border : none; + border-top-left-radius : var(--pico-border-radius); + border-top-right-radius : var(--pico-border-radius); + box-shadow : var(--pico-box-shadow); + cursor : pointer; + display : inline-block; + line-height : 1.25; +} +.ui-tabs .ui-tabs-nav li { + /* border: 1px solid var(--pico-primary-underline); */ + list-style: none; + float: left; + position: relative; + top: 0; + margin: 0; + white-space: nowrap; +} +/* The anchors used to switch panels. */ +.ui-tabs .ui-tabs-nav .ui-tabs-anchor { + /* background : var(--pico-primary-underline); */ + background : transparent; + color : var(--pico-primary); + float : left; + text-decoration : none; +} +/* li .ui-tabs-anchor:first-child { +border-top-left-radius: var(--pico-border-radius); +} +li .ui-tabs-anchor:last-child { + border-top-right-radius: var(--pico-border-radius); +} */ + +.ui-tabs .ui-tabs-nav li.ui-tabs-active { + margin-bottom: 0; + padding-bottom: 0; + border-radius: var(--pico-border-radius); + border:none; +} +:is(.ui-tabs-tab).ui-state-default,.ui-state-default{ + border-radius: var(--pico-border-radius); +} +.ui-tabs-collapsible .ui-tabs-nav li.ui-tabs-active .ui-tabs-anchor { + cursor: pointer; +} +.ui-tabs .ui-tabs-nav .ui-tabs-anchor:hover, +.ui-tabs .ui-tabs-nav li.ui-tabs-active .ui-tabs-anchor { + background : var(--pico-primary-hover-background); + color : var(--pico-contrast); +} + +:where(li.ui-tabs-tab, a.ui-tabs-anchor):first-child {border-top-left-radius: var(--pico-border-radius)} +:where(li.ui-tabs-tab, a.ui-tabs-anchor):last-child {border-top-right-radius: var(--pico-border-radius)} +.ui-tabs .ui-tabs-panel { + background : var(--pico-card-background-color); + display : block; + border : var(--ui-tab-panel-border); + padding : var(--pico-block-spacing-vertical) var(--pico-block-spacing-horizontal); +} + +/* CUSTOMIZED content loading via an Ajax call will have the ui-tabs-loading class. */ +.ui-tabs-loading { + border : var(--ui-tabs-loading); /* TODO */ +} + +/* -------------------- jQUERY UI Tooltip */ +/*.ui-tooltip { + padding: 8px; + position: absolute; + z-index: 9999; + max-width: 300px; +} +body .ui-tooltip { + border-width: 2px; +}*/ diff --git a/html/themes/pico-jade/css/pico.jade.min.css b/html/themes/pico-jade/css/pico.jade.min.css new file mode 100644 index 000000000..f5c9a8955 --- /dev/null +++ b/html/themes/pico-jade/css/pico.jade.min.css @@ -0,0 +1,4 @@ +@charset "UTF-8";/*! + * Pico CSS ✨ v2.0.6 (https://picocss.com) + * Copyright 2019-2024 - Licensed under MIT + */:root{--pico-font-family-emoji:"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";--pico-font-family-sans-serif:system-ui,"Segoe UI",Roboto,Oxygen,Ubuntu,Cantarell,Helvetica,Arial,"Helvetica Neue",sans-serif,var(--pico-font-family-emoji);--pico-font-family-monospace:ui-monospace,SFMono-Regular,"SF Mono",Menlo,Consolas,"Liberation Mono",monospace,var(--pico-font-family-emoji);--pico-font-family:var(--pico-font-family-sans-serif);--pico-line-height:1.5;--pico-font-weight:400;--pico-font-size:100%;--pico-text-underline-offset:0.1rem;--pico-border-radius:0.25rem;--pico-border-width:0.0625rem;--pico-outline-width:0.125rem;--pico-transition:0.2s ease-in-out;--pico-spacing:1rem;--pico-typography-spacing-vertical:1rem;--pico-block-spacing-vertical:var(--pico-spacing);--pico-block-spacing-horizontal:var(--pico-spacing);--pico-grid-column-gap:var(--pico-spacing);--pico-grid-row-gap:var(--pico-spacing);--pico-form-element-spacing-vertical:0.75rem;--pico-form-element-spacing-horizontal:1rem;--pico-group-box-shadow:0 0 0 rgba(0, 0, 0, 0);--pico-group-box-shadow-focus-with-button:0 0 0 var(--pico-outline-width) var(--pico-primary-focus);--pico-group-box-shadow-focus-with-input:0 0 0 0.0625rem var(--pico-form-element-border-color);--pico-modal-overlay-backdrop-filter:blur(0.375rem);--pico-nav-element-spacing-vertical:1rem;--pico-nav-element-spacing-horizontal:0.5rem;--pico-nav-link-spacing-vertical:0.5rem;--pico-nav-link-spacing-horizontal:0.5rem;--pico-nav-breadcrumb-divider:">";--pico-icon-checkbox:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(255, 255, 255)' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");--pico-icon-minus:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(255, 255, 255)' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='5' y1='12' x2='19' y2='12'%3E%3C/line%3E%3C/svg%3E");--pico-icon-chevron:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(136, 145, 164)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");--pico-icon-date:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(136, 145, 164)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='18' rx='2' ry='2'%3E%3C/rect%3E%3Cline x1='16' y1='2' x2='16' y2='6'%3E%3C/line%3E%3Cline x1='8' y1='2' x2='8' y2='6'%3E%3C/line%3E%3Cline x1='3' y1='10' x2='21' y2='10'%3E%3C/line%3E%3C/svg%3E");--pico-icon-time:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(136, 145, 164)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cpolyline points='12 6 12 12 16 14'%3E%3C/polyline%3E%3C/svg%3E");--pico-icon-search:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(136, 145, 164)' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'%3E%3C/circle%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'%3E%3C/line%3E%3C/svg%3E");--pico-icon-close:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(136, 145, 164)' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='18' y1='6' x2='6' y2='18'%3E%3C/line%3E%3Cline x1='6' y1='6' x2='18' y2='18'%3E%3C/line%3E%3C/svg%3E");--pico-icon-loading:url("data:image/svg+xml,%3Csvg fill='none' height='24' width='24' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg' %3E%3Cstyle%3E g %7B animation: rotate 2s linear infinite; transform-origin: center center; %7D circle %7B stroke-dasharray: 75,100; stroke-dashoffset: -5; animation: dash 1.5s ease-in-out infinite; stroke-linecap: round; %7D @keyframes rotate %7B 0%25 %7B transform: rotate(0deg); %7D 100%25 %7B transform: rotate(360deg); %7D %7D @keyframes dash %7B 0%25 %7B stroke-dasharray: 1,100; stroke-dashoffset: 0; %7D 50%25 %7B stroke-dasharray: 44.5,100; stroke-dashoffset: -17.5; %7D 100%25 %7B stroke-dasharray: 44.5,100; stroke-dashoffset: -62; %7D %7D %3C/style%3E%3Cg%3E%3Ccircle cx='12' cy='12' r='10' fill='none' stroke='rgb(136, 145, 164)' stroke-width='4' /%3E%3C/g%3E%3C/svg%3E")}@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.contrast,a.secondary{--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}tfoot td,tfoot th,thead td,thead th{--pico-font-weight:600;--pico-border-width:0.1875rem}code,kbd,pre,samp{--pico-font-family:var(--pico-font-family-monospace)}kbd{--pico-font-weight:bolder}:where(select,textarea),input:not([type=submit],[type=button],[type=reset],[type=checkbox],[type=radio],[type=file]){--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=group]:has(button.secondary:focus,[type=submit].secondary:focus,[type=button].secondary:focus,[role=button].secondary:focus),[role=search]: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=group]:has(button.contrast:focus,[type=submit].contrast:focus,[type=button].contrast:focus,[role=button].contrast:focus),[role=search]: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=group] [role=button],[role=group] [type=button],[role=group] [type=submit],[role=group] button,[role=search] [role=button],[role=search] [type=button],[role=search] [type=submit],[role=search] 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)}:root:not([data-theme=dark]),[data-theme=light]{--pico-background-color:#fff;--pico-color:#373c44;--pico-text-selection-color:rgba(0, 166, 110, 0.25);--pico-muted-color:#646b79;--pico-muted-border-color:#e7eaf0;--pico-primary:#007a50;--pico-primary-background:#007a50;--pico-primary-border:var(--pico-primary-background);--pico-primary-underline:rgba(0, 122, 80, 0.5);--pico-primary-hover:#005f3d;--pico-primary-hover-background:#006d46;--pico-primary-hover-border:var(--pico-primary-hover-background);--pico-primary-hover-underline:var(--pico-primary-hover);--pico-primary-focus:rgba(0, 166, 110, 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:var(--pico-background-color);--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}:root:not([data-theme=dark]) input:is([type=submit],[type=button],[type=reset],[type=checkbox],[type=radio],[type=file]),[data-theme=light] 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(0, 180, 120, 0.1875);--pico-muted-color:#7b8495;--pico-muted-border-color:#202632;--pico-primary:#00b478;--pico-primary-background:#007a50;--pico-primary-border:var(--pico-primary-background);--pico-primary-underline:rgba(0, 180, 120, 0.5);--pico-primary-hover:#00cc88;--pico-primary-hover-background:#00895a;--pico-primary-hover-border:var(--pico-primary-hover-background);--pico-primary-hover-underline:var(--pico-primary-hover);--pico-primary-focus:rgba(0, 180, 120, 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(0, 180, 120, 0.1875);--pico-muted-color:#7b8495;--pico-muted-border-color:#202632;--pico-primary:#00b478;--pico-primary-background:#007a50;--pico-primary-border:var(--pico-primary-background);--pico-primary-underline:rgba(0, 180, 120, 0.5);--pico-primary-hover:#00cc88;--pico-primary-hover-background:#00895a;--pico-primary-hover-border:var(--pico-primary-hover-background);--pico-primary-hover-underline:var(--pico-primary-hover);--pico-primary-focus:rgba(0, 180, 120, 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)}[type=checkbox],[type=radio],[type=range],progress{accent-color:var(--pico-primary)}*,::after,::before{box-sizing:border-box;background-repeat:no-repeat}::after,::before{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}body{width:100%;margin:0}main{display:block}body>footer,body>header,body>main{padding-block:var(--pico-block-spacing-vertical)}section{margin-bottom:var(--pico-block-spacing-vertical)}.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{grid-column-gap:var(--pico-grid-column-gap);grid-row-gap:var(--pico-grid-row-gap);display:grid;grid-template-columns:1fr}@media (min-width:768px){.grid{grid-template-columns:repeat(auto-fit,minmax(0%,1fr))}}.grid>*{min-width:0}.overflow-auto{overflow:auto}b,strong{font-weight:bolder}sub,sup{position:relative;font-size:.75em;line-height:0;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.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) * .25)}:where(dl,ol,ul) :where(dl,ol,ul){margin:0;margin-top:calc(var(--pico-typography-spacing-vertical) * .25)}ul li{list-style:square}mark{padding:.125rem .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:.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) * .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)}:where(a:not([role=button])),[role=link]{--pico-color:var(--pico-primary);--pico-background-color:transparent;--pico-underline:var(--pico-primary-underline);outline:0;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{margin:0;overflow:visible;font-family:inherit;text-transform:none}[type=button],[type=reset],[type=submit],button{-webkit-appearance:button}[role=button],[type=button],[type=file]::file-selector-button,[type=reset],[type=submit],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:0;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)}[role=button]:is(:hover,:active,:focus),[role=button]:is([aria-current]:not([aria-current=false])),[type=button]:is(:hover,:active,:focus),[type=button]:is([aria-current]:not([aria-current=false])),[type=file]::file-selector-button:is(:hover,:active,:focus),[type=file]::file-selector-button:is([aria-current]:not([aria-current=false])),[type=reset]:is(:hover,:active,:focus),[type=reset]:is([aria-current]:not([aria-current=false])),[type=submit]:is(:hover,:active,:focus),[type=submit]:is([aria-current]:not([aria-current=false])),button:is(:hover,:active,:focus),button:is([aria-current]:not([aria-current=false])){--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)}[role=button]:focus,[role=button]: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,[type=reset]:focus,[type=reset]:is([aria-current]:not([aria-current=false])):focus,[type=submit]:focus,[type=submit]:is([aria-current]:not([aria-current=false])):focus,button:focus,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=button],[type=reset],[type=submit]{margin-bottom:var(--pico-spacing)}:is(button,[type=submit],[type=button],[role=button]).secondary,[type=file]::file-selector-button,[type=reset]{--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=file]::file-selector-button:is([aria-current]:not([aria-current=false]),:hover,:active,:focus),[type=reset]: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=file]::file-selector-button:focus,[type=file]::file-selector-button:is([aria-current]:not([aria-current=false])):focus,[type=reset]:focus,[type=reset]: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:.5;pointer-events:none}:where(table){width:100%;border-collapse:collapse;border-spacing:0;text-indent:0}td,th{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 td,tfoot th{border-top:var(--pico-border-width) solid var(--pico-table-border-color);border-bottom:0}table.striped tbody tr:nth-child(odd) td,table.striped tbody tr:nth-child(odd) th{background-color:var(--pico-table-row-stripped-background-color)}: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,kbd,pre,samp{font-size:.875em;font-family:var(--pico-font-family)}pre code{font-size:inherit;font-family:inherit}pre{-ms-overflow-style:scrollbar;overflow:auto}code,kbd,pre{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:.375rem}pre{display:block;margin-bottom:var(--pico-spacing);overflow-x:auto}pre>code{display:block;padding:var(--pico-spacing);background:0 0;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{display:block;margin:0;padding:0}figure figcaption{padding:calc(var(--pico-spacing) * .5) 0;color:var(--pico-muted-color)}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}input,optgroup,select,textarea{margin:0;font-size:1rem;line-height:var(--pico-line-height);font-family:inherit;letter-spacing:inherit}input{overflow:visible}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:0}:-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}fieldset legend,label{display:block;margin-bottom:calc(var(--pico-spacing) * .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) * .5)}button[type=submit],input:not([type=checkbox],[type=radio]),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:0;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)}:where(select,textarea):not([readonly]):is(:active,:focus),input:not([type=submit],[type=button],[type=reset],[type=checkbox],[type=radio],[readonly]):is(:active,:focus){--pico-background-color:var(--pico-form-element-active-background-color)}:where(select,textarea):not([readonly]):is(:active,:focus),input:not([type=submit],[type=button],[type=reset],[role=switch],[readonly]):is(:active,:focus){--pico-border-color:var(--pico-form-element-active-border-color)}:where(select,textarea):not([readonly]):focus,input:not([type=submit],[type=button],[type=reset],[type=range],[type=file],[readonly]):focus{--pico-box-shadow:0 0 0 var(--pico-outline-width) var(--pico-form-element-focus-color)}:where(fieldset[disabled]) :is(input:not([type=submit],[type=button],[type=reset]),select,textarea),input:not([type=submit],[type=button],[type=reset])[disabled],label[aria-disabled=true],select[disabled],textarea[disabled]{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 .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 .75rem}input::-webkit-input-placeholder,input::placeholder,select:invalid,textarea::-webkit-input-placeholder,textarea::placeholder{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 .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 .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 .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) * -.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) * .25)}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:-.125em;margin-inline-end:.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:.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:.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:.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 .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:active[aria-invalid=true],[type=checkbox]:checked:focus[aria-invalid=true],[type=checkbox]:checked[aria-invalid=true],[type=checkbox][role=switch]:checked:active[aria-invalid=true],[type=checkbox][role=switch]:checked:focus[aria-invalid=true],[type=checkbox][role=switch]:checked[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=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,[type=radio][aria-invalid=false]:checked,[type=radio][aria-invalid=false]:checked:active,[type=radio][aria-invalid=false]:checked:focus{--pico-border-color:var(--pico-form-element-valid-border-color)}[type=checkbox]:checked:active[aria-invalid=true],[type=checkbox]:checked:focus[aria-invalid=true],[type=checkbox]:checked[aria-invalid=true],[type=checkbox][role=switch]:checked:active[aria-invalid=true],[type=checkbox][role=switch]:checked:focus[aria-invalid=true],[type=checkbox][role=switch]:checked[aria-invalid=true],[type=radio]:checked:active[aria-invalid=true],[type=radio]:checked:focus[aria-invalid=true],[type=radio]:checked[aria-invalid=true]{--pico-border-color:var(--pico-form-element-invalid-border-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) * .5)}[type=color]::-moz-color-swatch{border:0;border-radius:calc(var(--pico-border-radius) * .5)}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}[type=file]{--pico-color:var(--pico-muted-color);margin-left:calc(var(--pico-outline-width) * -1);padding:calc(var(--pico-form-element-spacing-vertical) * .5) 0;padding-left:var(--pico-outline-width);border:0;border-radius:0;background:0 0}[type=file]::file-selector-button{margin-right:calc(var(--pico-spacing)/ 2);padding:calc(var(--pico-form-element-spacing-vertical) * .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)}[type=range]{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:100%;height:1.25rem;background:0 0}[type=range]::-webkit-slider-runnable-track{width:100%;height:.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:.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:.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:-.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:-.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:-.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: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) + .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 .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 .75rem}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) * .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:0}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);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)}article>footer,article>header{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) * .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)}details.dropdown{position:relative;border-bottom:none}details.dropdown summary::after,details.dropdown>a::after,details.dropdown>button::after{display:block;width:1rem;height:calc(1rem * var(--pico-line-height,1.5));margin-inline-start:.25rem;float:right;transform:rotate(0) translateX(.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:0}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(0) translateX(0)}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) * .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) * .5)}details.dropdown summary+ul li:last-of-type{margin-bottom:calc(var(--pico-form-element-spacing-vertical) * .5)}details.dropdown summary+ul li a{display:block;margin:calc(var(--pico-form-element-spacing-vertical) * -.5) calc(var(--pico-form-element-spacing-horizontal) * -1);padding:calc(var(--pico-form-element-spacing-vertical) * .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:active,details.dropdown summary+ul li a:focus,details.dropdown summary+ul li a:focus-visible,details.dropdown summary+ul li a:hover,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:0 0;content:"";cursor:default}label>details.dropdown{margin-top:calc(var(--pico-spacing) * .25)}[role=group],[role=search]{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 transparent);vertical-align:middle;transition:box-shadow var(--pico-transition)}[role=group] input:not([type=checkbox],[type=radio]),[role=group] select,[role=group]>*,[role=search] input:not([type=checkbox],[type=radio]),[role=search] select,[role=search]>*{position:relative;flex:1 1 auto;margin-bottom:0}[role=group] input:not([type=checkbox],[type=radio]):not(:first-child),[role=group] select:not(:first-child),[role=group]>:not(:first-child),[role=search] input:not([type=checkbox],[type=radio]):not(:first-child),[role=search] select:not(:first-child),[role=search]>:not(:first-child){margin-left:0;border-top-left-radius:0;border-bottom-left-radius:0}[role=group] input:not([type=checkbox],[type=radio]):not(:last-child),[role=group] select:not(:last-child),[role=group]>:not(:last-child),[role=search] input:not([type=checkbox],[type=radio]):not(:last-child),[role=search] select:not(:last-child),[role=search]>:not(:last-child){border-top-right-radius:0;border-bottom-right-radius:0}[role=group] input:not([type=checkbox],[type=radio]):focus,[role=group] select:focus,[role=group]>:focus,[role=search] input:not([type=checkbox],[type=radio]):focus,[role=search] select:focus,[role=search]>:focus{z-index:2}[role=group] [role=button]:not(:first-child),[role=group] [type=button]:not(:first-child),[role=group] [type=reset]:not(:first-child),[role=group] [type=submit]:not(:first-child),[role=group] button:not(:first-child),[role=group] input:not([type=checkbox],[type=radio]):not(:first-child),[role=group] select:not(:first-child),[role=search] [role=button]:not(:first-child),[role=search] [type=button]:not(:first-child),[role=search] [type=reset]:not(:first-child),[role=search] [type=submit]:not(:first-child),[role=search] button:not(:first-child),[role=search] input:not([type=checkbox],[type=radio]):not(:first-child),[role=search] select:not(:first-child){margin-left:calc(var(--pico-border-width) * -1)}[role=group] [role=button],[role=group] [type=button],[role=group] [type=reset],[role=group] [type=submit],[role=group] button,[role=search] [role=button],[role=search] [type=button],[role=search] [type=reset],[role=search] [type=submit],[role=search] button{width:auto}@supports selector(:has(*)){[role=group]:has(button:focus,[type=submit]:focus,[type=button]:focus,[role=button]:focus),[role=search]: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=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,[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{border-color:transparent}[role=group]:has(input:not([type=submit],[type=button]):focus,select:focus),[role=search]:has(input:not([type=submit],[type=button]):focus,select:focus){--pico-group-box-shadow:var(--pico-group-box-shadow-focus-with-input)}[role=group]:has(input:not([type=submit],[type=button]):focus,select:focus) [role=button],[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) [type=submit],[role=group]:has(input:not([type=submit],[type=button]):focus,select:focus) button,[role=search]:has(input:not([type=submit],[type=button]):focus,select:focus) [role=button],[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) [type=submit],[role=search]:has(input:not([type=submit],[type=button]):focus,select:focus) 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=group] [role=button]:focus,[role=group] [type=button]:focus,[role=group] [type=reset]:focus,[role=group] [type=submit]:focus,[role=group] button:focus,[role=search] [role=button]:focus,[role=search] [type=button]:focus,[role=search] [type=reset]:focus,[role=search] [type=submit]:focus,[role=search] 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}[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:-.125em}[aria-busy=true]:not(input,select,textarea,html):not(:empty)::before{margin-inline-end:calc(var(--pico-spacing) * .5)}[aria-busy=true]:not(input,select,textarea,html):empty{text-align:center}[role=button][aria-busy=true],[type=button][aria-busy=true],[type=reset][aria-busy=true],[type=submit][aria-busy=true],a[aria-busy=true],button[aria-busy=true]{pointer-events:none}: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:100%;height:inherit;min-height:100%;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 [role=button],dialog article>footer button{margin-bottom:0}dialog article>footer [role=button]:not(:first-of-type),dialog article>footer button:not(:first-of-type){margin-left:calc(var(--pico-spacing) * .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:.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,0);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:.2s;animation-timing-function:ease-in-out;animation-fill-mode:both}:where(.modal-is-opening,.modal-is-closing) dialog{animation-duration:.8s;animation-name:modal-overlay}:where(.modal-is-opening,.modal-is-closing) dialog>article{animation-delay:.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}}: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 [role=button],nav li [type=button],nav li 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 li,aside nav,aside ol,aside ul{display:block}aside li{padding:calc(var(--pico-nav-element-spacing-vertical) * .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{display:inline-block;vertical-align:baseline}progress{-webkit-appearance:none;-moz-appearance:none;display:inline-block;appearance:none;width:100%;height:.5rem;margin-bottom:calc(var(--pico-spacing) * .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:0 0}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}}[data-tooltip]{position:relative}[data-tooltip]:not(a,button,input){border-bottom:1px dotted;text-decoration:none;cursor:help}[data-tooltip]::after,[data-tooltip]::before,[data-tooltip][data-placement=top]::after,[data-tooltip][data-placement=top]::before{display:block;z-index:99;position:absolute;bottom:100%;left:50%;padding:.25rem .5rem;overflow:hidden;transform:translate(-50%,-.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:.875rem;text-decoration:none;text-overflow:ellipsis;white-space:nowrap;opacity:0;pointer-events:none}[data-tooltip]::after,[data-tooltip][data-placement=top]::after{padding:0;transform:translate(-50%,0);border-top:.3rem solid;border-right:.3rem solid transparent;border-left:.3rem solid transparent;border-radius:0;background-color:transparent;content:"";color:var(--pico-tooltip-background-color)}[data-tooltip][data-placement=bottom]::after,[data-tooltip][data-placement=bottom]::before{top:100%;bottom:auto;transform:translate(-50%,.25rem)}[data-tooltip][data-placement=bottom]:after{transform:translate(-50%,-.3rem);border:.3rem solid transparent;border-bottom:.3rem solid}[data-tooltip][data-placement=left]::after,[data-tooltip][data-placement=left]::before{top:50%;right:100%;bottom:auto;left:auto;transform:translate(-.25rem,-50%)}[data-tooltip][data-placement=left]:after{transform:translate(.3rem,-50%);border:.3rem solid transparent;border-left:.3rem solid}[data-tooltip][data-placement=right]::after,[data-tooltip][data-placement=right]::before{top:50%;right:auto;bottom:auto;left:100%;transform:translate(.25rem,-50%)}[data-tooltip][data-placement=right]:after{transform:translate(-.3rem,-50%);border:.3rem solid transparent;border-right:.3rem solid}[data-tooltip]:focus::after,[data-tooltip]:focus::before,[data-tooltip]:hover::after,[data-tooltip]:hover::before{opacity:1}@media (hover:hover) and (pointer:fine){[data-tooltip]:focus::after,[data-tooltip]:focus::before,[data-tooltip]:hover::after,[data-tooltip]:hover::before{--pico-tooltip-slide-to:translate(-50%, -0.25rem);transform:translate(-50%,.75rem);animation-duration:.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%,-.25rem);animation-name:tooltip-caret-slide}[data-tooltip][data-placement=bottom]:focus::after,[data-tooltip][data-placement=bottom]:focus::before,[data-tooltip][data-placement=bottom]:hover::after,[data-tooltip][data-placement=bottom]:hover::before{--pico-tooltip-slide-to:translate(-50%, 0.25rem);transform:translate(-50%,-.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%,-.5rem);animation-name:tooltip-caret-slide}[data-tooltip][data-placement=left]:focus::after,[data-tooltip][data-placement=left]:focus::before,[data-tooltip][data-placement=left]:hover::after,[data-tooltip][data-placement=left]:hover::before{--pico-tooltip-slide-to:translate(-0.25rem, -50%);transform:translate(.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(.05rem,-50%);animation-name:tooltip-caret-slide}[data-tooltip][data-placement=right]:focus::after,[data-tooltip][data-placement=right]:focus::before,[data-tooltip][data-placement=right]:hover::after,[data-tooltip][data-placement=right]:hover::before{--pico-tooltip-slide-to:translate(0.25rem, -50%);transform:translate(-.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(-.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}}[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}[tabindex],a,area,button,input,label,select,summary,textarea{-ms-touch-action:manipulation}[dir=rtl]{direction:rtl}@media (prefers-reduced-motion:reduce){:not([aria-busy=true]),:not([aria-busy=true])::after,:not([aria-busy=true])::before{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}} \ No newline at end of file diff --git a/html/themes/pico-jade/index.php b/html/themes/pico-jade/index.php new file mode 100644 index 000000000..1626348a2 --- /dev/null +++ b/html/themes/pico-jade/index.php @@ -0,0 +1,1351 @@ + + + + + + + + XCL Theme built with PicoCSS for XOOPSCube + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ +
+ + +
+ +
+

Web Application Platform

+

Just Use it!

+
+ +
+
+
+
Integrate responsive frameworks and libraries in your Modules and Themes, simple customize a template set.
+
+
+

Content Management System, Cache, Duplicatable Modules (multisites), User Groups Management, Themes, built-in Search.

+
+
+
+ +
+
+
Scalability is the property of a system to handle a growing amount of work by adding resources to the system. 
+
+
+

Scalability without costly contracts, hosting cloud hidden costs, limitations or restrictions. Self-hosted and local first.

+
+
+
+ +
+
+
A secure and modular architecture design with self-contained components known as modules. 
+
+
+
Each module encapsulates a specific functionality, operates independently, and can be developed, maintained, and reused safely.
+
+
+ +
+ +
+ + +
+ + + + +
+ +
+

Default theme layout

+The placeholders for the content and blocks are defined by the theme layout. +
+ You can create a custom center-block-left to trigger a component display on the Top page
+ Add to the Block Title a prefix "top-" and select the target "Toppage".
+ +
+

Header Nav

+
+
+
Logo
+
User menu  Light | Dark
+
+
+

Component top center

+
+
grid-column
center-block-left
Block Title prefix: top-
+
grid-column
center-block-center
Block Title prefix: top-
+
grid-column
center-block-right
Block Title prefix: top-
+
+
+

Main container

+
+
aside nav
Side-Left
Default Blocks:
  • User Menu
  • Main Menu
  • Themes
+
div.content
App Start Page [template]
or
Module Content
+
+ aside nav +
Side-Right +
Block-Right and for Admin Panel a Block Title with prefix 'admin' +
+
+
+

Section container-fluid

+
+
grid-column
center-block-left
+
grid-column
center-block-left
+
grid-column
center-block-left
+
+
+
Footer
+
+ +
+ +
+

Top Page Center Blocks

+ +
    +
  1. Browse to Admin > Block Management > Add Custom Block +
  2. Give the Block Title e.g. top-none-myblock
    +the prefix top- with none- only show the block content +
  3. Select the side Center (left, center, right) +
  4. Write some content +
  5. Select Target Modules : Toppage
    6. +
  6. Select Target Groups : check all groups and submit
    7. +
+
+ + +

Pico

+

A pure HTML example, without dependencies.

+ + + +
+

Accordions

+
+ Accordion 1 +

+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque urna diam, + tincidunt nec porta sed, auctor id velit. Etiam venenatis nisl ut orci consequat, vitae + tempus quam commodo. Nulla non mauris ipsum. Aliquam eu posuere orci. Nulla convallis + lectus rutrum quam hendrerit, in facilisis elit sollicitudin. Mauris pulvinar pulvinar + mi, dictum tristique elit auctor quis. Maecenas ac ipsum ultrices, porta turpis sit + amet, congue turpis. +

+
+
+ Accordion 2 +
    +
  • Vestibulum id elit quis massa interdum sodales.
    • +
  • Nunc quis eros vel odio pretium tincidunt nec quis neque.
    • +
  • Quisque sed eros non eros ornare elementum.
    • +
  • Cras sed libero aliquet, porta dolor quis, dapibus ipsum.
    • +
+
+
+ + +
+
+

Article

+ header +
+

+ Content paragraph - Nullam dui arcu, malesuada et sodales eu, efficitur vitae dolor. Sed ultricies dolor non + ante vulputate hendrerit. Vivamus sit amet suscipit sapien. Nulla iaculis eros a elit + pharetra egestas. Nunc placerat facilisis cursus. Sed vestibulum metus eget dolor pharetra + rutrum. +

+
+ Footer - Duis nec elit placerat, suscipit nibh quis, finibus neque. +
+
+ + +
+

Buttons

+

+ + + +

+

+ + + +

+
+ + +
+
+

Form elements

+ + + + + + + + + Curabitur consequat lacus at lacus porta finibus. + + + + + + + + + + + + +
+ + + +
+ +
+ + + + + + + + +
+ +
+ +
+ Checkboxes + + +
+ + +
+ Radio buttons + + +
+ + +
+ Switches + + +
+
+ + + + +
+
+ + +
+

Group

+
+
+ + +
+
+
+ + +
+

Loading

+
+ +
+ + + + + +
+

Preview

+

+ Sed ultricies dolor non ante vulputate hendrerit. Vivamus sit amet suscipit sapien. Nulla + iaculis eros a elit pharetra egestas. +

+
+
+ + + +
+
+ +
+
+
+ + +
+

Progress bar

+ + +
+ + +
+

Tables

+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
#HeadingHeadingHeadingHeadingHeadingHeadingHeading
1CellCellCellCellCellCellCell
2CellCellCellCellCellCellCell
3CellCellCellCellCellCellCell
+
+
+ + +
+

Typography

+

+ Aliquam lobortis vitae nibh nec rhoncus. Morbi mattis neque eget efficitur feugiat. + Vivamus porta nunc a erat mattis, mattis feugiat turpis pretium. Quisque sed tristique + felis. +

+ + +
+ "Maecenas vehicula metus tellus, vitae congue turpis hendrerit non. Nam at dui sit amet + ipsum cursus ornare." +
+ - Phasellus eget lacinia +
+
+ + +

Lists

+
    +
  • Aliquam lobortis lacus eu libero ornare facilisis.
    • +
  • Nam et magna at libero scelerisque egestas.
    • +
  • Suspendisse id nisl ut leo finibus vehicula quis eu ex.
    • +
  • Proin ultricies turpis et volutpat vehicula.
    • +
+ + +

Inline text elements

+
+

Primary link

+

+ Secondary link +

+

+ Contrast link +

+
+
+

Bold

+

Italic

+

Underline

+
+
+

Deleted

+

Inserted

+

Strikethrough

+
+
+

Small

+

Text Sub

+

Text Sup

+
+
+

+ Abbr. +

+

Kbd

+

Highlighted

+
+ + +

Heading 3

+

+ Integer bibendum malesuada libero vel eleifend. Fusce iaculis turpis ipsum, at efficitur + sem scelerisque vel. Aliquam auctor diam ut purus cursus fringilla. Class aptent taciti + sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. +

+

Heading 4

+

+ Cras fermentum velit vitae auctor aliquet. Nunc non congue urna, at blandit nibh. Donec ac + fermentum felis. Vivamus tincidunt arcu ut lacus hendrerit, eget mattis dui finibus. +

+
Heading 5
+

+ Donec nec egestas nulla. Sed varius placerat felis eu suscipit. Mauris maximus ante in + consequat luctus. Morbi euismod sagittis efficitur. Aenean non eros orci. Vivamus ut diam + sem. +

+
Heading 6
+

+ Ut sed quam non mauris placerat consequat vitae id risus. Vestibulum tincidunt nulla ut + tortor posuere, vitae malesuada tortor molestie. Sed nec interdum dolor. Vestibulum id + auctor nisi, a efficitur sem. Aliquam sollicitudin efficitur turpis, sollicitudin + hendrerit ligula semper id. Nunc risus felis, egestas eu tristique eget, convallis in + velit. +

+ + +
+ + + + + + + + + + + + Legacy to Remind Us of Where We Come From + +
+ Image from + SVG Image +
+
+
+ + +
+ + + + + + +
+ + + +
+ +

jQuery UI

+ +
+

Accordion

+ +
+

Section 1

+
+

+ Mauris mauris ante, blandit et, ultrices a, suscipit eget, quam. Integer + ut neque. Vivamus nisi metus, molestie vel, gravida in, condimentum sit + amet, nunc. Nam a nibh. Donec suscipit eros. Nam mi. Proin viverra leo ut + odio. Curabitur malesuada. Vestibulum a velit eu ante scelerisque vulputate. +

+
+

Section 2

+
+

+ Sed non urna. Donec et ante. Phasellus eu ligula. Vestibulum sit amet + purus. Vivamus hendrerit, dolor at aliquet laoreet, mauris turpis porttitor + velit, faucibus interdum tellus libero ac justo. Vivamus non quam. In + suscipit faucibus urna. +

+
+

Section 3

+
+

+ Nam enim risus, molestie et, porta ac, aliquam ac, risus. Quisque lobortis. + Phasellus pellentesque purus in massa. Aenean in pede. Phasellus ac libero + ac tellus pellentesque semper. Sed ac felis. Sed commodo, magna quis + lacinia ornare, quam ante aliquam nisi, eu iaculis leo purus venenatis dui. +

+
    +
  • List item one
    • +
  • List item two
    • +
  • List item three
    • +
+
+

Section 4

+
+

+ Cras dictum. Pellentesque habitant morbi tristique senectus et netus + et malesuada fames ac turpis egestas. Vestibulum ante ipsum primis in + faucibus orci luctus et ultrices posuere cubilia Curae; Aenean lacinia + mauris vel est. +

+

+ Suspendisse eu nisl. Nullam ut libero. Integer dignissim consequat lectus. + Class aptent taciti sociosqu ad litora torquent per conubia nostra, per + inceptos himenaeos. +

+
+
+
+ + +
+
+ +
+ + +

Button Widget with icons

+
+ + + + + + +
+
+ +
+

Button - Widget

+ +
+ + + An anchor +
+
+ +
+

CSS Buttons

+
+ + + An anchor +
+
+ +
+ +
+ + + +
+

Checkbox and radio button widgets

+ + +
+
+ Rental Car +
+ + + + + + + + + + +
+
+
+ +
+ + +
+

Progress bar

+ + +
+
Starting download...
+
+
+ + +
+ + +
+

Datepicker

+ +
+ Date:
+
+
+ + +
+

Dialog

+ +
+

This is an animated dialog which is useful for displaying information. The dialog window can be moved, resized and closed with the 'x' icon.

+
+ + +
+ + +
+ +
+

Menu

+ + +
+ +
+

Menu Categories

+ + + + +
+ +
+

Menu Icons

+ + + +
+ +
+ + +
+ + +
+

select menu

+
+ +
+ + + + + + + + + + + +
+ +
+ +
+ +
+

PicoSS Dropdown

+ +
+ Dropdown + +
+ + + +
+
+ + +
+ + +
+ +

Block-center - Grid

+ +
+
+

block-center-left

+
+
block title
+

content

+
+
+
+

block-center-center

+
+
block title
+

content

+
+
+
+

block-center-rigth

+
+
block title
+

content

+
+
+
+ +
+
+
+
block title
+

content

+
+
+
+
+
block title
+

content

+
+
+
+
+
block title
+

content

+
+
+
+
+ + + + + + + +
+
+ +

Confirm your action!

+
+

+ Cras sit amet maximus risus. Pellentesque sodales odio sit amet augue finibus + pellentesque. Nullam finibus risus non semper euismod. +

+ +
+ + + + + +
+ + + + + + +
+ + + + + \ No newline at end of file diff --git a/html/themes/pico-jade/js/index.html b/html/themes/pico-jade/js/index.html new file mode 100644 index 000000000..990cbd603 --- /dev/null +++ b/html/themes/pico-jade/js/index.html @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/html/themes/pico-jade/js/plugins.js b/html/themes/pico-jade/js/plugins.js new file mode 100644 index 000000000..b99203984 --- /dev/null +++ b/html/themes/pico-jade/js/plugins.js @@ -0,0 +1,242 @@ +/* + * XCL Theme Pico Jade built with PicoCSS v206 + * + * @version 2.4.0 + * @update 2024-04-20 + * @Date 2024-02-02 + * @author Nuno Luciano ( https://github.com/gigamaster ) + * @copyright (c) 2005-2024 The XOOPSCube Project, authors + * @license MIT + * @link https://github.com/xoopscube + * + * + * 1. Theme Switcher + * 2. Modal + * -- jQuery Document Ready - helper plugins + * 3. Render SVG + * 4. Notification Time + * 5. Dropdown - block options, menu, etc + * 6. Close on click document + * 7. Highlight Message nav-tab active + * 8.1 remove border + * 8.2 url constructor + * 9. Aria-busy Toogle + */ + +/* + * 1. Minimal theme switcher Pico.css - https://picocss.com + * Copyright 2019-2024 - Licensed under MIT + */ +const themeSwitcher = { + // Config + _scheme: "auto", + menuTarget: "details.dropdown", + buttonsTarget: "a[data-theme-switcher]", + buttonAttribute: "data-theme-switcher", + rootAttribute: "data-theme", + localStorageKey: "picoPreferredColorScheme", + + // Init + init() { + this.scheme = this.schemeFromLocalStorage; + this.initSwitchers(); + }, + + // Get color scheme from local storage + get schemeFromLocalStorage() { + return window.localStorage?.getItem(this.localStorageKey) ?? this._scheme; + }, + + // Preferred color scheme + get preferredColorScheme() { + return window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light"; + }, + + // Init switchers + initSwitchers() { + const buttons = document.querySelectorAll(this.buttonsTarget); + buttons.forEach((button) => { + button.addEventListener( + "click", + (event) => { + event.preventDefault(); + // Set scheme + this.scheme = button.getAttribute(this.buttonAttribute); + // Close dropdown + document.querySelector(this.menuTarget)?.removeAttribute("open"); + }, + false + ); + }); + }, + + // Set scheme + set scheme(scheme) { + if (scheme == "auto") { + this._scheme = this.preferredColorScheme; + } else if (scheme == "dark" || scheme == "light") { + this._scheme = scheme; + } + this.applyScheme(); + this.schemeToLocalStorage(); + }, + + // Get scheme + get scheme() { + return this._scheme; + }, + + // Apply scheme + applyScheme() { + document.querySelector("html")?.setAttribute(this.rootAttribute, this.scheme); + }, + + // Store scheme to local storage + schemeToLocalStorage() { + window.localStorage?.setItem(this.localStorageKey, this.scheme); + }, +}; + +// Init +themeSwitcher.init(); + +/* + * 2. Modal Pico.css - https://picocss.com + * Copyright 2019-2024 - Licensed under MIT + */ +// Config +const isOpenClass = "modal-is-open"; +const openingClass = "modal-is-opening"; +const closingClass = "modal-is-closing"; +const scrollbarWidthCssVar = "--pico-scrollbar-width"; +const animationDuration = 400; // ms +let visibleModal = null; + +// Toggle modal +const toggleModal = (event) => { + event.preventDefault(); + const modal = document.getElementById(event.currentTarget.dataset.target); + if (!modal) return; + modal && (modal.open ? closeModal(modal) : openModal(modal)); +}; + +// Open modal +const openModal = (modal) => { + const { documentElement: html } = document; + const scrollbarWidth = getScrollbarWidth(); + if (scrollbarWidth) { + html.style.setProperty(scrollbarWidthCssVar, `${scrollbarWidth}px`); + } + html.classList.add(isOpenClass, openingClass); + setTimeout(() => { + visibleModal = modal; + html.classList.remove(openingClass); + }, animationDuration); + modal.showModal(); +}; + +// Close modal +const closeModal = (modal) => { + visibleModal = null; + const { documentElement: html } = document; + html.classList.add(closingClass); + setTimeout(() => { + html.classList.remove(closingClass, isOpenClass); + html.style.removeProperty(scrollbarWidthCssVar); + modal.close(); + }, animationDuration); +}; + +// Close with a click outside +document.addEventListener("click", (event) => { + if (visibleModal === null) return; + const modalContent = visibleModal.querySelector("article"); + const isClickInside = modalContent.contains(event.target); + !isClickInside && closeModal(visibleModal); +}); + +// Close with Esc key +document.addEventListener("keydown", (event) => { + if (event.key === "Escape" && visibleModal) { + closeModal(visibleModal); + } +}); + +// Get scrollbar width +const getScrollbarWidth = () => { + const scrollbarWidth = window.innerWidth - document.documentElement.clientWidth; + return scrollbarWidth; +}; + +// Is scrollbar visible +const isScrollbarVisible = () => { + return document.body.scrollHeight > screen.height; +}; + + +// DOCUMENT READY - Place any jQuery/helper plugins below ! +/* ---------- ---------- ---------- ---------- ---------- */ +// Do something on document ready +$(function () { + + // 3. Inline SVG icons + $('.svg').renderClassSvg(); + + // 4. Notification Time + $('div.runtime').fadeIn( 750 ).delay( 3000 ).fadeOut( 500 ); + + // 5. Dropdown - block options, menu, etc + $(".dropdown").on("click", ".dropdown-toggle", function (event) { + event.preventDefault(); + $('.dropdown').removeClass('isopen'); + $(this).parent().toggleClass('isopen'); + }); + + // 6. Close on click document + $(document).on("click", function (event) { + var $trigger = $(".dropdown"); + if ($trigger !== event.target && !$trigger.has(event.target).length) { + $(".dropdown").removeClass("isopen"); + } + }); + + // 7. Highlight Message nav-tab active + $("#tabs-mail").tabs({ + active: false, + collapsible: true, + classes: { + "ui-tabs": "taborder" + }, + beforeActivate: function (event, ui) { + window.open($(ui.newTab).find('a').attr('href'), '_self'); + return false; + }, + } + ); + // .find('.ui-tabs-tab').removeClass('ui-corner-all ui-corner-top'); + + // 8.1 Remove border from dropdown UL children + $(".ui-tabs-tab .dropdown-content ul").children().css( "border", "0" ); + + // 8.2 url constructor + const parseUrl = new URL(window.location.href); + const msgAction = parseUrl.searchParams.get("action"); + // If module message index, highlight the first nav-tab + if (msgAction == null) { + $('#tabs-mail ul.ui-tabs-nav li:first-child').addClass('ui-state-active'); + } else { + // Highlight current action nav-tab + $('a[href="index.php?action=' + msgAction + '"]').parent('li').addClass('ui-tabs-active ui-state-active'); + } + if (msgAction == 'settings'|| msgAction == 'blacklist'){ + // Highlight dropdown menu + $('.settings ').parent('li').addClass("ui-state-active"); + } + // 9. Aria-busy Toogle + $('[aria-busy="false"]').on( "click", function(event) { + event.stopPropagation(); + event.stopImmediatePropagation(); + $(this).prop("ariaBusy", true); + }); + +}); diff --git a/html/themes/pico-jade/manifesto.ini.php b/html/themes/pico-jade/manifesto.ini.php new file mode 100644 index 000000000..63b3946f1 --- /dev/null +++ b/html/themes/pico-jade/manifesto.ini.php @@ -0,0 +1,22 @@ + header { + --pico-block-spacing-vertical:0 +} +body > main { + display : grid; + grid-template-rows: 1fr; + row-gap : 2rem; + margin-bottom : calc(var(--pico-spacing) * 4); + padding : 0 +} +body > main > * { + min-width : 0; + margin-bottom : 0 +} + +body > main > article { + --pico-block-spacing-vertical: var(--pico-spacing); + --pico-block-spacing-horizontal: var(--pico-spacing); +} + +/* Body align Aside and Main */ +body > main > aside#nav-left, +body > main > aside#block-right { + margin-top : .5rem; +} +body > main > div > aside { + background : var(--pico-card-background-color); + padding : .5rem; + padding : var(--pico-nav-element-spacing-vertical) var(--pico-nav-element-spacing-horizontal); /* @todo */ + border-radius : var(--pico-border-radius); +} + +/* BODY FOOTER */ +body > footer { + display : flex; + align-items : center; + padding : 1rem 0; + justify-content : center; + flex-wrap : wrap; +} +body > footer .logos { + display : inline-flex; + padding :.25rem .5rem; + border-bottom : 1px solid var(--pico-muted-border-color) +} +body > footer .logos a { padding:.25rem; margin:.5rem 0;} +body > footer .logos svg { + width : auto; + height : 1rem; + margin-right : calc(var(--pico-spacing) * .25); + transform : translateY(-.0625rem) +} + +/* ARTICLE H* ONLY CHILD (FORM COMMENT/REPLY) */ +article header :where( h2, h3, h4 ):only-child{ + margin : var(--pico-spacing) 0; +} +article header :where( p:last-child ){ + margin-bottom : 0; +} + +/* A HREF LINK COLOR */ +[data-theme=dark] { + :is([role=button], [type=button], [type=file]::file-selector-button, [type=reset], [type=submit], + button, [type=checkbox]:checked, [type=checkbox]:checked:active, [type=checkbox]:checked:focus, + [type=radio]:checked, [type=radio]:checked:active, [type=radio]:checked:focus):not(.outline) { + /* --pico-background-color: hsl(45 70% 40% / 1); */ + } + a:hover:not([role=button]) { + color:var(--pico-secondary-inverse) + } +} +[role=link]:focus, a:focus { +--background-color : var(--pico-primary-focus); + border-radius : var(--pico-border-radius); +} +/* A LINK UNDERLINE none */ +a {--pico-text-decoration: none; border:none} +:where(a:not([role=button])):is([aria-current]:not([aria-current=false]),:hover,:active,:focus), +[role=link] :is(a,[aria-current]:not([aria-current=false]),:hover,:active,:focus) { +--pico-text-decoration: none; +--pico-primary-underline: none; +--pico-underline: none; + border:none +} +/* A LINK - ICON ONLY */ +:is(a.btn-icon) { + border-radius : var(--pico-border-radius); + box-shadow : var(--pico-box-shadow); + display : inline-flex; + justify-content : center; + font-weight : 600; + font-size : 24px; + width : 30px; + height : 28px; + opacity : .8; + transition : opacity 0.3s ease-in; +} +:is(a.btn-icon):hover { + background : var(--pico-primary-focus); + color : var(--pico-secondary-inverse); + opacity : 1; +} + +hr { margin: 2rem 1rem; } /* @todo ? */ + +/* -------------------- ARTICLE FOOTER ACTION CONTROL */ +.action-control { + align-items : center; + column-gap : 1rem; + display : flex; + flex-wrap : wrap; + justify-content : space-between; + white-space : normal; +} + +/* -------------------- BANNER */ +section[role=banner] > div > article { + border : 1px solid var(--pico-muted-border-color); + border-radius : var(--pico-border-radius); + box-shadow : var(--pico-box-shadow); + margin : calc(var(--pico-block-spacing-vertical) * 3) 0; +} +[role=banner] .advert { + background : var(--pico-code-background-color); + border : 1px dotted var(--pico-form-element-disabled-border-color); + border-radius : var(--pico-border-radius); + display : block; + padding : var(--pico-spacing); + +} +[role=banner] .banner { + padding : var(--pico-spacing); + text-align : center; +} + +/* -------------------- BREADCRUMBS - MOBILE */ + +nav[aria-label=breadcrumb] { + margin-bottom : 1rem; /* space for pico header image */ +} + +@media (max-width : 768px) { + nav[aria-label=breadcrumb] ul { + list-style-type: none; + /*font-size: 16px;*/ + margin : 0; + padding : 10px 0; + /* truncate */ + white-space : nowrap; + max-width : 100%; + overflow : hidden; + } + nav[aria-label=breadcrumb] li { + display : inline-block; + max-width : 18%; /* truncate */ + width : auto; + white-space : nowrap; + overflow : hidden; + text-overflow: ellipsis; + } + nav[aria-label=breadcrumb] li:last-child {max-width: 30%;} + nav[aria-label=breadcrumb] li:first-child:before {content: none;} + nav[aria-label=breadcrumb] li a span:hover {text-decoration: underline} + nav[aria-label=breadcrumb] li, + nav[aria-label=breadcrumb] li:last-child {display: none} + nav[aria-label=breadcrumb] li:nth-last-child(2) {display: block;max-width: 100%;} + nav[aria-label=breadcrumb] li a {text-decoration: none} + nav[aria-label=breadcrumb] li:nth-last-child(2) a:after, + nav[aria-label=breadcrumb] ul li:not(:last-child) ::after {content: '';} + nav[aria-label=breadcrumb] li:nth-last-child(2) a:before { + content : ' ↚ '; + display : inline-flex; + min-width : 5ch; + background : var(--pico-primary); + border-radius:var(--pico-border-radius); + color : var(--pico-primary-inverse); + margin-right: .5rem; + place-content: center; + } + nav[aria-label=breadcrumb] li:nth-last-child(2):before {content: none} + + section.block-center { + background : var(--pico-contrast-inverse); + border : var(--pico-muted-border-color); + margin-bottom: 0; + padding : calc(var(--pico-spacing) * 1) calc(var(--pico-spacing) * 1); + } +} + +/* -------------------- BADGE & BUTTONS */ +.badge { + background : hsla(205, 15%, 40%, 0.25); + border-radius : var(--pico-border-radius); + font-size : 12px; + min-width : 3ch; + display : inline-block; + padding : 0 0.5rem;vertical-align: baseline; +} + +/* article h3 :is(.badge){font-size: 14px; } */ +:is(article, hgroup, .list-content) h3, h4, .block-title { + display : flex; + flex-wrap : wrap; + justify-content : space-between; + width : 100%; + align-items : baseline; +} + +/* BUTTON ACTION */ +:is(.delete) { + color : var(--pico-del-color); + border-color : var(--pico-del-color); +} +:is(button.vote) { + margin-bottom : 0; +} +:where([type=submit],[type=button],[role=button]) svg { + display : inline; + margin : 0 .25rem 0; + vertical-align: -.175em; +} + +:where(footer.action-control, footer div.grid) +:is(div, button, input[type=submit],input[type=button],[role=button], details.dropdown, input, a):not(summary) { + margin-bottom : 0; + white-space : nowrap; + /* border : 2px solid orange; */ +} +:where(footer.action-control) :is(a) { + border-radius : var(--pico-border-radius); + margin : 0 .5em; + padding : .25rem; +} +:where(footer.action-control) :is(a, button[type=submit]):hover { + background : var(--pico-primary-focus); + color : var(--pico-secondary-inverse); +} + +/* -------------------- BLOCKS */ +/* BLOCKS - Title */ +[class^="block-title"] { + color : var(--pico-muted-color); + font-weight : var(--pico-font-weight); + font-size : 1rem; + line-height : 1rem; + justify-content : space-between; + flex-wrap : nowrap; + margin-bottom : var(--pico-typography-spacing-vertical); + padding : 0; +} +[class^="block-title"] a { + display : inline-block; + width : 100%; +} +[class^="block-title"]:hover a { +--text-decoration : none; + color :var(--pico-primary-inverse); +} +[class^="block-title"]:hover { + background-position: 100% 100%; + background-size : 200% 100%; + text-decoration : none; + transition : background-size .3s .3s, background-position .3s; +} +/* BLOCKS - Content */ +[class="block-content"] { + margin-bottom : var(--pico-typography-spacing-vertical); +} +[class="block-content"] > ul { + padding : 0; +} +/* BLOCKS - MAIN MENU. SUB, MESSAGE */ +.menu-sub { + padding-left : 2.25rem; +} +/* BLOCK - PRIVATE MESSAGE */ +.block-messages ul#privatemessages { + flex-direction : column; + width : 100%; +} +.block-messages ul#privatemessages li { + padding : calc(var(--pico-nav-element-spacing-vertical) * .5) var(--pico-nav-element-spacing-horizontal); + width : inherit; +} +.block-messages ul#privatemessages li a { + display : inherit; +} +/* BLOCK - LIST MEMBERS */ +/* USERS ONLINE, SITE INFO */ +ul.list-column { + border-left : 4px solid var(--pico-muted-border-color); + column-count : 3; + column-width : 140px; + column-gap : 1.5rem; + column-rule : 4px solid var(--pico-muted-border-color); + margin : 1rem 0; + padding : 1rem; +} +ul.list-column li { + list-style : none; + margin-bottom :.5rem +} +ul.list-column li > h6 { + font-size : 16px; column-span: all; +} + +/* -------------------- ICONS */ +[class^="i-"] { + padding : .25rem .5rem +} +i[class^="i-"], +:is(span.icon, i.icon) { + padding-right : .5rem; +} + +summary[role="link"].contrast:is([aria-current],:hover,:active,:focus) { + background-color: transparent; + color : var(--pico-contrast-hover); +} + +/* -------------------- SEARCH FORM - PicoCSS default pill: 5rem */ + +[role=search]>:last-child { + border-top-right-radius: 1rem; + border-bottom-right-radius: 1rem; +} +[role=search]>:first-child { + border-top-left-radius: 1rem; + border-bottom-left-radius: 1rem; +} + +/* -------------------- TABLE - FONT-SIZE IN BLOCKS */ +[class^="block-"] table tbody, tfoot { + font-size : 14px; +} + +/* -------------------- TEXT SELECTION */ +::-moz-selection{background-color:var(--pico-primary);color:var(--pico-primary-inverse)} +::selection{background-color:var(--pico-primary);color:var(--pico-primary-inverse)} + +/* -------------------- TOOLTIP */ + +[data-tooltip] { + border-bottom-color: var( + --pico-border-color + ) +} +[data-tooltip]:after, main [data-tooltip]:before { + font-size : 12px +} + +/* -------------------- TYPOGRAPHY - FONT SIZE & SCALE */ +/* HEADING */ +h1, h2, h3, h4, h5 { +--font-weight: 400; + font-weight : var(--font-weight); + position : relative; +} +h1,h2,h3 { + font-family: "Nunito", sans-serif; + font-optical-sizing: auto; + font-weight: 400; + font-style: normal; +} + +p { text-wrap: pretty } + +@media (min-width: 576px) { :root { --pico-font-size: 106.25%; } } +@media (min-width: 768px) { :root { --pico-font-size: 112.5%; /* 18px */}} +@media (min-width: 1024px) { :root { --pico-font-size: 1rem; }} +@media (min-width: 1280px) { :root { --pico-font-size: 1rem; }} +@media (min-width: 1536px) { :root { --pico-font-size: 112.5%; /* 18px */}} + +/* -------------------- WRAPPER - GRID */ +/* -------------------- MEDIA QUERIES - desktop, tablet, mobile + CSS override PicoSS rules and specificity */ +@media(max-width: 576px) { + [role=button], [type=button], [type=file]::file-selector-button, [type=reset], [type=submit], button { + --pico-form-element-spacing-horizontal: 1.5rem; + } + [role=group] [role=button], [role=group] [type=button], [role=group] [type=submit], [role=group] button, [role=search] [role=button], [role=search] [type=button], [role=search] [type=submit], [role=search] button { + --pico-form-element-spacing-horizontal: 1.5rem; + } +} +@media screen and (max-width: 1024px) { + body>main>aside#nav-left, body>main>aside#block-right { + --pico-font-size: 1rem; /* 16px - 18px picocss */ + font-size: var(--pico-font-size); + margin-top: 0; + } + [data-self~="sm-hide"] {display:none!important}/* only show icon and hide text */ + + aside#nav-left { + position: fixed; + top: 0; + left: 0; + width: 240px; + height: 100%; + padding: .25em var(--pico-block-spacing-horizontal); + background: var(--pico-card-background-color); + box-shadow: var(--pico-card-box-shadow); + overflow-y: auto; + z-index: var(--z-above); + } + aside#nav-left { + transform: translate3d(0, 0, 0) translateX(-240px); + transition: all 0.25s cubic-bezier(0.16, 0.63, 0.45, 0.98); + } + aside#nav-left:target { + transform: translate3d(0, 0, 0) translateX(0); + } + .nav-open { + display: block; + position:absolute; + left: 18px; + top: 10px; + } + aside#nav-left .nav-close { + display: block; + height: 36px; + display: block; + cursor: pointer; + position: sticky; + left: 180px; + top: 10px; + width: fit-content; + width: -moz-fit-content; + + z-index: var(--z-sticky); + } +} +@media(min-width: 1024px) { + html { + scroll-padding-top:calc(var(--pico-header-height) + 2rem - .375rem) + } + [data-self="sm-hide"] { + display: revert!important; /* show icon & show text */ + } + body>header>nav.nav-top{ + position: relative; + } + body>main { + grid-template-rows:auto 1fr; + grid-template-columns: 14rem 1fr; + grid-template-areas: "menu main" "menu block-right"; + -moz-column-gap: 2rem; + column-gap: 2rem; + row-gap: 2rem; + } + .nav-logo {margin-left:0} + .nav-open, + aside#nav-left .nav-close{display: none;} + aside#nav-left { + position:relative; + width: 220px; + } + body>main:has(aside#block-right) { + grid-template-rows: auto 1fr; + grid-template-columns: 14rem 1fr; + grid-template-areas: "menu main" "menu block-right" + } + body>main>aside#nav-left { + grid-area: menu + } + body>main>[role=main] { + grid-area: main + } + body>main>aside#block-right { + grid-area: block-right; + align-self: start /* Sticky in grid */ + } + body>main>aside#block-right { + position: sticky; + top: calc(var(--pico-main-top-offset) + var(--pico-block-spacing-vertical)/2); + max-height: calc(var(--max-height) - var(--pico-spacing)); + transition: top var(--pico-transition); + transition-delay: 50ms + } + body>main>nav[aria-label=breadcrumb] { + display: none + } + body>main>aside>nav { + margin-top: calc(var(--pico-block-spacing-vertical)/2) + } + body>main>hgroup { + grid-area: header; + margin-top: calc(var(--pico-block-spacing-vertical)/2) + } +} +@media(min-width: 1280px) { + body>main { + grid-template-rows:auto 1fr; + grid-template-columns: 14rem 1fr 14rem; + grid-template-areas: "menu main block-right" "menu main block-right"; + row-gap: 2rem; + } + body>main:has(aside#block-right) { + grid-template-rows: auto 1fr; + grid-template-columns: 14rem 1fr 15rem; + grid-template-areas: "menu main block-right" "menu main block-right" + } + body>main>aside#nav-left { + grid-area: menu + } + body>main>[role=main] { + grid-area: main + } + body>main>aside#block-right { + grid-area: block-right + } +} +@media(min-width: 1536px) { + body>main { + grid-template-rows:auto 1fr; + grid-template-columns: 16rem 1fr 16rem; + grid-template-areas: "menu main block-right" "menu main block-right"; + row-gap: 3rem; + } +} +/* GRID CUSTOM COLUMNS */ +/* @todo ?? */ +.grid-left, .grid-right, .grid-2, .grid-3 { + align-items : start; + display : grid; + grid-template-columns: 1fr; + column-gap : calc(var(--pico-spacing) * .5); + row-gap : calc(var(--pico-spacing) * .5); + margin : 0; +} +.flex-justify { + align-items : center; + display : flex; + justify-content : space-between; + flex-basis : auto; + flex-wrap : wrap; +} +@media (min-width: 1024px) { + .grid-main, .grid-left, .grid-right, .grid-2, .grid-3 { + align-items : baseline; + display : grid; + column-gap : calc(var(--pico-spacing) * 1); + row-gap : calc(var(--pico-spacing) * 1); + } + .grid-main { + grid-template-columns: 1fr 3fr; + grid-column-gap: 1rem; + grid-row-gap: 1rem; + } + .grid-left { grid-template-columns: 1fr 3fr; } + .grid-right { grid-template-columns: 3fr 1fr; } + .grid-2 { grid-template-columns: 1fr 1fr; } + .grid-3 { grid-template-columns: 1fr 1fr 1fr; } +} + +/* -------------------- MODULE CKEditor */ +/* BUTTON CKEditor forced fix button 📐*/ +:is([class^="cke_button"],[class^="cke_combo_button"] ) { + margin-left : 0!important; +} +/* fix extra space of combo dropdown */ +.cke_combo_on a.cke_combo_button, .cke_combo_off a.cke_combo_button:hover, .cke_combo_off a.cke_combo_button:focus, +.cke_combo_off a.cke_combo_button:active { + padding : 0!important; +} +/* CKEditor darkmode */ +:root[data-theme=dark] { + --cke-color : #fff; + --cke-background: #111;; + --cke-filter : invert(1) contrast(1.15); + --cke-editable : #1c212c; + --cke-inner : #181b25; +} +/* try to switch mode, fallback ?? */ +:root[data-theme=light] { + --no-var : #fff; +} +/* CKEditor darkmode rounded */ +:is([class^=cke_top],[class^=cke_bottom]) { + filter : var(--cke-filter, none); + border-color : transparent!important; + /* Prevent editor from overflow prent container */ + max-width : 100%; + border-radius : 8px; +} +:where(.cke_chrome) { + border : none!important; +} +.cke_inner { + display : block; + background : var(--cke-inner, var(--no-var), #999)!important; + border : 1px solid var(--cke-background, var(--no-var), #999)!important; + border-radius : 8px; +} +:where(.cke_contents){ + background : var(--cke-editable, var(--no-var), #999)!important; + color : var(--cke-color, var(--no-var))!important; + border-radius : 8px; +} +/* customize editable container */ +.cke_editable { + background : var(--cke-editable, var(--no-var)); + color : var(--no-var, #fff); + border-radius : 8px; + padding : 0.5rem; + cursor : text; + margin : 0.25rem; + width : auto; + min-height : calc(100vh - 1rem); +} +textarea.cke_source { + background : var( --cke-background, #fff); + color : var( --cke-color, #111); + padding : 0.5rem; +} +.cke_wysiwyg_frame, .cke_wysiwyg_div { + background : var(--cke-editable, var(--no-var))!important; + color : var(--cke-color, var(--no-var))!important; +} + + +/* -------------------- MODULE D3FORUM */ +/* Used in Dropdowm*/ +.author-info { + align-items : center; + display : flex; + flex-direction : column; + padding : .25em; +} +/* AUTHOR AVATAR */ +.avatar { + border : 2px solid var(--pico-border-color); + border-radius : 50%; + margin : 0 auto; +} +/* AUTHOR DROPDOWN */ +:is(.w96) { + width : 96px; + height : 96px; + } + +/* AVATAR css from x-layout */ +[data-self="radius-circle"] { border-radius: 50%} + +/* NAV POST TREE ORDER */ +nav.post-tree-order { + align-items : center; + display : flex; + flex-wrap : wrap; + justify-content : start; + padding : var(--pico-spacing); + width : 100%; +} +nav.post-tree-order a { + border-radius : var(--pico-border-radius); + padding : .25em; + margin-right : .5em; +} +nav.post-tree-order a:hover { + background : var(--pico-primary-focus); + color : var(--pico-secondary-inverse); +} +/* POST TREE */ +/* in main view, main list, comment list */ +ul.post-tree { + background : var(--pico-card-background-color); + border-radius : CALC(var(--pico-border-radius)*2); + margin-bottom : var(--pico-block-spacing-vertical); + padding : 1rem; +} +ul.post-tree li { + list-style : none; +} +li.post-tree-item { + align-items : center; + display : flex; + list-style : none; + margin : 0; /* NOTE The margin-left is auto-generated from template ! */ + padding : 0; +} +li.post-tree-item > span { + border-radius : var(--pico-border-radius); + padding : .25rem; +} + .post-tree-current > span { + background-color: var(--pico-form-element-selected-background-color); + border-radius : var(--pico-border-radius); +} +/* POST TREE DEPTH-IN-TREE */ +:is(ul.depth-in-tree) { + margin : 0; + padding : 0; +} +/* FORUM POST - CONTENT + SIGNATURE */ +.post-content { +} +.post-signature { + border-top : 1px solid var(--pico-blockquote-border-color); + margin-top : 1.5rem; +} + +/* FORUM - ICON LIST LEGEND */ +.forum-icon-list { + display : block; + list-style : none; + margin : 1em; + padding : 0; +} + +/* Following classes Using class badge */ +.post-vote, +.post-vote-count, +.post-vote-avg {} +.description {} + +/* ACTIVITY TOTAL POSTS, COMMENTS, VIEWS */ +.content-activity, +.forum-activity { + font-size : small; +} + +/* -------------------- MODULE PICO */ +article .header-image { + display : inline-block; + box-shadow : var(--pico-card-box-shadow); + height : 240px; + margin-top : calc(var(--pico-block-spacing-vertical) * -1.25); + margin-bottom : var(--pico-block-spacing-vertical); + object-fit : cover; + width : 100%; + border : 2px solid var(--pico-muted-color); + border-radius : var(--pico-border-radius); +} +/* Page list of contents H3 + icons folder, docs */ +article h3 :is(span[data-tooltip]) {font-size:16px;} +/* TAGS */ +article>footer>.content-tags { + color : var(--pico-code-value-color); + padding-top : 1rem; +} +/* POST OPTIONS */ +article > .content-filters, +article > .content-options, +article > .content-time, +article > .content-history { + background : none; + border : var(--pico-border); + border-radius : var(--pico-border-radius); + width : auto; + margin-bottom : var(--pico-grid-row-gap); +} +.content-filters >.filter > label { + display : flex; + justify-content : space-between; + flex-wrap : wrap; + align-content : center; + align-items : center; + flex-direction : row; + width : auto; +} +/* 🚧📐 div.category-sub:not(:last-child) ,*/ +:is(div.list-content):not(:only-of-type), +:is(div.list-content):not(:last-of-type), +:is(div.category-sub, div.category-forum):not(:only-of-type), +:is(div.category-sub, div.category-forum):not(:last-of-type){ + margin-bottom : var(--pico-typography-spacing-vertical); +} +:is(div.list-content):last-of-type {} + +/* WAITING CONTENT */ +:is(div.list-content) :where(em.warning) { + background : #f44336; + color : #fff; +} + + +/* -------------------- PAGE NAV - CONTENT PAGINATION */ +nav.page-nav div { + align-items : center; + display : flex; + justify-content : center; + flex-wrap : wrap; + justify-content : space-between; + padding : var(--pico-spacing); + margin-bottom : var(--pico-spacing); + width : 100%; +} +/* -------------------- PAGENAVI D3FORUM COMMENTS PAGINATION */ +nav.pagination { + display : flex; + margin : .5em 0; + flex-direction : row; + justify-content : flex-end; +} +ul.pagenavi li { + border : 0; + color : var(--pico-primary); + border : 1px solid var(--pico-muted-border-color); + border-radius : var(--pico-border-radius); + box-shadow : var(--pico-box-shadow); + padding : 0; + text-align : center; + user-select : none; + margin : 0 .25rem; + min-width : 4ch; +} +/* ul.pagenavi li:last-of-type { margin: 0} */ + +ul.pagenavi li:not([aria-current]) a { + background : var(--pico-form-element-background-color); + + margin : 0; + padding : .25rem .5rem; + width : 100%; +} + +ul.pagenavi li[aria-current] { + border-color : var(--pico-primary); + padding : .25rem .5rem; +} +ul.pagenavi li:not([aria-current]):hover a { + border-color : var(--pico-primary); + background : var(--pico-primary-focus); + color : var(--pico-secondary-inverse); + padding : .25rem .5rem; +} + +/* -------------------- MODULE SITEMAP */ +.grid-sitemap { + grid-column : 1 / 7; + display : grid; + grid-template-columns: repeat(auto-fit, minmax(200px, auto)); + justify-content : center; +} +.grid-map { + padding : 1rem 1rem 0; + grid-column : 1 / 7; + display : grid; + grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); + align-items : center; +} +.grid-map h1 { + font-size : 2rem +} +.grid-map .map iframe { border-radius: var(--pico-border-radius)} + +/* -------------------- SYSTEM Notification */ +/* Replacing older confirmMsg errorMsgg resultMsg msg-warning */ +.alert { + background : var(--pico-muted-border-color); + border-left : 3px solid; + border-color : var(--pico-border-color); + border-radius : var(--pico-border-radius); + padding : var(--pico-spacing); + margin : var(--pico-block-spacing-vertical) auto; +} +.error, +.warning { border-color: var(--pico-del-color) } +.success { border-color: var(--pico-ins-color) } +.info { border-color: var(--pico-code-color) } +.result { border-color: var(--pico-code-color) } + +/* -------------------- MODULE USER PROFILE AVATAR */ +/* Generate CSS Avatar Letter */ +.user-tab-avatar #avatar { +--avatar-size :96px; + background-size : 100% 100%; + background-position: 0px 0px,0px 0px,0px 0px,0px 0px,0px 0px; + background-image: repeating-linear-gradient(315deg, #00FFFF2E 92%, #073AFF00 100%),repeating-radial-gradient(75% 75% at 238% 218%, #00FFFF12 30%, #073AFF14 39%),radial-gradient(99% 99% at 109% 2%, #00C9FFFF 0%, #073AFF00 100%),radial-gradient(99% 99% at 21% 78%, #7B00FFFF 0%, #073AFF00 100%),radial-gradient(160% 154% at 711px -303px, #2000FFFF 0%, #073AFFFF 100%); + border-radius : 50%; + box-shadow : 2px 2px 2px #111; + height : var(--avatar-size); + margin : 20px 0; + text-align : center; + width : var(--avatar-size); +} +/* Avatar Letter */ +.user-tab-avatar #username { + font-size : 0; + display : block; + color : var(--pico-primary ); + position : relative; + line-height : 1; + text-transform : uppercase; + top : calc(var(--avatar-size) / 4); /* 25% of parent */ + transition : font-size 0.3s ease-in; + filter : drop-shadow(2px 2px 5px #010); /* drop-shadow(offset-x offset-y blur-radius color) */ +} +.user-tab-avatar #username::first-letter { + font-size : calc(var(--avatar-size) / 2); /* 50% of parent */ +} + +/* -------------------- MODULE MESSAGE & USER PROFILE */ +/* Note - Mail tab active overrides the default properties */ + +.mail-list-item { + border-bottom : 1px solid hsl(219, 17%, 21%); + line-height : 2.5rem; +} +.mail-list-avatar { + border-radius : 50%; + height : 24px; + margin : auto .25em; + width : 24px; + vertical-align : middle; +} +.mail-list-author { + width : 190px; +} +.mail-list-author input:disabled { + pointer-events: auto; + cursor: not-allowed; +} +.mail-list-subject { + font-size : 16px; + } +.mail-list-date { + font-size : small; + } +.mail-list-date { + font-size : small; +} +.mail-subject{} +.mail-to {} +.mail-from {} +.mail-date {} +.mail-content{} + +/* -------------------- SCROLL-TO-TOP */ +.scroll-top { + position : absolute; + top : 12rem; + right : 2rem; + bottom : 0; + pointer-events : none; + z-index : 9000; +} +.scroll-top #ntop-bg {fill: var(--pico-progress-background-color);} +.scroll-top #ntop-arrow {fill: var(--pico-primary-hover);} +.scroll-top a:hover #ntop-bg {fill: var(--pico-primary-hover-background);} +.scroll-top a:hover #ntop-arrow {fill: var(--pico-primary-inverse);} +.scroll-top a { + position : sticky; + top : -5rem; + width : 3rem; + height : 3rem; + margin-bottom : -5rem; + transform : translateY(100vh); + backface-visibility: hidden; + display : inline-block; + text-decoration : none; + user-select : none; + pointer-events : all; + outline : none; + overflow : hidden; + /* Style */ + box-shadow : var(--pico-box-shadow); + border : var(--pico-border-width) solid var(--pico-border-color); + border-radius : var(--pico-border-radius); +} +.scroll-top a svg { + display : block; + border-radius : var(--border-radius); + width : 100%; + height : 100%; +} +.scroll-top a svg path { + transition : all 0.1s; +} +.scroll-top a #ntop-arrow { + transform : scale(0.66); + transform-origin: center; +} +@media print { + .scroll-top { display: none !important; } +} + +/* -------------------- Animation / Transition */ +@keyframes bottom { + 0% { transform:translateY(10px); opacity:0; } + 100% { opacity:1; transform:none;} +} +@keyframes top { + 0% { transform:translateY(-10px); opacity:0; } + 100% { opacity:1; transform:none; } +} +@keyframes left { + 0% { transform:translateX(-10px); opacity:0; } + 100% { opacity:1; transform:none; } +} diff --git a/html/themes/pico-jade/templates/legacy/index.html b/html/themes/pico-jade/templates/legacy/index.html new file mode 100644 index 000000000..990cbd603 --- /dev/null +++ b/html/themes/pico-jade/templates/legacy/index.html @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/html/themes/pico-jade/templates/legacy/legacy_app_start_page.html b/html/themes/pico-jade/templates/legacy/legacy_app_start_page.html new file mode 100644 index 000000000..2e6f2a5bc --- /dev/null +++ b/html/themes/pico-jade/templates/legacy/legacy_app_start_page.html @@ -0,0 +1,103 @@ +<{* Dev-Mode Toggle *}> +<{if $xoops_isadmin}>
<{$smarty.template}>
<{/if}> + +
+ +

Welcome to <{$xoops_sitename}>

+

<{$xoops_meta_description}>

+ +

Getting started

+ +

Your website is preconfigured with default settings. + The backend administration provides a graphical user interface, also called control panel or admin dashboard, + to configure your website, install components, translation and localization.

+
+ +
+ General Settings +

The system module allows you to customize the general settings of your platform, such as the name and slogan of the site, + language and theme, or close your site and restrict access by user groups. +

Start Page or Module

+

You can modify this template "app_start_page.html”, or you can select a module as the starting point of your website.

+ <{if $xoops_isadmin}> +

Administration »» System »» Preferences ⭧

+ <{/if}> +
+ +
+ +
+ Closed for maintenance +
The site is currently closed for maintenance.
+

Maintenance mode allows you to close the site and display a custom notice to visitors.
+ You can also control who has access to your site when it is closed.

+

When you're ready to launch your site, simply go to System Preferences to open it to the public.

+ +
    +
  1. Maintenance Mode - Turn your site off?
    Select yes to turn your site off so that only users in selected groups have access to the site.
    2. +
  2. Maintenance Mode - Select groups
    Groups that are allowed to access while the site is turned off. Users in the default webmasters group are always granted access.
    3. +
  3. Maintenance Mode - Message
    The text that is displayed when closing the site.
    4. +
+

You can edit the Template site_closed.html" and customize the design to match your notice, maintenance, coming soon, etc.

+ <{if $xoops_isadmin}> +

Administration »» System »» Preferences »» "Maintenance mode-Turn your site off?" ⭧

+ <{/if}> +
+ +
+ +
+ User Groups Permissions +

You can assign users to multiple groups and easily grant access to content of modules and blocks. + The installation wizard creates the following system-required groups :

+
    +
  1. Webmasters (Administrators) +
  2. Registered Users (members) +
  3. Anonymous Users (Guests) +
+
Required user groups cannot be deleted !
+ You can create new groups and change permissions for each new group created.
+ <{if $xoops_isadmin}> +

Administration »» User Groups »» Preferences ⭧

+ <{/if}> +
+ +
+ +
+ Modules Preferences +

Modules also have their own settings, accessible from their "preferences" menu.

+

For example, the render module allows you to manage the meta data of your website, themes (general appearance of your website), and templates that shape the contents of modules and blocks.

+ <{if $xoops_isadmin}> +

Administration »» Render »» Preferences ⭧

+ <{/if}> +
+ +
+ +
+ Module Blocks +

When you install a module, its blocks are automatically added to the Block Management system. + These blocks often have their own functionality settings and customization templates.

+
On the frontend, click the three-dot dropdown menu to edit the block.
+

For example, the parameters of the "Main Menu" block allow you to display icons for each module and subcategories.

+ <{if $xoops_isadmin}> +

Administration »» System »» Block Management ⭧

+ <{/if}> +
+ +
+ +
+ Theme +

A theme consists of a single HTML file that can include components, a CSS stylesheet, JavaScript, modules, and block templates. On the frontend, the Themes block allows users to select their preferred theme. + You first need to enable the themes users can choose from, in Theme Management.

+
Learn more about the Theme Options - Custom Parameters link in the Theme Management
+ <{if $xoops_isadmin}> +

Administration »» System »» Theme Management ⭧

+ <{/if}> +
+ +
+ +
diff --git a/html/themes/pico-jade/templates/legacy/legacy_block_mainmenu.html b/html/themes/pico-jade/templates/legacy/legacy_block_mainmenu.html new file mode 100644 index 000000000..31c3b9bce --- /dev/null +++ b/html/themes/pico-jade/templates/legacy/legacy_block_mainmenu.html @@ -0,0 +1,31 @@ +<{if $xoops_isadmin}>
<{$smarty.template}>
<{/if}> + + diff --git a/html/themes/pico-jade/templates/legacy/legacy_block_search.html b/html/themes/pico-jade/templates/legacy/legacy_block_search.html new file mode 100644 index 000000000..c0eb26a27 --- /dev/null +++ b/html/themes/pico-jade/templates/legacy/legacy_block_search.html @@ -0,0 +1,15 @@ +<{* Dev-Mode Toggle *}> +<{if $xoops_isadmin}>
<{$smarty.template}>
<{/if}> + +
+
+ + + <{xoops_input type=hidden name=andor value=AND}> + <{xoops_input type=hidden name=action value=results}> + +
+

+ <{$smarty.const._MB_LEGACY_ADVS}> +

+
diff --git a/html/themes/pico-jade/templates/legacy/legacy_block_siteinfo.html b/html/themes/pico-jade/templates/legacy/legacy_block_siteinfo.html new file mode 100644 index 000000000..f0bb80cf2 --- /dev/null +++ b/html/themes/pico-jade/templates/legacy/legacy_block_siteinfo.html @@ -0,0 +1,30 @@ +<{* Dev-Mode Toggle *}> +<{if $xoops_isadmin}>
<{$smarty.template}>
<{/if}> + +
+<{if $block.showgroups == true}> + +<{/if}> + + + +
diff --git a/html/themes/pico-jade/templates/legacy/legacy_block_themes.html b/html/themes/pico-jade/templates/legacy/legacy_block_themes.html new file mode 100644 index 000000000..6eab64ac0 --- /dev/null +++ b/html/themes/pico-jade/templates/legacy/legacy_block_themes.html @@ -0,0 +1,37 @@ +<{* Dev-Mode Toggle *}> +<{if $xoops_isadmin}>
<{$smarty.template}>
<{/if}> + +<{if $block.isEnableChanger == false}> + <{$smarty.const._MB_LEGACY_MESSAGE_CAN_NOT_THEME_CHANGE}> +<{else}> + +
+ +
+ <{if $block.mode==1}> + <{$block.theme_selected_name}> + + + <{/if}> + <{foreach item=theme_option from=$block.theme_options}> + + <{/foreach}> + + +

<{''|cat:$block.count|cat:''|string_format:$smarty.const._MB_LEGACY_LANG_NUMTHEME}>

+ + <{if $block.mode==1}> +
+ <{/if}> + +
+
+ +<{/if}> + diff --git a/html/themes/pico-jade/templates/legacy/legacy_block_usermenu.html b/html/themes/pico-jade/templates/legacy/legacy_block_usermenu.html new file mode 100644 index 000000000..47bda4ab8 --- /dev/null +++ b/html/themes/pico-jade/templates/legacy/legacy_block_usermenu.html @@ -0,0 +1,47 @@ +<{* Dev-Mode Toggle +<{if $xoops_isadmin}>
<{$smarty.template}>
<{/if}>*}> +
+ <{$xoops_uname}> + <{$xoops_uname}> + +
diff --git a/html/themes/pico-jade/templates/legacy/legacy_redirect.html b/html/themes/pico-jade/templates/legacy/legacy_redirect.html new file mode 100644 index 000000000..9c8e69263 --- /dev/null +++ b/html/themes/pico-jade/templates/legacy/legacy_redirect.html @@ -0,0 +1,44 @@ + + + + + + +<{if !class_exists('AdelieDebug_Preload')}> + +<{/if}> +<{$xoops_sitename}> + + + + + + +
+
+

logo

+

<{$message}>

+ +

<{$lang_ifnotreload}>

+<{if class_exists('AdelieDebug_Preload')}> +

No automatic redirect during AdelieDebug execution.

+<{/if}> +
+
+ + + \ No newline at end of file diff --git a/html/themes/pico-jade/templates/legacy/legacy_redirect_function.html b/html/themes/pico-jade/templates/legacy/legacy_redirect_function.html new file mode 100644 index 000000000..8fab737e7 --- /dev/null +++ b/html/themes/pico-jade/templates/legacy/legacy_redirect_function.html @@ -0,0 +1,176 @@ + + + +<?php echo htmlspecialchars($xoopsConfig['sitename']); ?> + + + + + + +
+
+ Loading +
+
+
+
+
+

+

+
+ + diff --git a/html/themes/pico-jade/theme.html b/html/themes/pico-jade/theme.html new file mode 100644 index 000000000..ee288af48 --- /dev/null +++ b/html/themes/pico-jade/theme.html @@ -0,0 +1,305 @@ + + + + + + + + <{$xoops_sitename}> - <{$xoops_pagetitle}> + + + + + + + + + + + + + + + + + + <{if $xoops_dirname == 'pico' && isset($content.ef.pico_img)}> + + <{else}> + + <{/if}> + + + + + + + + <{* ----- Browserconfig, Webmanifest, XML Sitemap located in the root directory ----- *}> + + + + <{* ----- Favicons THEME COLOR ----- *}> + + + + <{* ----- Favicon SVG - default /images/favicon ----- *}> + + <{* ----- Favicons located in the root directory ----- *}> + + + + + <{* ----- Resquesturi $xoops_requesturi : /module/dirname/id ----- *}> + + <{* ----- CSS - PicoCSS ----- *}> + + + + <{$xoops_module_header}> + + <{* ----- Defer preload of custom styles for jQuery UI, PrismJS ----- *}> + + + + + <{* ----- CSS - Theme ----- *}> + + <{* ----- CSS - Theme JSON ----- *}> + <{assign var="theme" value="`$xoops_imageurl`theme.json"}> + <{json file="$theme" theme="theme" local="true"}> + <{foreach item=theme key=key from=$theme}> + <{assign var='name' value=$theme->name}> + <{assign var='title' value=$theme->title}> + <{assign var='slogan' value=$theme->slogan}> + <{assign var='body' value=$theme->body}> + <{assign var='color' value=$theme->color}> + <{assign var='primary' value=$theme->primary}> + <{assign var='secondary' value=$theme->secondary}> + <{assign var='inverse' value=$theme->inverse}> + <{/foreach}> + <{* ----- CSS - MainMenu Active ----- *}> + + + +
+ +
+ +<{* REMOVE SMARTY COMMENTS TO DISPLAY IN TOPPAGE ONLY *}> +<{* if $xoops_is_top|default:'' *}> +<{include file="$xoops_theme/component/_inc_hero.html"}> +<{* /if *}> + + +<{* ----- TOPPAGE Center Blocks Title width prefix top- & none- (hide title) + Note : It's Center Block Left that triggers the top to display *}> +<{if !empty($xoops_clblocks)}> +<{foreach item=block from=$xoops_clblocks}> + <{if $block.title|strstr:"top-" && !$block.title|strstr:"hero"}> + <{include file="$xoops_theme/component/_inc_top_center.html"}> + <{/if}> +<{/foreach}> +<{/if}> + + + +<{* ----- Main *}> +
+ + <{if $xoops_showlblock==1}> + + <{/if}> + +
+
+ <{if !empty($xoops_contents)}> + <{$xoops_contents}> + <{else}> + <{include file='db:legacy_app_start_page.html'}> + <{/if}> +
+
+ + <{if $xoops_showrblock==1}> + + <{/if}> + +
+ +<{if $banner !=" "}> +
+
+
+ <{$xoops_banner}> +
+
+
+<{/if}> + +<{* ---------- CENTER BLOCKS *}> +<{if $xoops_showcblock==1}> +
+ +<{* ---------- BLOCK Center-Left *}> +<{if !empty($xoops_clblocks)}> +
+ <{foreach item=block from=$xoops_clblocks}> + <{if !$block.title|strstr:"admin" && !$block.title|strstr:"top" && !$block.title|strstr:"hero"}> +
+

+ <{if $xoops_isadmin}> + <{$block.title}> + <{include file="$xoops_theme/component/_inc_block_edit.html"}> + <{else}> + <{if !$block.title|strstr:"none"}><{$block.title}><{/if}> + <{/if}> +

+
<{$block.content}>
+
+ <{/if}> + <{/foreach}> +
+<{/if}> + +<{* ---------- BLOCK Center-Center *}> +<{if !empty($xoops_ccblocks)}> +
+ <{foreach item=block from=$xoops_ccblocks}> + <{if !$block.title|strstr:"admin" && !$block.title|strstr:"top" && !$block.title|strstr:"hero"}> +
+

+ <{if $xoops_isadmin}> + <{$block.title}> + <{include file="$xoops_theme/component/_inc_block_edit.html"}> + <{else}> + <{if !$block.title|strstr:"none"}><{$block.title}><{/if}> + <{/if}> +

+
<{$block.content}>
+
+ <{/if}> + <{/foreach}> +
+<{/if}> + +<{* ---------- BLOCK Center-Right *}> +<{if !empty($xoops_crblocks)}> +
+ <{foreach item=block from=$xoops_crblocks}> + <{if !$block.title|strstr:"admin" && !$block.title|strstr:"top" && !$block.title|strstr:"hero"}> +
+

+ <{if $xoops_isadmin}> + <{$block.title}> + <{include file="$xoops_theme/component/_inc_block_edit.html"}> + <{else}> + <{if !$block.title|strstr:"none"}><{$block.title}><{/if}> + <{/if}> +

+
<{$block.content}>
+
+ <{/if}> + <{/foreach}> +
+<{/if}> + +
+<{/if}> + +<{* ---------- Scroll to top *}> +
+ + + + + + +
+ +<{if $banner !=" "}> +
+
+ +
+
+<{/if}> + +
+ +<{* ---------- FOOTER CREDITS *}> + + +<{* ---------- ADMIN FRONT PANEL *}> +<{if $xoops_isadmin}> +<{include file="$xoops_theme/component/admin-panel.html"}> +<{/if}> + +<{* ---------- DO NOT DEFER Theme Plugins - LocalStoarage & SVG ! *}> + + +<{* ---------- PrismJS ----- *}> + + + \ No newline at end of file diff --git a/html/themes/pico-jade/theme.json b/html/themes/pico-jade/theme.json new file mode 100644 index 000000000..fa96a2ebd --- /dev/null +++ b/html/themes/pico-jade/theme.json @@ -0,0 +1,19 @@ +{ + "theme": [ + { + "name": "Pico Jade", + "version": "2.4.0", + "date": "2024-04-20", + "author": "Nuno Luciano", + "title": "Your Dream, Your Legacy", + "slogan": "The greatest legacy that you will leave to your friends is your story.", + "body": "#13171f", + "color": "#c2c7d0", + "primary": "#00b478", + "secondary": "#969eaf", + "contrast": "#dfe3eb", + "inverse": "#000", + "muted": "#7b8495" + } + ] +} \ No newline at end of file diff --git a/html/themes/pico-orange/.editorconfig b/html/themes/pico-orange/.editorconfig new file mode 100644 index 000000000..4d87d9c2e --- /dev/null +++ b/html/themes/pico-orange/.editorconfig @@ -0,0 +1,13 @@ +# editorconfig.org +# XCL 2.4.0 +# This file is for unifying the coding style for different editors and IDEs + +root = true + +[*] +charset = utf-8 +end_of_line = lf +insert_final_newline = true +indent_size = 4 +indent_style = space +trim_trailing_whitespace = true diff --git a/html/themes/pico-orange/.gitignore b/html/themes/pico-orange/.gitignore new file mode 100644 index 000000000..0903b73bc --- /dev/null +++ b/html/themes/pico-orange/.gitignore @@ -0,0 +1,33 @@ +# XCL 2.4.0 +# OS or Editor folders +._* +.cache +.DS_Store +.idea +.project +.settings +.tmproj +*.esproj +*.sublime-project +*.sublime-workspace +nbproject +Thumbs.db +/.vscode/ + +# Numerous always-ignore extensions +*.diff +*.err +*.log +*.orig +*.rej +*.swo +*.swp +*.vi +*.zip +*~ + +# Folders to ignore +/node_modules/ + +# Pico +.pico diff --git a/html/themes/pico-orange/CHANGELOG.md b/html/themes/pico-orange/CHANGELOG.md new file mode 100644 index 000000000..fe78d411c --- /dev/null +++ b/html/themes/pico-orange/CHANGELOG.md @@ -0,0 +1,30 @@ +# Change Log + +## XCL Theme Pico Orange v.2.4.0 + +XCL Theme built with PicoCSS v2.0.6 + +All notable changes will be documented in this file. + +## [XCL Theme 240 ] 2024-04-20 + +- Add component block-center with Title prefix 'top-' +- Add condition to show Top Block-center (prefix 'top-none') +- Add daarkmode for CKEDITOR4 +- Update PicoCSS +- Update prefix CSS classes +- Update Templates +- Update jQuery UI theme built with CSS vars +- Theme style with customized CSS vars +- Fix Smarty logic in D3Forum and Pico +- Improved Pico's menu and TOC +- Smarty 2.6 fix isset and |default:'' + +## [XCL Pico 157 ] 2024-02-02 + +- Admin front panel block-right with Title prefix 'admin-' +- Load PicoCSS from theme folder +- Fix PHP8 warning errors related to Smarty +- Admin panel (using block-right with prefix 'admin-' in block-title) +- Banner placement and link to client +- Header UserMenu and Theme mode diff --git a/html/themes/pico-orange/LICENSE.md b/html/themes/pico-orange/LICENSE.md new file mode 100644 index 000000000..7341f375b --- /dev/null +++ b/html/themes/pico-orange/LICENSE.md @@ -0,0 +1,22 @@ +MIT License + +Copyright (c) 2019-2024 Pico +Copyright (c) 2019-2024 Nuno Luciano, XCL Theme + +Permission is hereby granted, free of charge, to any person obtaining a copy +of this software and associated documentation files (the "Software"), to deal +in the Software without restriction, including without limitation the rights +to use, copy, modify, merge, publish, distribute, sublicense, and/or sell +copies of the Software, and to permit persons to whom the Software is +furnished to do so, subject to the following conditions: + +The above copyright notice and this permission notice shall be included in all +copies or substantial portions of the Software. + +THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR +IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, +FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE +AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER +LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, +OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE +SOFTWARE. diff --git a/html/themes/pico-orange/component/_inc_block_edit.html b/html/themes/pico-orange/component/_inc_block_edit.html new file mode 100644 index 000000000..5c93fb699 --- /dev/null +++ b/html/themes/pico-orange/component/_inc_block_edit.html @@ -0,0 +1,27 @@ +<{assign var=admin_block_edit value="`$xoops_url`/modules/altsys/admin/index.php?mode=admin&lib=altsys&page=mytplsform&tpl_file="}> +<{assign var=admin_block_custom value="`$xoops_url`/modules/altsys/admin/index.php?mode=admin&lib=altsys&page=myblocksadmin&dirname=__CustomBlocks__&op=edit&bid="}> +
+ + + + + +
+ + + Edit B-<{$block.id}> + + + Clone Block + <{* if "" != $block.template *}> + <{if $block.template ne ""}> + + <{else}> + + <{/if}> + + + + Edit template +
+
diff --git a/html/themes/pico-orange/component/_inc_hero.html b/html/themes/pico-orange/component/_inc_hero.html new file mode 100644 index 000000000..d13579854 --- /dev/null +++ b/html/themes/pico-orange/component/_inc_hero.html @@ -0,0 +1,81 @@ + + + +
+ +
+ + + + + + + + +
+

<{$title}>

+

<{$slogan}>

+
+
+ +
\ No newline at end of file diff --git a/html/themes/pico-orange/component/_inc_nav_theme.html b/html/themes/pico-orange/component/_inc_nav_theme.html new file mode 100644 index 000000000..cb8235205 --- /dev/null +++ b/html/themes/pico-orange/component/_inc_nav_theme.html @@ -0,0 +1,8 @@ +
+ Theme + +
diff --git a/html/themes/pico-orange/component/_inc_top_center.html b/html/themes/pico-orange/component/_inc_top_center.html new file mode 100644 index 000000000..750d86eb6 --- /dev/null +++ b/html/themes/pico-orange/component/_inc_top_center.html @@ -0,0 +1,146 @@ + + +<{if $xoops_showcblock==1}> +
+ +
+

<{$xoops_sitename}>

+

<{$xoops_slogan}>

+
+
+
+<{* ---------- BLOCK Center-Left *}> +<{if !empty($xoops_clblocks)}> +
+ <{foreach item=block from=$xoops_clblocks}> + <{if $block.title|strstr:"top-" && !$block.title|strstr:"hero"}> +
+

+ <{if $xoops_isadmin}> + <{$block.title}> + <{include file="$xoops_theme/component/_inc_block_edit.html"}> + <{else}> + <{if ! $block.title|strstr:"none"}><{$block.title|replace:'top-':''}><{/if}> + <{/if}> +

+
<{$block.content}>
+
+ <{/if}> + <{/foreach}> +
+<{/if}> + +<{* ---------- BLOCK Center-Center *}> +<{if !empty($xoops_ccblocks)}> +
+ <{foreach item=block from=$xoops_ccblocks}> + <{if $block.title|strstr:"top-" && !$block.title|strstr:"hero"}> +
+

+ <{if $xoops_isadmin}> + <{$block.title}> + <{include file="$xoops_theme/component/_inc_block_edit.html"}> + <{else}> + <{if ! $block.title|strstr:"none"}><{$block.title|replace:'top-':''}><{/if}> + <{/if}> +

+
<{$block.content}>
+
+ <{/if}> + <{/foreach}> +
+<{/if}> + +<{* ---------- BLOCK Center-Right *}> +<{if !empty($xoops_crblocks)}> +
+ <{foreach item=block from=$xoops_crblocks}> + <{if $block.title|strstr:"top-" && !$block.title|strstr:"hero"}> +
+

+ <{if $xoops_isadmin}> + <{$block.title}> + <{include file="$xoops_theme/component/_inc_block_edit.html"}> + <{else}> + <{if ! $block.title|strstr:"none"}><{$block.title|replace:'top-':''}><{/if}> + <{/if}> +

+
<{$block.content}>
+
+ <{/if}> + <{/foreach}> +
+<{/if}> + +
+ +
+<{/if}> \ No newline at end of file diff --git a/html/themes/pico-orange/component/admin-panel.html b/html/themes/pico-orange/component/admin-panel.html new file mode 100644 index 000000000..b3b68d380 --- /dev/null +++ b/html/themes/pico-orange/component/admin-panel.html @@ -0,0 +1,237 @@ +<{* XCube Panel Options *}> + + + +
+
+ +
+
+ +<{* ----- RIGHT-SIDEBAR ----- *}> +
+ +
Control Panel + + + +
+ + <{* ----- RIGHT-PANEL-BLOCK ----- *}> +
+ + <{* ---------- Block-Right *}> + <{if $xoops_showrblock==1}> + <{foreach item=block from=$xoops_rblocks}> + <{if $block.title|strstr:"admin"}> +
+

+ <{* REMOVE 'admin-' FROM BLOCK-TITLE *}> + <{$block.title|replace:'admin-':''}> + <{include file="$xoops_theme/component/_inc_block_edit.html"}> +

+
<{$block.content}>
+
+ <{/if}> + <{foreachelse}> +
+ Add block with position block-right
+ and block-title with prefix admin- +
+ <{/foreach}> + <{/if}> + <{* ----- ADMIN PREVIEW ----- *}> +
Preview Layout
+
+ + + + +
+ +
+ <{* -----/ RIGHT-PANEL-BLOCK *}> + +
+<{* -----/ RIGHT-SIDEBAR *}> + diff --git a/html/themes/pico-orange/component/block-left.html b/html/themes/pico-orange/component/block-left.html new file mode 100644 index 000000000..dabcad9fe --- /dev/null +++ b/html/themes/pico-orange/component/block-left.html @@ -0,0 +1,18 @@ +<{* ---------- Block-Left *}> +<{foreach item=block from=$xoops_lblocks}> +<{if !$block.title|strstr:"Topage" && !$block.title|strstr:"User" || !$block.id==28}> +
+

+ <{if $xoops_isadmin}> + <{$block.title|replace:' ':'-'}> + <{include file="$xoops_theme/component/_inc_block_edit.html"}> + <{else}> + <{if ! $block.title|strstr:"none"}><{$block.title}><{/if}> + <{/if}> +

+
+ <{$block.content}> +
+
+<{/if}> +<{/foreach}> diff --git a/html/themes/pico-orange/component/block-right.html b/html/themes/pico-orange/component/block-right.html new file mode 100644 index 000000000..1edb488a6 --- /dev/null +++ b/html/themes/pico-orange/component/block-right.html @@ -0,0 +1,16 @@ +<{* ---------- Block-Right *}> +<{foreach item=block from=$xoops_rblocks}> +<{if !$block.title|strstr:"admin"}> +
+

+ <{if $xoops_isadmin}> + <{$block.title}> + <{include file="$xoops_theme/component/_inc_block_edit.html"}> + <{else}> + <{if ! $block.title|strstr:"none"}><{$block.title}><{/if}> + <{/if}> +

+
<{$block.content}>
+
+<{/if}> +<{/foreach}> diff --git a/html/themes/pico-orange/css/dropdown.css b/html/themes/pico-orange/css/dropdown.css new file mode 100644 index 000000000..6bd332f2b --- /dev/null +++ b/html/themes/pico-orange/css/dropdown.css @@ -0,0 +1,91 @@ +/* +* XCL Theme Dropdown +* +* @version 2.4.0 +* @update 2024-04-20 +* @Date 2024-02-02 +* @author Nuno Luciano ( https://github.com/gigamaster ) +* @copyright (c) 2005-2024 The XOOPSCube Project, authors +* @license MIT +* @link https://github.com/xoopscube +*/ +/* -------------------- Dropdown Menu */ + +div.dropdown { + position : relative; + display : block; +} +div.dropdown a.dropdown-toggle:not(.ui-tabs-anchor) { + background : transparent; /*var(--background-color);*/ + border : none; + border-radius : var(--pico-border-radius); + box-shadow : none; + color : var(--pico-primary-color); + cursor : pointer; + display : block; + font : inherit; + margin : 0; + padding : 0 .25rem .25rem; + transition : all var(--transition-time) var(--transition-cube); +} +div.dropdown a.dropdown-toggle:hover:not(.ui-tabs-anchor) { + background : var(--primary-focus); /* link [div][a] */ + box-shadow : none; + color : var(--primary-hover); + background : var(--pico-primary-hover-background); + color : var(--pico-primary-inverse); +} +div.dropdown.isopen div.dropdown-content { + display : block; + z-index : var(--z-above); +} +div.dropdown-content { + background : var(--pico-form-element-background-color); + border : var(--pico-border-width) solid var(--pico-form-element-border-color); + border-radius : var(--pico-border-radius); + box-shadow : var(--pico-card-box-shadow); /* 0px 2px 4px 1px hsla(0, 0%, 0%, 0.74); */ + color : var(--pico-primary-color); + display : none; + + min-width : 190px; + padding : .5rem; + position : absolute; + right : -10px; + + text-align : left; + top : 100%; + transition : all var(--transition-time) var(--transition-cube); +} +@media (min-width: 992px) { + .dropdown-content { + right : 1px; /* Fix device Viewport */ + } +} +div.dropdown div.dropdown-content ul { + margin : 0; + padding : 0; + list-style : none; +} +div.dropdown div.dropdown-content ul li { + background : transparent; + padding : 0; + width : 100%; +} +/* Dropdown links */ +div.dropdown div.dropdown-content a { + border-radius : var(--pico-border-radius); + color : var(--pico-primary-color); + display : block; + font-size : 16px; + padding : calc(var(--pico-form-element-spacing-vertical)* .8) var(--pico-form-element-spacing-horizontal); + text-decoration : none; +} +/* Change color of dropdown links on hover */ +div.dropdown div.dropdown-content a:hover { + background : var(--pico-primary-hover-background); + color : var(--pico-primary-inverse); +} + +div.dropdown div.dropdown-content a > svg { + margin : var(--dropdown-icon-margin); +} diff --git a/html/themes/pico-orange/css/index.html b/html/themes/pico-orange/css/index.html new file mode 100644 index 000000000..990cbd603 --- /dev/null +++ b/html/themes/pico-orange/css/index.html @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/html/themes/pico-orange/css/jquery-ui.theme.css b/html/themes/pico-orange/css/jquery-ui.theme.css new file mode 100644 index 000000000..9adef581c --- /dev/null +++ b/html/themes/pico-orange/css/jquery-ui.theme.css @@ -0,0 +1,693 @@ +/* +* XCL Theme Jquery-UI for PicoCSS v206 +* +* @version 2.4.0 +* @update 2024-04-20 +* @date 2024-02-02 +* @author Nuno Luciano ( https://github.com/gigamaster ) +* @copyright (c) 2005-2024 The XOOPSCube Project, authors +* @license MIT +* @link https://github.com/xoopscube +*/ + +/* Component containers +----------------------------------*/ +.ui-dialog.ui-widget.ui-front { + background : var(--pico-form-element-background-color); + box-shadow : var(--pico-box-shadow ); + padding : calc(var(--block-spacing-horizontal) * 1); + border : var(--pico-border-width) solid var(--pico-form-element-border-color); + background-color: var(--pico-modal-overlay-background-color); + backdrop-filter : var(--pico-modal-overlay-backdrop-filter); + -webkit-backdrop-filter: var(--pico-modal-overlay-backdrop-filter); + +} +.ui-dialog-dragging > .ui-widget-header { + background: var(--pico-primary-background); +} +.ui-widget { + font-size : 1rem +} +.ui-widget .ui-widget { + font-size : 1rem +} +.ui-widget input, +.ui-widget select, +.ui-widget textarea, +.ui-widget button { + outline : none; + font-family : inherit; + font-size : 1rem +} +.ui-widget.ui-widget-content { + /* border : 1px solid var(--pico-form-element-border-color); */ + border : 1px solid transparent; + background : var(--pico-form-element-background-color); + border-radius : var(--pico-border-radius); + box-shadow : var(--pico-card-box-shadow); + margin : 0; +} + +.ui-widget-content { + background : var(--pico-form-element-background-color); + border : 1px solid var(--pico-form-element-border-color); + color : var(--pico-color); +} +.ui-widget-content a { + color : var(--pico-primary); +} +.ui-widget-header { + background : var(--pico-card-sectioning-background-color); + border : var(--pico-border-width) solid var(--pico-border-color); + border-radius : var(--pico-border-radius); + color : var(--pico-color); + font-weight : var(--pico-font-weight); + list-style : none; +} +/* custom spacing */ +:is(.ui-menu) li.ui-widget-header { + /* custom spacing */ + padding: .175em .5em; + border: 1px solid var(--pico-dropdown-border-color) +} +.ui-widget-header a { + color : var(--pico-color); +} + +/* Interaction states +----------------------------------*/ +.ui-state-default, +.ui-widget-content .ui-state-default, +.ui-widget-header .ui-state-default, +.ui-button, +/* greater specificity when clicked or hovered */ +html .ui-button.ui-state-disabled:hover, +html .ui-button.ui-state-disabled:active { + background-color: var(--pico-background-color); + border : 1px solid var(--pico-form-element-border-color); + color : var(--pico-contrast); + font : var(--pico-font-size); + font-weight : inherit; +} +.ui-state-default a, +.ui-state-default a:link, +.ui-state-default a:visited, +a.ui-button, +a:link.ui-button, +a:visited.ui-button, +.ui-button { + background-color: var(--pico-background-color); + border: 1px solid transparent; + color : var(--pico-primary); + text-decoration : none; +} +.ui-state-hover, +.ui-widget-content .ui-state-hover, +.ui-widget-header .ui-state-hover, +.ui-state-focus, +.ui-widget-content .ui-state-focus, +.ui-widget-header .ui-state-focus, +.ui-button:hover, +.ui-button:focus { + background : var(--pico-primary-hover-background); + border : 1px solid var(--pico-primary-hover-border); + color : var(--pico-color); + font-weight : inherit; + outline : none; +} +.ui-state-hover a, +.ui-state-hover a:hover, +.ui-state-hover a:link, +.ui-state-hover a:visited, +.ui-state-focus a, +.ui-state-focus a:hover, +.ui-state-focus a:link, +.ui-state-focus a:visited, +a.ui-button:hover, +a.ui-button:focus { + background : var(--pico-primary-hover-background); + border : 1px solid var(--pico-primary-hover-border); + color : var(--pico-primary-hover); + font : var(--pico-font-size); + font-weight : inherit; + text-decoration : none; + outline : none; +} +.ui-visual-focus { + box-shadow : var(--pico-primary-focus); +} +.ui-state-active, +.ui-widget-content .ui-state-active, +.ui-widget-header .ui-state-active, +a.ui-button:active, +.ui-button:active, +.ui-button.ui-state-active:hover { + background : var(--pico-primary-hover-background); + border : 1px solid var(--pico-primary-hover-border); + color : var(--pico-primary-inverse); + font-weight : inherit; + outline : none; +} +.ui-state-active a, +.ui-state-active a:link, +.ui-state-active a:visited, +:where(.dropdown-content):not(a.dropdown-item) { + border : 1px solid var(--pico-primary-hover-border); + color : var(--pico-primary-focus); +} +/* Checkbox */ +.ui-icon-background, +.ui-state-active .ui-icon-background { + background-color: var(--pico-primary-hover-background); + border : 1px solid var(--pico-primary-hover-border); +} + +/* Interaction Cues +----------------------------------*/ +.ui-state-highlight, +.ui-widget-content .ui-state-highlight, +.ui-widget-header .ui-state-highlight { + background : var(--pico-primary-hover-background); + border : 1px solid var(--pico-primary-hover-border); + color : var(--pico-primary-inverse); +} +.ui-state-checked { + background : var(--ui-state-checked-bg); + border : var(--ui-state-checked-border); +} +.ui-state-highlight a, +.ui-widget-content .ui-state-highlight a, +.ui-widget-header .ui-state-highlight a { + color : var(--pico-primary-inverse); +} +.ui-state-error, +.ui-widget-content .ui-state-error, +.ui-widget-header .ui-state-error { + background : var(--ui-state-error-bg); + border : 1px solid var(--pico-primary-hover-border); + color : var(--ui-state-error-color); +} +.ui-state-error a, +.ui-widget-content .ui-state-error a, +.ui-widget-header .ui-state-error a { + color : var(--ui-state-error-link); +} +.ui-state-error-text, +.ui-widget-content .ui-state-error-text, +.ui-widget-header .ui-state-error-text { + color : var(--ui-state-error-text); +} +.ui-priority-primary, +.ui-widget-content .ui-priority-primary, +.ui-widget-header .ui-priority-primary { + font-weight : inherit; +} +.ui-priority-secondary, +.ui-widget-content .ui-priority-secondary, +.ui-widget-header .ui-priority-secondary { + font-weight : inherit; + opacity : 0.7; +} +.ui-state-disabled, +.ui-widget-content .ui-state-disabled, +.ui-widget-header .ui-state-disabled { + background-image: none; + border : 1px solid var(--pico-muted-border-color); + opacity : 0.35; +} + +/* Icons +----------------------------------*/ +/* states and images - RELATIVE TO XCL /COMMON */ +.ui-icon { + width: 16px; + height: 16px; +} +.ui-icon, +.ui-widget-content .ui-icon { + background-image: url("../../../common/js/images/ui-icons_cccccc_256x240.png"); +} +.ui-widget-header .ui-icon { + background-image: url("../../../common/js/images/ui-icons_cccccc_256x240.png"); +} +.ui-state-hover .ui-icon, +.ui-state-focus .ui-icon, +.ui-button:hover .ui-icon, +.ui-button:focus .ui-icon { + background-image: url("../../../common/js/images/ui-icons_ffffff_256x240.png"); +} +.ui-state-active .ui-icon, +.ui-button:active .ui-icon { + background-image: url("../../../common/js/images/ui-icons_ffffff_256x240.png"); +} +.ui-state-highlight .ui-icon, +.ui-button .ui-state-highlight.ui-icon { + background-image: url("../../../common/js/images/ui-icons_ffffff_256x240.png"); +} +.ui-state-error .ui-icon, +.ui-state-error-text .ui-icon { + background-image: url("../../../common/js/images/ui-icons_ffffff_256x240.png"); +} +.ui-button .ui-icon { + background-image: url("../../../common/js/images/ui-icons_cccccc_256x240.png"); +} + + +/* Misc visuals +----------------------------------*/ + +/* Corner radius */ +.ui-corner-all, +.ui-corner-top, +.ui-corner-left, +.ui-corner-tl { + border-top-left-radius: var(--pico-border-radius); +} +.ui-corner-all, +.ui-corner-top, +.ui-corner-right, +.ui-corner-tr { + border-top-right-radius: var(--pico-border-radius); +} +.ui-corner-all, +.ui-corner-bottom, +.ui-corner-left, +.ui-corner-bl { + border-bottom-left-radius: var(--pico-border-radius); +} +.ui-corner-all, +.ui-corner-bottom, +.ui-corner-right, +.ui-corner-br { + border-bottom-right-radius: var(--pico-border-radius); +} + +/* Overlays */ +/*Applies 100% width & height dimensions to an overlay screen*/ +.ui-widget-overlay { + background : var(--ui-widget-overlay-bg); + backdrop-filter : var(--pico-modal-overlay-backdrop-filter); + opacity : .8; +} +/*Sets box-shadow x & y offset, blur radius and color.*/ +.ui-widget-shadow { + box-shadow : var(--ui-widget-shadow); +} + +/* Accordion +----------------------------------*/ +.ui-accordion .ui-accordion-header { + background : var(--pico-background-color); + border : 1px solid var(--pico-accordion-border-color); + border-radius : var(--pico-border-radius); + box-shadow : var(--pico-box-shadow); + cursor : pointer; + display : block; + margin : var(--accordion-margin); + outline : 0; + margin-bottom : .15em; + padding : .5em; + position : relative; + -moz-user-select: none; + user-select : none; + transition : background-color var(--pico-transition); + +} +.ui-accordion .ui-accordion-content { + background : var(--pico-dropdown-background-color); + border : var(--pico-border-width) solid var(--pico-dropdown-border-color); + border-top : 0; + border-radius : var(--pico-border-radius); + color : var(--pico-color); + padding : var(--pico-form-element-spacing-vertical) var(--pico-form-element-spacing-horizontal); + overflow : auto; + transition: opacity var(--pico-transition), transform 0s ease-in-out 1s; +} +:is(.ui-accordion-header-active):not([aria-selected="false"][aria-expanded="false"]) { + color:var(--pico-primary-color); +} +:is(.ui-accordion-header):not([aria-selected="true"][aria-expanded="true"]) { + color:var(--pico-secondary); +} + +/* UI-MENU */ +.ui-menu { + background : var(--pico-form-element-background-color); + border : var(--pico-border-width) solid var(--pico-form-element-border-color); + border-radius : var(--pico-border-radius); + display : block; + list-style : none!important; + margin : var(--ui-menu-margin); + /* Override jQuery-UI css value */ + outline : 0; + padding:5px; + -moz-user-select: none; + user-select: none; +} +.ui-menu .ui-menu { + /* IMPORTANT override ui-widget-content */ + background : var(--pico-form-element-background-color); + border : var(--pico-border-width) solid var(--pico-form-element-border-color); + border-radius : var(--pico-border-radius); + position : absolute; + -moz-user-select: none; + user-select: none; +} +.ui-menu .ui-menu-item-wrapper { + background : inherit; + border : 1px solid transparent; + border-radius : var(--pico-border-radius); + color : var(--pico-color); + padding : .125em .25em; + /* position: relative;*/ +} +.ui-menu-icons { + position: relative +} +.ui-menu-icons .ui-menu-item-wrapper { + padding-left: 1.5em +} +.ui-menu .ui-icon { + position: absolute; + top: 0; + bottom: 0; + left: .2em; + margin: auto 0 +} +.ui-menu .ui-menu-icon { + left: auto; + right: 0 +} +.ui-menu .ui-state-focus, +.ui-menu .ui-state-active { + /* IMPORTANT override default UI properties */ + background : var(--pico-primary-hover-background); + border : 1px solid var(--pico-primary-hover-border); + border-radius : var(--pico-border-radius); + color : var(--pico-primary-inverse); + margin : 0; +} + +.ui-button:not(.ui-spinner-button,.ui-dialog-titlebar-close,.ui-controlgroup-item), +.ui-button:link, +.ui-button:visited { +--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)); + background-color: var(--pico-background-color); + border: var(--pico-border-width) solid var(--pico-border-color); + border-radius: var(--pico-border-radius); + box-shadow: var(--pico-box-shadow); + color: var(--pico-color); + cursor: pointer; + font-weight: var(--pico-font-weight); + font-size: var(--pico-font-size); + line-height: var(--pico-line-height); + outline: 0; + padding: var(--pico-form-element-spacing-vertical) var(--pico-form-element-spacing-horizontal); + text-align: center; + text-decoration: none; + -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); +} +.ui-button:hover { +--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); +} +/* +ref: https://api.jquery.com/first/ +*/ +:is(.ui-selectmenu-button.ui-button) { + padding : var(--pico-form-element-spacing-vertical) var(--pico-form-element-spacing-horizontal); + margin-bottom : var(--pico-spacing); + background-color: var(--pico-form-element-background-color); + border : var(--pico-border-width) solid var(--pico-form-element-border-color); + border-radius : var(--pico-border-radius); + box-shadow : var(--pico-button-hover-box-shadow, 0 0 0 rgba(0, 0, 0, 0.2)); + color : var(--pico-form-element-placeholder-color); + cursor : pointer; + height : calc(1rem* var(--pico-line-height) + var(--pico-form-element-spacing-vertical)* 2 + var(--pico-border-width)* 2); + line-height : inherit; + text-align : left; + -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); +} +:is(.ui-selectmenu-button-open.ui-button) { +background-color: var(--pico-form-element-background-color); +border : var(--pico-border-width) solid var(--pico-form-element-border-color); +color : var(--pico-form-element-placeholder-color); +} +.ui-selectmenu-menu .ui-menu .ui-selectmenu-optgroup { + font-weight : var(--pico-font-weight); + margin : 0; +} +.ui-controlgroup-horizontal:first-child .ui-controlgroup-item:nth-of-type(1), +.ui-controlgroup-horizontal > .ui-selectmenu-button { + border-top-left-radius: var(--pico-border-radius) !important; + border-bottom-left-radius: var(--pico-border-radius) !important; +} +.ui-controlgroup-horizontal .ui-controlgroup-item:last-child { + border-top-right-radius: var(--pico-border-radius) !important; + border-bottom-right-radius: var(--pico-border-radius) !important; +} +.ui-controlgroup-vertical .ui-controlgroup-item:first-child, +.ui-controlgroup-vertical .ui-selectmenu-button { + border-top-left-radius: var(--pico-border-radius) !important; + border-top-right-radius: var(--pico-border-radius) !important; +} +.ui-controlgroup-vertical .ui-controlgroup-item:last-child { + border-bottom-left-radius: var(--pico-border-radius); + border-bottom-right-radius: var(--pico-border-radius) !important; +} +.ui-controlgroup { + display : inline-block; + vertical-align : middle; +} +:where(.ui-controlgroup ) .ui-controlgroup-item:not(.ui-spinner) { + background : var(--pico-background-color); + border : var(--pico-border-width) solid var(--pico-form-element-border-color); + color : var(--pico-color); + padding : var(--pico-form-element-spacing-vertical) var(--pico-form-element-spacing-horizontal); + margin : 0; +} +.ui-controlgroup .ui-controlgroup-label span { + font-size : 1rem; + color : var(--pico-primary); +} +.ui-controlgroup-horizontal .ui-controlgroup-label + .ui-controlgroup-item { + border-left : var(--pico-border-width) solid var(--pico-accordion-border-color); +} + +/* RESET BROWSER SPINNER */ +input::-webkit-outer-spin-button, +input::-webkit-inner-spin-button { +display: none; +-webkit-appearance: none; +margin: 0; /* reset margin */ +outline: none; +} +input[type=number] { +-moz-appearance:textfield; /* Firefox */ +} +.ui-spinner-input { + -webkit-appearance: none; + -moz-appearance: textfield; + appearance: none; + border: var(--pico-border-width) solid var(--pico-form-element-border-color); + border-radius: var(--pico-border-radius); + margin: 0!important; + padding-right: 30px!important; + min-width: 8ch; + text-align: center; + vertical-align: middle; + outline: none; +} +.ui-spinner-input:focus{outline:none;box-shadow: 0 0 0 var(--pico-outline-width) var(--pico-primary-focus);} +.ui-spinner a.ui-spinner-button { + position: absolute; + height: 28px!important; + background: var(--pico-primary-underline); +} +.ui-spinner a.ui-spinner-button:hover{ +background: var(--pico-primary-hover-background); +} + +/* CHECKBOX + icon */ +.ui-checkboxradio-label .ui-icon-background { +--pico-background-color: var(--pico-primary-background); +--pico-border-color: var(--pico-primary-border); + -webkit-appearance: none; + -moz-appearance: none; + appearance: none; + accent-color : var(--pico-primary); + background : var(--pico-form-element-border-color); + border : 2px solid var(--pico-form-element-border-color); + border-radius : 3px; + box-shadow : var(--ui-state-check-shadow); + background-position: center; + background-size : .75em auto; + background-repeat: no-repeat; +} +/* RADIO */ +.ui-checkboxradio-radio-label .ui-icon-background { + background : white; + border : 8px solid var(--pico-form-element-border-color); + border-radius : 50%; + box-shadow : var(--ui-state-check-shadow); + height : var(--ui-state-check-height); + width : var(--ui-state-check-width); +} +.ui-checkboxradio-radio-label.ui-checkboxradio-checked .ui-icon, +.ui-checkboxradio-radio-label.ui-checkboxradio-checked:hover .ui-icon { + background-image: var(--pico-icon-checkbox); + background : white; + cursor : pointer; +} + +.ui-datepicker table { + font-size : 16px; +} +.ui-datepicker .ui-datepicker-prev, +.ui-datepicker .ui-datepicker-next{ + border : 1px solid transparent; + position : absolute; + top : 2px; + width : 1.8em; + height : 1.8em +} +.ui-datepicker .ui-datepicker-prev-hover, +.ui-datepicker .ui-datepicker-next-hover{ + top:2px +} +.ui-datepicker .ui-datepicker-prev{ + left:2px +} +.ui-datepicker .ui-datepicker-next{ + right:2px +} +.ui-datepicker .ui-datepicker-prev-hover{ + left:2px +} +.ui-datepicker .ui-datepicker-next-hover{ + right:2px +} +.ui-datepicker .ui-datepicker-prev span, +.ui-datepicker .ui-datepicker-next span{ + display:block; + position:absolute; + left:50%; + margin-left:-8px; + top:50%; + margin-top:-8px +} +.ui-datepicker .ui-datepicker-title{ + margin:0 2.3em; + line-height:1.8em; + text-align:center +} + +.ui-progressbar { + height : var(--ui-progressbar-height); +} +.ui-progressbar .ui-progressbar-value { + background : var(--ui-progressbar-value); +} + + +/* -------------------- -------------------- jQUERY UI TAB */ +.ui-tabs { + position : relative; + border : none; + border-radius : var(--pico-border-radius); + margin : 0; + padding:0.875rem; + list-style : none; +} +.ui-tabs .ui-tabs-nav { + margin : 0; + padding : .2em .2em 0; +} +/* The list of tabs */ +.ui-tabs .ui-tabs-nav { + background : transparent; + border : none; + border-top-left-radius : var(--pico-border-radius); + border-top-right-radius : var(--pico-border-radius); + box-shadow : var(--pico-box-shadow); + cursor : pointer; + display : inline-block; + line-height : 1.25; +} +.ui-tabs .ui-tabs-nav li { + /* border: 1px solid var(--pico-primary-underline); */ + list-style: none; + float: left; + position: relative; + top: 0; + margin: 0; + white-space: nowrap; +} +/* The anchors used to switch panels. */ +.ui-tabs .ui-tabs-nav .ui-tabs-anchor { + /* background : var(--pico-primary-underline); */ + background : transparent; + color : var(--pico-primary); + float : left; + text-decoration : none; +} +/* li .ui-tabs-anchor:first-child { +border-top-left-radius: var(--pico-border-radius); +} +li .ui-tabs-anchor:last-child { + border-top-right-radius: var(--pico-border-radius); +} */ + +.ui-tabs .ui-tabs-nav li.ui-tabs-active { + margin-bottom: 0; + padding-bottom: 0; + border-radius: var(--pico-border-radius); + border:none; +} +:is(.ui-tabs-tab).ui-state-default,.ui-state-default{ + border-radius: var(--pico-border-radius); +} +.ui-tabs-collapsible .ui-tabs-nav li.ui-tabs-active .ui-tabs-anchor { + cursor: pointer; +} +.ui-tabs .ui-tabs-nav .ui-tabs-anchor:hover, +.ui-tabs .ui-tabs-nav li.ui-tabs-active .ui-tabs-anchor { + background : var(--pico-primary-hover-background); + color : var(--pico-contrast); +} + +:where(li.ui-tabs-tab, a.ui-tabs-anchor):first-child {border-top-left-radius: var(--pico-border-radius)} +:where(li.ui-tabs-tab, a.ui-tabs-anchor):last-child {border-top-right-radius: var(--pico-border-radius)} +.ui-tabs .ui-tabs-panel { + background : var(--pico-card-background-color); + display : block; + border : var(--ui-tab-panel-border); + padding : var(--pico-block-spacing-vertical) var(--pico-block-spacing-horizontal); +} + +/* CUSTOMIZED content loading via an Ajax call will have the ui-tabs-loading class. */ +.ui-tabs-loading { + border : var(--ui-tabs-loading); /* TODO */ +} + +/* -------------------- jQUERY UI Tooltip */ +/*.ui-tooltip { + padding: 8px; + position: absolute; + z-index: 9999; + max-width: 300px; +} +body .ui-tooltip { + border-width: 2px; +}*/ diff --git a/html/themes/pico-orange/css/pico.orange.min.css b/html/themes/pico-orange/css/pico.orange.min.css new file mode 100644 index 000000000..1e3b9e79e --- /dev/null +++ b/html/themes/pico-orange/css/pico.orange.min.css @@ -0,0 +1,4 @@ +@charset "UTF-8";/*! + * Pico CSS ✨ v2.0.6 (https://picocss.com) + * Copyright 2019-2024 - Licensed under MIT + */:root{--pico-font-family-emoji:"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";--pico-font-family-sans-serif:system-ui,"Segoe UI",Roboto,Oxygen,Ubuntu,Cantarell,Helvetica,Arial,"Helvetica Neue",sans-serif,var(--pico-font-family-emoji);--pico-font-family-monospace:ui-monospace,SFMono-Regular,"SF Mono",Menlo,Consolas,"Liberation Mono",monospace,var(--pico-font-family-emoji);--pico-font-family:var(--pico-font-family-sans-serif);--pico-line-height:1.5;--pico-font-weight:400;--pico-font-size:100%;--pico-text-underline-offset:0.1rem;--pico-border-radius:0.25rem;--pico-border-width:0.0625rem;--pico-outline-width:0.125rem;--pico-transition:0.2s ease-in-out;--pico-spacing:1rem;--pico-typography-spacing-vertical:1rem;--pico-block-spacing-vertical:var(--pico-spacing);--pico-block-spacing-horizontal:var(--pico-spacing);--pico-grid-column-gap:var(--pico-spacing);--pico-grid-row-gap:var(--pico-spacing);--pico-form-element-spacing-vertical:0.75rem;--pico-form-element-spacing-horizontal:1rem;--pico-group-box-shadow:0 0 0 rgba(0, 0, 0, 0);--pico-group-box-shadow-focus-with-button:0 0 0 var(--pico-outline-width) var(--pico-primary-focus);--pico-group-box-shadow-focus-with-input:0 0 0 0.0625rem var(--pico-form-element-border-color);--pico-modal-overlay-backdrop-filter:blur(0.375rem);--pico-nav-element-spacing-vertical:1rem;--pico-nav-element-spacing-horizontal:0.5rem;--pico-nav-link-spacing-vertical:0.5rem;--pico-nav-link-spacing-horizontal:0.5rem;--pico-nav-breadcrumb-divider:">";--pico-icon-checkbox:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(255, 255, 255)' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");--pico-icon-minus:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(255, 255, 255)' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='5' y1='12' x2='19' y2='12'%3E%3C/line%3E%3C/svg%3E");--pico-icon-chevron:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(136, 145, 164)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");--pico-icon-date:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(136, 145, 164)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='18' rx='2' ry='2'%3E%3C/rect%3E%3Cline x1='16' y1='2' x2='16' y2='6'%3E%3C/line%3E%3Cline x1='8' y1='2' x2='8' y2='6'%3E%3C/line%3E%3Cline x1='3' y1='10' x2='21' y2='10'%3E%3C/line%3E%3C/svg%3E");--pico-icon-time:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(136, 145, 164)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cpolyline points='12 6 12 12 16 14'%3E%3C/polyline%3E%3C/svg%3E");--pico-icon-search:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(136, 145, 164)' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'%3E%3C/circle%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'%3E%3C/line%3E%3C/svg%3E");--pico-icon-close:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(136, 145, 164)' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='18' y1='6' x2='6' y2='18'%3E%3C/line%3E%3Cline x1='6' y1='6' x2='18' y2='18'%3E%3C/line%3E%3C/svg%3E");--pico-icon-loading:url("data:image/svg+xml,%3Csvg fill='none' height='24' width='24' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg' %3E%3Cstyle%3E g %7B animation: rotate 2s linear infinite; transform-origin: center center; %7D circle %7B stroke-dasharray: 75,100; stroke-dashoffset: -5; animation: dash 1.5s ease-in-out infinite; stroke-linecap: round; %7D @keyframes rotate %7B 0%25 %7B transform: rotate(0deg); %7D 100%25 %7B transform: rotate(360deg); %7D %7D @keyframes dash %7B 0%25 %7B stroke-dasharray: 1,100; stroke-dashoffset: 0; %7D 50%25 %7B stroke-dasharray: 44.5,100; stroke-dashoffset: -17.5; %7D 100%25 %7B stroke-dasharray: 44.5,100; stroke-dashoffset: -62; %7D %7D %3C/style%3E%3Cg%3E%3Ccircle cx='12' cy='12' r='10' fill='none' stroke='rgb(136, 145, 164)' stroke-width='4' /%3E%3C/g%3E%3C/svg%3E")}@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.contrast,a.secondary{--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}tfoot td,tfoot th,thead td,thead th{--pico-font-weight:600;--pico-border-width:0.1875rem}code,kbd,pre,samp{--pico-font-family:var(--pico-font-family-monospace)}kbd{--pico-font-weight:bolder}:where(select,textarea),input:not([type=submit],[type=button],[type=reset],[type=checkbox],[type=radio],[type=file]){--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=group]:has(button.secondary:focus,[type=submit].secondary:focus,[type=button].secondary:focus,[role=button].secondary:focus),[role=search]: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=group]:has(button.contrast:focus,[type=submit].contrast:focus,[type=button].contrast:focus,[role=button].contrast:focus),[role=search]: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=group] [role=button],[role=group] [type=button],[role=group] [type=submit],[role=group] button,[role=search] [role=button],[role=search] [type=button],[role=search] [type=submit],[role=search] 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)}:root:not([data-theme=dark]),[data-theme=light]{--pico-background-color:#fff;--pico-color:#373c44;--pico-text-selection-color:rgba(244, 93, 44, 0.25);--pico-muted-color:#646b79;--pico-muted-border-color:#e7eaf0;--pico-primary:#bd3c13;--pico-primary-background:#d24317;--pico-primary-border:var(--pico-primary-background);--pico-primary-underline:rgba(189, 60, 19, 0.5);--pico-primary-hover:#942d0d;--pico-primary-hover-background:#bd3c13;--pico-primary-hover-border:var(--pico-primary-hover-background);--pico-primary-hover-underline:var(--pico-primary-hover);--pico-primary-focus:rgba(244, 93, 44, 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:var(--pico-background-color);--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}:root:not([data-theme=dark]) input:is([type=submit],[type=button],[type=reset],[type=checkbox],[type=radio],[type=file]),[data-theme=light] 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(245, 107, 61, 0.1875);--pico-muted-color:#7b8495;--pico-muted-border-color:#202632;--pico-primary:#f56b3d;--pico-primary-background:#d24317;--pico-primary-border:var(--pico-primary-background);--pico-primary-underline:rgba(245, 107, 61, 0.5);--pico-primary-hover:#f8a283;--pico-primary-hover-background:#e74b1a;--pico-primary-hover-border:var(--pico-primary-hover-background);--pico-primary-hover-underline:var(--pico-primary-hover);--pico-primary-focus:rgba(245, 107, 61, 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(245, 107, 61, 0.1875);--pico-muted-color:#7b8495;--pico-muted-border-color:#202632;--pico-primary:#f56b3d;--pico-primary-background:#d24317;--pico-primary-border:var(--pico-primary-background);--pico-primary-underline:rgba(245, 107, 61, 0.5);--pico-primary-hover:#f8a283;--pico-primary-hover-background:#e74b1a;--pico-primary-hover-border:var(--pico-primary-hover-background);--pico-primary-hover-underline:var(--pico-primary-hover);--pico-primary-focus:rgba(245, 107, 61, 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)}[type=checkbox],[type=radio],[type=range],progress{accent-color:var(--pico-primary)}*,::after,::before{box-sizing:border-box;background-repeat:no-repeat}::after,::before{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}body{width:100%;margin:0}main{display:block}body>footer,body>header,body>main{padding-block:var(--pico-block-spacing-vertical)}section{margin-bottom:var(--pico-block-spacing-vertical)}.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{grid-column-gap:var(--pico-grid-column-gap);grid-row-gap:var(--pico-grid-row-gap);display:grid;grid-template-columns:1fr}@media (min-width:768px){.grid{grid-template-columns:repeat(auto-fit,minmax(0%,1fr))}}.grid>*{min-width:0}.overflow-auto{overflow:auto}b,strong{font-weight:bolder}sub,sup{position:relative;font-size:.75em;line-height:0;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.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) * .25)}:where(dl,ol,ul) :where(dl,ol,ul){margin:0;margin-top:calc(var(--pico-typography-spacing-vertical) * .25)}ul li{list-style:square}mark{padding:.125rem .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:.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) * .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)}:where(a:not([role=button])),[role=link]{--pico-color:var(--pico-primary);--pico-background-color:transparent;--pico-underline:var(--pico-primary-underline);outline:0;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{margin:0;overflow:visible;font-family:inherit;text-transform:none}[type=button],[type=reset],[type=submit],button{-webkit-appearance:button}[role=button],[type=button],[type=file]::file-selector-button,[type=reset],[type=submit],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:0;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)}[role=button]:is(:hover,:active,:focus),[role=button]:is([aria-current]:not([aria-current=false])),[type=button]:is(:hover,:active,:focus),[type=button]:is([aria-current]:not([aria-current=false])),[type=file]::file-selector-button:is(:hover,:active,:focus),[type=file]::file-selector-button:is([aria-current]:not([aria-current=false])),[type=reset]:is(:hover,:active,:focus),[type=reset]:is([aria-current]:not([aria-current=false])),[type=submit]:is(:hover,:active,:focus),[type=submit]:is([aria-current]:not([aria-current=false])),button:is(:hover,:active,:focus),button:is([aria-current]:not([aria-current=false])){--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)}[role=button]:focus,[role=button]: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,[type=reset]:focus,[type=reset]:is([aria-current]:not([aria-current=false])):focus,[type=submit]:focus,[type=submit]:is([aria-current]:not([aria-current=false])):focus,button:focus,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=button],[type=reset],[type=submit]{margin-bottom:var(--pico-spacing)}:is(button,[type=submit],[type=button],[role=button]).secondary,[type=file]::file-selector-button,[type=reset]{--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=file]::file-selector-button:is([aria-current]:not([aria-current=false]),:hover,:active,:focus),[type=reset]: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=file]::file-selector-button:focus,[type=file]::file-selector-button:is([aria-current]:not([aria-current=false])):focus,[type=reset]:focus,[type=reset]: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:.5;pointer-events:none}:where(table){width:100%;border-collapse:collapse;border-spacing:0;text-indent:0}td,th{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 td,tfoot th{border-top:var(--pico-border-width) solid var(--pico-table-border-color);border-bottom:0}table.striped tbody tr:nth-child(odd) td,table.striped tbody tr:nth-child(odd) th{background-color:var(--pico-table-row-stripped-background-color)}: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,kbd,pre,samp{font-size:.875em;font-family:var(--pico-font-family)}pre code{font-size:inherit;font-family:inherit}pre{-ms-overflow-style:scrollbar;overflow:auto}code,kbd,pre{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:.375rem}pre{display:block;margin-bottom:var(--pico-spacing);overflow-x:auto}pre>code{display:block;padding:var(--pico-spacing);background:0 0;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{display:block;margin:0;padding:0}figure figcaption{padding:calc(var(--pico-spacing) * .5) 0;color:var(--pico-muted-color)}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}input,optgroup,select,textarea{margin:0;font-size:1rem;line-height:var(--pico-line-height);font-family:inherit;letter-spacing:inherit}input{overflow:visible}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:0}:-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}fieldset legend,label{display:block;margin-bottom:calc(var(--pico-spacing) * .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) * .5)}button[type=submit],input:not([type=checkbox],[type=radio]),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:0;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)}:where(select,textarea):not([readonly]):is(:active,:focus),input:not([type=submit],[type=button],[type=reset],[type=checkbox],[type=radio],[readonly]):is(:active,:focus){--pico-background-color:var(--pico-form-element-active-background-color)}:where(select,textarea):not([readonly]):is(:active,:focus),input:not([type=submit],[type=button],[type=reset],[role=switch],[readonly]):is(:active,:focus){--pico-border-color:var(--pico-form-element-active-border-color)}:where(select,textarea):not([readonly]):focus,input:not([type=submit],[type=button],[type=reset],[type=range],[type=file],[readonly]):focus{--pico-box-shadow:0 0 0 var(--pico-outline-width) var(--pico-form-element-focus-color)}:where(fieldset[disabled]) :is(input:not([type=submit],[type=button],[type=reset]),select,textarea),input:not([type=submit],[type=button],[type=reset])[disabled],label[aria-disabled=true],select[disabled],textarea[disabled]{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 .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 .75rem}input::-webkit-input-placeholder,input::placeholder,select:invalid,textarea::-webkit-input-placeholder,textarea::placeholder{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 .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 .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 .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) * -.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) * .25)}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:-.125em;margin-inline-end:.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:.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:.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:.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 .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:active[aria-invalid=true],[type=checkbox]:checked:focus[aria-invalid=true],[type=checkbox]:checked[aria-invalid=true],[type=checkbox][role=switch]:checked:active[aria-invalid=true],[type=checkbox][role=switch]:checked:focus[aria-invalid=true],[type=checkbox][role=switch]:checked[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=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,[type=radio][aria-invalid=false]:checked,[type=radio][aria-invalid=false]:checked:active,[type=radio][aria-invalid=false]:checked:focus{--pico-border-color:var(--pico-form-element-valid-border-color)}[type=checkbox]:checked:active[aria-invalid=true],[type=checkbox]:checked:focus[aria-invalid=true],[type=checkbox]:checked[aria-invalid=true],[type=checkbox][role=switch]:checked:active[aria-invalid=true],[type=checkbox][role=switch]:checked:focus[aria-invalid=true],[type=checkbox][role=switch]:checked[aria-invalid=true],[type=radio]:checked:active[aria-invalid=true],[type=radio]:checked:focus[aria-invalid=true],[type=radio]:checked[aria-invalid=true]{--pico-border-color:var(--pico-form-element-invalid-border-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) * .5)}[type=color]::-moz-color-swatch{border:0;border-radius:calc(var(--pico-border-radius) * .5)}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}[type=file]{--pico-color:var(--pico-muted-color);margin-left:calc(var(--pico-outline-width) * -1);padding:calc(var(--pico-form-element-spacing-vertical) * .5) 0;padding-left:var(--pico-outline-width);border:0;border-radius:0;background:0 0}[type=file]::file-selector-button{margin-right:calc(var(--pico-spacing)/ 2);padding:calc(var(--pico-form-element-spacing-vertical) * .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)}[type=range]{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:100%;height:1.25rem;background:0 0}[type=range]::-webkit-slider-runnable-track{width:100%;height:.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:.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:.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:-.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:-.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:-.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: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) + .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 .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 .75rem}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) * .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:0}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);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)}article>footer,article>header{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) * .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)}details.dropdown{position:relative;border-bottom:none}details.dropdown summary::after,details.dropdown>a::after,details.dropdown>button::after{display:block;width:1rem;height:calc(1rem * var(--pico-line-height,1.5));margin-inline-start:.25rem;float:right;transform:rotate(0) translateX(.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:0}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(0) translateX(0)}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) * .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) * .5)}details.dropdown summary+ul li:last-of-type{margin-bottom:calc(var(--pico-form-element-spacing-vertical) * .5)}details.dropdown summary+ul li a{display:block;margin:calc(var(--pico-form-element-spacing-vertical) * -.5) calc(var(--pico-form-element-spacing-horizontal) * -1);padding:calc(var(--pico-form-element-spacing-vertical) * .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:active,details.dropdown summary+ul li a:focus,details.dropdown summary+ul li a:focus-visible,details.dropdown summary+ul li a:hover,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:0 0;content:"";cursor:default}label>details.dropdown{margin-top:calc(var(--pico-spacing) * .25)}[role=group],[role=search]{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 transparent);vertical-align:middle;transition:box-shadow var(--pico-transition)}[role=group] input:not([type=checkbox],[type=radio]),[role=group] select,[role=group]>*,[role=search] input:not([type=checkbox],[type=radio]),[role=search] select,[role=search]>*{position:relative;flex:1 1 auto;margin-bottom:0}[role=group] input:not([type=checkbox],[type=radio]):not(:first-child),[role=group] select:not(:first-child),[role=group]>:not(:first-child),[role=search] input:not([type=checkbox],[type=radio]):not(:first-child),[role=search] select:not(:first-child),[role=search]>:not(:first-child){margin-left:0;border-top-left-radius:0;border-bottom-left-radius:0}[role=group] input:not([type=checkbox],[type=radio]):not(:last-child),[role=group] select:not(:last-child),[role=group]>:not(:last-child),[role=search] input:not([type=checkbox],[type=radio]):not(:last-child),[role=search] select:not(:last-child),[role=search]>:not(:last-child){border-top-right-radius:0;border-bottom-right-radius:0}[role=group] input:not([type=checkbox],[type=radio]):focus,[role=group] select:focus,[role=group]>:focus,[role=search] input:not([type=checkbox],[type=radio]):focus,[role=search] select:focus,[role=search]>:focus{z-index:2}[role=group] [role=button]:not(:first-child),[role=group] [type=button]:not(:first-child),[role=group] [type=reset]:not(:first-child),[role=group] [type=submit]:not(:first-child),[role=group] button:not(:first-child),[role=group] input:not([type=checkbox],[type=radio]):not(:first-child),[role=group] select:not(:first-child),[role=search] [role=button]:not(:first-child),[role=search] [type=button]:not(:first-child),[role=search] [type=reset]:not(:first-child),[role=search] [type=submit]:not(:first-child),[role=search] button:not(:first-child),[role=search] input:not([type=checkbox],[type=radio]):not(:first-child),[role=search] select:not(:first-child){margin-left:calc(var(--pico-border-width) * -1)}[role=group] [role=button],[role=group] [type=button],[role=group] [type=reset],[role=group] [type=submit],[role=group] button,[role=search] [role=button],[role=search] [type=button],[role=search] [type=reset],[role=search] [type=submit],[role=search] button{width:auto}@supports selector(:has(*)){[role=group]:has(button:focus,[type=submit]:focus,[type=button]:focus,[role=button]:focus),[role=search]: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=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,[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{border-color:transparent}[role=group]:has(input:not([type=submit],[type=button]):focus,select:focus),[role=search]:has(input:not([type=submit],[type=button]):focus,select:focus){--pico-group-box-shadow:var(--pico-group-box-shadow-focus-with-input)}[role=group]:has(input:not([type=submit],[type=button]):focus,select:focus) [role=button],[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) [type=submit],[role=group]:has(input:not([type=submit],[type=button]):focus,select:focus) button,[role=search]:has(input:not([type=submit],[type=button]):focus,select:focus) [role=button],[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) [type=submit],[role=search]:has(input:not([type=submit],[type=button]):focus,select:focus) 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=group] [role=button]:focus,[role=group] [type=button]:focus,[role=group] [type=reset]:focus,[role=group] [type=submit]:focus,[role=group] button:focus,[role=search] [role=button]:focus,[role=search] [type=button]:focus,[role=search] [type=reset]:focus,[role=search] [type=submit]:focus,[role=search] 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}[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:-.125em}[aria-busy=true]:not(input,select,textarea,html):not(:empty)::before{margin-inline-end:calc(var(--pico-spacing) * .5)}[aria-busy=true]:not(input,select,textarea,html):empty{text-align:center}[role=button][aria-busy=true],[type=button][aria-busy=true],[type=reset][aria-busy=true],[type=submit][aria-busy=true],a[aria-busy=true],button[aria-busy=true]{pointer-events:none}: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:100%;height:inherit;min-height:100%;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 [role=button],dialog article>footer button{margin-bottom:0}dialog article>footer [role=button]:not(:first-of-type),dialog article>footer button:not(:first-of-type){margin-left:calc(var(--pico-spacing) * .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:.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,0);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:.2s;animation-timing-function:ease-in-out;animation-fill-mode:both}:where(.modal-is-opening,.modal-is-closing) dialog{animation-duration:.8s;animation-name:modal-overlay}:where(.modal-is-opening,.modal-is-closing) dialog>article{animation-delay:.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}}: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 [role=button],nav li [type=button],nav li 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 li,aside nav,aside ol,aside ul{display:block}aside li{padding:calc(var(--pico-nav-element-spacing-vertical) * .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{display:inline-block;vertical-align:baseline}progress{-webkit-appearance:none;-moz-appearance:none;display:inline-block;appearance:none;width:100%;height:.5rem;margin-bottom:calc(var(--pico-spacing) * .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:0 0}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}}[data-tooltip]{position:relative}[data-tooltip]:not(a,button,input){border-bottom:1px dotted;text-decoration:none;cursor:help}[data-tooltip]::after,[data-tooltip]::before,[data-tooltip][data-placement=top]::after,[data-tooltip][data-placement=top]::before{display:block;z-index:99;position:absolute;bottom:100%;left:50%;padding:.25rem .5rem;overflow:hidden;transform:translate(-50%,-.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:.875rem;text-decoration:none;text-overflow:ellipsis;white-space:nowrap;opacity:0;pointer-events:none}[data-tooltip]::after,[data-tooltip][data-placement=top]::after{padding:0;transform:translate(-50%,0);border-top:.3rem solid;border-right:.3rem solid transparent;border-left:.3rem solid transparent;border-radius:0;background-color:transparent;content:"";color:var(--pico-tooltip-background-color)}[data-tooltip][data-placement=bottom]::after,[data-tooltip][data-placement=bottom]::before{top:100%;bottom:auto;transform:translate(-50%,.25rem)}[data-tooltip][data-placement=bottom]:after{transform:translate(-50%,-.3rem);border:.3rem solid transparent;border-bottom:.3rem solid}[data-tooltip][data-placement=left]::after,[data-tooltip][data-placement=left]::before{top:50%;right:100%;bottom:auto;left:auto;transform:translate(-.25rem,-50%)}[data-tooltip][data-placement=left]:after{transform:translate(.3rem,-50%);border:.3rem solid transparent;border-left:.3rem solid}[data-tooltip][data-placement=right]::after,[data-tooltip][data-placement=right]::before{top:50%;right:auto;bottom:auto;left:100%;transform:translate(.25rem,-50%)}[data-tooltip][data-placement=right]:after{transform:translate(-.3rem,-50%);border:.3rem solid transparent;border-right:.3rem solid}[data-tooltip]:focus::after,[data-tooltip]:focus::before,[data-tooltip]:hover::after,[data-tooltip]:hover::before{opacity:1}@media (hover:hover) and (pointer:fine){[data-tooltip]:focus::after,[data-tooltip]:focus::before,[data-tooltip]:hover::after,[data-tooltip]:hover::before{--pico-tooltip-slide-to:translate(-50%, -0.25rem);transform:translate(-50%,.75rem);animation-duration:.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%,-.25rem);animation-name:tooltip-caret-slide}[data-tooltip][data-placement=bottom]:focus::after,[data-tooltip][data-placement=bottom]:focus::before,[data-tooltip][data-placement=bottom]:hover::after,[data-tooltip][data-placement=bottom]:hover::before{--pico-tooltip-slide-to:translate(-50%, 0.25rem);transform:translate(-50%,-.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%,-.5rem);animation-name:tooltip-caret-slide}[data-tooltip][data-placement=left]:focus::after,[data-tooltip][data-placement=left]:focus::before,[data-tooltip][data-placement=left]:hover::after,[data-tooltip][data-placement=left]:hover::before{--pico-tooltip-slide-to:translate(-0.25rem, -50%);transform:translate(.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(.05rem,-50%);animation-name:tooltip-caret-slide}[data-tooltip][data-placement=right]:focus::after,[data-tooltip][data-placement=right]:focus::before,[data-tooltip][data-placement=right]:hover::after,[data-tooltip][data-placement=right]:hover::before{--pico-tooltip-slide-to:translate(0.25rem, -50%);transform:translate(-.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(-.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}}[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}[tabindex],a,area,button,input,label,select,summary,textarea{-ms-touch-action:manipulation}[dir=rtl]{direction:rtl}@media (prefers-reduced-motion:reduce){:not([aria-busy=true]),:not([aria-busy=true])::after,:not([aria-busy=true])::before{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}} \ No newline at end of file diff --git a/html/themes/pico-orange/index.php b/html/themes/pico-orange/index.php new file mode 100644 index 000000000..3aa2a16ac --- /dev/null +++ b/html/themes/pico-orange/index.php @@ -0,0 +1,1351 @@ + + + + + + + + XCL Theme built with PicoCSS for XOOPSCube + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ +
+ + +
+ +
+

Web Application Platform

+

Just Use it!

+
+ +
+
+
+
Integrate responsive frameworks and libraries in your Modules and Themes, simple customize a template set.
+
+
+

Content Management System, Cache, Duplicatable Modules (multisites), User Groups Management, Themes, built-in Search.

+
+
+
+ +
+
+
Scalability is the property of a system to handle a growing amount of work by adding resources to the system. 
+
+
+

Scalability without costly contracts, hosting cloud hidden costs, limitations or restrictions. Self-hosted and local first.

+
+
+
+ +
+
+
A secure and modular architecture design with self-contained components known as modules. 
+
+
+
Each module encapsulates a specific functionality, operates independently, and can be developed, maintained, and reused safely.
+
+
+ +
+ +
+ + +
+ + + + +
+ +
+

Default theme layout

+The placeholders for the content and blocks are defined by the theme layout. +
+ You can create a custom center-block-left to trigger a component display on the Top page
+ Add to the Block Title a prefix "top-" and select the target "Toppage".
+ +
+

Header Nav

+
+
+
Logo
+
User menu  Light | Dark
+
+
+

Component top center

+
+
grid-column
center-block-left
Block Title prefix: top-
+
grid-column
center-block-center
Block Title prefix: top-
+
grid-column
center-block-right
Block Title prefix: top-
+
+
+

Main container

+
+
aside nav
Side-Left
Default Blocks:
  • User Menu
  • Main Menu
  • Themes
+
div.content
App Start Page [template]
or
Module Content
+
+ aside nav +
Side-Right +
Block-Right and for Admin Panel a Block Title with prefix 'admin' +
+
+
+

Section container-fluid

+
+
grid-column
center-block-left
+
grid-column
center-block-left
+
grid-column
center-block-left
+
+
+
Footer
+
+ +
+ +
+

Top Page Center Blocks

+ +
    +
  1. Browse to Admin > Block Management > Add Custom Block +
  2. Give the Block Title e.g. top-none-myblock
    +the prefix top- with none- only show the block content +
  3. Select the side Center (left, center, right) +
  4. Write some content +
  5. Select Target Modules : Toppage
    6. +
  6. Select Target Groups : check all groups and submit
    7. +
+
+ + +

Pico

+

A pure HTML example, without dependencies.

+ + + +
+

Accordions

+
+ Accordion 1 +

+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque urna diam, + tincidunt nec porta sed, auctor id velit. Etiam venenatis nisl ut orci consequat, vitae + tempus quam commodo. Nulla non mauris ipsum. Aliquam eu posuere orci. Nulla convallis + lectus rutrum quam hendrerit, in facilisis elit sollicitudin. Mauris pulvinar pulvinar + mi, dictum tristique elit auctor quis. Maecenas ac ipsum ultrices, porta turpis sit + amet, congue turpis. +

+
+
+ Accordion 2 +
    +
  • Vestibulum id elit quis massa interdum sodales.
    • +
  • Nunc quis eros vel odio pretium tincidunt nec quis neque.
    • +
  • Quisque sed eros non eros ornare elementum.
    • +
  • Cras sed libero aliquet, porta dolor quis, dapibus ipsum.
    • +
+
+
+ + +
+
+

Article

+ header +
+

+ Content paragraph - Nullam dui arcu, malesuada et sodales eu, efficitur vitae dolor. Sed ultricies dolor non + ante vulputate hendrerit. Vivamus sit amet suscipit sapien. Nulla iaculis eros a elit + pharetra egestas. Nunc placerat facilisis cursus. Sed vestibulum metus eget dolor pharetra + rutrum. +

+
+ Footer - Duis nec elit placerat, suscipit nibh quis, finibus neque. +
+
+ + +
+

Buttons

+

+ + + +

+

+ + + +

+
+ + +
+
+

Form elements

+ + + + + + + + + Curabitur consequat lacus at lacus porta finibus. + + + + + + + + + + + + +
+ + + +
+ +
+ + + + + + + + +
+ +
+ +
+ Checkboxes + + +
+ + +
+ Radio buttons + + +
+ + +
+ Switches + + +
+
+ + + + +
+
+ + +
+

Group

+
+
+ + +
+
+
+ + +
+

Loading

+
+ +
+ + + + + +
+

Preview

+

+ Sed ultricies dolor non ante vulputate hendrerit. Vivamus sit amet suscipit sapien. Nulla + iaculis eros a elit pharetra egestas. +

+
+
+ + + +
+
+ +
+
+
+ + +
+

Progress bar

+ + +
+ + +
+

Tables

+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
#HeadingHeadingHeadingHeadingHeadingHeadingHeading
1CellCellCellCellCellCellCell
2CellCellCellCellCellCellCell
3CellCellCellCellCellCellCell
+
+
+ + +
+

Typography

+

+ Aliquam lobortis vitae nibh nec rhoncus. Morbi mattis neque eget efficitur feugiat. + Vivamus porta nunc a erat mattis, mattis feugiat turpis pretium. Quisque sed tristique + felis. +

+ + +
+ "Maecenas vehicula metus tellus, vitae congue turpis hendrerit non. Nam at dui sit amet + ipsum cursus ornare." +
+ - Phasellus eget lacinia +
+
+ + +

Lists

+
    +
  • Aliquam lobortis lacus eu libero ornare facilisis.
    • +
  • Nam et magna at libero scelerisque egestas.
    • +
  • Suspendisse id nisl ut leo finibus vehicula quis eu ex.
    • +
  • Proin ultricies turpis et volutpat vehicula.
    • +
+ + +

Inline text elements

+
+

Primary link

+

+ Secondary link +

+

+ Contrast link +

+
+
+

Bold

+

Italic

+

Underline

+
+
+

Deleted

+

Inserted

+

Strikethrough

+
+
+

Small

+

Text Sub

+

Text Sup

+
+
+

+ Abbr. +

+

Kbd

+

Highlighted

+
+ + +

Heading 3

+

+ Integer bibendum malesuada libero vel eleifend. Fusce iaculis turpis ipsum, at efficitur + sem scelerisque vel. Aliquam auctor diam ut purus cursus fringilla. Class aptent taciti + sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. +

+

Heading 4

+

+ Cras fermentum velit vitae auctor aliquet. Nunc non congue urna, at blandit nibh. Donec ac + fermentum felis. Vivamus tincidunt arcu ut lacus hendrerit, eget mattis dui finibus. +

+
Heading 5
+

+ Donec nec egestas nulla. Sed varius placerat felis eu suscipit. Mauris maximus ante in + consequat luctus. Morbi euismod sagittis efficitur. Aenean non eros orci. Vivamus ut diam + sem. +

+
Heading 6
+

+ Ut sed quam non mauris placerat consequat vitae id risus. Vestibulum tincidunt nulla ut + tortor posuere, vitae malesuada tortor molestie. Sed nec interdum dolor. Vestibulum id + auctor nisi, a efficitur sem. Aliquam sollicitudin efficitur turpis, sollicitudin + hendrerit ligula semper id. Nunc risus felis, egestas eu tristique eget, convallis in + velit. +

+ + +
+ + + + + + + + + + + + Legacy to Remind Us of Where We Come From + +
+ Image from + SVG Image +
+
+
+ + +
+ + + + + + +
+ + + +
+ +

jQuery UI

+ +
+

Accordion

+ +
+

Section 1

+
+

+ Mauris mauris ante, blandit et, ultrices a, suscipit eget, quam. Integer + ut neque. Vivamus nisi metus, molestie vel, gravida in, condimentum sit + amet, nunc. Nam a nibh. Donec suscipit eros. Nam mi. Proin viverra leo ut + odio. Curabitur malesuada. Vestibulum a velit eu ante scelerisque vulputate. +

+
+

Section 2

+
+

+ Sed non urna. Donec et ante. Phasellus eu ligula. Vestibulum sit amet + purus. Vivamus hendrerit, dolor at aliquet laoreet, mauris turpis porttitor + velit, faucibus interdum tellus libero ac justo. Vivamus non quam. In + suscipit faucibus urna. +

+
+

Section 3

+
+

+ Nam enim risus, molestie et, porta ac, aliquam ac, risus. Quisque lobortis. + Phasellus pellentesque purus in massa. Aenean in pede. Phasellus ac libero + ac tellus pellentesque semper. Sed ac felis. Sed commodo, magna quis + lacinia ornare, quam ante aliquam nisi, eu iaculis leo purus venenatis dui. +

+
    +
  • List item one
    • +
  • List item two
    • +
  • List item three
    • +
+
+

Section 4

+
+

+ Cras dictum. Pellentesque habitant morbi tristique senectus et netus + et malesuada fames ac turpis egestas. Vestibulum ante ipsum primis in + faucibus orci luctus et ultrices posuere cubilia Curae; Aenean lacinia + mauris vel est. +

+

+ Suspendisse eu nisl. Nullam ut libero. Integer dignissim consequat lectus. + Class aptent taciti sociosqu ad litora torquent per conubia nostra, per + inceptos himenaeos. +

+
+
+
+ + +
+
+ +
+ + +

Button Widget with icons

+
+ + + + + + +
+
+ +
+

Button - Widget

+ +
+ + + An anchor +
+
+ +
+

CSS Buttons

+
+ + + An anchor +
+
+ +
+ +
+ + + +
+

Checkbox and radio button widgets

+ + +
+
+ Rental Car +
+ + + + + + + + + + +
+
+
+ +
+ + +
+

Progress bar

+ + +
+
Starting download...
+
+
+ + +
+ + +
+

Datepicker

+ +
+ Date:
+
+
+ + +
+

Dialog

+ +
+

This is an animated dialog which is useful for displaying information. The dialog window can be moved, resized and closed with the 'x' icon.

+
+ + +
+ + +
+ +
+

Menu

+ + +
+ +
+

Menu Categories

+ + + + +
+ +
+

Menu Icons

+ + + +
+ +
+ + +
+ + +
+

select menu

+
+ +
+ + + + + + + + + + + +
+ +
+ +
+ +
+

PicoSS Dropdown

+ +
+ Dropdown + +
+ + + +
+
+ + +
+ + +
+ +

Block-center - Grid

+ +
+
+

block-center-left

+
+
block title
+

content

+
+
+
+

block-center-center

+
+
block title
+

content

+
+
+
+

block-center-rigth

+
+
block title
+

content

+
+
+
+ +
+
+
+
block title
+

content

+
+
+
+
+
block title
+

content

+
+
+
+
+
block title
+

content

+
+
+
+
+ + + + + + + +
+
+ +

Confirm your action!

+
+

+ Cras sit amet maximus risus. Pellentesque sodales odio sit amet augue finibus + pellentesque. Nullam finibus risus non semper euismod. +

+ +
+ + + + + +
+ + + + + + +
+ + + + + \ No newline at end of file diff --git a/html/themes/pico-orange/js/index.html b/html/themes/pico-orange/js/index.html new file mode 100644 index 000000000..990cbd603 --- /dev/null +++ b/html/themes/pico-orange/js/index.html @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/html/themes/pico-orange/js/plugins.js b/html/themes/pico-orange/js/plugins.js new file mode 100644 index 000000000..864f6eb20 --- /dev/null +++ b/html/themes/pico-orange/js/plugins.js @@ -0,0 +1,242 @@ +/* + * XCL Theme Pico Orange built with PicoCSS v206 + * + * @version 2.4.0 + * @update 2024-04-20 + * @Date 2024-02-02 + * @author Nuno Luciano ( https://github.com/gigamaster ) + * @copyright (c) 2005-2024 The XOOPSCube Project, authors + * @license MIT + * @link https://github.com/xoopscube + * + * + * 1. Theme Switcher + * 2. Modal + * -- jQuery Document Ready - helper plugins + * 3. Render SVG + * 4. Notification Time + * 5. Dropdown - block options, menu, etc + * 6. Close on click document + * 7. Highlight Message nav-tab active + * 8.1 remove border + * 8.2 url constructor + * 9. Aria-busy Toogle + */ + +/* + * 1. Minimal theme switcher Pico.css - https://picocss.com + * Copyright 2019-2024 - Licensed under MIT + */ +const themeSwitcher = { + // Config + _scheme: "auto", + menuTarget: "details.dropdown", + buttonsTarget: "a[data-theme-switcher]", + buttonAttribute: "data-theme-switcher", + rootAttribute: "data-theme", + localStorageKey: "picoPreferredColorScheme", + + // Init + init() { + this.scheme = this.schemeFromLocalStorage; + this.initSwitchers(); + }, + + // Get color scheme from local storage + get schemeFromLocalStorage() { + return window.localStorage?.getItem(this.localStorageKey) ?? this._scheme; + }, + + // Preferred color scheme + get preferredColorScheme() { + return window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light"; + }, + + // Init switchers + initSwitchers() { + const buttons = document.querySelectorAll(this.buttonsTarget); + buttons.forEach((button) => { + button.addEventListener( + "click", + (event) => { + event.preventDefault(); + // Set scheme + this.scheme = button.getAttribute(this.buttonAttribute); + // Close dropdown + document.querySelector(this.menuTarget)?.removeAttribute("open"); + }, + false + ); + }); + }, + + // Set scheme + set scheme(scheme) { + if (scheme == "auto") { + this._scheme = this.preferredColorScheme; + } else if (scheme == "dark" || scheme == "light") { + this._scheme = scheme; + } + this.applyScheme(); + this.schemeToLocalStorage(); + }, + + // Get scheme + get scheme() { + return this._scheme; + }, + + // Apply scheme + applyScheme() { + document.querySelector("html")?.setAttribute(this.rootAttribute, this.scheme); + }, + + // Store scheme to local storage + schemeToLocalStorage() { + window.localStorage?.setItem(this.localStorageKey, this.scheme); + }, +}; + +// Init +themeSwitcher.init(); + +/* + * 2. Modal Pico.css - https://picocss.com + * Copyright 2019-2024 - Licensed under MIT + */ +// Config +const isOpenClass = "modal-is-open"; +const openingClass = "modal-is-opening"; +const closingClass = "modal-is-closing"; +const scrollbarWidthCssVar = "--pico-scrollbar-width"; +const animationDuration = 400; // ms +let visibleModal = null; + +// Toggle modal +const toggleModal = (event) => { + event.preventDefault(); + const modal = document.getElementById(event.currentTarget.dataset.target); + if (!modal) return; + modal && (modal.open ? closeModal(modal) : openModal(modal)); +}; + +// Open modal +const openModal = (modal) => { + const { documentElement: html } = document; + const scrollbarWidth = getScrollbarWidth(); + if (scrollbarWidth) { + html.style.setProperty(scrollbarWidthCssVar, `${scrollbarWidth}px`); + } + html.classList.add(isOpenClass, openingClass); + setTimeout(() => { + visibleModal = modal; + html.classList.remove(openingClass); + }, animationDuration); + modal.showModal(); +}; + +// Close modal +const closeModal = (modal) => { + visibleModal = null; + const { documentElement: html } = document; + html.classList.add(closingClass); + setTimeout(() => { + html.classList.remove(closingClass, isOpenClass); + html.style.removeProperty(scrollbarWidthCssVar); + modal.close(); + }, animationDuration); +}; + +// Close with a click outside +document.addEventListener("click", (event) => { + if (visibleModal === null) return; + const modalContent = visibleModal.querySelector("article"); + const isClickInside = modalContent.contains(event.target); + !isClickInside && closeModal(visibleModal); +}); + +// Close with Esc key +document.addEventListener("keydown", (event) => { + if (event.key === "Escape" && visibleModal) { + closeModal(visibleModal); + } +}); + +// Get scrollbar width +const getScrollbarWidth = () => { + const scrollbarWidth = window.innerWidth - document.documentElement.clientWidth; + return scrollbarWidth; +}; + +// Is scrollbar visible +const isScrollbarVisible = () => { + return document.body.scrollHeight > screen.height; +}; + + +// DOCUMENT READY - Place any jQuery/helper plugins below ! +/* ---------- ---------- ---------- ---------- ---------- */ +// Do something on document ready +$(function () { + + // 3. Inline SVG icons + $('.svg').renderClassSvg(); + + // 4. Notification Time + $('div.runtime').fadeIn( 750 ).delay( 3000 ).fadeOut( 500 ); + + // 5. Dropdown - block options, menu, etc + $(".dropdown").on("click", ".dropdown-toggle", function (event) { + event.preventDefault(); + $('.dropdown').removeClass('isopen'); + $(this).parent().toggleClass('isopen'); + }); + + // 6. Close on click document + $(document).on("click", function (event) { + var $trigger = $(".dropdown"); + if ($trigger !== event.target && !$trigger.has(event.target).length) { + $(".dropdown").removeClass("isopen"); + } + }); + + // 7. Highlight Message nav-tab active + $("#tabs-mail").tabs({ + active: false, + collapsible: true, + classes: { + "ui-tabs": "taborder" + }, + beforeActivate: function (event, ui) { + window.open($(ui.newTab).find('a').attr('href'), '_self'); + return false; + }, + } + ); + // .find('.ui-tabs-tab').removeClass('ui-corner-all ui-corner-top'); + + // 8.1 Remove border from dropdown UL children + $(".ui-tabs-tab .dropdown-content ul").children().css( "border", "0" ); + + // 8.2 url constructor + const parseUrl = new URL(window.location.href); + const msgAction = parseUrl.searchParams.get("action"); + // If module message index, highlight the first nav-tab + if (msgAction == null) { + $('#tabs-mail ul.ui-tabs-nav li:first-child').addClass('ui-state-active'); + } else { + // Highlight current action nav-tab + $('a[href="index.php?action=' + msgAction + '"]').parent('li').addClass('ui-tabs-active ui-state-active'); + } + if (msgAction == 'settings'|| msgAction == 'blacklist'){ + // Highlight dropdown menu + $('.settings ').parent('li').addClass("ui-state-active"); + } + // 9. Aria-busy Toogle + $('[aria-busy="false"]').on( "click", function(event) { + event.stopPropagation(); + event.stopImmediatePropagation(); + $(this).prop("ariaBusy", true); + }); + +}); diff --git a/html/themes/pico-orange/manifesto.ini.php b/html/themes/pico-orange/manifesto.ini.php new file mode 100644 index 000000000..abdecaf1f --- /dev/null +++ b/html/themes/pico-orange/manifesto.ini.php @@ -0,0 +1,22 @@ + header { + --pico-block-spacing-vertical:0 +} +body > main { + display : grid; + grid-template-rows: 1fr; + row-gap : 2rem; + margin-bottom : calc(var(--pico-spacing) * 4); + padding : 0 +} +body > main > * { + min-width : 0; + margin-bottom : 0 +} + +body > main > article { + --pico-block-spacing-vertical: var(--pico-spacing); + --pico-block-spacing-horizontal: var(--pico-spacing); +} + +/* Body align Aside and Main */ +body > main > aside#nav-left, +body > main > aside#block-right { + margin-top : .5rem; +} +body > main > div > aside { + background : var(--pico-card-background-color); + padding : .5rem; + padding : var(--pico-nav-element-spacing-vertical) var(--pico-nav-element-spacing-horizontal); /* @todo */ + border-radius : var(--pico-border-radius); +} + +/* BODY FOOTER */ +body > footer { + display : flex; + align-items : center; + padding : 1rem 0; + justify-content : center; + flex-wrap : wrap; +} +body > footer .logos { + display : inline-flex; + padding :.25rem .5rem; + border-bottom : 1px solid var(--pico-muted-border-color) +} +body > footer .logos a { padding:.25rem; margin:.5rem 0;} +body > footer .logos svg { + width : auto; + height : 1rem; + margin-right : calc(var(--pico-spacing) * .25); + transform : translateY(-.0625rem) +} + +/* ARTICLE H* ONLY CHILD (FORM COMMENT/REPLY) */ +article header :where( h2, h3, h4 ):only-child{ + margin : var(--pico-spacing) 0; +} +article header :where( p:last-child ){ + margin-bottom : 0; +} + +/* A HREF LINK COLOR */ +[data-theme=dark] { + :is([role=button], [type=button], [type=file]::file-selector-button, [type=reset], [type=submit], + button, [type=checkbox]:checked, [type=checkbox]:checked:active, [type=checkbox]:checked:focus, + [type=radio]:checked, [type=radio]:checked:active, [type=radio]:checked:focus):not(.outline) { + /* --pico-background-color: hsl(45 70% 40% / 1); */ + } + a:hover:not([role=button]) { + color:var(--pico-secondary-inverse) + } +} +[role=link]:focus, a:focus { +--background-color : var(--pico-primary-focus); + border-radius : var(--pico-border-radius); +} +/* A LINK UNDERLINE none */ +a {--pico-text-decoration: none; border:none} +:where(a:not([role=button])):is([aria-current]:not([aria-current=false]),:hover,:active,:focus), +[role=link] :is(a,[aria-current]:not([aria-current=false]),:hover,:active,:focus) { +--pico-text-decoration: none; +--pico-primary-underline: none; +--pico-underline: none; + border:none +} +/* A LINK - ICON ONLY */ +:is(a.btn-icon) { + border-radius : var(--pico-border-radius); + box-shadow : var(--pico-box-shadow); + display : inline-flex; + justify-content : center; + font-weight : 600; + font-size : 24px; + width : 30px; + height : 28px; + opacity : .8; + transition : opacity 0.3s ease-in; +} +:is(a.btn-icon):hover { + background : var(--pico-primary-focus); + color : var(--pico-secondary-inverse); + opacity : 1; +} + +hr { margin: 2rem 1rem; } /* @todo ? */ + +/* -------------------- ARTICLE FOOTER ACTION CONTROL */ +.action-control { + align-items : center; + column-gap : 1rem; + display : flex; + flex-wrap : wrap; + justify-content : space-between; + white-space : normal; +} + +/* -------------------- BANNER */ +section[role=banner] > div > article { + border : 1px solid var(--pico-muted-border-color); + border-radius : var(--pico-border-radius); + box-shadow : var(--pico-box-shadow); + margin : calc(var(--pico-block-spacing-vertical) * 3) 0; +} +[role=banner] .advert { + background : var(--pico-code-background-color); + border : 1px dotted var(--pico-form-element-disabled-border-color); + border-radius : var(--pico-border-radius); + display : block; + padding : var(--pico-spacing); + +} +[role=banner] .banner { + padding : var(--pico-spacing); + text-align : center; +} + +/* -------------------- BREADCRUMBS - MOBILE */ + +nav[aria-label=breadcrumb] { + margin-bottom : 1rem; /* space for pico header image */ +} + +@media (max-width : 768px) { + nav[aria-label=breadcrumb] ul { + list-style-type: none; + /*font-size: 16px;*/ + margin : 0; + padding : 10px 0; + /* truncate */ + white-space : nowrap; + max-width : 100%; + overflow : hidden; + } + nav[aria-label=breadcrumb] li { + display : inline-block; + max-width : 18%; /* truncate */ + width : auto; + white-space : nowrap; + overflow : hidden; + text-overflow: ellipsis; + } + nav[aria-label=breadcrumb] li:last-child {max-width: 30%;} + nav[aria-label=breadcrumb] li:first-child:before {content: none;} + nav[aria-label=breadcrumb] li a span:hover {text-decoration: underline} + nav[aria-label=breadcrumb] li, + nav[aria-label=breadcrumb] li:last-child {display: none} + nav[aria-label=breadcrumb] li:nth-last-child(2) {display: block;max-width: 100%;} + nav[aria-label=breadcrumb] li a {text-decoration: none} + nav[aria-label=breadcrumb] li:nth-last-child(2) a:after, + nav[aria-label=breadcrumb] ul li:not(:last-child) ::after {content: '';} + nav[aria-label=breadcrumb] li:nth-last-child(2) a:before { + content : ' ↚ '; + display : inline-flex; + min-width : 5ch; + background : var(--pico-primary); + border-radius:var(--pico-border-radius); + color : var(--pico-primary-inverse); + margin-right: .5rem; + place-content: center; + } + nav[aria-label=breadcrumb] li:nth-last-child(2):before {content: none} + + section.block-center { + background : var(--pico-contrast-inverse); + border : var(--pico-muted-border-color); + margin-bottom: 0; + padding : calc(var(--pico-spacing) * 1) calc(var(--pico-spacing) * 1); + } +} + +/* -------------------- BADGE & BUTTONS */ +.badge { + background : hsla(205, 15%, 40%, 0.25); + border-radius : var(--pico-border-radius); + font-size : 12px; + min-width : 3ch; + display : inline-block; + padding : 0 0.5rem;vertical-align: baseline; +} + +/* article h3 :is(.badge){font-size: 14px; } */ +:is(article, hgroup, .list-content) h3, h4, .block-title { + display : flex; + flex-wrap : wrap; + justify-content : space-between; + width : 100%; + align-items : baseline; +} + +/* BUTTON ACTION */ +:is(.delete) { + color : var(--pico-del-color); + border-color : var(--pico-del-color); +} +:is(button.vote) { + margin-bottom : 0; +} +:where([type=submit],[type=button],[role=button]) svg { + display : inline; + margin : 0 .25rem 0; + vertical-align: -.175em; +} + +:where(footer.action-control, footer div.grid) +:is(div, button, input[type=submit],input[type=button],[role=button], details.dropdown, input, a):not(summary) { + margin-bottom : 0; + white-space : nowrap; + /* border : 2px solid orange; */ +} +:where(footer.action-control) :is(a) { + border-radius : var(--pico-border-radius); + margin : 0 .5em; + padding : .25rem; +} +:where(footer.action-control) :is(a, button[type=submit]):hover { + background : var(--pico-primary-focus); + color : var(--pico-secondary-inverse); +} + +/* -------------------- BLOCKS */ +/* BLOCKS - Title */ +[class^="block-title"] { + color : var(--pico-muted-color); + font-weight : var(--pico-font-weight); + font-size : 1rem; + line-height : 1rem; + justify-content : space-between; + flex-wrap : nowrap; + margin-bottom : var(--pico-typography-spacing-vertical); + padding : 0; +} +[class^="block-title"] a { + display : inline-block; + width : 100%; +} +[class^="block-title"]:hover a { +--text-decoration : none; + color :var(--pico-primary-inverse); +} +[class^="block-title"]:hover { + background-position: 100% 100%; + background-size : 200% 100%; + text-decoration : none; + transition : background-size .3s .3s, background-position .3s; +} +/* BLOCKS - Content */ +[class="block-content"] { + margin-bottom : var(--pico-typography-spacing-vertical); +} +[class="block-content"] > ul { + padding : 0; +} +/* BLOCKS - MAIN MENU. SUB, MESSAGE */ +.menu-sub { + padding-left : 2.25rem; +} +/* BLOCK - PRIVATE MESSAGE */ +.block-messages ul#privatemessages { + flex-direction : column; + width : 100%; +} +.block-messages ul#privatemessages li { + padding : calc(var(--pico-nav-element-spacing-vertical) * .5) var(--pico-nav-element-spacing-horizontal); + width : inherit; +} +.block-messages ul#privatemessages li a { + display : inherit; +} +/* BLOCK - LIST MEMBERS */ +/* USERS ONLINE, SITE INFO */ +ul.list-column { + border-left : 4px solid var(--pico-muted-border-color); + column-count : 3; + column-width : 140px; + column-gap : 1.5rem; + column-rule : 4px solid var(--pico-muted-border-color); + margin : 1rem 0; + padding : 1rem; +} +ul.list-column li { + list-style : none; + margin-bottom :.5rem +} +ul.list-column li > h6 { + font-size : 16px; column-span: all; +} + +/* -------------------- ICONS */ +[class^="i-"] { + padding : .25rem .5rem +} +i[class^="i-"], +:is(span.icon, i.icon) { + padding-right : .5rem; +} + +summary[role="link"].contrast:is([aria-current],:hover,:active,:focus) { + background-color: transparent; + color : var(--pico-contrast-hover); +} + +/* -------------------- SEARCH FORM - PicoCSS default pill: 5rem */ + +[role=search]>:last-child { + border-top-right-radius: 1rem; + border-bottom-right-radius: 1rem; +} +[role=search]>:first-child { + border-top-left-radius: 1rem; + border-bottom-left-radius: 1rem; +} + +/* -------------------- TABLE - FONT-SIZE IN BLOCKS */ +[class^="block-"] table tbody, tfoot { + font-size : 14px; +} + +/* -------------------- TEXT SELECTION */ +::-moz-selection{background-color:var(--pico-primary);color:var(--pico-primary-inverse)} +::selection{background-color:var(--pico-primary);color:var(--pico-primary-inverse)} + +/* -------------------- TOOLTIP */ + +[data-tooltip] { + border-bottom-color: var( + --pico-border-color + ) +} +[data-tooltip]:after, main [data-tooltip]:before { + font-size : 12px +} + +/* -------------------- TYPOGRAPHY - FONT SIZE & SCALE */ +/* HEADING */ +h1, h2, h3, h4, h5 { +--font-weight: 400; + font-weight : var(--font-weight); + position : relative; +} +h1,h2,h3 { + font-family: "Nunito", sans-serif; + font-optical-sizing: auto; + font-weight: 400; + font-style: normal; +} + +p { text-wrap: pretty } + +@media (min-width: 576px) { :root { --pico-font-size: 106.25%; } } +@media (min-width: 768px) { :root { --pico-font-size: 112.5%; /* 18px */}} +@media (min-width: 1024px) { :root { --pico-font-size: 1rem; }} +@media (min-width: 1280px) { :root { --pico-font-size: 1rem; }} +@media (min-width: 1536px) { :root { --pico-font-size: 112.5%; /* 18px */}} + +/* -------------------- WRAPPER - GRID */ +/* -------------------- MEDIA QUERIES - desktop, tablet, mobile + CSS override PicoSS rules and specificity */ +@media(max-width: 576px) { + [role=button], [type=button], [type=file]::file-selector-button, [type=reset], [type=submit], button { + --pico-form-element-spacing-horizontal: 1.5rem; + } + [role=group] [role=button], [role=group] [type=button], [role=group] [type=submit], [role=group] button, [role=search] [role=button], [role=search] [type=button], [role=search] [type=submit], [role=search] button { + --pico-form-element-spacing-horizontal: 1.5rem; + } +} +@media screen and (max-width: 1024px) { + body>main>aside#nav-left, body>main>aside#block-right { + --pico-font-size: 1rem; /* 16px - 18px picocss */ + font-size: var(--pico-font-size); + margin-top: 0; + } + [data-self~="sm-hide"] {display:none!important}/* only show icon and hide text */ + + aside#nav-left { + position: fixed; + top: 0; + left: 0; + width: 240px; + height: 100%; + padding: .25em var(--pico-block-spacing-horizontal); + background: var(--pico-card-background-color); + box-shadow: var(--pico-card-box-shadow); + overflow-y: auto; + z-index: var(--z-above); + } + aside#nav-left { + transform: translate3d(0, 0, 0) translateX(-240px); + transition: all 0.25s cubic-bezier(0.16, 0.63, 0.45, 0.98); + } + aside#nav-left:target { + transform: translate3d(0, 0, 0) translateX(0); + } + .nav-open { + display: block; + position:absolute; + left: 18px; + top: 10px; + } + aside#nav-left .nav-close { + display: block; + height: 36px; + display: block; + cursor: pointer; + position: sticky; + left: 180px; + top: 10px; + width: fit-content; + width: -moz-fit-content; + + z-index: var(--z-sticky); + } +} +@media(min-width: 1024px) { + html { + scroll-padding-top:calc(var(--pico-header-height) + 2rem - .375rem) + } + [data-self="sm-hide"] { + display: revert!important; /* show icon & show text */ + } + body>header>nav.nav-top{ + position: relative; + } + body>main { + grid-template-rows:auto 1fr; + grid-template-columns: 14rem 1fr; + grid-template-areas: "menu main" "menu block-right"; + -moz-column-gap: 2rem; + column-gap: 2rem; + row-gap: 2rem; + } + .nav-logo {margin-left:0} + .nav-open, + aside#nav-left .nav-close{display: none;} + aside#nav-left { + position:relative; + width: 220px; + } + body>main:has(aside#block-right) { + grid-template-rows: auto 1fr; + grid-template-columns: 14rem 1fr; + grid-template-areas: "menu main" "menu block-right" + } + body>main>aside#nav-left { + grid-area: menu + } + body>main>[role=main] { + grid-area: main + } + body>main>aside#block-right { + grid-area: block-right; + align-self: start /* Sticky in grid */ + } + body>main>aside#block-right { + position: sticky; + top: calc(var(--pico-main-top-offset) + var(--pico-block-spacing-vertical)/2); + max-height: calc(var(--max-height) - var(--pico-spacing)); + transition: top var(--pico-transition); + transition-delay: 50ms + } + body>main>nav[aria-label=breadcrumb] { + display: none + } + body>main>aside>nav { + margin-top: calc(var(--pico-block-spacing-vertical)/2) + } + body>main>hgroup { + grid-area: header; + margin-top: calc(var(--pico-block-spacing-vertical)/2) + } +} +@media(min-width: 1280px) { + body>main { + grid-template-rows:auto 1fr; + grid-template-columns: 14rem 1fr 14rem; + grid-template-areas: "menu main block-right" "menu main block-right"; + row-gap: 2rem; + } + body>main:has(aside#block-right) { + grid-template-rows: auto 1fr; + grid-template-columns: 14rem 1fr 15rem; + grid-template-areas: "menu main block-right" "menu main block-right" + } + body>main>aside#nav-left { + grid-area: menu + } + body>main>[role=main] { + grid-area: main + } + body>main>aside#block-right { + grid-area: block-right + } +} +@media(min-width: 1536px) { + body>main { + grid-template-rows:auto 1fr; + grid-template-columns: 16rem 1fr 16rem; + grid-template-areas: "menu main block-right" "menu main block-right"; + row-gap: 3rem; + } +} +/* GRID CUSTOM COLUMNS */ +/* @todo ?? */ +.grid-left, .grid-right, .grid-2, .grid-3 { + align-items : start; + display : grid; + grid-template-columns: 1fr; + column-gap : calc(var(--pico-spacing) * .5); + row-gap : calc(var(--pico-spacing) * .5); + margin : 0; +} +.flex-justify { + align-items : center; + display : flex; + justify-content : space-between; + flex-basis : auto; + flex-wrap : wrap; +} +@media (min-width: 1024px) { + .grid-main, .grid-left, .grid-right, .grid-2, .grid-3 { + align-items : baseline; + display : grid; + column-gap : calc(var(--pico-spacing) * 1); + row-gap : calc(var(--pico-spacing) * 1); + } + .grid-main { + grid-template-columns: 1fr 3fr; + grid-column-gap: 1rem; + grid-row-gap: 1rem; + } + .grid-left { grid-template-columns: 1fr 3fr; } + .grid-right { grid-template-columns: 3fr 1fr; } + .grid-2 { grid-template-columns: 1fr 1fr; } + .grid-3 { grid-template-columns: 1fr 1fr 1fr; } +} + +/* -------------------- MODULE CKEditor */ +/* BUTTON CKEditor forced fix button 📐*/ +:is([class^="cke_button"],[class^="cke_combo_button"] ) { + margin-left : 0!important; +} +/* fix extra space of combo dropdown */ +.cke_combo_on a.cke_combo_button, .cke_combo_off a.cke_combo_button:hover, .cke_combo_off a.cke_combo_button:focus, +.cke_combo_off a.cke_combo_button:active { + padding : 0!important; +} +/* CKEditor darkmode */ +:root[data-theme=dark] { + --cke-color : #fff; + --cke-background: #111;; + --cke-filter : invert(1) contrast(1.15); + --cke-editable : #1c212c; + --cke-inner : #181b25; +} +/* try to switch mode, fallback ?? */ +:root[data-theme=light] { + --no-var : #fff; +} +/* CKEditor darkmode rounded */ +:is([class^=cke_top],[class^=cke_bottom]) { + filter : var(--cke-filter, none); + border-color : transparent!important; + /* Prevent editor from overflow prent container */ + max-width : 100%; + border-radius : 8px; +} +:where(.cke_chrome) { + border : none!important; +} +.cke_inner { + display : block; + background : var(--cke-inner, var(--no-var), #999)!important; + border : 1px solid var(--cke-background, var(--no-var), #999)!important; + border-radius : 8px; +} +:where(.cke_contents){ + background : var(--cke-editable, var(--no-var), #999)!important; + color : var(--cke-color, var(--no-var))!important; + border-radius : 8px; +} +/* customize editable container */ +.cke_editable { + background : var(--cke-editable, var(--no-var)); + color : var(--no-var, #fff); + border-radius : 8px; + padding : 0.5rem; + cursor : text; + margin : 0.25rem; + width : auto; + min-height : calc(100vh - 1rem); +} +textarea.cke_source { + background : var( --cke-background, #fff); + color : var( --cke-color, #111); + padding : 0.5rem; +} +.cke_wysiwyg_frame, .cke_wysiwyg_div { + background : var(--cke-editable, var(--no-var))!important; + color : var(--cke-color, var(--no-var))!important; +} + + +/* -------------------- MODULE D3FORUM */ +/* Used in Dropdowm*/ +.author-info { + align-items : center; + display : flex; + flex-direction : column; + padding : .25em; +} +/* AUTHOR AVATAR */ +.avatar { + border : 2px solid var(--pico-border-color); + border-radius : 50%; + margin : 0 auto; +} +/* AUTHOR DROPDOWN */ +:is(.w96) { + width : 96px; + height : 96px; + } + +/* AVATAR css from x-layout */ +[data-self="radius-circle"] { border-radius: 50%} + +/* NAV POST TREE ORDER */ +nav.post-tree-order { + align-items : center; + display : flex; + flex-wrap : wrap; + justify-content : start; + padding : var(--pico-spacing); + width : 100%; +} +nav.post-tree-order a { + border-radius : var(--pico-border-radius); + padding : .25em; + margin-right : .5em; +} +nav.post-tree-order a:hover { + background : var(--pico-primary-focus); + color : var(--pico-secondary-inverse); +} +/* POST TREE */ +/* in main view, main list, comment list */ +ul.post-tree { + background : var(--pico-card-background-color); + border-radius : CALC(var(--pico-border-radius)*2); + margin-bottom : var(--pico-block-spacing-vertical); + padding : 1rem; +} +ul.post-tree li { + list-style : none; +} +li.post-tree-item { + align-items : center; + display : flex; + list-style : none; + margin : 0; /* NOTE The margin-left is auto-generated from template ! */ + padding : 0; +} +li.post-tree-item > span { + border-radius : var(--pico-border-radius); + padding : .25rem; +} + .post-tree-current > span { + background-color: var(--pico-form-element-selected-background-color); + border-radius : var(--pico-border-radius); +} +/* POST TREE DEPTH-IN-TREE */ +:is(ul.depth-in-tree) { + margin : 0; + padding : 0; +} +/* FORUM POST - CONTENT + SIGNATURE */ +.post-content { +} +.post-signature { + border-top : 1px solid var(--pico-blockquote-border-color); + margin-top : 1.5rem; +} + +/* FORUM - ICON LIST LEGEND */ +.forum-icon-list { + display : block; + list-style : none; + margin : 1em; + padding : 0; +} + +/* Following classes Using class badge */ +.post-vote, +.post-vote-count, +.post-vote-avg {} +.description {} + +/* ACTIVITY TOTAL POSTS, COMMENTS, VIEWS */ +.content-activity, +.forum-activity { + font-size : small; +} + +/* -------------------- MODULE PICO */ +article .header-image { + display : inline-block; + box-shadow : var(--pico-card-box-shadow); + height : 240px; + margin-top : calc(var(--pico-block-spacing-vertical) * -1.25); + margin-bottom : var(--pico-block-spacing-vertical); + object-fit : cover; + width : 100%; + border : 2px solid var(--pico-muted-color); + border-radius : var(--pico-border-radius); +} +/* Page list of contents H3 + icons folder, docs */ +article h3 :is(span[data-tooltip]) {font-size:16px;} +/* TAGS */ +article>footer>.content-tags { + color : var(--pico-code-value-color); + padding-top : 1rem; +} +/* POST OPTIONS */ +article > .content-filters, +article > .content-options, +article > .content-time, +article > .content-history { + background : none; + border : var(--pico-border); + border-radius : var(--pico-border-radius); + width : auto; + margin-bottom : var(--pico-grid-row-gap); +} +.content-filters >.filter > label { + display : flex; + justify-content : space-between; + flex-wrap : wrap; + align-content : center; + align-items : center; + flex-direction : row; + width : auto; +} +/* 🚧📐 div.category-sub:not(:last-child) ,*/ +:is(div.list-content):not(:only-of-type), +:is(div.list-content):not(:last-of-type), +:is(div.category-sub, div.category-forum):not(:only-of-type), +:is(div.category-sub, div.category-forum):not(:last-of-type){ + margin-bottom : var(--pico-typography-spacing-vertical); +} +:is(div.list-content):last-of-type {} + +/* WAITING CONTENT */ +:is(div.list-content) :where(em.warning) { + background : #f44336; + color : #fff; +} + + +/* -------------------- PAGE NAV - CONTENT PAGINATION */ +nav.page-nav div { + align-items : center; + display : flex; + justify-content : center; + flex-wrap : wrap; + justify-content : space-between; + padding : var(--pico-spacing); + margin-bottom : var(--pico-spacing); + width : 100%; +} +/* -------------------- PAGENAVI D3FORUM COMMENTS PAGINATION */ +nav.pagination { + display : flex; + margin : .5em 0; + flex-direction : row; + justify-content : flex-end; +} +ul.pagenavi li { + border : 0; + color : var(--pico-primary); + border : 1px solid var(--pico-muted-border-color); + border-radius : var(--pico-border-radius); + box-shadow : var(--pico-box-shadow); + padding : 0; + text-align : center; + user-select : none; + margin : 0 .25rem; + min-width : 4ch; +} +/* ul.pagenavi li:last-of-type { margin: 0} */ + +ul.pagenavi li:not([aria-current]) a { + background : var(--pico-form-element-background-color); + + margin : 0; + padding : .25rem .5rem; + width : 100%; +} + +ul.pagenavi li[aria-current] { + border-color : var(--pico-primary); + padding : .25rem .5rem; +} +ul.pagenavi li:not([aria-current]):hover a { + border-color : var(--pico-primary); + background : var(--pico-primary-focus); + color : var(--pico-secondary-inverse); + padding : .25rem .5rem; +} + +/* -------------------- MODULE SITEMAP */ +.grid-sitemap { + grid-column : 1 / 7; + display : grid; + grid-template-columns: repeat(auto-fit, minmax(200px, auto)); + justify-content : center; +} +.grid-map { + padding : 1rem 1rem 0; + grid-column : 1 / 7; + display : grid; + grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); + align-items : center; +} +.grid-map h1 { + font-size : 2rem +} +.grid-map .map iframe { border-radius: var(--pico-border-radius)} + +/* -------------------- SYSTEM Notification */ +/* Replacing older confirmMsg errorMsgg resultMsg msg-warning */ +.alert { + background : var(--pico-muted-border-color); + border-left : 3px solid; + border-color : var(--pico-border-color); + border-radius : var(--pico-border-radius); + padding : var(--pico-spacing); + margin : var(--pico-block-spacing-vertical) auto; +} +.error, +.warning { border-color: var(--pico-del-color) } +.success { border-color: var(--pico-ins-color) } +.info { border-color: var(--pico-code-color) } +.result { border-color: var(--pico-code-color) } + +/* -------------------- MODULE USER PROFILE AVATAR */ +/* Generate CSS Avatar Letter */ +.user-tab-avatar #avatar { +--avatar-size :96px; + background-size : 100% 100%; + background-position: 0px 0px,0px 0px,0px 0px,0px 0px,0px 0px; + background-image: repeating-linear-gradient(315deg, #00FFFF2E 92%, #073AFF00 100%),repeating-radial-gradient(75% 75% at 238% 218%, #00FFFF12 30%, #073AFF14 39%),radial-gradient(99% 99% at 109% 2%, #00C9FFFF 0%, #073AFF00 100%),radial-gradient(99% 99% at 21% 78%, #7B00FFFF 0%, #073AFF00 100%),radial-gradient(160% 154% at 711px -303px, #2000FFFF 0%, #073AFFFF 100%); + border-radius : 50%; + box-shadow : 2px 2px 2px #111; + height : var(--avatar-size); + margin : 20px 0; + text-align : center; + width : var(--avatar-size); +} +/* Avatar Letter */ +.user-tab-avatar #username { + font-size : 0; + display : block; + color : var(--pico-primary ); + position : relative; + line-height : 1; + text-transform : uppercase; + top : calc(var(--avatar-size) / 4); /* 25% of parent */ + transition : font-size 0.3s ease-in; + filter : drop-shadow(2px 2px 5px #010); /* drop-shadow(offset-x offset-y blur-radius color) */ +} +.user-tab-avatar #username::first-letter { + font-size : calc(var(--avatar-size) / 2); /* 50% of parent */ +} + +/* -------------------- MODULE MESSAGE & USER PROFILE */ +/* Note - Mail tab active overrides the default properties */ + +.mail-list-item { + border-bottom : 1px solid hsl(219, 17%, 21%); + line-height : 2.5rem; +} +.mail-list-avatar { + border-radius : 50%; + height : 24px; + margin : auto .25em; + width : 24px; + vertical-align : middle; +} +.mail-list-author { + width : 190px; +} +.mail-list-author input:disabled { + pointer-events: auto; + cursor: not-allowed; +} +.mail-list-subject { + font-size : 16px; + } +.mail-list-date { + font-size : small; + } +.mail-list-date { + font-size : small; +} +.mail-subject{} +.mail-to {} +.mail-from {} +.mail-date {} +.mail-content{} + +/* -------------------- SCROLL-TO-TOP */ +.scroll-top { + position : absolute; + top : 12rem; + right : 2rem; + bottom : 0; + pointer-events : none; + z-index : 9000; +} +.scroll-top #ntop-bg {fill: var(--pico-progress-background-color);} +.scroll-top #ntop-arrow {fill: var(--pico-primary-hover);} +.scroll-top a:hover #ntop-bg {fill: var(--pico-primary-hover-background);} +.scroll-top a:hover #ntop-arrow {fill: var(--pico-primary-inverse);} +.scroll-top a { + position : sticky; + top : -5rem; + width : 3rem; + height : 3rem; + margin-bottom : -5rem; + transform : translateY(100vh); + backface-visibility: hidden; + display : inline-block; + text-decoration : none; + user-select : none; + pointer-events : all; + outline : none; + overflow : hidden; + /* Style */ + box-shadow : var(--pico-box-shadow); + border : var(--pico-border-width) solid var(--pico-border-color); + border-radius : var(--pico-border-radius); +} +.scroll-top a svg { + display : block; + border-radius : var(--border-radius); + width : 100%; + height : 100%; +} +.scroll-top a svg path { + transition : all 0.1s; +} +.scroll-top a #ntop-arrow { + transform : scale(0.66); + transform-origin: center; +} +@media print { + .scroll-top { display: none !important; } +} + +/* -------------------- Animation / Transition */ +@keyframes bottom { + 0% { transform:translateY(10px); opacity:0; } + 100% { opacity:1; transform:none;} +} +@keyframes top { + 0% { transform:translateY(-10px); opacity:0; } + 100% { opacity:1; transform:none; } +} +@keyframes left { + 0% { transform:translateX(-10px); opacity:0; } + 100% { opacity:1; transform:none; } +} diff --git a/html/themes/pico-orange/templates/legacy/index.html b/html/themes/pico-orange/templates/legacy/index.html new file mode 100644 index 000000000..990cbd603 --- /dev/null +++ b/html/themes/pico-orange/templates/legacy/index.html @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/html/themes/pico-orange/templates/legacy/legacy_app_start_page.html b/html/themes/pico-orange/templates/legacy/legacy_app_start_page.html new file mode 100644 index 000000000..2e6f2a5bc --- /dev/null +++ b/html/themes/pico-orange/templates/legacy/legacy_app_start_page.html @@ -0,0 +1,103 @@ +<{* Dev-Mode Toggle *}> +<{if $xoops_isadmin}>
<{$smarty.template}>
<{/if}> + +
+ +

Welcome to <{$xoops_sitename}>

+

<{$xoops_meta_description}>

+ +

Getting started

+ +

Your website is preconfigured with default settings. + The backend administration provides a graphical user interface, also called control panel or admin dashboard, + to configure your website, install components, translation and localization.

+
+ +
+ General Settings +

The system module allows you to customize the general settings of your platform, such as the name and slogan of the site, + language and theme, or close your site and restrict access by user groups. +

Start Page or Module

+

You can modify this template "app_start_page.html”, or you can select a module as the starting point of your website.

+ <{if $xoops_isadmin}> +

Administration »» System »» Preferences ⭧

+ <{/if}> +
+ +
+ +
+ Closed for maintenance +
The site is currently closed for maintenance.
+

Maintenance mode allows you to close the site and display a custom notice to visitors.
+ You can also control who has access to your site when it is closed.

+

When you're ready to launch your site, simply go to System Preferences to open it to the public.

+ +
    +
  1. Maintenance Mode - Turn your site off?
    Select yes to turn your site off so that only users in selected groups have access to the site.
    2. +
  2. Maintenance Mode - Select groups
    Groups that are allowed to access while the site is turned off. Users in the default webmasters group are always granted access.
    3. +
  3. Maintenance Mode - Message
    The text that is displayed when closing the site.
    4. +
+

You can edit the Template site_closed.html" and customize the design to match your notice, maintenance, coming soon, etc.

+ <{if $xoops_isadmin}> +

Administration »» System »» Preferences »» "Maintenance mode-Turn your site off?" ⭧

+ <{/if}> +
+ +
+ +
+ User Groups Permissions +

You can assign users to multiple groups and easily grant access to content of modules and blocks. + The installation wizard creates the following system-required groups :

+
    +
  1. Webmasters (Administrators) +
  2. Registered Users (members) +
  3. Anonymous Users (Guests) +
+
Required user groups cannot be deleted !
+ You can create new groups and change permissions for each new group created.
+ <{if $xoops_isadmin}> +

Administration »» User Groups »» Preferences ⭧

+ <{/if}> +
+ +
+ +
+ Modules Preferences +

Modules also have their own settings, accessible from their "preferences" menu.

+

For example, the render module allows you to manage the meta data of your website, themes (general appearance of your website), and templates that shape the contents of modules and blocks.

+ <{if $xoops_isadmin}> +

Administration »» Render »» Preferences ⭧

+ <{/if}> +
+ +
+ +
+ Module Blocks +

When you install a module, its blocks are automatically added to the Block Management system. + These blocks often have their own functionality settings and customization templates.

+
On the frontend, click the three-dot dropdown menu to edit the block.
+

For example, the parameters of the "Main Menu" block allow you to display icons for each module and subcategories.

+ <{if $xoops_isadmin}> +

Administration »» System »» Block Management ⭧

+ <{/if}> +
+ +
+ +
+ Theme +

A theme consists of a single HTML file that can include components, a CSS stylesheet, JavaScript, modules, and block templates. On the frontend, the Themes block allows users to select their preferred theme. + You first need to enable the themes users can choose from, in Theme Management.

+
Learn more about the Theme Options - Custom Parameters link in the Theme Management
+ <{if $xoops_isadmin}> +

Administration »» System »» Theme Management ⭧

+ <{/if}> +
+ +
+ +
diff --git a/html/themes/pico-orange/templates/legacy/legacy_block_mainmenu.html b/html/themes/pico-orange/templates/legacy/legacy_block_mainmenu.html new file mode 100644 index 000000000..31c3b9bce --- /dev/null +++ b/html/themes/pico-orange/templates/legacy/legacy_block_mainmenu.html @@ -0,0 +1,31 @@ +<{if $xoops_isadmin}>
<{$smarty.template}>
<{/if}> + + diff --git a/html/themes/pico-orange/templates/legacy/legacy_block_search.html b/html/themes/pico-orange/templates/legacy/legacy_block_search.html new file mode 100644 index 000000000..c0eb26a27 --- /dev/null +++ b/html/themes/pico-orange/templates/legacy/legacy_block_search.html @@ -0,0 +1,15 @@ +<{* Dev-Mode Toggle *}> +<{if $xoops_isadmin}>
<{$smarty.template}>
<{/if}> + +
+
+ + + <{xoops_input type=hidden name=andor value=AND}> + <{xoops_input type=hidden name=action value=results}> + +
+

+ <{$smarty.const._MB_LEGACY_ADVS}> +

+
diff --git a/html/themes/pico-orange/templates/legacy/legacy_block_siteinfo.html b/html/themes/pico-orange/templates/legacy/legacy_block_siteinfo.html new file mode 100644 index 000000000..f0bb80cf2 --- /dev/null +++ b/html/themes/pico-orange/templates/legacy/legacy_block_siteinfo.html @@ -0,0 +1,30 @@ +<{* Dev-Mode Toggle *}> +<{if $xoops_isadmin}>
<{$smarty.template}>
<{/if}> + +
+<{if $block.showgroups == true}> + +<{/if}> + + + +
diff --git a/html/themes/pico-orange/templates/legacy/legacy_block_themes.html b/html/themes/pico-orange/templates/legacy/legacy_block_themes.html new file mode 100644 index 000000000..6eab64ac0 --- /dev/null +++ b/html/themes/pico-orange/templates/legacy/legacy_block_themes.html @@ -0,0 +1,37 @@ +<{* Dev-Mode Toggle *}> +<{if $xoops_isadmin}>
<{$smarty.template}>
<{/if}> + +<{if $block.isEnableChanger == false}> + <{$smarty.const._MB_LEGACY_MESSAGE_CAN_NOT_THEME_CHANGE}> +<{else}> + +
+ +
+ <{if $block.mode==1}> + <{$block.theme_selected_name}> + + + <{/if}> + <{foreach item=theme_option from=$block.theme_options}> + + <{/foreach}> + + +

<{''|cat:$block.count|cat:''|string_format:$smarty.const._MB_LEGACY_LANG_NUMTHEME}>

+ + <{if $block.mode==1}> +
+ <{/if}> + +
+
+ +<{/if}> + diff --git a/html/themes/pico-orange/templates/legacy/legacy_block_usermenu.html b/html/themes/pico-orange/templates/legacy/legacy_block_usermenu.html new file mode 100644 index 000000000..47bda4ab8 --- /dev/null +++ b/html/themes/pico-orange/templates/legacy/legacy_block_usermenu.html @@ -0,0 +1,47 @@ +<{* Dev-Mode Toggle +<{if $xoops_isadmin}>
<{$smarty.template}>
<{/if}>*}> +
+ <{$xoops_uname}> + <{$xoops_uname}> + +
diff --git a/html/themes/pico-orange/templates/legacy/legacy_redirect.html b/html/themes/pico-orange/templates/legacy/legacy_redirect.html new file mode 100644 index 000000000..6adc2b915 --- /dev/null +++ b/html/themes/pico-orange/templates/legacy/legacy_redirect.html @@ -0,0 +1,44 @@ + + + + + + +<{if !class_exists('AdelieDebug_Preload')}> + +<{/if}> +<{$xoops_sitename}> + + + + + + +
+
+

logo

+

<{$message}>

+ +

<{$lang_ifnotreload}>

+<{if class_exists('AdelieDebug_Preload')}> +

No automatic redirect during AdelieDebug execution.

+<{/if}> +
+
+ + + \ No newline at end of file diff --git a/html/themes/pico-orange/templates/legacy/legacy_redirect_function.html b/html/themes/pico-orange/templates/legacy/legacy_redirect_function.html new file mode 100644 index 000000000..8fab737e7 --- /dev/null +++ b/html/themes/pico-orange/templates/legacy/legacy_redirect_function.html @@ -0,0 +1,176 @@ + + + +<?php echo htmlspecialchars($xoopsConfig['sitename']); ?> + + + + + + +
+
+ Loading +
+
+
+
+
+

+

+
+ + diff --git a/html/themes/pico-orange/theme.html b/html/themes/pico-orange/theme.html new file mode 100644 index 000000000..5188b92c1 --- /dev/null +++ b/html/themes/pico-orange/theme.html @@ -0,0 +1,305 @@ + + + + + + + + <{$xoops_sitename}> - <{$xoops_pagetitle}> + + + + + + + + + + + + + + + + + + <{if $xoops_dirname == 'pico' && isset($content.ef.pico_img)}> + + <{else}> + + <{/if}> + + + + + + + + <{* ----- Browserconfig, Webmanifest, XML Sitemap located in the root directory ----- *}> + + + + <{* ----- Favicons THEME COLOR ----- *}> + + + + <{* ----- Favicon SVG - default /images/favicon ----- *}> + + <{* ----- Favicons located in the root directory ----- *}> + + + + + <{* ----- Resquesturi $xoops_requesturi : /module/dirname/id ----- *}> + + <{* ----- CSS - PicoCSS ----- *}> + + + + <{$xoops_module_header}> + + <{* ----- Defer preload of custom styles for jQuery UI, PrismJS ----- *}> + + + + + <{* ----- CSS - Theme ----- *}> + + <{* ----- CSS - Theme JSON ----- *}> + <{assign var="theme" value="`$xoops_imageurl`theme.json"}> + <{json file="$theme" theme="theme" local="true"}> + <{foreach item=theme key=key from=$theme}> + <{assign var='name' value=$theme->name}> + <{assign var='title' value=$theme->title}> + <{assign var='slogan' value=$theme->slogan}> + <{assign var='body' value=$theme->body}> + <{assign var='color' value=$theme->color}> + <{assign var='primary' value=$theme->primary}> + <{assign var='secondary' value=$theme->secondary}> + <{assign var='inverse' value=$theme->inverse}> + <{/foreach}> + <{* ----- CSS - MainMenu Active ----- *}> + + + +
+ +
+ +<{* REMOVE SMARTY COMMENTS TO DISPLAY IN TOPPAGE ONLY *}> +<{* if $xoops_is_top|default:'' *}> +<{include file="$xoops_theme/component/_inc_hero.html"}> +<{* /if *}> + + +<{* ----- TOPPAGE Center Blocks Title width prefix top- & none- (hide title) + Note : It's Center Block Left that triggers the top to display *}> +<{if !empty($xoops_clblocks)}> +<{foreach item=block from=$xoops_clblocks}> + <{if $block.title|strstr:"top-" && !$block.title|strstr:"hero"}> + <{include file="$xoops_theme/component/_inc_top_center.html"}> + <{/if}> +<{/foreach}> +<{/if}> + + + +<{* ----- Main *}> +
+ + <{if $xoops_showlblock==1}> + + <{/if}> + +
+
+ <{if !empty($xoops_contents)}> + <{$xoops_contents}> + <{else}> + <{include file='db:legacy_app_start_page.html'}> + <{/if}> +
+
+ + <{if $xoops_showrblock==1}> + + <{/if}> + +
+ +<{if $banner !=" "}> +
+
+
+ <{$xoops_banner}> +
+
+
+<{/if}> + +<{* ---------- CENTER BLOCKS *}> +<{if $xoops_showcblock==1}> +
+ +<{* ---------- BLOCK Center-Left *}> +<{if !empty($xoops_clblocks)}> +
+ <{foreach item=block from=$xoops_clblocks}> + <{if !$block.title|strstr:"admin" && !$block.title|strstr:"top" && !$block.title|strstr:"hero"}> +
+

+ <{if $xoops_isadmin}> + <{$block.title}> + <{include file="$xoops_theme/component/_inc_block_edit.html"}> + <{else}> + <{if !$block.title|strstr:"none"}><{$block.title}><{/if}> + <{/if}> +

+
<{$block.content}>
+
+ <{/if}> + <{/foreach}> +
+<{/if}> + +<{* ---------- BLOCK Center-Center *}> +<{if !empty($xoops_ccblocks)}> +
+ <{foreach item=block from=$xoops_ccblocks}> + <{if !$block.title|strstr:"admin" && !$block.title|strstr:"top" && !$block.title|strstr:"hero"}> +
+

+ <{if $xoops_isadmin}> + <{$block.title}> + <{include file="$xoops_theme/component/_inc_block_edit.html"}> + <{else}> + <{if !$block.title|strstr:"none"}><{$block.title}><{/if}> + <{/if}> +

+
<{$block.content}>
+
+ <{/if}> + <{/foreach}> +
+<{/if}> + +<{* ---------- BLOCK Center-Right *}> +<{if !empty($xoops_crblocks)}> +
+ <{foreach item=block from=$xoops_crblocks}> + <{if !$block.title|strstr:"admin" && !$block.title|strstr:"top" && !$block.title|strstr:"hero"}> +
+

+ <{if $xoops_isadmin}> + <{$block.title}> + <{include file="$xoops_theme/component/_inc_block_edit.html"}> + <{else}> + <{if !$block.title|strstr:"none"}><{$block.title}><{/if}> + <{/if}> +

+
<{$block.content}>
+
+ <{/if}> + <{/foreach}> +
+<{/if}> + +
+<{/if}> + +<{* ---------- Scroll to top *}> +
+ + + + + + +
+ +<{if $banner !=" "}> +
+
+ +
+
+<{/if}> + +
+ +<{* ---------- FOOTER CREDITS *}> + + +<{* ---------- ADMIN FRONT PANEL *}> +<{if $xoops_isadmin}> +<{include file="$xoops_theme/component/admin-panel.html"}> +<{/if}> + +<{* ---------- DO NOT DEFER Theme Plugins - LocalStoarage & SVG ! *}> + + +<{* ---------- PrismJS ----- *}> + + + \ No newline at end of file diff --git a/html/themes/pico-orange/theme.json b/html/themes/pico-orange/theme.json new file mode 100644 index 000000000..f0d2d42f9 --- /dev/null +++ b/html/themes/pico-orange/theme.json @@ -0,0 +1,19 @@ +{ + "theme": [ + { + "name": "Pico Orange", + "version": "2.4.0", + "date": "2024-04-20", + "author": "Nuno Luciano", + "title": "Your Dream, Your Legacy", + "slogan": "The greatest legacy that you will leave to your friends is your story.", + "body": "#13171f", + "color": "#c2c7d0", + "primary": "#f56b3d", + "secondary": "#969eaf", + "contrast": "#dfe3eb", + "inverse": "#fff", + "muted": "#7b8495" + } + ] +} \ No newline at end of file diff --git a/html/themes/pico-sand/.editorconfig b/html/themes/pico-sand/.editorconfig new file mode 100644 index 000000000..4d87d9c2e --- /dev/null +++ b/html/themes/pico-sand/.editorconfig @@ -0,0 +1,13 @@ +# editorconfig.org +# XCL 2.4.0 +# This file is for unifying the coding style for different editors and IDEs + +root = true + +[*] +charset = utf-8 +end_of_line = lf +insert_final_newline = true +indent_size = 4 +indent_style = space +trim_trailing_whitespace = true diff --git a/html/themes/pico-sand/.gitignore b/html/themes/pico-sand/.gitignore new file mode 100644 index 000000000..0903b73bc --- /dev/null +++ b/html/themes/pico-sand/.gitignore @@ -0,0 +1,33 @@ +# XCL 2.4.0 +# OS or Editor folders +._* +.cache +.DS_Store +.idea +.project +.settings +.tmproj +*.esproj +*.sublime-project +*.sublime-workspace +nbproject +Thumbs.db +/.vscode/ + +# Numerous always-ignore extensions +*.diff +*.err +*.log +*.orig +*.rej +*.swo +*.swp +*.vi +*.zip +*~ + +# Folders to ignore +/node_modules/ + +# Pico +.pico diff --git a/html/themes/pico-sand/CHANGELOG.md b/html/themes/pico-sand/CHANGELOG.md new file mode 100644 index 000000000..ad3022556 --- /dev/null +++ b/html/themes/pico-sand/CHANGELOG.md @@ -0,0 +1,30 @@ +# Change Log + +## XCL Theme Pico Sand v.2.4.0 + +XCL Theme built with PicoCSS v2.0.6 + +All notable changes will be documented in this file. + +## [XCL Theme 240 ] 2024-04-20 + +- Add component block-center with Title prefix 'top-' +- Add condition to show Top Block-center (prefix 'top-none') +- Add daarkmode for CKEDITOR4 +- Update PicoCSS +- Update prefix CSS classes +- Update Templates +- Update jQuery UI theme built with CSS vars +- Theme style with customized CSS vars +- Fix Smarty logic in D3Forum and Pico +- Improved Pico's menu and TOC +- Smarty 2.6 fix isset and |default:'' + +## [XCL Pico 157 ] 2024-02-02 + +- Admin front panel block-right with Title prefix 'admin-' +- Load PicoCSS from theme folder +- Fix PHP8 warning errors related to Smarty +- Admin panel (using block-right with prefix 'admin-' in block-title) +- Banner placement and link to client +- Header UserMenu and Theme mode diff --git a/html/themes/pico-sand/LICENSE.md b/html/themes/pico-sand/LICENSE.md new file mode 100644 index 000000000..7341f375b --- /dev/null +++ b/html/themes/pico-sand/LICENSE.md @@ -0,0 +1,22 @@ +MIT License + +Copyright (c) 2019-2024 Pico +Copyright (c) 2019-2024 Nuno Luciano, XCL Theme + +Permission is hereby granted, free of charge, to any person obtaining a copy +of this software and associated documentation files (the "Software"), to deal +in the Software without restriction, including without limitation the rights +to use, copy, modify, merge, publish, distribute, sublicense, and/or sell +copies of the Software, and to permit persons to whom the Software is +furnished to do so, subject to the following conditions: + +The above copyright notice and this permission notice shall be included in all +copies or substantial portions of the Software. + +THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR +IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, +FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE +AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER +LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, +OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE +SOFTWARE. diff --git a/html/themes/pico-sand/component/_inc_block_edit.html b/html/themes/pico-sand/component/_inc_block_edit.html new file mode 100644 index 000000000..5c93fb699 --- /dev/null +++ b/html/themes/pico-sand/component/_inc_block_edit.html @@ -0,0 +1,27 @@ +<{assign var=admin_block_edit value="`$xoops_url`/modules/altsys/admin/index.php?mode=admin&lib=altsys&page=mytplsform&tpl_file="}> +<{assign var=admin_block_custom value="`$xoops_url`/modules/altsys/admin/index.php?mode=admin&lib=altsys&page=myblocksadmin&dirname=__CustomBlocks__&op=edit&bid="}> +
+ + + + + +
+ + + Edit B-<{$block.id}> + + + Clone Block + <{* if "" != $block.template *}> + <{if $block.template ne ""}> + + <{else}> + + <{/if}> + + + + Edit template +
+
diff --git a/html/themes/pico-sand/component/_inc_hero.html b/html/themes/pico-sand/component/_inc_hero.html new file mode 100644 index 000000000..aae7c8b62 --- /dev/null +++ b/html/themes/pico-sand/component/_inc_hero.html @@ -0,0 +1,82 @@ + + + +
+ +
+ + + + + + + + +
+

<{$title}>

+

<{$slogan}>

+
+
+ +
\ No newline at end of file diff --git a/html/themes/pico-sand/component/_inc_nav_theme.html b/html/themes/pico-sand/component/_inc_nav_theme.html new file mode 100644 index 000000000..cb8235205 --- /dev/null +++ b/html/themes/pico-sand/component/_inc_nav_theme.html @@ -0,0 +1,8 @@ +
+ Theme + +
diff --git a/html/themes/pico-sand/component/_inc_top_center.html b/html/themes/pico-sand/component/_inc_top_center.html new file mode 100644 index 000000000..750d86eb6 --- /dev/null +++ b/html/themes/pico-sand/component/_inc_top_center.html @@ -0,0 +1,146 @@ + + +<{if $xoops_showcblock==1}> +
+ +
+

<{$xoops_sitename}>

+

<{$xoops_slogan}>

+
+
+
+<{* ---------- BLOCK Center-Left *}> +<{if !empty($xoops_clblocks)}> +
+ <{foreach item=block from=$xoops_clblocks}> + <{if $block.title|strstr:"top-" && !$block.title|strstr:"hero"}> +
+

+ <{if $xoops_isadmin}> + <{$block.title}> + <{include file="$xoops_theme/component/_inc_block_edit.html"}> + <{else}> + <{if ! $block.title|strstr:"none"}><{$block.title|replace:'top-':''}><{/if}> + <{/if}> +

+
<{$block.content}>
+
+ <{/if}> + <{/foreach}> +
+<{/if}> + +<{* ---------- BLOCK Center-Center *}> +<{if !empty($xoops_ccblocks)}> +
+ <{foreach item=block from=$xoops_ccblocks}> + <{if $block.title|strstr:"top-" && !$block.title|strstr:"hero"}> +
+

+ <{if $xoops_isadmin}> + <{$block.title}> + <{include file="$xoops_theme/component/_inc_block_edit.html"}> + <{else}> + <{if ! $block.title|strstr:"none"}><{$block.title|replace:'top-':''}><{/if}> + <{/if}> +

+
<{$block.content}>
+
+ <{/if}> + <{/foreach}> +
+<{/if}> + +<{* ---------- BLOCK Center-Right *}> +<{if !empty($xoops_crblocks)}> +
+ <{foreach item=block from=$xoops_crblocks}> + <{if $block.title|strstr:"top-" && !$block.title|strstr:"hero"}> +
+

+ <{if $xoops_isadmin}> + <{$block.title}> + <{include file="$xoops_theme/component/_inc_block_edit.html"}> + <{else}> + <{if ! $block.title|strstr:"none"}><{$block.title|replace:'top-':''}><{/if}> + <{/if}> +

+
<{$block.content}>
+
+ <{/if}> + <{/foreach}> +
+<{/if}> + +
+ +
+<{/if}> \ No newline at end of file diff --git a/html/themes/pico-sand/component/admin-panel.html b/html/themes/pico-sand/component/admin-panel.html new file mode 100644 index 000000000..b3b68d380 --- /dev/null +++ b/html/themes/pico-sand/component/admin-panel.html @@ -0,0 +1,237 @@ +<{* XCube Panel Options *}> + + + +
+
+ +
+
+ +<{* ----- RIGHT-SIDEBAR ----- *}> +
+ +
Control Panel + + + +
+ + <{* ----- RIGHT-PANEL-BLOCK ----- *}> +
+ + <{* ---------- Block-Right *}> + <{if $xoops_showrblock==1}> + <{foreach item=block from=$xoops_rblocks}> + <{if $block.title|strstr:"admin"}> +
+

+ <{* REMOVE 'admin-' FROM BLOCK-TITLE *}> + <{$block.title|replace:'admin-':''}> + <{include file="$xoops_theme/component/_inc_block_edit.html"}> +

+
<{$block.content}>
+
+ <{/if}> + <{foreachelse}> +
+ Add block with position block-right
+ and block-title with prefix admin- +
+ <{/foreach}> + <{/if}> + <{* ----- ADMIN PREVIEW ----- *}> +
Preview Layout
+
+ + + + +
+ +
+ <{* -----/ RIGHT-PANEL-BLOCK *}> + +
+<{* -----/ RIGHT-SIDEBAR *}> + diff --git a/html/themes/pico-sand/component/block-left.html b/html/themes/pico-sand/component/block-left.html new file mode 100644 index 000000000..dabcad9fe --- /dev/null +++ b/html/themes/pico-sand/component/block-left.html @@ -0,0 +1,18 @@ +<{* ---------- Block-Left *}> +<{foreach item=block from=$xoops_lblocks}> +<{if !$block.title|strstr:"Topage" && !$block.title|strstr:"User" || !$block.id==28}> +
+

+ <{if $xoops_isadmin}> + <{$block.title|replace:' ':'-'}> + <{include file="$xoops_theme/component/_inc_block_edit.html"}> + <{else}> + <{if ! $block.title|strstr:"none"}><{$block.title}><{/if}> + <{/if}> +

+
+ <{$block.content}> +
+
+<{/if}> +<{/foreach}> diff --git a/html/themes/pico-sand/component/block-right.html b/html/themes/pico-sand/component/block-right.html new file mode 100644 index 000000000..1edb488a6 --- /dev/null +++ b/html/themes/pico-sand/component/block-right.html @@ -0,0 +1,16 @@ +<{* ---------- Block-Right *}> +<{foreach item=block from=$xoops_rblocks}> +<{if !$block.title|strstr:"admin"}> +
+

+ <{if $xoops_isadmin}> + <{$block.title}> + <{include file="$xoops_theme/component/_inc_block_edit.html"}> + <{else}> + <{if ! $block.title|strstr:"none"}><{$block.title}><{/if}> + <{/if}> +

+
<{$block.content}>
+
+<{/if}> +<{/foreach}> diff --git a/html/themes/pico-sand/css/dropdown.css b/html/themes/pico-sand/css/dropdown.css new file mode 100644 index 000000000..6bd332f2b --- /dev/null +++ b/html/themes/pico-sand/css/dropdown.css @@ -0,0 +1,91 @@ +/* +* XCL Theme Dropdown +* +* @version 2.4.0 +* @update 2024-04-20 +* @Date 2024-02-02 +* @author Nuno Luciano ( https://github.com/gigamaster ) +* @copyright (c) 2005-2024 The XOOPSCube Project, authors +* @license MIT +* @link https://github.com/xoopscube +*/ +/* -------------------- Dropdown Menu */ + +div.dropdown { + position : relative; + display : block; +} +div.dropdown a.dropdown-toggle:not(.ui-tabs-anchor) { + background : transparent; /*var(--background-color);*/ + border : none; + border-radius : var(--pico-border-radius); + box-shadow : none; + color : var(--pico-primary-color); + cursor : pointer; + display : block; + font : inherit; + margin : 0; + padding : 0 .25rem .25rem; + transition : all var(--transition-time) var(--transition-cube); +} +div.dropdown a.dropdown-toggle:hover:not(.ui-tabs-anchor) { + background : var(--primary-focus); /* link [div][a] */ + box-shadow : none; + color : var(--primary-hover); + background : var(--pico-primary-hover-background); + color : var(--pico-primary-inverse); +} +div.dropdown.isopen div.dropdown-content { + display : block; + z-index : var(--z-above); +} +div.dropdown-content { + background : var(--pico-form-element-background-color); + border : var(--pico-border-width) solid var(--pico-form-element-border-color); + border-radius : var(--pico-border-radius); + box-shadow : var(--pico-card-box-shadow); /* 0px 2px 4px 1px hsla(0, 0%, 0%, 0.74); */ + color : var(--pico-primary-color); + display : none; + + min-width : 190px; + padding : .5rem; + position : absolute; + right : -10px; + + text-align : left; + top : 100%; + transition : all var(--transition-time) var(--transition-cube); +} +@media (min-width: 992px) { + .dropdown-content { + right : 1px; /* Fix device Viewport */ + } +} +div.dropdown div.dropdown-content ul { + margin : 0; + padding : 0; + list-style : none; +} +div.dropdown div.dropdown-content ul li { + background : transparent; + padding : 0; + width : 100%; +} +/* Dropdown links */ +div.dropdown div.dropdown-content a { + border-radius : var(--pico-border-radius); + color : var(--pico-primary-color); + display : block; + font-size : 16px; + padding : calc(var(--pico-form-element-spacing-vertical)* .8) var(--pico-form-element-spacing-horizontal); + text-decoration : none; +} +/* Change color of dropdown links on hover */ +div.dropdown div.dropdown-content a:hover { + background : var(--pico-primary-hover-background); + color : var(--pico-primary-inverse); +} + +div.dropdown div.dropdown-content a > svg { + margin : var(--dropdown-icon-margin); +} diff --git a/html/themes/pico-sand/css/index.html b/html/themes/pico-sand/css/index.html new file mode 100644 index 000000000..990cbd603 --- /dev/null +++ b/html/themes/pico-sand/css/index.html @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/html/themes/pico-sand/css/jquery-ui.theme.css b/html/themes/pico-sand/css/jquery-ui.theme.css new file mode 100644 index 000000000..9adef581c --- /dev/null +++ b/html/themes/pico-sand/css/jquery-ui.theme.css @@ -0,0 +1,693 @@ +/* +* XCL Theme Jquery-UI for PicoCSS v206 +* +* @version 2.4.0 +* @update 2024-04-20 +* @date 2024-02-02 +* @author Nuno Luciano ( https://github.com/gigamaster ) +* @copyright (c) 2005-2024 The XOOPSCube Project, authors +* @license MIT +* @link https://github.com/xoopscube +*/ + +/* Component containers +----------------------------------*/ +.ui-dialog.ui-widget.ui-front { + background : var(--pico-form-element-background-color); + box-shadow : var(--pico-box-shadow ); + padding : calc(var(--block-spacing-horizontal) * 1); + border : var(--pico-border-width) solid var(--pico-form-element-border-color); + background-color: var(--pico-modal-overlay-background-color); + backdrop-filter : var(--pico-modal-overlay-backdrop-filter); + -webkit-backdrop-filter: var(--pico-modal-overlay-backdrop-filter); + +} +.ui-dialog-dragging > .ui-widget-header { + background: var(--pico-primary-background); +} +.ui-widget { + font-size : 1rem +} +.ui-widget .ui-widget { + font-size : 1rem +} +.ui-widget input, +.ui-widget select, +.ui-widget textarea, +.ui-widget button { + outline : none; + font-family : inherit; + font-size : 1rem +} +.ui-widget.ui-widget-content { + /* border : 1px solid var(--pico-form-element-border-color); */ + border : 1px solid transparent; + background : var(--pico-form-element-background-color); + border-radius : var(--pico-border-radius); + box-shadow : var(--pico-card-box-shadow); + margin : 0; +} + +.ui-widget-content { + background : var(--pico-form-element-background-color); + border : 1px solid var(--pico-form-element-border-color); + color : var(--pico-color); +} +.ui-widget-content a { + color : var(--pico-primary); +} +.ui-widget-header { + background : var(--pico-card-sectioning-background-color); + border : var(--pico-border-width) solid var(--pico-border-color); + border-radius : var(--pico-border-radius); + color : var(--pico-color); + font-weight : var(--pico-font-weight); + list-style : none; +} +/* custom spacing */ +:is(.ui-menu) li.ui-widget-header { + /* custom spacing */ + padding: .175em .5em; + border: 1px solid var(--pico-dropdown-border-color) +} +.ui-widget-header a { + color : var(--pico-color); +} + +/* Interaction states +----------------------------------*/ +.ui-state-default, +.ui-widget-content .ui-state-default, +.ui-widget-header .ui-state-default, +.ui-button, +/* greater specificity when clicked or hovered */ +html .ui-button.ui-state-disabled:hover, +html .ui-button.ui-state-disabled:active { + background-color: var(--pico-background-color); + border : 1px solid var(--pico-form-element-border-color); + color : var(--pico-contrast); + font : var(--pico-font-size); + font-weight : inherit; +} +.ui-state-default a, +.ui-state-default a:link, +.ui-state-default a:visited, +a.ui-button, +a:link.ui-button, +a:visited.ui-button, +.ui-button { + background-color: var(--pico-background-color); + border: 1px solid transparent; + color : var(--pico-primary); + text-decoration : none; +} +.ui-state-hover, +.ui-widget-content .ui-state-hover, +.ui-widget-header .ui-state-hover, +.ui-state-focus, +.ui-widget-content .ui-state-focus, +.ui-widget-header .ui-state-focus, +.ui-button:hover, +.ui-button:focus { + background : var(--pico-primary-hover-background); + border : 1px solid var(--pico-primary-hover-border); + color : var(--pico-color); + font-weight : inherit; + outline : none; +} +.ui-state-hover a, +.ui-state-hover a:hover, +.ui-state-hover a:link, +.ui-state-hover a:visited, +.ui-state-focus a, +.ui-state-focus a:hover, +.ui-state-focus a:link, +.ui-state-focus a:visited, +a.ui-button:hover, +a.ui-button:focus { + background : var(--pico-primary-hover-background); + border : 1px solid var(--pico-primary-hover-border); + color : var(--pico-primary-hover); + font : var(--pico-font-size); + font-weight : inherit; + text-decoration : none; + outline : none; +} +.ui-visual-focus { + box-shadow : var(--pico-primary-focus); +} +.ui-state-active, +.ui-widget-content .ui-state-active, +.ui-widget-header .ui-state-active, +a.ui-button:active, +.ui-button:active, +.ui-button.ui-state-active:hover { + background : var(--pico-primary-hover-background); + border : 1px solid var(--pico-primary-hover-border); + color : var(--pico-primary-inverse); + font-weight : inherit; + outline : none; +} +.ui-state-active a, +.ui-state-active a:link, +.ui-state-active a:visited, +:where(.dropdown-content):not(a.dropdown-item) { + border : 1px solid var(--pico-primary-hover-border); + color : var(--pico-primary-focus); +} +/* Checkbox */ +.ui-icon-background, +.ui-state-active .ui-icon-background { + background-color: var(--pico-primary-hover-background); + border : 1px solid var(--pico-primary-hover-border); +} + +/* Interaction Cues +----------------------------------*/ +.ui-state-highlight, +.ui-widget-content .ui-state-highlight, +.ui-widget-header .ui-state-highlight { + background : var(--pico-primary-hover-background); + border : 1px solid var(--pico-primary-hover-border); + color : var(--pico-primary-inverse); +} +.ui-state-checked { + background : var(--ui-state-checked-bg); + border : var(--ui-state-checked-border); +} +.ui-state-highlight a, +.ui-widget-content .ui-state-highlight a, +.ui-widget-header .ui-state-highlight a { + color : var(--pico-primary-inverse); +} +.ui-state-error, +.ui-widget-content .ui-state-error, +.ui-widget-header .ui-state-error { + background : var(--ui-state-error-bg); + border : 1px solid var(--pico-primary-hover-border); + color : var(--ui-state-error-color); +} +.ui-state-error a, +.ui-widget-content .ui-state-error a, +.ui-widget-header .ui-state-error a { + color : var(--ui-state-error-link); +} +.ui-state-error-text, +.ui-widget-content .ui-state-error-text, +.ui-widget-header .ui-state-error-text { + color : var(--ui-state-error-text); +} +.ui-priority-primary, +.ui-widget-content .ui-priority-primary, +.ui-widget-header .ui-priority-primary { + font-weight : inherit; +} +.ui-priority-secondary, +.ui-widget-content .ui-priority-secondary, +.ui-widget-header .ui-priority-secondary { + font-weight : inherit; + opacity : 0.7; +} +.ui-state-disabled, +.ui-widget-content .ui-state-disabled, +.ui-widget-header .ui-state-disabled { + background-image: none; + border : 1px solid var(--pico-muted-border-color); + opacity : 0.35; +} + +/* Icons +----------------------------------*/ +/* states and images - RELATIVE TO XCL /COMMON */ +.ui-icon { + width: 16px; + height: 16px; +} +.ui-icon, +.ui-widget-content .ui-icon { + background-image: url("../../../common/js/images/ui-icons_cccccc_256x240.png"); +} +.ui-widget-header .ui-icon { + background-image: url("../../../common/js/images/ui-icons_cccccc_256x240.png"); +} +.ui-state-hover .ui-icon, +.ui-state-focus .ui-icon, +.ui-button:hover .ui-icon, +.ui-button:focus .ui-icon { + background-image: url("../../../common/js/images/ui-icons_ffffff_256x240.png"); +} +.ui-state-active .ui-icon, +.ui-button:active .ui-icon { + background-image: url("../../../common/js/images/ui-icons_ffffff_256x240.png"); +} +.ui-state-highlight .ui-icon, +.ui-button .ui-state-highlight.ui-icon { + background-image: url("../../../common/js/images/ui-icons_ffffff_256x240.png"); +} +.ui-state-error .ui-icon, +.ui-state-error-text .ui-icon { + background-image: url("../../../common/js/images/ui-icons_ffffff_256x240.png"); +} +.ui-button .ui-icon { + background-image: url("../../../common/js/images/ui-icons_cccccc_256x240.png"); +} + + +/* Misc visuals +----------------------------------*/ + +/* Corner radius */ +.ui-corner-all, +.ui-corner-top, +.ui-corner-left, +.ui-corner-tl { + border-top-left-radius: var(--pico-border-radius); +} +.ui-corner-all, +.ui-corner-top, +.ui-corner-right, +.ui-corner-tr { + border-top-right-radius: var(--pico-border-radius); +} +.ui-corner-all, +.ui-corner-bottom, +.ui-corner-left, +.ui-corner-bl { + border-bottom-left-radius: var(--pico-border-radius); +} +.ui-corner-all, +.ui-corner-bottom, +.ui-corner-right, +.ui-corner-br { + border-bottom-right-radius: var(--pico-border-radius); +} + +/* Overlays */ +/*Applies 100% width & height dimensions to an overlay screen*/ +.ui-widget-overlay { + background : var(--ui-widget-overlay-bg); + backdrop-filter : var(--pico-modal-overlay-backdrop-filter); + opacity : .8; +} +/*Sets box-shadow x & y offset, blur radius and color.*/ +.ui-widget-shadow { + box-shadow : var(--ui-widget-shadow); +} + +/* Accordion +----------------------------------*/ +.ui-accordion .ui-accordion-header { + background : var(--pico-background-color); + border : 1px solid var(--pico-accordion-border-color); + border-radius : var(--pico-border-radius); + box-shadow : var(--pico-box-shadow); + cursor : pointer; + display : block; + margin : var(--accordion-margin); + outline : 0; + margin-bottom : .15em; + padding : .5em; + position : relative; + -moz-user-select: none; + user-select : none; + transition : background-color var(--pico-transition); + +} +.ui-accordion .ui-accordion-content { + background : var(--pico-dropdown-background-color); + border : var(--pico-border-width) solid var(--pico-dropdown-border-color); + border-top : 0; + border-radius : var(--pico-border-radius); + color : var(--pico-color); + padding : var(--pico-form-element-spacing-vertical) var(--pico-form-element-spacing-horizontal); + overflow : auto; + transition: opacity var(--pico-transition), transform 0s ease-in-out 1s; +} +:is(.ui-accordion-header-active):not([aria-selected="false"][aria-expanded="false"]) { + color:var(--pico-primary-color); +} +:is(.ui-accordion-header):not([aria-selected="true"][aria-expanded="true"]) { + color:var(--pico-secondary); +} + +/* UI-MENU */ +.ui-menu { + background : var(--pico-form-element-background-color); + border : var(--pico-border-width) solid var(--pico-form-element-border-color); + border-radius : var(--pico-border-radius); + display : block; + list-style : none!important; + margin : var(--ui-menu-margin); + /* Override jQuery-UI css value */ + outline : 0; + padding:5px; + -moz-user-select: none; + user-select: none; +} +.ui-menu .ui-menu { + /* IMPORTANT override ui-widget-content */ + background : var(--pico-form-element-background-color); + border : var(--pico-border-width) solid var(--pico-form-element-border-color); + border-radius : var(--pico-border-radius); + position : absolute; + -moz-user-select: none; + user-select: none; +} +.ui-menu .ui-menu-item-wrapper { + background : inherit; + border : 1px solid transparent; + border-radius : var(--pico-border-radius); + color : var(--pico-color); + padding : .125em .25em; + /* position: relative;*/ +} +.ui-menu-icons { + position: relative +} +.ui-menu-icons .ui-menu-item-wrapper { + padding-left: 1.5em +} +.ui-menu .ui-icon { + position: absolute; + top: 0; + bottom: 0; + left: .2em; + margin: auto 0 +} +.ui-menu .ui-menu-icon { + left: auto; + right: 0 +} +.ui-menu .ui-state-focus, +.ui-menu .ui-state-active { + /* IMPORTANT override default UI properties */ + background : var(--pico-primary-hover-background); + border : 1px solid var(--pico-primary-hover-border); + border-radius : var(--pico-border-radius); + color : var(--pico-primary-inverse); + margin : 0; +} + +.ui-button:not(.ui-spinner-button,.ui-dialog-titlebar-close,.ui-controlgroup-item), +.ui-button:link, +.ui-button:visited { +--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)); + background-color: var(--pico-background-color); + border: var(--pico-border-width) solid var(--pico-border-color); + border-radius: var(--pico-border-radius); + box-shadow: var(--pico-box-shadow); + color: var(--pico-color); + cursor: pointer; + font-weight: var(--pico-font-weight); + font-size: var(--pico-font-size); + line-height: var(--pico-line-height); + outline: 0; + padding: var(--pico-form-element-spacing-vertical) var(--pico-form-element-spacing-horizontal); + text-align: center; + text-decoration: none; + -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); +} +.ui-button:hover { +--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); +} +/* +ref: https://api.jquery.com/first/ +*/ +:is(.ui-selectmenu-button.ui-button) { + padding : var(--pico-form-element-spacing-vertical) var(--pico-form-element-spacing-horizontal); + margin-bottom : var(--pico-spacing); + background-color: var(--pico-form-element-background-color); + border : var(--pico-border-width) solid var(--pico-form-element-border-color); + border-radius : var(--pico-border-radius); + box-shadow : var(--pico-button-hover-box-shadow, 0 0 0 rgba(0, 0, 0, 0.2)); + color : var(--pico-form-element-placeholder-color); + cursor : pointer; + height : calc(1rem* var(--pico-line-height) + var(--pico-form-element-spacing-vertical)* 2 + var(--pico-border-width)* 2); + line-height : inherit; + text-align : left; + -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); +} +:is(.ui-selectmenu-button-open.ui-button) { +background-color: var(--pico-form-element-background-color); +border : var(--pico-border-width) solid var(--pico-form-element-border-color); +color : var(--pico-form-element-placeholder-color); +} +.ui-selectmenu-menu .ui-menu .ui-selectmenu-optgroup { + font-weight : var(--pico-font-weight); + margin : 0; +} +.ui-controlgroup-horizontal:first-child .ui-controlgroup-item:nth-of-type(1), +.ui-controlgroup-horizontal > .ui-selectmenu-button { + border-top-left-radius: var(--pico-border-radius) !important; + border-bottom-left-radius: var(--pico-border-radius) !important; +} +.ui-controlgroup-horizontal .ui-controlgroup-item:last-child { + border-top-right-radius: var(--pico-border-radius) !important; + border-bottom-right-radius: var(--pico-border-radius) !important; +} +.ui-controlgroup-vertical .ui-controlgroup-item:first-child, +.ui-controlgroup-vertical .ui-selectmenu-button { + border-top-left-radius: var(--pico-border-radius) !important; + border-top-right-radius: var(--pico-border-radius) !important; +} +.ui-controlgroup-vertical .ui-controlgroup-item:last-child { + border-bottom-left-radius: var(--pico-border-radius); + border-bottom-right-radius: var(--pico-border-radius) !important; +} +.ui-controlgroup { + display : inline-block; + vertical-align : middle; +} +:where(.ui-controlgroup ) .ui-controlgroup-item:not(.ui-spinner) { + background : var(--pico-background-color); + border : var(--pico-border-width) solid var(--pico-form-element-border-color); + color : var(--pico-color); + padding : var(--pico-form-element-spacing-vertical) var(--pico-form-element-spacing-horizontal); + margin : 0; +} +.ui-controlgroup .ui-controlgroup-label span { + font-size : 1rem; + color : var(--pico-primary); +} +.ui-controlgroup-horizontal .ui-controlgroup-label + .ui-controlgroup-item { + border-left : var(--pico-border-width) solid var(--pico-accordion-border-color); +} + +/* RESET BROWSER SPINNER */ +input::-webkit-outer-spin-button, +input::-webkit-inner-spin-button { +display: none; +-webkit-appearance: none; +margin: 0; /* reset margin */ +outline: none; +} +input[type=number] { +-moz-appearance:textfield; /* Firefox */ +} +.ui-spinner-input { + -webkit-appearance: none; + -moz-appearance: textfield; + appearance: none; + border: var(--pico-border-width) solid var(--pico-form-element-border-color); + border-radius: var(--pico-border-radius); + margin: 0!important; + padding-right: 30px!important; + min-width: 8ch; + text-align: center; + vertical-align: middle; + outline: none; +} +.ui-spinner-input:focus{outline:none;box-shadow: 0 0 0 var(--pico-outline-width) var(--pico-primary-focus);} +.ui-spinner a.ui-spinner-button { + position: absolute; + height: 28px!important; + background: var(--pico-primary-underline); +} +.ui-spinner a.ui-spinner-button:hover{ +background: var(--pico-primary-hover-background); +} + +/* CHECKBOX + icon */ +.ui-checkboxradio-label .ui-icon-background { +--pico-background-color: var(--pico-primary-background); +--pico-border-color: var(--pico-primary-border); + -webkit-appearance: none; + -moz-appearance: none; + appearance: none; + accent-color : var(--pico-primary); + background : var(--pico-form-element-border-color); + border : 2px solid var(--pico-form-element-border-color); + border-radius : 3px; + box-shadow : var(--ui-state-check-shadow); + background-position: center; + background-size : .75em auto; + background-repeat: no-repeat; +} +/* RADIO */ +.ui-checkboxradio-radio-label .ui-icon-background { + background : white; + border : 8px solid var(--pico-form-element-border-color); + border-radius : 50%; + box-shadow : var(--ui-state-check-shadow); + height : var(--ui-state-check-height); + width : var(--ui-state-check-width); +} +.ui-checkboxradio-radio-label.ui-checkboxradio-checked .ui-icon, +.ui-checkboxradio-radio-label.ui-checkboxradio-checked:hover .ui-icon { + background-image: var(--pico-icon-checkbox); + background : white; + cursor : pointer; +} + +.ui-datepicker table { + font-size : 16px; +} +.ui-datepicker .ui-datepicker-prev, +.ui-datepicker .ui-datepicker-next{ + border : 1px solid transparent; + position : absolute; + top : 2px; + width : 1.8em; + height : 1.8em +} +.ui-datepicker .ui-datepicker-prev-hover, +.ui-datepicker .ui-datepicker-next-hover{ + top:2px +} +.ui-datepicker .ui-datepicker-prev{ + left:2px +} +.ui-datepicker .ui-datepicker-next{ + right:2px +} +.ui-datepicker .ui-datepicker-prev-hover{ + left:2px +} +.ui-datepicker .ui-datepicker-next-hover{ + right:2px +} +.ui-datepicker .ui-datepicker-prev span, +.ui-datepicker .ui-datepicker-next span{ + display:block; + position:absolute; + left:50%; + margin-left:-8px; + top:50%; + margin-top:-8px +} +.ui-datepicker .ui-datepicker-title{ + margin:0 2.3em; + line-height:1.8em; + text-align:center +} + +.ui-progressbar { + height : var(--ui-progressbar-height); +} +.ui-progressbar .ui-progressbar-value { + background : var(--ui-progressbar-value); +} + + +/* -------------------- -------------------- jQUERY UI TAB */ +.ui-tabs { + position : relative; + border : none; + border-radius : var(--pico-border-radius); + margin : 0; + padding:0.875rem; + list-style : none; +} +.ui-tabs .ui-tabs-nav { + margin : 0; + padding : .2em .2em 0; +} +/* The list of tabs */ +.ui-tabs .ui-tabs-nav { + background : transparent; + border : none; + border-top-left-radius : var(--pico-border-radius); + border-top-right-radius : var(--pico-border-radius); + box-shadow : var(--pico-box-shadow); + cursor : pointer; + display : inline-block; + line-height : 1.25; +} +.ui-tabs .ui-tabs-nav li { + /* border: 1px solid var(--pico-primary-underline); */ + list-style: none; + float: left; + position: relative; + top: 0; + margin: 0; + white-space: nowrap; +} +/* The anchors used to switch panels. */ +.ui-tabs .ui-tabs-nav .ui-tabs-anchor { + /* background : var(--pico-primary-underline); */ + background : transparent; + color : var(--pico-primary); + float : left; + text-decoration : none; +} +/* li .ui-tabs-anchor:first-child { +border-top-left-radius: var(--pico-border-radius); +} +li .ui-tabs-anchor:last-child { + border-top-right-radius: var(--pico-border-radius); +} */ + +.ui-tabs .ui-tabs-nav li.ui-tabs-active { + margin-bottom: 0; + padding-bottom: 0; + border-radius: var(--pico-border-radius); + border:none; +} +:is(.ui-tabs-tab).ui-state-default,.ui-state-default{ + border-radius: var(--pico-border-radius); +} +.ui-tabs-collapsible .ui-tabs-nav li.ui-tabs-active .ui-tabs-anchor { + cursor: pointer; +} +.ui-tabs .ui-tabs-nav .ui-tabs-anchor:hover, +.ui-tabs .ui-tabs-nav li.ui-tabs-active .ui-tabs-anchor { + background : var(--pico-primary-hover-background); + color : var(--pico-contrast); +} + +:where(li.ui-tabs-tab, a.ui-tabs-anchor):first-child {border-top-left-radius: var(--pico-border-radius)} +:where(li.ui-tabs-tab, a.ui-tabs-anchor):last-child {border-top-right-radius: var(--pico-border-radius)} +.ui-tabs .ui-tabs-panel { + background : var(--pico-card-background-color); + display : block; + border : var(--ui-tab-panel-border); + padding : var(--pico-block-spacing-vertical) var(--pico-block-spacing-horizontal); +} + +/* CUSTOMIZED content loading via an Ajax call will have the ui-tabs-loading class. */ +.ui-tabs-loading { + border : var(--ui-tabs-loading); /* TODO */ +} + +/* -------------------- jQUERY UI Tooltip */ +/*.ui-tooltip { + padding: 8px; + position: absolute; + z-index: 9999; + max-width: 300px; +} +body .ui-tooltip { + border-width: 2px; +}*/ diff --git a/html/themes/pico-sand/css/pico.sand.min.css b/html/themes/pico-sand/css/pico.sand.min.css new file mode 100644 index 000000000..3da497274 --- /dev/null +++ b/html/themes/pico-sand/css/pico.sand.min.css @@ -0,0 +1,4 @@ +@charset "UTF-8";/*! + * Pico CSS ✨ v2.0.6 (https://picocss.com) + * Copyright 2019-2024 - Licensed under MIT + */:root{--pico-font-family-emoji:"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";--pico-font-family-sans-serif:system-ui,"Segoe UI",Roboto,Oxygen,Ubuntu,Cantarell,Helvetica,Arial,"Helvetica Neue",sans-serif,var(--pico-font-family-emoji);--pico-font-family-monospace:ui-monospace,SFMono-Regular,"SF Mono",Menlo,Consolas,"Liberation Mono",monospace,var(--pico-font-family-emoji);--pico-font-family:var(--pico-font-family-sans-serif);--pico-line-height:1.5;--pico-font-weight:400;--pico-font-size:100%;--pico-text-underline-offset:0.1rem;--pico-border-radius:0.25rem;--pico-border-width:0.0625rem;--pico-outline-width:0.125rem;--pico-transition:0.2s ease-in-out;--pico-spacing:1rem;--pico-typography-spacing-vertical:1rem;--pico-block-spacing-vertical:var(--pico-spacing);--pico-block-spacing-horizontal:var(--pico-spacing);--pico-grid-column-gap:var(--pico-spacing);--pico-grid-row-gap:var(--pico-spacing);--pico-form-element-spacing-vertical:0.75rem;--pico-form-element-spacing-horizontal:1rem;--pico-group-box-shadow:0 0 0 rgba(0, 0, 0, 0);--pico-group-box-shadow-focus-with-button:0 0 0 var(--pico-outline-width) var(--pico-primary-focus);--pico-group-box-shadow-focus-with-input:0 0 0 0.0625rem var(--pico-form-element-border-color);--pico-modal-overlay-backdrop-filter:blur(0.375rem);--pico-nav-element-spacing-vertical:1rem;--pico-nav-element-spacing-horizontal:0.5rem;--pico-nav-link-spacing-vertical:0.5rem;--pico-nav-link-spacing-horizontal:0.5rem;--pico-nav-breadcrumb-divider:">";--pico-icon-checkbox:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(255, 255, 255)' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");--pico-icon-minus:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(255, 255, 255)' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='5' y1='12' x2='19' y2='12'%3E%3C/line%3E%3C/svg%3E");--pico-icon-chevron:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(136, 145, 164)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");--pico-icon-date:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(136, 145, 164)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='18' rx='2' ry='2'%3E%3C/rect%3E%3Cline x1='16' y1='2' x2='16' y2='6'%3E%3C/line%3E%3Cline x1='8' y1='2' x2='8' y2='6'%3E%3C/line%3E%3Cline x1='3' y1='10' x2='21' y2='10'%3E%3C/line%3E%3C/svg%3E");--pico-icon-time:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(136, 145, 164)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cpolyline points='12 6 12 12 16 14'%3E%3C/polyline%3E%3C/svg%3E");--pico-icon-search:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(136, 145, 164)' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'%3E%3C/circle%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'%3E%3C/line%3E%3C/svg%3E");--pico-icon-close:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(136, 145, 164)' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='18' y1='6' x2='6' y2='18'%3E%3C/line%3E%3Cline x1='6' y1='6' x2='18' y2='18'%3E%3C/line%3E%3C/svg%3E");--pico-icon-loading:url("data:image/svg+xml,%3Csvg fill='none' height='24' width='24' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg' %3E%3Cstyle%3E g %7B animation: rotate 2s linear infinite; transform-origin: center center; %7D circle %7B stroke-dasharray: 75,100; stroke-dashoffset: -5; animation: dash 1.5s ease-in-out infinite; stroke-linecap: round; %7D @keyframes rotate %7B 0%25 %7B transform: rotate(0deg); %7D 100%25 %7B transform: rotate(360deg); %7D %7D @keyframes dash %7B 0%25 %7B stroke-dasharray: 1,100; stroke-dashoffset: 0; %7D 50%25 %7B stroke-dasharray: 44.5,100; stroke-dashoffset: -17.5; %7D 100%25 %7B stroke-dasharray: 44.5,100; stroke-dashoffset: -62; %7D %7D %3C/style%3E%3Cg%3E%3Ccircle cx='12' cy='12' r='10' fill='none' stroke='rgb(136, 145, 164)' stroke-width='4' /%3E%3C/g%3E%3C/svg%3E")}@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.contrast,a.secondary{--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}tfoot td,tfoot th,thead td,thead th{--pico-font-weight:600;--pico-border-width:0.1875rem}code,kbd,pre,samp{--pico-font-family:var(--pico-font-family-monospace)}kbd{--pico-font-weight:bolder}:where(select,textarea),input:not([type=submit],[type=button],[type=reset],[type=checkbox],[type=radio],[type=file]){--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=group]:has(button.secondary:focus,[type=submit].secondary:focus,[type=button].secondary:focus,[role=button].secondary:focus),[role=search]: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=group]:has(button.contrast:focus,[type=submit].contrast:focus,[type=button].contrast:focus,[role=button].contrast:focus),[role=search]: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=group] [role=button],[role=group] [type=button],[role=group] [type=submit],[role=group] button,[role=search] [role=button],[role=search] [type=button],[role=search] [type=submit],[role=search] 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(0)}:root:not([data-theme=dark]),[data-theme=light]{--pico-background-color:#fff;--pico-color:#373c44;--pico-text-selection-color:rgba(149, 144, 130, 0.25);--pico-muted-color:#646b79;--pico-muted-border-color:#e7eaf0;--pico-primary:#6e6a60;--pico-primary-background:#ccc6b4;--pico-primary-border:var(--pico-primary-background);--pico-primary-underline:rgba(110, 106, 96, 0.5);--pico-primary-hover:#55524a;--pico-primary-hover-background:#beb8a7;--pico-primary-hover-border:var(--pico-primary-hover-background);--pico-primary-hover-underline:var(--pico-primary-hover);--pico-primary-focus:rgba(149, 144, 130, 0.5);--pico-primary-inverse:#000;--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.5rem rgba(0, 0, 0, 0.25);--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:var(--pico-background-color);--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}:root:not([data-theme=dark]) input:is([type=submit],[type=button],[type=reset],[type=checkbox],[type=radio],[type=file]),[data-theme=light] 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(163, 158, 143, 0.1875);--pico-muted-color:#7b8495;--pico-muted-border-color:#202632;--pico-primary:#a39e8f;--pico-primary-background:#ccc6b4;--pico-primary-border:var(--pico-primary-background);--pico-primary-underline:rgba(163, 158, 143, 0.5);--pico-primary-hover:#beb8a7;--pico-primary-hover-background:#dad4c2;--pico-primary-hover-border:var(--pico-primary-hover-background);--pico-primary-hover-underline:var(--pico-primary-hover);--pico-primary-focus:rgba(163, 158, 143, 0.375);--pico-primary-inverse:#000;--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.5rem rgba(0, 0, 0, 0.25);--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(163, 158, 143, 0.1875);--pico-muted-color:#7b8495;--pico-muted-border-color:#202632;--pico-primary:#a39e8f;--pico-primary-background:#ccc6b4;--pico-primary-border:var(--pico-primary-background);--pico-primary-underline:rgba(163, 158, 143, 0.5);--pico-primary-hover:#beb8a7;--pico-primary-hover-background:#dad4c2;--pico-primary-hover-border:var(--pico-primary-hover-background);--pico-primary-hover-underline:var(--pico-primary-hover);--pico-primary-focus:rgba(163, 158, 143, 0.375);--pico-primary-inverse:#000;--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.5rem rgba(0, 0, 0, 0.25);--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)}[type=checkbox],[type=radio],[type=range],progress{accent-color:var(--pico-primary)}*,::after,::before{box-sizing:border-box;background-repeat:no-repeat}::after,::before{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}body{width:100%;margin:0}main{display:block}body>footer,body>header,body>main{padding-block:var(--pico-block-spacing-vertical)}section{margin-bottom:var(--pico-block-spacing-vertical)}.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{grid-column-gap:var(--pico-grid-column-gap);grid-row-gap:var(--pico-grid-row-gap);display:grid;grid-template-columns:1fr}@media (min-width:768px){.grid{grid-template-columns:repeat(auto-fit,minmax(0%,1fr))}}.grid>*{min-width:0}.overflow-auto{overflow:auto}b,strong{font-weight:bolder}sub,sup{position:relative;font-size:.75em;line-height:0;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.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) * .25)}:where(dl,ol,ul) :where(dl,ol,ul){margin:0;margin-top:calc(var(--pico-typography-spacing-vertical) * .25)}ul li{list-style:square}mark{padding:.125rem .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:.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) * .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)}:where(a:not([role=button])),[role=link]{--pico-color:var(--pico-primary);--pico-background-color:transparent;--pico-underline:var(--pico-primary-underline);outline:0;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{margin:0;overflow:visible;font-family:inherit;text-transform:none}[type=button],[type=reset],[type=submit],button{-webkit-appearance:button}[role=button],[type=button],[type=file]::file-selector-button,[type=reset],[type=submit],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:0;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)}[role=button]:is(:hover,:active,:focus),[role=button]:is([aria-current]:not([aria-current=false])),[type=button]:is(:hover,:active,:focus),[type=button]:is([aria-current]:not([aria-current=false])),[type=file]::file-selector-button:is(:hover,:active,:focus),[type=file]::file-selector-button:is([aria-current]:not([aria-current=false])),[type=reset]:is(:hover,:active,:focus),[type=reset]:is([aria-current]:not([aria-current=false])),[type=submit]:is(:hover,:active,:focus),[type=submit]:is([aria-current]:not([aria-current=false])),button:is(:hover,:active,:focus),button:is([aria-current]:not([aria-current=false])){--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)}[role=button]:focus,[role=button]: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,[type=reset]:focus,[type=reset]:is([aria-current]:not([aria-current=false])):focus,[type=submit]:focus,[type=submit]:is([aria-current]:not([aria-current=false])):focus,button:focus,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=button],[type=reset],[type=submit]{margin-bottom:var(--pico-spacing)}:is(button,[type=submit],[type=button],[role=button]).secondary,[type=file]::file-selector-button,[type=reset]{--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=file]::file-selector-button:is([aria-current]:not([aria-current=false]),:hover,:active,:focus),[type=reset]: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=file]::file-selector-button:focus,[type=file]::file-selector-button:is([aria-current]:not([aria-current=false])):focus,[type=reset]:focus,[type=reset]: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:.5;pointer-events:none}:where(table){width:100%;border-collapse:collapse;border-spacing:0;text-indent:0}td,th{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 td,tfoot th{border-top:var(--pico-border-width) solid var(--pico-table-border-color);border-bottom:0}table.striped tbody tr:nth-child(odd) td,table.striped tbody tr:nth-child(odd) th{background-color:var(--pico-table-row-stripped-background-color)}: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,kbd,pre,samp{font-size:.875em;font-family:var(--pico-font-family)}pre code{font-size:inherit;font-family:inherit}pre{-ms-overflow-style:scrollbar;overflow:auto}code,kbd,pre{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:.375rem}pre{display:block;margin-bottom:var(--pico-spacing);overflow-x:auto}pre>code{display:block;padding:var(--pico-spacing);background:0 0;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{display:block;margin:0;padding:0}figure figcaption{padding:calc(var(--pico-spacing) * .5) 0;color:var(--pico-muted-color)}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}input,optgroup,select,textarea{margin:0;font-size:1rem;line-height:var(--pico-line-height);font-family:inherit;letter-spacing:inherit}input{overflow:visible}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:0}:-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}fieldset legend,label{display:block;margin-bottom:calc(var(--pico-spacing) * .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) * .5)}button[type=submit],input:not([type=checkbox],[type=radio]),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:0;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)}:where(select,textarea):not([readonly]):is(:active,:focus),input:not([type=submit],[type=button],[type=reset],[type=checkbox],[type=radio],[readonly]):is(:active,:focus){--pico-background-color:var(--pico-form-element-active-background-color)}:where(select,textarea):not([readonly]):is(:active,:focus),input:not([type=submit],[type=button],[type=reset],[role=switch],[readonly]):is(:active,:focus){--pico-border-color:var(--pico-form-element-active-border-color)}:where(select,textarea):not([readonly]):focus,input:not([type=submit],[type=button],[type=reset],[type=range],[type=file],[readonly]):focus{--pico-box-shadow:0 0 0 var(--pico-outline-width) var(--pico-form-element-focus-color)}:where(fieldset[disabled]) :is(input:not([type=submit],[type=button],[type=reset]),select,textarea),input:not([type=submit],[type=button],[type=reset])[disabled],label[aria-disabled=true],select[disabled],textarea[disabled]{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 .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 .75rem}input::-webkit-input-placeholder,input::placeholder,select:invalid,textarea::-webkit-input-placeholder,textarea::placeholder{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 .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 .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 .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) * -.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) * .25)}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:-.125em;margin-inline-end:.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:.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:.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:.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 .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:active[aria-invalid=true],[type=checkbox]:checked:focus[aria-invalid=true],[type=checkbox]:checked[aria-invalid=true],[type=checkbox][role=switch]:checked:active[aria-invalid=true],[type=checkbox][role=switch]:checked:focus[aria-invalid=true],[type=checkbox][role=switch]:checked[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=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,[type=radio][aria-invalid=false]:checked,[type=radio][aria-invalid=false]:checked:active,[type=radio][aria-invalid=false]:checked:focus{--pico-border-color:var(--pico-form-element-valid-border-color)}[type=checkbox]:checked:active[aria-invalid=true],[type=checkbox]:checked:focus[aria-invalid=true],[type=checkbox]:checked[aria-invalid=true],[type=checkbox][role=switch]:checked:active[aria-invalid=true],[type=checkbox][role=switch]:checked:focus[aria-invalid=true],[type=checkbox][role=switch]:checked[aria-invalid=true],[type=radio]:checked:active[aria-invalid=true],[type=radio]:checked:focus[aria-invalid=true],[type=radio]:checked[aria-invalid=true]{--pico-border-color:var(--pico-form-element-invalid-border-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) * .5)}[type=color]::-moz-color-swatch{border:0;border-radius:calc(var(--pico-border-radius) * .5)}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}[type=file]{--pico-color:var(--pico-muted-color);margin-left:calc(var(--pico-outline-width) * -1);padding:calc(var(--pico-form-element-spacing-vertical) * .5) 0;padding-left:var(--pico-outline-width);border:0;border-radius:0;background:0 0}[type=file]::file-selector-button{margin-right:calc(var(--pico-spacing)/ 2);padding:calc(var(--pico-form-element-spacing-vertical) * .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)}[type=range]{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:100%;height:1.25rem;background:0 0}[type=range]::-webkit-slider-runnable-track{width:100%;height:.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:.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:.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:-.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:-.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:-.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: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) + .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 .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 .75rem}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) * .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:0}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);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)}article>footer,article>header{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) * .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)}details.dropdown{position:relative;border-bottom:none}details.dropdown summary::after,details.dropdown>a::after,details.dropdown>button::after{display:block;width:1rem;height:calc(1rem * var(--pico-line-height,1.5));margin-inline-start:.25rem;float:right;transform:rotate(0) translateX(.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:0}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(0) translateX(0)}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) * .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) * .5)}details.dropdown summary+ul li:last-of-type{margin-bottom:calc(var(--pico-form-element-spacing-vertical) * .5)}details.dropdown summary+ul li a{display:block;margin:calc(var(--pico-form-element-spacing-vertical) * -.5) calc(var(--pico-form-element-spacing-horizontal) * -1);padding:calc(var(--pico-form-element-spacing-vertical) * .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:active,details.dropdown summary+ul li a:focus,details.dropdown summary+ul li a:focus-visible,details.dropdown summary+ul li a:hover,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:0 0;content:"";cursor:default}label>details.dropdown{margin-top:calc(var(--pico-spacing) * .25)}[role=group],[role=search]{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 transparent);vertical-align:middle;transition:box-shadow var(--pico-transition)}[role=group] input:not([type=checkbox],[type=radio]),[role=group] select,[role=group]>*,[role=search] input:not([type=checkbox],[type=radio]),[role=search] select,[role=search]>*{position:relative;flex:1 1 auto;margin-bottom:0}[role=group] input:not([type=checkbox],[type=radio]):not(:first-child),[role=group] select:not(:first-child),[role=group]>:not(:first-child),[role=search] input:not([type=checkbox],[type=radio]):not(:first-child),[role=search] select:not(:first-child),[role=search]>:not(:first-child){margin-left:0;border-top-left-radius:0;border-bottom-left-radius:0}[role=group] input:not([type=checkbox],[type=radio]):not(:last-child),[role=group] select:not(:last-child),[role=group]>:not(:last-child),[role=search] input:not([type=checkbox],[type=radio]):not(:last-child),[role=search] select:not(:last-child),[role=search]>:not(:last-child){border-top-right-radius:0;border-bottom-right-radius:0}[role=group] input:not([type=checkbox],[type=radio]):focus,[role=group] select:focus,[role=group]>:focus,[role=search] input:not([type=checkbox],[type=radio]):focus,[role=search] select:focus,[role=search]>:focus{z-index:2}[role=group] [role=button]:not(:first-child),[role=group] [type=button]:not(:first-child),[role=group] [type=reset]:not(:first-child),[role=group] [type=submit]:not(:first-child),[role=group] button:not(:first-child),[role=group] input:not([type=checkbox],[type=radio]):not(:first-child),[role=group] select:not(:first-child),[role=search] [role=button]:not(:first-child),[role=search] [type=button]:not(:first-child),[role=search] [type=reset]:not(:first-child),[role=search] [type=submit]:not(:first-child),[role=search] button:not(:first-child),[role=search] input:not([type=checkbox],[type=radio]):not(:first-child),[role=search] select:not(:first-child){margin-left:calc(var(--pico-border-width) * -1)}[role=group] [role=button],[role=group] [type=button],[role=group] [type=reset],[role=group] [type=submit],[role=group] button,[role=search] [role=button],[role=search] [type=button],[role=search] [type=reset],[role=search] [type=submit],[role=search] button{width:auto}@supports selector(:has(*)){[role=group]:has(button:focus,[type=submit]:focus,[type=button]:focus,[role=button]:focus),[role=search]: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=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,[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{border-color:transparent}[role=group]:has(input:not([type=submit],[type=button]):focus,select:focus),[role=search]:has(input:not([type=submit],[type=button]):focus,select:focus){--pico-group-box-shadow:var(--pico-group-box-shadow-focus-with-input)}[role=group]:has(input:not([type=submit],[type=button]):focus,select:focus) [role=button],[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) [type=submit],[role=group]:has(input:not([type=submit],[type=button]):focus,select:focus) button,[role=search]:has(input:not([type=submit],[type=button]):focus,select:focus) [role=button],[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) [type=submit],[role=search]:has(input:not([type=submit],[type=button]):focus,select:focus) 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=group] [role=button]:focus,[role=group] [type=button]:focus,[role=group] [type=reset]:focus,[role=group] [type=submit]:focus,[role=group] button:focus,[role=search] [role=button]:focus,[role=search] [type=button]:focus,[role=search] [type=reset]:focus,[role=search] [type=submit]:focus,[role=search] 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}[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:-.125em}[aria-busy=true]:not(input,select,textarea,html):not(:empty)::before{margin-inline-end:calc(var(--pico-spacing) * .5)}[aria-busy=true]:not(input,select,textarea,html):empty{text-align:center}[role=button][aria-busy=true],[type=button][aria-busy=true],[type=reset][aria-busy=true],[type=submit][aria-busy=true],a[aria-busy=true],button[aria-busy=true]{pointer-events:none}: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:100%;height:inherit;min-height:100%;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 [role=button],dialog article>footer button{margin-bottom:0}dialog article>footer [role=button]:not(:first-of-type),dialog article>footer button:not(:first-of-type){margin-left:calc(var(--pico-spacing) * .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:.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,0);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:.2s;animation-timing-function:ease-in-out;animation-fill-mode:both}:where(.modal-is-opening,.modal-is-closing) dialog{animation-duration:.8s;animation-name:modal-overlay}:where(.modal-is-opening,.modal-is-closing) dialog>article{animation-delay:.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}}: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 [role=button],nav li [type=button],nav li 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 li,aside nav,aside ol,aside ul{display:block}aside li{padding:calc(var(--pico-nav-element-spacing-vertical) * .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{display:inline-block;vertical-align:baseline}progress{-webkit-appearance:none;-moz-appearance:none;display:inline-block;appearance:none;width:100%;height:.5rem;margin-bottom:calc(var(--pico-spacing) * .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:0 0}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}}[data-tooltip]{position:relative}[data-tooltip]:not(a,button,input){border-bottom:1px dotted;text-decoration:none;cursor:help}[data-tooltip]::after,[data-tooltip]::before,[data-tooltip][data-placement=top]::after,[data-tooltip][data-placement=top]::before{display:block;z-index:99;position:absolute;bottom:100%;left:50%;padding:.25rem .5rem;overflow:hidden;transform:translate(-50%,-.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:.875rem;text-decoration:none;text-overflow:ellipsis;white-space:nowrap;opacity:0;pointer-events:none}[data-tooltip]::after,[data-tooltip][data-placement=top]::after{padding:0;transform:translate(-50%,0);border-top:.3rem solid;border-right:.3rem solid transparent;border-left:.3rem solid transparent;border-radius:0;background-color:transparent;content:"";color:var(--pico-tooltip-background-color)}[data-tooltip][data-placement=bottom]::after,[data-tooltip][data-placement=bottom]::before{top:100%;bottom:auto;transform:translate(-50%,.25rem)}[data-tooltip][data-placement=bottom]:after{transform:translate(-50%,-.3rem);border:.3rem solid transparent;border-bottom:.3rem solid}[data-tooltip][data-placement=left]::after,[data-tooltip][data-placement=left]::before{top:50%;right:100%;bottom:auto;left:auto;transform:translate(-.25rem,-50%)}[data-tooltip][data-placement=left]:after{transform:translate(.3rem,-50%);border:.3rem solid transparent;border-left:.3rem solid}[data-tooltip][data-placement=right]::after,[data-tooltip][data-placement=right]::before{top:50%;right:auto;bottom:auto;left:100%;transform:translate(.25rem,-50%)}[data-tooltip][data-placement=right]:after{transform:translate(-.3rem,-50%);border:.3rem solid transparent;border-right:.3rem solid}[data-tooltip]:focus::after,[data-tooltip]:focus::before,[data-tooltip]:hover::after,[data-tooltip]:hover::before{opacity:1}@media (hover:hover) and (pointer:fine){[data-tooltip]:focus::after,[data-tooltip]:focus::before,[data-tooltip]:hover::after,[data-tooltip]:hover::before{--pico-tooltip-slide-to:translate(-50%, -0.25rem);transform:translate(-50%,.75rem);animation-duration:.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%,-.25rem);animation-name:tooltip-caret-slide}[data-tooltip][data-placement=bottom]:focus::after,[data-tooltip][data-placement=bottom]:focus::before,[data-tooltip][data-placement=bottom]:hover::after,[data-tooltip][data-placement=bottom]:hover::before{--pico-tooltip-slide-to:translate(-50%, 0.25rem);transform:translate(-50%,-.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%,-.5rem);animation-name:tooltip-caret-slide}[data-tooltip][data-placement=left]:focus::after,[data-tooltip][data-placement=left]:focus::before,[data-tooltip][data-placement=left]:hover::after,[data-tooltip][data-placement=left]:hover::before{--pico-tooltip-slide-to:translate(-0.25rem, -50%);transform:translate(.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(.05rem,-50%);animation-name:tooltip-caret-slide}[data-tooltip][data-placement=right]:focus::after,[data-tooltip][data-placement=right]:focus::before,[data-tooltip][data-placement=right]:hover::after,[data-tooltip][data-placement=right]:hover::before{--pico-tooltip-slide-to:translate(0.25rem, -50%);transform:translate(-.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(-.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}}[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}[tabindex],a,area,button,input,label,select,summary,textarea{-ms-touch-action:manipulation}[dir=rtl]{direction:rtl}@media (prefers-reduced-motion:reduce){:not([aria-busy=true]),:not([aria-busy=true])::after,:not([aria-busy=true])::before{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}} \ No newline at end of file diff --git a/html/themes/pico-sand/index.php b/html/themes/pico-sand/index.php new file mode 100644 index 000000000..e1bf991c3 --- /dev/null +++ b/html/themes/pico-sand/index.php @@ -0,0 +1,1351 @@ + + + + + + + + XCL Theme built with PicoCSS for XOOPSCube + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ +
+ + +
+ +
+

Web Application Platform

+

Just Use it!

+
+ +
+
+
+
Integrate responsive frameworks and libraries in your Modules and Themes, simple customize a template set.
+
+
+

Content Management System, Cache, Duplicatable Modules (multisites), User Groups Management, Themes, built-in Search.

+
+
+
+ +
+
+
Scalability is the property of a system to handle a growing amount of work by adding resources to the system. 
+
+
+

Scalability without costly contracts, hosting cloud hidden costs, limitations or restrictions. Self-hosted and local first.

+
+
+
+ +
+
+
A secure and modular architecture design with self-contained components known as modules. 
+
+
+
Each module encapsulates a specific functionality, operates independently, and can be developed, maintained, and reused safely.
+
+
+ +
+ +
+ + +
+ + + + +
+ +
+

Default theme layout

+The placeholders for the content and blocks are defined by the theme layout. +
+ You can create a custom center-block-left to trigger a component display on the Top page
+ Add to the Block Title a prefix "top-" and select the target "Toppage".
+ +
+

Header Nav

+
+
+
Logo
+
User menu  Light | Dark
+
+
+

Component top center

+
+
grid-column
center-block-left
Block Title prefix: top-
+
grid-column
center-block-center
Block Title prefix: top-
+
grid-column
center-block-right
Block Title prefix: top-
+
+
+

Main container

+
+
aside nav
Side-Left
Default Blocks:
  • User Menu
  • Main Menu
  • Themes
+
div.content
App Start Page [template]
or
Module Content
+
+ aside nav +
Side-Right +
Block-Right and for Admin Panel a Block Title with prefix 'admin' +
+
+
+

Section container-fluid

+
+
grid-column
center-block-left
+
grid-column
center-block-left
+
grid-column
center-block-left
+
+
+
Footer
+
+ +
+ +
+

Top Page Center Blocks

+ +
    +
  1. Browse to Admin > Block Management > Add Custom Block +
  2. Give the Block Title e.g. top-none-myblock
    +the prefix top- with none- only show the block content +
  3. Select the side Center (left, center, right) +
  4. Write some content +
  5. Select Target Modules : Toppage
    6. +
  6. Select Target Groups : check all groups and submit
    7. +
+
+ + +

Pico

+

A pure HTML example, without dependencies.

+ + + +
+

Accordions

+
+ Accordion 1 +

+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque urna diam, + tincidunt nec porta sed, auctor id velit. Etiam venenatis nisl ut orci consequat, vitae + tempus quam commodo. Nulla non mauris ipsum. Aliquam eu posuere orci. Nulla convallis + lectus rutrum quam hendrerit, in facilisis elit sollicitudin. Mauris pulvinar pulvinar + mi, dictum tristique elit auctor quis. Maecenas ac ipsum ultrices, porta turpis sit + amet, congue turpis. +

+
+
+ Accordion 2 +
    +
  • Vestibulum id elit quis massa interdum sodales.
    • +
  • Nunc quis eros vel odio pretium tincidunt nec quis neque.
    • +
  • Quisque sed eros non eros ornare elementum.
    • +
  • Cras sed libero aliquet, porta dolor quis, dapibus ipsum.
    • +
+
+
+ + +
+
+

Article

+ header +
+

+ Content paragraph - Nullam dui arcu, malesuada et sodales eu, efficitur vitae dolor. Sed ultricies dolor non + ante vulputate hendrerit. Vivamus sit amet suscipit sapien. Nulla iaculis eros a elit + pharetra egestas. Nunc placerat facilisis cursus. Sed vestibulum metus eget dolor pharetra + rutrum. +

+
+ Footer - Duis nec elit placerat, suscipit nibh quis, finibus neque. +
+
+ + +
+

Buttons

+

+ + + +

+

+ + + +

+
+ + +
+
+

Form elements

+ + + + + + + + + Curabitur consequat lacus at lacus porta finibus. + + + + + + + + + + + + +
+ + + +
+ +
+ + + + + + + + +
+ +
+ +
+ Checkboxes + + +
+ + +
+ Radio buttons + + +
+ + +
+ Switches + + +
+
+ + + + +
+
+ + +
+

Group

+
+
+ + +
+
+
+ + +
+

Loading

+
+ +
+ + + + + +
+

Preview

+

+ Sed ultricies dolor non ante vulputate hendrerit. Vivamus sit amet suscipit sapien. Nulla + iaculis eros a elit pharetra egestas. +

+
+
+ + + +
+
+ +
+
+
+ + +
+

Progress bar

+ + +
+ + +
+

Tables

+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
#HeadingHeadingHeadingHeadingHeadingHeadingHeading
1CellCellCellCellCellCellCell
2CellCellCellCellCellCellCell
3CellCellCellCellCellCellCell
+
+
+ + +
+

Typography

+

+ Aliquam lobortis vitae nibh nec rhoncus. Morbi mattis neque eget efficitur feugiat. + Vivamus porta nunc a erat mattis, mattis feugiat turpis pretium. Quisque sed tristique + felis. +

+ + +
+ "Maecenas vehicula metus tellus, vitae congue turpis hendrerit non. Nam at dui sit amet + ipsum cursus ornare." +
+ - Phasellus eget lacinia +
+
+ + +

Lists

+
    +
  • Aliquam lobortis lacus eu libero ornare facilisis.
    • +
  • Nam et magna at libero scelerisque egestas.
    • +
  • Suspendisse id nisl ut leo finibus vehicula quis eu ex.
    • +
  • Proin ultricies turpis et volutpat vehicula.
    • +
+ + +

Inline text elements

+
+

Primary link

+

+ Secondary link +

+

+ Contrast link +

+
+
+

Bold

+

Italic

+

Underline

+
+
+

Deleted

+

Inserted

+

Strikethrough

+
+
+

Small

+

Text Sub

+

Text Sup

+
+
+

+ Abbr. +

+

Kbd

+

Highlighted

+
+ + +

Heading 3

+

+ Integer bibendum malesuada libero vel eleifend. Fusce iaculis turpis ipsum, at efficitur + sem scelerisque vel. Aliquam auctor diam ut purus cursus fringilla. Class aptent taciti + sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. +

+

Heading 4

+

+ Cras fermentum velit vitae auctor aliquet. Nunc non congue urna, at blandit nibh. Donec ac + fermentum felis. Vivamus tincidunt arcu ut lacus hendrerit, eget mattis dui finibus. +

+
Heading 5
+

+ Donec nec egestas nulla. Sed varius placerat felis eu suscipit. Mauris maximus ante in + consequat luctus. Morbi euismod sagittis efficitur. Aenean non eros orci. Vivamus ut diam + sem. +

+
Heading 6
+

+ Ut sed quam non mauris placerat consequat vitae id risus. Vestibulum tincidunt nulla ut + tortor posuere, vitae malesuada tortor molestie. Sed nec interdum dolor. Vestibulum id + auctor nisi, a efficitur sem. Aliquam sollicitudin efficitur turpis, sollicitudin + hendrerit ligula semper id. Nunc risus felis, egestas eu tristique eget, convallis in + velit. +

+ + +
+ + + + + + + + + + + + Legacy to Remind Us of Where We Come From + +
+ Image from + SVG Image +
+
+
+ + +
+ + + + + + +
+ + + +
+ +

jQuery UI

+ +
+

Accordion

+ +
+

Section 1

+
+

+ Mauris mauris ante, blandit et, ultrices a, suscipit eget, quam. Integer + ut neque. Vivamus nisi metus, molestie vel, gravida in, condimentum sit + amet, nunc. Nam a nibh. Donec suscipit eros. Nam mi. Proin viverra leo ut + odio. Curabitur malesuada. Vestibulum a velit eu ante scelerisque vulputate. +

+
+

Section 2

+
+

+ Sed non urna. Donec et ante. Phasellus eu ligula. Vestibulum sit amet + purus. Vivamus hendrerit, dolor at aliquet laoreet, mauris turpis porttitor + velit, faucibus interdum tellus libero ac justo. Vivamus non quam. In + suscipit faucibus urna. +

+
+

Section 3

+
+

+ Nam enim risus, molestie et, porta ac, aliquam ac, risus. Quisque lobortis. + Phasellus pellentesque purus in massa. Aenean in pede. Phasellus ac libero + ac tellus pellentesque semper. Sed ac felis. Sed commodo, magna quis + lacinia ornare, quam ante aliquam nisi, eu iaculis leo purus venenatis dui. +

+
    +
  • List item one
    • +
  • List item two
    • +
  • List item three
    • +
+
+

Section 4

+
+

+ Cras dictum. Pellentesque habitant morbi tristique senectus et netus + et malesuada fames ac turpis egestas. Vestibulum ante ipsum primis in + faucibus orci luctus et ultrices posuere cubilia Curae; Aenean lacinia + mauris vel est. +

+

+ Suspendisse eu nisl. Nullam ut libero. Integer dignissim consequat lectus. + Class aptent taciti sociosqu ad litora torquent per conubia nostra, per + inceptos himenaeos. +

+
+
+
+ + +
+
+ +
+ + +

Button Widget with icons

+
+ + + + + + +
+
+ +
+

Button - Widget

+ +
+ + + An anchor +
+
+ +
+

CSS Buttons

+
+ + + An anchor +
+
+ +
+ +
+ + + +
+

Checkbox and radio button widgets

+ + +
+
+ Rental Car +
+ + + + + + + + + + +
+
+
+ +
+ + +
+

Progress bar

+ + +
+
Starting download...
+
+
+ + +
+ + +
+

Datepicker

+ +
+ Date:
+
+
+ + +
+

Dialog

+ +
+

This is an animated dialog which is useful for displaying information. The dialog window can be moved, resized and closed with the 'x' icon.

+
+ + +
+ + +
+ +
+

Menu

+ + +
+ +
+

Menu Categories

+ + + + +
+ +
+

Menu Icons

+ + + +
+ +
+ + +
+ + +
+

select menu

+
+ +
+ + + + + + + + + + + +
+ +
+ +
+ +
+

PicoSS Dropdown

+ +
+ Dropdown + +
+ + + +
+
+ + +
+ + +
+ +

Block-center - Grid

+ +
+
+

block-center-left

+
+
block title
+

content

+
+
+
+

block-center-center

+
+
block title
+

content

+
+
+
+

block-center-rigth

+
+
block title
+

content

+
+
+
+ +
+
+
+
block title
+

content

+
+
+
+
+
block title
+

content

+
+
+
+
+
block title
+

content

+
+
+
+
+ + + + + + + +
+
+ +

Confirm your action!

+
+

+ Cras sit amet maximus risus. Pellentesque sodales odio sit amet augue finibus + pellentesque. Nullam finibus risus non semper euismod. +

+ +
+ + + + + +
+ + + + + + +
+ + + + + \ No newline at end of file diff --git a/html/themes/pico-sand/js/index.html b/html/themes/pico-sand/js/index.html new file mode 100644 index 000000000..990cbd603 --- /dev/null +++ b/html/themes/pico-sand/js/index.html @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/html/themes/pico-sand/js/plugins.js b/html/themes/pico-sand/js/plugins.js new file mode 100644 index 000000000..e36d8d7f3 --- /dev/null +++ b/html/themes/pico-sand/js/plugins.js @@ -0,0 +1,242 @@ +/* + * XCL Theme Pico Sand built with PicoCSS v206 + * + * @version 2.4.0 + * @update 2024-04-20 + * @Date 2024-02-02 + * @author Nuno Luciano ( https://github.com/gigamaster ) + * @copyright (c) 2005-2024 The XOOPSCube Project, authors + * @license MIT + * @link https://github.com/xoopscube + * + * + * 1. Theme Switcher + * 2. Modal + * -- jQuery Document Ready - helper plugins + * 3. Render SVG + * 4. Notification Time + * 5. Dropdown - block options, menu, etc + * 6. Close on click document + * 7. Highlight Message nav-tab active + * 8.1 remove border + * 8.2 url constructor + * 9. Aria-busy Toogle + */ + +/* + * 1. Minimal theme switcher Pico.css - https://picocss.com + * Copyright 2019-2024 - Licensed under MIT + */ +const themeSwitcher = { + // Config + _scheme: "auto", + menuTarget: "details.dropdown", + buttonsTarget: "a[data-theme-switcher]", + buttonAttribute: "data-theme-switcher", + rootAttribute: "data-theme", + localStorageKey: "picoPreferredColorScheme", + + // Init + init() { + this.scheme = this.schemeFromLocalStorage; + this.initSwitchers(); + }, + + // Get color scheme from local storage + get schemeFromLocalStorage() { + return window.localStorage?.getItem(this.localStorageKey) ?? this._scheme; + }, + + // Preferred color scheme + get preferredColorScheme() { + return window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light"; + }, + + // Init switchers + initSwitchers() { + const buttons = document.querySelectorAll(this.buttonsTarget); + buttons.forEach((button) => { + button.addEventListener( + "click", + (event) => { + event.preventDefault(); + // Set scheme + this.scheme = button.getAttribute(this.buttonAttribute); + // Close dropdown + document.querySelector(this.menuTarget)?.removeAttribute("open"); + }, + false + ); + }); + }, + + // Set scheme + set scheme(scheme) { + if (scheme == "auto") { + this._scheme = this.preferredColorScheme; + } else if (scheme == "dark" || scheme == "light") { + this._scheme = scheme; + } + this.applyScheme(); + this.schemeToLocalStorage(); + }, + + // Get scheme + get scheme() { + return this._scheme; + }, + + // Apply scheme + applyScheme() { + document.querySelector("html")?.setAttribute(this.rootAttribute, this.scheme); + }, + + // Store scheme to local storage + schemeToLocalStorage() { + window.localStorage?.setItem(this.localStorageKey, this.scheme); + }, +}; + +// Init +themeSwitcher.init(); + +/* + * 2. Modal Pico.css - https://picocss.com + * Copyright 2019-2024 - Licensed under MIT + */ +// Config +const isOpenClass = "modal-is-open"; +const openingClass = "modal-is-opening"; +const closingClass = "modal-is-closing"; +const scrollbarWidthCssVar = "--pico-scrollbar-width"; +const animationDuration = 400; // ms +let visibleModal = null; + +// Toggle modal +const toggleModal = (event) => { + event.preventDefault(); + const modal = document.getElementById(event.currentTarget.dataset.target); + if (!modal) return; + modal && (modal.open ? closeModal(modal) : openModal(modal)); +}; + +// Open modal +const openModal = (modal) => { + const { documentElement: html } = document; + const scrollbarWidth = getScrollbarWidth(); + if (scrollbarWidth) { + html.style.setProperty(scrollbarWidthCssVar, `${scrollbarWidth}px`); + } + html.classList.add(isOpenClass, openingClass); + setTimeout(() => { + visibleModal = modal; + html.classList.remove(openingClass); + }, animationDuration); + modal.showModal(); +}; + +// Close modal +const closeModal = (modal) => { + visibleModal = null; + const { documentElement: html } = document; + html.classList.add(closingClass); + setTimeout(() => { + html.classList.remove(closingClass, isOpenClass); + html.style.removeProperty(scrollbarWidthCssVar); + modal.close(); + }, animationDuration); +}; + +// Close with a click outside +document.addEventListener("click", (event) => { + if (visibleModal === null) return; + const modalContent = visibleModal.querySelector("article"); + const isClickInside = modalContent.contains(event.target); + !isClickInside && closeModal(visibleModal); +}); + +// Close with Esc key +document.addEventListener("keydown", (event) => { + if (event.key === "Escape" && visibleModal) { + closeModal(visibleModal); + } +}); + +// Get scrollbar width +const getScrollbarWidth = () => { + const scrollbarWidth = window.innerWidth - document.documentElement.clientWidth; + return scrollbarWidth; +}; + +// Is scrollbar visible +const isScrollbarVisible = () => { + return document.body.scrollHeight > screen.height; +}; + + +// DOCUMENT READY - Place any jQuery/helper plugins below ! +/* ---------- ---------- ---------- ---------- ---------- */ +// Do something on document ready +$(function () { + + // 3. Inline SVG icons + $('.svg').renderClassSvg(); + + // 4. Notification Time + $('div.runtime').fadeIn( 750 ).delay( 3000 ).fadeOut( 500 ); + + // 5. Dropdown - block options, menu, etc + $(".dropdown").on("click", ".dropdown-toggle", function (event) { + event.preventDefault(); + $('.dropdown').removeClass('isopen'); + $(this).parent().toggleClass('isopen'); + }); + + // 6. Close on click document + $(document).on("click", function (event) { + var $trigger = $(".dropdown"); + if ($trigger !== event.target && !$trigger.has(event.target).length) { + $(".dropdown").removeClass("isopen"); + } + }); + + // 7. Highlight Message nav-tab active + $("#tabs-mail").tabs({ + active: false, + collapsible: true, + classes: { + "ui-tabs": "taborder" + }, + beforeActivate: function (event, ui) { + window.open($(ui.newTab).find('a').attr('href'), '_self'); + return false; + }, + } + ); + // .find('.ui-tabs-tab').removeClass('ui-corner-all ui-corner-top'); + + // 8.1 Remove border from dropdown UL children + $(".ui-tabs-tab .dropdown-content ul").children().css( "border", "0" ); + + // 8.2 url constructor + const parseUrl = new URL(window.location.href); + const msgAction = parseUrl.searchParams.get("action"); + // If module message index, highlight the first nav-tab + if (msgAction == null) { + $('#tabs-mail ul.ui-tabs-nav li:first-child').addClass('ui-state-active'); + } else { + // Highlight current action nav-tab + $('a[href="index.php?action=' + msgAction + '"]').parent('li').addClass('ui-tabs-active ui-state-active'); + } + if (msgAction == 'settings'|| msgAction == 'blacklist'){ + // Highlight dropdown menu + $('.settings ').parent('li').addClass("ui-state-active"); + } + // 9. Aria-busy Toogle + $('[aria-busy="false"]').on( "click", function(event) { + event.stopPropagation(); + event.stopImmediatePropagation(); + $(this).prop("ariaBusy", true); + }); + +}); diff --git a/html/themes/pico-sand/manifesto.ini.php b/html/themes/pico-sand/manifesto.ini.php new file mode 100644 index 000000000..a148953c6 --- /dev/null +++ b/html/themes/pico-sand/manifesto.ini.php @@ -0,0 +1,22 @@ + header { + --pico-block-spacing-vertical:0 +} +body > main { + display : grid; + grid-template-rows: 1fr; + row-gap : 2rem; + margin-bottom : calc(var(--pico-spacing) * 4); + padding : 0 +} +body > main > * { + min-width : 0; + margin-bottom : 0 +} + +body > main > article { + --pico-block-spacing-vertical: var(--pico-spacing); + --pico-block-spacing-horizontal: var(--pico-spacing); +} + +/* Body align Aside and Main */ +body > main > aside#nav-left, +body > main > aside#block-right { + margin-top : .5rem; +} +body > main > div > aside { + background : var(--pico-card-background-color); + padding : .5rem; + padding : var(--pico-nav-element-spacing-vertical) var(--pico-nav-element-spacing-horizontal); /* @todo */ + border-radius : var(--pico-border-radius); +} + +/* BODY FOOTER */ +body > footer { + display : flex; + align-items : center; + padding : 1rem 0; + justify-content : center; + flex-wrap : wrap; +} +body > footer .logos { + display : inline-flex; + padding :.25rem .5rem; + border-bottom : 1px solid var(--pico-muted-border-color) +} +body > footer .logos a { padding:.25rem; margin:.5rem 0;} +body > footer .logos svg { + width : auto; + height : 1rem; + margin-right : calc(var(--pico-spacing) * .25); + transform : translateY(-.0625rem) +} + +/* ARTICLE H* ONLY CHILD (FORM COMMENT/REPLY) */ +article header :where( h2, h3, h4 ):only-child{ + margin : var(--pico-spacing) 0; +} +article header :where( p:last-child ){ + margin-bottom : 0; +} + +/* A HREF LINK COLOR */ +[data-theme=dark] { + :is([role=button], [type=button], [type=file]::file-selector-button, [type=reset], [type=submit], + button, [type=checkbox]:checked, [type=checkbox]:checked:active, [type=checkbox]:checked:focus, + [type=radio]:checked, [type=radio]:checked:active, [type=radio]:checked:focus):not(.outline) { + /* --pico-background-color: hsl(45 70% 40% / 1); */ + } + a:hover:not([role=button]) { + color:var(--pico-secondary-inverse) + } +} +[role=link]:focus, a:focus { +--background-color : var(--pico-primary-focus); + border-radius : var(--pico-border-radius); +} +/* A LINK UNDERLINE none */ +a {--pico-text-decoration: none; border:none} +:where(a:not([role=button])):is([aria-current]:not([aria-current=false]),:hover,:active,:focus), +[role=link] :is(a,[aria-current]:not([aria-current=false]),:hover,:active,:focus) { +--pico-text-decoration: none; +--pico-primary-underline: none; +--pico-underline: none; + border:none +} +/* A LINK - ICON ONLY */ +:is(a.btn-icon) { + border-radius : var(--pico-border-radius); + box-shadow : var(--pico-box-shadow); + display : inline-flex; + justify-content : center; + font-weight : 600; + font-size : 24px; + width : 30px; + height : 28px; + opacity : .8; + transition : opacity 0.3s ease-in; +} +:is(a.btn-icon):hover { + background : var(--pico-primary-focus); + color : var(--pico-secondary-inverse); + opacity : 1; +} + +hr { margin: 2rem 1rem; } /* @todo ? */ + +/* -------------------- ARTICLE FOOTER ACTION CONTROL */ +.action-control { + align-items : center; + column-gap : 1rem; + display : flex; + flex-wrap : wrap; + justify-content : space-between; + white-space : normal; +} + +/* -------------------- BANNER */ +section[role=banner] > div > article { + border : 1px solid var(--pico-muted-border-color); + border-radius : var(--pico-border-radius); + box-shadow : var(--pico-box-shadow); + margin : calc(var(--pico-block-spacing-vertical) * 3) 0; +} +[role=banner] .advert { + background : var(--pico-code-background-color); + border : 1px dotted var(--pico-form-element-disabled-border-color); + border-radius : var(--pico-border-radius); + display : block; + padding : var(--pico-spacing); + +} +[role=banner] .banner { + padding : var(--pico-spacing); + text-align : center; +} + +/* -------------------- BREADCRUMBS - MOBILE */ + +nav[aria-label=breadcrumb] { + margin-bottom : 1rem; /* space for pico header image */ +} + +@media (max-width : 768px) { + nav[aria-label=breadcrumb] ul { + list-style-type: none; + /*font-size: 16px;*/ + margin : 0; + padding : 10px 0; + /* truncate */ + white-space : nowrap; + max-width : 100%; + overflow : hidden; + } + nav[aria-label=breadcrumb] li { + display : inline-block; + max-width : 18%; /* truncate */ + width : auto; + white-space : nowrap; + overflow : hidden; + text-overflow: ellipsis; + } + nav[aria-label=breadcrumb] li:last-child {max-width: 30%;} + nav[aria-label=breadcrumb] li:first-child:before {content: none;} + nav[aria-label=breadcrumb] li a span:hover {text-decoration: underline} + nav[aria-label=breadcrumb] li, + nav[aria-label=breadcrumb] li:last-child {display: none} + nav[aria-label=breadcrumb] li:nth-last-child(2) {display: block;max-width: 100%;} + nav[aria-label=breadcrumb] li a {text-decoration: none} + nav[aria-label=breadcrumb] li:nth-last-child(2) a:after, + nav[aria-label=breadcrumb] ul li:not(:last-child) ::after {content: '';} + nav[aria-label=breadcrumb] li:nth-last-child(2) a:before { + content : ' ↚ '; + display : inline-flex; + min-width : 5ch; + background : var(--pico-primary); + border-radius:var(--pico-border-radius); + color : var(--pico-primary-inverse); + margin-right: .5rem; + place-content: center; + } + nav[aria-label=breadcrumb] li:nth-last-child(2):before {content: none} + + section.block-center { + background : var(--pico-contrast-inverse); + border : var(--pico-muted-border-color); + margin-bottom: 0; + padding : calc(var(--pico-spacing) * 1) calc(var(--pico-spacing) * 1); + } +} + +/* -------------------- BADGE & BUTTONS */ +.badge { + background : hsla(205, 15%, 40%, 0.25); + border-radius : var(--pico-border-radius); + font-size : 12px; + min-width : 3ch; + display : inline-block; + padding : 0 0.5rem;vertical-align: baseline; +} + +/* article h3 :is(.badge){font-size: 14px; } */ +:is(article, hgroup, .list-content) h3, h4, .block-title { + display : flex; + flex-wrap : wrap; + justify-content : space-between; + width : 100%; + align-items : baseline; +} + +/* BUTTON ACTION */ +:is(.delete) { + color : var(--pico-del-color); + border-color : var(--pico-del-color); +} +:is(button.vote) { + margin-bottom : 0; +} +:where([type=submit],[type=button],[role=button]) svg { + display : inline; + margin : 0 .25rem 0; + vertical-align: -.175em; +} + +:where(footer.action-control, footer div.grid) +:is(div, button, input[type=submit],input[type=button],[role=button], details.dropdown, input, a):not(summary) { + margin-bottom : 0; + white-space : nowrap; +} +:where(footer.action-control) :is(a) { + border-radius : var(--pico-border-radius); + margin : 0 .5em; + padding : .25rem; +} +:where(footer.action-control) :is(a, button[type=submit]):hover { + background : var(--pico-primary-focus); + color : var(--pico-secondary-inverse); +} + +/* -------------------- BLOCKS */ +/* BLOCKS - Title */ +[class^="block-title"] { + color : var(--pico-muted-color); + font-weight : var(--pico-font-weight); + font-size : 1rem; + line-height : 1rem; + justify-content : space-between; + flex-wrap : nowrap; + margin-bottom : var(--pico-typography-spacing-vertical); + padding : 0; +} +[class^="block-title"] a { + display : inline-block; + width : 100%; +} +[class^="block-title"]:hover a { +--text-decoration : none; + color :var(--pico-primary-inverse); +} +[class^="block-title"]:hover { + background-position: 100% 100%; + background-size : 200% 100%; + text-decoration : none; + transition : background-size .3s .3s, background-position .3s; +} +/* BLOCKS - Content */ +[class="block-content"] { + margin-bottom : var(--pico-typography-spacing-vertical); +} +[class="block-content"] > ul { + padding : 0; +} +/* BLOCKS - MAIN MENU. SUB, MESSAGE */ +.menu-sub { + padding-left : 2.25rem; +} +/* BLOCK - PRIVATE MESSAGE */ +.block-messages ul#privatemessages { + flex-direction : column; + width : 100%; +} +.block-messages ul#privatemessages li { + padding : calc(var(--pico-nav-element-spacing-vertical) * .5) var(--pico-nav-element-spacing-horizontal); + width : inherit; +} +.block-messages ul#privatemessages li a { + display : inherit; +} +/* BLOCK - LIST MEMBERS */ +/* USERS ONLINE, SITE INFO */ +ul.list-column { + border-left : 4px solid var(--pico-muted-border-color); + column-count : 3; + column-width : 140px; + column-gap : 1.5rem; + column-rule : 4px solid var(--pico-muted-border-color); + margin : 1rem 0; + padding : 1rem; +} +ul.list-column li { + list-style : none; + margin-bottom :.5rem +} +ul.list-column li > h6 { + font-size : 16px; column-span: all; +} + +/* -------------------- ICONS */ +[class^="i-"] { + padding : .25rem .5rem +} +i[class^="i-"], +:is(span.icon, i.icon) { + padding-right : .5rem; +} + +summary[role="link"].contrast:is([aria-current],:hover,:active,:focus) { + background-color: transparent; + color : var(--pico-contrast-hover); +} + +/* -------------------- SEARCH FORM - PicoCSS default pill: 5rem */ + +[role=search]>:last-child { + border-top-right-radius: 1rem; + border-bottom-right-radius: 1rem; +} +[role=search]>:first-child { + border-top-left-radius: 1rem; + border-bottom-left-radius: 1rem; +} + +/* -------------------- TABLE - FONT-SIZE IN BLOCKS */ +[class^="block-"] table tbody, tfoot { + font-size : 14px; +} + +/* -------------------- TEXT SELECTION */ +::-moz-selection{background-color:var(--pico-primary);color:var(--pico-primary-inverse)} +::selection{background-color:var(--pico-primary);color:var(--pico-primary-inverse)} + +/* -------------------- TOOLTIP */ + +[data-tooltip] { + border-bottom-color: var( + --pico-border-color + ) +} +[data-tooltip]:after, main [data-tooltip]:before { + font-size : 12px +} + +/* -------------------- TYPOGRAPHY - FONT SIZE & SCALE */ +/* HEADING */ +h1, h2, h3, h4, h5 { +--font-weight: 400; + font-weight : var(--font-weight); + position : relative; +} +h1,h2,h3 { + font-family: "Nunito", sans-serif; + font-optical-sizing: auto; + font-weight: 400; + font-style: normal; +} + +p { text-wrap: pretty } + +@media (min-width: 576px) { :root { --pico-font-size: 106.25%; } } +@media (min-width: 768px) { :root { --pico-font-size: 112.5%; /* 18px */}} +@media (min-width: 1024px) { :root { --pico-font-size: 1rem; }} +@media (min-width: 1280px) { :root { --pico-font-size: 1rem; }} +@media (min-width: 1536px) { :root { --pico-font-size: 112.5%; /* 18px */}} + +/* -------------------- WRAPPER - GRID */ +/* -------------------- MEDIA QUERIES - desktop, tablet, mobile + CSS override PicoSS rules and specificity */ +@media(max-width: 576px) { + [role=button], [type=button], [type=file]::file-selector-button, [type=reset], [type=submit], button { + --pico-form-element-spacing-horizontal: 1.5rem; + } + [role=group] [role=button], [role=group] [type=button], [role=group] [type=submit], [role=group] button, [role=search] [role=button], [role=search] [type=button], [role=search] [type=submit], [role=search] button { + --pico-form-element-spacing-horizontal: 1.5rem; + } +} +@media screen and (max-width: 1024px) { + body>main>aside#nav-left, body>main>aside#block-right { + --pico-font-size: 1rem; /* 16px - 18px picocss */ + font-size: var(--pico-font-size); + margin-top: 0; + } + [data-self~="sm-hide"] {display:none!important}/* only show icon and hide text */ + + aside#nav-left { + position: fixed; + top: 0; + left: 0; + width: 240px; + height: 100%; + padding: .25em var(--pico-block-spacing-horizontal); + background: var(--pico-card-background-color); + box-shadow: var(--pico-card-box-shadow); + overflow-y: auto; + z-index: var(--z-above); + } + aside#nav-left { + transform: translate3d(0, 0, 0) translateX(-240px); + transition: all 0.25s cubic-bezier(0.16, 0.63, 0.45, 0.98); + } + aside#nav-left:target { + transform: translate3d(0, 0, 0) translateX(0); + } + .nav-open { + display: block; + position:absolute; + left: 18px; + top: 10px; + } + aside#nav-left .nav-close { + display: block; + height: 36px; + display: block; + cursor: pointer; + position: sticky; + left: 180px; + top: 10px; + width: fit-content; + width: -moz-fit-content; + + z-index: var(--z-sticky); + } +} +@media(min-width: 1024px) { + html { + scroll-padding-top:calc(var(--pico-header-height) + 2rem - .375rem) + } + [data-self="sm-hide"] { + display: revert!important; /* show icon & show text */ + } + body>header>nav.nav-top{ + position: relative; + } + body>main { + grid-template-rows:auto 1fr; + grid-template-columns: 14rem 1fr; + grid-template-areas: "menu main" "menu block-right"; + -moz-column-gap: 2rem; + column-gap: 2rem; + row-gap: 2rem; + } + .nav-logo {margin-left:0} + .nav-open, + aside#nav-left .nav-close{display: none;} + aside#nav-left { + position:relative; + width: 220px; + } + body>main:has(aside#block-right) { + grid-template-rows: auto 1fr; + grid-template-columns: 14rem 1fr; + grid-template-areas: "menu main" "menu block-right" + } + body>main>aside#nav-left { + grid-area: menu + } + body>main>[role=main] { + grid-area: main + } + body>main>aside#block-right { + grid-area: block-right; + align-self: start /* Sticky in grid */ + } + body>main>aside#block-right { + position: sticky; + top: calc(var(--pico-main-top-offset) + var(--pico-block-spacing-vertical)/2); + max-height: calc(var(--max-height) - var(--pico-spacing)); + transition: top var(--pico-transition); + transition-delay: 50ms + } + body>main>nav[aria-label=breadcrumb] { + display: none + } + body>main>aside>nav { + margin-top: calc(var(--pico-block-spacing-vertical)/2) + } + body>main>hgroup { + grid-area: header; + margin-top: calc(var(--pico-block-spacing-vertical)/2) + } +} +@media(min-width: 1280px) { + body>main { + grid-template-rows:auto 1fr; + grid-template-columns: 14rem 1fr 14rem; + grid-template-areas: "menu main block-right" "menu main block-right"; + row-gap: 2rem; + } + body>main:has(aside#block-right) { + grid-template-rows: auto 1fr; + grid-template-columns: 14rem 1fr 15rem; + grid-template-areas: "menu main block-right" "menu main block-right" + } + body>main>aside#nav-left { + grid-area: menu + } + body>main>[role=main] { + grid-area: main + } + body>main>aside#block-right { + grid-area: block-right + } +} +@media(min-width: 1536px) { + body>main { + grid-template-rows:auto 1fr; + grid-template-columns: 16rem 1fr 16rem; + grid-template-areas: "menu main block-right" "menu main block-right"; + row-gap: 3rem; + } +} +/* GRID CUSTOM COLUMNS */ +/* @todo ?? */ +.grid-left, .grid-right, .grid-2, .grid-3 { + align-items : start; + display : grid; + grid-template-columns: 1fr; + column-gap : calc(var(--pico-spacing) * .5); + row-gap : calc(var(--pico-spacing) * .5); + margin : 0; +} +.flex-justify { + align-items : center; + display : flex; + justify-content : space-between; + flex-basis : auto; + flex-wrap : wrap; +} +@media (min-width: 1024px) { + .grid-main, .grid-left, .grid-right, .grid-2, .grid-3 { + align-items : baseline; + display : grid; + column-gap : calc(var(--pico-spacing) * 1); + row-gap : calc(var(--pico-spacing) * 1); + } + .grid-main { + grid-template-columns: 1fr 3fr; + grid-column-gap: 1rem; + grid-row-gap: 1rem; + } + .grid-left { grid-template-columns: 1fr 3fr; } + .grid-right { grid-template-columns: 3fr 1fr; } + .grid-2 { grid-template-columns: 1fr 1fr; } + .grid-3 { grid-template-columns: 1fr 1fr 1fr; } +} + +/* -------------------- MODULE CKEditor */ +/* BUTTON CKEditor forced fix button 📐*/ +:is([class^="cke_button"],[class^="cke_combo_button"] ) { + margin-left : 0!important; +} +/* fix extra space of combo dropdown */ +.cke_combo_on a.cke_combo_button, .cke_combo_off a.cke_combo_button:hover, .cke_combo_off a.cke_combo_button:focus, +.cke_combo_off a.cke_combo_button:active { + padding : 0!important; +} +/* CKEditor darkmode */ +:root[data-theme=dark] { + --cke-color : #fff; + --cke-background: #111;; + --cke-filter : invert(1) contrast(1.15); + --cke-editable : #1c212c; + --cke-inner : #181b25; +} +/* try to switch mode, fallback ?? */ +:root[data-theme=light] { + --no-var : #fff; +} +/* CKEditor darkmode rounded */ +:is([class^=cke_top],[class^=cke_bottom]) { + filter : var(--cke-filter, none); + border-color : transparent!important; + /* Prevent editor from overflow prent container */ + max-width : 100%; + border-radius : 8px; +} +:where(.cke_chrome) { + border : none!important; +} +.cke_inner { + display : block; + background : var(--cke-inner, var(--no-var), #999)!important; + border : 1px solid var(--cke-background, var(--no-var), #999)!important; + border-radius : 8px; +} +:where(.cke_contents){ + background : var(--cke-editable, var(--no-var), #999)!important; + color : var(--cke-color, var(--no-var))!important; + border-radius : 8px; +} +/* customize editable container */ +.cke_editable { + background : var(--cke-editable, var(--no-var)); + color : var(--no-var, #fff); + border-radius : 8px; + padding : 0.5rem; + cursor : text; + margin : 0.25rem; + width : auto; + min-height : calc(100vh - 1rem); +} +textarea.cke_source { + background : var( --cke-background, #fff); + color : var( --cke-color, #111); + padding : 0.5rem; +} +.cke_wysiwyg_frame, .cke_wysiwyg_div { + background : var(--cke-editable, var(--no-var))!important; + color : var(--cke-color, var(--no-var))!important; +} + + +/* -------------------- MODULE D3FORUM */ +/* Used in Dropdowm*/ +.author-info { + align-items : center; + display : flex; + flex-direction : column; + padding : .25em; +} +/* AUTHOR AVATAR */ +.avatar { + border : 2px solid var(--pico-border-color); + border-radius : 50%; + margin : 0 auto; +} +/* AUTHOR DROPDOWN */ +:is(.w96) { + width : 96px; + height : 96px; + } + +/* AVATAR css from x-layout */ +[data-self="radius-circle"] { border-radius: 50%} + +/* NAV POST TREE ORDER */ +nav.post-tree-order { + align-items : center; + display : flex; + flex-wrap : wrap; + justify-content : start; + padding : var(--pico-spacing); + width : 100%; +} +nav.post-tree-order a { + border-radius : var(--pico-border-radius); + padding : .25em; + margin-right : .5em; +} +nav.post-tree-order a:hover { + background : var(--pico-primary-focus); + color : var(--pico-secondary-inverse); +} +/* POST TREE */ +/* in main view, main list, comment list */ +ul.post-tree { + background : var(--pico-card-background-color); + border-radius : CALC(var(--pico-border-radius)*2); + margin-bottom : var(--pico-block-spacing-vertical); + padding : 1rem; +} +ul.post-tree li { + list-style : none; +} +li.post-tree-item { + align-items : center; + display : flex; + list-style : none; + margin : 0; /* NOTE The margin-left is auto-generated from template ! */ + padding : 0; +} +li.post-tree-item > span { + border-radius : var(--pico-border-radius); + padding : .25rem; +} + .post-tree-current > span { + background-color: var(--pico-form-element-selected-background-color); + border-radius : var(--pico-border-radius); +} +/* POST TREE DEPTH-IN-TREE */ +:is(ul.depth-in-tree) { + margin : 0; + padding : 0; +} +/* FORUM POST - CONTENT + SIGNATURE */ +.post-content { +} +.post-signature { + border-top : 1px solid var(--pico-blockquote-border-color); + margin-top : 1.5rem; +} + +/* FORUM - ICON LIST LEGEND */ +.forum-icon-list { + display : block; + list-style : none; + margin : 1em; + padding : 0; +} + +/* Following classes Using class badge */ +.post-vote, +.post-vote-count, +.post-vote-avg {} +.description {} + +/* ACTIVITY TOTAL POSTS, COMMENTS, VIEWS */ +.content-activity, +.forum-activity { + font-size : small; +} + +/* -------------------- MODULE PICO */ +article .header-image { + display : inline-block; + box-shadow : var(--pico-card-box-shadow); + height : 240px; + margin-top : calc(var(--pico-block-spacing-vertical) * -1.25); + margin-bottom : var(--pico-block-spacing-vertical); + object-fit : cover; + width : 100%; + border : 2px solid var(--pico-muted-color); + border-radius : var(--pico-border-radius); +} +/* Page list of contents H3 + icons folder, docs */ +article h3 :is(span[data-tooltip]) {font-size:16px;} +/* TAGS */ +article>footer>.content-tags { + color : var(--pico-code-value-color); + padding-top : 1rem; +} +/* POST OPTIONS */ +article > .content-filters, +article > .content-options, +article > .content-time, +article > .content-history { + background : none; + border : var(--pico-border); + border-radius : var(--pico-border-radius); + width : auto; + margin-bottom : var(--pico-grid-row-gap); +} +.content-filters >.filter > label { + display : flex; + justify-content : space-between; + flex-wrap : wrap; + align-content : center; + align-items : center; + flex-direction : row; + width : auto; +} +/* 🚧📐 div.category-sub:not(:last-child) ,*/ +:is(div.list-content):not(:only-of-type), +:is(div.list-content):not(:last-of-type), +:is(div.category-sub, div.category-forum):not(:only-of-type), +:is(div.category-sub, div.category-forum):not(:last-of-type){ + margin-bottom : var(--pico-typography-spacing-vertical); +} +:is(div.list-content):last-of-type {} + +/* WAITING CONTENT */ +:is(div.list-content) :where(em.warning) { + background : #f44336; + color : #fff; +} + + +/* -------------------- PAGE NAV - CONTENT PAGINATION */ +nav.page-nav div { + align-items : center; + display : flex; + justify-content : center; + flex-wrap : wrap; + justify-content : space-between; + padding : var(--pico-spacing); + margin-bottom : var(--pico-spacing); + width : 100%; +} +/* -------------------- PAGENAVI D3FORUM COMMENTS PAGINATION */ +nav.pagination { + display : flex; + margin : .5em 0; + flex-direction : row; + justify-content : flex-end; +} +ul.pagenavi li { + border : 0; + color : var(--pico-primary); + border : 1px solid var(--pico-muted-border-color); + border-radius : var(--pico-border-radius); + box-shadow : var(--pico-box-shadow); + padding : 0; + text-align : center; + user-select : none; + margin : 0 .25rem; + min-width : 4ch; +} +/* ul.pagenavi li:last-of-type { margin: 0} */ + +ul.pagenavi li:not([aria-current]) a { + background : var(--pico-form-element-background-color); + + margin : 0; + padding : .25rem .5rem; + width : 100%; +} + +ul.pagenavi li[aria-current] { + border-color : var(--pico-primary); + padding : .25rem .5rem; +} +ul.pagenavi li:not([aria-current]):hover a { + border-color : var(--pico-primary); + background : var(--pico-primary-focus); + color : var(--pico-secondary-inverse); + padding : .25rem .5rem; +} + +/* -------------------- MODULE SITEMAP */ +.grid-sitemap { + grid-column : 1 / 7; + display : grid; + grid-template-columns: repeat(auto-fit, minmax(200px, auto)); + justify-content : center; +} +.grid-map { + padding : 1rem 1rem 0; + grid-column : 1 / 7; + display : grid; + grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); + align-items : center; +} +.grid-map h1 { + font-size : 2rem +} +.grid-map .map iframe { border-radius: var(--pico-border-radius)} + +/* -------------------- SYSTEM Notification */ +/* Replacing older confirmMsg errorMsgg resultMsg msg-warning */ +.alert { + background : var(--pico-muted-border-color); + border-left : 3px solid; + border-color : var(--pico-border-color); + border-radius : var(--pico-border-radius); + padding : var(--pico-spacing); + margin : var(--pico-block-spacing-vertical) auto; +} +.error, +.warning { border-color: var(--pico-del-color) } +.success { border-color: var(--pico-ins-color) } +.info { border-color: var(--pico-code-color) } +.result { border-color: var(--pico-code-color) } + +/* -------------------- MODULE USER PROFILE AVATAR */ +/* Generate CSS Avatar Letter */ +.user-tab-avatar #avatar { +--avatar-size :96px; + background-size : 100% 100%; + background-position: 0px 0px,0px 0px,0px 0px,0px 0px,0px 0px; + background-image: repeating-linear-gradient(315deg, #00FFFF2E 92%, #073AFF00 100%),repeating-radial-gradient(75% 75% at 238% 218%, #00FFFF12 30%, #073AFF14 39%),radial-gradient(99% 99% at 109% 2%, #00C9FFFF 0%, #073AFF00 100%),radial-gradient(99% 99% at 21% 78%, #7B00FFFF 0%, #073AFF00 100%),radial-gradient(160% 154% at 711px -303px, #2000FFFF 0%, #073AFFFF 100%); + border-radius : 50%; + box-shadow : 2px 2px 2px #111; + height : var(--avatar-size); + margin : 20px 0; + text-align : center; + width : var(--avatar-size); +} +/* Avatar Letter */ +.user-tab-avatar #username { + font-size : 0; + display : block; + color : var(--pico-primary ); + position : relative; + line-height : 1; + text-transform : uppercase; + top : calc(var(--avatar-size) / 4); /* 25% of parent */ + transition : font-size 0.3s ease-in; + filter : drop-shadow(2px 2px 5px #010); /* drop-shadow(offset-x offset-y blur-radius color) */ +} +.user-tab-avatar #username::first-letter { + font-size : calc(var(--avatar-size) / 2); /* 50% of parent */ +} + +/* -------------------- MODULE MESSAGE & USER PROFILE */ +/* Note - Mail tab active overrides the default properties */ + +.mail-list-item { + border-bottom : 1px solid hsl(219, 17%, 21%); + line-height : 2.5rem; +} +.mail-list-avatar { + border-radius : 50%; + height : 24px; + margin : auto .25em; + width : 24px; + vertical-align : middle; +} +.mail-list-author { + width : 190px; +} +.mail-list-author input:disabled { + pointer-events: auto; + cursor: not-allowed; +} +.mail-list-subject { + font-size : 16px; + } +.mail-list-date { + font-size : small; + } +.mail-list-date { + font-size : small; +} +.mail-subject{} +.mail-to {} +.mail-from {} +.mail-date {} +.mail-content{} + +/* -------------------- SCROLL-TO-TOP */ +.scroll-top { + position : absolute; + top : 12rem; + right : 2rem; + bottom : 0; + pointer-events : none; + z-index : 9000; +} +.scroll-top #ntop-bg {fill: var(--pico-progress-background-color);} +.scroll-top #ntop-arrow {fill: var(--pico-primary-hover);} +.scroll-top a:hover #ntop-bg {fill: var(--pico-primary-hover-background);} +.scroll-top a:hover #ntop-arrow {fill: var(--pico-primary-inverse);} +.scroll-top a { + position : sticky; + top : -5rem; + width : 3rem; + height : 3rem; + margin-bottom : -5rem; + transform : translateY(100vh); + backface-visibility: hidden; + display : inline-block; + text-decoration : none; + user-select : none; + pointer-events : all; + outline : none; + overflow : hidden; + /* Style */ + box-shadow : var(--pico-box-shadow); + border : var(--pico-border-width) solid var(--pico-border-color); + border-radius : var(--pico-border-radius); +} +.scroll-top a svg { + display : block; + border-radius : var(--border-radius); + width : 100%; + height : 100%; +} +.scroll-top a svg path { + transition : all 0.1s; +} +.scroll-top a #ntop-arrow { + transform : scale(0.66); + transform-origin: center; +} +@media print { + .scroll-top { display: none !important; } +} + +/* -------------------- Animation / Transition */ +@keyframes bottom { + 0% { transform:translateY(10px); opacity:0; } + 100% { opacity:1; transform:none;} +} +@keyframes top { + 0% { transform:translateY(-10px); opacity:0; } + 100% { opacity:1; transform:none; } +} +@keyframes left { + 0% { transform:translateX(-10px); opacity:0; } + 100% { opacity:1; transform:none; } +} diff --git a/html/themes/pico-sand/templates/legacy/index.html b/html/themes/pico-sand/templates/legacy/index.html new file mode 100644 index 000000000..990cbd603 --- /dev/null +++ b/html/themes/pico-sand/templates/legacy/index.html @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/html/themes/pico-sand/templates/legacy/legacy_app_start_page.html b/html/themes/pico-sand/templates/legacy/legacy_app_start_page.html new file mode 100644 index 000000000..2e6f2a5bc --- /dev/null +++ b/html/themes/pico-sand/templates/legacy/legacy_app_start_page.html @@ -0,0 +1,103 @@ +<{* Dev-Mode Toggle *}> +<{if $xoops_isadmin}>
<{$smarty.template}>
<{/if}> + +
+ +

Welcome to <{$xoops_sitename}>

+

<{$xoops_meta_description}>

+ +

Getting started

+ +

Your website is preconfigured with default settings. + The backend administration provides a graphical user interface, also called control panel or admin dashboard, + to configure your website, install components, translation and localization.

+
+ +
+ General Settings +

The system module allows you to customize the general settings of your platform, such as the name and slogan of the site, + language and theme, or close your site and restrict access by user groups. +

Start Page or Module

+

You can modify this template "app_start_page.html”, or you can select a module as the starting point of your website.

+ <{if $xoops_isadmin}> +

Administration »» System »» Preferences ⭧

+ <{/if}> +
+ +
+ +
+ Closed for maintenance +
The site is currently closed for maintenance.
+

Maintenance mode allows you to close the site and display a custom notice to visitors.
+ You can also control who has access to your site when it is closed.

+

When you're ready to launch your site, simply go to System Preferences to open it to the public.

+ +
    +
  1. Maintenance Mode - Turn your site off?
    Select yes to turn your site off so that only users in selected groups have access to the site.
    2. +
  2. Maintenance Mode - Select groups
    Groups that are allowed to access while the site is turned off. Users in the default webmasters group are always granted access.
    3. +
  3. Maintenance Mode - Message
    The text that is displayed when closing the site.
    4. +
+

You can edit the Template site_closed.html" and customize the design to match your notice, maintenance, coming soon, etc.

+ <{if $xoops_isadmin}> +

Administration »» System »» Preferences »» "Maintenance mode-Turn your site off?" ⭧

+ <{/if}> +
+ +
+ +
+ User Groups Permissions +

You can assign users to multiple groups and easily grant access to content of modules and blocks. + The installation wizard creates the following system-required groups :

+
    +
  1. Webmasters (Administrators) +
  2. Registered Users (members) +
  3. Anonymous Users (Guests) +
+
Required user groups cannot be deleted !
+ You can create new groups and change permissions for each new group created.
+ <{if $xoops_isadmin}> +

Administration »» User Groups »» Preferences ⭧

+ <{/if}> +
+ +
+ +
+ Modules Preferences +

Modules also have their own settings, accessible from their "preferences" menu.

+

For example, the render module allows you to manage the meta data of your website, themes (general appearance of your website), and templates that shape the contents of modules and blocks.

+ <{if $xoops_isadmin}> +

Administration »» Render »» Preferences ⭧

+ <{/if}> +
+ +
+ +
+ Module Blocks +

When you install a module, its blocks are automatically added to the Block Management system. + These blocks often have their own functionality settings and customization templates.

+
On the frontend, click the three-dot dropdown menu to edit the block.
+

For example, the parameters of the "Main Menu" block allow you to display icons for each module and subcategories.

+ <{if $xoops_isadmin}> +

Administration »» System »» Block Management ⭧

+ <{/if}> +
+ +
+ +
+ Theme +

A theme consists of a single HTML file that can include components, a CSS stylesheet, JavaScript, modules, and block templates. On the frontend, the Themes block allows users to select their preferred theme. + You first need to enable the themes users can choose from, in Theme Management.

+
Learn more about the Theme Options - Custom Parameters link in the Theme Management
+ <{if $xoops_isadmin}> +

Administration »» System »» Theme Management ⭧

+ <{/if}> +
+ +
+ +
diff --git a/html/themes/pico-sand/templates/legacy/legacy_block_mainmenu.html b/html/themes/pico-sand/templates/legacy/legacy_block_mainmenu.html new file mode 100644 index 000000000..31c3b9bce --- /dev/null +++ b/html/themes/pico-sand/templates/legacy/legacy_block_mainmenu.html @@ -0,0 +1,31 @@ +<{if $xoops_isadmin}>
<{$smarty.template}>
<{/if}> + + diff --git a/html/themes/pico-sand/templates/legacy/legacy_block_search.html b/html/themes/pico-sand/templates/legacy/legacy_block_search.html new file mode 100644 index 000000000..c0eb26a27 --- /dev/null +++ b/html/themes/pico-sand/templates/legacy/legacy_block_search.html @@ -0,0 +1,15 @@ +<{* Dev-Mode Toggle *}> +<{if $xoops_isadmin}>
<{$smarty.template}>
<{/if}> + +
+
+ + + <{xoops_input type=hidden name=andor value=AND}> + <{xoops_input type=hidden name=action value=results}> + +
+

+ <{$smarty.const._MB_LEGACY_ADVS}> +

+
diff --git a/html/themes/pico-sand/templates/legacy/legacy_block_siteinfo.html b/html/themes/pico-sand/templates/legacy/legacy_block_siteinfo.html new file mode 100644 index 000000000..f0bb80cf2 --- /dev/null +++ b/html/themes/pico-sand/templates/legacy/legacy_block_siteinfo.html @@ -0,0 +1,30 @@ +<{* Dev-Mode Toggle *}> +<{if $xoops_isadmin}>
<{$smarty.template}>
<{/if}> + +
+<{if $block.showgroups == true}> + +<{/if}> + + + +
diff --git a/html/themes/pico-sand/templates/legacy/legacy_block_themes.html b/html/themes/pico-sand/templates/legacy/legacy_block_themes.html new file mode 100644 index 000000000..6eab64ac0 --- /dev/null +++ b/html/themes/pico-sand/templates/legacy/legacy_block_themes.html @@ -0,0 +1,37 @@ +<{* Dev-Mode Toggle *}> +<{if $xoops_isadmin}>
<{$smarty.template}>
<{/if}> + +<{if $block.isEnableChanger == false}> + <{$smarty.const._MB_LEGACY_MESSAGE_CAN_NOT_THEME_CHANGE}> +<{else}> + +
+ +
+ <{if $block.mode==1}> + <{$block.theme_selected_name}> + + + <{/if}> + <{foreach item=theme_option from=$block.theme_options}> + + <{/foreach}> + + +

<{''|cat:$block.count|cat:''|string_format:$smarty.const._MB_LEGACY_LANG_NUMTHEME}>

+ + <{if $block.mode==1}> +
+ <{/if}> + +
+
+ +<{/if}> + diff --git a/html/themes/pico-sand/templates/legacy/legacy_block_usermenu.html b/html/themes/pico-sand/templates/legacy/legacy_block_usermenu.html new file mode 100644 index 000000000..47bda4ab8 --- /dev/null +++ b/html/themes/pico-sand/templates/legacy/legacy_block_usermenu.html @@ -0,0 +1,47 @@ +<{* Dev-Mode Toggle +<{if $xoops_isadmin}>
<{$smarty.template}>
<{/if}>*}> +
+ <{$xoops_uname}> + <{$xoops_uname}> + +
diff --git a/html/themes/pico-sand/templates/legacy/legacy_redirect.html b/html/themes/pico-sand/templates/legacy/legacy_redirect.html new file mode 100644 index 000000000..6c2380b19 --- /dev/null +++ b/html/themes/pico-sand/templates/legacy/legacy_redirect.html @@ -0,0 +1,44 @@ + + + + + + +<{if !class_exists('AdelieDebug_Preload')}> + +<{/if}> +<{$xoops_sitename}> + + + + + + +
+
+

logo

+

<{$message}>

+ +

<{$lang_ifnotreload}>

+<{if class_exists('AdelieDebug_Preload')}> +

No automatic redirect during AdelieDebug execution.

+<{/if}> +
+
+ + + \ No newline at end of file diff --git a/html/themes/pico-sand/templates/legacy/legacy_redirect_function.html b/html/themes/pico-sand/templates/legacy/legacy_redirect_function.html new file mode 100644 index 000000000..8fab737e7 --- /dev/null +++ b/html/themes/pico-sand/templates/legacy/legacy_redirect_function.html @@ -0,0 +1,176 @@ + + + +<?php echo htmlspecialchars($xoopsConfig['sitename']); ?> + + + + + + +
+
+ Loading +
+
+
+
+
+

+

+
+ + diff --git a/html/themes/pico-sand/theme.html b/html/themes/pico-sand/theme.html new file mode 100644 index 000000000..db8c240c7 --- /dev/null +++ b/html/themes/pico-sand/theme.html @@ -0,0 +1,305 @@ + + + + + + + + <{$xoops_sitename}> - <{$xoops_pagetitle}> + + + + + + + + + + + + + + + + + + <{if $xoops_dirname == 'pico' && isset($content.ef.pico_img)}> + + <{else}> + + <{/if}> + + + + + + + + <{* ----- Browserconfig, Webmanifest, XML Sitemap located in the root directory ----- *}> + + + + <{* ----- Favicons THEME COLOR ----- *}> + + + + <{* ----- Favicon SVG - default /images/favicon ----- *}> + + <{* ----- Favicons located in the root directory ----- *}> + + + + + <{* ----- Resquesturi $xoops_requesturi : /module/dirname/id ----- *}> + + <{* ----- CSS - PicoCSS ----- *}> + + + + <{$xoops_module_header}> + + <{* ----- Defer preload of custom styles for jQuery UI, PrismJS ----- *}> + + + + + <{* ----- CSS - Theme ----- *}> + + <{* ----- CSS - Theme JSON ----- *}> + <{assign var="theme" value="`$xoops_imageurl`theme.json"}> + <{json file="$theme" theme="theme" local="true"}> + <{foreach item=theme key=key from=$theme}> + <{assign var='name' value=$theme->name}> + <{assign var='title' value=$theme->title}> + <{assign var='slogan' value=$theme->slogan}> + <{assign var='body' value=$theme->body}> + <{assign var='color' value=$theme->color}> + <{assign var='primary' value=$theme->primary}> + <{assign var='secondary' value=$theme->secondary}> + <{assign var='inverse' value=$theme->inverse}> + <{/foreach}> + <{* ----- CSS - MainMenu Active ----- *}> + + + +
+ +
+ +<{* REMOVE SMARTY COMMENTS TO DISPLAY IN TOPPAGE ONLY *}> +<{* if $xoops_is_top|default:'' *}> +<{include file="$xoops_theme/component/_inc_hero.html"}> +<{* /if *}> + + +<{* ----- TOPPAGE Center Blocks Title width prefix top- & none- (hide title) + Note : It's Center Block Left that triggers the top to display *}> +<{if !empty($xoops_clblocks)}> +<{foreach item=block from=$xoops_clblocks}> + <{if $block.title|strstr:"top-" && !$block.title|strstr:"hero"}> + <{include file="$xoops_theme/component/_inc_top_center.html"}> + <{/if}> +<{/foreach}> +<{/if}> + + + +<{* ----- Main *}> +
+ + <{if $xoops_showlblock==1}> + + <{/if}> + +
+
+ <{if !empty($xoops_contents)}> + <{$xoops_contents}> + <{else}> + <{include file='db:legacy_app_start_page.html'}> + <{/if}> +
+
+ + <{if $xoops_showrblock==1}> + + <{/if}> + +
+ +<{if $banner !=" "}> +
+
+
+ <{$xoops_banner}> +
+
+
+<{/if}> + +<{* ---------- CENTER BLOCKS *}> +<{if $xoops_showcblock==1}> +
+ +<{* ---------- BLOCK Center-Left *}> +<{if !empty($xoops_clblocks)}> +
+ <{foreach item=block from=$xoops_clblocks}> + <{if !$block.title|strstr:"admin" && !$block.title|strstr:"top" && !$block.title|strstr:"hero"}> +
+

+ <{if $xoops_isadmin}> + <{$block.title}> + <{include file="$xoops_theme/component/_inc_block_edit.html"}> + <{else}> + <{if !$block.title|strstr:"none"}><{$block.title}><{/if}> + <{/if}> +

+
<{$block.content}>
+
+ <{/if}> + <{/foreach}> +
+<{/if}> + +<{* ---------- BLOCK Center-Center *}> +<{if !empty($xoops_ccblocks)}> +
+ <{foreach item=block from=$xoops_ccblocks}> + <{if !$block.title|strstr:"admin" && !$block.title|strstr:"top" && !$block.title|strstr:"hero"}> +
+

+ <{if $xoops_isadmin}> + <{$block.title}> + <{include file="$xoops_theme/component/_inc_block_edit.html"}> + <{else}> + <{if !$block.title|strstr:"none"}><{$block.title}><{/if}> + <{/if}> +

+
<{$block.content}>
+
+ <{/if}> + <{/foreach}> +
+<{/if}> + +<{* ---------- BLOCK Center-Right *}> +<{if !empty($xoops_crblocks)}> +
+ <{foreach item=block from=$xoops_crblocks}> + <{if !$block.title|strstr:"admin" && !$block.title|strstr:"top" && !$block.title|strstr:"hero"}> +
+

+ <{if $xoops_isadmin}> + <{$block.title}> + <{include file="$xoops_theme/component/_inc_block_edit.html"}> + <{else}> + <{if !$block.title|strstr:"none"}><{$block.title}><{/if}> + <{/if}> +

+
<{$block.content}>
+
+ <{/if}> + <{/foreach}> +
+<{/if}> + +
+<{/if}> + +<{* ---------- Scroll to top *}> +
+ + + + + + +
+ +<{if $banner !=" "}> +
+
+ +
+
+<{/if}> + +
+ +<{* ---------- FOOTER CREDITS *}> + + +<{* ---------- ADMIN FRONT PANEL *}> +<{if $xoops_isadmin}> +<{include file="$xoops_theme/component/admin-panel.html"}> +<{/if}> + +<{* ---------- DO NOT DEFER Theme Plugins - LocalStoarage & SVG ! *}> + + +<{* ---------- PrismJS ----- *}> + + + \ No newline at end of file diff --git a/html/themes/pico-sand/theme.json b/html/themes/pico-sand/theme.json new file mode 100644 index 000000000..bc72f45ca --- /dev/null +++ b/html/themes/pico-sand/theme.json @@ -0,0 +1,19 @@ +{ + "theme": [ + { + "name": "Pico Sand", + "version": "2.4.0", + "date": "2024-04-20", + "author": "Nuno Luciano", + "title": "Your Dream, Your Legacy", + "slogan": "The greatest legacy that you will leave to your friends is your story.", + "body": "#13171f", + "color": "#c2c7d0", + "primary": "#a39e8f", + "secondary": "#969eaf", + "contrast": "#dfe3eb", + "inverse": "#fff", + "muted": "#7b8495" + } + ] +} \ No newline at end of file diff --git a/html/themes/xcl_default/.editorconfig b/html/themes/xcl_default/.editorconfig index ecfda4e65..4d87d9c2e 100644 --- a/html/themes/xcl_default/.editorconfig +++ b/html/themes/xcl_default/.editorconfig @@ -1,5 +1,5 @@ # editorconfig.org -# XCL 2.3.1 +# XCL 2.4.0 # This file is for unifying the coding style for different editors and IDEs root = true diff --git a/html/themes/xcl_default/.gitignore b/html/themes/xcl_default/.gitignore index b5ce3fa47..0903b73bc 100644 --- a/html/themes/xcl_default/.gitignore +++ b/html/themes/xcl_default/.gitignore @@ -1,3 +1,4 @@ +# XCL 2.4.0 # OS or Editor folders ._* .cache diff --git a/html/themes/xcl_default/CHANGELOG.md b/html/themes/xcl_default/CHANGELOG.md index bd59e00eb..be5ce037c 100644 --- a/html/themes/xcl_default/CHANGELOG.md +++ b/html/themes/xcl_default/CHANGELOG.md @@ -2,9 +2,9 @@ ## XCL DEFAULT THEME v.2.4.0 -XCL Default Theme built with PicoCSS v2.0.6 +XCL Theme built with PicoCSS v2.0.6 -All notable changes to XCL Theme PicoCSS will be documented in this file. +All notable changes will be documented in this file. ## [XCL Theme 240 ] 2024-04-20 diff --git a/html/themes/xcl_default/component/_inc_hero.html b/html/themes/xcl_default/component/_inc_hero.html new file mode 100644 index 000000000..66e97067a --- /dev/null +++ b/html/themes/xcl_default/component/_inc_hero.html @@ -0,0 +1,279 @@ + + + +
+ +
+ + + + + + + + +
+

<{$title}>

+

<{$slogan}>

+
+
+ +
+ + + + + + + + + + + + + + + + + + +
+
+
+
+
+
+
+
+ +
+ + +
+ + \ No newline at end of file diff --git a/html/themes/xcl_default/component/_inc_top_header.html b/html/themes/xcl_default/component/_inc_top_header.html deleted file mode 100644 index 9cde9819b..000000000 --- a/html/themes/xcl_default/component/_inc_top_header.html +++ /dev/null @@ -1,199 +0,0 @@ - - - -
-
-
-
-
-
-
-
-
-
-
- - - -

Nature never rushes, yet everything gets done.

- -
- -
\ No newline at end of file diff --git a/html/themes/xcl_default/component/admin-panel.html b/html/themes/xcl_default/component/admin-panel.html index 33c8ba884..b3b68d380 100644 --- a/html/themes/xcl_default/component/admin-panel.html +++ b/html/themes/xcl_default/component/admin-panel.html @@ -1,7 +1,7 @@ <{* XCube Panel Options *}> - - + + diff --git a/html/themes/xcl_default/style.css b/html/themes/xcl_default/style.css index 08dbb7fb1..57379e47d 100644 --- a/html/themes/xcl_default/style.css +++ b/html/themes/xcl_default/style.css @@ -40,6 +40,7 @@ --z-above : 100; /* dropdown menu */ --z-default : 1; --z-below : -1; + /* override picocss */ --pico-border-radius: .5rem; --pico-spacing: 1rem; @@ -83,6 +84,9 @@ body { /* scroll-padding-top: 5rem; */ box-sizing: border-box; } +body > header { + --pico-block-spacing-vertical:0 +} body > main { display : grid; grid-template-rows: 1fr; @@ -424,7 +428,9 @@ summary[role="link"].contrast:is([aria-current],:hover,:active,:focus) { /* -------------------- TOOLTIP */ [data-tooltip] { - border-bottom-color: var(--pico-muted-color) + border-bottom-color: var( + --pico-border-color + ) } [data-tooltip]:after, main [data-tooltip]:before { font-size : 12px @@ -490,15 +496,12 @@ p { text-wrap: pretty } aside#nav-left:target { transform: translate3d(0, 0, 0) translateX(0); } - .nav-logo { - margin-left: 32px; - } .nav-open { display: block; position:absolute; left: 18px; top: 10px; -} + } aside#nav-left .nav-close { display: block; height: 36px; diff --git a/html/themes/xcl_default/templates/legacy/index.html b/html/themes/xcl_default/templates/legacy/index.html new file mode 100644 index 000000000..990cbd603 --- /dev/null +++ b/html/themes/xcl_default/templates/legacy/index.html @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/html/themes/xcl_default/templates/legacy/legacy_block_themes.html b/html/themes/xcl_default/templates/legacy/legacy_block_themes.html new file mode 100644 index 000000000..6eab64ac0 --- /dev/null +++ b/html/themes/xcl_default/templates/legacy/legacy_block_themes.html @@ -0,0 +1,37 @@ +<{* Dev-Mode Toggle *}> +<{if $xoops_isadmin}>
<{$smarty.template}>
<{/if}> + +<{if $block.isEnableChanger == false}> + <{$smarty.const._MB_LEGACY_MESSAGE_CAN_NOT_THEME_CHANGE}> +<{else}> + +
+ +
+ <{if $block.mode==1}> + <{$block.theme_selected_name}> + + + <{/if}> + <{foreach item=theme_option from=$block.theme_options}> + + <{/foreach}> + + +

<{''|cat:$block.count|cat:''|string_format:$smarty.const._MB_LEGACY_LANG_NUMTHEME}>

+ + <{if $block.mode==1}> +
+ <{/if}> + +
+
+ +<{/if}> + diff --git a/html/themes/xcl_default/templates/legacy/legacy_block_usermenu.html b/html/themes/xcl_default/templates/legacy/legacy_block_usermenu.html new file mode 100644 index 000000000..47bda4ab8 --- /dev/null +++ b/html/themes/xcl_default/templates/legacy/legacy_block_usermenu.html @@ -0,0 +1,47 @@ +<{* Dev-Mode Toggle +<{if $xoops_isadmin}>
<{$smarty.template}>
<{/if}>*}> +
+ <{$xoops_uname}> + <{$xoops_uname}> + +
diff --git a/html/themes/xcl_default/theme.html b/html/themes/xcl_default/theme.html index 90fe533f8..310ab63e9 100644 --- a/html/themes/xcl_default/theme.html +++ b/html/themes/xcl_default/theme.html @@ -78,8 +78,18 @@ <{* ----- CSS - Theme ----- *}> <{* ----- CSS - Theme JSON ----- *}> - <{assign var="sample" value="`$xoops_imageurl`theme.json"}> - <{json file="$sample" themejson="theme" local="true"}> + <{assign var="theme" value="`$xoops_imageurl`theme.json"}> + <{json file="$theme" theme="theme" local="true"}> + <{foreach item=theme key=key from=$theme}> + <{assign var='name' value=$theme->name}> + <{assign var='title' value=$theme->title}> + <{assign var='slogan' value=$theme->slogan}> + <{assign var='body' value=$theme->body}> + <{assign var='color' value=$theme->color}> + <{assign var='primary' value=$theme->primary}> + <{assign var='secondary' value=$theme->secondary}> + <{assign var='inverse' value=$theme->inverse}> + <{/foreach}> <{* ----- CSS - MainMenu Active ----- *}>