Update
This commit is contained in:
72
media/templates/site/moko-cassiopeia/css/editor.css
Normal file
72
media/templates/site/moko-cassiopeia/css/editor.css
Normal file
@@ -0,0 +1,72 @@
|
||||
/* STYLES FOR JOOMLA! EDITOR */
|
||||
body {
|
||||
margin: 1rem;
|
||||
font-size: 1rem;
|
||||
font-weight: 400;
|
||||
line-height: 1.5;
|
||||
color: #22262a;
|
||||
background-color: #fff;
|
||||
}
|
||||
|
||||
h1, h2, h3, h4, h5, h6 {
|
||||
margin-top: 0;
|
||||
margin-bottom: 0.5rem;
|
||||
font-weight: 700;
|
||||
line-height: 1.2;
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: calc(1.375rem + 1.5vw);
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-size: calc(1.325rem + 0.9vw);
|
||||
}
|
||||
|
||||
h3 {
|
||||
font-size: calc(1.3rem + 0.6vw);
|
||||
}
|
||||
|
||||
h4 {
|
||||
font-size: calc(1.275rem + 0.3vw);
|
||||
}
|
||||
|
||||
h5 {
|
||||
font-size: 1.25rem;
|
||||
}
|
||||
|
||||
h6 {
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
a {
|
||||
text-decoration: none;
|
||||
}
|
||||
a:link {
|
||||
color: #224faa;
|
||||
}
|
||||
a:hover {
|
||||
color: #424077;
|
||||
}
|
||||
|
||||
p {
|
||||
margin-top: 0;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
/* STYLES FOR JOOMLA! EDITOR */
|
||||
hr#system-readmore {
|
||||
color: #f00;
|
||||
border: #f00 dashed 1px;
|
||||
}
|
||||
|
||||
span[lang] {
|
||||
padding: 2px;
|
||||
border: 1px dashed #bbb;
|
||||
}
|
||||
span[lang]:after {
|
||||
font-size: smaller;
|
||||
color: #f00;
|
||||
vertical-align: super;
|
||||
content: attr(lang);
|
||||
}
|
||||
541
media/templates/site/moko-cassiopeia/css/gable.css
Normal file
541
media/templates/site/moko-cassiopeia/css/gable.css
Normal file
@@ -0,0 +1,541 @@
|
||||
:root {
|
||||
--gab-blue: transparent;
|
||||
--gab-green: #7ac143;
|
||||
--gab-red: #3f8ff0;
|
||||
--gab-orange: #F9A541;
|
||||
--gab-gray1: #DDDDDD;
|
||||
--gab-gray2: #AAAAAA;
|
||||
--gab-gray3: #777777;
|
||||
}
|
||||
|
||||
code {
|
||||
background-color: var(--gab-gray1);
|
||||
}
|
||||
|
||||
#view_gabble {
|
||||
background-color: var(--gab-blue);
|
||||
padding: 6px;
|
||||
border-radius: 6px;
|
||||
}
|
||||
|
||||
#mod_gabble {
|
||||
background-color: var(--gab-blue);
|
||||
padding: 3px;
|
||||
border-radius: 6px;
|
||||
}
|
||||
|
||||
#lists_gabble {
|
||||
position: relative;
|
||||
height: 100%;
|
||||
border: 4px solid var(--gab-red);
|
||||
background-color: var(--gab-green);
|
||||
padding: 4px;
|
||||
border-radius: 6px;
|
||||
}
|
||||
|
||||
#select_list {
|
||||
margin-left: 0px;
|
||||
width: 100%;
|
||||
padding: 4px;
|
||||
border-radius: 6px 6px 0px 0px;
|
||||
}
|
||||
|
||||
#options_list {
|
||||
width: 100%;
|
||||
padding: 4px;
|
||||
}
|
||||
|
||||
#frame_list {
|
||||
width: 100%;
|
||||
height: 484px;
|
||||
padding: 4px;
|
||||
border-radius: 0px 0px 6px 6px;
|
||||
}
|
||||
|
||||
#windows_list {
|
||||
margin-left: 0px;
|
||||
width: 100%;
|
||||
border: 4px solid var(--gab-red);
|
||||
background-color: var(--gab-green);
|
||||
padding: 4px;
|
||||
border-radius: 6px;
|
||||
}
|
||||
|
||||
#frame_window {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
#openai_btn {
|
||||
position: absolute;
|
||||
right: 10px;
|
||||
bottom: 10px;
|
||||
visibility: hidden;
|
||||
width: 34px;
|
||||
height: 34px;
|
||||
cursor: pointer;
|
||||
border: 3px solid var(--gab-gray3);
|
||||
background-color: #FFF;
|
||||
border-radius: 17px;
|
||||
}
|
||||
|
||||
#openai_btn:hover {
|
||||
width: 36px;
|
||||
height: 36px;
|
||||
border: 3px solid var(--gab-gray3);
|
||||
border-radius: 18px;
|
||||
}
|
||||
|
||||
#openai_logo_anim {
|
||||
position: absolute;
|
||||
top: 15px;
|
||||
right: 15px;
|
||||
width: 35px;
|
||||
height: 35px;
|
||||
padding: 2px;
|
||||
z-index: 1;
|
||||
border-radius: 10px;
|
||||
}
|
||||
|
||||
.openai_logo_sm {
|
||||
width: 22px;
|
||||
height: 22px;
|
||||
background-color: #FFF;
|
||||
border: 3px solid #FFF;
|
||||
border-radius: 11px;
|
||||
}
|
||||
|
||||
.openai_logo_md {
|
||||
width: 34px;
|
||||
height: 34px;
|
||||
background-color: #FFF;
|
||||
border: 4px solid #FFF;
|
||||
border-radius: 17px;
|
||||
}
|
||||
|
||||
.btn_on_com {
|
||||
position: absolute;
|
||||
bottom: -2px;
|
||||
left: -2px;
|
||||
width: 12px;
|
||||
height: 12px;
|
||||
background-color: #448344;
|
||||
border-radius: 6px;
|
||||
}
|
||||
|
||||
.btn_on_mod {
|
||||
position: absolute;
|
||||
top: 0px;
|
||||
left: 0px;
|
||||
width: 12px;
|
||||
height: 12px;
|
||||
background-color: #448344;
|
||||
border-radius: 6px;
|
||||
}
|
||||
|
||||
.button_list {
|
||||
border: none;
|
||||
width:100%;
|
||||
outline: none;
|
||||
background-color: var(--gab-gray1);
|
||||
padding: 6px;
|
||||
border-radius: 6px;
|
||||
}
|
||||
|
||||
.button_list:hover {
|
||||
background-color: var(--gab-gray2);
|
||||
}
|
||||
|
||||
.button_list_s {
|
||||
border: none;
|
||||
width: 100%;
|
||||
outline: none;
|
||||
cursor: pointer;
|
||||
color: #FFF;
|
||||
background-color: var(--gab-red);
|
||||
padding: 6px;
|
||||
border-radius: 6px;
|
||||
}
|
||||
|
||||
.window_list {
|
||||
position: relative;
|
||||
margin: 4px;
|
||||
width: 100%;
|
||||
border: none;
|
||||
outline: none;
|
||||
cursor: pointer;
|
||||
text-align: left;
|
||||
background-color: var(--gab-gray1);
|
||||
padding: 6px;
|
||||
border-radius: 6px;
|
||||
}
|
||||
|
||||
.window_list:hover {
|
||||
background-color: var(--gab-gray2);
|
||||
}
|
||||
|
||||
.window_list_s {
|
||||
position: relative;
|
||||
margin: 4px;
|
||||
width: 100%;
|
||||
border: none;
|
||||
outline: none;
|
||||
cursor: pointer;
|
||||
text-align: left;
|
||||
color: #FFF;
|
||||
background-color: var(--gab-red);
|
||||
padding: 6px;
|
||||
border-radius: 6px;
|
||||
}
|
||||
|
||||
.btn_close {
|
||||
position: absolute;
|
||||
right: 4px;
|
||||
top: 10px;
|
||||
padding-left: 1px;
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
color: #000;
|
||||
font-size: 10px;
|
||||
text-align: center;
|
||||
background-color: var(--gab-gray2);
|
||||
border-radius: 8px;
|
||||
}
|
||||
|
||||
.btn_close:hover {
|
||||
background-color: var(--gab-gray3);
|
||||
}
|
||||
|
||||
.iframe_list {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-color: #FFF;
|
||||
border: 4px solid var(--gab-red);
|
||||
border-radius: 6px;
|
||||
}
|
||||
|
||||
.iframe_messages {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-color: #FFF;
|
||||
border: 4px solid var(--gab-red);
|
||||
border-radius: 6px;
|
||||
}
|
||||
|
||||
.input_box {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.input_emoji {
|
||||
position: absolute;
|
||||
right: 48px;
|
||||
top: 11px;
|
||||
cursor: pointer;
|
||||
color: var(--gab-gray2);
|
||||
}
|
||||
|
||||
.input_emoji:hover {
|
||||
color: var(--gab-gray3);
|
||||
}
|
||||
|
||||
.emoji {
|
||||
display: inline-block;
|
||||
float: left;
|
||||
cursor: pointer;
|
||||
padding: 2px;
|
||||
background-color: #FFF;
|
||||
}
|
||||
|
||||
.emoji:hover {
|
||||
background-color: var(--gab-orange);
|
||||
}
|
||||
|
||||
.emojis_div {
|
||||
position: absolute;
|
||||
top: -92px;
|
||||
right: 0px;
|
||||
width: 200px;
|
||||
height: 92px;
|
||||
border: 4px solid var(--gab-red);
|
||||
background-color: var(--gab-gray1);
|
||||
border-radius: 6px;
|
||||
}
|
||||
|
||||
.msg-button-on {
|
||||
margin-left: 5px;
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
font-size: 20px;
|
||||
text-align: center;
|
||||
color: #FFF;
|
||||
background-color: var(--gab-orange);
|
||||
border-radius: 15px;
|
||||
}
|
||||
|
||||
.msg-button-off {
|
||||
margin-left: 5px;
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
font-size: 20px;
|
||||
text-align: center;
|
||||
color: #FFF;
|
||||
background-color: var(--gab-gray2);
|
||||
border-radius: 15px;
|
||||
}
|
||||
|
||||
.taba-content {
|
||||
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
|
||||
}
|
||||
|
||||
.msg-input {
|
||||
padding-left: 10px;
|
||||
padding-right: 26px;
|
||||
width: calc(100% - 35px);
|
||||
height: 30px;
|
||||
border-radius: 15px;
|
||||
}
|
||||
|
||||
.main-windows {
|
||||
position: fixed;
|
||||
margin-bottom: 10px;
|
||||
bottom: 0px;
|
||||
right: 90px;
|
||||
z-index: 901;
|
||||
}
|
||||
|
||||
.list-windows {
|
||||
position: fixed;
|
||||
bottom: 0px;
|
||||
right: 0px;
|
||||
width: 50px;
|
||||
margin-bottom: 20px;
|
||||
margin-right: 20px;
|
||||
z-index: 901;
|
||||
}
|
||||
|
||||
.item-list {
|
||||
display: inline-block;
|
||||
color: #F5F5F5;
|
||||
margin-top: 5px;
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
font-size: 30px;
|
||||
text-align: center;
|
||||
border: 3px solid var(--gab-red);
|
||||
background-color: var(--gab-blue);
|
||||
border-radius: 25px;
|
||||
}
|
||||
|
||||
.button {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.button:hover {
|
||||
cursor: pointer;
|
||||
opacity: .6;
|
||||
}
|
||||
|
||||
.notifications {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.n-notifications {
|
||||
position: absolute;
|
||||
bottom: -6px;
|
||||
right: -2px;
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
color: #FFF;
|
||||
font-size: 11px;
|
||||
font-weight: bold;
|
||||
text-align: center;
|
||||
background-color: #a51f18;
|
||||
border-radius: 9px;
|
||||
}
|
||||
|
||||
.m-notifications {
|
||||
position: absolute;
|
||||
top: -6px;
|
||||
right: -2px;
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
color: #FFF;
|
||||
font-size: 11px;
|
||||
font-weight: bold;
|
||||
text-align: center;
|
||||
background-color: #a51f18;
|
||||
border-radius: 9px;
|
||||
}
|
||||
|
||||
.window {
|
||||
display: inline-block;
|
||||
margin-left: 8px;
|
||||
width: 280px;
|
||||
height: 420px;
|
||||
}
|
||||
|
||||
.window-com {
|
||||
margin-top: 6px;
|
||||
width: 100%;
|
||||
height: 480px;
|
||||
}
|
||||
|
||||
.window-title {
|
||||
margin-left: 5px;
|
||||
display: inline-block;
|
||||
color: #FFF;
|
||||
}
|
||||
|
||||
.window-title-com {
|
||||
margin-left: 5px;
|
||||
display: inline-block;
|
||||
color: #000;
|
||||
}
|
||||
|
||||
.window-icon {
|
||||
display: inline-block;
|
||||
color: #FFF;
|
||||
}
|
||||
|
||||
.window-header {
|
||||
padding: 6px;
|
||||
width: 100%;
|
||||
height: 40px;
|
||||
background-color: var(--gab-blue);
|
||||
border-radius: 8px 8px 0px 0px;
|
||||
}
|
||||
|
||||
.window-header-com {
|
||||
padding: 4px;
|
||||
width: 100%;
|
||||
height: 35px;
|
||||
background-color: var(--gab-red);
|
||||
border-radius: 8px 8px 0px 0px;
|
||||
}
|
||||
|
||||
.window-content {
|
||||
position: relative;
|
||||
display: block;
|
||||
width: 100%;
|
||||
height: calc(100% - 80px);
|
||||
background-color: #DDD;
|
||||
}
|
||||
|
||||
.content-footer {
|
||||
position: relative;
|
||||
padding: 5px;
|
||||
width: 100%;
|
||||
height: 40px;
|
||||
background-color: #DDD;
|
||||
border-radius: 0px 0px 8px 8px;
|
||||
}
|
||||
|
||||
.taba-btn {
|
||||
text-align: center;
|
||||
display: inline-block;
|
||||
margin-left: 5px;
|
||||
float: right;
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
background-color: #DDD;
|
||||
border-radius: 12px;
|
||||
}
|
||||
|
||||
.taba-hover {
|
||||
cursor: pointer;
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.taba-hover:hover {
|
||||
opacity: 0.6;
|
||||
}
|
||||
|
||||
.taba-self {
|
||||
border: 1px solid #FFF;
|
||||
background-color: #7ac143;
|
||||
padding: 6px;
|
||||
padding-top: 9px;
|
||||
border-radius: 10px;
|
||||
}
|
||||
|
||||
.taba-others {
|
||||
border: 1px solid #FFF;
|
||||
background-color: #5091cd;
|
||||
padding: 6px;
|
||||
padding-top: 9px;
|
||||
border-radius: 10px;
|
||||
}
|
||||
|
||||
|
||||
|
||||
.taba-bot {
|
||||
border: 1px solid #FFF;
|
||||
background-color: var(--gab-gray3);
|
||||
padding: 6px;
|
||||
padding-top: 9px;
|
||||
border-radius: 10px;
|
||||
}
|
||||
|
||||
.taba-dice {
|
||||
border: 1px solid #FFF;
|
||||
background-color: #f44321;
|
||||
padding: 6px;
|
||||
border-radius: 10px;
|
||||
}
|
||||
|
||||
.taba-emoji {
|
||||
border: 1px solid #FFF;
|
||||
background-color: #5091cd;
|
||||
padding: 6px;
|
||||
border-radius: 10px;
|
||||
}
|
||||
|
||||
.taba-user {
|
||||
border: 1px solid #FFF;
|
||||
background-color: #FFF;
|
||||
padding: 6px;
|
||||
border-radius: 6px;
|
||||
word-wrap: break-word;
|
||||
}
|
||||
|
||||
.taba-user-on {
|
||||
border: 1px solid #FFF;
|
||||
background-color: var(--gab-green);
|
||||
padding: 6px;
|
||||
border-radius: 8px;
|
||||
}
|
||||
|
||||
.taba-feed {
|
||||
border: 1px solid #FFF;
|
||||
background-color: var(--gab-blue);
|
||||
padding: 6px;
|
||||
border-radius: 8px;
|
||||
}
|
||||
|
||||
.openai_error {
|
||||
border: 1px solid #FFF;
|
||||
background-color: var(--gab-red);
|
||||
padding: 6px;
|
||||
border-radius: 8px;
|
||||
}
|
||||
|
||||
.taba-msgsystem {
|
||||
border: 1px solid #FFF;
|
||||
background-color: #AAA;
|
||||
padding: 6px;
|
||||
border-radius: 10px;
|
||||
}
|
||||
|
||||
.taba-msghead {
|
||||
background-color: #f5f5f5;
|
||||
padding: 4px;
|
||||
padding-left: 10px;
|
||||
padding-right: 6px;
|
||||
border-radius: 6px 6px 0px 0px;
|
||||
}
|
||||
|
||||
.taba-msg {
|
||||
background-color: #f5f5f5;
|
||||
padding: 8px;
|
||||
border-radius: 0px 8px 8px 8px;
|
||||
word-wrap: break-word;
|
||||
}
|
||||
@@ -0,0 +1,5 @@
|
||||
:root {
|
||||
--moko-cassiopeia-color-primary: hsl(351, 54%, 37%);
|
||||
--moko-cassiopeia-color-link: hsl(207, 49%, 37%);
|
||||
--moko-cassiopeia-color-hover: hsl(351, 33%, 44%);
|
||||
}
|
||||
@@ -0,0 +1,392 @@
|
||||
:root {
|
||||
--moko-cassiopeia-color-primary: #30638d;
|
||||
--moko-cassiopeia-color-link: #15496e;
|
||||
--moko-cassiopeia-color-hover: #448344;
|
||||
--moko-cassiopeia-header-background-image: url('../../../../../../media/templates/site/moko-cassiopeia/images/meaewellness/background.png');
|
||||
--moko-cassiopeia-header-background-position: center center;
|
||||
--moko-cassiopeia-header-background-attachment: fixed;
|
||||
--moko-cassiopeia-header-background-repeat: no-repeat;
|
||||
--moko-cassiopeia-header-background-size: cover;
|
||||
--nav-text-color: black;
|
||||
--nav-bg-color: #79ec3d6b;
|
||||
--accent-color-primary: #3f8ff0;
|
||||
--accent-color-secondary: #3f8ff0;
|
||||
--border: 5px;
|
||||
--mainmenu-nav-link-color: black;
|
||||
|
||||
|
||||
--blue: hsl(240, 98%, 17%);
|
||||
--indigo: hsl(263, 90%, 51%);
|
||||
--purple: hsl(261, 51%, 51%);
|
||||
--pink: hsl(332, 79%, 58%);
|
||||
--red: hsl(3, 75%, 37%);
|
||||
--orange: hsl(27, 98%, 54%);
|
||||
--yellow: hsl(34, 100%, 34%);
|
||||
--green: hsl(120, 32%, 39%);
|
||||
--teal: hsl(194, 66%, 61%);
|
||||
--cyan: hsl(207, 49%, 37%);
|
||||
--white: hsl(0, 0%, 100%);
|
||||
--gray-100: hsl(210, 17%, 98%);
|
||||
--gray-200: hsl(210, 16%, 93%);
|
||||
--gray-300: hsl(210, 14%, 89%);
|
||||
--gray-400: hsl(210, 14%, 83%);
|
||||
--gray-500: hsl(210, 11%, 71%);
|
||||
--gray-600: hsl(210, 7%, 46%);
|
||||
--gray-700: hsl(210, 9%, 31%);
|
||||
--gray-800: hsl(210, 10%, 23%);
|
||||
--gray-900: hsl(210, 11%, 15%);
|
||||
--primary: hsl(240, 98%, 17%);
|
||||
--secondary: hsl(210, 7%, 46%);
|
||||
--success: hsl(120, 32%, 39%);
|
||||
--info: hsl(207, 49%, 37%);
|
||||
--warning: hsl(34, 100%, 34%);
|
||||
--danger: hsl(3, 75%, 37%);
|
||||
--light: hsl(210, 17%, 98%);
|
||||
--dark: hsl(210, 10%, 23%);
|
||||
--primary-rgb: 1, 1, 86;
|
||||
--secondary-rgb: 109, 117, 126;
|
||||
--success-rgb: 68, 131, 68;
|
||||
--info-rgb: 48, 99, 141;
|
||||
--warning-rgb: 173, 98, 0;
|
||||
--danger-rgb: 165, 31, 24;
|
||||
--light-rgb: 249, 250, 251;
|
||||
--dark-rgb: 53, 59, 65;
|
||||
--white-rgb: 255, 255, 255;
|
||||
--black-rgb: 0, 0, 0;
|
||||
--body-color-rgb: 34, 38, 42;
|
||||
--body-bg-rgb: 255, 255, 255;
|
||||
--font-sans-serif: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
|
||||
--font-monospace: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
|
||||
--gradient: linear-gradient(180deg, rgba(255, 255, 255, 0.15), rgba(255, 255, 255, 0));
|
||||
--body-font-family: var(--moko-cassiopeia-font-family-body, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji");
|
||||
--body-font-size: 1rem;
|
||||
--body-font-weight: 400;
|
||||
--body-line-height: 1.5;
|
||||
--body-color: hsl(210, 11%, 15%);
|
||||
--body-bg: hsl(0, 0%, 100%);
|
||||
--border-width: 1px;
|
||||
--border-style: solid;
|
||||
--border-color: hsl(210, 14%, 89%);
|
||||
--border-color-translucent: rgba(0, 0, 0, 0.175);
|
||||
--border-radius: 0.25rem;
|
||||
--border-radius-sm: 0.2rem;
|
||||
--border-radius-lg: 0.3rem;
|
||||
--border-radius-xl: 0.3rem;
|
||||
--border-radius-2xl: 0.3rem;
|
||||
--border-radius-pill: 50rem;
|
||||
--link-color: var(--moko-cassiopeia-color-link);
|
||||
--link-hover-color: var(--moko-cassiopeia-color-hover);
|
||||
--code-color: hsl(332, 79%, 58%);
|
||||
--highlight-bg: #fbeea8;
|
||||
}
|
||||
|
||||
.btn-primary {
|
||||
--btn-color: hsl(0, 0%, 100%);
|
||||
--btn-bg: hsl(240, 98%, 17%);
|
||||
--btn-border-color: hsl(240, 98%, 17%);
|
||||
--btn-hover-color: hsl(0, 0%, 100%);
|
||||
--btn-hover-bg: #010149;
|
||||
--btn-hover-border-color: #010145;
|
||||
--btn-focus-shadow-rgb: 39, 39, 111;
|
||||
--btn-active-color: hsl(0, 0%, 100%);
|
||||
--btn-active-bg: #010145;
|
||||
--btn-active-border-color: #010141;
|
||||
--btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
|
||||
--btn-disabled-color: hsl(0, 0%, 100%);
|
||||
--btn-disabled-bg: hsl(240, 98%, 17%);
|
||||
--btn-disabled-border-color: hsl(240, 98%, 17%);
|
||||
}
|
||||
|
||||
.btn-secondary {
|
||||
--btn-color: --nav-text-color;
|
||||
--btn-bg: --nav-bg-color;
|
||||
--btn-border-color: hsl(210, 7%, 46%);
|
||||
--btn-hover-color: hsl(0, 0%, 100%);
|
||||
--btn-hover-bg: #5d636b;
|
||||
--btn-hover-border-color: #575e65;
|
||||
--btn-focus-shadow-rgb: gray;
|
||||
--btn-active-color: hsl(0, 0%, 100%);
|
||||
--btn-active-bg: #575e65;
|
||||
--btn-active-border-color: #52585f;
|
||||
--btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
|
||||
--btn-disabled-color: hsl(0, 0%, 100%);
|
||||
--btn-disabled-bg: hsl(210, 7%, 46%);
|
||||
--btn-disabled-border-color: hsl(210, 7%, 46%);
|
||||
}
|
||||
|
||||
.btn-success {
|
||||
--btn-color: hsl(0, 0%, 100%);
|
||||
--btn-bg: hsl(120, 32%, 39%);
|
||||
--btn-border-color: hsl(120, 32%, 39%);
|
||||
--btn-hover-color: hsl(0, 0%, 100%);
|
||||
--btn-hover-bg: #3a6f3a;
|
||||
--btn-hover-border-color: #366936;
|
||||
--btn-focus-shadow-rgb: 96, 150, 96;
|
||||
--btn-active-color: hsl(0, 0%, 100%);
|
||||
--btn-active-bg: #366936;
|
||||
--btn-active-border-color: #336233;
|
||||
--btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
|
||||
--btn-disabled-color: hsl(0, 0%, 100%);
|
||||
--btn-disabled-bg: hsl(120, 32%, 39%);
|
||||
--btn-disabled-border-color: hsl(120, 32%, 39%);
|
||||
}
|
||||
|
||||
.btn-info {
|
||||
--btn-color: hsl(0, 0%, 100%);
|
||||
--btn-bg: hsl(207, 49%, 37%);
|
||||
--btn-border-color: hsl(207, 49%, 37%);
|
||||
--btn-hover-color: hsl(0, 0%, 100%);
|
||||
--btn-hover-bg: #295478;
|
||||
--btn-hover-border-color: #264f71;
|
||||
--btn-focus-shadow-rgb: 79, 122, 158;
|
||||
--btn-active-color: hsl(0, 0%, 100%);
|
||||
--btn-active-bg: #264f71;
|
||||
--btn-active-border-color: #244a6a;
|
||||
--btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
|
||||
--btn-disabled-color: hsl(0, 0%, 100%);
|
||||
--btn-disabled-bg: hsl(207, 49%, 37%);
|
||||
--btn-disabled-border-color: hsl(207, 49%, 37%);
|
||||
}
|
||||
|
||||
.btn-warning {
|
||||
--btn-color: hsl(0, 0%, 100%);
|
||||
--btn-bg: hsl(34, 100%, 34%);
|
||||
--btn-border-color: hsl(34, 100%, 34%);
|
||||
--btn-hover-color: hsl(0, 0%, 100%);
|
||||
--btn-hover-bg: #935300;
|
||||
--btn-hover-border-color: #8a4e00;
|
||||
--btn-focus-shadow-rgb: 185, 122, 38;
|
||||
--btn-active-color: hsl(0, 0%, 100%);
|
||||
--btn-active-bg: #8a4e00;
|
||||
--btn-active-border-color: #824a00;
|
||||
--btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
|
||||
--btn-disabled-color: hsl(0, 0%, 100%);
|
||||
--btn-disabled-bg: hsl(34, 100%, 34%);
|
||||
--btn-disabled-border-color: hsl(34, 100%, 34%);
|
||||
}
|
||||
|
||||
.btn-danger {
|
||||
--btn-color: hsl(0, 0%, 100%);
|
||||
--btn-bg: hsl(3, 75%, 37%);
|
||||
--btn-border-color: hsl(3, 75%, 37%);
|
||||
--btn-hover-color: hsl(0, 0%, 100%);
|
||||
--btn-hover-bg: #8c1a14;
|
||||
--btn-hover-border-color: #841913;
|
||||
--btn-focus-shadow-rgb: 179, 65, 59;
|
||||
--btn-active-color: hsl(0, 0%, 100%);
|
||||
--btn-active-bg: #841913;
|
||||
--btn-active-border-color: #7c1712;
|
||||
--btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
|
||||
--btn-disabled-color: hsl(0, 0%, 100%);
|
||||
--btn-disabled-bg: hsl(3, 75%, 37%);
|
||||
--btn-disabled-border-color: hsl(3, 75%, 37%);
|
||||
}
|
||||
|
||||
.btn-light {
|
||||
--btn-color: hsl(0, 0%, 0%);
|
||||
--btn-bg: hsl(210, 17%, 98%);
|
||||
--btn-border-color: hsl(210, 17%, 98%);
|
||||
--btn-hover-color: hsl(0, 0%, 0%);
|
||||
--btn-hover-bg: #d4d5d5;
|
||||
--btn-hover-border-color: #c7c8c9;
|
||||
--btn-focus-shadow-rgb: 212, 213, 213;
|
||||
--btn-active-color: hsl(0, 0%, 0%);
|
||||
--btn-active-bg: #c7c8c9;
|
||||
--btn-active-border-color: #bbbcbc;
|
||||
--btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
|
||||
--btn-disabled-color: hsl(0, 0%, 0%);
|
||||
--btn-disabled-bg: hsl(210, 17%, 98%);
|
||||
--btn-disabled-border-color: hsl(210, 17%, 98%);
|
||||
}
|
||||
|
||||
.btn-dark {
|
||||
--btn-color: hsl(0, 0%, 100%);
|
||||
--btn-bg: hsl(210, 10%, 23%);
|
||||
--btn-border-color: hsl(210, 10%, 23%);
|
||||
--btn-hover-color: hsl(0, 0%, 100%);
|
||||
--btn-hover-bg: #53585e;
|
||||
--btn-hover-border-color: #494f54;
|
||||
--btn-focus-shadow-rgb: 83, 88, 94;
|
||||
--btn-active-color: hsl(0, 0%, 100%);
|
||||
--btn-active-bg: #5d6267;
|
||||
--btn-active-border-color: #494f54;
|
||||
--btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
|
||||
--btn-disabled-color: hsl(0, 0%, 100%);
|
||||
--btn-disabled-bg: hsl(210, 10%, 23%);
|
||||
--btn-disabled-border-color: hsl(210, 10%, 23%);
|
||||
}
|
||||
|
||||
.btn-outline-primary {
|
||||
--btn-color: hsl(240, 98%, 17%);
|
||||
--btn-border-color: hsl(240, 98%, 17%);
|
||||
--btn-hover-color: hsl(0, 0%, 100%);
|
||||
--btn-hover-bg: hsl(240, 98%, 17%);
|
||||
--btn-hover-border-color: hsl(240, 98%, 17%);
|
||||
--btn-focus-shadow-rgb: 1, 1, 86;
|
||||
--btn-active-color: hsl(0, 0%, 100%);
|
||||
--btn-active-bg: hsl(240, 98%, 17%);
|
||||
--btn-active-border-color: hsl(240, 98%, 17%);
|
||||
--btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
|
||||
--btn-disabled-color: hsl(240, 98%, 17%);
|
||||
--btn-disabled-bg: transparent;
|
||||
--btn-disabled-border-color: hsl(240, 98%, 17%);
|
||||
--gradient: none;
|
||||
}
|
||||
|
||||
.btn-outline-secondary {
|
||||
--btn-color: hsl(210, 7%, 46%);
|
||||
--btn-border-color: hsl(210, 7%, 46%);
|
||||
--btn-hover-color: hsl(0, 0%, 100%);
|
||||
--btn-hover-bg: hsl(210, 7%, 46%);
|
||||
--btn-hover-border-color: hsl(210, 7%, 46%);
|
||||
--btn-focus-shadow-rgb: 109, 117, 126;
|
||||
--btn-active-color: hsl(0, 0%, 100%);
|
||||
--btn-active-bg: hsl(210, 7%, 46%);
|
||||
--btn-active-border-color: hsl(210, 7%, 46%);
|
||||
--btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
|
||||
--btn-disabled-color: hsl(210, 7%, 46%);
|
||||
--btn-disabled-bg: transparent;
|
||||
--btn-disabled-border-color: hsl(210, 7%, 46%);
|
||||
--gradient: none;
|
||||
}
|
||||
|
||||
.btn-outline-success {
|
||||
--btn-color: hsl(120, 32%, 39%);
|
||||
--btn-border-color: hsl(120, 32%, 39%);
|
||||
--btn-hover-color: hsl(0, 0%, 100%);
|
||||
--btn-hover-bg: hsl(120, 32%, 39%);
|
||||
--btn-hover-border-color: hsl(120, 32%, 39%);
|
||||
--btn-focus-shadow-rgb: 68, 131, 68;
|
||||
--btn-active-color: hsl(0, 0%, 100%);
|
||||
--btn-active-bg: hsl(120, 32%, 39%);
|
||||
--btn-active-border-color: hsl(120, 32%, 39%);
|
||||
--btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
|
||||
--btn-disabled-color: hsl(120, 32%, 39%);
|
||||
--btn-disabled-bg: transparent;
|
||||
--btn-disabled-border-color: hsl(120, 32%, 39%);
|
||||
--gradient: none;
|
||||
}
|
||||
|
||||
.btn-outline-info {
|
||||
--btn-color: hsl(207, 49%, 37%);
|
||||
--btn-border-color: hsl(207, 49%, 37%);
|
||||
--btn-hover-color: hsl(0, 0%, 100%);
|
||||
--btn-hover-bg: hsl(207, 49%, 37%);
|
||||
--btn-hover-border-color: hsl(207, 49%, 37%);
|
||||
--btn-focus-shadow-rgb: 48, 99, 141;
|
||||
--btn-active-color: hsl(0, 0%, 100%);
|
||||
--btn-active-bg: hsl(207, 49%, 37%);
|
||||
--btn-active-border-color: hsl(207, 49%, 37%);
|
||||
--btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
|
||||
--btn-disabled-color: hsl(207, 49%, 37%);
|
||||
--btn-disabled-bg: transparent;
|
||||
--btn-disabled-border-color: hsl(207, 49%, 37%);
|
||||
--gradient: none;
|
||||
}
|
||||
|
||||
.btn-outline-warning {
|
||||
--btn-color: hsl(34, 100%, 34%);
|
||||
--btn-border-color: hsl(34, 100%, 34%);
|
||||
--btn-hover-color: hsl(0, 0%, 100%);
|
||||
--btn-hover-bg: hsl(34, 100%, 34%);
|
||||
--btn-hover-border-color: hsl(34, 100%, 34%);
|
||||
--btn-focus-shadow-rgb: 173, 98, 0;
|
||||
--btn-active-color: hsl(0, 0%, 100%);
|
||||
--btn-active-bg: hsl(34, 100%, 34%);
|
||||
--btn-active-border-color: hsl(34, 100%, 34%);
|
||||
--btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
|
||||
--btn-disabled-color: hsl(34, 100%, 34%);
|
||||
--btn-disabled-bg: transparent;
|
||||
--btn-disabled-border-color: hsl(34, 100%, 34%);
|
||||
--gradient: none;
|
||||
}
|
||||
|
||||
.btn-outline-danger {
|
||||
--btn-color: hsl(3, 75%, 37%);
|
||||
--btn-border-color: hsl(3, 75%, 37%);
|
||||
--btn-hover-color: hsl(0, 0%, 100%);
|
||||
--btn-hover-bg: hsl(3, 75%, 37%);
|
||||
--btn-hover-border-color: hsl(3, 75%, 37%);
|
||||
--btn-focus-shadow-rgb: 165, 31, 24;
|
||||
--btn-active-color: hsl(0, 0%, 100%);
|
||||
--btn-active-bg: hsl(3, 75%, 37%);
|
||||
--btn-active-border-color: hsl(3, 75%, 37%);
|
||||
--btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
|
||||
--btn-disabled-color: hsl(3, 75%, 37%);
|
||||
--btn-disabled-bg: transparent;
|
||||
--btn-disabled-border-color: hsl(3, 75%, 37%);
|
||||
--gradient: none;
|
||||
}
|
||||
|
||||
.btn-outline-light {
|
||||
--btn-color: hsl(210, 17%, 98%);
|
||||
--btn-border-color: hsl(210, 17%, 98%);
|
||||
--btn-hover-color: hsl(0, 0%, 0%);
|
||||
--btn-hover-bg: hsl(210, 17%, 98%);
|
||||
--btn-hover-border-color: hsl(210, 17%, 98%);
|
||||
--btn-focus-shadow-rgb: 249, 250, 251;
|
||||
--btn-active-color: hsl(0, 0%, 0%);
|
||||
--btn-active-bg: hsl(210, 17%, 98%);
|
||||
--btn-active-border-color: hsl(210, 17%, 98%);
|
||||
--btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
|
||||
--btn-disabled-color: hsl(210, 17%, 98%);
|
||||
--btn-disabled-bg: transparent;
|
||||
--btn-disabled-border-color: hsl(210, 17%, 98%);
|
||||
--gradient: none;
|
||||
}
|
||||
|
||||
.btn-outline-dark {
|
||||
--btn-color: hsl(210, 10%, 23%);
|
||||
--btn-border-color: hsl(210, 10%, 23%);
|
||||
--btn-hover-color: hsl(0, 0%, 100%);
|
||||
--btn-hover-bg: hsl(210, 10%, 23%);
|
||||
--btn-hover-border-color: hsl(210, 10%, 23%);
|
||||
--btn-focus-shadow-rgb: 53, 59, 65;
|
||||
--btn-active-color: hsl(0, 0%, 100%);
|
||||
--btn-active-bg: hsl(210, 10%, 23%);
|
||||
--btn-active-border-color: hsl(210, 10%, 23%);
|
||||
--btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
|
||||
--btn-disabled-color: hsl(210, 10%, 23%);
|
||||
--btn-disabled-bg: transparent;
|
||||
--btn-disabled-border-color: hsl(210, 10%, 23%);
|
||||
--gradient: none;
|
||||
}
|
||||
|
||||
.btn-link {
|
||||
--btn-font-weight: 400;
|
||||
--btn-color: var(--link-color);
|
||||
--btn-bg: transparent;
|
||||
--btn-border-color: transparent;
|
||||
--btn-hover-color: var(--link-hover-color);
|
||||
--btn-hover-border-color: transparent;
|
||||
--btn-active-color: var(--link-hover-color);
|
||||
--btn-active-border-color: transparent;
|
||||
--btn-disabled-color: hsl(210, 7%, 46%);
|
||||
--btn-disabled-border-color: transparent;
|
||||
--btn-box-shadow: none;
|
||||
--btn-focus-shadow-rgb: 39, 39, 111;
|
||||
text-decoration: underline;
|
||||
}
|
||||
.btn-link:focus-visible {
|
||||
color: var(--btn-color);
|
||||
}
|
||||
.btn-link:hover {
|
||||
color: var(--btn-hover-color);
|
||||
}
|
||||
|
||||
.btn-lg, .btn-group-lg > .btn {
|
||||
--btn-padding-y: 0.5rem;
|
||||
--btn-padding-x: 1rem;
|
||||
--btn-font-size: 1.25rem;
|
||||
--btn-border-radius: 0.3rem;
|
||||
}
|
||||
|
||||
.btn-sm, .btn-group-sm > .btn {
|
||||
--btn-padding-y: 0.25rem;
|
||||
--btn-padding-x: 0.5rem;
|
||||
--btn-font-size: 0.875rem;
|
||||
--btn-border-radius: 0.2rem;
|
||||
}
|
||||
.container-header {
|
||||
background-image:var(--moko-cassiopeia-header-background-image)!important;
|
||||
}
|
||||
382
media/templates/site/moko-cassiopeia/css/global/colors_sra.css
Normal file
382
media/templates/site/moko-cassiopeia/css/global/colors_sra.css
Normal file
@@ -0,0 +1,382 @@
|
||||
:root {
|
||||
--moko-cassiopeia-color-primary: #29373a;
|
||||
--moko-cassiopeia-color-link: #15496e;
|
||||
--moko-cassiopeia-color-hover: black;
|
||||
--nav-text-color: black;
|
||||
--nav-bg-color: #f5560b;
|
||||
--accent-color-primary: #c1163e;
|
||||
--accent-color-secondary: #7dc6da;
|
||||
--border: 5px;
|
||||
|
||||
--blue: hsl(240, 98%, 17%);
|
||||
--indigo: hsl(263, 90%, 51%);
|
||||
--purple: hsl(261, 51%, 51%);
|
||||
--pink: hsl(332, 79%, 58%);
|
||||
--red: hsl(3, 75%, 37%);
|
||||
--orange: hsl(27, 98%, 54%);
|
||||
--yellow: hsl(34, 100%, 34%);
|
||||
--green: hsl(120, 32%, 39%);
|
||||
--teal: hsl(194, 66%, 61%);
|
||||
--cyan: hsl(207, 49%, 37%);
|
||||
--white: hsl(0, 0%, 100%);
|
||||
--gray-100: hsl(210, 17%, 98%);
|
||||
--gray-200: hsl(210, 16%, 93%);
|
||||
--gray-300: hsl(210, 14%, 89%);
|
||||
--gray-400: hsl(210, 14%, 83%);
|
||||
--gray-500: hsl(210, 11%, 71%);
|
||||
--gray-600: hsl(210, 7%, 46%);
|
||||
--gray-700: hsl(210, 9%, 31%);
|
||||
--gray-800: hsl(210, 10%, 23%);
|
||||
--gray-900: hsl(210, 11%, 15%);
|
||||
--primary: hsl(240, 98%, 17%);
|
||||
--secondary: hsl(210, 7%, 46%);
|
||||
--success: hsl(120, 32%, 39%);
|
||||
--info: hsl(207, 49%, 37%);
|
||||
--warning: hsl(34, 100%, 34%);
|
||||
--danger: hsl(3, 75%, 37%);
|
||||
--light: hsl(210, 17%, 98%);
|
||||
--dark: hsl(210, 10%, 23%);
|
||||
--primary-rgb: 1, 1, 86;
|
||||
--secondary-rgb: 109, 117, 126;
|
||||
--success-rgb: 68, 131, 68;
|
||||
--info-rgb: 48, 99, 141;
|
||||
--warning-rgb: 173, 98, 0;
|
||||
--danger-rgb: 165, 31, 24;
|
||||
--light-rgb: 249, 250, 251;
|
||||
--dark-rgb: 53, 59, 65;
|
||||
--white-rgb: 255, 255, 255;
|
||||
--black-rgb: 0, 0, 0;
|
||||
--body-color-rgb: 34, 38, 42;
|
||||
--body-bg-rgb: 255, 255, 255;
|
||||
--font-sans-serif: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
|
||||
--font-monospace: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
|
||||
--gradient: linear-gradient(180deg, rgba(255, 255, 255, 0.15), rgba(255, 255, 255, 0));
|
||||
--body-font-family: var(--moko-cassiopeia-font-family-body, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji");
|
||||
--body-font-size: 1rem;
|
||||
--body-font-weight: 400;
|
||||
--body-line-height: 1.5;
|
||||
--body-color: hsl(210, 11%, 15%);
|
||||
--body-bg: hsl(0, 0%, 100%);
|
||||
--border-width: 1px;
|
||||
--border-style: solid;
|
||||
--border-color: hsl(210, 14%, 89%);
|
||||
--border-color-translucent: rgba(0, 0, 0, 0.175);
|
||||
--border-radius: 0.25rem;
|
||||
--border-radius-sm: 0.2rem;
|
||||
--border-radius-lg: 0.3rem;
|
||||
--border-radius-xl: 0.3rem;
|
||||
--border-radius-2xl: 0.3rem;
|
||||
--border-radius-pill: 50rem;
|
||||
--link-color: var(--moko-cassiopeia-color-link);
|
||||
--link-hover-color: var(--moko-cassiopeia-color-hover);
|
||||
--code-color: hsl(332, 79%, 58%);
|
||||
--highlight-bg: #fbeea8;
|
||||
}
|
||||
|
||||
.btn-primary {
|
||||
--btn-color: hsl(0, 0%, 100%);
|
||||
--btn-bg: hsl(240, 98%, 17%);
|
||||
--btn-border-color: hsl(240, 98%, 17%);
|
||||
--btn-hover-color: hsl(0, 0%, 100%);
|
||||
--btn-hover-bg: #010149;
|
||||
--btn-hover-border-color: #010145;
|
||||
--btn-focus-shadow-rgb: 39, 39, 111;
|
||||
--btn-active-color: hsl(0, 0%, 100%);
|
||||
--btn-active-bg: #010145;
|
||||
--btn-active-border-color: #010141;
|
||||
--btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
|
||||
--btn-disabled-color: hsl(0, 0%, 100%);
|
||||
--btn-disabled-bg: hsl(240, 98%, 17%);
|
||||
--btn-disabled-border-color: hsl(240, 98%, 17%);
|
||||
}
|
||||
|
||||
.btn-secondary {
|
||||
--btn-color: --nav-text-color;
|
||||
--btn-bg: --nav-bg-color;
|
||||
--btn-border-color: hsl(210, 7%, 46%);
|
||||
--btn-hover-color: hsl(0, 0%, 100%);
|
||||
--btn-hover-bg: #5d636b;
|
||||
--btn-hover-border-color: #575e65;
|
||||
--btn-focus-shadow-rgb: gray;
|
||||
--btn-active-color: hsl(0, 0%, 100%);
|
||||
--btn-active-bg: #575e65;
|
||||
--btn-active-border-color: #52585f;
|
||||
--btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
|
||||
--btn-disabled-color: hsl(0, 0%, 100%);
|
||||
--btn-disabled-bg: hsl(210, 7%, 46%);
|
||||
--btn-disabled-border-color: hsl(210, 7%, 46%);
|
||||
}
|
||||
|
||||
.btn-success {
|
||||
--btn-color: hsl(0, 0%, 100%);
|
||||
--btn-bg: hsl(120, 32%, 39%);
|
||||
--btn-border-color: hsl(120, 32%, 39%);
|
||||
--btn-hover-color: hsl(0, 0%, 100%);
|
||||
--btn-hover-bg: #3a6f3a;
|
||||
--btn-hover-border-color: #366936;
|
||||
--btn-focus-shadow-rgb: 96, 150, 96;
|
||||
--btn-active-color: hsl(0, 0%, 100%);
|
||||
--btn-active-bg: #366936;
|
||||
--btn-active-border-color: #336233;
|
||||
--btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
|
||||
--btn-disabled-color: hsl(0, 0%, 100%);
|
||||
--btn-disabled-bg: hsl(120, 32%, 39%);
|
||||
--btn-disabled-border-color: hsl(120, 32%, 39%);
|
||||
}
|
||||
|
||||
.btn-info {
|
||||
--btn-color: hsl(0, 0%, 100%);
|
||||
--btn-bg: hsl(207, 49%, 37%);
|
||||
--btn-border-color: hsl(207, 49%, 37%);
|
||||
--btn-hover-color: hsl(0, 0%, 100%);
|
||||
--btn-hover-bg: #295478;
|
||||
--btn-hover-border-color: #264f71;
|
||||
--btn-focus-shadow-rgb: 79, 122, 158;
|
||||
--btn-active-color: hsl(0, 0%, 100%);
|
||||
--btn-active-bg: #264f71;
|
||||
--btn-active-border-color: #244a6a;
|
||||
--btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
|
||||
--btn-disabled-color: hsl(0, 0%, 100%);
|
||||
--btn-disabled-bg: hsl(207, 49%, 37%);
|
||||
--btn-disabled-border-color: hsl(207, 49%, 37%);
|
||||
}
|
||||
|
||||
.btn-warning {
|
||||
--btn-color: hsl(0, 0%, 100%);
|
||||
--btn-bg: hsl(34, 100%, 34%);
|
||||
--btn-border-color: hsl(34, 100%, 34%);
|
||||
--btn-hover-color: hsl(0, 0%, 100%);
|
||||
--btn-hover-bg: #935300;
|
||||
--btn-hover-border-color: #8a4e00;
|
||||
--btn-focus-shadow-rgb: 185, 122, 38;
|
||||
--btn-active-color: hsl(0, 0%, 100%);
|
||||
--btn-active-bg: #8a4e00;
|
||||
--btn-active-border-color: #824a00;
|
||||
--btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
|
||||
--btn-disabled-color: hsl(0, 0%, 100%);
|
||||
--btn-disabled-bg: hsl(34, 100%, 34%);
|
||||
--btn-disabled-border-color: hsl(34, 100%, 34%);
|
||||
}
|
||||
|
||||
.btn-danger {
|
||||
--btn-color: hsl(0, 0%, 100%);
|
||||
--btn-bg: hsl(3, 75%, 37%);
|
||||
--btn-border-color: hsl(3, 75%, 37%);
|
||||
--btn-hover-color: hsl(0, 0%, 100%);
|
||||
--btn-hover-bg: #8c1a14;
|
||||
--btn-hover-border-color: #841913;
|
||||
--btn-focus-shadow-rgb: 179, 65, 59;
|
||||
--btn-active-color: hsl(0, 0%, 100%);
|
||||
--btn-active-bg: #841913;
|
||||
--btn-active-border-color: #7c1712;
|
||||
--btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
|
||||
--btn-disabled-color: hsl(0, 0%, 100%);
|
||||
--btn-disabled-bg: hsl(3, 75%, 37%);
|
||||
--btn-disabled-border-color: hsl(3, 75%, 37%);
|
||||
}
|
||||
|
||||
.btn-light {
|
||||
--btn-color: hsl(0, 0%, 0%);
|
||||
--btn-bg: hsl(210, 17%, 98%);
|
||||
--btn-border-color: hsl(210, 17%, 98%);
|
||||
--btn-hover-color: hsl(0, 0%, 0%);
|
||||
--btn-hover-bg: #d4d5d5;
|
||||
--btn-hover-border-color: #c7c8c9;
|
||||
--btn-focus-shadow-rgb: 212, 213, 213;
|
||||
--btn-active-color: hsl(0, 0%, 0%);
|
||||
--btn-active-bg: #c7c8c9;
|
||||
--btn-active-border-color: #bbbcbc;
|
||||
--btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
|
||||
--btn-disabled-color: hsl(0, 0%, 0%);
|
||||
--btn-disabled-bg: hsl(210, 17%, 98%);
|
||||
--btn-disabled-border-color: hsl(210, 17%, 98%);
|
||||
}
|
||||
|
||||
.btn-dark {
|
||||
--btn-color: hsl(0, 0%, 100%);
|
||||
--btn-bg: hsl(210, 10%, 23%);
|
||||
--btn-border-color: hsl(210, 10%, 23%);
|
||||
--btn-hover-color: hsl(0, 0%, 100%);
|
||||
--btn-hover-bg: #53585e;
|
||||
--btn-hover-border-color: #494f54;
|
||||
--btn-focus-shadow-rgb: 83, 88, 94;
|
||||
--btn-active-color: hsl(0, 0%, 100%);
|
||||
--btn-active-bg: #5d6267;
|
||||
--btn-active-border-color: #494f54;
|
||||
--btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
|
||||
--btn-disabled-color: hsl(0, 0%, 100%);
|
||||
--btn-disabled-bg: hsl(210, 10%, 23%);
|
||||
--btn-disabled-border-color: hsl(210, 10%, 23%);
|
||||
}
|
||||
|
||||
.btn-outline-primary {
|
||||
--btn-color: hsl(240, 98%, 17%);
|
||||
--btn-border-color: hsl(240, 98%, 17%);
|
||||
--btn-hover-color: hsl(0, 0%, 100%);
|
||||
--btn-hover-bg: hsl(240, 98%, 17%);
|
||||
--btn-hover-border-color: hsl(240, 98%, 17%);
|
||||
--btn-focus-shadow-rgb: 1, 1, 86;
|
||||
--btn-active-color: hsl(0, 0%, 100%);
|
||||
--btn-active-bg: hsl(240, 98%, 17%);
|
||||
--btn-active-border-color: hsl(240, 98%, 17%);
|
||||
--btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
|
||||
--btn-disabled-color: hsl(240, 98%, 17%);
|
||||
--btn-disabled-bg: transparent;
|
||||
--btn-disabled-border-color: hsl(240, 98%, 17%);
|
||||
--gradient: none;
|
||||
}
|
||||
|
||||
.btn-outline-secondary {
|
||||
--btn-color: hsl(210, 7%, 46%);
|
||||
--btn-border-color: hsl(210, 7%, 46%);
|
||||
--btn-hover-color: hsl(0, 0%, 100%);
|
||||
--btn-hover-bg: hsl(210, 7%, 46%);
|
||||
--btn-hover-border-color: hsl(210, 7%, 46%);
|
||||
--btn-focus-shadow-rgb: 109, 117, 126;
|
||||
--btn-active-color: hsl(0, 0%, 100%);
|
||||
--btn-active-bg: hsl(210, 7%, 46%);
|
||||
--btn-active-border-color: hsl(210, 7%, 46%);
|
||||
--btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
|
||||
--btn-disabled-color: hsl(210, 7%, 46%);
|
||||
--btn-disabled-bg: transparent;
|
||||
--btn-disabled-border-color: hsl(210, 7%, 46%);
|
||||
--gradient: none;
|
||||
}
|
||||
|
||||
.btn-outline-success {
|
||||
--btn-color: hsl(120, 32%, 39%);
|
||||
--btn-border-color: hsl(120, 32%, 39%);
|
||||
--btn-hover-color: hsl(0, 0%, 100%);
|
||||
--btn-hover-bg: hsl(120, 32%, 39%);
|
||||
--btn-hover-border-color: hsl(120, 32%, 39%);
|
||||
--btn-focus-shadow-rgb: 68, 131, 68;
|
||||
--btn-active-color: hsl(0, 0%, 100%);
|
||||
--btn-active-bg: hsl(120, 32%, 39%);
|
||||
--btn-active-border-color: hsl(120, 32%, 39%);
|
||||
--btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
|
||||
--btn-disabled-color: hsl(120, 32%, 39%);
|
||||
--btn-disabled-bg: transparent;
|
||||
--btn-disabled-border-color: hsl(120, 32%, 39%);
|
||||
--gradient: none;
|
||||
}
|
||||
|
||||
.btn-outline-info {
|
||||
--btn-color: hsl(207, 49%, 37%);
|
||||
--btn-border-color: hsl(207, 49%, 37%);
|
||||
--btn-hover-color: hsl(0, 0%, 100%);
|
||||
--btn-hover-bg: hsl(207, 49%, 37%);
|
||||
--btn-hover-border-color: hsl(207, 49%, 37%);
|
||||
--btn-focus-shadow-rgb: 48, 99, 141;
|
||||
--btn-active-color: hsl(0, 0%, 100%);
|
||||
--btn-active-bg: hsl(207, 49%, 37%);
|
||||
--btn-active-border-color: hsl(207, 49%, 37%);
|
||||
--btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
|
||||
--btn-disabled-color: hsl(207, 49%, 37%);
|
||||
--btn-disabled-bg: transparent;
|
||||
--btn-disabled-border-color: hsl(207, 49%, 37%);
|
||||
--gradient: none;
|
||||
}
|
||||
|
||||
.btn-outline-warning {
|
||||
--btn-color: hsl(34, 100%, 34%);
|
||||
--btn-border-color: hsl(34, 100%, 34%);
|
||||
--btn-hover-color: hsl(0, 0%, 100%);
|
||||
--btn-hover-bg: hsl(34, 100%, 34%);
|
||||
--btn-hover-border-color: hsl(34, 100%, 34%);
|
||||
--btn-focus-shadow-rgb: 173, 98, 0;
|
||||
--btn-active-color: hsl(0, 0%, 100%);
|
||||
--btn-active-bg: hsl(34, 100%, 34%);
|
||||
--btn-active-border-color: hsl(34, 100%, 34%);
|
||||
--btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
|
||||
--btn-disabled-color: hsl(34, 100%, 34%);
|
||||
--btn-disabled-bg: transparent;
|
||||
--btn-disabled-border-color: hsl(34, 100%, 34%);
|
||||
--gradient: none;
|
||||
}
|
||||
|
||||
.btn-outline-danger {
|
||||
--btn-color: hsl(3, 75%, 37%);
|
||||
--btn-border-color: hsl(3, 75%, 37%);
|
||||
--btn-hover-color: hsl(0, 0%, 100%);
|
||||
--btn-hover-bg: hsl(3, 75%, 37%);
|
||||
--btn-hover-border-color: hsl(3, 75%, 37%);
|
||||
--btn-focus-shadow-rgb: 165, 31, 24;
|
||||
--btn-active-color: hsl(0, 0%, 100%);
|
||||
--btn-active-bg: hsl(3, 75%, 37%);
|
||||
--btn-active-border-color: hsl(3, 75%, 37%);
|
||||
--btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
|
||||
--btn-disabled-color: hsl(3, 75%, 37%);
|
||||
--btn-disabled-bg: transparent;
|
||||
--btn-disabled-border-color: hsl(3, 75%, 37%);
|
||||
--gradient: none;
|
||||
}
|
||||
|
||||
.btn-outline-light {
|
||||
--btn-color: hsl(210, 17%, 98%);
|
||||
--btn-border-color: hsl(210, 17%, 98%);
|
||||
--btn-hover-color: hsl(0, 0%, 0%);
|
||||
--btn-hover-bg: hsl(210, 17%, 98%);
|
||||
--btn-hover-border-color: hsl(210, 17%, 98%);
|
||||
--btn-focus-shadow-rgb: 249, 250, 251;
|
||||
--btn-active-color: hsl(0, 0%, 0%);
|
||||
--btn-active-bg: hsl(210, 17%, 98%);
|
||||
--btn-active-border-color: hsl(210, 17%, 98%);
|
||||
--btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
|
||||
--btn-disabled-color: hsl(210, 17%, 98%);
|
||||
--btn-disabled-bg: transparent;
|
||||
--btn-disabled-border-color: hsl(210, 17%, 98%);
|
||||
--gradient: none;
|
||||
}
|
||||
|
||||
.btn-outline-dark {
|
||||
--btn-color: hsl(210, 10%, 23%);
|
||||
--btn-border-color: hsl(210, 10%, 23%);
|
||||
--btn-hover-color: hsl(0, 0%, 100%);
|
||||
--btn-hover-bg: hsl(210, 10%, 23%);
|
||||
--btn-hover-border-color: hsl(210, 10%, 23%);
|
||||
--btn-focus-shadow-rgb: 53, 59, 65;
|
||||
--btn-active-color: hsl(0, 0%, 100%);
|
||||
--btn-active-bg: hsl(210, 10%, 23%);
|
||||
--btn-active-border-color: hsl(210, 10%, 23%);
|
||||
--btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
|
||||
--btn-disabled-color: hsl(210, 10%, 23%);
|
||||
--btn-disabled-bg: transparent;
|
||||
--btn-disabled-border-color: hsl(210, 10%, 23%);
|
||||
--gradient: none;
|
||||
}
|
||||
|
||||
.btn-link {
|
||||
--btn-font-weight: 400;
|
||||
--btn-color: var(--link-color);
|
||||
--btn-bg: transparent;
|
||||
--btn-border-color: transparent;
|
||||
--btn-hover-color: var(--link-hover-color);
|
||||
--btn-hover-border-color: transparent;
|
||||
--btn-active-color: var(--link-hover-color);
|
||||
--btn-active-border-color: transparent;
|
||||
--btn-disabled-color: hsl(210, 7%, 46%);
|
||||
--btn-disabled-border-color: transparent;
|
||||
--btn-box-shadow: none;
|
||||
--btn-focus-shadow-rgb: 39, 39, 111;
|
||||
text-decoration: underline;
|
||||
}
|
||||
.btn-link:focus-visible {
|
||||
color: var(--btn-color);
|
||||
}
|
||||
.btn-link:hover {
|
||||
color: var(--btn-hover-color);
|
||||
}
|
||||
|
||||
.btn-lg, .btn-group-lg > .btn {
|
||||
--btn-padding-y: 0.5rem;
|
||||
--btn-padding-x: 1rem;
|
||||
--btn-font-size: 1.25rem;
|
||||
--btn-border-radius: 0.3rem;
|
||||
}
|
||||
|
||||
.btn-sm, .btn-group-sm > .btn {
|
||||
--btn-padding-y: 0.25rem;
|
||||
--btn-padding-x: 0.5rem;
|
||||
--btn-font-size: 0.875rem;
|
||||
--btn-border-radius: 0.2rem;
|
||||
}
|
||||
@@ -0,0 +1,440 @@
|
||||
:root, [data-bs-theme="light"] {
|
||||
--moko-cassiopeia-color-primary: #112855;
|
||||
--moko-cassiopeia-color-link: #224FAA;
|
||||
--moko-cassiopeia-color-hover: #224FAA;
|
||||
--moko-cassiopeia-header-background-image: url('../../../../../../media/templates/site/moko-cassiopeia/images/bg.svg');
|
||||
--moko-cassiopeia-header-background-position: auto;
|
||||
--moko-cassiopeia-header-background-attachment: fixed;
|
||||
--moko-cassiopeia-header-background-repeat: repeat;
|
||||
--moko-cassiopeia-header-background-size: auto;
|
||||
--nav-text-color: white;
|
||||
--nav-bg-color: #224FAA;
|
||||
--accent-color-primary: #3f8ff0;
|
||||
--accent-color-secondary: #3f8ff0;
|
||||
--border: 5px;
|
||||
--mainmenu-nav-link-color: white;
|
||||
|
||||
--blue: #010156;
|
||||
--black: #000;
|
||||
--indigo: #6812f3;
|
||||
--purple: #6f42c2;
|
||||
--pink: #e93f8e;
|
||||
--red: #a51f18;
|
||||
--orange: #fd7e17;
|
||||
--yellow: #ad6200;
|
||||
--green: #448344;
|
||||
--teal: #5abfdd;
|
||||
--cyan: #30638d;
|
||||
--white: #fff;
|
||||
--gray-100: #f9fafb;
|
||||
--gray-200: #eaedf0;
|
||||
--gray-300: #dfe3e7;
|
||||
--gray-400: #ced4da;
|
||||
--gray-500: #adb5bd;
|
||||
--gray-600: #6d757e;
|
||||
--gray-700: #484f56;
|
||||
--gray-800: #353b41;
|
||||
--gray-900: #22262a;
|
||||
--primary: #010156;
|
||||
--secondary: #6d757e;
|
||||
--success: #448344;
|
||||
--info: #30638d;
|
||||
--warning: #ad6200;
|
||||
--danger: #a51f18;
|
||||
--light: #f9fafb;
|
||||
--dark: #353b41;
|
||||
--primary-rgb: 1, 1, 86;
|
||||
--secondary-rgb: 109, 117, 126;
|
||||
--success-rgb: 68, 131, 68;
|
||||
--info-rgb: 48, 99, 141;
|
||||
--warning-rgb: 173, 98, 0;
|
||||
--danger-rgb: 165, 31, 24;
|
||||
--light-rgb: 249, 250, 251;
|
||||
--dark-rgb: 53, 59, 65;
|
||||
--primary-text-emphasis: #002;
|
||||
--secondary-text-emphasis: #2c2f32;
|
||||
--success-text-emphasis: #1b351b;
|
||||
--info-text-emphasis: #132838;
|
||||
--warning-text-emphasis: #452700;
|
||||
--danger-text-emphasis: #420c09;
|
||||
--light-text-emphasis: #484f56;
|
||||
--dark-text-emphasis: #484f56;
|
||||
--primary-bg-subtle: #ccd;
|
||||
--secondary-bg-subtle: #e2e3e5;
|
||||
--success-bg-subtle: #dae6da;
|
||||
--info-bg-subtle: #d6e0e8;
|
||||
--warning-bg-subtle: #efe0cc;
|
||||
--danger-bg-subtle: #edd2d1;
|
||||
--light-bg-subtle: #fcfcfd;
|
||||
--dark-bg-subtle: #ced4da;
|
||||
--primary-border-subtle: #99b;
|
||||
--secondary-border-subtle: #c5c8cb;
|
||||
--success-border-subtle: #b4ceb4;
|
||||
--info-border-subtle: #acc1d1;
|
||||
--warning-border-subtle: #dec099;
|
||||
--danger-border-subtle: #dba5a2;
|
||||
--light-border-subtle: #eaedf0;
|
||||
--dark-border-subtle: #adb5bd;
|
||||
--white-rgb: 255, 255, 255;
|
||||
--black-rgb: 0, 0, 0;
|
||||
--font-sans-serif: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
|
||||
--font-monospace: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
|
||||
--gradient: linear-gradient(180deg, #ffffff26, #fff0);
|
||||
--body-font-family: var(--moko-cassiopeia-font-family-body, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji");
|
||||
--body-font-size: 1rem;
|
||||
--body-font-weight: 400;
|
||||
--body-line-height: 1.5;
|
||||
--body-color: #22262a;
|
||||
--body-color-rgb: 34, 38, 42;
|
||||
--body-bg: #fff;
|
||||
--body-bg-rgb: 255, 255, 255;
|
||||
--emphasis-color: #000;
|
||||
--emphasis-color-rgb: 0, 0, 0;
|
||||
--secondary-color: #22262abf;
|
||||
--secondary-color-rgb: 34, 38, 42;
|
||||
--secondary-bg: #eaedf0;
|
||||
--secondary-bg-rgb: 234, 237, 240;
|
||||
--tertiary-color: #22262a80;
|
||||
--tertiary-color-rgb: 34, 38, 42;
|
||||
--tertiary-bg: #f9fafb;
|
||||
--tertiary-bg-rgb: 249, 250, 251;
|
||||
--heading-color: inherit;
|
||||
--link-color: #224faa;
|
||||
--link-color-rgb: 34, 79, 170;
|
||||
--link-decoration: underline;
|
||||
--link-hover-color: #424077;
|
||||
--link-hover-color-rgb: 66, 64, 119;
|
||||
--code-color: #e93f8e;
|
||||
--highlight-color: #22262a;
|
||||
--highlight-bg: #fbeea8;
|
||||
--border-width: 1px;
|
||||
--border-style: solid;
|
||||
--border-color: #dfe3e7;
|
||||
--border-color-translucent: #0000002d;
|
||||
--border-radius: .25rem;
|
||||
--border-radius-sm: .2rem;
|
||||
--border-radius-lg: .3rem;
|
||||
--border-radius-xl: .3rem;
|
||||
--border-radius-xxl: 2rem;
|
||||
--border-radius-2xl: var(--border-radius-xxl);
|
||||
--border-radius-pill: 50rem;
|
||||
--box-shadow: 0 .5rem 1rem #00000026;
|
||||
--box-shadow-sm: 0 .125rem .25rem #00000013;
|
||||
--box-shadow-lg: 0 1rem 3rem #0000002d;
|
||||
--box-shadow-inset: inset 0 1px 2px #00000013;
|
||||
--focus-ring-width: .25rem;
|
||||
--focus-ring-opacity: .25;
|
||||
--focus-ring-color: #01015640;
|
||||
--form-valid-color: #448344;
|
||||
--form-valid-border-color: #448344;
|
||||
--form-invalid-color: #a51f18;
|
||||
--form-invalid-border-color: #a51f18;
|
||||
}
|
||||
|
||||
.btn-primary {
|
||||
--btn-color: hsl(0, 0%, 100%);
|
||||
--btn-bg: hsl(240, 98%, 17%);
|
||||
--btn-border-color: hsl(240, 98%, 17%);
|
||||
--btn-hover-color: hsl(0, 0%, 100%);
|
||||
--btn-hover-bg: #010149;
|
||||
--btn-hover-border-color: #010145;
|
||||
--btn-focus-shadow-rgb: 39, 39, 111;
|
||||
--btn-active-color: hsl(0, 0%, 100%);
|
||||
--btn-active-bg: #010145;
|
||||
--btn-active-border-color: #010141;
|
||||
--btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
|
||||
--btn-disabled-color: hsl(0, 0%, 100%);
|
||||
--btn-disabled-bg: hsl(240, 98%, 17%);
|
||||
--btn-disabled-border-color: hsl(240, 98%, 17%);
|
||||
}
|
||||
|
||||
.btn-secondary {
|
||||
--btn-color: --nav-text-color;
|
||||
--btn-bg: --nav-bg-color;
|
||||
--btn-border-color: hsl(210, 7%, 46%);
|
||||
--btn-hover-color: hsl(0, 0%, 100%);
|
||||
--btn-hover-bg: #5d636b;
|
||||
--btn-hover-border-color: #575e65;
|
||||
--btn-focus-shadow-rgb: gray;
|
||||
--btn-active-color: hsl(0, 0%, 100%);
|
||||
--btn-active-bg: #575e65;
|
||||
--btn-active-border-color: #52585f;
|
||||
--btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
|
||||
--btn-disabled-color: hsl(0, 0%, 100%);
|
||||
--btn-disabled-bg: hsl(210, 7%, 46%);
|
||||
--btn-disabled-border-color: hsl(210, 7%, 46%);
|
||||
}
|
||||
|
||||
.btn-success {
|
||||
--btn-color: hsl(0, 0%, 100%);
|
||||
--btn-bg: hsl(120, 32%, 39%);
|
||||
--btn-border-color: hsl(120, 32%, 39%);
|
||||
--btn-hover-color: hsl(0, 0%, 100%);
|
||||
--btn-hover-bg: #3a6f3a;
|
||||
--btn-hover-border-color: #366936;
|
||||
--btn-focus-shadow-rgb: 96, 150, 96;
|
||||
--btn-active-color: hsl(0, 0%, 100%);
|
||||
--btn-active-bg: #366936;
|
||||
--btn-active-border-color: #336233;
|
||||
--btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
|
||||
--btn-disabled-color: hsl(0, 0%, 100%);
|
||||
--btn-disabled-bg: hsl(120, 32%, 39%);
|
||||
--btn-disabled-border-color: hsl(120, 32%, 39%);
|
||||
}
|
||||
|
||||
.btn-info {
|
||||
--btn-color: hsl(0, 0%, 100%);
|
||||
--btn-bg: hsl(207, 49%, 37%);
|
||||
--btn-border-color: hsl(207, 49%, 37%);
|
||||
--btn-hover-color: hsl(0, 0%, 100%);
|
||||
--btn-hover-bg: #295478;
|
||||
--btn-hover-border-color: #264f71;
|
||||
--btn-focus-shadow-rgb: 79, 122, 158;
|
||||
--btn-active-color: hsl(0, 0%, 100%);
|
||||
--btn-active-bg: #264f71;
|
||||
--btn-active-border-color: #244a6a;
|
||||
--btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
|
||||
--btn-disabled-color: hsl(0, 0%, 100%);
|
||||
--btn-disabled-bg: hsl(207, 49%, 37%);
|
||||
--btn-disabled-border-color: hsl(207, 49%, 37%);
|
||||
}
|
||||
|
||||
.btn-warning {
|
||||
--btn-color: hsl(0, 0%, 100%);
|
||||
--btn-bg: hsl(34, 100%, 34%);
|
||||
--btn-border-color: hsl(34, 100%, 34%);
|
||||
--btn-hover-color: hsl(0, 0%, 100%);
|
||||
--btn-hover-bg: #935300;
|
||||
--btn-hover-border-color: #8a4e00;
|
||||
--btn-focus-shadow-rgb: 185, 122, 38;
|
||||
--btn-active-color: hsl(0, 0%, 100%);
|
||||
--btn-active-bg: #8a4e00;
|
||||
--btn-active-border-color: #824a00;
|
||||
--btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
|
||||
--btn-disabled-color: hsl(0, 0%, 100%);
|
||||
--btn-disabled-bg: hsl(34, 100%, 34%);
|
||||
--btn-disabled-border-color: hsl(34, 100%, 34%);
|
||||
}
|
||||
|
||||
.btn-danger {
|
||||
--btn-color: hsl(0, 0%, 100%);
|
||||
--btn-bg: hsl(3, 75%, 37%);
|
||||
--btn-border-color: hsl(3, 75%, 37%);
|
||||
--btn-hover-color: hsl(0, 0%, 100%);
|
||||
--btn-hover-bg: #8c1a14;
|
||||
--btn-hover-border-color: #841913;
|
||||
--btn-focus-shadow-rgb: 179, 65, 59;
|
||||
--btn-active-color: hsl(0, 0%, 100%);
|
||||
--btn-active-bg: #841913;
|
||||
--btn-active-border-color: #7c1712;
|
||||
--btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
|
||||
--btn-disabled-color: hsl(0, 0%, 100%);
|
||||
--btn-disabled-bg: hsl(3, 75%, 37%);
|
||||
--btn-disabled-border-color: hsl(3, 75%, 37%);
|
||||
}
|
||||
|
||||
.btn-light {
|
||||
--btn-color: hsl(0, 0%, 0%);
|
||||
--btn-bg: hsl(210, 17%, 98%);
|
||||
--btn-border-color: hsl(210, 17%, 98%);
|
||||
--btn-hover-color: hsl(0, 0%, 0%);
|
||||
--btn-hover-bg: #d4d5d5;
|
||||
--btn-hover-border-color: #c7c8c9;
|
||||
--btn-focus-shadow-rgb: 212, 213, 213;
|
||||
--btn-active-color: hsl(0, 0%, 0%);
|
||||
--btn-active-bg: #c7c8c9;
|
||||
--btn-active-border-color: #bbbcbc;
|
||||
--btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
|
||||
--btn-disabled-color: hsl(0, 0%, 0%);
|
||||
--btn-disabled-bg: hsl(210, 17%, 98%);
|
||||
--btn-disabled-border-color: hsl(210, 17%, 98%);
|
||||
}
|
||||
|
||||
.btn-dark {
|
||||
--btn-color: hsl(0, 0%, 100%);
|
||||
--btn-bg: hsl(210, 10%, 23%);
|
||||
--btn-border-color: hsl(210, 10%, 23%);
|
||||
--btn-hover-color: hsl(0, 0%, 100%);
|
||||
--btn-hover-bg: #53585e;
|
||||
--btn-hover-border-color: #494f54;
|
||||
--btn-focus-shadow-rgb: 83, 88, 94;
|
||||
--btn-active-color: hsl(0, 0%, 100%);
|
||||
--btn-active-bg: #5d6267;
|
||||
--btn-active-border-color: #494f54;
|
||||
--btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
|
||||
--btn-disabled-color: hsl(0, 0%, 100%);
|
||||
--btn-disabled-bg: hsl(210, 10%, 23%);
|
||||
--btn-disabled-border-color: hsl(210, 10%, 23%);
|
||||
}
|
||||
|
||||
.btn-outline-primary {
|
||||
--btn-color: hsl(240, 98%, 17%);
|
||||
--btn-border-color: hsl(240, 98%, 17%);
|
||||
--btn-hover-color: hsl(0, 0%, 100%);
|
||||
--btn-hover-bg: hsl(240, 98%, 17%);
|
||||
--btn-hover-border-color: hsl(240, 98%, 17%);
|
||||
--btn-focus-shadow-rgb: 1, 1, 86;
|
||||
--btn-active-color: hsl(0, 0%, 100%);
|
||||
--btn-active-bg: hsl(240, 98%, 17%);
|
||||
--btn-active-border-color: hsl(240, 98%, 17%);
|
||||
--btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
|
||||
--btn-disabled-color: hsl(240, 98%, 17%);
|
||||
--btn-disabled-bg: transparent;
|
||||
--btn-disabled-border-color: hsl(240, 98%, 17%);
|
||||
--gradient: none;
|
||||
}
|
||||
|
||||
.btn-outline-secondary {
|
||||
--btn-color: hsl(210, 7%, 46%);
|
||||
--btn-border-color: hsl(210, 7%, 46%);
|
||||
--btn-hover-color: hsl(0, 0%, 100%);
|
||||
--btn-hover-bg: hsl(210, 7%, 46%);
|
||||
--btn-hover-border-color: hsl(210, 7%, 46%);
|
||||
--btn-focus-shadow-rgb: 109, 117, 126;
|
||||
--btn-active-color: hsl(0, 0%, 100%);
|
||||
--btn-active-bg: hsl(210, 7%, 46%);
|
||||
--btn-active-border-color: hsl(210, 7%, 46%);
|
||||
--btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
|
||||
--btn-disabled-color: hsl(210, 7%, 46%);
|
||||
--btn-disabled-bg: transparent;
|
||||
--btn-disabled-border-color: hsl(210, 7%, 46%);
|
||||
--gradient: none;
|
||||
}
|
||||
|
||||
.btn-outline-success {
|
||||
--btn-color: hsl(120, 32%, 39%);
|
||||
--btn-border-color: hsl(120, 32%, 39%);
|
||||
--btn-hover-color: hsl(0, 0%, 100%);
|
||||
--btn-hover-bg: hsl(120, 32%, 39%);
|
||||
--btn-hover-border-color: hsl(120, 32%, 39%);
|
||||
--btn-focus-shadow-rgb: 68, 131, 68;
|
||||
--btn-active-color: hsl(0, 0%, 100%);
|
||||
--btn-active-bg: hsl(120, 32%, 39%);
|
||||
--btn-active-border-color: hsl(120, 32%, 39%);
|
||||
--btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
|
||||
--btn-disabled-color: hsl(120, 32%, 39%);
|
||||
--btn-disabled-bg: transparent;
|
||||
--btn-disabled-border-color: hsl(120, 32%, 39%);
|
||||
--gradient: none;
|
||||
}
|
||||
|
||||
.btn-outline-info {
|
||||
--btn-color: hsl(207, 49%, 37%);
|
||||
--btn-border-color: hsl(207, 49%, 37%);
|
||||
--btn-hover-color: hsl(0, 0%, 100%);
|
||||
--btn-hover-bg: hsl(207, 49%, 37%);
|
||||
--btn-hover-border-color: hsl(207, 49%, 37%);
|
||||
--btn-focus-shadow-rgb: 48, 99, 141;
|
||||
--btn-active-color: hsl(0, 0%, 100%);
|
||||
--btn-active-bg: hsl(207, 49%, 37%);
|
||||
--btn-active-border-color: hsl(207, 49%, 37%);
|
||||
--btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
|
||||
--btn-disabled-color: hsl(207, 49%, 37%);
|
||||
--btn-disabled-bg: transparent;
|
||||
--btn-disabled-border-color: hsl(207, 49%, 37%);
|
||||
--gradient: none;
|
||||
}
|
||||
|
||||
.btn-outline-warning {
|
||||
--btn-color: hsl(34, 100%, 34%);
|
||||
--btn-border-color: hsl(34, 100%, 34%);
|
||||
--btn-hover-color: hsl(0, 0%, 100%);
|
||||
--btn-hover-bg: hsl(34, 100%, 34%);
|
||||
--btn-hover-border-color: hsl(34, 100%, 34%);
|
||||
--btn-focus-shadow-rgb: 173, 98, 0;
|
||||
--btn-active-color: hsl(0, 0%, 100%);
|
||||
--btn-active-bg: hsl(34, 100%, 34%);
|
||||
--btn-active-border-color: hsl(34, 100%, 34%);
|
||||
--btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
|
||||
--btn-disabled-color: hsl(34, 100%, 34%);
|
||||
--btn-disabled-bg: transparent;
|
||||
--btn-disabled-border-color: hsl(34, 100%, 34%);
|
||||
--gradient: none;
|
||||
}
|
||||
|
||||
.btn-outline-danger {
|
||||
--btn-color: hsl(3, 75%, 37%);
|
||||
--btn-border-color: hsl(3, 75%, 37%);
|
||||
--btn-hover-color: hsl(0, 0%, 100%);
|
||||
--btn-hover-bg: hsl(3, 75%, 37%);
|
||||
--btn-hover-border-color: hsl(3, 75%, 37%);
|
||||
--btn-focus-shadow-rgb: 165, 31, 24;
|
||||
--btn-active-color: hsl(0, 0%, 100%);
|
||||
--btn-active-bg: hsl(3, 75%, 37%);
|
||||
--btn-active-border-color: hsl(3, 75%, 37%);
|
||||
--btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
|
||||
--btn-disabled-color: hsl(3, 75%, 37%);
|
||||
--btn-disabled-bg: transparent;
|
||||
--btn-disabled-border-color: hsl(3, 75%, 37%);
|
||||
--gradient: none;
|
||||
}
|
||||
|
||||
.btn-outline-light {
|
||||
--btn-color: hsl(210, 17%, 98%);
|
||||
--btn-border-color: hsl(210, 17%, 98%);
|
||||
--btn-hover-color: hsl(0, 0%, 0%);
|
||||
--btn-hover-bg: hsl(210, 17%, 98%);
|
||||
--btn-hover-border-color: hsl(210, 17%, 98%);
|
||||
--btn-focus-shadow-rgb: 249, 250, 251;
|
||||
--btn-active-color: hsl(0, 0%, 0%);
|
||||
--btn-active-bg: hsl(210, 17%, 98%);
|
||||
--btn-active-border-color: hsl(210, 17%, 98%);
|
||||
--btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
|
||||
--btn-disabled-color: hsl(210, 17%, 98%);
|
||||
--btn-disabled-bg: transparent;
|
||||
--btn-disabled-border-color: hsl(210, 17%, 98%);
|
||||
--gradient: none;
|
||||
}
|
||||
|
||||
.btn-outline-dark {
|
||||
--btn-color: hsl(210, 10%, 23%);
|
||||
--btn-border-color: hsl(210, 10%, 23%);
|
||||
--btn-hover-color: hsl(0, 0%, 100%);
|
||||
--btn-hover-bg: hsl(210, 10%, 23%);
|
||||
--btn-hover-border-color: hsl(210, 10%, 23%);
|
||||
--btn-focus-shadow-rgb: 53, 59, 65;
|
||||
--btn-active-color: hsl(0, 0%, 100%);
|
||||
--btn-active-bg: hsl(210, 10%, 23%);
|
||||
--btn-active-border-color: hsl(210, 10%, 23%);
|
||||
--btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
|
||||
--btn-disabled-color: hsl(210, 10%, 23%);
|
||||
--btn-disabled-bg: transparent;
|
||||
--btn-disabled-border-color: hsl(210, 10%, 23%);
|
||||
--gradient: none;
|
||||
}
|
||||
|
||||
.btn-link {
|
||||
--btn-font-weight: 400;
|
||||
--btn-color: var(--link-color);
|
||||
--btn-bg: transparent;
|
||||
--btn-border-color: transparent;
|
||||
--btn-hover-color: var(--link-hover-color);
|
||||
--btn-hover-border-color: transparent;
|
||||
--btn-active-color: var(--link-hover-color);
|
||||
--btn-active-border-color: transparent;
|
||||
--btn-disabled-color: hsl(210, 7%, 46%);
|
||||
--btn-disabled-border-color: transparent;
|
||||
--btn-box-shadow: none;
|
||||
--btn-focus-shadow-rgb: 39, 39, 111;
|
||||
text-decoration: underline;
|
||||
}
|
||||
.btn-link:focus-visible {
|
||||
color: var(--btn-color);
|
||||
}
|
||||
.btn-link:hover {
|
||||
color: var(--btn-hover-color);
|
||||
}
|
||||
|
||||
.btn-lg, .btn-group-lg > .btn {
|
||||
--btn-padding-y: 0.5rem;
|
||||
--btn-padding-x: 1rem;
|
||||
--btn-font-size: 1.25rem;
|
||||
--btn-border-radius: 0.3rem;
|
||||
}
|
||||
|
||||
.btn-sm, .btn-group-sm > .btn {
|
||||
--btn-padding-y: 0.25rem;
|
||||
--btn-padding-x: 0.5rem;
|
||||
--btn-font-size: 0.875rem;
|
||||
--btn-border-radius: 0.2rem;
|
||||
}
|
||||
@@ -0,0 +1,126 @@
|
||||
@font-face {
|
||||
font-family: "Roboto";
|
||||
src: url("../../../../../vendor/roboto-fontface/fonts/roboto/Roboto-Regular.woff2") format("woff2"), url("../../../../../vendor/roboto-fontface/fonts/roboto/Roboto-Regular.woff") format("woff");
|
||||
font-weight: 400;
|
||||
font-style: normal;
|
||||
}
|
||||
@font-face {
|
||||
font-family: "Roboto-Regular";
|
||||
src: url("../../../../../vendor/roboto-fontface/fonts/roboto/Roboto-Regular.woff2") format("woff2"), url("../../../../../vendor/roboto-fontface/fonts/roboto/Roboto-Regular.woff") format("woff");
|
||||
}
|
||||
@font-face {
|
||||
font-family: "Roboto";
|
||||
src: url("../../../../../vendor/roboto-fontface/fonts/roboto/Roboto-RegularItalic.woff2") format("woff2"), url("../../../../../vendor/roboto-fontface/fonts/roboto/Roboto-RegularItalic.woff") format("woff");
|
||||
font-weight: 400;
|
||||
font-style: italic;
|
||||
}
|
||||
@font-face {
|
||||
font-family: "Roboto-RegularItalic";
|
||||
src: url("../../../../../vendor/roboto-fontface/fonts/roboto/Roboto-RegularItalic.woff2") format("woff2"), url("../../../../../vendor/roboto-fontface/fonts/roboto/Roboto-RegularItalic.woff") format("woff");
|
||||
}
|
||||
@font-face {
|
||||
font-family: "Roboto";
|
||||
src: url("../../../../../vendor/roboto-fontface/fonts/roboto/Roboto-Light.woff2") format("woff2"), url("../../../../../vendor/roboto-fontface/fonts/roboto/Roboto-Light.woff") format("woff");
|
||||
font-weight: 300;
|
||||
font-style: normal;
|
||||
}
|
||||
@font-face {
|
||||
font-family: "Roboto-Light";
|
||||
src: url("../../../../../vendor/roboto-fontface/fonts/roboto/Roboto-Light.woff2") format("woff2"), url("../../../../../vendor/roboto-fontface/fonts/roboto/Roboto-Light.woff") format("woff");
|
||||
}
|
||||
@font-face {
|
||||
font-family: "Roboto";
|
||||
src: url("../../../../../vendor/roboto-fontface/fonts/roboto/Roboto-LightItalic.woff2") format("woff2"), url("../../../../../vendor/roboto-fontface/fonts/roboto/Roboto-LightItalic.woff") format("woff");
|
||||
font-weight: 300;
|
||||
font-style: italic;
|
||||
}
|
||||
@font-face {
|
||||
font-family: "Roboto-LightItalic";
|
||||
src: url("../../../../../vendor/roboto-fontface/fonts/roboto/Roboto-LightItalic.woff2") format("woff2"), url("../../../../../vendor/roboto-fontface/fonts/roboto/Roboto-LightItalic.woff") format("woff");
|
||||
}
|
||||
@font-face {
|
||||
font-family: "Roboto";
|
||||
src: url("../../../../../vendor/roboto-fontface/fonts/roboto/Roboto-Thin.woff2") format("woff2"), url("../../../../../vendor/roboto-fontface/fonts/roboto/Roboto-Thin.woff") format("woff");
|
||||
font-weight: 100;
|
||||
font-style: normal;
|
||||
}
|
||||
@font-face {
|
||||
font-family: "Roboto-Thin";
|
||||
src: url("../../../../../vendor/roboto-fontface/fonts/roboto/Roboto-Thin.woff2") format("woff2"), url("../../../../../vendor/roboto-fontface/fonts/roboto/Roboto-Thin.woff") format("woff");
|
||||
}
|
||||
@font-face {
|
||||
font-family: "Roboto";
|
||||
src: url("../../../../../vendor/roboto-fontface/fonts/roboto/Roboto-ThinItalic.woff2") format("woff2"), url("../../../../../vendor/roboto-fontface/fonts/roboto/Roboto-ThinItalic.woff") format("woff");
|
||||
font-weight: 100;
|
||||
font-style: italic;
|
||||
}
|
||||
@font-face {
|
||||
font-family: "Roboto-ThinItalic";
|
||||
src: url("../../../../../vendor/roboto-fontface/fonts/roboto/Roboto-ThinItalic.woff2") format("woff2"), url("../../../../../vendor/roboto-fontface/fonts/roboto/Roboto-ThinItalic.woff") format("woff");
|
||||
}
|
||||
@font-face {
|
||||
font-family: "Roboto";
|
||||
src: url("../../../../../vendor/roboto-fontface/fonts/roboto/Roboto-Medium.woff2") format("woff2"), url("../../../../../vendor/roboto-fontface/fonts/roboto/Roboto-Medium.woff") format("woff");
|
||||
font-weight: 500;
|
||||
font-style: normal;
|
||||
}
|
||||
@font-face {
|
||||
font-family: "Roboto-Medium";
|
||||
src: url("../../../../../vendor/roboto-fontface/fonts/roboto/Roboto-Medium.woff2") format("woff2"), url("../../../../../vendor/roboto-fontface/fonts/roboto/Roboto-Medium.woff") format("woff");
|
||||
}
|
||||
@font-face {
|
||||
font-family: "Roboto";
|
||||
src: url("../../../../../vendor/roboto-fontface/fonts/roboto/Roboto-MediumItalic.woff2") format("woff2"), url("../../../../../vendor/roboto-fontface/fonts/roboto/Roboto-MediumItalic.woff") format("woff");
|
||||
font-weight: 500;
|
||||
font-style: italic;
|
||||
}
|
||||
@font-face {
|
||||
font-family: "Roboto-MediumItalic";
|
||||
src: url("../../../../../vendor/roboto-fontface/fonts/roboto/Roboto-MediumItalic.woff2") format("woff2"), url("../../../../../vendor/roboto-fontface/fonts/roboto/Roboto-MediumItalic.woff") format("woff");
|
||||
}
|
||||
@font-face {
|
||||
font-family: "Roboto";
|
||||
src: url("../../../../../vendor/roboto-fontface/fonts/roboto/Roboto-Bold.woff2") format("woff2"), url("../../../../../vendor/roboto-fontface/fonts/roboto/Roboto-Bold.woff") format("woff");
|
||||
font-weight: 700;
|
||||
font-style: normal;
|
||||
}
|
||||
@font-face {
|
||||
font-family: "Roboto-Bold";
|
||||
src: url("../../../../../vendor/roboto-fontface/fonts/roboto/Roboto-Bold.woff2") format("woff2"), url("../../../../../vendor/roboto-fontface/fonts/roboto/Roboto-Bold.woff") format("woff");
|
||||
}
|
||||
@font-face {
|
||||
font-family: "Roboto";
|
||||
src: url("../../../../../vendor/roboto-fontface/fonts/roboto/Roboto-BoldItalic.woff2") format("woff2"), url("../../../../../vendor/roboto-fontface/fonts/roboto/Roboto-BoldItalic.woff") format("woff");
|
||||
font-weight: 700;
|
||||
font-style: italic;
|
||||
}
|
||||
@font-face {
|
||||
font-family: "Roboto-BoldItalic";
|
||||
src: url("../../../../../vendor/roboto-fontface/fonts/roboto/Roboto-BoldItalic.woff2") format("woff2"), url("../../../../../vendor/roboto-fontface/fonts/roboto/Roboto-BoldItalic.woff") format("woff");
|
||||
}
|
||||
@font-face {
|
||||
font-family: "Roboto";
|
||||
src: url("../../../../../vendor/roboto-fontface/fonts/roboto/Roboto-Black.woff2") format("woff2"), url("../../../../../vendor/roboto-fontface/fonts/roboto/Roboto-Black.woff") format("woff");
|
||||
font-weight: 900;
|
||||
font-style: normal;
|
||||
}
|
||||
@font-face {
|
||||
font-family: "Roboto-Black";
|
||||
src: url("../../../../../vendor/roboto-fontface/fonts/roboto/Roboto-Black.woff2") format("woff2"), url("../../../../../vendor/roboto-fontface/fonts/roboto/Roboto-Black.woff") format("woff");
|
||||
}
|
||||
@font-face {
|
||||
font-family: "Roboto";
|
||||
src: url("../../../../../vendor/roboto-fontface/fonts/roboto/Roboto-BlackItalic.woff2") format("woff2"), url("../../../../../vendor/roboto-fontface/fonts/roboto/Roboto-BlackItalic.woff") format("woff");
|
||||
font-weight: 900;
|
||||
font-style: italic;
|
||||
}
|
||||
@font-face {
|
||||
font-family: "Roboto-BlackItalic";
|
||||
src: url("../../../../../vendor/roboto-fontface/fonts/roboto/Roboto-BlackItalic.woff2") format("woff2"), url("../../../../../vendor/roboto-fontface/fonts/roboto/Roboto-BlackItalic.woff") format("woff");
|
||||
}
|
||||
:root {
|
||||
--moko-cassiopeia-font-family-body: "Roboto", sans-serif;
|
||||
--moko-cassiopeia-font-family-headings: "Roboto", sans-serif;
|
||||
--moko-cassiopeia-font-weight-headings: 700;
|
||||
--moko-cassiopeia-font-weight-normal: 400;
|
||||
}
|
||||
163
media/templates/site/moko-cassiopeia/css/offline.css
Normal file
163
media/templates/site/moko-cassiopeia/css/offline.css
Normal file
@@ -0,0 +1,163 @@
|
||||
body {
|
||||
background-image: url(../images/teaser_bg_sm.png);
|
||||
background-repeat: repeat-x;
|
||||
background-attachment: fixed;
|
||||
}
|
||||
.outer {
|
||||
position: relative;
|
||||
display: -webkit-box;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
-webkit-box-orient: vertical;
|
||||
-webkit-box-direction: normal;
|
||||
-ms-flex-direction: column;
|
||||
flex-direction: column;
|
||||
-webkit-box-align: center;
|
||||
-ms-flex-align: center;
|
||||
align-items: center;
|
||||
-webkit-box-pack: center;
|
||||
-ms-flex-pack: center;
|
||||
justify-content: center;
|
||||
width: 100%;
|
||||
min-height: 100vh;
|
||||
padding: 0;
|
||||
overflow: hidden;
|
||||
}
|
||||
@media only screen and (min-width: 600px) {
|
||||
.outer {
|
||||
padding: 3em 0;
|
||||
padding-bottom: 0;
|
||||
padding-top:0;
|
||||
|
||||
}
|
||||
}
|
||||
.offline-card {
|
||||
background-color:white;
|
||||
padding:1em;
|
||||
}
|
||||
@media only screen and (min-width: 600px) {
|
||||
.offline-card {
|
||||
margin: 0 5em;
|
||||
}
|
||||
}
|
||||
footer {
|
||||
padding: 0 6em;
|
||||
color: hsl(0, 0%, 100%);
|
||||
background-color: var(--moko-cassiopeia-color-primary);
|
||||
background-image: -o-linear-gradient(315deg, var(--moko-cassiopeia-color-primary) 0%, var(--moko-cassiopeia-color-hover) 100%);
|
||||
background-image: linear-gradient(135deg, var(--moko-cassiopeia-color-primary) 0%, var(--moko-cassiopeia-color-hover) 100%);
|
||||
border-radius: 5px 5px 0 0;
|
||||
}
|
||||
.footer{
|
||||
margin-top: 0;
|
||||
}
|
||||
.footer .grid-child {
|
||||
padding: 0 0.75em;
|
||||
}
|
||||
.offline-message-card {
|
||||
width: 100%;
|
||||
max-width: 30em;
|
||||
margin: 60px auto;
|
||||
background-color: hsl(0, 0%, 100%);
|
||||
border: 1px solid hsla(0, 0%, 0%, 0.1);
|
||||
border-radius: 5px;
|
||||
-webkit-box-shadow: 0 0 10px hsla(0, 0%, 0%, 0.05);
|
||||
box-shadow: 0 0 10px hsla(0, 0%, 0%, 0.05);
|
||||
}
|
||||
|
||||
.header {
|
||||
position: relative;
|
||||
padding: 1em 2em;
|
||||
margin: 0;
|
||||
color: hsl(0, 0%, 100%);
|
||||
text-align: center;
|
||||
background-color: var(--moko-cassiopeia-color-primary);
|
||||
background-image: -o-linear-gradient(315deg, var(--moko-cassiopeia-color-primary) 0%, var(--moko-cassiopeia-color-hover) 100%);
|
||||
background-image: linear-gradient(135deg, var(--moko-cassiopeia-color-primary) 0%, var(--moko-cassiopeia-color-hover) 100%);
|
||||
border-radius: 5px 5px 0 0;
|
||||
}
|
||||
[dir=rtl] .header {
|
||||
background-image: -o-linear-gradient(315deg, var(--moko-cassiopeia-color-hover) 0%, var(--moko-cassiopeia-color-primary) 100%);
|
||||
background-image: linear-gradient(135deg, var(--moko-cassiopeia-color-hover) 0%, var(--moko-cassiopeia-color-primary) 100%);
|
||||
}
|
||||
|
||||
.login {
|
||||
padding: 40px 20px 20px;
|
||||
background-color: var(--nav-bg-color);
|
||||
}
|
||||
|
||||
.form-control {
|
||||
max-width: none;
|
||||
}
|
||||
|
||||
img {
|
||||
height: auto;
|
||||
margin: 5px 0;
|
||||
border: 0;
|
||||
}
|
||||
|
||||
form,
|
||||
fieldset {
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
label {
|
||||
display: block;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
input[type=text],
|
||||
input[type=password] {
|
||||
-webkit-box-sizing: border-box;
|
||||
box-sizing: border-box;
|
||||
width: 100%;
|
||||
height: auto;
|
||||
}
|
||||
|
||||
input {
|
||||
margin: 0.5em 0 1em;
|
||||
}
|
||||
.offline-card a {
|
||||
}
|
||||
.logo {
|
||||
max-width: 300px;
|
||||
max-height: 200px;
|
||||
width: auto;
|
||||
height: auto;
|
||||
}
|
||||
.offline-image {
|
||||
max-height: 300px;
|
||||
}
|
||||
#offline-login-link{
|
||||
background-image: linear-gradient(to top, rgba(255,0,0,0), rgba(255,255,255,1));
|
||||
margin: 0 5em;
|
||||
}
|
||||
.logo-icon {
|
||||
margin: 0 auto;
|
||||
width: 37px;
|
||||
height:37px;
|
||||
z-index: 1;
|
||||
padding: 12px;
|
||||
margin-top: 2px;
|
||||
background-color: hsl(0, 0%, 100%);
|
||||
border: 1px solid hsla(0, 0%, 0%, 0.75);
|
||||
border-radius: 50%;
|
||||
-webkit-box-shadow: 0 0 5px hsla(0, 0%, 0%, 0.075);
|
||||
box-shadow: 0 0 5px hsla(0, 0%, 0%, 0.075);
|
||||
-webkit-transform: translate(-50%, -50%);
|
||||
transform: translate(-50%, -50%);
|
||||
}
|
||||
|
||||
.logo-icon svg {
|
||||
display: block;
|
||||
width: 38px;
|
||||
}
|
||||
a.social-icon {
|
||||
ext-decoration:none;
|
||||
border:0;width:36px;
|
||||
height:36px;padding:2px;
|
||||
margin:5px;
|
||||
color:#000;
|
||||
border-radius:50%;background-color:#ffffff;
|
||||
}
|
||||
@@ -0,0 +1,49 @@
|
||||
.js-stools-container-bar {
|
||||
padding: 10px 20px;
|
||||
}
|
||||
.js-stools-container-bar .btn-toolbar {
|
||||
-webkit-box-pack: end;
|
||||
-ms-flex-pack: end;
|
||||
justify-content: flex-end;
|
||||
}
|
||||
.js-stools-container-bar .btn-toolbar > * {
|
||||
margin: 4px 0;
|
||||
-webkit-margin-end: 8px;
|
||||
margin-inline-end: 8px;
|
||||
}
|
||||
.js-stools-container-bar .btn-toolbar .js-stools-btn-clear {
|
||||
background-color: hsl(207, 49%, 37%);
|
||||
border: 0;
|
||||
}
|
||||
.js-stools-container-bar .ordering-select {
|
||||
display: -webkit-box;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.js-stools-container-filters {
|
||||
display: none;
|
||||
padding: 0 20px;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
.js-stools-container-filters-visible {
|
||||
display: grid;
|
||||
grid-gap: 8px;
|
||||
grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
|
||||
padding: 10px;
|
||||
background-color: hsl(0, 0%, 100%);
|
||||
}
|
||||
.js-stools-container-filters > * {
|
||||
margin: 4px 0;
|
||||
-webkit-margin-end: 8px;
|
||||
margin-inline-end: 8px;
|
||||
}
|
||||
|
||||
.js-stools-field-list + .js-stools-field-list {
|
||||
-webkit-margin-start: 8px;
|
||||
margin-inline-start: 8px;
|
||||
}
|
||||
|
||||
.js-stools-field-selector .form-select {
|
||||
width: auto;
|
||||
}
|
||||
14657
media/templates/site/moko-cassiopeia/css/template-rtl.css
Normal file
14657
media/templates/site/moko-cassiopeia/css/template-rtl.css
Normal file
File diff suppressed because it is too large
Load Diff
15384
media/templates/site/moko-cassiopeia/css/template.css
Normal file
15384
media/templates/site/moko-cassiopeia/css/template.css
Normal file
File diff suppressed because it is too large
Load Diff
499
media/templates/site/moko-cassiopeia/css/vendor/choicesjs/choices.css
vendored
Normal file
499
media/templates/site/moko-cassiopeia/css/vendor/choicesjs/choices.css
vendored
Normal file
@@ -0,0 +1,499 @@
|
||||
@charset "UTF-8";
|
||||
/* ===============================
|
||||
= Choices =
|
||||
=============================== */
|
||||
.choices {
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
margin-bottom: 24px;
|
||||
font-size: 16px;
|
||||
}
|
||||
.choices:focus {
|
||||
outline: none;
|
||||
}
|
||||
.choices:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
.choices.is-open {
|
||||
overflow: initial;
|
||||
}
|
||||
.choices.is-disabled .choices__inner,
|
||||
.choices.is-disabled .choices__input {
|
||||
background-color: #eaeaea;
|
||||
cursor: not-allowed;
|
||||
-webkit-user-select: none;
|
||||
-moz-user-select: none;
|
||||
-ms-user-select: none;
|
||||
user-select: none;
|
||||
}
|
||||
.choices.is-disabled .choices__item {
|
||||
cursor: not-allowed;
|
||||
}
|
||||
.choices [hidden] {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
.choices[data-type*=select-one] {
|
||||
cursor: pointer;
|
||||
}
|
||||
.choices[data-type*=select-one] .choices__inner {
|
||||
padding-bottom: 7.5px;
|
||||
}
|
||||
.choices[data-type*=select-one] .choices__input {
|
||||
display: block;
|
||||
width: 100%;
|
||||
padding: 10px;
|
||||
border-bottom: 1px solid #ddd;
|
||||
background-color: #fff;
|
||||
margin: 0;
|
||||
}
|
||||
.choices[data-type*=select-one] .choices__button {
|
||||
background-image: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjEiIGhlaWdodD0iMjEiIHZpZXdCb3g9IjAgMCAyMSAyMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48ZyBmaWxsPSIjMDAwIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiPjxwYXRoIGQ9Ik0yLjU5Mi4wNDRsMTguMzY0IDE4LjM2NC0yLjU0OCAyLjU0OEwuMDQ0IDIuNTkyeiIvPjxwYXRoIGQ9Ik0wIDE4LjM2NEwxOC4zNjQgMGwyLjU0OCAyLjU0OEwyLjU0OCAyMC45MTJ6Ii8+PC9nPjwvc3ZnPg==");
|
||||
padding: 0;
|
||||
background-size: 8px;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
right: 0;
|
||||
margin-top: -10px;
|
||||
margin-right: 25px;
|
||||
height: 20px;
|
||||
width: 20px;
|
||||
border-radius: 10em;
|
||||
opacity: 0.25;
|
||||
}
|
||||
.choices[data-type*=select-one] .choices__button:hover, .choices[data-type*=select-one] .choices__button:focus {
|
||||
opacity: 1;
|
||||
}
|
||||
.choices[data-type*=select-one] .choices__button:focus {
|
||||
-webkit-box-shadow: 0 0 0 2px #00bcd4;
|
||||
box-shadow: 0 0 0 2px #00bcd4;
|
||||
}
|
||||
.choices[data-type*=select-one] .choices__item[data-value=""] .choices__button {
|
||||
display: none;
|
||||
}
|
||||
.choices[data-type*=select-one]::after {
|
||||
content: "";
|
||||
height: 0;
|
||||
width: 0;
|
||||
border-style: solid;
|
||||
border-color: #333 transparent transparent transparent;
|
||||
border-width: 5px;
|
||||
position: absolute;
|
||||
right: 11.5px;
|
||||
top: 50%;
|
||||
margin-top: -2.5px;
|
||||
pointer-events: none;
|
||||
}
|
||||
.choices[data-type*=select-one].is-open::after {
|
||||
border-color: transparent transparent #333 transparent;
|
||||
margin-top: -7.5px;
|
||||
}
|
||||
.choices[data-type*=select-one][dir=rtl]::after {
|
||||
left: 11.5px;
|
||||
right: auto;
|
||||
}
|
||||
.choices[data-type*=select-one][dir=rtl] .choices__button {
|
||||
right: auto;
|
||||
left: 0;
|
||||
margin-left: 25px;
|
||||
margin-right: 0;
|
||||
}
|
||||
|
||||
.choices[data-type*=select-multiple] .choices__inner,
|
||||
.choices[data-type*=text] .choices__inner {
|
||||
cursor: text;
|
||||
}
|
||||
.choices[data-type*=select-multiple] .choices__button,
|
||||
.choices[data-type*=text] .choices__button {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
margin-top: 0;
|
||||
margin-right: -4px;
|
||||
margin-bottom: 0;
|
||||
margin-left: 8px;
|
||||
padding-left: 16px;
|
||||
border-left: 1px solid #008fa1;
|
||||
background-image: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjEiIGhlaWdodD0iMjEiIHZpZXdCb3g9IjAgMCAyMSAyMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48ZyBmaWxsPSIjRkZGIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiPjxwYXRoIGQ9Ik0yLjU5Mi4wNDRsMTguMzY0IDE4LjM2NC0yLjU0OCAyLjU0OEwuMDQ0IDIuNTkyeiIvPjxwYXRoIGQ9Ik0wIDE4LjM2NEwxOC4zNjQgMGwyLjU0OCAyLjU0OEwyLjU0OCAyMC45MTJ6Ii8+PC9nPjwvc3ZnPg==");
|
||||
background-size: 8px;
|
||||
width: 8px;
|
||||
line-height: 1;
|
||||
opacity: 0.75;
|
||||
border-radius: 0;
|
||||
}
|
||||
.choices[data-type*=select-multiple] .choices__button:hover, .choices[data-type*=select-multiple] .choices__button:focus,
|
||||
.choices[data-type*=text] .choices__button:hover,
|
||||
.choices[data-type*=text] .choices__button:focus {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.choices__inner {
|
||||
display: inline-block;
|
||||
vertical-align: top;
|
||||
width: 100%;
|
||||
background-color: #f9f9f9;
|
||||
padding: 7.5px 7.5px 3.75px;
|
||||
border: 1px solid #ddd;
|
||||
border-radius: 2.5px;
|
||||
font-size: 14px;
|
||||
min-height: 44px;
|
||||
overflow: hidden;
|
||||
}
|
||||
.is-focused .choices__inner, .is-open .choices__inner {
|
||||
border-color: #b7b7b7;
|
||||
}
|
||||
.is-open .choices__inner {
|
||||
border-radius: 2.5px 2.5px 0 0;
|
||||
}
|
||||
.is-flipped.is-open .choices__inner {
|
||||
border-radius: 0 0 2.5px 2.5px;
|
||||
}
|
||||
|
||||
.choices__list {
|
||||
margin: 0;
|
||||
padding-left: 0;
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
.choices__list--single {
|
||||
display: inline-block;
|
||||
padding: 4px 16px 4px 4px;
|
||||
width: 100%;
|
||||
}
|
||||
[dir=rtl] .choices__list--single {
|
||||
padding-right: 4px;
|
||||
padding-left: 16px;
|
||||
}
|
||||
.choices__list--single .choices__item {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.choices__list--multiple {
|
||||
display: inline;
|
||||
}
|
||||
.choices__list--multiple .choices__item {
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
border-radius: 20px;
|
||||
padding: 4px 10px;
|
||||
font-size: 12px;
|
||||
font-weight: 500;
|
||||
margin-right: 3.75px;
|
||||
margin-bottom: 3.75px;
|
||||
background-color: #00bcd4;
|
||||
border: 1px solid #00a5bb;
|
||||
color: #fff;
|
||||
word-break: break-all;
|
||||
-webkit-box-sizing: border-box;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
.choices__list--multiple .choices__item[data-deletable] {
|
||||
padding-right: 5px;
|
||||
}
|
||||
[dir=rtl] .choices__list--multiple .choices__item {
|
||||
margin-right: 0;
|
||||
margin-left: 3.75px;
|
||||
}
|
||||
.choices__list--multiple .choices__item.is-highlighted {
|
||||
background-color: #00a5bb;
|
||||
border: 1px solid #008fa1;
|
||||
}
|
||||
.is-disabled .choices__list--multiple .choices__item {
|
||||
background-color: #aaaaaa;
|
||||
border: 1px solid #919191;
|
||||
}
|
||||
|
||||
.choices__list--dropdown {
|
||||
visibility: hidden;
|
||||
z-index: 1;
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
background-color: #fff;
|
||||
border: 1px solid #ddd;
|
||||
top: 100%;
|
||||
margin-top: -1px;
|
||||
border-bottom-left-radius: 2.5px;
|
||||
border-bottom-right-radius: 2.5px;
|
||||
overflow: hidden;
|
||||
word-break: break-all;
|
||||
will-change: visibility;
|
||||
}
|
||||
.choices__list--dropdown.is-active {
|
||||
visibility: visible;
|
||||
}
|
||||
.is-open .choices__list--dropdown {
|
||||
border-color: #b7b7b7;
|
||||
}
|
||||
.is-flipped .choices__list--dropdown {
|
||||
top: auto;
|
||||
bottom: 100%;
|
||||
margin-top: 0;
|
||||
margin-bottom: -1px;
|
||||
border-radius: 0.25rem 0.25rem 0 0;
|
||||
}
|
||||
.choices__list--dropdown .choices__list {
|
||||
position: relative;
|
||||
max-height: 300px;
|
||||
overflow: auto;
|
||||
-webkit-overflow-scrolling: touch;
|
||||
will-change: scroll-position;
|
||||
}
|
||||
.choices__list--dropdown .choices__item {
|
||||
position: relative;
|
||||
padding: 10px;
|
||||
font-size: 14px;
|
||||
}
|
||||
[dir=rtl] .choices__list--dropdown .choices__item {
|
||||
text-align: right;
|
||||
}
|
||||
@media (min-width: 640px) {
|
||||
.choices__list--dropdown .choices__item--selectable {
|
||||
padding-right: 100px;
|
||||
}
|
||||
.choices__list--dropdown .choices__item--selectable::after {
|
||||
content: attr(data-select-text);
|
||||
font-size: 12px;
|
||||
opacity: 0;
|
||||
position: absolute;
|
||||
right: 10px;
|
||||
top: 50%;
|
||||
-webkit-transform: translateY(-50%);
|
||||
transform: translateY(-50%);
|
||||
}
|
||||
[dir=rtl] .choices__list--dropdown .choices__item--selectable {
|
||||
text-align: right;
|
||||
padding-left: 100px;
|
||||
padding-right: 10px;
|
||||
}
|
||||
[dir=rtl] .choices__list--dropdown .choices__item--selectable::after {
|
||||
right: auto;
|
||||
left: 10px;
|
||||
}
|
||||
}
|
||||
.choices__list--dropdown .choices__item--selectable.is-highlighted {
|
||||
background-color: #f2f2f2;
|
||||
}
|
||||
.choices__list--dropdown .choices__item--selectable.is-highlighted::after {
|
||||
opacity: 0.5;
|
||||
}
|
||||
|
||||
.choices__item {
|
||||
cursor: default;
|
||||
}
|
||||
|
||||
.choices__item--selectable {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.choices__item--disabled {
|
||||
cursor: not-allowed;
|
||||
-webkit-user-select: none;
|
||||
-moz-user-select: none;
|
||||
-ms-user-select: none;
|
||||
user-select: none;
|
||||
opacity: 0.5;
|
||||
}
|
||||
|
||||
.choices__heading {
|
||||
font-weight: 600;
|
||||
font-size: 12px;
|
||||
padding: 10px;
|
||||
border-bottom: 1px solid #f7f7f7;
|
||||
color: gray;
|
||||
}
|
||||
|
||||
.choices__button {
|
||||
text-indent: -9999px;
|
||||
-webkit-appearance: none;
|
||||
-moz-appearance: none;
|
||||
appearance: none;
|
||||
border: 0;
|
||||
background-color: transparent;
|
||||
background-repeat: no-repeat;
|
||||
background-position: center;
|
||||
cursor: pointer;
|
||||
}
|
||||
.choices__button:focus {
|
||||
outline: none;
|
||||
}
|
||||
|
||||
.choices__input {
|
||||
display: inline-block;
|
||||
vertical-align: baseline;
|
||||
background-color: #f9f9f9;
|
||||
font-size: 14px;
|
||||
margin-bottom: 5px;
|
||||
border: 0;
|
||||
border-radius: 0;
|
||||
max-width: 100%;
|
||||
padding: 4px 0 4px 2px;
|
||||
}
|
||||
.choices__input:focus {
|
||||
outline: 0;
|
||||
}
|
||||
[dir=rtl] .choices__input {
|
||||
padding-right: 2px;
|
||||
padding-left: 0;
|
||||
}
|
||||
|
||||
.choices__placeholder {
|
||||
opacity: 0.5;
|
||||
}
|
||||
|
||||
/* ===== End of Choices ====== */
|
||||
.choices {
|
||||
border: 1px solid hsl(210, 14%, 83%);
|
||||
border-radius: 0.25rem;
|
||||
}
|
||||
.choices.is-focused {
|
||||
border-color: #8894aa;
|
||||
-webkit-box-shadow: 0 0 0 0.25rem rgba(1, 1, 86, 0.25);
|
||||
box-shadow: 0 0 0 0.25rem rgba(1, 1, 86, 0.25);
|
||||
}
|
||||
|
||||
.choices__inner {
|
||||
padding: 0.4rem 1rem;
|
||||
margin-bottom: 0;
|
||||
font-size: 1rem;
|
||||
border: none;
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
.choices__input {
|
||||
padding: 0;
|
||||
margin-bottom: 0;
|
||||
font-size: 1rem;
|
||||
background-color: transparent;
|
||||
}
|
||||
.choices__input::-webkit-input-placeholder {
|
||||
color: hsl(210, 9%, 31%);
|
||||
opacity: 1;
|
||||
}
|
||||
.choices__input::-moz-placeholder {
|
||||
color: hsl(210, 9%, 31%);
|
||||
opacity: 1;
|
||||
}
|
||||
.choices__input:-ms-input-placeholder {
|
||||
color: hsl(210, 9%, 31%);
|
||||
opacity: 1;
|
||||
}
|
||||
.choices__input::-ms-input-placeholder {
|
||||
color: hsl(210, 9%, 31%);
|
||||
opacity: 1;
|
||||
}
|
||||
.choices__input::placeholder {
|
||||
color: hsl(210, 9%, 31%);
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.choices__list--dropdown {
|
||||
z-index: 1060;
|
||||
}
|
||||
|
||||
.choices__list--multiple .choices__item {
|
||||
position: relative;
|
||||
margin: 2px;
|
||||
background-color: var(--moko-cassiopeia-color-primary);
|
||||
-webkit-margin-end: 2px;
|
||||
margin-inline-end: 2px;
|
||||
border: 0;
|
||||
border-radius: 0.25rem;
|
||||
}
|
||||
.choices__list--multiple .choices__item.is-highlighted {
|
||||
background-color: var(--moko-cassiopeia-color-primary);
|
||||
opacity: 0.9;
|
||||
}
|
||||
|
||||
.choices .choices__list--dropdown .choices__item {
|
||||
-webkit-padding-end: 10px;
|
||||
padding-inline-end: 10px;
|
||||
}
|
||||
.choices .choices__list--dropdown .choices__item--selectable::after {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.choices__button_joomla {
|
||||
position: relative;
|
||||
padding: 0 10px;
|
||||
color: inherit;
|
||||
text-indent: -9999px;
|
||||
cursor: pointer;
|
||||
background: none;
|
||||
border: 0;
|
||||
opacity: 0.5;
|
||||
-webkit-appearance: none;
|
||||
-moz-appearance: none;
|
||||
appearance: none;
|
||||
}
|
||||
.choices__button_joomla::before {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
display: block;
|
||||
text-align: center;
|
||||
text-indent: 0;
|
||||
content: "×";
|
||||
}
|
||||
.choices__button_joomla:hover, .choices__button_joomla:focus {
|
||||
opacity: 1;
|
||||
}
|
||||
.choices__button_joomla:focus {
|
||||
outline: none;
|
||||
}
|
||||
|
||||
.choices[data-type*=select-one] .choices__inner,
|
||||
.choices[data-type*=select-multiple] .choices__inner {
|
||||
-webkit-padding-end: 3rem;
|
||||
padding-inline-end: 3rem;
|
||||
cursor: pointer;
|
||||
background: url("../../../images/select-bg.svg") no-repeat 100%/116rem;
|
||||
background-color: hsl(210, 16%, 93%);
|
||||
}
|
||||
[dir=rtl] .choices[data-type*=select-one] .choices__inner,
|
||||
[dir=rtl] .choices[data-type*=select-multiple] .choices__inner {
|
||||
background: url("../../../images/select-bg-rtl.svg") no-repeat 0/116rem;
|
||||
background-color: hsl(210, 16%, 93%);
|
||||
}
|
||||
|
||||
.choices[data-type*=select-one] .choices__item {
|
||||
display: -webkit-box;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
-webkit-box-pack: justify;
|
||||
-ms-flex-pack: justify;
|
||||
justify-content: space-between;
|
||||
}
|
||||
.choices[data-type*=select-one] .choices__button_joomla {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
inset-inline-end: 0;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
padding: 0;
|
||||
-webkit-margin-before: -10px;
|
||||
margin-block-start: -10px;
|
||||
-webkit-margin-end: 50px;
|
||||
margin-inline-end: 50px;
|
||||
border-radius: 10em;
|
||||
opacity: 0.5;
|
||||
}
|
||||
.choices[data-type*=select-one] .choices__button_joomla:hover, .choices[data-type*=select-one] .choices__button_joomla:focus {
|
||||
opacity: 1;
|
||||
}
|
||||
.choices[data-type*=select-one] .choices__button_joomla:focus {
|
||||
-webkit-box-shadow: 0 0 0 2px #00bcd4;
|
||||
box-shadow: 0 0 0 2px #00bcd4;
|
||||
}
|
||||
.choices[data-type*=select-one]::after {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.choices[data-type*=select-multiple] .choices__input,
|
||||
.choices[data-type*=text] .choices__input {
|
||||
padding: 0.2rem 0;
|
||||
}
|
||||
|
||||
.choices__heading {
|
||||
font-size: 1.2rem;
|
||||
}
|
||||
146
media/templates/site/moko-cassiopeia/css/vendor/joomla-custom-elements/joomla-alert.css
vendored
Normal file
146
media/templates/site/moko-cassiopeia/css/vendor/joomla-custom-elements/joomla-alert.css
vendored
Normal file
@@ -0,0 +1,146 @@
|
||||
@import "../../../../../../vendor/joomla-custom-elements/css/joomla-alert.css";
|
||||
#system-message-container:empty {
|
||||
display: none;
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
#system-message-container joomla-alert {
|
||||
position: relative;
|
||||
display: -webkit-box;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
width: 100%;
|
||||
min-width: 16rem;
|
||||
padding: 0;
|
||||
margin-bottom: 0;
|
||||
color: var(--gray-dark);
|
||||
background-color: hsl(0, 0%, 100%);
|
||||
border: 1px solid var(--alert-accent-color, transparent);
|
||||
border-radius: 0.25rem;
|
||||
-webkit-transition: opacity 0.15s linear;
|
||||
-o-transition: opacity 0.15s linear;
|
||||
transition: opacity 0.15s linear;
|
||||
}
|
||||
#system-message-container joomla-alert + * {
|
||||
margin-top: 1rem;
|
||||
}
|
||||
#system-message-container joomla-alert .alert-heading {
|
||||
display: -webkit-box;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
-webkit-box-orient: vertical;
|
||||
-webkit-box-direction: normal;
|
||||
-ms-flex-direction: column;
|
||||
flex-direction: column;
|
||||
-webkit-box-pack: center;
|
||||
-ms-flex-pack: center;
|
||||
justify-content: center;
|
||||
-ms-flex-line-pack: center;
|
||||
align-content: center;
|
||||
padding: 0.8rem;
|
||||
color: var(--alert-heading-text);
|
||||
background: var(--alert-accent-color, transparent);
|
||||
}
|
||||
#system-message-container joomla-alert .alert-heading .message::before,
|
||||
#system-message-container joomla-alert .alert-heading .success::before {
|
||||
display: inline-block;
|
||||
width: 1em;
|
||||
height: 1em;
|
||||
content: "";
|
||||
background-image: url('data:image/svg+xml;utf8,<svg width="1792" height="1792" viewBox="0 0 1792 1792" xmlns="http://www.w3.org/2000/svg"><path fill="rgba(255, 255, 255, .95)" d="M1299 813l-422 422q-19 19-45 19t-45-19l-294-294q-19-19-19-45t19-45l102-102q19-19 45-19t45 19l147 147 275-275q19-19 45-19t45 19l102 102q19 19 19 45t-19 45zm141 83q0-148-73-273t-198-198-273-73-273 73-198 198-73 273 73 273 198 198 273 73 273-73 198-198 73-273zm224 0q0 209-103 385.5t-279.5 279.5-385.5 103-385.5-103-279.5-279.5-103-385.5 103-385.5 279.5-279.5 385.5-103 385.5 103 279.5 279.5 103 385.5z"/></svg>');
|
||||
background-size: 100%;
|
||||
}
|
||||
#system-message-container joomla-alert .alert-heading .notice::before,
|
||||
#system-message-container joomla-alert .alert-heading .info::before {
|
||||
display: inline-block;
|
||||
width: 1em;
|
||||
height: 1em;
|
||||
content: "";
|
||||
background-image: url('data:image/svg+xml;utf8,<svg width="1792" height="1792" viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg"><path fill="rgba(255, 255, 255, .95)" d="M256 8C119.043 8 8 119.083 8 256c0 136.997 111.043 248 248 248s248-111.003 248-248C504 119.083 392.957 8 256 8zm0 110c23.196 0 42 18.804 42 42s-18.804 42-42 42-42-18.804-42-42 18.804-42 42-42zm56 254c0 6.627-5.373 12-12 12h-88c-6.627 0-12-5.373-12-12v-24c0-6.627 5.373-12 12-12h12v-64h-12c-6.627 0-12-5.373-12-12v-24c0-6.627 5.373-12 12-12h64c6.627 0 12 5.373 12 12v100h12c6.627 0 12 5.373 12 12v24z"/></svg>');
|
||||
background-size: 100%;
|
||||
}
|
||||
#system-message-container joomla-alert .alert-heading .warning::before {
|
||||
display: inline-block;
|
||||
width: 1em;
|
||||
height: 1em;
|
||||
content: "";
|
||||
background-image: url('data:image/svg+xml;utf8,<svg width="1792" height="1792" viewBox="0 0 1792 1792" xmlns="http://www.w3.org/2000/svg"><path fill="rgba(255, 255, 255, .95)" d="M1024 1375v-190q0-14-9.5-23.5t-22.5-9.5h-192q-13 0-22.5 9.5t-9.5 23.5v190q0 14 9.5 23.5t22.5 9.5h192q13 0 22.5-9.5t9.5-23.5zm-2-374l18-459q0-12-10-19-13-11-24-11h-220q-11 0-24 11-10 7-10 21l17 457q0 10 10 16.5t24 6.5h185q14 0 23.5-6.5t10.5-16.5zm-14-934l768 1408q35 63-2 126-17 29-46.5 46t-63.5 17h-1536q-34 0-63.5-17t-46.5-46q-37-63-2-126l768-1408q17-31 47-49t65-18 65 18 47 49z"/></svg>');
|
||||
background-size: 100%;
|
||||
}
|
||||
#system-message-container joomla-alert .alert-heading .error::before,
|
||||
#system-message-container joomla-alert .alert-heading .danger::before {
|
||||
display: inline-block;
|
||||
width: 1em;
|
||||
height: 1em;
|
||||
content: "";
|
||||
background-image: url('data:image/svg+xml;utf8,<svg width="1792" height="1792" viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg"><path fill="rgba(255, 255, 255, .95)" d="M256 8C119 8 8 119 8 256s111 248 248 248 248-111 248-248S393 8 256 8zm0 448c-110.5 0-200-89.5-200-200S145.5 56 256 56s200 89.5 200 200-89.5 200-200 200zm101.8-262.2L295.6 256l62.2 62.2c4.7 4.7 4.7 12.3 0 17l-22.6 22.6c-4.7 4.7-12.3 4.7-17 0L256 295.6l-62.2 62.2c-4.7 4.7-12.3 4.7-17 0l-22.6-22.6c-4.7-4.7-4.7-12.3 0-17l62.2-62.2-62.2-62.2c-4.7-4.7-4.7-12.3 0-17l22.6-22.6c4.7-4.7 12.3-4.7 17 0l62.2 62.2 62.2-62.2c4.7-4.7 12.3-4.7 17 0l22.6 22.6c4.7 4.7 4.7 12.3 0 17z"/></svg>');
|
||||
background-size: 100%;
|
||||
}
|
||||
#system-message-container joomla-alert .alert-wrapper {
|
||||
width: 100%;
|
||||
}
|
||||
#system-message-container joomla-alert .alert-link {
|
||||
color: var(--success, inherit);
|
||||
}
|
||||
#system-message-container joomla-alert[type=success], #system-message-container joomla-alert[type=message] {
|
||||
--alert-accent-color: var(--success);
|
||||
--alert-heading-text: hsla(0, 0%, 100%, .95);
|
||||
--alert-close-button: var(--success);
|
||||
background-color: hsl(0, 0%, 100%);
|
||||
}
|
||||
#system-message-container joomla-alert[type=info], #system-message-container joomla-alert[type=notice] {
|
||||
--alert-accent-color: var(--info);
|
||||
--alert-heading-text: hsla(0, 0%, 100%, .95);
|
||||
--alert-close-button: var(--info);
|
||||
background-color: hsl(0, 0%, 100%);
|
||||
}
|
||||
#system-message-container joomla-alert[type=warning] {
|
||||
--alert-accent-color: var(--warning);
|
||||
--alert-heading-text: hsla(0, 0%, 100%, .95);
|
||||
--alert-close-button: var(--warning);
|
||||
background-color: hsl(0, 0%, 100%);
|
||||
}
|
||||
#system-message-container joomla-alert[type=error], #system-message-container joomla-alert[type=danger] {
|
||||
--alert-accent-color: var(--danger);
|
||||
--alert-heading-text: hsla(0, 0%, 100%, .95);
|
||||
--alert-close-button: var(--danger);
|
||||
background-color: hsl(0, 0%, 100%);
|
||||
}
|
||||
#system-message-container joomla-alert .joomla-alert--close,
|
||||
#system-message-container joomla-alert .joomla-alert-button--close {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
padding: 0.2rem 0.8rem;
|
||||
font-size: 2rem;
|
||||
color: var(--alert-close-button);
|
||||
background: none;
|
||||
border: 0;
|
||||
opacity: 1;
|
||||
}
|
||||
#system-message-container joomla-alert .joomla-alert--close:hover, #system-message-container joomla-alert .joomla-alert--close:focus,
|
||||
#system-message-container joomla-alert .joomla-alert-button--close:hover,
|
||||
#system-message-container joomla-alert .joomla-alert-button--close:focus {
|
||||
text-decoration: none;
|
||||
cursor: pointer;
|
||||
opacity: 0.75;
|
||||
}
|
||||
[dir=rtl] #system-message-container joomla-alert .joomla-alert--close,
|
||||
[dir=rtl] #system-message-container joomla-alert .joomla-alert-button--close {
|
||||
right: auto;
|
||||
left: 0;
|
||||
padding: 0.2rem 0.6rem;
|
||||
}
|
||||
#system-message-container joomla-alert div {
|
||||
font-size: 1rem;
|
||||
}
|
||||
#system-message-container joomla-alert div .alert-message {
|
||||
padding: 0.3rem 2rem 0.3rem 0.3rem;
|
||||
margin: 0.5rem;
|
||||
}
|
||||
[dir=rtl] #system-message-container joomla-alert div .alert-message {
|
||||
padding: 0.3rem 0.3rem 0.3rem 2rem;
|
||||
}
|
||||
#system-message-container joomla-alert div .alert-message:not(:first-of-type) {
|
||||
border-top: 1px solid var(--alert-accent-color);
|
||||
}
|
||||
617
media/templates/site/moko-cassiopeia/css/vmbasic.css
Normal file
617
media/templates/site/moko-cassiopeia/css/vmbasic.css
Normal file
@@ -0,0 +1,617 @@
|
||||
/* Bootstrap */
|
||||
.dropdown-menu {
|
||||
border-radius: 0;
|
||||
--bs-dropdown-zindex: 1030;
|
||||
}
|
||||
|
||||
.dropdown-toggle {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.dropdown-toggle::after {
|
||||
content: "";
|
||||
border: none;
|
||||
background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="10" height="10" fill="currentColor" class="bi bi-chevron-down" viewBox="0 0 16 16"><path fill-rule="evenodd" d="M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708"/></svg>');
|
||||
background-repeat: no-repeat;
|
||||
width: 10px;
|
||||
height: 10px
|
||||
}
|
||||
|
||||
.btn {
|
||||
border-radius: 0
|
||||
}
|
||||
|
||||
.input-group .btn {
|
||||
font-size: 14px;
|
||||
border-radius: var(--bs-border-radius);
|
||||
}
|
||||
|
||||
.btn-primary {
|
||||
--bs-btn-bg: #333;
|
||||
--bs-btn-border-color: #333;
|
||||
--bs-btn-hover-bg: #555;
|
||||
--bs-btn-hover-border-color: #555;
|
||||
--bs-btn-focus-shadow-rgb: 49, 132, 253;
|
||||
--bs-btn-active-bg: #555;
|
||||
--bs-btn-active-border-color: #555;
|
||||
--bs-btn-disabled-bg: #A0A0A0;
|
||||
--bs-btn-disabled-border-color: #A0A0A0;
|
||||
}
|
||||
|
||||
.btn-secondary {
|
||||
--bs-btn-color: #333;
|
||||
--bs-btn-bg: #EFEFEF;
|
||||
--bs-btn-border-color: #EFEFEF;
|
||||
--bs-btn-hover-bg: #333;
|
||||
--bs-btn-hover-border-color: #333;
|
||||
--bs-btn-active-bg: #333;
|
||||
--bs-btn-active-border-color: #333;
|
||||
}
|
||||
|
||||
.btn-check:checked + .btn, .btn.active, .btn.show, .btn:first-child:active, :not(.btn-check) + .btn:active {
|
||||
color: #A0A0A0;
|
||||
}
|
||||
|
||||
.text-secondary {
|
||||
color: #A0A0A0 !important;
|
||||
}
|
||||
|
||||
.form-control, .form-select {
|
||||
font-size: 14px
|
||||
}
|
||||
|
||||
form .form-control, form .form-select {
|
||||
border-color: #C7C7C7
|
||||
}
|
||||
|
||||
/* General styles */
|
||||
body {
|
||||
font-size: 15px;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
a, .btn-link {
|
||||
color: #A0A0A0;
|
||||
text-decoration: none
|
||||
}
|
||||
|
||||
a:hover, .btn-link:hover {
|
||||
color: #333;
|
||||
}
|
||||
|
||||
img {
|
||||
max-width: 100%;
|
||||
height: auto;
|
||||
aspect-ratio: attr(width) / attr(height);
|
||||
}
|
||||
|
||||
h1, h2, h3, h4, h5, h6 {
|
||||
font-weight: 600;
|
||||
margin-bottom: 1em;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: 32px
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-size: 28px
|
||||
}
|
||||
|
||||
h3 {
|
||||
font-size: 25px
|
||||
}
|
||||
|
||||
h4 {
|
||||
font-size: 22px
|
||||
}
|
||||
|
||||
h5 {
|
||||
font-size: 20px
|
||||
}
|
||||
|
||||
h6 {
|
||||
font-size: 18px
|
||||
}
|
||||
|
||||
.toolbar {
|
||||
font-size: 14px;
|
||||
padding: 9px 0;
|
||||
background-color: #EFEFEF
|
||||
}
|
||||
|
||||
.toolbar a, .toolbar .btn-link {
|
||||
color: inherit;
|
||||
}
|
||||
|
||||
.toolbar .btn svg {
|
||||
margin-right: 5px;
|
||||
}
|
||||
|
||||
.toolbar svg {
|
||||
line-height: 16px;
|
||||
vertical-align: sub;
|
||||
}
|
||||
|
||||
.top-bar {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
header p {
|
||||
margin: 0
|
||||
}
|
||||
|
||||
.toolbar .dropdown-menu {
|
||||
font-size: 14px;
|
||||
line-height: 14px;
|
||||
min-width: 100%;
|
||||
width: max-content;
|
||||
}
|
||||
|
||||
.form-control-feedback {
|
||||
display: block;
|
||||
font-size: 14px;
|
||||
color: red;
|
||||
}
|
||||
|
||||
/* Main menu */
|
||||
.main-menu {
|
||||
background-color: #555;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.main-menu .nav-item {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.main-menu a, .main-menu span {
|
||||
position: relative;
|
||||
display: block;
|
||||
padding: 14px 18px;
|
||||
color: #fff;
|
||||
background-color: #555;
|
||||
transition: background-color linear 250ms
|
||||
}
|
||||
|
||||
.main-menu .active > a, .main-menu .active > span, .main-menu a:hover, .main-menu span:hover {
|
||||
background-color: #000;
|
||||
transition: background-color linear 250ms
|
||||
}
|
||||
|
||||
.main-menu .parent > a::after, .main-menu .parent > span::after {
|
||||
content: "";
|
||||
display: inline-block;
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
background-color: #fff;
|
||||
margin-left: 5px;
|
||||
-webkit-mask: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="10" height="10" fill="currentColor" class="bi bi-chevron-down" viewBox="0 0 16 16"><path fill-rule="evenodd" d="M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708"/></svg>');
|
||||
mask: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="10" height="10" fill="currentColor" class="bi bi-chevron-down" viewBox="0 0 16 16"><path fill-rule="evenodd" d="M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708"/></svg>');
|
||||
}
|
||||
|
||||
.main-menu .mod-menu__sub .parent > a::after, .main-menu .mod-menu__sub .parent > span::after {
|
||||
position: absolute;
|
||||
right: 9px;
|
||||
top: 50%;
|
||||
transform: translateY(-50%) rotate(-90deg);
|
||||
}
|
||||
|
||||
.main-menu .mod-menu__sub {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 100%;
|
||||
z-index: 1022;
|
||||
min-width: 200px;
|
||||
opacity: 0;
|
||||
visibility: hidden;
|
||||
transition: all linear 250ms
|
||||
}
|
||||
|
||||
.main-menu .parent:hover > .mod-menu__sub {
|
||||
opacity: 1;
|
||||
visibility: visible;
|
||||
box-shadow: 0 5px 15px 0 rgba(0,0,0,0.3);
|
||||
transition: all linear 250ms
|
||||
}
|
||||
|
||||
.mod-menu__sub .mod-menu__sub {
|
||||
left: 100%;
|
||||
top: 0
|
||||
}
|
||||
|
||||
/* Banners */
|
||||
.banner-section p {
|
||||
margin: 0
|
||||
}
|
||||
|
||||
/* Modules */
|
||||
.mod-breadcrumbs {
|
||||
background-color: #EFEFEF;
|
||||
font-size: 14px;
|
||||
white-space: nowrap;
|
||||
overflow: auto;
|
||||
flex-wrap: nowrap;
|
||||
}
|
||||
|
||||
.breadcrumb-item + .breadcrumb-item::before {
|
||||
float: none;
|
||||
}
|
||||
|
||||
.mod-breadcrumbs a, .manufacturer-details-view a:not(.btn) {
|
||||
color: #71ABD6;
|
||||
}
|
||||
|
||||
.breadcrumb-item.active {
|
||||
color: #A0A0A0;
|
||||
}
|
||||
|
||||
aside .module-title {
|
||||
font-size: 24px;
|
||||
font-weight: normal;
|
||||
border-bottom: 1px solid #dee2e6;
|
||||
padding-bottom: 15px;
|
||||
margin-bottom: 15px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
/* Footer */
|
||||
footer {
|
||||
padding: 50px 0;
|
||||
background-color: #EFEFEF;
|
||||
}
|
||||
|
||||
footer .module-title {
|
||||
font-size: 18px;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
footer .nav {
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
footer ul {
|
||||
list-style: none;
|
||||
padding: 0;
|
||||
margin: 0
|
||||
}
|
||||
|
||||
footer .nav-item, footer li {
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
footer a {
|
||||
color: #333;
|
||||
}
|
||||
|
||||
footer a:hover {
|
||||
color: #A0A0A0;
|
||||
}
|
||||
|
||||
/* Forms */
|
||||
textarea {
|
||||
min-height: 100px
|
||||
}
|
||||
|
||||
.control-label {
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
|
||||
/*********
|
||||
Virtuemart
|
||||
*********/
|
||||
|
||||
/* VM Search module */
|
||||
.vmbasic-search input {
|
||||
border-color: #A0A0A0;
|
||||
border-radius: 0;
|
||||
height: 40px;
|
||||
}
|
||||
|
||||
.mod-vm-search .btn-svg {
|
||||
padding: 0 10px;
|
||||
position: absolute;
|
||||
z-index: 5;
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
height: 40px;
|
||||
}
|
||||
|
||||
.vm-search-custom-search-input input, #vm-orderby-select {
|
||||
border-radius: var(--bs-border-radius) !important;
|
||||
}
|
||||
|
||||
/* VM cart module */
|
||||
.vmCartModule .btn-link {
|
||||
color: #333;
|
||||
}
|
||||
|
||||
/* Product page */
|
||||
.manufacturer a {
|
||||
color: #71ABD6;
|
||||
}
|
||||
|
||||
/* Account */
|
||||
.vm-add-edit-address > a, .vm-order-list a {
|
||||
font-weight: 600;
|
||||
color: #71ABD6
|
||||
}
|
||||
|
||||
/* Checkout */
|
||||
.vm-coupon-container .btn {
|
||||
border-radius: var(--bs-border-radius);
|
||||
}
|
||||
|
||||
#checkoutForm .details {
|
||||
font-weight: 600;
|
||||
color: #71ABD6
|
||||
}
|
||||
|
||||
|
||||
/*********
|
||||
Joomla
|
||||
*********/
|
||||
|
||||
/* com_content */
|
||||
.item-content .page-header h2 {
|
||||
font-size: 20px;
|
||||
}
|
||||
|
||||
.article-info {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
font-size: 14px;
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
|
||||
.item-image {
|
||||
display: block;
|
||||
margin: 0 auto 30px;
|
||||
}
|
||||
|
||||
.article-info > * {
|
||||
margin-right: 8px
|
||||
}
|
||||
|
||||
.com-content-article__links {
|
||||
list-style: none;
|
||||
padding: 0;
|
||||
margin: 30px 0;
|
||||
}
|
||||
|
||||
.com-content-article__links a, .items-more a {
|
||||
color: #71ABD6
|
||||
}
|
||||
|
||||
.active > .page-link, .page-link.active {
|
||||
background-color: #555555;
|
||||
border-color: #555555;
|
||||
}
|
||||
|
||||
.page-link, .page-link:hover {
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.pagenavigation {
|
||||
margin: 30px 0;
|
||||
}
|
||||
|
||||
.pagenavigation .next {
|
||||
margin-left: auto;
|
||||
}
|
||||
|
||||
/* tags */
|
||||
.com-tags-tag-list__category, .com-tags-tag__category {
|
||||
margin-top: 30px;
|
||||
}
|
||||
|
||||
.tag-category .list-group-item h3 {
|
||||
margin: 0;
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.tags .btn {
|
||||
font-size: 12px;
|
||||
padding: 0 5px;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
|
||||
/* User */
|
||||
.com-users-login.login, .com-users-reset, .com-users-remind, .com-users-registration {
|
||||
max-width: 400px;
|
||||
margin: auto;
|
||||
padding: 15px;
|
||||
border: var(--bs-border-width) var(--bs-border-style) var(--bs-border-color) !important;
|
||||
}
|
||||
|
||||
.control-group, .com-users-login__remember {
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
|
||||
.com-users-reset legend, .com-users-remind legend {
|
||||
font-size: 14px
|
||||
}
|
||||
|
||||
/* Contact */
|
||||
#contact-form legend {
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.com-contact-featured__table {
|
||||
margin-top: 30px;
|
||||
}
|
||||
|
||||
/* Modules */
|
||||
.sidebar-right ul, .sidebar-left ul {
|
||||
list-style: none;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.sidebar-right li, .sidebar-left li {
|
||||
margin-bottom: 10px
|
||||
}
|
||||
|
||||
|
||||
.mod-login__userdata > div {
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
|
||||
.awesomplete input {
|
||||
border-top-right-radius: 0;
|
||||
border-bottom-right-radius: 0;
|
||||
}
|
||||
|
||||
.mod-login__userdata.userdata {
|
||||
padding: 15px;
|
||||
border: var(--bs-border-width) var(--bs-border-style) var(--bs-border-color) !important;
|
||||
}
|
||||
|
||||
#Passkey {
|
||||
width: 24px;
|
||||
}
|
||||
|
||||
/* offcanvas*/
|
||||
.offcanvas-body .mod-menu {
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.offcanvas-body .mod-menu__sub {
|
||||
display: none;
|
||||
padding: 10px
|
||||
}
|
||||
|
||||
.offcanvas-body .nav-item {
|
||||
padding: 5px 0;
|
||||
border-bottom: 1px solid var(--bs-border-color);
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.offcanvas-body .nav-item:last-child {
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
.offcanvas-body a {
|
||||
font-size: 15px;
|
||||
color: #333
|
||||
}
|
||||
|
||||
.offcanvas-body .active > a {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.offcanvas-body .subtoggle {
|
||||
padding: 0;
|
||||
background-color: transparent;
|
||||
border: none;
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
position: absolute;
|
||||
right: 0;
|
||||
top: 1px;
|
||||
z-index: 1
|
||||
}
|
||||
|
||||
.offcanvas-body .subtoggle.open {
|
||||
transform: rotate(-180deg);
|
||||
transition: all linear 200ms
|
||||
}
|
||||
|
||||
/* To top */
|
||||
.back-to-top-link {
|
||||
display: none;
|
||||
position: fixed;
|
||||
right: 12px;
|
||||
bottom: 12px;
|
||||
z-index: 1020;
|
||||
}
|
||||
|
||||
@media screen and (max-width: 1080px) {
|
||||
|
||||
body {
|
||||
font-size: 14px
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
@media screen and (max-width: 991px) {
|
||||
|
||||
h1 {
|
||||
font-size: 24px
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-size: 22px
|
||||
}
|
||||
|
||||
h3 {
|
||||
font-size: 20px
|
||||
}
|
||||
|
||||
h4 {
|
||||
font-size: 18px
|
||||
}
|
||||
|
||||
h5 {
|
||||
font-size: 16px
|
||||
}
|
||||
|
||||
h6 {
|
||||
font-size: 15px
|
||||
}
|
||||
|
||||
.main-search {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 490px) {
|
||||
|
||||
.toolbar {
|
||||
padding: 6px 0;
|
||||
}
|
||||
|
||||
.toolbar .bg-alt {
|
||||
background-color: #333;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.top-bar {
|
||||
background-color: #333;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.top-bar a {
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.cart-module .bi-cart3 {
|
||||
margin-top: 2px
|
||||
}
|
||||
|
||||
.cart-module .total_products {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.vmCartModule .dropdown-menu {
|
||||
margin-right: -10px !important;
|
||||
}
|
||||
|
||||
.cart-module .dropdown-toggle::after {
|
||||
content: none;
|
||||
}
|
||||
|
||||
.com-contact-featured__items, .com-contact-category__items {
|
||||
overflow-x: auto;
|
||||
}
|
||||
|
||||
footer {
|
||||
padding-bottom: 30px;
|
||||
}
|
||||
}
|
||||
BIN
media/templates/site/moko-cassiopeia/fonts/osaka-re.ttf
Normal file
BIN
media/templates/site/moko-cassiopeia/fonts/osaka-re.ttf
Normal file
Binary file not shown.
107
media/templates/site/moko-cassiopeia/images/bg.svg
Normal file
107
media/templates/site/moko-cassiopeia/images/bg.svg
Normal file
File diff suppressed because one or more lines are too long
|
After Width: | Height: | Size: 42 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 38 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 12 KiB |
BIN
media/templates/site/moko-cassiopeia/images/favicon/favicon.gif
Normal file
BIN
media/templates/site/moko-cassiopeia/images/favicon/favicon.gif
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 38 KiB |
BIN
media/templates/site/moko-cassiopeia/images/favicon/favicon.ico
Normal file
BIN
media/templates/site/moko-cassiopeia/images/favicon/favicon.ico
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 15 KiB |
File diff suppressed because one or more lines are too long
|
After Width: | Height: | Size: 99 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 20 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 74 KiB |
@@ -0,0 +1,21 @@
|
||||
{
|
||||
"name": "",
|
||||
"short_name": "",
|
||||
"icons": [
|
||||
{
|
||||
"src": "/web-app-manifest-192x192.png",
|
||||
"sizes": "192x192",
|
||||
"type": "image/png",
|
||||
"purpose": "maskable"
|
||||
},
|
||||
{
|
||||
"src": "/web-app-manifest-512x512.png",
|
||||
"sizes": "512x512",
|
||||
"type": "image/png",
|
||||
"purpose": "maskable"
|
||||
}
|
||||
],
|
||||
"theme_color": "#ffffff",
|
||||
"background_color": "#ffffff",
|
||||
"display": "standalone"
|
||||
}
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 42 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 213 KiB |
93
media/templates/site/moko-cassiopeia/images/logo.svg
Normal file
93
media/templates/site/moko-cassiopeia/images/logo.svg
Normal file
File diff suppressed because one or more lines are too long
|
After Width: | Height: | Size: 100 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 467 KiB |
@@ -0,0 +1 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1854.54 295" preserveAspectRatio="xMinYMid" width="1854.54" height="295"><path d="m14.47 145.7 6.898 6.899c0.102 0.101 0.199 0.101 0.3 0.101 0.102 0 0.2 0 0.302-0.101l6.898-6.899c0.102-0.1 0.102-0.2 0.102-0.3s0-0.2-0.102-0.3l-0.7-0.7c-0.101-0.1-0.198-0.1-0.3-0.1-0.101 0-0.2 0-0.301 0.1l-5.8 5.8-5.801-5.8c-0.101-0.1-0.199-0.1-0.301-0.1-0.101 0-0.199 0-0.301 0.1l-0.699 0.7c-0.101 0.1-0.101 0.2-0.101 0.3-0.294 0.1-0.194 0.2-0.094 0.3z" fill="#fff"/></svg>
|
||||
|
After Width: | Height: | Size: 510 B |
@@ -0,0 +1 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1854.54 295" preserveAspectRatio="xMinYMid" width="1854.54" height="295"><path d="M1825.1,145.7l6.9,6.9c0.1,0.1,0.2,0.1,0.3,0.1c0.1,0,0.2,0,0.3-0.1l6.9-6.9c0.1-0.1,0.1-0.2,0.1-0.3c0-0.1,0-0.2-0.1-0.3l-0.7-0.7c-0.1-0.1-0.2-0.1-0.3-0.1s-0.2,0-0.3,0.1l-5.8,5.8l-5.8-5.8c-0.1-0.1-0.2-0.1-0.3-0.1c-0.1,0-0.2,0-0.3,0.1l-0.7,0.7c-0.1,0.1-0.1,0.2-0.1,0.3C1824.9,145.5,1825,145.6,1825.1,145.7z" fill="#fff"/></svg>
|
||||
|
After Width: | Height: | Size: 459 B |
@@ -0,0 +1 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="1854.539" height="295" preserveAspectRatio="xMinYMin meet"><path d="M13.573 145.7l6.9 6.9c.1.1.2.1.3.1s.2 0 .3-.1l6.9-6.9c.1-.1.1-.2.1-.3s0-.2-.1-.3l-.7-.7c-.1-.1-.2-.1-.3-.1s-.2 0-.3.1l-5.8 5.8-5.8-5.8c-.1-.1-.2-.1-.3-.1s-.2 0-.3.1l-.7.7c-.1.1-.1.2-.1.3-.296.1-.195.2-.096.3h-.002z"/><path fill="#fff" d="M44.54 0h1810v295h-1810z"/></svg>
|
||||
|
After Width: | Height: | Size: 387 B |
@@ -0,0 +1 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1854.54 295" preserveAspectRatio="xMinYMid" width="1854.54" height="295"><path d="M1825.1,145.7l6.9,6.9c0.1,0.1,0.2,0.1,0.3,0.1c0.1,0,0.2,0,0.3-0.1l6.9-6.9c0.1-0.1,0.1-0.2,0.1-0.3c0-0.1,0-0.2-0.1-0.3l-0.7-0.7c-0.1-0.1-0.2-0.1-0.3-0.1s-0.2,0-0.3,0.1l-5.8,5.8l-5.8-5.8c-0.1-0.1-0.2-0.1-0.3-0.1c-0.1,0-0.2,0-0.3,0.1l-0.7,0.7c-0.1,0.1-0.1,0.2-0.1,0.3C1824.9,145.5,1825,145.6,1825.1,145.7z" fill="#000"/><rect width="1810" height="295" fill="#fff"/></svg>
|
||||
|
After Width: | Height: | Size: 504 B |
BIN
media/templates/site/moko-cassiopeia/images/teaser_bg_sm.png
Normal file
BIN
media/templates/site/moko-cassiopeia/images/teaser_bg_sm.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 979 B |
BIN
media/templates/site/moko-cassiopeia/images/template_preview.png
Normal file
BIN
media/templates/site/moko-cassiopeia/images/template_preview.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 62 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 10 KiB |
0
media/templates/site/moko-cassiopeia/index.html
Normal file
0
media/templates/site/moko-cassiopeia/index.html
Normal file
@@ -0,0 +1,29 @@
|
||||
(function () {
|
||||
'use strict';
|
||||
|
||||
/**
|
||||
* @package Joomla.Site
|
||||
* @subpackage Templates.Moko-Cassiopeia
|
||||
* @copyright (C) 2020 Open Source Matters, Inc. <https://www.joomla.org>
|
||||
* @license GNU General Public License version 2 or later; see LICENSE.txt
|
||||
* @since 4.0.0
|
||||
*/
|
||||
|
||||
document.addEventListener('DOMContentLoaded', function () {
|
||||
var allMenus = document.querySelectorAll('ul.mod-menu_dropdown-metismenu');
|
||||
allMenus.forEach(function (menu) {
|
||||
// eslint-disable-next-line no-new, no-undef
|
||||
var mm = new MetisMenu(menu, {
|
||||
triggerElement: 'button.mm-toggler'
|
||||
}).on('shown.metisMenu', function (event) {
|
||||
window.addEventListener('click', function mmClick(e) {
|
||||
if (!event.target.contains(e.target)) {
|
||||
mm.hide(event.detail.shownElement);
|
||||
window.removeEventListener('click', mmClick);
|
||||
}
|
||||
});
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
})();
|
||||
@@ -0,0 +1,25 @@
|
||||
/**
|
||||
* @package Joomla.Site
|
||||
* @subpackage Templates.Moko-Cassiopeia
|
||||
* @copyright (C) 2020 Open Source Matters, Inc. <https://www.joomla.org>
|
||||
* @copyright (C) 2025 Jonathan Miler || Moko Consulting <https://mokoconsulting.tech>
|
||||
* @license GNU General Public License version 2 or later; see LICENSE.txt
|
||||
* @since 4.0.0
|
||||
*/
|
||||
|
||||
document.addEventListener('DOMContentLoaded', () => {
|
||||
const allMenus = document.querySelectorAll('ul.mod-menu_dropdown-metismenu');
|
||||
allMenus.forEach(menu => {
|
||||
// eslint-disable-next-line no-new, no-undef
|
||||
const mm = new MetisMenu(menu, {
|
||||
triggerElement: 'button.mm-toggler'
|
||||
}).on('shown.metisMenu', event => {
|
||||
window.addEventListener('click', function mmClick(e) {
|
||||
if (!event.target.contains(e.target)) {
|
||||
mm.hide(event.detail.shownElement);
|
||||
window.removeEventListener('click', mmClick);
|
||||
}
|
||||
});
|
||||
});
|
||||
});
|
||||
});
|
||||
74
media/templates/site/moko-cassiopeia/js/template.js
Normal file
74
media/templates/site/moko-cassiopeia/js/template.js
Normal file
@@ -0,0 +1,74 @@
|
||||
/**
|
||||
* @package Joomla.Site
|
||||
* @subpackage Templates.Moko-Cassiopeia
|
||||
* @copyright (C) 2017 Open Source Matters, Inc. <https://www.joomla.org>
|
||||
* @license GNU General Public License version 2 or later; see LICENSE.txt
|
||||
* @since 4.0.0
|
||||
*/
|
||||
|
||||
Joomla = window.Joomla || {};
|
||||
|
||||
(function(Joomla, document) {
|
||||
'use strict';
|
||||
|
||||
function initTemplate(event) {
|
||||
var target = event && event.target ? event.target : document;
|
||||
|
||||
/**
|
||||
* Prevent clicks on buttons within a disabled fieldset
|
||||
*/
|
||||
var fieldsets = target.querySelectorAll('fieldset.btn-group');
|
||||
for (var i = 0; i < fieldsets.length; i++) {
|
||||
var self = fieldsets[i];
|
||||
if (self.getAttribute('disabled') === true) {
|
||||
self.style.pointerEvents = 'none';
|
||||
var btns = self.querySelectorAll('.btn');
|
||||
for (var ib = 0; ib < btns.length; ib++) {
|
||||
btns[ib].classList.add('disabled');
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
document.addEventListener('DOMContentLoaded', function (event) {
|
||||
initTemplate(event);
|
||||
|
||||
/**
|
||||
* Back to top
|
||||
*/
|
||||
var backToTop = document.getElementById('back-top');
|
||||
|
||||
if (backToTop) {
|
||||
|
||||
function checkScrollPos() {
|
||||
if (document.body.scrollTop > 20 || document.documentElement.scrollTop > 20) {
|
||||
backToTop.classList.add('visible');
|
||||
} else {
|
||||
backToTop.classList.remove('visible')
|
||||
}
|
||||
}
|
||||
|
||||
checkScrollPos();
|
||||
|
||||
window.onscroll = function() {
|
||||
checkScrollPos();
|
||||
};
|
||||
|
||||
backToTop.addEventListener('click', function(event) {
|
||||
event.preventDefault();
|
||||
window.scrollTo(0, 0);
|
||||
});
|
||||
}
|
||||
|
||||
[].slice.call(document.head.querySelectorAll('link[rel="lazy-stylesheet"]'))
|
||||
.forEach(function($link){
|
||||
$link.rel = "stylesheet";
|
||||
});
|
||||
});
|
||||
|
||||
/**
|
||||
* Initialize when a part of the page was updated
|
||||
*/
|
||||
document.addEventListener('joomla:updated', initTemplate);
|
||||
|
||||
})(Joomla, document);
|
||||
Reference in New Issue
Block a user