File manager - Edit - /home/opticamezl/www/newok/templates/yootheme/less/theme.less
Back
/* ======================================================================== Theme ========================================================================== */ // Variables // ======================================================================== // // Page // @theme-page-border-mode: ~''; @theme-page-border-width: 0; @theme-page-border-width-l: @theme-page-border-width; @theme-page-border: transparent; @internal-theme-page-border-gradient: ~''; // // Page Container // @theme-page-container-width: 1500px; @theme-page-container-margin-top: @global-large-margin; @theme-page-container-margin-bottom: @theme-page-container-margin-top; @theme-page-container-background: darken(@global-muted-background, 3%); @theme-page-container-color-mode: dark; // // Toolbar // @theme-toolbar-color-mode: light; @theme-toolbar-padding-top: 10px; @theme-toolbar-padding-bottom: 10px; @theme-toolbar-background: @global-secondary-background; @theme-toolbar-font-size: @global-small-font-size; @theme-toolbar-font-family: inherit; // // Header // @theme-headerbar-color-mode: @navbar-color-mode; @theme-headerbar-top-padding-top: 20px; @theme-headerbar-top-padding-bottom: 20px; @theme-headerbar-top-background: @navbar-background; @theme-headerbar-top-border-width: 0; @theme-headerbar-top-border: transparent; @theme-headerbar-bottom-padding-top: 20px; @theme-headerbar-bottom-padding-bottom: 20px; @theme-headerbar-bottom-background: @navbar-background; @theme-headerbar-bottom-border-width: 0; @theme-headerbar-bottom-border: transparent; @theme-headerbar-stacked-margin-top: 20px; @theme-headerbar-font-size: inherit; // // Sidebar // @theme-sidebar-min-width: 200px; /* HTML ========================================================================== */ /* * Force vertical scrollbar (has to be on `html`) */ html { overflow-y: scroll; } /* * Clip content positioned outside (right or bottom) of the `body` * Has to be set on the `body` element. Otherwise touch gestures can still scroll horizontally. * 1. Use `clip` to forbid all scrolling, including programmatic scrolling. * `hidden` fallback can be removed with Safari 15.5. */ body { overflow: hidden; /* 1 */ overflow: clip; } /* Page ========================================================================== */ /* * Page * Position context needed for `tm-page-container` if background image is set and for `tm-header-overlay`. */ .tm-page { position: relative; } /* * Needed for section sticky cover and reveal effects because of negative z-index * 1. Create stacking context to make interactive elements clickable * 2. Remove box from box tree * Note: `isolate` is reset to `auto` in `platform.less` if modal opens in Joomla 4 * 3. Set decreasing stacking context for repeating reveal effects */ /* 1 */ .tm-page:has(> * > .uk-position-z-index-negative) { isolation: isolate; } /* 2 */ .tm-page > :is(main, footer, .builder):has(> .uk-position-z-index-negative) { display: contents; } /* 3 */ .tm-page > :nth-child(3) { --tm-reveal: -10; } .tm-page > :nth-child(4) { --tm-reveal: -20; } .tm-page > :nth-child(5) { --tm-reveal: -30; } .tm-page > :nth-child(6) { --tm-reveal: -40; } /* * Border * 1. Need to remove default `border-width` of 4px if `border-image` is used in Safari and Edge * Only needed if border mode is not full, e.g. `left` * 2. Important: Gradient won't work if the border-color is `transparent` in Safari */ /* Tablet landscape and bigger */ @media (min-width: @breakpoint-medium) { /* 1 */ .tm-page when not (@theme-page-border-width = 0) and not (@internal-theme-page-border-gradient = ~'') and not (@theme-page-border-mode = ~'') { border-width: 0; } /* 2 */ .tm-page when not (@theme-page-border-width = 0) { border@{theme-page-border-mode}: @theme-page-border-width solid @theme-page-border; } .tm-page when not (@theme-page-border-width = 0) and not (@internal-theme-page-border-gradient = ~'') { border-image: @internal-theme-page-border-gradient 1; } } /* Desktop and bigger */ @media (min-width: @breakpoint-large) { .tm-page when not (@theme-page-border-width = 0) { border@{theme-page-border-mode}-width: @theme-page-border-width-l; } } /* * Page Container */ // Needs to be outside of media query to keep background if header is transparent outside the box :where(.tm-page-container) { background-color: @theme-page-container-background; --uk-inverse: @theme-page-container-color-mode; } @media (min-width: @theme-page-container-width) { .tm-page-container .tm-page { max-width: @theme-page-container-width; background: @base-body-background; } // Needed for navbar and toolbar .tm-page-width { max-width: @theme-page-container-width; } .tm-page-margin-top { margin-top: @theme-page-container-margin-top; } .tm-page-margin-bottom { margin-bottom: @theme-page-container-margin-bottom; } } /* Cookie Banner ========================================================================== */ /* * Let cookie notification appear above any page content. */ .tm-cookie-banner { z-index: @notification-z-index; } /* Toolbar ========================================================================== */ .tm-toolbar { padding-top: @theme-toolbar-padding-top; padding-bottom: @theme-toolbar-padding-bottom; font-size: @theme-toolbar-font-size; // Make sure media overlay is always below position: relative; } .tm-toolbar .uk-subnav > * > :first-child { font-size: @theme-toolbar-font-size; } // Not transparent .tm-toolbar-default { background: @theme-toolbar-background; } .tm-toolbar-default:extend(.uk-light all) when (@theme-toolbar-color-mode = light) {} .tm-toolbar-default:extend(.uk-dark all) when (@theme-toolbar-color-mode = dark) {} /* Header ========================================================================== */ /* * Header */ .tm-header, .tm-header-mobile { // Make sure media overlay is always below position: relative; } /* * Headerbars */ .tm-headerbar-top { padding-top: @theme-headerbar-top-padding-top; padding-bottom: @theme-headerbar-top-padding-bottom; } .tm-headerbar-bottom { padding-top: @theme-headerbar-bottom-padding-top; padding-bottom: @theme-headerbar-bottom-padding-bottom; } .tm-headerbar-stacked { margin-top: @theme-headerbar-stacked-margin-top; } // Typo .tm-headerbar when not (@theme-headerbar-font-size = inherit) { font-size: @theme-headerbar-font-size; } .tm-headerbar .uk-subnav > * > :first-child when not (@theme-headerbar-font-size = inherit) { font-size: @theme-headerbar-font-size; } // Not transparent .tm-headerbar-top.tm-headerbar-default { background: @theme-headerbar-top-background; } .tm-headerbar-top.tm-headerbar-default when not (@theme-headerbar-top-border-width = 0) { border-bottom: @theme-headerbar-top-border-width solid @theme-headerbar-top-border; } .tm-headerbar-bottom.tm-headerbar-default { background: @theme-headerbar-bottom-background; } .tm-headerbar-bottom.tm-headerbar-default when not (@theme-headerbar-bottom-border-width = 0) { border-bottom: @theme-headerbar-bottom-border-width solid @theme-headerbar-bottom-border; } .tm-headerbar-default:extend(.uk-light all) when (@theme-headerbar-color-mode = light) {} .tm-headerbar-default:extend(.uk-dark all) when (@theme-headerbar-color-mode = dark) {} /* * Overlay + Transparent Header * 1. Position above following section * 2. Create stacking context because following section might create one * Use `where` to let UIkit `uk-position-z-index-*` classes win * 3. Take the full width. Doesn't use width because `html` element may have a `border` or `padding` */ .tm-header-overlay { /* 1 */ position: absolute; /* 3 */ left: 0; right: 0; } /* 2 */ :where(.tm-header-overlay) { z-index: @sticky-z-index; } /* * Header Mobile */ .tm-header-mobile {} .tm-header-mobile-slide { z-index: @drop-z-index; } /* * Subnav in Navbar */ .uk-navbar-item .uk-subnav > * > :first-child { font-size: @navbar-nav-item-font-size; } /* * Search expand in header position */ .tm-header-search-expand > .uk-grid > *:has(.uk-search.uk-width-1-1) { flex: 1; } /* Sidebar ========================================================================== */ /* Phone landscape and bigger */ @media (min-width: @breakpoint-small) { .tm-sidebar { min-width: @theme-sidebar-min-width; } } /* Dropbar Center Layout ========================================================================== */ .tm-height-min-1-1 { min-height: 100%; } // Expand height so rows in builder modules can take the full height. Only if one module on dialog position. .tm-height-expand:has(> .uk-panel:only-child > :only-child) { flex: 1; display: flex; } .tm-height-expand > .uk-panel:only-child:has(> :only-child) { flex: 1; } // .tm-height-expand:has(> .uk-panel:only-child), // .tm-height-expand > .uk-panel:only-child { // flex: 1; // display: flex; // flex-direction: column; // } // .tm-height-expand > .uk-panel:only-child > .uk-height-1-1:first-child { flex: 1; } /* Error ========================================================================== */ .tm-error-icon { font-size: 250px; } .tm-error-headline { font-size: 100px; } /* Offline ========================================================================== */ .tm-offline { width: 300px; } /* Child Utilities ========================================================================== */ // // List // .tm-child-list > ul:extend(.uk-list all) {} .tm-child-list-divider > ul:extend(.uk-list-divider all) {} /* * Manually repeat list divider selector because * `:extend` won't extend a selector which is created by another `:extend` * Guards are only allowed on single selectors */ .uk-card-primary.uk-card-body .uk-list-divider > li:nth-child(n+2) when (@card-primary-color-mode = @inverse-global-color-mode) { border-top-color: @inverse-list-divider-border; .hook-inverse-list-divider(); } .uk-card-primary .uk-card-body .uk-list-divider > li:nth-child(n+2) when (@card-primary-color-mode = @inverse-global-color-mode) { border-top-color: @inverse-list-divider-border; .hook-inverse-list-divider(); } .uk-card-secondary.uk-card-body .uk-list-divider > li:nth-child(n+2) when (@card-secondary-color-mode = @inverse-global-color-mode) { border-top-color: @inverse-list-divider-border; .hook-inverse-list-divider(); } .uk-card-secondary .uk-card-body .uk-list-divider > li:nth-child(n+2) when (@card-secondary-color-mode = @inverse-global-color-mode) { border-top-color: @inverse-list-divider-border; .hook-inverse-list-divider(); } .uk-section-primary:not(.uk-preserve-color) .uk-list-divider > li:nth-child(n+2) when (@section-primary-color-mode = @inverse-global-color-mode) { border-top-color: @inverse-list-divider-border; .hook-inverse-list-divider(); } .uk-section-secondary:not(.uk-preserve-color) .uk-list-divider > li:nth-child(n+2) when (@section-secondary-color-mode = @inverse-global-color-mode) { border-top-color: @inverse-list-divider-border; .hook-inverse-list-divider(); } /* Syntax Highlighter ========================================================================== */ /* * Reset highlight.js */ .hljs { padding: 0; background: transparent; overflow: visible; } /* Section ========================================================================== */ @section-title-color: @global-muted-color; @section-title-font-size: @global-small-font-size; @section-title-line-height: @global-line-height; @section-title-font-family: @global-secondary-font-family; @section-title-font-weight: @global-secondary-font-weight; @section-title-text-transform: @global-secondary-text-transform; @section-title-letter-spacing: @global-secondary-letter-spacing; @section-title-font-style: @global-secondary-font-style; .tm-section-title { color: @section-title-color; font-size: @section-title-font-size; line-height: @section-title-line-height; // `writing-mode` has to be on the parent element to fix the width in Safari -webkit-writing-mode: vertical-lr; writing-mode: vertical-lr; .hook-section-title(); } .tm-section-title > * { // `writing-mode` has to be on the element which is rotated in IE 11 -ms-writing-mode: tb-lr; // Fix height in Edge and IE 11 display: inline-block; } // `writing-mode` has to be on the element which is rotated in Edge @supports (-ms-ime-align: auto) { .tm-section-title { writing-mode: inherit; } .tm-section-title > * { writing-mode: vertical-lr; } } .hook-section-title() when not (@section-title-font-family = inherit) { font-family: @section-title-font-family; } .hook-section-title() when not (@section-title-font-weight = inherit) { font-weight: @section-title-font-weight; } .hook-section-title() when not (@section-title-text-transform = inherit) { text-transform: @section-title-text-transform; } .hook-section-title() when not (@section-title-letter-spacing = inherit) { letter-spacing: @section-title-letter-spacing; } .hook-section-title() when not (@section-title-font-style = inherit) { font-style: @section-title-font-style; } @internal-section-title-mode: dash; // dash @internal-section-title-dash-border-height: 15px; @internal-section-title-dash-border-width: @global-border-width; @internal-section-title-dash-border-margin: 15px; @internal-section-title-dash-color: currentColor; @internal-section-title-dash-background-image: ~''; /* * Dash */ .hook-section-title() when (@internal-section-title-mode = dash) { > ::before { content: ""; position: absolute; top: -(@internal-section-title-dash-border-height + @internal-section-title-dash-border-margin); left: ~'calc(50% - (@{internal-section-title-dash-border-width} / 2))'; height: @internal-section-title-dash-border-height; width: @internal-section-title-dash-border-width; } } // Color .hook-section-title() when (@internal-section-title-mode = dash) and (@internal-section-title-dash-background-image = ~'') { > ::before { background-color: @internal-section-title-dash-color; } } // Image .hook-section-title() when (@internal-section-title-mode = dash) and not (@internal-section-title-dash-background-image = ~'') and not (@internal-section-title-dash-color = currentColor) { > ::before { .svg-fill(@internal-section-title-dash-background-image, "#000", @internal-section-title-dash-color); } } // // Inverse // @inverse-section-title-color: @inverse-global-color; .hook-inverse() { .tm-section-title { color: @inverse-section-title-color; } } @internal-inverse-section-title-dash-color: @inverse-global-color; .hook-inverse() when (@internal-section-title-mode = dash) and not (@internal-section-title-dash-background-image = ~'') and not (@internal-section-title-dash-color = currentColor) { .tm-section-title > ::before { .svg-fill(@internal-section-title-dash-background-image, "#000", @internal-inverse-section-title-dash-color); } } /* Utility ========================================================================== */ .tm-rotate-180 { transform: rotate(180deg); } /* * Collapsing Grid * `uk-grid` needed to override `uk-child-width-auto` for WooCommerce Filter element */ .uk-grid.tm-grid-expand > * { flex-grow: 1; } /* Fix expand */ .tm-grid-expand > .uk-width-expand { flex-grow: 999; } /* Possible Issue: `[class*="\@s"]` also matches breakpoint order first and last classes /* Phone landscape and bigger */ @media (min-width: @breakpoint-small) { .tm-grid-expand > .uk-width-1-1\@s, .tm-grid-expand > .uk-width-1-2\@s, .tm-grid-expand > .uk-width-1-3\@s, .tm-grid-expand > .uk-width-2-3\@s, .tm-grid-expand > .uk-width-1-4\@s, .tm-grid-expand > .uk-width-3-4\@s, .tm-grid-expand > .uk-width-1-5\@s, .tm-grid-expand > .uk-width-2-5\@s, .tm-grid-expand > .uk-width-3-5\@s, .tm-grid-expand > .uk-width-4-5\@s, .tm-grid-expand > .uk-width-1-6\@s, .tm-grid-expand > .uk-width-5-6\@s, .tm-grid-expand > .uk-width-small\@s, .tm-grid-expand > .uk-width-medium\@s, .tm-grid-expand > .uk-width-large\@s, .tm-grid-expand > .uk-width-xlarge\@s, .tm-grid-expand > .uk-width-2xlarge\@s, .tm-grid-expand > .uk-width-auto\@s { flex-grow: 1; } .tm-grid-expand > .uk-width-expand\@s { flex-grow: 999; } } /* Tablet landscape and bigger */ @media (min-width: @breakpoint-medium) { .tm-grid-expand > .uk-width-1-1\@m, .tm-grid-expand > .uk-width-1-2\@m, .tm-grid-expand > .uk-width-1-3\@m, .tm-grid-expand > .uk-width-2-3\@m, .tm-grid-expand > .uk-width-1-4\@m, .tm-grid-expand > .uk-width-3-4\@m, .tm-grid-expand > .uk-width-1-5\@m, .tm-grid-expand > .uk-width-2-5\@m, .tm-grid-expand > .uk-width-3-5\@m, .tm-grid-expand > .uk-width-4-5\@m, .tm-grid-expand > .uk-width-1-6\@m, .tm-grid-expand > .uk-width-5-6\@m, .tm-grid-expand > .uk-width-small\@m, .tm-grid-expand > .uk-width-medium\@m, .tm-grid-expand > .uk-width-large\@m, .tm-grid-expand > .uk-width-xlarge\@m, .tm-grid-expand > .uk-width-2xlarge\@m, .tm-grid-expand > .uk-width-auto\@m { flex-grow: 1; } .tm-grid-expand > .uk-width-expand\@m { flex-grow: 999; } } /* Desktop and bigger */ @media (min-width: @breakpoint-large) { .tm-grid-expand > .uk-width-1-1\@l, .tm-grid-expand > .uk-width-1-2\@l, .tm-grid-expand > .uk-width-1-3\@l, .tm-grid-expand > .uk-width-2-3\@l, .tm-grid-expand > .uk-width-1-4\@l, .tm-grid-expand > .uk-width-3-4\@l, .tm-grid-expand > .uk-width-1-5\@l, .tm-grid-expand > .uk-width-2-5\@l, .tm-grid-expand > .uk-width-3-5\@l, .tm-grid-expand > .uk-width-4-5\@l, .tm-grid-expand > .uk-width-1-6\@l, .tm-grid-expand > .uk-width-5-6\@l, .tm-grid-expand > .uk-width-small\@l, .tm-grid-expand > .uk-width-medium\@l, .tm-grid-expand > .uk-width-large\@l, .tm-grid-expand > .uk-width-xlarge\@l, .tm-grid-expand > .uk-width-2xlarge\@l, .tm-grid-expand > .uk-width-auto\@l { flex-grow: 1; } .tm-grid-expand > .uk-width-expand\@l { flex-grow: 999; } } /* Large screen and bigger */ @media (min-width: @breakpoint-xlarge) { .tm-grid-expand > .uk-width-1-1\@xl, .tm-grid-expand > .uk-width-1-2\@xl, .tm-grid-expand > .uk-width-1-3\@xl, .tm-grid-expand > .uk-width-2-3\@xl, .tm-grid-expand > .uk-width-1-4\@xl, .tm-grid-expand > .uk-width-3-4\@xl, .tm-grid-expand > .uk-width-1-5\@xl, .tm-grid-expand > .uk-width-2-5\@xl, .tm-grid-expand > .uk-width-3-5\@xl, .tm-grid-expand > .uk-width-4-5\@xl, .tm-grid-expand > .uk-width-1-6\@xl, .tm-grid-expand > .uk-width-5-6\@xl, .tm-grid-expand > .uk-width-small\@xl, .tm-grid-expand > .uk-width-medium\@xl, .tm-grid-expand > .uk-width-large\@xl, .tm-grid-expand > .uk-width-xlarge\@xl, .tm-grid-expand > .uk-width-2xlarge\@xl, .tm-grid-expand > .uk-width-auto\@xl { flex-grow: 1; } .tm-grid-expand > .uk-width-expand\@xl { flex-grow: 999; } } /* * Prevent the need to set flex on picture element to stretch the image */ .uk-flex > picture { display: contents; } /* Mask ========================================================================== */ @internal-theme-mask-default-border-image: ~''; @internal-theme-mask-default-border-image-slice: 30; @internal-theme-mask-default-border-image-repeat: round; @internal-theme-mask-default-border-image-width: ~''; @internal-theme-mask-default-image: "../vendor/assets/uikit-themes/master/images/mask-default-image.svg"; @internal-theme-mask-default-image-size: 100%; @internal-theme-mask-default-image-repeat: round; .tm-mask-default { .hook-mask-default(); } .hook-mask-default() when not (@internal-theme-mask-default-border-image = ~'') { @supports (-webkit-mask-box-image-source: none) { & { -webkit-mask-box-image-source: url(@internal-theme-mask-default-border-image); mask-border: url(@internal-theme-mask-default-border-image); -webkit-mask-box-image-slice: @internal-theme-mask-default-border-image-slice fill; mask-border-slice: @internal-theme-mask-default-border-image-slice fill; -webkit-mask-box-image-repeat: @internal-theme-mask-default-border-image-repeat; mask-border-repeat: @internal-theme-mask-default-border-image-repeat; } } } .hook-mask-default() when not (@internal-theme-mask-default-border-image = ~'') and not (@internal-theme-mask-default-border-image-width = ~'') { @supports (-webkit-mask-box-image-source: none) { & { -webkit-mask-box-image-width: @internal-theme-mask-default-border-image-width; mask-border-width: @internal-theme-mask-default-border-image-width; } } } .hook-mask-default() when not (@internal-theme-mask-default-border-image = ~'') and not (@internal-theme-mask-default-image = ~'') { // Firefox Fallback @supports not (-webkit-mask-box-image-source: none) { & { mask-image: url(@internal-theme-mask-default-image); mask-size: 100% 100%; } } } .hook-mask-default() when not (@internal-theme-mask-default-image = ~'') and (@internal-theme-mask-default-border-image = ~'') { -webkit-mask-image: url(@internal-theme-mask-default-image); mask-image: url(@internal-theme-mask-default-image); -webkit-mask-size: @internal-theme-mask-default-image-size @internal-theme-mask-default-image-size; mask-size: @internal-theme-mask-default-image-size @internal-theme-mask-default-image-size; -webkit-mask-repeat: @internal-theme-mask-default-image-repeat; mask-repeat: @internal-theme-mask-default-image-repeat; } .hook-mask-default() {} /* Box Decoration ========================================================================== */ @theme-box-decoration-top: 0; @theme-box-decoration-bottom: 0; @theme-box-decoration-left: 0; @theme-box-decoration-right: 0; @theme-box-decoration-z-index: -1; @theme-box-decoration-default-transform-horizontal: -20px; @theme-box-decoration-default-transform-vertical: 20px; @theme-box-decoration-default-background: darken(@global-muted-background, 3%); @theme-box-decoration-default-border-width: 0; @theme-box-decoration-default-border: transparent; @theme-box-decoration-default-backdrop-filter: ~''; @theme-box-decoration-default-blend-mode: ~''; @theme-box-decoration-primary-transform-horizontal: 20px; @theme-box-decoration-primary-transform-vertical: 20px; @theme-box-decoration-primary-background: darken(@global-muted-background, 3%); @theme-box-decoration-primary-border-width: 0; @theme-box-decoration-primary-border: transparent; @theme-box-decoration-primary-backdrop-filter: ~''; @theme-box-decoration-primary-blend-mode: ~''; @theme-box-decoration-secondary-transform-horizontal: 20px; @theme-box-decoration-secondary-transform-vertical: -20px; @theme-box-decoration-secondary-background: darken(@global-muted-background, 3%); @theme-box-decoration-secondary-border-width: 0; @theme-box-decoration-secondary-border: transparent; @theme-box-decoration-secondary-backdrop-filter: ~''; @theme-box-decoration-secondary-blend-mode: ~''; .tm-box-decoration-default, .tm-box-decoration-primary, .tm-box-decoration-secondary { position: relative; z-index: 0; &::before { content: ''; position: absolute; top: @theme-box-decoration-top; bottom: @theme-box-decoration-bottom; left: @theme-box-decoration-left; right: @theme-box-decoration-right; z-index: @theme-box-decoration-z-index; // Prevent clickable area if box-decoration is above links pointer-events: none; } .hook-box-decoration(); } .tm-box-decoration-default { &::before { transform: translate(@theme-box-decoration-default-transform-horizontal, @theme-box-decoration-default-transform-vertical); background-color: @theme-box-decoration-default-background; } .hook-box-decoration-default(); } .hook-box-decoration-default() when not (@theme-box-decoration-default-border-width = 0) { &::before { border: @theme-box-decoration-default-border-width solid @theme-box-decoration-default-border; } } .hook-box-decoration-default() when not (@theme-box-decoration-default-backdrop-filter = ~'') { &::before { backdrop-filter: @theme-box-decoration-default-backdrop-filter; } } .hook-box-decoration-default() when not (@theme-box-decoration-default-backdrop-filter = ~'') and not (@theme-box-decoration-default-border-width = 0) and (@theme-box-decoration-default-background = transparent) { &::before { clip-path: polygon(0 0, 0 100%, @theme-box-decoration-default-border-width 100%, @theme-box-decoration-default-border-width @theme-box-decoration-default-border-width, ~'calc(100% - @{theme-box-decoration-default-border-width})' @theme-box-decoration-default-border-width, ~'calc(100% - @{theme-box-decoration-default-border-width})' ~'calc(100% - @{theme-box-decoration-default-border-width})', @theme-box-decoration-default-border-width ~'calc(100% - @{theme-box-decoration-default-border-width})', @theme-box-decoration-default-border-width 100%, 100% 100%, 100% 0); } } .hook-box-decoration-default() when not (@theme-box-decoration-default-blend-mode = ~'') { &::before { mix-blend-mode: @theme-box-decoration-default-blend-mode; } } .tm-box-decoration-primary { &::before { transform: translate(@theme-box-decoration-primary-transform-horizontal, @theme-box-decoration-primary-transform-vertical); background-color: @theme-box-decoration-primary-background; } .hook-box-decoration-primary(); } .hook-box-decoration-primary() when not (@theme-box-decoration-primary-border-width = 0) { &::before { border: @theme-box-decoration-primary-border-width solid @theme-box-decoration-primary-border; } } .hook-box-decoration-primary() when not (@theme-box-decoration-primary-backdrop-filter = ~'') { &::before { backdrop-filter: @theme-box-decoration-primary-backdrop-filter; } } .hook-box-decoration-primary() when not (@theme-box-decoration-primary-backdrop-filter = ~'') and not (@theme-box-decoration-primary-border-width = 0) and (@theme-box-decoration-primary-background = transparent) { &::before { clip-path: polygon(0 0, 0 100%, @theme-box-decoration-primary-border-width 100%, @theme-box-decoration-primary-border-width @theme-box-decoration-primary-border-width, ~'calc(100% - @{theme-box-decoration-primary-border-width})' @theme-box-decoration-primary-border-width, ~'calc(100% - @{theme-box-decoration-primary-border-width})' ~'calc(100% - @{theme-box-decoration-primary-border-width})', @theme-box-decoration-primary-border-width ~'calc(100% - @{theme-box-decoration-primary-border-width})', @theme-box-decoration-primary-border-width 100%, 100% 100%, 100% 0); } } .hook-box-decoration-primary() when not (@theme-box-decoration-primary-blend-mode = ~'') { &::before { mix-blend-mode: @theme-box-decoration-primary-blend-mode; } } .tm-box-decoration-secondary { &::before { transform: translate(@theme-box-decoration-secondary-transform-horizontal, @theme-box-decoration-secondary-transform-vertical); background-color: @theme-box-decoration-secondary-background; } .hook-box-decoration-secondary(); } .hook-box-decoration-secondary() when not (@theme-box-decoration-secondary-border-width = 0) { &::before { border: @theme-box-decoration-secondary-border-width solid @theme-box-decoration-secondary-border; } } .hook-box-decoration-secondary() when not (@theme-box-decoration-secondary-backdrop-filter = ~'') { &::before { backdrop-filter: @theme-box-decoration-secondary-backdrop-filter; } } .hook-box-decoration-secondary() when not (@theme-box-decoration-secondary-backdrop-filter = ~'') and not (@theme-box-decoration-secondary-border-width = 0) and (@theme-box-decoration-secondary-background = transparent) { &::before { clip-path: polygon(0 0, 0 100%, @theme-box-decoration-secondary-border-width 100%, @theme-box-decoration-secondary-border-width @theme-box-decoration-secondary-border-width, ~'calc(100% - @{theme-box-decoration-secondary-border-width})' @theme-box-decoration-secondary-border-width, ~'calc(100% - @{theme-box-decoration-secondary-border-width})' ~'calc(100% - @{theme-box-decoration-secondary-border-width})', @theme-box-decoration-secondary-border-width ~'calc(100% - @{theme-box-decoration-secondary-border-width})', @theme-box-decoration-secondary-border-width 100%, 100% 100%, 100% 0); } } .hook-box-decoration-secondary() when not (@theme-box-decoration-secondary-blend-mode = ~'') { &::before { mix-blend-mode: @theme-box-decoration-secondary-blend-mode; } } .hook-box-decoration() {} .hook-box-decoration-default() {} .hook-box-decoration-primary() {} .hook-box-decoration-secondary() {} // // Inverse // @inverse-theme-box-decoration-default-background: @inverse-global-muted-background; @inverse-theme-box-decoration-primary-background: @inverse-global-muted-background; @inverse-theme-box-decoration-secondary-background: @inverse-global-muted-background; @inverse-theme-box-decoration-default-border: transparent; @inverse-theme-box-decoration-primary-border: transparent; @inverse-theme-box-decoration-secondary-border: transparent; .tm-box-decoration-inverse.tm-box-decoration-default { .hook-inverse-box-decoration-default(); } .tm-box-decoration-inverse.tm-box-decoration-primary { .hook-inverse-box-decoration-primary(); } .tm-box-decoration-inverse.tm-box-decoration-secondary { .hook-inverse-box-decoration-secondary(); } .hook-inverse-box-decoration-default() when not (@theme-box-decoration-default-background = transparent) { &::before { background-color: @inverse-theme-box-decoration-default-background; } } .hook-inverse-box-decoration-primary() when not (@theme-box-decoration-primary-background = transparent) { &::before { background-color: @inverse-theme-box-decoration-primary-background; } } .hook-inverse-box-decoration-secondary() when not (@theme-box-decoration-secondary-background = transparent) { &::before { background-color: @inverse-theme-box-decoration-secondary-background; } } .hook-inverse-box-decoration-default() when not (@theme-box-decoration-default-border-width = 0) { &::before { border-color: @inverse-theme-box-decoration-default-border; } } .hook-inverse-box-decoration-primary() when not (@theme-box-decoration-primary-border-width = 0) { &::before { border-color: @inverse-theme-box-decoration-primary-border; } } .hook-inverse-box-decoration-secondary() when not (@theme-box-decoration-secondary-border-width = 0) { &::before { border-color: @inverse-theme-box-decoration-secondary-border; } } /* Transition Border ========================================================================== */ @theme-transition-border-direction-mode: inside; // inside, outside @theme-transition-border-transition-duration: 0.1s; @theme-transition-border-border-width: 0; @theme-transition-border-border: @global-primary-background; @theme-transition-border-hover-border-width: 10px; @theme-transition-border-hover-border: @global-primary-background; @internal-theme-transition-border-border-gradient: ~''; @internal-theme-transition-border-hover-border-gradient: ~''; @theme-transition-border-blend-mode: ~''; // Low specificity :where(.tm-transition-border) { display: block; position: relative; } .tm-transition-border::after { content: ''; position: absolute; z-index: 1; // Place outside border above adjacent content pointer-events: none; transition: @theme-transition-border-transition-duration ease-in-out; .hook-transition-border(); } /* Show */ .uk-transition-toggle:hover .tm-transition-border::after, .uk-transition-toggle:focus .tm-transition-border::after, .uk-transition-toggle:hover.tm-transition-border::after, .uk-transition-toggle:focus.tm-transition-border::after { .hook-transition-border-hover(); } .hook-transition-border() when (@theme-transition-border-direction-mode = inside) { top: -1px; bottom: -1px; left: -1px; right: -1px; } .hook-transition-border() when (@theme-transition-border-direction-mode = outside) and (@internal-theme-transition-border-border-gradient = ~'') and (@internal-theme-transition-border-hover-border-gradient = ~'') { top: 1px; bottom: 1px; left: 1px; right: 1px; } // For gradient border because outline not possible .hook-transition-border() when (@theme-transition-border-direction-mode = outside) and not (@internal-theme-transition-border-border-gradient = ~''), (@theme-transition-border-direction-mode = outside) and not (@internal-theme-transition-border-hover-border-gradient = ~'') { top: 50%; left: 50%; transform: translate(-50%, -50%); width: ~'calc(100% - 2px)'; height: ~'calc(100% - 2px)'; box-sizing: content-box; } .hook-transition-border() when (@theme-transition-border-direction-mode = inside), (@theme-transition-border-direction-mode = outside) and not (@internal-theme-transition-border-border-gradient = ~''), (@theme-transition-border-direction-mode = outside) and not (@internal-theme-transition-border-hover-border-gradient = ~'') { transition-property: border-color, border-width; border: @theme-transition-border-border-width solid @theme-transition-border-border; } .hook-transition-border() when (@theme-transition-border-direction-mode = outside) and (@internal-theme-transition-border-border-gradient = ~'') and (@internal-theme-transition-border-hover-border-gradient = ~'') { transition-property: outline-color, outline-width; outline: @theme-transition-border-border-width solid @theme-transition-border-border; } .hook-transition-border-hover() when (@theme-transition-border-direction-mode = inside), (@theme-transition-border-direction-mode = outside) and not (@internal-theme-transition-border-border-gradient = ~''), (@theme-transition-border-direction-mode = outside) and not (@internal-theme-transition-border-hover-border-gradient = ~'') { border-width: @theme-transition-border-hover-border-width; border-color: @theme-transition-border-hover-border; } .hook-transition-border-hover() when (@theme-transition-border-direction-mode = outside) and (@internal-theme-transition-border-border-gradient = ~'') and (@internal-theme-transition-border-hover-border-gradient = ~'') { outline-width: @theme-transition-border-hover-border-width; outline-color: @theme-transition-border-hover-border; } // Gradient .hook-transition-border() when not (@internal-theme-transition-border-border-gradient = ~'') { border-image: @internal-theme-transition-border-border-gradient 1; } .hook-transition-border-hover() when not (@internal-theme-transition-border-hover-border-gradient = ~'') { border-image: @internal-theme-transition-border-hover-border-gradient 1; } .hook-transition-border() {} .hook-transition-border-hover() {} .hook-transition-border() when not (@theme-transition-border-blend-mode = ~'') { mix-blend-mode: @theme-transition-border-blend-mode; top: 0; bottom: 0; left: 0; right: 0; } /* Font Family ========================================================================== */ .uk-font-default { font-family: @global-font-family; font-weight: @base-body-font-weight; } .uk-font-primary { font-family: @global-primary-font-family; font-weight: @global-primary-font-weight; } .uk-font-secondary { font-family: @global-secondary-font-family; font-weight: @global-secondary-font-weight; } .uk-font-tertiary { font-family: @global-tertiary-font-family; font-weight: @global-tertiary-font-weight; } /* Fix Drop Cap with Page Break (+ platform.less) ========================================================================== */ /* Reset */ .tm-page-break::first-letter { display: inline !important; margin: 0 !important; float: none !important; font-family: inherit !important; font-size: inherit !important; line-height: inherit !important; color: inherit !important; }
| ver. 1.4 |
Github
|
.
| PHP 8.3.23 | Generation time: 0.02 |
proxy
|
phpinfo
|
Settings