uikit 3.21.14-dev.60ed95dfb → 3.21.14-dev.ac55757fb

package/CHANGELOG.md

@@ -1,5 +1,36 @@
 # Changelog
 
+## WIP Lightbox
+
+### Added
+
+- Add `slidnav` option to disable slidenav to Lightbox component
+- Add `nav` option to show a vertical thumbnav or dotnav to Lightbox component
+- Add `counter` option to show counter with current item number and total number of items to Lightbox component
+- Add `video-autoplay: inline` option to autoplay video without controls and muted to Lightbox component
+- Add zoom behavior to images and inline videos if they are higher than the viewport to Lightbox component
+- Allow `template` option to reference a `template` element in the DOM for the lightbox layout in Lightbox component
+- Add hidden class to hide empty elements to Visibility component
+- Add inverse style for form rang to Form component
+- Add close-circle and arrow-up-arrow-down icons
+
+### Changed
+
+- IMPORTANT: Remove `@lightbox-toolbar-icon-*` and `@lightbox-button-*`from Lightbox component
+- IMPORTANT: Rename `@lightbox-toolbar-*` to `@lightbox-caption-*` in Lightbox component
+- IMPORTANT: Rename `@lightbox-item-color` to `@lightbox-color` in Lightbox component
+- Set `delay-controls: 0` prevents hiding controls in Lightbox component
+- Update default lightbox template in Lightbox component
+- Change padding calculation of search box and search icon in Search component
+- Change search style medium and large to look the same as default in Search component
+
+### Fixed
+
+- Fix hidden class keep showing elements on hover if a link is clicked in Visibility component
+- Fix spaces in the markup affecting the horizontal divider margin in Breadcrumb component
+- Fix showing elements if an element has focus within in Transition component
+- Fix Slideshow component list does not fill available space in Safari
+
 ## 3.21.13 (September 26, 2024)
 
 ### Fixed

package/dist/css/uikit-core-rtl.css

@@ -1,4 +1,4 @@
-/*! UIkit 3.21.14-dev.60ed95dfb | https://www.getuikit.com | (c) 2014 - 2024 YOOtheme | MIT License */
+/*! UIkit 3.21.14-dev.ac55757fb | https://www.getuikit.com | (c) 2014 - 2024 YOOtheme | MIT License */
 /* ========================================================================
    Component: Base
  ========================================================================== */
