uix-kit
Version:
A free web kits for fast web design and development, compatible with Bootstrap v5.
1,910 lines (1,819 loc) • 67.5 kB
CSS
/*!
*
* DO NOT OVERRIDE THIS FILE.
* Generated with "npm run build"
*
* ## Project Name : Uix Kit
* ## Project Description : A free web kits for fast web design and development, compatible with Bootstrap v5.
* ## Project URL : https://uiux.cc
* ## Version : 5.4.0
* ## Based on : Uix Kit (https://github.com/xizon/uix-kit)
* ## Last Update : April 7, 2025
* ## Created by : UIUX Lab (https://uiux.cc) (uiuxlab@gmail.com)
* ## Released under the MIT license.
*
*/
/**
TABLE OF CONTENTS
---------------------------
1.Basic
2.Brand
3.Bullet List
4.Entry
5.Header Area
6.Helper Classes
7.Basic Layout Styles
8.Mobile Menu
9.Navigation
10.Navs
11.Sidebar
12.Typography
13.Advanced Slider (Basic)
14.Advanced Slider (Special Effects)
15.Button
16.Cards
17.Content Placeholder Animated
18.Dropdown Menu
19.Form
20.Form ( Layout )-
21.Form ( Material Design Theme )
22.Form
23.Cutom Light Box
24.Brands List
25.Bulleted List
26.Maintain Aspect Ratio List
27.Side by Side List
28.Login Templates
29.Modal Dialog
30.Ribbon
31.Comments
32.Striking
33.Table
34.ToolTip
35.Vertical Menu (RTL)
36.WordPress Core ( Do not use prefix "uix-" )
37.WordPress Blocks ( Do not use prefix "uix-" )
*/
/**
Adding support for language written in a Right To Left (RTL) direction is easy -
it's just a matter of overwriting all the horizontal positioning attributes
of your CSS stylesheet in a separate stylesheet file named -rtl.css.
*/
/******/
/******/
/* must be placed in the first place */
:root {
/* COLOR PALETTE */
--uix-placeholder-text-color: #E6E6E8;
--uix-highlight-color1: #CE3A3E;
--uix-highlight-color2: #DE510E;
--uix-primary-text-color: #212121;
--uix-primary-link-color: #474747;
--uix-primary-link-hover-color: #212121;
--uix-heading-text-color: #212121;
--uix-sub-text-color: #AEAEAE;
--uix-dividing-line-color: #DCDCDC;
--uix-btn-gradient-color1: #CE3A3E;
--uix-btn-gradient-color2: #C04645;
--uix-btn-gradient-color3: #DE510E;
--uix-primary-bg-color: transparent;
}
/******/
/******/
/* base */
/* ======================================================
<!-- Basic -->
/* ====================================================== */
body {
direction: rtl;
unicode-bidi: embed;
}
caption,
th,
td {
text-align: right;
}
.wp-block-quote,
blockquote {
border-left-width: 1px !important;
border-right-width: 5px !important;
border-left-color: #F8F8F8 !important;
border-right-color: #CE3A3E !important;
}
.wp-block-quote::before,
blockquote::before {
margin-right: auto;
margin-left: 0.21875rem;
}
pre.uix-precode label {
left: auto;
right: -5px;
}
pre.uix-precode code {
margin: 0 3rem 0 0;
border-left: none;
border-right: 1px solid #d9d9d9;
}
/* ======================================================
<!-- Brand -->
/* ====================================================== */
.uix-brand {
float: right;
}
/* ======================================================
<!-- Bullet List -->
/* ====================================================== */
/*
* 1. Normal List Styling
* 2. Normal Numbers Ordered List
* 3. Custom Circle Icons Ordered List
* 4. Big Numbers Ordered List
* 5. Step Timeline By Numbers
*/
/*
---------------------------
1. Normal List Styling
---------------------------
*/
ol.uix-list--normal,
ul.uix-list--normal,
.uix-list--normal ul,
.uix-list--normal ol {
padding-left: auto;
padding-right: 0.875rem;
}
/*
---------------------------
2. Normal Numbers Ordered List
---------------------------
*/
ol.uix-list--numbered,
.uix-list--numbered ol {
margin-left: auto;
margin-right: 1rem;
}
ol.uix-list--numbered > li,
.uix-list--numbered ol > li {
margin-left: auto;
margin-right: 0.5rem;
}
ol.uix-list--numbered > li::before,
.uix-list--numbered ol > li::before {
left: auto;
right: -2.25em;
margin-right: auto;
margin-left: 0.5em;
}
/*
---------------------------
3. Custom Circle Icons Ordered List
---------------------------
*/
ol.uix-list--circle,
ul.uix-list--circle,
.uix-list--circle ol,
.uix-list--circle ul {
margin-left: auto;
margin-right: 1rem;
}
ol.uix-list--circle > li,
ul.uix-list--circle > li,
.uix-list--circle ol > li,
.uix-list--circle ul > li {
margin-left: auto;
margin-right: 1rem;
}
ol.uix-list--circle > li::before,
ul.uix-list--circle > li::before,
.uix-list--circle ol > li::before,
.uix-list--circle ul > li::before {
left: auto;
right: -1.5em;
}
/*
---------------------------
4. Big Numbers Ordered List
---------------------------
*/
ol.uix-list--numbered-large li,
.uix-list--numbered-large ol li {
padding-left: auto;
padding-right: 2.5rem;
margin-left: auto;
margin-right: 1.2rem;
}
ol.uix-list--numbered-large li::before,
.uix-list--numbered-large ol li::before {
margin-left: auto;
margin-right: -3.5rem;
}
ol.uix-list--numbered-large.uix-list--numbered-bg li,
.uix-list--numbered-large.uix-list--numbered-bg ol li {
margin-right: 0;
padding-right: 4.5rem;
}
ol.uix-list--numbered-large.uix-list--numbered-bg li p,
.uix-list--numbered-large.uix-list--numbered-bg ol li p {
padding-right: auto;
padding-left: 2rem;
}
ol.uix-list--numbered-large.uix-list--numbered-bg li::before,
.uix-list--numbered-large.uix-list--numbered-bg ol li::before {
margin-right: -4rem;
}
/*
---------------------------
5. Step Timeline By Numbers
---------------------------
*/
.uix-list--numbered-step {
margin-left: auto;
margin-right: 1rem;
}
.uix-list--numbered-step li {
padding: 0 3.75rem 1.5rem 0;
border-left: none;
border-right: 2px solid #333;
}
.uix-list--numbered-step li::before {
left: auto;
right: -26px;
}
.uix-list--numbered-step li:last-child {
border-right: none;
}
@media all and (max-width: 768px) {
.uix-list--numbered-step li {
padding-right: 2.5rem;
}
}
/* ======================================================
<!-- Entry -->
/* ====================================================== */
/*
* 4. Main Content
* 5. Meta Info
*/
/*
---------------------------
4. Main Content
---------------------------
*/
.uix-entry__content pre:not(.uix-precode) {
border-left: 1px solid #d9d9d9;
border-right: 5px solid var(--uix-highlight-color1);
}
/*
---------------------------
5. Meta Info
---------------------------
*/
ul.uix-entry__meta.uix-entry__meta--wrap li strong {
padding-right: auto;
padding-left: 0.4375rem;
}
/* ======================================================
<!-- Header Area -->
/* ====================================================== */
.uix-header__container {
left: auto;
right: 0;
}
/* ======================================================
<!-- Helper Classes -->
/* ====================================================== */
/*
* 5. Element Floating
* 6. Element Alignment
* 12. Tip Bubble
* 14. Position
*/
/*
---------------------------
5. Element Floating
---------------------------
*/
.uix-f-l {
float: right;
}
.uix-f-r {
float: left;
}
/*
---------------------------
6. Element Alignment
---------------------------
*/
.uix-t-r {
text-align: left;
}
.uix-t-l {
text-align: right;
}
/* The breakpoint is the same as bootstrap 5 */
/*
--breakpoint-xs:0;
--breakpoint-sm:576px;
--breakpoint-md:768px;
--breakpoint-lg:992px;
--breakpoint-xl:1200px;
--breakpoint-xxl:1400px;
*/
@media all and (max-width: 576px) {
.uix-t-r--sm {
text-align: left;
}
.uix-t-l--sm {
text-align: right;
}
}
@media all and (max-width: 768px) {
.uix-t-r--md {
text-align: left;
}
.uix-t-l--md {
text-align: right;
}
}
@media all and (max-width: 992px) {
.uix-t-r--lg {
text-align: left;
}
.uix-t-l--lg {
text-align: right;
}
}
@media all and (max-width: 1200px) {
.uix-t-r--xl {
text-align: left;
}
.uix-t-l--xl {
text-align: right;
}
}
@media all and (max-width: 1400px) {
.uix-t-r--xxl {
text-align: left;
}
.uix-t-l--xxl {
text-align: right;
}
}
/*
---------------------------
12. Tip Bubble
---------------------------
*/
.uix-bubble {
margin-left: auto;
margin-right: 0.5rem;
right: auto;
left: 2.3rem;
}
@media all and (max-width: 768px) {
.uix-bubble {
right: auto;
left: 1rem;
}
}
/*
---------------------------
14. Position
---------------------------
*/
/* Don't use `width: 100%` because it is wrong if the parent has padding. */
.uix-dir--left {
left: auto !important;
right: 0 !important;
}
.uix-dir--right {
left: 0 !important;
right: auto !important;
}
.uix-dir--top-left {
left: auto !important;
right: 0 !important;
}
.uix-dir--top-right {
left: 0 !important;
right: auto !important;
}
.uix-dir--bottom-left {
left: auto !important;
right: 0 !important;
}
.uix-dir--bottom-right {
left: 0 !important;
right: auto !important;
}
/* ======================================================
<!-- Basic Layout Styles -->
/* ====================================================== */
/*
---------------------------
4. Uix Grid
---------------------------
*/
[class*=uix-core-grid__col-] {
float: right;
}
.uix-core-grid [class*=uix-core-grid__col-] {
padding-right: auto;
padding-left: 15px;
}
.uix-core-grid__row .uix-core-grid [class*=uix-core-grid__col-]:last-of-type {
padding-left: 0;
}
/* ======================================================
<!-- Mobile Menu -->
/* ====================================================== */
/* Mobile Menu Toggle */
.uix-menu-mobile__toggle {
right: auto;
left: 30px;
}
.uix-menu-mobile__toggle span {
left: auto;
right: 12px;
}
body.js-uix-menu-opened .uix-menu-mobile__toggle span {
right: 7px;
}
/* Mobile Menu Container */
.uix-menu__container.is-mobile {
left: auto;
right: 0;
transform: translateX(300px);
}
.uix-menu__container.is-mobile li.multi-column span.multi-column-title,
.uix-menu__container.is-mobile ul.uix-menu > li ul > li {
padding-right: 0.625rem !important;
}
.uix-menu__container.is-mobile ul li ul li a, .uix-menu__container.is-mobile ul li ul li span {
padding-left: auto;
padding-right: 0;
}
.uix-menu__container.is-mobile li:not(.multi-column) ul ul {
padding-left: auto;
padding-right: 0.825em;
}
.uix-menu__container.is-mobile > .uix-menu__inner > .uix-menu__right-box {
padding-left: auto;
padding-right: 0.5rem;
}
.uix-menu__container.is-mobile > .uix-menu__inner > .uix-menu__right-box a {
margin-right: auto;
margin-left: 0.3rem;
}
.uix-menu__container.is-mobile .uix-menu__arrow-mobile {
right: auto;
left: 10px;
}
.js-uix-menu-opened .uix-menu__container.is-mobile {
transform: translateX(0);
}
/* ======================================================
<!-- Navigation -->
/* ====================================================== */
.uix-menu__container:not(.is-mobile) {
float: left;
/*
---------------------------
1. Primary Menu
---------------------------
*/
/*
---------------------------
3. Mega/Dropdown Menu
---------------------------
*/
/* Multi-column */
/*
---------------------------
4. Dropdown Arrow
---------------------------
*/
}
.uix-menu__container:not(.is-mobile) ul.uix-menu {
float: right;
/*
---------------------------
2. Sub Menu (Using WordPress default class name )
---------------------------
*/
}
.uix-menu__container:not(.is-mobile) ul.uix-menu > li {
margin-right: auto;
margin-left: 1.6875rem;
}
.uix-menu__container:not(.is-mobile) ul.uix-menu > li .uix-bubble {
right: auto;
left: 1rem;
}
.uix-menu__container:not(.is-mobile) ul.uix-menu > li:not(.multi-column) > ul ul {
margin-left: auto;
margin-right: -0.071875rem;
}
.uix-menu__container:not(.is-mobile) ul.uix-menu > li:not(.multi-column) > ul ul ul {
margin-right: 0;
}
.uix-menu__container:not(.is-mobile) ul.uix-menu > li > ul::before {
left: auto;
right: 0;
}
.uix-menu__container:not(.is-mobile) ul.uix-menu > li > ul::after {
left: auto;
right: 3.5rem;
margin-left: auto;
margin-right: -0.15625rem;
}
.uix-menu__container:not(.is-mobile) ul.uix-menu > li li {
padding-left: auto;
padding-right: 0.875rem;
}
.uix-menu__container:not(.is-mobile) ul.uix-menu > li ul li {
padding-left: auto;
padding-right: 2.034375rem;
}
.uix-menu__container:not(.is-mobile) ul.uix-menu ul.sub-menu {
left: auto;
right: 0;
}
.uix-menu__container:not(.is-mobile) ul.uix-menu > li:not(.multi-column) > ul {
right: 1.784375rem;
}
.uix-menu__container:not(.is-mobile) ul.uix-menu > li:not(.multi-column) > ul ul {
left: auto;
right: 100%;
}
.uix-menu__container:not(.is-mobile) li.multi-column span.multi-column-title {
padding-left: auto;
padding-right: 1.159375rem;
}
.uix-menu__container:not(.is-mobile) li.multi-column > ul li {
padding-left: auto !important;
padding-right: 1.159375rem !important;
}
.uix-menu__container:not(.is-mobile) li.multi-column > ul li .uix-bubble {
right: auto;
left: 1rem;
}
.uix-menu__container:not(.is-mobile) ul.uix-menu ul.sub-menu .uix-menu__arrow {
right: auto;
left: 1.159375rem;
}
.uix-menu__container:not(.is-mobile) .uix-menu__arrow {
right: auto;
left: 0.284375rem;
}
@media all and (max-width: 1250px) {
.uix-menu__container:not(.is-mobile) ul.uix-menu > li {
margin-right: auto;
margin-left: 1.125rem;
}
}
/* ======================================================
<!-- Navs -->
/* ====================================================== */
/*
* 1. Base Nav
* 5. Dropdown
*/
.uix-nav {
/*
---------------------------
1. Base Nav
---------------------------
*/
/*
---------------------------
5. Dropdown
---------------------------
*/
}
.uix-nav.uix-t-r ul li {
margin: 0 1rem 0 0;
}
.uix-nav ul li {
/*-- Fold Out --*/
}
.uix-nav ul li ul {
left: auto;
right: 0;
}
/* ======================================================
<!-- Sidebar -->
/* ====================================================== */
/*
* 1. Basic - Synchronize to WordPress's class name
* 2. Calendar Widget - Synchronize to WordPress's class name
* 3. Link List - Synchronize to WordPress's class name
* 4. Tag cloud from sidebar - Synchronize to WordPress's class name
* 6. Post List with Featured Image
*/
/*
---------------------------
1. Basic
---------------------------
*/
.uix-sidebar__container {
padding-left: auto;
padding-right: 2.1875rem;
}
@media all and (max-width: 768px) {
.uix-sidebar__container {
padding-right: 0;
}
}
/*
---------------------------
2. Calendar Widget
---------------------------
*/
.calendar_wrap > table tfoot #next {
text-align: left;
}
/*
---------------------------
3. Link List
---------------------------
*/
.widget_categories ul,
.widget_nav_menu ul,
.widget_pages ul {
margin-left: auto;
margin-right: 1.25rem;
}
.widget_categories ul li a::before,
.widget_nav_menu ul li a::before,
.widget_pages ul li a::before {
margin-right: auto;
margin-left: 0.721875rem;
}
.widget_categories ul li > .cat-item-count,
.widget_nav_menu ul li > .cat-item-count,
.widget_pages ul li > .cat-item-count {
right: auto;
left: 0;
}
/*
---------------------------
4. Tag cloud from sidebar
---------------------------
*/
.tagcloud > a::after {
margin-left: auto;
margin-right: 0.546875rem;
}
/*
---------------------------
6. Post List with Featured Image
---------------------------
*/
.uix-sidebar__posts-img li .uix-sidebar__posts-img__thumb {
float: right;
margin-right: auto;
margin-left: 0.875rem;
text-align: right;
}
.uix-sidebar__posts-img li .uix-sidebar__posts-img__desc {
float: right;
}
/* ======================================================
<!-- Typography -->
/* ====================================================== */
/*
* 6. Vertical Text
*/
/*
---------------------------
6. Vertical Text
---------------------------
*/
.uix-typo--vertical:not(.uix-typo--vertical-characters-line) {
writing-mode: vertical-lr;
transform: translateX(-0.5rem);
}
/* ======================================================
<!-- Advanced Slider (Basic) -->
/* ====================================================== */
:root {
/* COLOR PALETTE */
--uix-placeholder-text-color: #E6E6E8;
--uix-highlight-color1: #CE3A3E;
--uix-highlight-color2: #DE510E;
--uix-primary-text-color: #212121;
--uix-primary-link-color: #474747;
--uix-primary-link-hover-color: #212121;
--uix-heading-text-color: #212121;
--uix-sub-text-color: #AEAEAE;
--uix-dividing-line-color: #DCDCDC;
--uix-btn-gradient-color1: #CE3A3E;
--uix-btn-gradient-color2: #C04645;
--uix-btn-gradient-color3: #DE510E;
--uix-primary-bg-color: transparent;
}
/*
* 1. Initialize the slider style
* 2. Pagination dots
* 3. Next/Prev buttons
*/
/*
---------------------------
1. Initialize the slider style
---------------------------
*/
.uix-advanced-slider .uix-advanced-slider__inner .uix-advanced-slider__item {
left: auto;
right: 0;
}
/*
---------------------------
2. Pagination dots
---------------------------
*/
.uix-advanced-slider__pagination ul {
left: auto;
right: 0;
}
/*
---------------------------
3. Next/Prev buttons
---------------------------
*/
.uix-advanced-slider__arrows .uix-advanced-slider__arrows--prev {
left: auto;
right: 15px;
}
.uix-advanced-slider__arrows .uix-advanced-slider__arrows--next {
right: auto;
left: 15px;
text-align: left;
}
/* ======================================================
<!-- Advanced Slider (Special Effects) -->
/* ====================================================== */
:root {
/* COLOR PALETTE */
--uix-placeholder-text-color: #E6E6E8;
--uix-highlight-color1: #CE3A3E;
--uix-highlight-color2: #DE510E;
--uix-primary-text-color: #212121;
--uix-primary-link-color: #474747;
--uix-primary-link-hover-color: #212121;
--uix-heading-text-color: #212121;
--uix-sub-text-color: #AEAEAE;
--uix-dividing-line-color: #DCDCDC;
--uix-btn-gradient-color1: #CE3A3E;
--uix-btn-gradient-color2: #C04645;
--uix-btn-gradient-color3: #DE510E;
--uix-primary-bg-color: transparent;
}
/*
* 1. Initialize the slider style
* 2. Pagination dots
* 3. Next/Prev buttons
*/
/*
---------------------------
1. Initialize the slider style
---------------------------
*/
.uix-advanced-slider-sp canvas {
left: auto;
right: 0;
}
.uix-advanced-slider-sp .uix-advanced-slider-sp__inner .uix-advanced-slider-sp__item {
left: auto;
right: 0;
}
/*
---------------------------
2. Pagination dots
---------------------------
*/
.uix-advanced-slider-sp__pagination ul {
left: auto;
right: 0;
}
/*
---------------------------
3. Next/Prev buttons
---------------------------
*/
.uix-advanced-slider-sp__arrows .uix-advanced-slider-sp__arrows--prev {
left: auto;
right: 15px;
}
.uix-advanced-slider-sp__arrows .uix-advanced-slider-sp__arrows--next {
right: auto;
left: 15px;
text-align: left;
}
/* ======================================================
<!-- Button -->
/* ====================================================== */
:root {
/* COLOR PALETTE */
--uix-placeholder-text-color: #E6E6E8;
--uix-highlight-color1: #CE3A3E;
--uix-highlight-color2: #DE510E;
--uix-primary-text-color: #212121;
--uix-primary-link-color: #474747;
--uix-primary-link-hover-color: #212121;
--uix-heading-text-color: #212121;
--uix-sub-text-color: #AEAEAE;
--uix-dividing-line-color: #DCDCDC;
--uix-btn-gradient-color1: #CE3A3E;
--uix-btn-gradient-color2: #C04645;
--uix-btn-gradient-color3: #DE510E;
--uix-primary-bg-color: transparent;
}
/*
* 4. Icons
* 5. Group
* 7. Margin
*/
/*
---------------------------
4. Icons
---------------------------
*/
.uix-btn__icon {
padding-left: auto;
padding-right: 3.6rem;
}
.uix-btn__icon.uix-btn__icon--right {
padding-left: 3.6rem;
padding-right: 2.5rem;
}
.uix-btn__icon.uix-btn__icon--right > span {
left: 0;
right: auto;
}
.uix-btn__icon > span {
left: auto;
right: 0;
}
.uix-btn__icon.uix-btn__icon--left > span {
right: 0;
}
.uix-btn__icon.is-transparent.uix-btn__icon--left > span {
border-right: none;
border-left: 1px solid rgba(0, 0, 0, 0.1);
}
.uix-btn__icon.is-transparent.uix-btn__icon--right > span {
border-left: none;
border-right: 1px solid rgba(0, 0, 0, 0.1);
}
.uix-btn__icon.is-pill.uix-btn__icon--left span {
border-radius: 35px 35px 0 0;
}
.uix-btn__icon.is-pill.uix-btn__icon--right span {
border-radius: 0 0 50px 50px;
}
.uix-btn__icon.is-rounded.uix-btn__icon--left span {
border-radius: 4px 4px 0 0;
}
.uix-btn__icon.is-rounded.uix-btn__icon--right span {
border-radius: 0 0 4px 4px;
}
/*
---------------------------
5. Group
---------------------------
*/
.uix-btn__group > .uix-btn {
float: right;
}
.uix-btn__group > .uix-btn.is-rounded:first-child {
border-radius: 4px 4px 0 0;
}
.uix-btn__group > .uix-btn.is-rounded:last-child {
border-radius: 0 0 4px 4px;
}
.uix-btn__group > .uix-btn.uix-btn__border--thin:not(:first-child) {
margin-left: auto;
margin-right: -1px;
}
.uix-btn__group > .uix-btn.uix-btn__border--medium:not(:first-child) {
margin-left: auto;
margin-right: -2px;
}
.uix-btn__group > .uix-btn.uix-btn__border--thick:not(:first-child) {
margin-left: auto;
margin-right: -3px;
}
/*
---------------------------
7. Margin
---------------------------
*/
.uix-btn__margin--l {
margin-left: auto;
margin-right: 1rem;
}
.uix-btn__margin--r {
margin-right: auto;
margin-left: 1rem;
}
/* ======================================================
<!-- Cards -->
/* ====================================================== */
:root {
/* COLOR PALETTE */
--uix-placeholder-text-color: #E6E6E8;
--uix-highlight-color1: #CE3A3E;
--uix-highlight-color2: #DE510E;
--uix-primary-text-color: #212121;
--uix-primary-link-color: #474747;
--uix-primary-link-hover-color: #212121;
--uix-heading-text-color: #212121;
--uix-sub-text-color: #AEAEAE;
--uix-dividing-line-color: #DCDCDC;
--uix-btn-gradient-color1: #CE3A3E;
--uix-btn-gradient-color2: #C04645;
--uix-btn-gradient-color3: #DE510E;
--uix-primary-bg-color: transparent;
}
/* ======================================================
<!-- Content Placeholder Animated -->
/* ====================================================== */
:root {
/* COLOR PALETTE */
--uix-placeholder-text-color: #E6E6E8;
--uix-highlight-color1: #CE3A3E;
--uix-highlight-color2: #DE510E;
--uix-primary-text-color: #212121;
--uix-primary-link-color: #474747;
--uix-primary-link-hover-color: #212121;
--uix-heading-text-color: #212121;
--uix-sub-text-color: #AEAEAE;
--uix-dividing-line-color: #DCDCDC;
--uix-btn-gradient-color1: #CE3A3E;
--uix-btn-gradient-color2: #C04645;
--uix-btn-gradient-color3: #DE510E;
--uix-primary-bg-color: transparent;
}
.uix-content-placeholder .uix-content-placeholder__thumbSlot {
float: right;
}
.uix-content-placeholder .uix-content-placeholder__thumbSlot ~ .uix-content-placeholder__textSlot {
margin-left: auto;
margin-right: 20px;
float: right;
}
/* ======================================================
<!-- Dropdown Menu -->
/* ====================================================== */
:root {
/* COLOR PALETTE */
--uix-placeholder-text-color: #E6E6E8;
--uix-highlight-color1: #CE3A3E;
--uix-highlight-color2: #DE510E;
--uix-primary-text-color: #212121;
--uix-primary-link-color: #474747;
--uix-primary-link-hover-color: #212121;
--uix-heading-text-color: #212121;
--uix-sub-text-color: #AEAEAE;
--uix-dividing-line-color: #DCDCDC;
--uix-btn-gradient-color1: #CE3A3E;
--uix-btn-gradient-color2: #C04645;
--uix-btn-gradient-color3: #DE510E;
--uix-primary-bg-color: transparent;
}
/* Do not use <a> tag */
.uix-dropdown-menu > ul {
left: auto;
right: 0;
}
.uix-dropdown-menu > ul::before {
left: auto;
right: 20px;
}
/* ======================================================
<!-- Form -->
/* ====================================================== */
:root {
/* COLOR PALETTE */
--uix-placeholder-text-color: #E6E6E8;
--uix-highlight-color1: #CE3A3E;
--uix-highlight-color2: #DE510E;
--uix-primary-text-color: #212121;
--uix-primary-link-color: #474747;
--uix-primary-link-hover-color: #212121;
--uix-heading-text-color: #212121;
--uix-sub-text-color: #AEAEAE;
--uix-dividing-line-color: #DCDCDC;
--uix-btn-gradient-color1: #CE3A3E;
--uix-btn-gradient-color2: #C04645;
--uix-btn-gradient-color3: #DE510E;
--uix-primary-bg-color: transparent;
}
/*
* 1. Controls
* 2. Upload
* 3. Group
* 4. Custom Select
* 5. Custom Radio, Toggle And Checkbox
* 6. Custom Input Number
* 7. Multiple Selector
* 8. Single Selector
* 9. Search of Widget
*/
/*
---------------------------
1. Controls
---------------------------
*/
/* Default Controls */
.uix-controls:not(.uix-controls__toggle):not(.uix-controls__checkbox):not(.uix-controls__radio):not(.uix-controls__select) {
text-align: right;
/*-- Select Arrow --*/
/*-- Radio --*/
/*-- Select --*/
/*-- Form With Icon --*/
/*-- WordPress Style --*/
}
.uix-controls:not(.uix-controls__toggle):not(.uix-controls__checkbox):not(.uix-controls__radio):not(.uix-controls__select).uix-controls__side {
margin-left: auto;
margin-right: 0.2rem;
}
.uix-controls:not(.uix-controls__toggle):not(.uix-controls__checkbox):not(.uix-controls__radio):not(.uix-controls__select).uix-controls__short-s input:not([type=checkbox]):not([type=radio]) {
margin-right: auto;
margin-left: 0.5rem;
}
.uix-controls:not(.uix-controls__toggle):not(.uix-controls__checkbox):not(.uix-controls__radio):not(.uix-controls__select).uix-controls__short-m input:not([type=checkbox]):not([type=radio]) {
margin-right: auto;
margin-left: 0.5rem;
}
.uix-controls:not(.uix-controls__toggle):not(.uix-controls__checkbox):not(.uix-controls__radio):not(.uix-controls__select).uix-controls__short-l input:not([type=checkbox]):not([type=radio]) {
margin-right: auto;
margin-left: 0.5rem;
}
.uix-controls:not(.uix-controls__toggle):not(.uix-controls__checkbox):not(.uix-controls__radio):not(.uix-controls__select) label {
left: auto;
right: 0.875rem;
transform-origin: right top;
}
.uix-controls:not(.uix-controls__toggle):not(.uix-controls__checkbox):not(.uix-controls__radio):not(.uix-controls__select) .uix-controls__arrow {
right: auto;
left: 0.875rem;
}
.uix-controls:not(.uix-controls__toggle):not(.uix-controls__checkbox):not(.uix-controls__radio):not(.uix-controls__select).uix-controls__normal-radio label {
padding-left: auto !important;
padding-right: 1.25rem !important;
right: auto !important;
}
.uix-controls:not(.uix-controls__toggle):not(.uix-controls__checkbox):not(.uix-controls__radio):not(.uix-controls__select).uix-controls__normal-select {
margin-right: auto;
margin-left: 1.65rem;
}
.uix-controls:not(.uix-controls__toggle):not(.uix-controls__checkbox):not(.uix-controls__radio):not(.uix-controls__select).uix-controls__normal-select .uix-controls__arrow {
left: -1rem;
}
.uix-controls:not(.uix-controls__toggle):not(.uix-controls__checkbox):not(.uix-controls__radio):not(.uix-controls__select).is-iconic label {
left: auto;
right: 2.546875rem;
}
.uix-controls:not(.uix-controls__toggle):not(.uix-controls__checkbox):not(.uix-controls__radio):not(.uix-controls__select).is-iconic i {
left: auto;
right: 1rem;
}
.uix-controls:not(.uix-controls__toggle):not(.uix-controls__checkbox):not(.uix-controls__radio):not(.uix-controls__select).is-iconic i::after {
left: auto;
right: 1.2rem;
}
.uix-controls:not(.uix-controls__toggle):not(.uix-controls__checkbox):not(.uix-controls__radio):not(.uix-controls__select).is-iconic input:not([type=checkbox]):not([type=radio]) {
padding-left: auto;
padding-right: 2.546875rem;
}
.uix-controls:not(.uix-controls__toggle):not(.uix-controls__checkbox):not(.uix-controls__radio):not(.uix-controls__select).is-iconic textarea,
.uix-controls:not(.uix-controls__toggle):not(.uix-controls__checkbox):not(.uix-controls__radio):not(.uix-controls__select).is-iconic button:not(.uix-btn),
.uix-controls:not(.uix-controls__toggle):not(.uix-controls__checkbox):not(.uix-controls__radio):not(.uix-controls__select).is-iconic select {
padding-left: auto;
padding-right: 2.546875rem;
}
.uix-controls:not(.uix-controls__toggle):not(.uix-controls__checkbox):not(.uix-controls__radio):not(.uix-controls__select).is-iconic.is-reversed label {
left: auto;
right: 0.546875rem;
}
.uix-controls:not(.uix-controls__toggle):not(.uix-controls__checkbox):not(.uix-controls__radio):not(.uix-controls__select).is-iconic.is-reversed i {
left: 1rem;
right: auto;
}
.uix-controls:not(.uix-controls__toggle):not(.uix-controls__checkbox):not(.uix-controls__radio):not(.uix-controls__select).is-iconic.is-reversed i::after {
left: 1.2rem;
right: auto;
}
.uix-controls:not(.uix-controls__toggle):not(.uix-controls__checkbox):not(.uix-controls__radio):not(.uix-controls__select).is-iconic.is-reversed input:not([type=checkbox]):not([type=radio]) {
padding-right: 0.546875rem;
padding-left: 2.546875rem;
}
.uix-controls:not(.uix-controls__toggle):not(.uix-controls__checkbox):not(.uix-controls__radio):not(.uix-controls__select).is-iconic.is-reversed textarea,
.uix-controls:not(.uix-controls__toggle):not(.uix-controls__checkbox):not(.uix-controls__radio):not(.uix-controls__select).is-iconic.is-reversed button:not(.uix-btn),
.uix-controls:not(.uix-controls__toggle):not(.uix-controls__checkbox):not(.uix-controls__radio):not(.uix-controls__select).is-iconic.is-reversed select {
padding-right: 0.546875rem;
padding-left: 2.546875rem;
}
.uix-controls:not(.uix-controls__toggle):not(.uix-controls__checkbox):not(.uix-controls__radio):not(.uix-controls__select) .req-icon {
right: auto;
left: 0.721875rem;
}
/*
---------------------------
2. Upload
---------------------------
*/
.uix-controls__file-container .uix-controls__file-trigger i {
margin-right: auto;
margin-left: 0.5rem;
}
.uix-controls__file-container input[type=file] {
left: auto;
right: 0;
}
/* HTML5 drag and drop upload control */
.uix-controls__file-field-container .uix-controls__file-field-trigger > div input {
left: auto;
right: 0;
}
.uix-controls__file-field-container .uix-controls__file-field-trigger > div input::before {
left: auto;
right: 0;
}
/*
---------------------------
3. Group
---------------------------
*/
.uix-controls__merge {
/*-- Form With Icon --*/
}
.uix-controls__merge i {
margin-right: auto;
margin-left: 0.5rem;
}
.uix-controls__merge button {
margin-left: auto;
margin-right: -5px;
}
.uix-controls__merge.is-pill input {
border-radius: 0 50px 50px 0;
}
.uix-controls__merge.is-pill button {
border-radius: 50px 0 0 50px;
}
.uix-controls__merge.is-iconic input {
padding-left: auto;
padding-right: 2.546875rem;
}
.uix-controls__merge.is-iconic i {
left: auto;
right: 1rem;
}
.uix-controls__merge.is-iconic i::after {
left: auto;
right: 1.2rem;
}
.uix-controls__merge.is-iconic.is-reversed input {
padding-left: auto;
padding-right: calc(3rem - 0.546875rem);
}
.uix-controls__merge.is-iconic.is-reversed i {
right: auto;
left: 1rem;
}
.uix-controls__merge.is-iconic.is-reversed i::after {
right: auto;
left: 1.2rem;
}
/*
---------------------------
4. Custom Select
---------------------------
*/
.uix-controls__select {
margin-right: auto;
margin-left: 0.3rem;
}
.uix-controls__select.js-uix-new {
text-align: right; /* Required */
}
.uix-controls__select-wrapper:not(.uix-controls--line).is-disabled {
/* Mask used to prohibit selection */
}
.uix-controls__select-wrapper:not(.uix-controls--line).is-disabled::before {
left: auto;
right: 0;
}
.uix-controls__select-wrapper .uix-controls__select-trigger {
padding: 0.546875rem 0.546875rem 0.546875rem 2.046875rem;
}
.uix-controls__select-wrapper .uix-controls__select-trigger::after {
border-left: 0;
right: auto;
left: 1rem;
}
.uix-controls__select-wrapper .uix-controls__select__option-container {
left: auto;
right: 0;
}
.uix-controls__select-wrapper .uix-controls__select__option-container::before {
left: auto;
right: 25px;
border-left: 1px solid transparent;
border-right: 1px solid #dce4e8;
}
.uix-controls__select-wrapper .uix-controls__select--top {
/* Shown from above */
}
.uix-controls__select-wrapper .uix-controls__select--top .uix-controls__select__option-container::after {
right: auto;
left: 25px;
border-left: 1px solid #dce4e8;
border-right: 1px solid transparent;
}
.uix-controls__select-wrapper .uix-controls__select__option:first-of-type {
border-radius: 0 0 2px 2px;
}
.uix-controls__select-wrapper .uix-controls__select__option:last-of-type {
border-radius: 2px 2px 0 0;
}
/*
---------------------------
5. Custom Radio, Toggle And Checkbox
---------------------------
*/
.uix-controls__radio {
text-align: right;
}
.uix-controls__radio label {
right: auto;
}
.uix-controls__radio .uix-controls__radio-trigger {
margin-right: auto;
margin-left: 5px;
}
.uix-controls__radio .uix-controls__radio-trigger::before {
left: auto;
margin-left: auto;
right: 50%;
margin-right: -3px;
}
.uix-controls__toggle label {
text-align: right; /* Required */
}
.uix-controls__toggle input[type=checkbox] {
display: none;
}
.uix-controls__toggle input[type=checkbox]:checked + .uix-controls__toggle-trigger {
margin-left: auto;
margin-right: 8px;
}
.uix-controls__toggle .uix-controls__toggle-trigger {
margin: 0.5rem 0 0.5rem 0.5rem;
}
.uix-controls__toggle .uix-controls__toggle-trigger::before {
left: auto;
right: -50px;
}
.uix-controls__toggle .uix-controls__toggle-trigger::after {
right: auto;
left: -50px;
}
.uix-controls__checkbox label {
text-align: right; /* Required */
}
.uix-controls__checkbox .uix-controls__checkbox-trigger {
margin: 0.546875rem 0 0.546875rem 0.5rem;
}
.uix-controls__checkbox .uix-controls__checkbox-trigger::before, .uix-controls__checkbox .uix-controls__checkbox-trigger::after {
left: auto;
right: 4px;
}
/*
---------------------------
6. Custom Input Number
---------------------------
*/
.uix-controls__number .uix-controls__number__btn {
border-left: none;
border-right: 1px solid #dce4e8;
right: auto;
left: 1px;
}
/*
---------------------------
7. Multiple Selector
---------------------------
*/
.uix-controls__multi-sel {
float: right;
}
.uix-controls__multi-sel > span {
margin-right: auto;
margin-left: 1rem;
}
.uix-controls__multi-sel > span i {
right: auto;
left: -8px;
}
/*
---------------------------
8. Single Selector
---------------------------
*/
.uix-controls__single-sel {
float: right;
}
.uix-controls__single-sel > span {
margin-right: auto;
margin-left: 1rem;
}
/*
---------------------------
9. Search of Widget
---------------------------
*/
.uix-search-box .uix-search-box__submit {
right: auto;
left: 0.875rem;
}
/* ======================================================
<!-- Form ( Layout )- -->
/* ====================================================== */
:root {
/* COLOR PALETTE */
--uix-placeholder-text-color: #E6E6E8;
--uix-highlight-color1: #CE3A3E;
--uix-highlight-color2: #DE510E;
--uix-primary-text-color: #212121;
--uix-primary-link-color: #474747;
--uix-primary-link-hover-color: #212121;
--uix-heading-text-color: #212121;
--uix-sub-text-color: #AEAEAE;
--uix-dividing-line-color: #DCDCDC;
--uix-btn-gradient-color1: #CE3A3E;
--uix-btn-gradient-color2: #C04645;
--uix-btn-gradient-color3: #DE510E;
--uix-primary-bg-color: transparent;
}
.uix-controls-layout .uix-controls-layout__content .uix-controls-layout__content__inner > div:first-child {
margin-right: auto;
margin-left: 1.5rem;
}
.uix-controls-layout .uix-controls-layout__icon {
margin-left: auto;
margin-right: 1rem;
}
@media all and (max-width: 768px) {
.uix-controls-layout .uix-controls-layout__content .uix-controls-layout__content__inner > div:first-child {
margin-left: 0;
}
}
/* ======================================================
<!-- Form ( Material Design Theme )-->
/* ====================================================== */
:root {
/* COLOR PALETTE */
--uix-placeholder-text-color: #E6E6E8;
--uix-highlight-color1: #CE3A3E;
--uix-highlight-color2: #DE510E;
--uix-primary-text-color: #212121;
--uix-primary-link-color: #474747;
--uix-primary-link-hover-color: #212121;
--uix-heading-text-color: #212121;
--uix-sub-text-color: #AEAEAE;
--uix-dividing-line-color: #DCDCDC;
--uix-btn-gradient-color1: #CE3A3E;
--uix-btn-gradient-color2: #C04645;
--uix-btn-gradient-color3: #DE510E;
--uix-primary-bg-color: transparent;
}
/*
* 1. Controls
* 4. Custom Select
*/
/*
---------------------------
1. Controls
---------------------------
*/
/* Default Controls */
.uix-controls:not(.uix-controls__toggle):not(.uix-controls__checkbox):not(.uix-controls__radio):not(.uix-controls__select) .uix-controls__basic-bar,
.uix-controls:not(.uix-controls__toggle):not(.uix-controls__checkbox):not(.uix-controls__radio):not(.uix-controls__select) .uix-controls__bar {
left: auto;
right: 0;
}
/* Create Line Effect on Click */
.uix-controls.uix-controls--line {
/*-- Form With Icon --*/
/*-- Select --*/
}
.uix-controls.uix-controls--line label {
left: auto !important;
right: -0.25rem !important;
}
.uix-controls.uix-controls--line label.is-active {
transform-origin: right top;
transform: translateX(1.75rem) scale(0.875);
}
.uix-controls.uix-controls--line.is-iconic label {
left: auto !important;
right: 2.546875rem !important;
}
.uix-controls.uix-controls--line.is-iconic label.is-active {
transform: translateX(4.09375rem) scale(0.875);
}
.uix-controls.uix-controls--line.is-iconic.is-reversed input:not([type=checkbox]):not([type=radio]) {
padding-right: 0 !important;
}
.uix-controls.uix-controls--line.is-iconic.is-reversed textarea,
.uix-controls.uix-controls--line.is-iconic.is-reversed button:not(.uix-btn),
.uix-controls.uix-controls--line.is-iconic.is-reversed select {
padding-right: 0 !important;
}
.uix-controls.uix-controls--line.is-iconic.is-reversed label {
left: auto !important;
right: -0.25rem !important;
}
.uix-controls.uix-controls--line.is-iconic.is-reversed label.is-active {
transform: translateX(1.75rem) scale(0.875);
}
.uix-controls.uix-controls--line.uix-controls__normal-select select {
padding-right: 0 !important;
padding-left: 1.546875rem !important;
}
/*
---------------------------
4. Custom Select
---------------------------
*/
.uix-controls__select-wrapper.uix-controls--line.is-disabled {
/* Mask used to prohibit selection */
}
.uix-controls__select-wrapper.uix-controls--line.is-disabled::before {
left: auto;
right: 0;
}
.uix-controls__select-wrapper .uix-controls--line .uix-controls__select-trigger {
padding-right: 0;
}
/* ======================================================
<!-- Form -->
/* ====================================================== */
:root {
/* COLOR PALETTE */
--uix-placeholder-text-color: #E6E6E8;
--uix-highlight-color1: #CE3A3E;
--uix-highlight-color2: #DE510E;
--uix-primary-text-color: #212121;
--uix-primary-link-color: #474747;
--uix-primary-link-hover-color: #212121;
--uix-heading-text-color: #212121;
--uix-sub-text-color: #AEAEAE;
--uix-dividing-line-color: #DCDCDC;
--uix-btn-gradient-color1: #CE3A3E;
--uix-btn-gradient-color2: #C04645;
--uix-btn-gradient-color3: #DE510E;
--uix-primary-bg-color: transparent;
}
/*
* 1. Date Picker ( 3rd Party Plugin )
*/
/*
---------------------------
1. Date Picker ( 3rd Party Plugin )
---------------------------
*/
.uix-controls__date::after {
right: auto;
left: 1rem;
}
/* ======================================================
<!-- Cutom Light Box -->
/* ====================================================== */
:root {
/* COLOR PALETTE */
--uix-placeholder-text-color: #E6E6E8;
--uix-highlight-color1: #CE3A3E;
--uix-highlight-color2: #DE510E;
--uix-primary-text-color: #212121;
--uix-primary-link-color: #474747;
--uix-primary-link-hover-color: #212121;
--uix-heading-text-color: #212121;
--uix-sub-text-color: #AEAEAE;
--uix-dividing-line-color: #DCDCDC;
--uix-btn-gradient-color1: #CE3A3E;
--uix-btn-gradient-color2: #C04645;
--uix-btn-gradient-color3: #DE510E;
--uix-primary-bg-color: transparent;
}
.uix-lightbox__close {
right: auto;
left: 15px;
}
/* ======================================================
<!-- Brands List -->
/* ====================================================== */
:root {
/* COLOR PALETTE */
--uix-placeholder-text-color: #E6E6E8;
--uix-highlight-color1: #CE3A3E;
--uix-highlight-color2: #DE510E;
--uix-primary-text-color: #212121;
--uix-primary-link-color: #474747;
--uix-primary-link-hover-color: #212121;
--uix-heading-text-color: #212121;
--uix-sub-text-color: #AEAEAE;
--uix-dividing-line-color: #DCDCDC;
--uix-btn-gradient-color1: #CE3A3E;
--uix-btn-gradient-color2: #C04645;
--uix-btn-gradient-color3: #DE510E;
--uix-primary-bg-color: transparent;
}
.uix-list-brands li {
float: right;
}
/* ======================================================
<!-- Bulleted List -->
/* ====================================================== */
:root {
/* COLOR PALETTE */
--uix-placeholder-text-color: #E6E6E8;
--uix-highlight-color1: #CE3A3E;
--uix-highlight-color2: #DE510E;
--uix-primary-text-color: #212121;
--uix-primary-link-color: #474747;
--uix-primary-link-hover-color: #212121;
--uix-heading-text-color: #212121;
--uix-sub-text-color: #AEAEAE;
--uix-dividing-line-color: #DCDCDC;
--uix-btn-gradient-color1: #CE3A3E;
--uix-btn-gradient-color2: #C04645;
--uix-btn-gradient-color3: #DE510E;
--uix-primary-bg-color: transparent;
}
.uix-list-bullet i {
margin-right: auto;
margin-left: 0.5rem;
}
/* ======================================================
<!-- Maintain Aspect Ratio List -->
/* ====================================================== */
:root {
/* COLOR PALETTE */
--uix-placeholder-text-color: #E6E6E8;
--uix-highlight-color1: #CE3A3E;
--uix-highlight-color2: #DE510E;
--uix-primary-text-color: #212121;
--uix-primary-link-color: #474747;
--uix-primary-link-hover-color: #212121;
--uix-heading-text-color: #212121;
--uix-sub-text-color: #AEAEAE;
--uix-dividing-line-color: #DCDCDC;
--uix-btn-gradient-color1: #CE3A3E;
--uix-btn-gradient-color2: #C04645;
--uix-btn-gradient-color3: #DE510E;
--uix-primary-bg-color: transparent;
}
@media all and (max-width: 768px) {
.uix-list-aspect-ratio {
padding-right: auto;
padding-left: 15px;
}
.uix-list-aspect-ratio .uix-core-grid__col-4 {
float: right;
}
}
/* ======================================================
<!-- Side by Side List -->
/* ====================================================== */
:root {
/* COLOR PALETTE */
--uix-placeholder-text-color: #E6E6E8;
--uix-highlight-color1: #CE3A3E;
--uix-highlight-color2: #DE510E;
--uix-primary-text-color: #212121;
--uix-primary-link-color: #474747;
--uix-primary-link-hover-color: #212121;
--uix-heading-text-color: #212121;
--uix-sub-text-color: #AEAEAE;
--uix-dividing-line-color: #DCDCDC;
--uix-btn-gradient-color1: #CE3A3E;
--uix-btn-gradient-color2: #C04645;
--uix-btn-gradient-color3: #DE510E;
--uix-primary-bg-color: transparent;
}
dl.uix-list-abreast dt {
float: right;
clear: right;
text-align: left;
}
dl.uix-list-abreast dd {
float: right;
text-align: right;
padding-left: auto;
padding-right: 1rem;
}
/* ======================================================
<!-- Login Templates -->
/* ====================================================== */
:root {
/* COLOR PALETTE */
--uix-placeholder-text-color: #E6E6E8;
--uix-highlight-color1: #CE3A3E;
--uix-highlight-color2: #DE510E;
--uix-primary-text-color: #212121;
--uix-primary-link-color: #474747;
--uix-primary-link-hover-color: #212121;
--uix-heading-text-color: #212121;
--uix-sub-text-color: #AEAEAE;
--uix-dividing-line-color: #DCDCDC;
--uix-btn-gradient-color1: #CE3A3E;
--uix-btn-gradient-color2: #C04645;
--uix-btn-gradient-color3: #DE510E;
--uix-primary-bg-color: transparent;
}
/* ======================================================
<!-- Modal Dialog -->
/* ====================================================== */
:root {
/* COLOR PALETTE */
--uix-placeholder-text-color: #E6E6E8;
--uix-highlight-color1: #CE3A3E;
--uix-highlight-color2: #DE510E;
--uix-primary-text-color: #212121;
--uix-primary-link-color: #474747;
--uix-primary-link-hover-color: #212121;
--uix-heading-text-color: #212121;
--uix-sub-text-color: #AEAEAE;
--uix-dividing-line-color: #DCDCDC;
--uix-btn-gradient-color1: #CE3A3E;
--uix-btn-gradient-color2: #C04645;
--uix-btn-gradient-color3: #DE510E;
--uix-primary-bg-color: transparent;
}
.uix-modal-box {
left: auto;
right: 50%;
/* Video container */
}
.uix-modal-box .uix-modal-box__video-waiting {
left: auto;
right: 50%;
margin-left: auto;
margin-right: -1rem;
}
.uix-modal-box .uix-modal-box__close {
right: auto;
left: 12px;
}
.uix-modal-box.is-fullscreen {
left: auto;
right: 0;
}
.uix-modal-box.is-fullscreen .uix-modal-box__close {
right: auto;
left: 26px;
}
.uix-modal-mask {
left: auto;
right: 0;
}
/* ======================================================
<!-- Ribbon -->
/* ====================================================== */
:root {
/* COLOR PALETTE */
--uix-placeholder-text-color: #E6E6E8;
--uix-highlight-color1: #CE3A3E;
--uix-highlight-color2: #DE510E;
--uix-primary-text-color: #212121;
--uix-primary-link-color: #474747;
--uix-primary-link-hover-color: #212121;
--uix-heading-text-color: #212121;
--uix-sub-text-color: #AEAEAE;
--uix-dividing-line-color: #DCDCDC;
--uix-btn-gradient-color1: #CE3A3E;
--uix-btn-gradient-color2: #C04645;
--uix-btn-gradient-color3: #DE510E;
--uix-primary-bg-color: transparent;
}
.uix-ribbon--triangle {
right: auto;
left: 0;
}
.uix-ribbon--triangle.uix-ribbon--triangle--style-1 > div::after {
left: auto;
right: 0;
}
.uix-ribbon--triangle.uix-ribbon--triangle--style-2::after {
border-left: inherit;
border-right: 40px solid var(--uix-highlight-color1);
left: auto;
right: 0.25rem;
transform: rotate(-315deg);
}
.uix-ribbon--triangle.uix-ribbon--triangle--style-2 > div {
padding: 0 0.5rem 0.25rem 0;
}
.uix-ribbon--triangle.uix-ribbon--triangle--left {
right: 0;
left: auto;
}
.uix-ribbon--triangle.uix-ribbon--triangle--left.uix-ribbon--triangle--style-2::after {
transform: rotate(135deg);
left: auto;
right: -0.25rem;
}
/* ======================================================
<!-- Comments -->
/* ====================================================== */
:root {
/* COLOR PALETTE */
--uix-placeholder-text-color: #E6E6E8;
--uix-highlight-color1: #CE3A3E;
--uix-highlight-color2: #DE510E;
--uix-primary-text-color: #212121;
--uix-primary-link-color: #474747;
--uix-primary-link-hover-color: #212121;
--uix-heading-text-color: #212121;
--uix-sub-text-color: #AEAEAE;
--uix-dividing-line-color: #DCDCDC;
--uix-btn-gradient-color1: #CE3A3E;
--uix-btn-gradient-color2: #C04645;
--uix-btn-gradient-color3: #DE510E;
--uix-primary-bg-color: transparent;
}
.comment-avatar {
float: right;
margin: 0 0 0 1.3125rem;
}
.comment .comment {
margin-left: auto;
margin-right: 2.625rem;
}
.comment-meta .comment-avatar {
margin: 0 0 0 1.3125rem;
float: right;
}
.comment-meta .comment-text {
float: right;
}
.comment-content {
margin-left: auto;
margin-right: 4.125rem;
}
.comment-content a.respond {
right: auto;
left: 0;
}
/* ======================================================
<!-- Striking -->
/* ====================================================== */
:root {
/* COLOR PALETTE */
--uix-placeholder-text-color: #E6E6E8;
--uix-highlight-color1: #CE3A3E;
--uix-highlight-color2: #DE510E;
--uix-primary-text-color: #212121;
--uix-primary-link-color: #474747;
--uix-primary-link-hover-color: #212121;
--uix-heading-text-color: #212121;
--uix-sub-text-color: #AEAEAE;
--uix-dividing-line-color: #DCDCDC;
--uix-btn-gradient-color1: #CE3A3E;
--uix-btn-gradient-color2: #C04645;
--uix-btn-gradient-color3: #DE510E;
--uix-primary-bg-color: transparent;
}
.uix-striking-msg i:first-child {
margin-right: auto;
margin-left: 0.5rem;
}
.uix-striking-msg i:first-child ~ span {
padding-left: auto;
padding-right: 0.2rem;
}
.uix-striking-msg.uix-striking-msg--hasarrow::before, .uix-striking-msg.uix-striking-msg--hasarrow::after {
right: auto;
left: 100%;
border-right-color: transparent;
border-left-color: rgb(252, 232, 220);
}
.uix-striking-msg.uix-striking-msg--hasarrow::after {
border-left-color: rgba(0, 0, 0, 0.02);
}
.uix-striking-msg.uix-striking-msg--hasarrow--reversed::before, .uix-striking-msg.uix-striking-msg--hasarrow--reversed::after {
right: 100%;
left: auto;
}
.uix-striking-msg.uix-striking-msg--default.uix-striking-msg--hasarrow::before {
border-left-color: rgb(252, 232, 220);
}
.uix-striking-msg.uix-striking-msg--success.uix-striking-msg--hasarrow::before {
border-left-color: rgb(128, 207, 75);
}
.uix-striking-msg.uix-striking-msg--alert.uix-striking-msg--hasarrow::