(43 intermediate revisions by 4 users not shown) | |||
Line 1: | Line 1: | ||
/* CSS placed here will be applied to all skins <style>*/ | /* CSS placed here will be applied to all skins <style>*/ | ||
+ | |||
+ | /* Timeline CSS */ | ||
+ | |||
+ | .timeline-edit { | ||
+ | display: inline-block; | ||
+ | padding: 3px; | ||
+ | border: 1px solid grey; | ||
+ | } | ||
+ | |||
+ | .timeline-edit input { | ||
+ | outline: none; | ||
+ | border: none; | ||
+ | display:block; | ||
+ | line-height: 1.2em; | ||
+ | font-size: 14pt; | ||
+ | } | ||
+ | .timeline-edit label { | ||
+ | display: block; | ||
+ | font-size: 12px; | ||
+ | color: grey; | ||
+ | } | ||
+ | |||
+ | |||
+ | .timeline-steps { | ||
+ | display: flex; | ||
+ | justify-content: center; | ||
+ | flex-wrap: wrap | ||
+ | } | ||
+ | |||
+ | .timeline-steps .timeline-step { | ||
+ | align-items: center; | ||
+ | display: flex; | ||
+ | flex-direction: column; | ||
+ | position: relative; | ||
+ | margin: 1rem | ||
+ | } | ||
+ | |||
+ | @media (min-width:768px) { | ||
+ | .timeline-steps .timeline-step:not(:last-child):after { | ||
+ | content: ""; | ||
+ | display: block; | ||
+ | border-top: .25rem dotted #3b82f6; | ||
+ | width: 3.46rem; | ||
+ | position: absolute; | ||
+ | left: 7.5rem; | ||
+ | top: .3125rem | ||
+ | } | ||
+ | .timeline-steps .timeline-step:not(:first-child):before { | ||
+ | content: ""; | ||
+ | display: block; | ||
+ | border-top: .25rem dotted #3b82f6; | ||
+ | width: 3.8125rem; | ||
+ | position: absolute; | ||
+ | right: 7.5rem; | ||
+ | top: .3125rem | ||
+ | } | ||
+ | } | ||
+ | |||
+ | .timeline-steps .timeline-content { | ||
+ | width: 10rem; | ||
+ | text-align: center | ||
+ | } | ||
+ | |||
+ | .timeline-steps .timeline-content .inner-circle { | ||
+ | border-radius: 1.5rem; | ||
+ | height: 1rem; | ||
+ | width: 1rem; | ||
+ | display: inline-flex; | ||
+ | align-items: center; | ||
+ | justify-content: center; | ||
+ | background-color: #3b82f6 | ||
+ | } | ||
+ | |||
+ | .timeline-steps .timeline-content .inner-circle:before { | ||
+ | content: ""; | ||
+ | background-color: #3b82f6; | ||
+ | display: inline-block; | ||
+ | height: 3rem; | ||
+ | width: 3rem; | ||
+ | min-width: 3rem; | ||
+ | border-radius: 6.25rem; | ||
+ | opacity: .5 | ||
+ | } | ||
+ | |||
+ | /* slick silder module */ | ||
+ | @import url("skin/modules/slick/slick.scss"); | ||
+ | @import url("skin/modules/slick/slick-theme.scss"); | ||
+ | |||
+ | .ocsp-main-page { | ||
+ | font-family: "Open Sans", sans-serif; | ||
+ | font-size: 17px; | ||
+ | color: #626262; | ||
+ | } | ||
+ | |||
+ | .ocsp-main-features { | ||
+ | margin-top:30px; | ||
+ | } | ||
+ | |||
.treeview ul { | .treeview ul { | ||
list-style: none; | list-style: none; | ||
Line 22: | Line 120: | ||
/* nav */ | /* nav */ | ||
+ | html, html body { | ||
+ | background-color: white; | ||
+ | } | ||
+ | |||
+ | /* | ||
.ws-page-tools { | .ws-page-tools { | ||
display: none; | display: none; | ||
} | } | ||
− | + | */ | |
.row-WSHeader.row { | .row-WSHeader.row { | ||
grid-row: 1; | grid-row: 1; | ||
Line 125: | Line 228: | ||
width: 100%; | width: 100%; | ||
padding: 0.5em 0.5em 0.5em 2em; | padding: 0.5em 0.5em 0.5em 2em; | ||
+ | color: var(--csp-white); | ||
+ | } | ||
+ | |||
+ | input.csp-nav__search-input::placeholder { | ||
+ | color: var(--csp-light); | ||
} | } | ||
Line 203: | Line 311: | ||
background: #b3d4efff; | background: #b3d4efff; | ||
width: 100%; | width: 100%; | ||
− | height: | + | min-height:10em; |
− | margin-top: 2em; | + | font-size: larger; |
+ | } | ||
+ | |||
+ | .csp-nav__mobile-menu { | ||
+ | display: none; | ||
+ | } | ||
+ | |||
+ | .csp-section-wrapper { | ||
+ | background: #b3d4ef; | ||
+ | margin: 4em -63px; | ||
+ | padding: 2em; | ||
+ | } | ||
+ | |||
+ | .csp-section-wrapper:before { | ||
+ | content: ''; | ||
+ | width: 0; | ||
+ | height: 0; | ||
+ | border-left: 20px solid transparent; | ||
+ | border-right: 20px solid transparent; | ||
+ | |||
+ | border-top: 20px solid white; | ||
+ | position: absolute; | ||
+ | left: 50%; | ||
+ | transform: translate(-2em,-2em); | ||
+ | } | ||
+ | |||
+ | @media (max-width: 500px) { | ||
+ | .csp-section-wrapper { | ||
+ | margin: 4em -30px; | ||
+ | } | ||
+ | |||
+ | ul.csp-nav__menu { | ||
+ | position: absolute; | ||
+ | display: none; | ||
+ | top: 4em; | ||
+ | z-index: 99; | ||
+ | width: 100%; | ||
+ | left: 0; | ||
+ | flex-direction: column; | ||
+ | padding: 0; | ||
+ | } | ||
+ | |||
+ | ul.csp-nav__menu.open { | ||
+ | display: flex; | ||
+ | } | ||
+ | |||
+ | .csp-section { | ||
+ | grid-template-columns: 1fr; | ||
+ | } | ||
+ | |||
+ | h1.csp-brandig { | ||
+ | font-size: 6em; | ||
+ | } | ||
+ | |||
+ | #bodyContent { | ||
+ | padding: 0; | ||
+ | } | ||
+ | |||
+ | .csp-nav__mobile-menu { | ||
+ | display: block; | ||
+ | align-self: center; | ||
+ | } | ||
+ | |||
+ | .csp-nav__mobile-menu:before { | ||
+ | content: "\f0c9"; | ||
+ | font-family: "Font Awesome 5 Free"; | ||
+ | font-weight: 900; | ||
+ | font-size: 2em; | ||
+ | padding-right: 0.5em; | ||
+ | color: var(--csp-white); | ||
+ | } | ||
+ | } | ||
+ | |||
+ | /* fix tooltip z-index */ | ||
+ | div.tippy-popper { | ||
+ | z-index: 2500 !important; | ||
+ | } | ||
+ | |||
+ | /* SEO sidebar toggle */ | ||
+ | .sidebar-seo-view ~ .sidebar-seo-view-tab, | ||
+ | .sidebar-seo-edit ~ .sidebar-seo-edit-tab { | ||
+ | display: none; | ||
+ | opacity: 0; | ||
+ | } | ||
+ | |||
+ | .sidebar-seo-view:checked ~ .sidebar-seo-view-tab, | ||
+ | .sidebar-seo-edit:checked ~ .sidebar-seo-edit-tab { | ||
+ | display: block; | ||
+ | opacity: 100; | ||
} | } |
Latest revision as of 10:20, 13 July 2023
/* CSS placed here will be applied to all skins <style>*/
/* Timeline CSS */
.timeline-edit {
display: inline-block;
padding: 3px;
border: 1px solid grey;
}
.timeline-edit input {
outline: none;
border: none;
display:block;
line-height: 1.2em;
font-size: 14pt;
}
.timeline-edit label {
display: block;
font-size: 12px;
color: grey;
}
.timeline-steps {
display: flex;
justify-content: center;
flex-wrap: wrap
}
.timeline-steps .timeline-step {
align-items: center;
display: flex;
flex-direction: column;
position: relative;
margin: 1rem
}
@media (min-width:768px) {
.timeline-steps .timeline-step:not(:last-child):after {
content: "";
display: block;
border-top: .25rem dotted #3b82f6;
width: 3.46rem;
position: absolute;
left: 7.5rem;
top: .3125rem
}
.timeline-steps .timeline-step:not(:first-child):before {
content: "";
display: block;
border-top: .25rem dotted #3b82f6;
width: 3.8125rem;
position: absolute;
right: 7.5rem;
top: .3125rem
}
}
.timeline-steps .timeline-content {
width: 10rem;
text-align: center
}
.timeline-steps .timeline-content .inner-circle {
border-radius: 1.5rem;
height: 1rem;
width: 1rem;
display: inline-flex;
align-items: center;
justify-content: center;
background-color: #3b82f6
}
.timeline-steps .timeline-content .inner-circle:before {
content: "";
background-color: #3b82f6;
display: inline-block;
height: 3rem;
width: 3rem;
min-width: 3rem;
border-radius: 6.25rem;
opacity: .5
}
/* slick silder module */
@import url("skin/modules/slick/slick.scss");
@import url("skin/modules/slick/slick-theme.scss");
.ocsp-main-page {
font-family: "Open Sans", sans-serif;
font-size: 17px;
color: #626262;
}
.ocsp-main-features {
margin-top:30px;
}
.treeview ul {
list-style: none;
margin-left: 0;
padding-left: 20px;
}
/* Used for legend example */
legend.legend-example {
background-color: #000;
color: #fff;
padding: 3px 6px;
}
.legend-example-output {
font: 1rem 'Fira Sans', sans-serif;
}
input.legend-example {
margin: .4rem;
}
/* nav */
html, html body {
background-color: white;
}
/*
.ws-page-tools {
display: none;
}
*/
.row-WSHeader.row {
grid-row: 1;
}
:root {
--csp-white: white;
--csp-base: #739dbfff;
--csp-dark: #486d8dff;
--csp-light: #c0d3e2ff;
}
.csp-nav-wrapper {
background: var(--csp-base);
margin: 0 -15px;
}
.csp-nav {
grid-template-columns: auto 1fr auto;
display: grid;
max-width: 1200px;
margin: 0 auto;
}
.csp-nav__logo {
background: var(--csp-dark);
display: flex;
flex-direction: column;
justify-content: center;
padding: 0 2em;
}
.csp-nav__logo a {
max-width: 2em;
color: var(--csp-white);
font-weight: bold;
font-size: 1.5em;
line-height: .9;
}
.csp-nav__logo a::first-line {
color: var(--csp-light);
font-size: .75em;
}
.csp-nav__logo a:hover {
text-decoration: none;
}
ul.csp-nav__menu {
justify-self: end;
list-style: none;
display: flex;
margin: 0;
}
li.csp-nav__menu-item {
margin: 0;
display: contents;
font-size: 1.2em;
}
li.csp-nav__menu-item a{
padding: 1.2em 1.5em;
margin: 0;
background: var(--csp-base);
color: var(--csp-white);
}
li.csp-nav__menu-item a:hover {
background: var(--csp-dark);
text-decoration: none;
}
.csp-nav__search {
position: relative;
display: flex;
align-items: center;
margin: 0.8em 0;
padding: 0 2em 0 1.5em;
border-left: 1px solid var(--csp-white);
}
.csp-nav__search-icon {
position: absolute;
left: 2em;
}
.csp-nav__search-icon:before {
content: "\f002";
font-family: "Font Awesome 5 Free";
font-weight: 900;
color: var(--csp-light)
}
input.csp-nav__search-input {
background: var(--csp-dark);
border: none;
width: 100%;
padding: 0.5em 0.5em 0.5em 2em;
color: var(--csp-white);
}
input.csp-nav__search-input::placeholder {
color: var(--csp-light);
}
input.csp-nav__search-input:focus,
input.csp-nav__search-input:focus-visible {
outline: 0;
box-shadow: inset 0 0 0 2px var(--csp-light);
}
/* main page */
.page-Main_Page #content {
background-color: white;
border: none;
}
body.page-Main_Page,
html body.page-Main_Page {
background: white;
}
.page-Main_Page .mt-1.row {
display:none;
}
.csp-section {
display: grid;
grid-template-columns: 1fr 1fr;
max-width: 1200px;
margin: 0 auto;
grid-gap: 1em;
}
h1.csp-brandig {
border: none;
}
h1.csp-brandig {
border: none;
font-size: 14em;
font-weight: bold;
color: var(--csp-dark);
padding: 0;
margin-bottom: -0.15em;
}
.csp-brandig .csp-vertical-text {
font-size: 0.28em;
}
.csp-vertical-text {
writing-mode: vertical-rl;
text-orientation: mixed;
transform: rotate(-180deg);
}
.csp-branding__sub {
font-size: 1.5em;
margin-bottom: 1em;
}
.csp-button a {
background: var(--csp-dark);
padding: 0.5em 2em;
color: white;
font-size: 1.2em;
}
.csp-button a:after {
content: "\f054";
font-family: "Font Awesome 5 Free";
font-weight: 900;
padding-left: 1em;
margin-right: -1em;
}
.csp-block {
background: #b3d4efff;
width: 100%;
min-height:10em;
font-size: larger;
}
.csp-nav__mobile-menu {
display: none;
}
.csp-section-wrapper {
background: #b3d4ef;
margin: 4em -63px;
padding: 2em;
}
.csp-section-wrapper:before {
content: '';
width: 0;
height: 0;
border-left: 20px solid transparent;
border-right: 20px solid transparent;
border-top: 20px solid white;
position: absolute;
left: 50%;
transform: translate(-2em,-2em);
}
@media (max-width: 500px) {
.csp-section-wrapper {
margin: 4em -30px;
}
ul.csp-nav__menu {
position: absolute;
display: none;
top: 4em;
z-index: 99;
width: 100%;
left: 0;
flex-direction: column;
padding: 0;
}
ul.csp-nav__menu.open {
display: flex;
}
.csp-section {
grid-template-columns: 1fr;
}
h1.csp-brandig {
font-size: 6em;
}
#bodyContent {
padding: 0;
}
.csp-nav__mobile-menu {
display: block;
align-self: center;
}
.csp-nav__mobile-menu:before {
content: "\f0c9";
font-family: "Font Awesome 5 Free";
font-weight: 900;
font-size: 2em;
padding-right: 0.5em;
color: var(--csp-white);
}
}
/* fix tooltip z-index */
div.tippy-popper {
z-index: 2500 !important;
}
/* SEO sidebar toggle */
.sidebar-seo-view ~ .sidebar-seo-view-tab,
.sidebar-seo-edit ~ .sidebar-seo-edit-tab {
display: none;
opacity: 0;
}
.sidebar-seo-view:checked ~ .sidebar-seo-view-tab,
.sidebar-seo-edit:checked ~ .sidebar-seo-edit-tab {
display: block;
opacity: 100;
}