public/avo-assets/avo.base.css in avo-3.1.7 vs public/avo-assets/avo.base.css in avo-3.2.0
- old
+ new
@@ -859,10 +859,11 @@
background-color:#333;
color:#fff;
border-radius:4px;
font-size:14px;
line-height:1.4;
+ white-space:normal;
outline:0;
transition-property:transform,visibility,opacity
}
.tippy-box[data-placement^=top]>.tippy-arrow{
@@ -1134,10 +1135,12 @@
flex: 1;
}
.flatpickr-months .flatpickr-prev-month,
.flatpickr-months .flatpickr-next-month {
+ -webkit-user-select: none;
+ user-select: none;
text-decoration: none;
cursor: pointer;
position: absolute;
top: 0;
height: 34px;
@@ -1774,1026 +1777,1255 @@
opacity: 1;
transform: translate3d(0, 0, 0);
}
}
-/*! @algolia/autocomplete-theme-classic 1.0.0-alpha.46 | MIT License | © Algolia, Inc. and contributors | https://github.com/algolia/autocomplete */
+/*! @algolia/autocomplete-theme-classic 1.12.2 | MIT License | © Algolia, Inc. and contributors | https://github.com/algolia/autocomplete */
-:root{
- --aa-search-input-height:44px;
- --aa-input-icon-size:20px;
- --aa-base-unit:16;
- --aa-spacing-factor:1;
- --aa-spacing:calc(var(--aa-base-unit)*var(--aa-spacing-factor)*1px);
- --aa-spacing-half:calc(var(--aa-spacing)/2);
- --aa-panel-max-height:650px;
- --aa-base-z-index:9999;
- --aa-font-size:calc(var(--aa-base-unit)*1px);
- --aa-font-family:inherit;
- --aa-font-weight-medium:500;
- --aa-font-weight-semibold:600;
- --aa-font-weight-bold:700;
- --aa-icon-size:20px;
- --aa-icon-stroke-width:1.6;
- --aa-icon-color-rgb:119,119,163;
- --aa-icon-color-alpha:1;
- --aa-action-icon-size:20px;
- --aa-text-color-rgb:38,38,39;
- --aa-text-color-alpha:1;
- --aa-primary-color-rgb:62,52,211;
- --aa-primary-color-alpha:0.2;
- --aa-muted-color-rgb:128,126,163;
- --aa-muted-color-alpha:0.6;
- --aa-panel-border-color-rgb:128,126,163;
- --aa-panel-border-color-alpha:0.3;
- --aa-input-border-color-rgb:128,126,163;
- --aa-input-border-color-alpha:0.8;
- --aa-background-color-rgb:255,255,255;
- --aa-background-color-alpha:1;
- --aa-input-background-color-rgb:255,255,255;
- --aa-input-background-color-alpha:1;
- --aa-selected-color-rgb:179,173,214;
- --aa-selected-color-alpha:0.205;
- --aa-description-highlight-background-color-rgb:245,223,77;
- --aa-description-highlight-background-color-alpha:0.5;
- --aa-detached-media-query:(max-width:680px);
- --aa-detached-modal-media-query:(min-width:680px);
- --aa-detached-modal-max-width:680px;
- --aa-detached-modal-max-height:500px;
- --aa-overlay-color-rgb:115,114,129;
- --aa-overlay-color-alpha:0.4;
- --aa-panel-shadow:0 0 0 1px rgba(35,38,59,0.1),0 6px 16px -4px rgba(35,38,59,0.15);
- --aa-scrollbar-width:13px;
- --aa-scrollbar-track-background-color-rgb:234,234,234;
- --aa-scrollbar-track-background-color-alpha:1;
- --aa-scrollbar-thumb-background-color-rgb:var(--aa-background-color-rgb);
- --aa-scrollbar-thumb-background-color-alpha:1
+/* ----------------*/
+
+/* 1. CSS Variables*/
+
+/* 2. Dark Mode*/
+
+/* 3. Autocomplete*/
+
+/* 4. Panel*/
+
+/* 5. Sources*/
+
+/* 6. Hit Layout*/
+
+/* 7. Panel Header*/
+
+/* 8. Panel Footer*/
+
+/* 9. Detached Mode*/
+
+/* 10. Gradients*/
+
+/* 11. Utilities*/
+
+/* ----------------*/
+
+/* Note:*/
+
+/* This theme reflects the markup structure of autocomplete with SCSS indentation.*/
+
+/* We use the SASS `@at-root` function to keep specificity low.*/
+
+/* ----------------*/
+
+/* 1. CSS Variables*/
+
+/* ----------------*/
+
+:root {
+ /* Input*/
+ --aa-search-input-height: 44px;
+ --aa-input-icon-size: 20px;
+ /* Size and spacing*/
+ --aa-base-unit: 16;
+ --aa-spacing-factor: 1;
+ --aa-spacing: calc(var(--aa-base-unit) * var(--aa-spacing-factor) * 1px);
+ --aa-spacing-half: calc(var(--aa-spacing) / 2);
+ --aa-panel-max-height: 650px;
+ /* Z-index*/
+ --aa-base-z-index: 9999;
+ /* Font*/
+ --aa-font-size: calc(var(--aa-base-unit) * 1px);
+ --aa-font-family: inherit;
+ --aa-font-weight-medium: 500;
+ --aa-font-weight-semibold: 600;
+ --aa-font-weight-bold: 700;
+ /* Icons*/
+ --aa-icon-size: 20px;
+ --aa-icon-stroke-width: 1.6;
+ --aa-icon-color-rgb: 119, 119, 163;
+ --aa-icon-color-alpha: 1;
+ --aa-action-icon-size: 20px;
+ /* Text colors*/
+ --aa-text-color-rgb: 38, 38, 39;
+ --aa-text-color-alpha: 1;
+ --aa-primary-color-rgb: 62, 52, 211;
+ --aa-primary-color-alpha: 0.2;
+ --aa-muted-color-rgb: 128, 126, 163;
+ --aa-muted-color-alpha: 0.6;
+ /* Border colors*/
+ --aa-panel-border-color-rgb: 128, 126, 163;
+ --aa-panel-border-color-alpha: 0.3;
+ --aa-input-border-color-rgb: 128, 126, 163;
+ --aa-input-border-color-alpha: 0.8;
+ /* Background colors*/
+ --aa-background-color-rgb: 255, 255, 255;
+ --aa-background-color-alpha: 1;
+ --aa-input-background-color-rgb: 255, 255, 255;
+ --aa-input-background-color-alpha: 1;
+ --aa-selected-color-rgb: 179, 173, 214;
+ --aa-selected-color-alpha: 0.205;
+ --aa-description-highlight-background-color-rgb: 245, 223, 77;
+ --aa-description-highlight-background-color-alpha: 0.5;
+ /* Detached mode*/
+ --aa-detached-media-query: (max-width: 680px);
+ --aa-detached-modal-media-query: (min-width: 680px);
+ --aa-detached-modal-max-width: 680px;
+ --aa-detached-modal-max-height: 500px;
+ --aa-overlay-color-rgb: 115, 114, 129;
+ --aa-overlay-color-alpha: 0.4;
+ /* Shadows*/
+ --aa-panel-shadow: 0 0 0 1px rgba(35, 38, 59, .1),
+ 0 6px 16px -4px rgba(35, 38, 59, .15);
+ /* Scrollbar*/
+ --aa-scrollbar-width: 13px;
+ --aa-scrollbar-track-background-color-rgb: 234, 234, 234;
+ --aa-scrollbar-track-background-color-alpha: 1;
+ --aa-scrollbar-thumb-background-color-rgb: var(--aa-background-color-rgb);
+ --aa-scrollbar-thumb-background-color-alpha: 1;
+ /* Touch screens*/
}
-@media (hover:none) and (pointer:coarse){
- :root{
- --aa-spacing-factor:1.2;
- --aa-action-icon-size:22px
+@media (hover: none) and (pointer: coarse) {
+ :root {
+ --aa-spacing-factor: 1.2;
+ --aa-action-icon-size: 22px;
}
}
-body.dark,body[data-theme=dark]{
- --aa-text-color-rgb:183,192,199;
- --aa-primary-color-rgb:146,138,255;
- --aa-muted-color-rgb:146,138,255;
- --aa-input-background-color-rgb:0,3,9;
- --aa-background-color-rgb:21,24,42;
- --aa-selected-color-rgb:146,138,255;
- --aa-selected-color-alpha:0.25;
- --aa-description-highlight-background-color-rgb:0 255 255;
- --aa-description-highlight-background-color-alpha:0.25;
- --aa-icon-color-rgb:119,119,163;
- --aa-panel-shadow:inset 1px 1px 0 0 #2c2e40,0 3px 8px 0 #000309;
- --aa-scrollbar-track-background-color-rgb:44,46,64;
- --aa-scrollbar-thumb-background-color-rgb:var(--aa-background-color-rgb)
+/* ----------------*/
+
+/* 2. Dark Mode*/
+
+/* ----------------*/
+
+body {
+ /* stylelint-disable selector-no-qualifying-type, selector-class-pattern */
+ /* stylelint-enable selector-no-qualifying-type, selector-class-pattern */
}
-.aa-Autocomplete *,.aa-DetachedFormContainer *,.aa-Panel *{
- box-sizing:border-box
+body[data-theme=dark], body.dark {
+ /* Text colors*/
+ --aa-text-color-rgb: 183, 192, 199;
+ --aa-primary-color-rgb: 146, 138, 255;
+ --aa-muted-color-rgb: 146, 138, 255;
+ /* Background colors*/
+ --aa-input-background-color-rgb: 0, 3, 9;
+ --aa-background-color-rgb: 21, 24, 42;
+ --aa-selected-color-rgb: 146, 138, 255;
+ --aa-selected-color-alpha: 0.25;
+ --aa-description-highlight-background-color-rgb: 0 255 255;
+ --aa-description-highlight-background-color-alpha: 0.25;
+ /* Icons*/
+ --aa-icon-color-rgb: 119, 119, 163;
+ /* Shadows*/
+ --aa-panel-shadow: inset 1px 1px 0 0 rgb(44, 46, 64),
+ 0 3px 8px 0 rgb(0, 3, 9);
+ /* Scrollbar*/
+ --aa-scrollbar-track-background-color-rgb: 44, 46, 64;
+ --aa-scrollbar-thumb-background-color-rgb: var(--aa-background-color-rgb);
}
-.aa-Autocomplete,.aa-DetachedFormContainer,.aa-Panel{
- color:#262627;
- color:rgba(var(--aa-text-color-rgb),var(--aa-text-color-alpha));
- font-family:inherit;
- font-family:var(--aa-font-family);
- font-size:16px;
- font-size:var(--aa-font-size);
- font-weight:400;
- line-height:1em;
- margin:0;
- padding:0;
- text-align:left
+/* Reset for `@extend`*/
+
+.aa-Panel *, .aa-Autocomplete *, .aa-DetachedFormContainer * {
+ box-sizing: border-box;
}
-.aa-Form{
- align-items:center;
- background-color:#fff;
- background-color:rgba(var(--aa-input-background-color-rgb),var(--aa-input-background-color-alpha));
- border:1px solid rgba(128,126,163,.8);
- border:1px solid rgba(var(--aa-input-border-color-rgb),var(--aa-input-border-color-alpha));
- border-radius:3px;
- display:flex;
- line-height:1em;
- margin:0;
- position:relative;
- width:100%
+/* Init for `@extend`*/
+
+.aa-Panel, .aa-Autocomplete, .aa-DetachedFormContainer {
+ color: rgba(38, 38, 39, 1);
+ color: rgba(var(--aa-text-color-rgb), var(--aa-text-color-alpha));
+ font-family: inherit;
+ font-family: var(--aa-font-family);
+ font-size: calc(16 * 1px);
+ font-size: var(--aa-font-size);
+ font-weight: normal;
+ line-height: 1em;
+ margin: 0;
+ padding: 0;
+ text-align: left;
}
-.aa-Form[focus-within]{
- border-color:#3e34d3;
- border-color:rgba(var(--aa-primary-color-rgb),1);
- box-shadow:0 0 0 2px rgba(62,52,211,.2),inset 0 0 0 2px rgba(62,52,211,.2);
- box-shadow:rgba(var(--aa-primary-color-rgb),var(--aa-primary-color-alpha)) 0 0 0 2px,inset rgba(var(--aa-primary-color-rgb),var(--aa-primary-color-alpha)) 0 0 0 2px;
- outline:medium none currentColor
+/* ----------------*/
+
+/* 3. Autocomplete*/
+
+/* ----------------*/
+
+.aa-Autocomplete,
+.aa-DetachedFormContainer {
+ /* Search box*/
}
-.aa-Form:focus-within{
- border-color:#3e34d3;
- border-color:rgba(var(--aa-primary-color-rgb),1);
- box-shadow:0 0 0 2px rgba(62,52,211,.2),inset 0 0 0 2px rgba(62,52,211,.2);
- box-shadow:rgba(var(--aa-primary-color-rgb),var(--aa-primary-color-alpha)) 0 0 0 2px,inset rgba(var(--aa-primary-color-rgb),var(--aa-primary-color-alpha)) 0 0 0 2px;
- outline:medium none currentColor
+.aa-Form {
+ align-items: center;
+ background-color: rgba(255, 255, 255, 1);
+ background-color: rgba(var(--aa-input-background-color-rgb), var(--aa-input-background-color-alpha));
+ border: 1px solid rgba(128, 126, 163, 0.8);
+ border: 1px solid rgba(var(--aa-input-border-color-rgb), var(--aa-input-border-color-alpha));
+ border-radius: 3px;
+ display: flex;
+ line-height: 1em;
+ margin: 0;
+ position: relative;
+ width: 100%;
}
-.aa-InputWrapperPrefix{
- align-items:center;
- display:flex;
- flex-shrink:0;
- height:44px;
- height:var(--aa-search-input-height);
- order:1
+.aa-Form:focus-within {
+ border-color: rgba(62, 52, 211, 1);
+ border-color: rgba(var(--aa-primary-color-rgb), 1);
+ box-shadow: rgba(62, 52, 211, 0.2) 0 0 0 2px, inset rgba(62, 52, 211, 0.2) 0 0 0 2px;
+ box-shadow: rgba(var(--aa-primary-color-rgb), var(--aa-primary-color-alpha)) 0 0 0 2px, inset rgba(var(--aa-primary-color-rgb), var(--aa-primary-color-alpha)) 0 0 0 2px;
+ outline: currentColor none medium;
}
-.aa-Label,.aa-LoadingIndicator{
- cursor:auto;
- flex-shrink:0;
- height:100%;
- padding:0;
- text-align:left
+.aa-InputWrapperPrefix {
+ align-items: center;
+ display: flex;
+ flex-shrink: 0;
+ height: 44px;
+ height: var(--aa-search-input-height);
+ order: 1;
+ /* Container for search and loading icons*/
}
-.aa-Label svg,.aa-LoadingIndicator svg{
- color:#3e34d3;
- color:rgba(var(--aa-primary-color-rgb),1);
- height:auto;
- max-height:20px;
- max-height:var(--aa-input-icon-size);
- stroke-width:1.6;
- stroke-width:var(--aa-icon-stroke-width);
- width:20px;
- width:var(--aa-input-icon-size)
+.aa-Label,
+.aa-LoadingIndicator {
+ cursor: auto;
+ cursor: initial;
+ flex-shrink: 0;
+ height: 100%;
+ padding: 0;
+ text-align: left;
}
-.aa-LoadingIndicator,.aa-SubmitButton{
- height:100%;
- padding-left:11px;
- padding-left:calc(var(--aa-spacing)*0.75 - 1px);
- padding-right:8px;
- padding-right:var(--aa-spacing-half);
- width:47px;
- width:calc(var(--aa-spacing)*1.75 + var(--aa-icon-size) - 1px)
+.aa-Label svg,
+.aa-LoadingIndicator svg {
+ color: rgba(62, 52, 211, 1);
+ color: rgba(var(--aa-primary-color-rgb), 1);
+ height: auto;
+ max-height: 20px;
+ max-height: var(--aa-input-icon-size);
+ stroke-width: 1.6;
+ stroke-width: var(--aa-icon-stroke-width);
+ width: 20px;
+ width: var(--aa-input-icon-size);
}
-@media (hover:none) and (pointer:coarse){
- .aa-LoadingIndicator,.aa-SubmitButton{
- padding-left:3px;
- padding-left:calc(var(--aa-spacing-half)/2 - 1px);
- width:39px;
- width:calc(var(--aa-icon-size) + var(--aa-spacing)*1.25 - 1px)
+.aa-SubmitButton,
+.aa-LoadingIndicator {
+ height: 100%;
+ padding-left: calc((16 * 1 * 1px) * 0.75 - 1px);
+ padding-left: calc(calc(16 * 1 * 1px) * 0.75 - 1px);
+ padding-left: calc(var(--aa-spacing) * 0.75 - 1px);
+ padding-right: calc((16 * 1 * 1px) / 2);
+ padding-right: calc(calc(16 * 1 * 1px) / 2);
+ padding-right: var(--aa-spacing-half);
+ width: calc((16 * 1 * 1px) * 1.75 + 20px - 1px);
+ width: calc(calc(16 * 1 * 1px) * 1.75 + 20px - 1px);
+ width: calc(var(--aa-spacing) * 1.75 + var(--aa-icon-size) - 1px);
+}
+
+@media (hover: none) and (pointer: coarse) {
+ .aa-SubmitButton,
+ .aa-LoadingIndicator {
+ padding-left: calc(((16 * 1 * 1px) / 2) / 2 - 1px);
+ padding-left: calc(calc(calc(16 * 1 * 1px) / 2) / 2 - 1px);
+ padding-left: calc(var(--aa-spacing-half) / 2 - 1px);
+ width: calc(20px + (16 * 1 * 1px) * 1.25 - 1px);
+ width: calc(20px + calc(16 * 1 * 1px) * 1.25 - 1px);
+ width: calc(var(--aa-icon-size) + var(--aa-spacing) * 1.25 - 1px);
}
}
-.aa-SubmitButton{
- appearance:none;
- background:none;
- border:0;
- margin:0
+.aa-SubmitButton {
+ appearance: none;
+ background: none;
+ border: 0;
+ margin: 0;
}
-.aa-LoadingIndicator{
- align-items:center;
- display:flex;
- justify-content:center
+.aa-LoadingIndicator {
+ align-items: center;
+ display: flex;
+ justify-content: center;
}
-.aa-LoadingIndicator[hidden]{
- display:none
+.aa-LoadingIndicator[hidden] {
+ display: none;
}
-.aa-InputWrapper{
- order:3;
- position:relative;
- width:100%
+.aa-InputWrapper {
+ order: 3;
+ position: relative;
+ width: 100%;
+ /* Search box input (with placeholder and query)*/
}
-.aa-Input{
- appearance:none;
- background:none;
- border:0;
- color:#262627;
- color:rgba(var(--aa-text-color-rgb),var(--aa-text-color-alpha));
- font:inherit;
- height:44px;
- height:var(--aa-search-input-height);
- padding:0;
- width:100%
+.aa-Input {
+ appearance: none;
+ background: none;
+ border: 0;
+ color: rgba(38, 38, 39, 1);
+ color: rgba(var(--aa-text-color-rgb), var(--aa-text-color-alpha));
+ font: inherit;
+ height: 44px;
+ height: var(--aa-search-input-height);
+ padding: 0;
+ width: 100%;
+ /* Focus is set and styled on the parent, it isn't necessary here*/
+ /* Remove native appearance*/
}
-.aa-Input::placeholder{
- color:rgba(128,126,163,.6);
- color:rgba(var(--aa-muted-color-rgb),var(--aa-muted-color-alpha));
- opacity:1
+.aa-Input::placeholder {
+ color: rgba(128, 126, 163, 0.6);
+ color: rgba(var(--aa-muted-color-rgb), var(--aa-muted-color-alpha));
+ opacity: 1;
}
-.aa-Input:focus{
- border-color:none;
- box-shadow:none;
- outline:none
+.aa-Input:focus {
+ border-color: none;
+ box-shadow: none;
+ outline: none;
}
-.aa-Input::-webkit-search-cancel-button,.aa-Input::-webkit-search-decoration,.aa-Input::-webkit-search-results-button,.aa-Input::-webkit-search-results-decoration{
- appearance:none
+.aa-Input::-webkit-search-decoration, .aa-Input::-webkit-search-cancel-button, .aa-Input::-webkit-search-results-button, .aa-Input::-webkit-search-results-decoration {
+ appearance: none;
}
-.aa-InputWrapperSuffix{
- align-items:center;
- display:flex;
- height:44px;
- height:var(--aa-search-input-height);
- order:4
+.aa-InputWrapperSuffix {
+ align-items: center;
+ display: flex;
+ height: 44px;
+ height: var(--aa-search-input-height);
+ order: 4;
+ /* Accelerator to clear the query*/
}
-.aa-ClearButton{
- align-items:center;
- background:none;
- border:0;
- color:rgba(128,126,163,.6);
- color:rgba(var(--aa-muted-color-rgb),var(--aa-muted-color-alpha));
- cursor:pointer;
- display:flex;
- height:100%;
- margin:0;
- padding:0 12.83333px;
- padding:0 calc(var(--aa-spacing)*0.83333 - .5px)
+.aa-ClearButton {
+ align-items: center;
+ background: none;
+ border: 0;
+ color: rgba(128, 126, 163, 0.6);
+ color: rgba(var(--aa-muted-color-rgb), var(--aa-muted-color-alpha));
+ cursor: pointer;
+ display: flex;
+ height: 100%;
+ margin: 0;
+ padding: 0 calc((16 * 1 * 1px) * 0.8333333333 - 0.5px);
+ padding: 0 calc(calc(16 * 1 * 1px) * 0.8333333333 - 0.5px);
+ padding: 0 calc(var(--aa-spacing) * 0.8333333333 - 0.5px);
}
-@media (hover:none) and (pointer:coarse){
- .aa-ClearButton{
- padding:0 10.16667px;
- padding:0 calc(var(--aa-spacing)*0.66667 - .5px)
+@media (hover: none) and (pointer: coarse) {
+ .aa-ClearButton {
+ padding: 0 calc((16 * 1 * 1px) * 0.6666666667 - 0.5px);
+ padding: 0 calc(calc(16 * 1 * 1px) * 0.6666666667 - 0.5px);
+ padding: 0 calc(var(--aa-spacing) * 0.6666666667 - 0.5px);
}
}
-.aa-ClearButton:focus,.aa-ClearButton:hover{
- color:#262627;
- color:rgba(var(--aa-text-color-rgb),var(--aa-text-color-alpha))
+.aa-ClearButton:hover, .aa-ClearButton:focus {
+ color: rgba(38, 38, 39, 1);
+ color: rgba(var(--aa-text-color-rgb), var(--aa-text-color-alpha));
}
-.aa-ClearButton[hidden]{
- display:none
+.aa-ClearButton[hidden] {
+ display: none;
}
-.aa-ClearButton svg{
- stroke-width:1.6;
- stroke-width:var(--aa-icon-stroke-width);
- width:20px;
- width:var(--aa-icon-size)
+.aa-ClearButton svg {
+ stroke-width: 1.6;
+ stroke-width: var(--aa-icon-stroke-width);
+ width: 20px;
+ width: var(--aa-icon-size);
}
-.aa-Panel{
- background-color:#fff;
- background-color:rgba(var(--aa-background-color-rgb),var(--aa-background-color-alpha));
- border-radius:4px;
- border-radius:calc(var(--aa-spacing)/4);
- box-shadow:0 0 0 1px rgba(35,38,59,.1),0 6px 16px -4px rgba(35,38,59,.15);
- box-shadow:var(--aa-panel-shadow);
- margin:8px 0 0;
- overflow:hidden;
- position:absolute;
- transition:opacity .2s ease-in,filter .2s ease-in
+/* ----------------*/
+
+/* 4. Panel*/
+
+/* ----------------*/
+
+.aa-Panel {
+ background-color: rgba(255, 255, 255, 1);
+ background-color: rgba(var(--aa-background-color-rgb), var(--aa-background-color-alpha));
+ border-radius: calc((16 * 1 * 1px) / 4);
+ border-radius: calc(calc(16 * 1 * 1px) / 4);
+ border-radius: calc(var(--aa-spacing) / 4);
+ box-shadow: 0 0 0 1px rgba(35, 38, 59, 0.1),
+ 0 6px 16px -4px rgba(35, 38, 59, 0.15);
+ box-shadow: var(--aa-panel-shadow);
+ margin: 8px 0 0;
+ overflow: hidden;
+ position: absolute;
+ transition: opacity 200ms ease-in, filter 200ms ease-in;
+ /* When a request isn't resolved yet*/
}
-@media screen and (prefers-reduced-motion){
- .aa-Panel{
- transition:none
+@media screen and (prefers-reduced-motion) {
+ .aa-Panel {
+ transition: none;
}
}
-.aa-Panel button{
- appearance:none;
- background:none;
- border:0;
- margin:0;
- padding:0
+.aa-Panel button {
+ appearance: none;
+ background: none;
+ border: 0;
+ margin: 0;
+ padding: 0;
}
-.aa-PanelLayout{
- height:100%;
- margin:0;
- max-height:650px;
- max-height:var(--aa-panel-max-height);
- overflow-y:auto;
- padding:0;
- position:relative;
- text-align:left
+.aa-PanelLayout {
+ height: 100%;
+ margin: 0;
+ max-height: 650px;
+ max-height: var(--aa-panel-max-height);
+ overflow-y: auto;
+ padding: 0;
+ position: relative;
+ text-align: left;
}
-.aa-PanelLayoutColumns--twoGolden{
- display:grid;
- grid-template-columns:39.2% auto;
- overflow:hidden;
- padding:0
+.aa-PanelLayoutColumns--twoGolden {
+ display: grid;
+ grid-template-columns: 39.2% auto;
+ overflow: hidden;
+ padding: 0;
}
-.aa-PanelLayoutColumns--two{
- display:grid;
- grid-template-columns:repeat(2,minmax(0,1fr));
- overflow:hidden;
- padding:0
+.aa-PanelLayoutColumns--two {
+ display: grid;
+ grid-template-columns: repeat(2, minmax(0, 1fr));
+ overflow: hidden;
+ padding: 0;
}
-.aa-PanelLayoutColumns--three{
- display:grid;
- grid-template-columns:repeat(3,minmax(0,1fr));
- overflow:hidden;
- padding:0
+.aa-PanelLayoutColumns--three {
+ display: grid;
+ grid-template-columns: repeat(3, minmax(0, 1fr));
+ overflow: hidden;
+ padding: 0;
}
-.aa-Panel--stalled .aa-Source{
- filter:grayscale(1);
- opacity:.8
+.aa-Panel--stalled .aa-Source {
+ filter: grayscale(1);
+ opacity: 0.8;
}
-.aa-Panel--scrollable{
- margin:0;
- max-height:650px;
- max-height:var(--aa-panel-max-height);
- overflow-x:hidden;
- overflow-y:auto;
- padding:8px;
- padding:var(--aa-spacing-half);
- scrollbar-color:#fff #eaeaea;
- scrollbar-color:rgba(var(--aa-scrollbar-thumb-background-color-rgb),var(--aa-scrollbar-thumb-background-color-alpha)) rgba(var(--aa-scrollbar-track-background-color-rgb),var(--aa-scrollbar-track-background-color-alpha));
- scrollbar-width:thin
+.aa-Panel--scrollable {
+ margin: 0;
+ max-height: 650px;
+ max-height: var(--aa-panel-max-height);
+ overflow-x: hidden;
+ overflow-y: auto;
+ padding: calc((16 * 1 * 1px) / 2);
+ padding: calc(calc(16 * 1 * 1px) / 2);
+ padding: var(--aa-spacing-half);
+ scrollbar-color: rgba(255, 255, 255, 1) rgba(234, 234, 234, 1);
+ scrollbar-color: rgba(var(--aa-scrollbar-thumb-background-color-rgb), var(--aa-scrollbar-thumb-background-color-alpha)) rgba(var(--aa-scrollbar-track-background-color-rgb), var(--aa-scrollbar-track-background-color-alpha));
+ scrollbar-width: thin;
}
-.aa-Panel--scrollable::-webkit-scrollbar{
- width:13px;
- width:var(--aa-scrollbar-width)
+.aa-Panel--scrollable::-webkit-scrollbar {
+ width: 13px;
+ width: var(--aa-scrollbar-width);
}
-.aa-Panel--scrollable::-webkit-scrollbar-track{
- background-color:#eaeaea;
- background-color:rgba(var(--aa-scrollbar-track-background-color-rgb),var(--aa-scrollbar-track-background-color-alpha))
+.aa-Panel--scrollable::-webkit-scrollbar-track {
+ background-color: rgba(234, 234, 234, 1);
+ background-color: rgba(var(--aa-scrollbar-track-background-color-rgb), var(--aa-scrollbar-track-background-color-alpha));
}
-.aa-Panel--scrollable::-webkit-scrollbar-thumb{
- background-color:#fff;
- background-color:rgba(var(--aa-scrollbar-thumb-background-color-rgb),var(--aa-scrollbar-thumb-background-color-alpha));
- border-radius:9999px;
- border:3px solid #eaeaea;
- border-color:rgba(var(--aa-scrollbar-track-background-color-rgb),var(--aa-scrollbar-track-background-color-alpha));
- border-right:2px solid rgba(var(--aa-scrollbar-track-background-color-rgb),var(--aa-scrollbar-track-background-color-alpha))
+.aa-Panel--scrollable::-webkit-scrollbar-thumb {
+ background-color: rgba(255, 255, 255, 1);
+ background-color: rgba(var(--aa-scrollbar-thumb-background-color-rgb), var(--aa-scrollbar-thumb-background-color-alpha));
+ border-color: rgba(234, 234, 234, 1);
+ border-color: rgba(var(--aa-scrollbar-track-background-color-rgb), var(--aa-scrollbar-track-background-color-alpha));
+ border-radius: 9999px;
+ border-style: solid;
+ border-width: 3px 2px 3px 3px;
}
-.aa-Source{
- margin:0;
- padding:0;
- position:relative;
- width:100%
-}
+/* ----------------*/
-.aa-Source:empty{
- display:none
+/* 5. Sources*/
+
+/* Each source can be styled independently*/
+
+/* ----------------*/
+
+.aa-Source {
+ margin: 0;
+ padding: 0;
+ position: relative;
+ width: 100%;
+ /* List of results inside the source*/
+ /* Source title*/
+ /* See all button*/
}
-.aa-SourceNoResults{
- font-size:1em;
- margin:0;
- padding:16px;
- padding:var(--aa-spacing)
+.aa-Source:empty {
+ /* Hide empty section*/
+ display: none;
}
-.aa-List{
- list-style:none;
- margin:0
+.aa-SourceNoResults {
+ font-size: 1em;
+ margin: 0;
+ padding: calc(16 * 1 * 1px);
+ padding: var(--aa-spacing);
}
-.aa-List,.aa-SourceHeader{
- padding:0;
- position:relative
+.aa-List {
+ list-style: none;
+ margin: 0;
+ padding: 0;
+ position: relative;
}
-.aa-SourceHeader{
- margin:8px .5em 8px 0;
- margin:var(--aa-spacing-half) .5em var(--aa-spacing-half) 0
+.aa-SourceHeader {
+ margin: calc((16 * 1 * 1px) / 2) 0.5em calc((16 * 1 * 1px) / 2) 0;
+ margin: calc(calc(16 * 1 * 1px) / 2) 0.5em calc(calc(16 * 1 * 1px) / 2) 0;
+ margin: var(--aa-spacing-half) 0.5em var(--aa-spacing-half) 0;
+ padding: 0;
+ position: relative;
+ /* Hide empty header*/
+ /* Title typography*/
+ /* Line separator*/
}
-.aa-SourceHeader:empty{
- display:none
+.aa-SourceHeader:empty {
+ display: none;
}
-.aa-SourceHeaderTitle{
- background:#fff;
- background:rgba(var(--aa-background-color-rgb),var(--aa-background-color-alpha));
- color:#3e34d3;
- color:rgba(var(--aa-primary-color-rgb),1);
- display:inline-block;
- font-size:.8em;
- font-weight:600;
- font-weight:var(--aa-font-weight-semibold);
- margin:0;
- padding:0 8px 0 0;
- padding:0 var(--aa-spacing-half) 0 0;
- position:relative;
- z-index:9999;
- z-index:var(--aa-base-z-index)
+.aa-SourceHeaderTitle {
+ background: rgba(255, 255, 255, 1);
+ background: rgba(var(--aa-background-color-rgb), var(--aa-background-color-alpha));
+ color: rgba(62, 52, 211, 1);
+ color: rgba(var(--aa-primary-color-rgb), 1);
+ display: inline-block;
+ font-size: 0.8em;
+ font-weight: 600;
+ font-weight: var(--aa-font-weight-semibold);
+ margin: 0;
+ padding: 0 calc((16 * 1 * 1px) / 2) 0 0;
+ padding: 0 calc(calc(16 * 1 * 1px) / 2) 0 0;
+ padding: 0 var(--aa-spacing-half) 0 0;
+ position: relative;
+ z-index: 9999;
+ z-index: var(--aa-base-z-index);
}
-.aa-SourceHeaderLine{
- border-bottom:1px solid #3e34d3;
- border-bottom:1px solid rgba(var(--aa-primary-color-rgb),1);
- display:block;
- height:2px;
- left:0;
- margin:0;
- opacity:.3;
- padding:0;
- position:absolute;
- right:0;
- top:8px;
- top:var(--aa-spacing-half);
- z-index:9998;
- z-index:calc(var(--aa-base-z-index) - 1)
+.aa-SourceHeaderLine {
+ border-bottom: solid 1px rgba(62, 52, 211, 1);
+ border-bottom: solid 1px rgba(var(--aa-primary-color-rgb), 1);
+ display: block;
+ height: 2px;
+ left: 0;
+ margin: 0;
+ opacity: 0.3;
+ padding: 0;
+ position: absolute;
+ right: 0;
+ top: calc((16 * 1 * 1px) / 2);
+ top: calc(calc(16 * 1 * 1px) / 2);
+ top: var(--aa-spacing-half);
+ z-index: calc(9999 - 1);
+ z-index: calc(var(--aa-base-z-index) - 1);
}
-.aa-SourceFooterSeeAll{
- background:linear-gradient(180deg,#fff,rgba(128,126,163,.14));
- background:linear-gradient(180deg,rgba(var(--aa-background-color-rgb),var(--aa-background-color-alpha)),rgba(128,126,163,.14));
- border:1px solid rgba(128,126,163,.6);
- border:1px solid rgba(var(--aa-muted-color-rgb),var(--aa-muted-color-alpha));
- border-radius:5px;
- box-shadow:inset 0 0 2px #fff,0 2px 2px -1px rgba(76,69,88,.15);
- color:inherit;
- font-size:.95em;
- font-weight:500;
- font-weight:var(--aa-font-weight-medium);
- padding:.475em 1em .6em;
- text-decoration:none
+.aa-SourceFooterSeeAll {
+ background: linear-gradient(180deg, rgba(255, 255, 255, 1), rgba(128, 126, 163, 0.14));
+ background: linear-gradient(180deg, rgba(var(--aa-background-color-rgb), var(--aa-background-color-alpha)), rgba(128, 126, 163, 0.14));
+ border: 1px solid rgba(128, 126, 163, 0.6);
+ border: 1px solid rgba(var(--aa-muted-color-rgb), var(--aa-muted-color-alpha));
+ border-radius: 5px;
+ box-shadow: inset 0 0 2px #fff, 0 2px 2px -1px rgba(76, 69, 88, 0.15);
+ color: inherit;
+ font-size: 0.95em;
+ font-weight: 500;
+ font-weight: var(--aa-font-weight-medium);
+ padding: 0.475em 1em 0.6em;
+ -webkit-text-decoration: none;
+ text-decoration: none;
}
-.aa-SourceFooterSeeAll:focus,.aa-SourceFooterSeeAll:hover{
- border:1px solid #3e34d3;
- border:1px solid rgba(var(--aa-primary-color-rgb),1);
- color:#3e34d3;
- color:rgba(var(--aa-primary-color-rgb),1)
+.aa-SourceFooterSeeAll:focus, .aa-SourceFooterSeeAll:hover {
+ border: 1px solid rgba(62, 52, 211, 1);
+ border: 1px solid rgba(var(--aa-primary-color-rgb), 1);
+ color: rgba(62, 52, 211, 1);
+ color: rgba(var(--aa-primary-color-rgb), 1);
}
-.aa-Item{
- align-items:center;
- border-radius:3px;
- cursor:pointer;
- min-height:40px;
- min-height:calc(var(--aa-spacing)*2.5);
- padding:4px;
- padding:calc(var(--aa-spacing-half)/2)
+/* ----------------*/
+
+/* 6. Hit Layout*/
+
+/* ----------------*/
+
+.aa-Item {
+ align-items: center;
+ border-radius: 3px;
+ cursor: pointer;
+ display: grid;
+ min-height: calc((16 * 1 * 1px) * 2.5);
+ min-height: calc(calc(16 * 1 * 1px) * 2.5);
+ min-height: calc(var(--aa-spacing) * 2.5);
+ padding: calc(((16 * 1 * 1px) / 2) / 2);
+ padding: calc(calc(calc(16 * 1 * 1px) / 2) / 2);
+ padding: calc(var(--aa-spacing-half) / 2);
+ /* When the result is active*/
+ /* The result type icon inlined SVG or image*/
+ /* wrap hit with url but we don't need to see it*/
+ /* Secondary click actions*/
}
-.aa-Item[aria-selected=true]{
- background-color:rgba(179,173,214,.205);
- background-color:rgba(var(--aa-selected-color-rgb),var(--aa-selected-color-alpha))
+.aa-Item[aria-selected=true] {
+ background-color: rgba(179, 173, 214, 0.205);
+ background-color: rgba(var(--aa-selected-color-rgb), var(--aa-selected-color-alpha));
}
-.aa-Item[aria-selected=true] .aa-ActiveOnly,.aa-Item[aria-selected=true] .aa-ItemActionButton{
- visibility:visible
+.aa-Item[aria-selected=true] .aa-ItemActionButton,
+.aa-Item[aria-selected=true] .aa-ActiveOnly {
+ visibility: visible;
}
-.aa-ItemIcon{
- align-items:center;
- background:#fff;
- background:rgba(var(--aa-background-color-rgb),var(--aa-background-color-alpha));
- border-radius:3px;
- box-shadow:inset 0 0 0 1px rgba(128,126,163,.3);
- box-shadow:inset 0 0 0 1px rgba(var(--aa-panel-border-color-rgb),var(--aa-panel-border-color-alpha));
- color:#7777a3;
- color:rgba(var(--aa-icon-color-rgb),var(--aa-icon-color-alpha));
- display:flex;
- flex-shrink:0;
- font-size:.7em;
- height:28px;
- height:calc(var(--aa-icon-size) + var(--aa-spacing-half));
- justify-content:center;
- overflow:hidden;
- stroke-width:1.6;
- stroke-width:var(--aa-icon-stroke-width);
- text-align:center;
- width:28px;
- width:calc(var(--aa-icon-size) + var(--aa-spacing-half))
+.aa-ItemIcon {
+ align-items: center;
+ background: rgba(255, 255, 255, 1);
+ background: rgba(var(--aa-background-color-rgb), var(--aa-background-color-alpha));
+ border-radius: 3px;
+ box-shadow: inset 0 0 0 1px rgba(128, 126, 163, 0.3);
+ box-shadow: inset 0 0 0 1px rgba(var(--aa-panel-border-color-rgb), var(--aa-panel-border-color-alpha));
+ color: rgba(119, 119, 163, 1);
+ color: rgba(var(--aa-icon-color-rgb), var(--aa-icon-color-alpha));
+ display: flex;
+ flex-shrink: 0;
+ font-size: 0.7em;
+ height: calc(20px + ((16 * 1 * 1px) / 2));
+ height: calc(20px + calc(calc(16 * 1 * 1px) / 2));
+ height: calc(var(--aa-icon-size) + var(--aa-spacing-half));
+ justify-content: center;
+ overflow: hidden;
+ stroke-width: 1.6;
+ stroke-width: var(--aa-icon-stroke-width);
+ text-align: center;
+ width: calc(20px + ((16 * 1 * 1px) / 2));
+ width: calc(20px + calc(calc(16 * 1 * 1px) / 2));
+ width: calc(var(--aa-icon-size) + var(--aa-spacing-half));
}
-.aa-ItemIcon img{
- height:auto;
- max-height:20px;
- max-height:calc(var(--aa-icon-size) + var(--aa-spacing-half) - 8px);
- max-width:20px;
- max-width:calc(var(--aa-icon-size) + var(--aa-spacing-half) - 8px);
- width:auto
+.aa-ItemIcon img {
+ height: auto;
+ max-height: calc(20px + ((16 * 1 * 1px) / 2) - 8px);
+ max-height: calc(20px + calc(calc(16 * 1 * 1px) / 2) - 8px);
+ max-height: calc(var(--aa-icon-size) + var(--aa-spacing-half) - 8px);
+ max-width: calc(20px + ((16 * 1 * 1px) / 2) - 8px);
+ max-width: calc(20px + calc(calc(16 * 1 * 1px) / 2) - 8px);
+ max-width: calc(var(--aa-icon-size) + var(--aa-spacing-half) - 8px);
+ width: auto;
}
-.aa-ItemIcon svg{
- height:20px;
- height:var(--aa-icon-size);
- width:20px;
- width:var(--aa-icon-size)
+.aa-ItemIcon svg {
+ height: 20px;
+ height: var(--aa-icon-size);
+ width: 20px;
+ width: var(--aa-icon-size);
}
-.aa-ItemIcon--alignTop{
- align-self:flex-start
+.aa-ItemIcon--alignTop {
+ align-self: flex-start;
}
-.aa-ItemIcon--noBorder{
- background:none;
- box-shadow:none
+.aa-ItemIcon--noBorder {
+ background: none;
+ box-shadow: none;
}
-.aa-ItemIcon--picture{
- height:96px;
- width:96px
+.aa-ItemIcon--picture {
+ height: 96px;
+ width: 96px;
}
-.aa-ItemIcon--picture img{
- max-height:100%;
- max-width:100%;
- padding:8px;
- padding:var(--aa-spacing-half)
+.aa-ItemIcon--picture img {
+ max-height: 100%;
+ max-width: 100%;
+ padding: calc((16 * 1 * 1px) / 2);
+ padding: calc(calc(16 * 1 * 1px) / 2);
+ padding: var(--aa-spacing-half);
}
-.aa-ItemContent{
- align-items:center;
- cursor:pointer;
- display:grid;
- grid-gap:8px;
- gap:8px;
- grid-gap:var(--aa-spacing-half);
- gap:var(--aa-spacing-half);
- grid-auto-flow:column;
- line-height:1.25em;
- overflow:hidden
+.aa-ItemContent {
+ align-items: center;
+ cursor: pointer;
+ display: grid;
+ gap: calc((16 * 1 * 1px) / 2);
+ gap: calc(calc(16 * 1 * 1px) / 2);
+ grid-gap: calc((16 * 1 * 1px) / 2);
+ grid-gap: calc(calc(16 * 1 * 1px) / 2);
+ grid-gap: var(--aa-spacing-half);
+ gap: var(--aa-spacing-half);
+ grid-auto-flow: column;
+ line-height: 1.25em;
+ overflow: hidden;
}
-.aa-ItemContent:empty{
- display:none
+.aa-ItemContent:empty {
+ display: none;
}
-.aa-ItemContent mark{
- background:none;
- color:#262627;
- color:rgba(var(--aa-text-color-rgb),var(--aa-text-color-alpha));
- font-style:normal;
- font-weight:700;
- font-weight:var(--aa-font-weight-bold)
+.aa-ItemContent mark {
+ background: none;
+ color: rgba(38, 38, 39, 1);
+ color: rgba(var(--aa-text-color-rgb), var(--aa-text-color-alpha));
+ font-style: normal;
+ font-weight: 700;
+ font-weight: var(--aa-font-weight-bold);
}
-.aa-ItemContent--dual{
- display:flex;
- flex-direction:column;
- justify-content:space-between;
- text-align:left
+.aa-ItemContent--dual {
+ display: flex;
+ flex-direction: column;
+ justify-content: space-between;
+ text-align: left;
}
-.aa-ItemContent--dual .aa-ItemContentSubtitle,.aa-ItemContent--dual .aa-ItemContentTitle{
- display:block
+.aa-ItemContent--dual .aa-ItemContentTitle,
+.aa-ItemContent--dual .aa-ItemContentSubtitle {
+ display: block;
}
-.aa-ItemContent--indented{
- padding-left:36px;
- padding-left:calc(var(--aa-icon-size) + var(--aa-spacing))
+.aa-ItemContent--indented {
+ padding-left: calc(20px + (16 * 1 * 1px));
+ padding-left: calc(20px + calc(16 * 1 * 1px));
+ padding-left: calc(var(--aa-icon-size) + var(--aa-spacing));
}
-.aa-ItemContentBody{
- display:grid;
- grid-gap:4px;
- gap:4px;
- grid-gap:calc(var(--aa-spacing-half)/2);
- gap:calc(var(--aa-spacing-half)/2)
+.aa-ItemContentBody {
+ display: grid;
+ gap: calc(((16 * 1 * 1px) / 2) / 2);
+ gap: calc(calc(calc(16 * 1 * 1px) / 2) / 2);
+ grid-gap: calc(((16 * 1 * 1px) / 2) / 2);
+ grid-gap: calc(calc(calc(16 * 1 * 1px) / 2) / 2);
+ grid-gap: calc(var(--aa-spacing-half) / 2);
+ gap: calc(var(--aa-spacing-half) / 2);
}
-.aa-ItemContentTitle{
- display:inline-block;
- margin:0 .5em 0 0;
- max-width:100%;
- overflow:hidden;
- padding:0;
- text-overflow:ellipsis;
- white-space:nowrap
+.aa-ItemContentTitle {
+ display: inline-block;
+ margin: 0 0.5em 0 0;
+ max-width: 100%;
+ overflow: hidden;
+ padding: 0;
+ text-overflow: ellipsis;
+ white-space: nowrap;
}
-.aa-ItemContentSubtitle{
- font-size:.92em
+.aa-ItemContentSubtitle {
+ font-size: 0.92em;
}
-.aa-ItemContentSubtitleIcon:before{
- border-color:rgba(128,126,163,.64);
- border-color:rgba(var(--aa-muted-color-rgb),.64);
- border-style:solid;
- content:"";
- display:inline-block;
- left:1px;
- position:relative;
- top:-3px
+.aa-ItemContentSubtitleIcon::before {
+ border-color: rgba(128, 126, 163, 0.64);
+ border-color: rgba(var(--aa-muted-color-rgb), 0.64);
+ border-style: solid;
+ content: "";
+ display: inline-block;
+ left: 1px;
+ position: relative;
+ top: -3px;
}
-.aa-ItemContentSubtitle--inline .aa-ItemContentSubtitleIcon:before{
- border-width:0 0 1.5px;
- margin-left:8px;
- margin-left:var(--aa-spacing-half);
- margin-right:4px;
- margin-right:calc(var(--aa-spacing-half)/2);
- width:10px;
- width:calc(var(--aa-spacing-half) + 2px)
+.aa-ItemContentSubtitle--inline .aa-ItemContentSubtitleIcon::before {
+ border-width: 0 0 1.5px;
+ margin-left: calc((16 * 1 * 1px) / 2);
+ margin-left: calc(calc(16 * 1 * 1px) / 2);
+ margin-left: var(--aa-spacing-half);
+ margin-right: calc(((16 * 1 * 1px) / 2) / 2);
+ margin-right: calc(calc(calc(16 * 1 * 1px) / 2) / 2);
+ margin-right: calc(var(--aa-spacing-half) / 2);
+ width: calc(((16 * 1 * 1px) / 2) + 2px);
+ width: calc(calc(calc(16 * 1 * 1px) / 2) + 2px);
+ width: calc(var(--aa-spacing-half) + 2px);
}
-.aa-ItemContentSubtitle--standalone{
- align-items:center;
- color:#262627;
- color:rgba(var(--aa-text-color-rgb),var(--aa-text-color-alpha));
- display:grid;
- grid-gap:8px;
- gap:8px;
- grid-gap:var(--aa-spacing-half);
- gap:var(--aa-spacing-half);
- grid-auto-flow:column;
- justify-content:start
+.aa-ItemContentSubtitle--standalone {
+ align-items: center;
+ color: rgba(38, 38, 39, 1);
+ color: rgba(var(--aa-text-color-rgb), var(--aa-text-color-alpha));
+ display: grid;
+ gap: calc((16 * 1 * 1px) / 2);
+ gap: calc(calc(16 * 1 * 1px) / 2);
+ grid-gap: calc((16 * 1 * 1px) / 2);
+ grid-gap: calc(calc(16 * 1 * 1px) / 2);
+ grid-gap: var(--aa-spacing-half);
+ gap: var(--aa-spacing-half);
+ grid-auto-flow: column;
+ justify-content: start;
}
-.aa-ItemContentSubtitle--standalone .aa-ItemContentSubtitleIcon:before{
- border-radius:0 0 0 3px;
- border-width:0 0 1.5px 1.5px;
- height:8px;
- height:var(--aa-spacing-half);
- width:8px;
- width:var(--aa-spacing-half)
+.aa-ItemContentSubtitle--standalone .aa-ItemContentSubtitleIcon::before {
+ border-radius: 0 0 0 3px;
+ border-width: 0 0 1.5px 1.5px;
+ height: calc((16 * 1 * 1px) / 2);
+ height: calc(calc(16 * 1 * 1px) / 2);
+ height: var(--aa-spacing-half);
+ width: calc((16 * 1 * 1px) / 2);
+ width: calc(calc(16 * 1 * 1px) / 2);
+ width: var(--aa-spacing-half);
}
-.aa-ItemContentSubtitleCategory{
- color:#807ea3;
- color:rgba(var(--aa-muted-color-rgb),1);
- font-weight:500
+.aa-ItemContentSubtitleCategory {
+ color: rgba(128, 126, 163, 1);
+ color: rgba(var(--aa-muted-color-rgb), 1);
+ font-weight: 500;
}
-.aa-ItemContentDescription{
- color:#262627;
- color:rgba(var(--aa-text-color-rgb),var(--aa-text-color-alpha));
- font-size:.85em;
- max-width:100%;
- overflow-x:hidden;
- text-overflow:ellipsis
+.aa-ItemContentDescription {
+ color: rgba(38, 38, 39, 1);
+ color: rgba(var(--aa-text-color-rgb), var(--aa-text-color-alpha));
+ font-size: 0.85em;
+ max-width: 100%;
+ overflow-x: hidden;
+ text-overflow: ellipsis;
}
-.aa-ItemContentDescription:empty{
- display:none
+.aa-ItemContentDescription:empty {
+ display: none;
}
-.aa-ItemContentDescription mark{
- background:rgba(245,223,77,.5);
- background:rgba(var(--aa-description-highlight-background-color-rgb),var(--aa-description-highlight-background-color-alpha));
- color:#262627;
- color:rgba(var(--aa-text-color-rgb),var(--aa-text-color-alpha));
- font-style:normal;
- font-weight:500;
- font-weight:var(--aa-font-weight-medium)
+.aa-ItemContentDescription mark {
+ background: rgba(245, 223, 77, 0.5);
+ background: rgba(var(--aa-description-highlight-background-color-rgb), var(--aa-description-highlight-background-color-alpha));
+ color: rgba(38, 38, 39, 1);
+ color: rgba(var(--aa-text-color-rgb), var(--aa-text-color-alpha));
+ font-style: normal;
+ font-weight: 500;
+ font-weight: var(--aa-font-weight-medium);
}
-.aa-ItemContentDash{
- color:rgba(128,126,163,.6);
- color:rgba(var(--aa-muted-color-rgb),var(--aa-muted-color-alpha));
- display:none;
- opacity:.4
+.aa-ItemContentDash {
+ color: rgba(128, 126, 163, 0.6);
+ color: rgba(var(--aa-muted-color-rgb), var(--aa-muted-color-alpha));
+ display: none;
+ opacity: 0.4;
}
-.aa-ItemContentTag{
- background-color:rgba(62,52,211,.2);
- background-color:rgba(var(--aa-primary-color-rgb),var(--aa-primary-color-alpha));
- border-radius:3px;
- margin:0 .4em 0 0;
- padding:.08em .3em
+.aa-ItemContentTag {
+ background-color: rgba(62, 52, 211, 0.2);
+ background-color: rgba(var(--aa-primary-color-rgb), var(--aa-primary-color-alpha));
+ border-radius: 3px;
+ margin: 0 0.4em 0 0;
+ padding: 0.08em 0.3em;
}
-.aa-ItemLink,.aa-ItemWrapper{
- align-items:center;
- color:inherit;
- display:grid;
- grid-gap:4px;
- gap:4px;
- grid-gap:calc(var(--aa-spacing-half)/2);
- gap:calc(var(--aa-spacing-half)/2);
- grid-auto-flow:column;
- justify-content:space-between;
- width:100%
+.aa-ItemWrapper,
+.aa-ItemLink {
+ align-items: center;
+ color: inherit;
+ display: grid;
+ gap: calc(((16 * 1 * 1px) / 2) / 2);
+ gap: calc(calc(calc(16 * 1 * 1px) / 2) / 2);
+ grid-gap: calc(((16 * 1 * 1px) / 2) / 2);
+ grid-gap: calc(calc(calc(16 * 1 * 1px) / 2) / 2);
+ grid-gap: calc(var(--aa-spacing-half) / 2);
+ gap: calc(var(--aa-spacing-half) / 2);
+ grid-auto-flow: column;
+ justify-content: space-between;
+ width: 100%;
}
-.aa-ItemLink{
- color:inherit;
- text-decoration:none
+.aa-ItemLink {
+ color: inherit;
+ -webkit-text-decoration: none;
+ text-decoration: none;
}
-.aa-ItemActions{
- display:grid;
- grid-auto-flow:column;
- height:100%;
- justify-self:end;
- margin:0 -5.33333px;
- margin:0 calc(var(--aa-spacing)/-3);
- padding:0 2px 0 0
+.aa-ItemActions {
+ display: grid;
+ grid-auto-flow: column;
+ height: 100%;
+ justify-self: end;
+ margin: 0 calc((16 * 1 * 1px) / -3);
+ margin: 0 calc(calc(16 * 1 * 1px) / -3);
+ margin: 0 calc(var(--aa-spacing) / -3);
+ padding: 0 2px 0 0;
}
-.aa-ItemActionButton{
- align-items:center;
- background:none;
- border:0;
- color:rgba(128,126,163,.6);
- color:rgba(var(--aa-muted-color-rgb),var(--aa-muted-color-alpha));
- cursor:pointer;
- display:flex;
- flex-shrink:0;
- padding:0
+.aa-ItemActionButton {
+ align-items: center;
+ background: none;
+ border: 0;
+ color: rgba(128, 126, 163, 0.6);
+ color: rgba(var(--aa-muted-color-rgb), var(--aa-muted-color-alpha));
+ cursor: pointer;
+ display: flex;
+ flex-shrink: 0;
+ padding: 0;
}
-.aa-ItemActionButton:focus svg,.aa-ItemActionButton:hover svg{
- color:#262627;
- color:rgba(var(--aa-text-color-rgb),var(--aa-text-color-alpha))
+.aa-ItemActionButton:hover svg, .aa-ItemActionButton:focus svg {
+ color: rgba(38, 38, 39, 1);
+ color: rgba(var(--aa-text-color-rgb), var(--aa-text-color-alpha));
}
-@media (hover:none) and (pointer:coarse){
- .aa-ItemActionButton:focus svg,.aa-ItemActionButton:hover svg{
- color:inherit
+@media (hover: none) and (pointer: coarse) {
+ .aa-ItemActionButton:hover svg, .aa-ItemActionButton:focus svg {
+ color: inherit;
}
}
-.aa-ItemActionButton svg{
- color:rgba(128,126,163,.6);
- color:rgba(var(--aa-muted-color-rgb),var(--aa-muted-color-alpha));
- margin:5.33333px;
- margin:calc(var(--aa-spacing)/3);
- stroke-width:1.6;
- stroke-width:var(--aa-icon-stroke-width);
- width:20px;
- width:var(--aa-action-icon-size)
+.aa-ItemActionButton svg {
+ color: rgba(128, 126, 163, 0.6);
+ color: rgba(var(--aa-muted-color-rgb), var(--aa-muted-color-alpha));
+ margin: 0;
+ margin: calc(calc(16 * 1 * 1px) / 3);
+ margin: calc(var(--aa-spacing) / 3);
+ stroke-width: 1.6;
+ stroke-width: var(--aa-icon-stroke-width);
+ width: 20px;
+ width: var(--aa-action-icon-size);
}
-.aa-ActiveOnly{
- visibility:hidden
+.aa-ActiveOnly {
+ visibility: hidden;
}
-.aa-PanelHeader{
- align-items:center;
- background:#3e34d3;
- background:rgba(var(--aa-primary-color-rgb),1);
- color:#fff;
- display:grid;
- height:var(--aa-modal-header-height);
- margin:0;
- padding:8px 16px;
- padding:var(--aa-spacing-half) var(--aa-spacing);
- position:relative
+/*----------------*/
+
+/* 7. Panel Header*/
+
+/*----------------*/
+
+.aa-PanelHeader {
+ align-items: center;
+ background: rgba(62, 52, 211, 1);
+ background: rgba(var(--aa-primary-color-rgb), 1);
+ color: #fff;
+ display: grid;
+ height: var(--aa-modal-header-height);
+ margin: 0;
+ padding: calc((16 * 1 * 1px) / 2) calc(16 * 1 * 1px);
+ padding: calc(calc(16 * 1 * 1px) / 2) calc(16 * 1 * 1px);
+ padding: var(--aa-spacing-half) var(--aa-spacing);
+ position: relative;
}
-.aa-PanelHeader:after{
- background-image:linear-gradient(#fff,hsla(0,0%,100%,0));
- background-image:linear-gradient(rgba(var(--aa-background-color-rgb),1),rgba(var(--aa-background-color-rgb),0));
- bottom:-8px;
- bottom:calc(var(--aa-spacing-half)*-1);
- content:"";
- height:8px;
- height:var(--aa-spacing-half);
- left:0;
- pointer-events:none;
- position:absolute;
- right:0
+.aa-PanelHeader::after {
+ background-image: linear-gradient(rgba(255, 255, 255, 1), rgba(255, 255, 255, 0));
+ background-image: linear-gradient(rgba(var(--aa-background-color-rgb), 1), rgba(var(--aa-background-color-rgb), 0));
+ bottom: calc(((16 * 1 * 1px) / 2) * -1);
+ bottom: calc(calc(calc(16 * 1 * 1px) / 2) * -1);
+ bottom: calc(var(--aa-spacing-half) * -1);
+ content: "";
+ height: calc((16 * 1 * 1px) / 2);
+ height: calc(calc(16 * 1 * 1px) / 2);
+ height: var(--aa-spacing-half);
+ left: 0;
+ pointer-events: none;
+ position: absolute;
+ right: 0;
+ z-index: 9999;
+ z-index: var(--aa-base-z-index);
}
-.aa-PanelFooter,.aa-PanelHeader:after{
- z-index:9999;
- z-index:var(--aa-base-z-index)
+/*----------------*/
+
+/* 8. Panel Footer*/
+
+/*----------------*/
+
+.aa-PanelFooter {
+ background-color: rgba(255, 255, 255, 1);
+ background-color: rgba(var(--aa-background-color-rgb), var(--aa-background-color-alpha));
+ box-shadow: inset 0 1px 0 rgba(128, 126, 163, 0.3);
+ box-shadow: inset 0 1px 0 rgba(var(--aa-panel-border-color-rgb), var(--aa-panel-border-color-alpha));
+ display: flex;
+ justify-content: space-between;
+ margin: 0;
+ padding: calc(16 * 1 * 1px);
+ padding: var(--aa-spacing);
+ position: relative;
+ z-index: 9999;
+ z-index: var(--aa-base-z-index);
}
-.aa-PanelFooter{
- background-color:#fff;
- background-color:rgba(var(--aa-background-color-rgb),var(--aa-background-color-alpha));
- box-shadow:inset 0 1px 0 rgba(128,126,163,.3);
- box-shadow:inset 0 1px 0 rgba(var(--aa-panel-border-color-rgb),var(--aa-panel-border-color-alpha));
- display:flex;
- justify-content:space-between;
- margin:0;
- padding:16px;
- padding:var(--aa-spacing);
- position:relative
+.aa-PanelFooter::after {
+ background-image: linear-gradient(rgba(255, 255, 255, 0), rgba(128, 126, 163, 0.6));
+ background-image: linear-gradient(rgba(var(--aa-background-color-rgb), 0), rgba(var(--aa-muted-color-rgb), var(--aa-muted-color-alpha)));
+ content: "";
+ height: calc(16 * 1 * 1px);
+ height: var(--aa-spacing);
+ left: 0;
+ opacity: 0.12;
+ pointer-events: none;
+ position: absolute;
+ right: 0;
+ top: calc((16 * 1 * 1px) * -1);
+ top: calc(calc(16 * 1 * 1px) * -1);
+ top: calc(var(--aa-spacing) * -1);
+ z-index: calc(9999 - 1);
+ z-index: calc(var(--aa-base-z-index) - 1);
}
-.aa-PanelFooter:after{
- background-image:linear-gradient(hsla(0,0%,100%,0),rgba(128,126,163,.6));
- background-image:linear-gradient(rgba(var(--aa-background-color-rgb),0),rgba(var(--aa-muted-color-rgb),var(--aa-muted-color-alpha)));
- content:"";
- height:16px;
- height:var(--aa-spacing);
- left:0;
- opacity:.12;
- pointer-events:none;
- position:absolute;
- right:0;
- top:-16px;
- top:calc(var(--aa-spacing)*-1);
- z-index:9998;
- z-index:calc(var(--aa-base-z-index) - 1)
+/*----------------*/
+
+/* 9. Detached Mode*/
+
+/*----------------*/
+
+.aa-DetachedContainer {
+ background: rgba(255, 255, 255, 1);
+ background: rgba(var(--aa-background-color-rgb), var(--aa-background-color-alpha));
+ bottom: 0;
+ box-shadow: 0 0 0 1px rgba(35, 38, 59, 0.1),
+ 0 6px 16px -4px rgba(35, 38, 59, 0.15);
+ box-shadow: var(--aa-panel-shadow);
+ display: flex;
+ flex-direction: column;
+ left: 0;
+ margin: 0;
+ overflow: hidden;
+ padding: 0;
+ position: fixed;
+ right: 0;
+ top: 0;
+ z-index: 9999;
+ z-index: var(--aa-base-z-index);
}
-.aa-DetachedContainer{
- background:#fff;
- background:rgba(var(--aa-background-color-rgb),var(--aa-background-color-alpha));
- bottom:0;
- box-shadow:0 0 0 1px rgba(35,38,59,.1),0 6px 16px -4px rgba(35,38,59,.15);
- box-shadow:var(--aa-panel-shadow);
- display:flex;
- flex-direction:column;
- left:0;
- margin:0;
- overflow:hidden;
- padding:0;
- position:fixed;
- right:0;
- top:0;
- z-index:9999;
- z-index:var(--aa-base-z-index)
+.aa-DetachedContainer::after {
+ height: 32px;
}
-.aa-DetachedContainer:after{
- height:32px
+.aa-DetachedContainer .aa-SourceHeader {
+ margin: calc((16 * 1 * 1px) / 2) 0 calc((16 * 1 * 1px) / 2) 2px;
+ margin: calc(calc(16 * 1 * 1px) / 2) 0 calc(calc(16 * 1 * 1px) / 2) 2px;
+ margin: var(--aa-spacing-half) 0 var(--aa-spacing-half) 2px;
}
-.aa-DetachedContainer .aa-SourceHeader{
- margin:8px 0 8px 2px;
- margin:var(--aa-spacing-half) 0 var(--aa-spacing-half) 2px
+.aa-DetachedContainer .aa-Panel {
+ background-color: rgba(255, 255, 255, 1);
+ background-color: rgba(var(--aa-background-color-rgb), var(--aa-background-color-alpha));
+ border-radius: 0;
+ box-shadow: none;
+ flex-grow: 1;
+ margin: 0;
+ padding: 0;
+ position: relative;
}
-.aa-DetachedContainer .aa-Panel{
- background-color:#fff;
- background-color:rgba(var(--aa-background-color-rgb),var(--aa-background-color-alpha));
- border-radius:0;
- box-shadow:none;
- flex-grow:1;
- margin:0;
- padding:0;
- position:relative
+.aa-DetachedContainer .aa-PanelLayout {
+ bottom: 0;
+ box-shadow: none;
+ left: 0;
+ margin: 0;
+ max-height: none;
+ overflow-y: auto;
+ position: absolute;
+ right: 0;
+ top: 0;
+ width: 100%;
}
-.aa-DetachedContainer .aa-PanelLayout{
- bottom:0;
- box-shadow:none;
- left:0;
- margin:0;
- max-height:none;
- overflow-y:auto;
- position:absolute;
- right:0;
- top:0;
- width:100%
+.aa-DetachedFormContainer {
+ border-bottom: solid 1px rgba(128, 126, 163, 0.3);
+ border-bottom: solid 1px rgba(var(--aa-panel-border-color-rgb), var(--aa-panel-border-color-alpha));
+ display: flex;
+ flex-direction: row;
+ justify-content: space-between;
+ margin: 0;
+ padding: calc((16 * 1 * 1px) / 2);
+ padding: calc(calc(16 * 1 * 1px) / 2);
+ padding: var(--aa-spacing-half);
}
-.aa-DetachedFormContainer{
- border-bottom:1px solid rgba(128,126,163,.3);
- border-bottom:1px solid rgba(var(--aa-panel-border-color-rgb),var(--aa-panel-border-color-alpha));
- display:flex;
- flex-direction:row;
- justify-content:space-between;
- margin:0;
- padding:8px;
- padding:var(--aa-spacing-half)
+.aa-DetachedCancelButton {
+ background: none;
+ border: 0;
+ border-radius: 3px;
+ color: inherit;
+ color: rgba(38, 38, 39, 1);
+ color: rgba(var(--aa-text-color-rgb), var(--aa-text-color-alpha));
+ cursor: pointer;
+ font: inherit;
+ margin: 0 0 0 calc((16 * 1 * 1px) / 2);
+ margin: 0 0 0 calc(calc(16 * 1 * 1px) / 2);
+ margin: 0 0 0 var(--aa-spacing-half);
+ padding: 0 calc((16 * 1 * 1px) / 2);
+ padding: 0 calc(calc(16 * 1 * 1px) / 2);
+ padding: 0 var(--aa-spacing-half);
}
-.aa-DetachedCancelButton{
- background:none;
- border:0;
- border-radius:3px;
- color:inherit;
- color:#262627;
- color:rgba(var(--aa-text-color-rgb),var(--aa-text-color-alpha));
- cursor:pointer;
- font:inherit;
- margin:0 0 0 8px;
- margin:0 0 0 var(--aa-spacing-half);
- padding:0 8px;
- padding:0 var(--aa-spacing-half)
+.aa-DetachedCancelButton:hover, .aa-DetachedCancelButton:focus {
+ box-shadow: inset 0 0 0 1px rgba(128, 126, 163, 0.3);
+ box-shadow: inset 0 0 0 1px rgba(var(--aa-panel-border-color-rgb), var(--aa-panel-border-color-alpha));
}
-.aa-DetachedCancelButton:focus,.aa-DetachedCancelButton:hover{
- box-shadow:inset 0 0 0 1px rgba(128,126,163,.3);
- box-shadow:inset 0 0 0 1px rgba(var(--aa-panel-border-color-rgb),var(--aa-panel-border-color-alpha))
+.aa-DetachedContainer--modal {
+ border-radius: 6px;
+ bottom: inherit;
+ height: auto;
+ margin: 0 auto;
+ max-width: 680px;
+ max-width: var(--aa-detached-modal-max-width);
+ position: absolute;
+ top: 3%;
}
-.aa-DetachedContainer--modal{
- border-radius:6px;
- bottom:inherit;
- height:auto;
- margin:0 auto;
- max-width:680px;
- max-width:var(--aa-detached-modal-max-width);
- position:absolute;
- top:3%
+.aa-DetachedContainer--modal .aa-PanelLayout {
+ max-height: 500px;
+ max-height: var(--aa-detached-modal-max-height);
+ padding-bottom: calc((16 * 1 * 1px) / 2);
+ padding-bottom: calc(calc(16 * 1 * 1px) / 2);
+ padding-bottom: var(--aa-spacing-half);
+ position: static;
}
-.aa-DetachedContainer--modal .aa-PanelLayout{
- max-height:500px;
- max-height:var(--aa-detached-modal-max-height);
- padding-bottom:8px;
- padding-bottom:var(--aa-spacing-half);
- position:static
+.aa-DetachedContainer--modal .aa-PanelLayout:empty {
+ display: none;
}
-.aa-DetachedSearchButton{
- align-items:center;
- background-color:#fff;
- background-color:rgba(var(--aa-input-background-color-rgb),var(--aa-input-background-color-alpha));
- border:1px solid rgba(128,126,163,.8);
- border:1px solid rgba(var(--aa-input-border-color-rgb),var(--aa-input-border-color-alpha));
- border-radius:3px;
- color:rgba(128,126,163,.6);
- color:rgba(var(--aa-muted-color-rgb),var(--aa-muted-color-alpha));
- cursor:pointer;
- display:flex;
- font:inherit;
- font-family:inherit;
- font-family:var(--aa-font-family);
- font-size:16px;
- font-size:var(--aa-font-size);
- height:44px;
- height:var(--aa-search-input-height);
- margin:0;
- padding:0 5.5px;
- padding:0 calc(var(--aa-search-input-height)/8);
- position:relative;
- text-align:left;
- width:100%
+/* Search Button*/
+
+.aa-DetachedSearchButton {
+ align-items: center;
+ background-color: rgba(255, 255, 255, 1);
+ background-color: rgba(var(--aa-input-background-color-rgb), var(--aa-input-background-color-alpha));
+ border: 1px solid rgba(128, 126, 163, 0.8);
+ border: 1px solid rgba(var(--aa-input-border-color-rgb), var(--aa-input-border-color-alpha));
+ border-radius: 3px;
+ color: rgba(128, 126, 163, 0.6);
+ color: rgba(var(--aa-muted-color-rgb), var(--aa-muted-color-alpha));
+ cursor: pointer;
+ display: flex;
+ font: inherit;
+ font-family: inherit;
+ font-family: var(--aa-font-family);
+ font-size: calc(16 * 1px);
+ font-size: var(--aa-font-size);
+ height: 44px;
+ height: var(--aa-search-input-height);
+ margin: 0;
+ padding: 0 calc(44px / 8);
+ padding: 0 calc(var(--aa-search-input-height) / 8);
+ position: relative;
+ text-align: left;
+ width: 100%;
}
-.aa-DetachedSearchButton:focus{
- border-color:#3e34d3;
- border-color:rgba(var(--aa-primary-color-rgb),1);
- box-shadow:0 0 0 3px rgba(62,52,211,.2),inset 0 0 0 2px rgba(62,52,211,.2);
- box-shadow:rgba(var(--aa-primary-color-rgb),var(--aa-primary-color-alpha)) 0 0 0 3px,inset rgba(var(--aa-primary-color-rgb),var(--aa-primary-color-alpha)) 0 0 0 2px;
- outline:medium none currentColor
+.aa-DetachedSearchButton:focus {
+ border-color: rgba(62, 52, 211, 1);
+ border-color: rgba(var(--aa-primary-color-rgb), 1);
+ box-shadow: rgba(62, 52, 211, 0.2) 0 0 0 3px, inset rgba(62, 52, 211, 0.2) 0 0 0 2px;
+ box-shadow: rgba(var(--aa-primary-color-rgb), var(--aa-primary-color-alpha)) 0 0 0 3px, inset rgba(var(--aa-primary-color-rgb), var(--aa-primary-color-alpha)) 0 0 0 2px;
+ outline: currentColor none medium;
}
-.aa-DetachedSearchButtonIcon{
- align-items:center;
- color:#3e34d3;
- color:rgba(var(--aa-primary-color-rgb),1);
- cursor:auto;
- display:flex;
- height:100%;
- justify-content:center;
- width:36px;
- width:calc(var(--aa-icon-size) + var(--aa-spacing))
+.aa-DetachedSearchButtonIcon {
+ align-items: center;
+ color: rgba(62, 52, 211, 1);
+ color: rgba(var(--aa-primary-color-rgb), 1);
+ cursor: auto;
+ cursor: initial;
+ display: flex;
+ flex-shrink: 0;
+ height: 100%;
+ justify-content: center;
+ width: calc(20px + (16 * 1 * 1px));
+ width: calc(20px + calc(16 * 1 * 1px));
+ width: calc(var(--aa-icon-size) + var(--aa-spacing));
}
-.aa-Detached{
- height:100vh;
- overflow:hidden
+.aa-DetachedSearchButtonQuery {
+ color: rgba(38, 38, 39, 1);
+ color: rgba(var(--aa-text-color-rgb), 1);
+ line-height: 1.25em;
+ overflow: hidden;
+ text-overflow: ellipsis;
+ white-space: nowrap;
}
-.aa-DetachedOverlay{
- background-color:rgba(115,114,129,.4);
- background-color:rgba(var(--aa-overlay-color-rgb),var(--aa-overlay-color-alpha));
- height:100vh;
- left:0;
- margin:0;
- padding:0;
- position:fixed;
- right:0;
- top:0;
- z-index:9998;
- z-index:calc(var(--aa-base-z-index) - 1)
+.aa-DetachedSearchButtonPlaceholder[hidden] {
+ display: none;
}
-.aa-GradientBottom,.aa-GradientTop{
- height:8px;
- height:var(--aa-spacing-half);
- left:0;
- pointer-events:none;
- position:absolute;
- right:13px;
- right:var(--aa-scrollbar-width);
- z-index:9999;
- z-index:var(--aa-base-z-index)
+/* Remove scroll on `body`*/
+
+.aa-Detached {
+ height: 100vh;
+ overflow: hidden;
}
-.aa-GradientTop{
- background-image:linear-gradient(#fff,hsla(0,0%,100%,0));
- background-image:linear-gradient(rgba(var(--aa-background-color-rgb),1),rgba(var(--aa-background-color-rgb),0));
- top:0
+.aa-DetachedOverlay {
+ background-color: rgba(115, 114, 129, 0.4);
+ background-color: rgba(var(--aa-overlay-color-rgb), var(--aa-overlay-color-alpha));
+ height: 100vh;
+ left: 0;
+ margin: 0;
+ padding: 0;
+ position: fixed;
+ right: 0;
+ top: 0;
+ z-index: calc(9999 - 1);
+ z-index: calc(var(--aa-base-z-index) - 1);
}
-.aa-GradientBottom{
- background-image:linear-gradient(hsla(0,0%,100%,0),#fff);
- background-image:linear-gradient(rgba(var(--aa-background-color-rgb),0),rgba(var(--aa-background-color-rgb),1));
- bottom:0
+/*----------------*/
+
+/* 10. Gradients*/
+
+/*----------------*/
+
+.aa-GradientTop,
+.aa-GradientBottom {
+ height: calc((16 * 1 * 1px) / 2);
+ height: calc(calc(16 * 1 * 1px) / 2);
+ height: var(--aa-spacing-half);
+ left: 0;
+ pointer-events: none;
+ position: absolute;
+ right: 0;
+ z-index: 9999;
+ z-index: var(--aa-base-z-index);
}
-@media (hover:none) and (pointer:coarse){
- .aa-DesktopOnly{
- display:none
+.aa-GradientTop {
+ background-image: linear-gradient(rgba(255, 255, 255, 1), rgba(255, 255, 255, 0));
+ background-image: linear-gradient(rgba(var(--aa-background-color-rgb), 1), rgba(var(--aa-background-color-rgb), 0));
+ top: 0;
+}
+
+.aa-GradientBottom {
+ background-image: linear-gradient(rgba(255, 255, 255, 0), rgba(255, 255, 255, 1));
+ background-image: linear-gradient(rgba(var(--aa-background-color-rgb), 0), rgba(var(--aa-background-color-rgb), 1));
+ border-bottom-left-radius: calc((16 * 1 * 1px) / 4);
+ border-bottom-left-radius: calc(calc(16 * 1 * 1px) / 4);
+ border-bottom-left-radius: calc(var(--aa-spacing) / 4);
+ border-bottom-right-radius: calc((16 * 1 * 1px) / 4);
+ border-bottom-right-radius: calc(calc(16 * 1 * 1px) / 4);
+ border-bottom-right-radius: calc(var(--aa-spacing) / 4);
+ bottom: 0;
+}
+
+/*----------------*/
+
+/* 11. Utilities*/
+
+/*----------------*/
+
+@media (hover: none) and (pointer: coarse) {
+ .aa-DesktopOnly {
+ display: none;
}
}
-@media (hover:hover){
- .aa-TouchOnly{
- display:none
+@media (hover: hover) {
+ .aa-TouchOnly {
+ display: none;
}
}
:root{
--tagify-dd-color-primary:rgb(53,149,246);
@@ -3358,10 +3590,11 @@
.tagify__dropdown__item{
box-sizing:border-box;
padding:var(--tagify-dd-item-pad);
margin:1px;
+ white-space:pre-wrap;
cursor:pointer;
border-radius:2px;
position:relative;
outline:0;
max-height:60px;
@@ -3391,11 +3624,11 @@
transform:translateY(-100%);
opacity:0;
transition:inherit
}
-/*! tailwindcss v3.3.5 | MIT License | https://tailwindcss.com
+/*! tailwindcss v3.3.6 | MIT License | https://tailwindcss.com
*/
/*
1. Prevent padding and border from affecting element width. (https://github.com/mozdevs/cssremedy/issues/4)
2. Allow adding a border to an element by just adding a border-width. (https://github.com/tailwindcss/tailwindcss/pull/116)
@@ -3511,22 +3744,28 @@
strong {
font-weight: bolder;
}
/*
-1. Use the user's configured `mono` font family by default.
-2. Correct the odd `em` font sizing in all browsers.
+1. Use the user's configured `mono` font-family by default.
+2. Use the user's configured `mono` font-feature-settings by default.
+3. Use the user's configured `mono` font-variation-settings by default.
+4. Correct the odd `em` font sizing in all browsers.
*/
code,
kbd,
samp,
pre {
font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
/* 1 */
- font-size: 1em;
+ font-feature-settings: normal;
/* 2 */
+ font-variation-settings: normal;
+ /* 3 */
+ font-size: 1em;
+ /* 4 */
}
/*
Add the correct font size in all browsers.
*/
@@ -3817,11 +4056,11 @@
[hidden] {
display: none;
}
-[type='text'],[type='email'],[type='url'],[type='password'],[type='number'],[type='date'],[type='datetime-local'],[type='month'],[type='search'],[type='tel'],[type='time'],[type='week'],[multiple],textarea,select{
+[type='text'],input:where(:not([type])),[type='email'],[type='url'],[type='password'],[type='number'],[type='date'],[type='datetime-local'],[type='month'],[type='search'],[type='tel'],[type='time'],[type='week'],[multiple],textarea,select{
appearance:none;
background-color:#fff;
border-color:#757D8A;
border-width:1px;
border-radius:0px;
@@ -3832,11 +4071,11 @@
font-size:1rem;
line-height:1.5rem;
--tw-shadow:0 0 #0000;
}
-[type='text']:focus, [type='email']:focus, [type='url']:focus, [type='password']:focus, [type='number']:focus, [type='date']:focus, [type='datetime-local']:focus, [type='month']:focus, [type='search']:focus, [type='tel']:focus, [type='time']:focus, [type='week']:focus, [multiple]:focus, textarea:focus, select:focus{
+[type='text']:focus, input:where(:not([type])):focus, [type='email']:focus, [type='url']:focus, [type='password']:focus, [type='number']:focus, [type='date']:focus, [type='datetime-local']:focus, [type='month']:focus, [type='search']:focus, [type='tel']:focus, [type='time']:focus, [type='week']:focus, [multiple]:focus, textarea:focus, select:focus{
outline:2px solid transparent;
outline-offset:2px;
--tw-ring-inset:var(--tw-empty,/*!*/ /*!*/);
--tw-ring-offset-width:0px;
--tw-ring-offset-color:#fff;
@@ -3855,38 +4094,48 @@
::-webkit-datetime-edit-fields-wrapper{
padding:0
}
::-webkit-date-and-time-value{
- min-height:1.5em
+ min-height:1.5em;
+ text-align:inherit
}
+::-webkit-datetime-edit{
+ display:inline-flex
+}
+
+::-webkit-datetime-edit,::-webkit-datetime-edit-year-field,::-webkit-datetime-edit-month-field,::-webkit-datetime-edit-day-field,::-webkit-datetime-edit-hour-field,::-webkit-datetime-edit-minute-field,::-webkit-datetime-edit-second-field,::-webkit-datetime-edit-millisecond-field,::-webkit-datetime-edit-meridiem-field{
+ padding-top:0;
+ padding-bottom:0
+}
+
select{
background-image:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%23757D8A' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e");
background-position:right 0.5rem center;
background-repeat:no-repeat;
background-size:1.5em 1.5em;
padding-right:2.5rem;
-webkit-print-color-adjust:exact;
- color-adjust:exact
+ print-color-adjust:exact
}
-[multiple]{
+[multiple],[size]:where(select:not([size="1"])){
background-image:initial;
background-position:initial;
background-repeat:unset;
background-size:initial;
padding-right:0.75rem;
-webkit-print-color-adjust:unset;
- color-adjust:unset
+ print-color-adjust:unset
}
[type='checkbox'],[type='radio']{
appearance:none;
padding:0;
-webkit-print-color-adjust:exact;
- color-adjust:exact;
+ print-color-adjust:exact;
display:inline-block;
vertical-align:middle;
background-origin:border-box;
-webkit-user-select:none;
user-select:none;
@@ -3927,17 +4176,29 @@
background-position:center;
background-repeat:no-repeat
}
[type='checkbox']:checked{
- background-image:url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='white' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M12.207 4.793a1 1 0 010 1.414l-5 5a1 1 0 01-1.414 0l-2-2a1 1 0 011.414-1.414L6.5 9.086l4.293-4.293a1 1 0 011.414 0z'/%3e%3c/svg%3e")
+ background-image:url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='white' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M12.207 4.793a1 1 0 010 1.414l-5 5a1 1 0 01-1.414 0l-2-2a1 1 0 011.414-1.414L6.5 9.086l4.293-4.293a1 1 0 011.414 0z'/%3e%3c/svg%3e");
}
+@media (forced-colors: active) {
+ [type='checkbox']:checked{
+ appearance:auto
+ }
+}
+
[type='radio']:checked{
- background-image:url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='white' xmlns='http://www.w3.org/2000/svg'%3e%3ccircle cx='8' cy='8' r='3'/%3e%3c/svg%3e")
+ background-image:url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='white' xmlns='http://www.w3.org/2000/svg'%3e%3ccircle cx='8' cy='8' r='3'/%3e%3c/svg%3e");
}
+@media (forced-colors: active) {
+ [type='radio']:checked{
+ appearance:auto
+ }
+}
+
[type='checkbox']:checked:hover,[type='checkbox']:checked:focus,[type='radio']:checked:hover,[type='radio']:checked:focus{
border-color:transparent;
background-color:currentColor
}
@@ -3945,13 +4206,19 @@
background-image:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 16 16'%3e%3cpath stroke='white' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M4 8h8'/%3e%3c/svg%3e");
border-color:transparent;
background-color:currentColor;
background-size:100% 100%;
background-position:center;
- background-repeat:no-repeat
+ background-repeat:no-repeat;
}
+@media (forced-colors: active) {
+ [type='checkbox']:indeterminate{
+ appearance:auto
+ }
+}
+
[type='checkbox']:indeterminate:hover,[type='checkbox']:indeterminate:focus{
border-color:transparent;
background-color:currentColor
}
@@ -3964,10 +4231,11 @@
font-size:unset;
line-height:inherit
}
[type='file']:focus{
+ outline:1px solid ButtonText;
outline:1px auto -webkit-focus-ring-color
}
a{
color:rgb(var(--color-primary-500))
@@ -7094,13 +7362,9 @@
min-height:100vh
}
.w-0{
width:0px
-}
-
-.w-1{
- width:0.25rem
}
.w-1\/2{
width:50%
}