Current Directory: /home/astoriaah/www/templates/yootheme/less
Viewing File: /home/astoriaah/www/templates/yootheme/less/theme.less
/* ========================================================================
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: 1200px;
@theme-page-container-padding-vertical: @global-large-margin;
@theme-page-container-background: darken(@global-muted-background, 3%);
//
// Toolbar
//
@theme-toolbar-color-mode: light;
@theme-toolbar-padding-vertical: 10px;
@theme-toolbar-background: @global-secondary-background;
@theme-toolbar-font-size: @global-small-font-size;
//
// Header
//
@theme-headerbar-top-padding-top: 40px;
@theme-headerbar-top-padding-bottom: 40px;
@theme-headerbar-top-background: @navbar-background;
@theme-headerbar-top-border-width: 0;
@theme-headerbar-top-border: transparent;
@theme-headerbar-bottom-padding-top: 40px;
@theme-headerbar-bottom-padding-bottom: 40px;
@theme-headerbar-bottom-background: @navbar-background;
@theme-headerbar-stacked-margin-top: 40px;
//
// 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-transparent`
*/
.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: @theme-page-container-background 50% 50% / cover no-repeat fixed; }
.tm-page-container .tm-page {
max-width: @theme-page-container-width;
background: @base-body-background;
}
.tm-page-container-padding {
padding-top: @theme-page-container-padding-vertical;
padding-bottom: @theme-page-container-padding-vertical;
}
}
/* Toolbar
========================================================================== */
.tm-toolbar {
padding-top: @theme-toolbar-padding-vertical;
padding-bottom: @theme-toolbar-padding-vertical;
background: @theme-toolbar-background;
font-size: @theme-toolbar-font-size;
}
.tm-toolbar:extend(.uk-light all) when (@theme-toolbar-color-mode = light) {}
.tm-toolbar:extend(.uk-dark all) when (@theme-toolbar-color-mode = dark) {}
/* Header
========================================================================== */
/*
* Header
*/
.tm-header {}
/*
* Headerbars
*/
.tm-headerbar-top {
padding-top: @theme-headerbar-top-padding-top;
padding-bottom: @theme-headerbar-top-padding-bottom;
background: @theme-headerbar-top-background;
}
.tm-headerbar-top when not (@theme-headerbar-top-border-width = 0) { border-bottom: @theme-headerbar-top-border-width solid @theme-headerbar-top-border; }
.tm-headerbar-bottom {
padding-top: @theme-headerbar-bottom-padding-top;
padding-bottom: @theme-headerbar-bottom-padding-bottom;
background: @theme-headerbar-bottom-background;
}
.tm-headerbar-stacked { margin-top: @theme-headerbar-stacked-margin-top; }
/*
* 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-transparent {
/* 1 */
position: absolute;
/* 2 */
z-index: @sticky-z-index;
/* 3 */
left: 0;
right: 0;
}
.tm-header-transparent .tm-headerbar-top,
.tm-header-transparent .tm-headerbar-bottom { background: transparent; }
.tm-header-transparent .tm-headerbar-top { border-bottom-color: transparent; }
/*
* Header Mobile
*/
.tm-header-mobile {}
/* 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;
}
/* Blog
========================================================================== */
/*
* Leading article
* Needed for Joomla
*/
.tm-leading-article .uk-article:last-child { padding-bottom: @global-margin; }
/* 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;
}
/* WordPress
========================================================================== */
//
// Editor
//
.alignleft:extend(.uk-align-left all) {}
.alignright:extend(.uk-align-right all) {}
.aligncenter:extend(.uk-align-center all) {}
/* 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;
/*
* 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;
background-color: currentColor;
}
}
//
// Inverse
//
@inverse-section-title-color: @inverse-global-color;
.hook-inverse() {
.tm-section-title { color: @inverse-section-title-color; }
}
/* Utility
========================================================================== */
.tm-rotate-180 {
-webkit-transform: rotate(180deg);
transform: rotate(180deg);
}