@@ -1727,7 +1727,7 @@ select.uk-form-width-xsmall {
  * 1. Position and resize the form control to always cover its container
  * 2. Required for Firefox for positioning to the left
  * 3. Required for Webkit to make `height` work
- * 4. Hide controle and show cursor
+ * 4. Hide controls and show cursor
  * 5. Needed for the cursor
  * 6. Clip height caused by 5. Needed for Webkit only
  */
@@ -2047,7 +2047,7 @@ select.uk-form-width-xsmall {
 /* Group
  ========================================================================== */
 /*
- * 1. Using `flex` instead of `inline-block` to prevent whitespace betweent child elements
+ * 1. Using `flex` instead of `inline-block` to prevent whitespace between child elements
  * 2. Behave like button
  * 3. Create position context
  */
@@ -2696,7 +2696,7 @@ select.uk-form-width-xsmall {
    Component: Totop
  ========================================================================== */
 /*
- * Addopts `uk-icon`
+ * Adopts `uk-icon`
  */
 .uk-totop {
   padding: 5px;
@@ -3144,7 +3144,8 @@ select.uk-form-width-xsmall {
  * Icon
  */
 .uk-search-default .uk-search-icon {
-  width: 40px;
+  padding-right: 10px;
+  padding-left: 10px;
 }
 .uk-search-default:has(.uk-search-icon:not(.uk-search-icon-flip)) .uk-search-input {
   padding-right: 40px;
@@ -3174,7 +3175,8 @@ select.uk-form-width-xsmall {
  * Icon
  */
 .uk-search-navbar .uk-search-icon {
-  width: 40px;
+  padding-right: 10px;
+  padding-left: 10px;
 }
 .uk-search-navbar:has(.uk-search-icon:not(.uk-search-icon-flip)) .uk-search-input {
   padding-right: 40px;
@@ -3191,22 +3193,28 @@ select.uk-form-width-xsmall {
  * Input
  */
 .uk-search-medium .uk-search-input {
-  height: 40px;
-  background: transparent;
+  height: 55px;
+  padding-right: 12px;
+  padding-left: 12px;
+  background: #f8f8f8;
   font-size: 1.5rem;
 }
 /* Focus */
+.uk-search-medium .uk-search-input:focus {
+  background-color: #f3f3f3;
+}
 /*
  * Icon
  */
 .uk-search-medium .uk-search-icon {
-  width: 24px;
+  padding-right: 12px;
+  padding-left: 12px;
 }
 .uk-search-medium:has(.uk-search-icon:not(.uk-search-icon-flip)) .uk-search-input {
-  padding-right: 34px;
+  padding-right: 48px;
 }
 .uk-search-medium:has(.uk-search-icon-flip) .uk-search-input {
-  padding-left: 34px;
+  padding-left: 48px;
 }
 /* Large modifier
  ========================================================================== */
@@ -3217,22 +3225,28 @@ select.uk-form-width-xsmall {
  * Input
  */
 .uk-search-large .uk-search-input {
-  height: 80px;
-  background: transparent;
+  height: 90px;
+  padding-right: 20px;
+  padding-left: 20px;
+  background: #f8f8f8;
   font-size: 2.625rem;
 }
 /* Focus */
+.uk-search-large .uk-search-input:focus {
+  background-color: #f3f3f3;
+}
 /*
  * Icon
  */
 .uk-search-large .uk-search-icon {
-  width: 40px;
+  padding-right: 20px;
+  padding-left: 20px;
 }
 .uk-search-large:has(.uk-search-icon:not(.uk-search-icon-flip)) .uk-search-input {
-  padding-right: 60px;
+  padding-right: 80px;
 }
 .uk-search-large:has(.uk-search-icon-flip) .uk-search-input {
-  padding-left: 60px;
+  padding-left: 80px;
 }
 /* Toggle
  ========================================================================== */
@@ -3746,14 +3760,8 @@ select.uk-form-width-xsmall {
   /* 3 */
   box-sizing: border-box;
 }
-/*
- * 1. Force new layer to resolve frame rate issues on devices with lower frame rates
- */
 .uk-sticky-fixed {
   margin: 0 !important;
-  /* 1 */
-  -webkit-backface-visibility: hidden;
-  backface-visibility: hidden;
 }
 /*
  * Faster animations
@@ -5578,11 +5586,15 @@ ul.uk-nav-sub {
    Component: Breadcrumb
  ========================================================================== */
 /*
- * Reset list
+ * 1. Reset list
+ * 2. Remove space between elements
  */
 .uk-breadcrumb {
+  /* 1 */
   padding: 0;
   list-style: none;
+  /* 2 */
+  font-size: 0;
 }
 /*
  * 1. Doesn't generate any box and replaced by child boxes
@@ -5617,7 +5629,7 @@ ul.uk-nav-sub {
   content: "/";
   display: inline-block;
   /* 1 */
-  margin: 0 calc(20px - 4px) 0 20px;
+  margin: 0 20px;
   /* 2 */
   font-size: 0.875rem;
   color: #999;
@@ -6011,8 +6023,10 @@ ul.uk-nav-sub {
  * 5. Mask the background page
  * 6. Fade-in transition
  * 7. Prevent cancellation of pointer events while dragging
+ * 8. Style for count and spinner icon
  */
 .uk-lightbox {
+  --uk-inverse: light;
   /* 1 */
   display: none;
   /* 2 */
@@ -6029,6 +6043,8 @@ ul.uk-nav-sub {
   transition: opacity 0.15s linear;
   /* 7 */
   touch-action: pinch-zoom;
+  /* 8 */
+  color: rgba(255, 255, 255, 0.7);
 }
 /*
  * Open
@@ -6054,14 +6070,21 @@ ul.uk-nav-sub {
 .uk-lightbox-page {
   overflow: hidden;
 }
-/* Item
+/* Items
  ========================================================================== */
+/*
+ * Reset list
+ */
+.uk-lightbox-items {
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
 /*
  * 1. Center child within the viewport
  * 2. Not visible by default
- * 3. Color needed for spinner icon
- * 4. Optimize animation
- * 5. Responsiveness
+ * 3. Optimize animation
+ * 4. Responsiveness
  *    Using `vh` for `max-height` to fix image proportions after resize in Safari and Opera
  */
 .uk-lightbox-items > * {
@@ -6074,70 +6097,63 @@ ul.uk-nav-sub {
   /* 2 */
   display: none;
   justify-content: center;
-  align-items: center;
+  align-items: flex-start;
   /* 3 */
-  color: rgba(255, 255, 255, 0.7);
-  /* 4 */
   will-change: transform, opacity;
+  /* 4 */
+  overflow: auto;
 }
-/* 5 */
-.uk-lightbox-items > * > * {
+/* 2 */
+.uk-lightbox-items > .uk-active {
+  display: flex;
+}
+.uk-lightbox-items-fit > * {
+  align-items: center;
+}
+/* 4 */
+.uk-lightbox-items-fit > * > * {
   max-width: 100vw;
   max-height: 100vh;
 }
-.uk-lightbox-items > * > :not(iframe) {
+.uk-lightbox-items-fit > * > :not(iframe) {
   width: auto;
   height: auto;
 }
-.uk-lightbox-items > .uk-active {
-  display: flex;
-}
-/* Toolbar
- ========================================================================== */
-.uk-lightbox-toolbar {
-  padding: 10px 10px;
-  background: rgba(0, 0, 0, 0.3);
-  color: rgba(255, 255, 255, 0.7);
+/* Zoom Cursor */
+.uk-lightbox-items.uk-lightbox-items-fit .uk-lightbox-zoom:hover {
+  cursor: zoom-in;
 }
-.uk-lightbox-toolbar > * {
-  color: rgba(255, 255, 255, 0.7);
+.uk-lightbox-items:not(.uk-lightbox-items-fit) .uk-lightbox-zoom:hover {
+  cursor: zoom-out;
 }
-/* Toolbar Icon (Close)
+/* Navs
  ========================================================================== */
-.uk-lightbox-toolbar-icon {
-  padding: 5px;
-  color: rgba(255, 255, 255, 0.7);
+.uk-lightbox-thumbnav-vertical :where(img, video) {
+  max-width: 100px;
 }
-/*
- * Hover
- */
-.uk-lightbox-toolbar-icon:hover {
-  color: #fff;
+.uk-lightbox-thumbnav:not(.uk-lightbox-thumbnav-vertical) :where(img, video) {
+  max-height: 100px;
 }
-/* Button (Slidenav)
+.uk-lightbox-thumbnav:empty,
+.uk-lightbox-dotnav:empty {
+  display: none;
+}
+/* Caption
  ========================================================================== */
-/*
- * 1. Center icon vertically and horizontally
- */
-.uk-lightbox-button {
-  box-sizing: border-box;
-  width: 50px;
-  height: 50px;
+.uk-lightbox-caption:empty {
+  display: none;
+}
+.uk-lightbox-caption {
+  padding: 10px 10px;
   background: rgba(0, 0, 0, 0.3);
   color: rgba(255, 255, 255, 0.7);
-  /* 1 */
-  display: inline-flex;
-  justify-content: center;
-  align-items: center;
 }
-/* Hover */
-.uk-lightbox-button:hover {
-  color: #fff;
+.uk-lightbox-caption > * {
+  color: rgba(255, 255, 255, 0.7);
 }
-/* OnClick */
-/* Caption
+/* Counter
  ========================================================================== */
-.uk-lightbox-caption:empty {
+.uk-lightbox-counter:empty {
   display: none;
 }
 /* Iframe
@@ -7616,13 +7632,8 @@ iframe[data-uk-cover] {
 }
 /* Attachment
  ========================================================================== */
-/*
- * 1. Fix bug introduced in Chrome 67: the background image is not visible if any element on the page uses `translate3d`
- */
 .uk-background-fixed {
   background-attachment: fixed;
-  /* 1 */
-  backface-visibility: hidden;
 }
 /*
  * Exclude touch devices because `fixed` doesn't work on iOS and Android
@@ -9230,7 +9241,7 @@ iframe[data-uk-cover] {
  */
 .uk-transition-toggle:hover .uk-transition-fade,
 .uk-transition-toggle:focus .uk-transition-fade,
-.uk-transition-toggle .uk-transition-fade:focus-within,
+.uk-transition-toggle:focus-within .uk-transition-fade,
 .uk-transition-active.uk-active .uk-transition-fade {
   opacity: 1;
 }
@@ -9253,7 +9264,7 @@ iframe[data-uk-cover] {
 /* Show */
 .uk-transition-toggle:hover .uk-transition-scale-up,
 .uk-transition-toggle:focus .uk-transition-scale-up,
-.uk-transition-toggle .uk-transition-scale-up:focus-within,
+.uk-transition-toggle:focus-within .uk-transition-scale-up,
 .uk-transition-active.uk-active .uk-transition-scale-up {
   --uk-scale-x: 1.03;
   --uk-scale-y: 1.03;
@@ -9261,7 +9272,7 @@ iframe[data-uk-cover] {
 }
 .uk-transition-toggle:hover .uk-transition-scale-down,
 .uk-transition-toggle:focus .uk-transition-scale-down,
-.uk-transition-toggle .uk-transition-scale-down:focus-within,
+.uk-transition-toggle:focus-within .uk-transition-scale-down,
 .uk-transition-active.uk-active .uk-transition-scale-down {
   --uk-scale-x: 1;
   --uk-scale-y: 1;
@@ -9309,7 +9320,7 @@ iframe[data-uk-cover] {
 /* Show */
 .uk-transition-toggle:hover [class*="uk-transition-slide"],
 .uk-transition-toggle:focus [class*="uk-transition-slide"],
-.uk-transition-toggle [class*="uk-transition-slide"]:focus-within,
+.uk-transition-toggle:focus-within [class*="uk-transition-slide"],
 .uk-transition-active.uk-active [class*="uk-transition-slide"] {
   --uk-translate-x: 0;
   --uk-translate-y: 0;
@@ -9339,7 +9350,8 @@ iframe[data-uk-cover] {
  * `hidden` attribute also set here to make it stronger
  */
 [hidden],
-.uk-hidden {
+.uk-hidden,
+.uk-hidden-empty:empty {
   display: none !important;
 }
 /* Phone landscape and bigger */
@@ -9416,7 +9428,7 @@ iframe[data-uk-cover] {
  *    Note: `clip-path` doesn't work with `tabindex` on touch devices.
  */
 .uk-hidden-visually:not(:focus):not(:active):not(:focus-within),
-.uk-visible-toggle:not(:hover):not(:focus) .uk-hidden-hover:not(:focus-within) {
+.uk-visible-toggle:not(:hover):not(:focus) .uk-hidden-hover:not(:focus-visible):not(:has(:focus-visible)) {
   /* 1 */
   position: absolute !important;
   /* 2 */
@@ -9472,6 +9484,10 @@ iframe[data-uk-cover] {
 .uk-overlay-primary,
 .uk-offcanvas-bar {
   color: rgba(255, 255, 255, 0.7);
+  /* Webkit */
+  /* Firefox */
+  /* Webkit */
+  /* Firefox */
 }
 .uk-light a,
 .uk-light .uk-link,
@@ -10375,6 +10391,95 @@ iframe[data-uk-cover] {
   background-color: rgba(255, 255, 255, 0.2);
   color: rgba(255, 255, 255, 0.7);
 }
+.uk-light .uk-range::-webkit-slider-runnable-track,
+.uk-section-primary:not(.uk-preserve-color) .uk-range::-webkit-slider-runnable-track,
+.uk-section-secondary:not(.uk-preserve-color) .uk-range::-webkit-slider-runnable-track,
+.uk-tile-primary:not(.uk-preserve-color) .uk-range::-webkit-slider-runnable-track,
+.uk-tile-secondary:not(.uk-preserve-color) .uk-range::-webkit-slider-runnable-track,
+.uk-card-primary.uk-card-body .uk-range::-webkit-slider-runnable-track,
+.uk-card-primary > :not([class*="uk-card-media"]) .uk-range::-webkit-slider-runnable-track,
+.uk-card-secondary.uk-card-body .uk-range::-webkit-slider-runnable-track,
+.uk-card-secondary > :not([class*="uk-card-media"]) .uk-range::-webkit-slider-runnable-track,
+.uk-overlay-primary .uk-range::-webkit-slider-runnable-track,
+.uk-offcanvas-bar .uk-range::-webkit-slider-runnable-track {
+  background: rgba(242, 242, 242, 0.1);
+}
+.uk-light .uk-range:focus::-webkit-slider-runnable-track,
+.uk-light .uk-range:active::-webkit-slider-runnable-track,
+.uk-section-primary:not(.uk-preserve-color) .uk-range:focus::-webkit-slider-runnable-track,
+.uk-section-primary:not(.uk-preserve-color) .uk-range:active::-webkit-slider-runnable-track,
+.uk-section-secondary:not(.uk-preserve-color) .uk-range:focus::-webkit-slider-runnable-track,
+.uk-section-secondary:not(.uk-preserve-color) .uk-range:active::-webkit-slider-runnable-track,
+.uk-tile-primary:not(.uk-preserve-color) .uk-range:focus::-webkit-slider-runnable-track,
+.uk-tile-primary:not(.uk-preserve-color) .uk-range:active::-webkit-slider-runnable-track,
+.uk-tile-secondary:not(.uk-preserve-color) .uk-range:focus::-webkit-slider-runnable-track,
+.uk-tile-secondary:not(.uk-preserve-color) .uk-range:active::-webkit-slider-runnable-track,
+.uk-card-primary.uk-card-body .uk-range:focus::-webkit-slider-runnable-track,
+.uk-card-primary.uk-card-body .uk-range:active::-webkit-slider-runnable-track,
+.uk-card-primary > :not([class*="uk-card-media"]) .uk-range:focus::-webkit-slider-runnable-track,
+.uk-card-primary > :not([class*="uk-card-media"]) .uk-range:active::-webkit-slider-runnable-track,
+.uk-card-secondary.uk-card-body .uk-range:focus::-webkit-slider-runnable-track,
+.uk-card-secondary.uk-card-body .uk-range:active::-webkit-slider-runnable-track,
+.uk-card-secondary > :not([class*="uk-card-media"]) .uk-range:focus::-webkit-slider-runnable-track,
+.uk-card-secondary > :not([class*="uk-card-media"]) .uk-range:active::-webkit-slider-runnable-track,
+.uk-overlay-primary .uk-range:focus::-webkit-slider-runnable-track,
+.uk-overlay-primary .uk-range:active::-webkit-slider-runnable-track,
+.uk-offcanvas-bar .uk-range:focus::-webkit-slider-runnable-track,
+.uk-offcanvas-bar .uk-range:active::-webkit-slider-runnable-track {
+  background: rgba(242, 242, 242, 0.15);
+}
+.uk-light .uk-range::-moz-range-track,
+.uk-section-primary:not(.uk-preserve-color) .uk-range::-moz-range-track,
+.uk-section-secondary:not(.uk-preserve-color) .uk-range::-moz-range-track,
+.uk-tile-primary:not(.uk-preserve-color) .uk-range::-moz-range-track,
+.uk-tile-secondary:not(.uk-preserve-color) .uk-range::-moz-range-track,
+.uk-card-primary.uk-card-body .uk-range::-moz-range-track,
+.uk-card-primary > :not([class*="uk-card-media"]) .uk-range::-moz-range-track,
+.uk-card-secondary.uk-card-body .uk-range::-moz-range-track,
+.uk-card-secondary > :not([class*="uk-card-media"]) .uk-range::-moz-range-track,
+.uk-overlay-primary .uk-range::-moz-range-track,
+.uk-offcanvas-bar .uk-range::-moz-range-track {
+  background: rgba(242, 242, 242, 0.1);
+}
+.uk-light .uk-range:focus::-moz-range-track,
+.uk-section-primary:not(.uk-preserve-color) .uk-range:focus::-moz-range-track,
+.uk-section-secondary:not(.uk-preserve-color) .uk-range:focus::-moz-range-track,
+.uk-tile-primary:not(.uk-preserve-color) .uk-range:focus::-moz-range-track,
+.uk-tile-secondary:not(.uk-preserve-color) .uk-range:focus::-moz-range-track,
+.uk-card-primary.uk-card-body .uk-range:focus::-moz-range-track,
+.uk-card-primary > :not([class*="uk-card-media"]) .uk-range:focus::-moz-range-track,
+.uk-card-secondary.uk-card-body .uk-range:focus::-moz-range-track,
+.uk-card-secondary > :not([class*="uk-card-media"]) .uk-range:focus::-moz-range-track,
+.uk-overlay-primary .uk-range:focus::-moz-range-track,
+.uk-offcanvas-bar .uk-range:focus::-moz-range-track {
+  background: rgba(242, 242, 242, 0.15);
+}
+.uk-light .uk-range::-webkit-slider-thumb,
+.uk-section-primary:not(.uk-preserve-color) .uk-range::-webkit-slider-thumb,
+.uk-section-secondary:not(.uk-preserve-color) .uk-range::-webkit-slider-thumb,
+.uk-tile-primary:not(.uk-preserve-color) .uk-range::-webkit-slider-thumb,
+.uk-tile-secondary:not(.uk-preserve-color) .uk-range::-webkit-slider-thumb,
+.uk-card-primary.uk-card-body .uk-range::-webkit-slider-thumb,
+.uk-card-primary > :not([class*="uk-card-media"]) .uk-range::-webkit-slider-thumb,
+.uk-card-secondary.uk-card-body .uk-range::-webkit-slider-thumb,
+.uk-card-secondary > :not([class*="uk-card-media"]) .uk-range::-webkit-slider-thumb,
+.uk-overlay-primary .uk-range::-webkit-slider-thumb,
+.uk-offcanvas-bar .uk-range::-webkit-slider-thumb {
+  background: #ffffff;
+}
+.uk-light .uk-range::-moz-range-thumb,
+.uk-section-primary:not(.uk-preserve-color) .uk-range::-moz-range-thumb,
+.uk-section-secondary:not(.uk-preserve-color) .uk-range::-moz-range-thumb,
+.uk-tile-primary:not(.uk-preserve-color) .uk-range::-moz-range-thumb,
+.uk-tile-secondary:not(.uk-preserve-color) .uk-range::-moz-range-thumb,
+.uk-card-primary.uk-card-body .uk-range::-moz-range-thumb,
+.uk-card-primary > :not([class*="uk-card-media"]) .uk-range::-moz-range-thumb,
+.uk-card-secondary.uk-card-body .uk-range::-moz-range-thumb,
+.uk-card-secondary > :not([class*="uk-card-media"]) .uk-range::-moz-range-thumb,
+.uk-overlay-primary .uk-range::-moz-range-thumb,
+.uk-offcanvas-bar .uk-range::-moz-range-thumb {
+  background: #ffffff;
+}
 .uk-light .uk-input,
 .uk-light .uk-select,
 .uk-light .uk-textarea,
@@ -11180,7 +11285,20 @@ iframe[data-uk-cover] {
 .uk-card-secondary > :not([class*="uk-card-media"]) .uk-search-medium .uk-search-input,
 .uk-overlay-primary .uk-search-medium .uk-search-input,
 .uk-offcanvas-bar .uk-search-medium .uk-search-input {
-  background-color: transparent;
+  background-color: rgba(255, 255, 255, 0.1);
+}
+.uk-light .uk-search-medium .uk-search-input:focus,
+.uk-section-primary:not(.uk-preserve-color) .uk-search-medium .uk-search-input:focus,
+.uk-section-secondary:not(.uk-preserve-color) .uk-search-medium .uk-search-input:focus,
+.uk-tile-primary:not(.uk-preserve-color) .uk-search-medium .uk-search-input:focus,
+.uk-tile-secondary:not(.uk-preserve-color) .uk-search-medium .uk-search-input:focus,
+.uk-card-primary.uk-card-body .uk-search-medium .uk-search-input:focus,
+.uk-card-primary > :not([class*="uk-card-media"]) .uk-search-medium .uk-search-input:focus,
+.uk-card-secondary.uk-card-body .uk-search-medium .uk-search-input:focus,
+.uk-card-secondary > :not([class*="uk-card-media"]) .uk-search-medium .uk-search-input:focus,
+.uk-overlay-primary .uk-search-medium .uk-search-input:focus,
+.uk-offcanvas-bar .uk-search-medium .uk-search-input:focus {
+  background-color: rgba(255, 255, 255, 0.15);
 }
 .uk-light .uk-search-large .uk-search-input,
 .uk-section-primary:not(.uk-preserve-color) .uk-search-large .uk-search-input,
@@ -11193,7 +11311,20 @@ iframe[data-uk-cover] {
 .uk-card-secondary > :not([class*="uk-card-media"]) .uk-search-large .uk-search-input,
 .uk-overlay-primary .uk-search-large .uk-search-input,
 .uk-offcanvas-bar .uk-search-large .uk-search-input {
-  background-color: transparent;
+  background-color: rgba(255, 255, 255, 0.1);
+}
+.uk-light .uk-search-large .uk-search-input:focus,
+.uk-section-primary:not(.uk-preserve-color) .uk-search-large .uk-search-input:focus,
+.uk-section-secondary:not(.uk-preserve-color) .uk-search-large .uk-search-input:focus,
+.uk-tile-primary:not(.uk-preserve-color) .uk-search-large .uk-search-input:focus,
+.uk-tile-secondary:not(.uk-preserve-color) .uk-search-large .uk-search-input:focus,
+.uk-card-primary.uk-card-body .uk-search-large .uk-search-input:focus,
+.uk-card-primary > :not([class*="uk-card-media"]) .uk-search-large .uk-search-input:focus,
+.uk-card-secondary.uk-card-body .uk-search-large .uk-search-input:focus,
+.uk-card-secondary > :not([class*="uk-card-media"]) .uk-search-large .uk-search-input:focus,
+.uk-overlay-primary .uk-search-large .uk-search-input:focus,
+.uk-offcanvas-bar .uk-search-large .uk-search-input:focus {
+  background-color: rgba(255, 255, 255, 0.15);
 }
 .uk-light .uk-search-toggle,
 .uk-section-primary:not(.uk-preserve-color) .uk-search-toggle,