Your IP : 216.73.216.212
/* ========================================================================
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%);
//
// 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: none;
@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-stacked-margin-top: 20px;
@theme-headerbar-font-size: inherit;
//
// Sidebar
//
@theme-sidebar-min-width: 200px;
/* HTML
========================================================================== */
/*
* Force vertical scrollbar
* 1. `overflow-x` has to be on the `body` element for Safari to prevent horizontal scrolling on touch
This causes a random bug showing a vertical scrollbar in combination with some fonts like `Poppins`
This is why `overflow-y` must also be set to `hidden`
*/
html { overflow-y: scroll; }
/* 1 */
body { overflow: hidden; }
/* Page
========================================================================== */
/*
* Page
* Position context needed for `tm-header-overlay`.
*/
.tm-page { position: relative; }
/*
* 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: Grandient 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
*/
@media (min-width: @theme-page-container-width) {
.tm-page-container { background-color: @theme-page-container-background; }
.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-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
* 3. Take the full width. Doesn't use width because `html` element may have a `border` or `padding`
*/
.tm-header-overlay {
/* 1 */
position: absolute;
/* 2 */
z-index: @sticky-z-index;
/* 3 */
left: 0;
right: 0;
}
/*
* Header Mobile
*/
.tm-header-mobile {}
.tm-header-mobile-slide { z-index: @dropdown-z-index; }
/*
* Subnav in Navbar
*/
.uk-navbar-item .uk-subnav > * > :first-child { font-size: @navbar-nav-item-font-size; }
/* Sidebar
========================================================================== */
/* Phone landscape and bigger */
@media (min-width: @breakpoint-small) {
.tm-sidebar { min-width: @theme-sidebar-min-width; }
}
/* Dropdown stack
========================================================================== */
/*
* Reset width if column width is set
*/
.uk-dropdown-navbar.uk-dropdown-stack {
min-width: 0 !important;
max-width: none !important;
}
/* 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
@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
*/
@internal-section-title-mode: 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 {
-webkit-transform: rotate(180deg);
transform: rotate(180deg);
}
/*
* Collapsing Grid
*/
.tm-grid-expand > * { flex-grow: 1; }
/* Fix expand */
.tm-grid-expand > .uk-width-expand { flex-grow: 999; }
/* Phone landscape and bigger */
@media (min-width: @breakpoint-small) { .tm-grid-expand > .uk-width-expand\@s { flex-grow: 999; }}
/* Tablet landscape and bigger */
@media (min-width: @breakpoint-medium) { .tm-grid-expand > .uk-width-expand\@m { flex-grow: 999; }}
/* Desktop and bigger */
@media (min-width: @breakpoint-large) { .tm-grid-expand > .uk-width-expand\@l { flex-grow: 999; }}
/* Large screen and bigger */
@media (min-width: @breakpoint-xlarge) { .tm-grid-expand > .uk-width-expand\@xl { flex-grow: 999; }}
/* 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-image: "../vendor/assets/uikit-themes/master/images/mask-default-image.svg";
.tm-mask-default {
.hook-mask-default();
}
.hook-mask-default() when not (@internal-theme-mask-default-border-image = ~'') {
-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;
-webkit-mask-box-image-repeat: @internal-theme-mask-default-border-image-repeat;
mask-border-repeat: @internal-theme-mask-default-border-image-repeat;
// Firefox Fallback
mask-image: url(@internal-theme-mask-default-border-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: 100% 100%;
mask-size: 100% 100%;
}
.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-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-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;
.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; }
}
.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; }
}
.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() {}
.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; }
}
/* 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;
}
/* Position
========================================================================== */
// Navbar Center
.tm-position-z-index-high { z-index: @global-z-index - 10; }
/* 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;
}