pressbooks aldine theme the theme used for the front page or default book
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
 
 
 
 
 
 

386 lines
13 KiB

/* spacing */
/** Colors */
/** Fonts */
/** Breakpoints */
:root {
--primary: #b01109;
--primary-dark: #7f0c07;
--primary-alpha: rgba(176, 17, 9, 0.25);
--primary-fg: #fff;
--accent: #015d75;
--accent-alpha: rgba(1, 93, 117, 0.25);
--accent-dark: #013542;
--accent-fg: #fff;
--success: #070;
--error: #d00;
--warning: #e90;
--body-bg: #fff;
--body-bg-alt: #f6f6f6;
--body-text: #222;
--header-bg: #fff;
--header-text: #222;
--footer-bg: #444;
--footer-text: #fff;
}
body#tinymce {
margin: 12px !important;
/* stylelint-disable no-invalid-position-at-import-rule */
/* stylelint-enable */
}
body#tinymce .button,
body#tinymce button,
body#tinymce input[type=submit],
body#tinymce a.call-to-action {
border-style: solid;
border-width: 2px;
border-radius: 3px;
display: inline-block;
font-family: "Karla", sans-serif;
font-weight: 600;
line-height: 1.5;
padding: 0.875rem 3.25rem;
vertical-align: middle;
text-align: center;
text-decoration: none;
text-transform: uppercase;
}
body#tinymce .button:focus, body#tinymce .button.focus, body#tinymce .button:hover,
body#tinymce button:focus,
body#tinymce button.focus,
body#tinymce button:hover,
body#tinymce input[type=submit]:focus,
body#tinymce input[type=submit].focus,
body#tinymce input[type=submit]:hover,
body#tinymce a.call-to-action:focus,
body#tinymce a.call-to-action.focus,
body#tinymce a.call-to-action:hover {
text-decoration: none;
}
body#tinymce .button:focus, body#tinymce .button.focus,
body#tinymce button:focus,
body#tinymce button.focus,
body#tinymce input[type=submit]:focus,
body#tinymce input[type=submit].focus,
body#tinymce a.call-to-action:focus,
body#tinymce a.call-to-action.focus {
outline: 0;
}
body#tinymce .button.disabled, body#tinymce .button:disabled,
body#tinymce button.disabled,
body#tinymce button:disabled,
body#tinymce input[type=submit].disabled,
body#tinymce input[type=submit]:disabled,
body#tinymce a.call-to-action.disabled,
body#tinymce a.call-to-action:disabled {
opacity: 0.65;
-webkit-box-shadow: none;
box-shadow: none;
}
body#tinymce .button:active, body#tinymce .button.active,
body#tinymce button:active,
body#tinymce button.active,
body#tinymce input[type=submit]:active,
body#tinymce input[type=submit].active,
body#tinymce a.call-to-action:active,
body#tinymce a.call-to-action.active {
background-image: none;
-webkit-box-shadow: 0 0 0 3px var(--primary-alpha), inset 0 3px 5px rgba(0, 0, 0, 0.125);
box-shadow: 0 0 0 3px var(--primary-alpha), inset 0 3px 5px rgba(0, 0, 0, 0.125);
}
body#tinymce .button,
body#tinymce button,
body#tinymce input[type=submit] {
background-color: var(--primary);
border-color: var(--primary);
color: var(--primary-fg);
}
body#tinymce .button:focus, body#tinymce .button.focus, body#tinymce .button:hover,
body#tinymce button:focus,
body#tinymce button.focus,
body#tinymce button:hover,
body#tinymce input[type=submit]:focus,
body#tinymce input[type=submit].focus,
body#tinymce input[type=submit]:hover {
background-color: var(--primary-dark);
border-color: var(--primary-dark);
color: var(--primary-fg);
}
body#tinymce .button:focus, body#tinymce .button.focus,
body#tinymce button:focus,
body#tinymce button.focus,
body#tinymce input[type=submit]:focus,
body#tinymce input[type=submit].focus {
-webkit-box-shadow: 0 0 0 2px var(--primary-fg), 0 0 0 4px var(--primary-dark);
box-shadow: 0 0 0 2px var(--primary-fg), 0 0 0 4px var(--primary-dark);
}
body#tinymce .button.button--accent,
body#tinymce button.button--accent,
body#tinymce input[type=submit].button--accent {
background-color: var(--accent);
border-color: var(--accent);
color: var(--accent-fg);
}
body#tinymce .button.button--accent:focus, body#tinymce .button.button--accent.focus, body#tinymce .button.button--accent:hover,
body#tinymce button.button--accent:focus,
body#tinymce button.button--accent.focus,
body#tinymce button.button--accent:hover,
body#tinymce input[type=submit].button--accent:focus,
body#tinymce input[type=submit].button--accent.focus,
body#tinymce input[type=submit].button--accent:hover {
background-color: var(--accent-dark);
border-color: var(--accent-dark);
color: var(--accent-fg);
}
body#tinymce .button.button--accent:focus, body#tinymce .button.button--accent.focus,
body#tinymce button.button--accent:focus,
body#tinymce button.button--accent.focus,
body#tinymce input[type=submit].button--accent:focus,
body#tinymce input[type=submit].button--accent.focus {
-webkit-box-shadow: 0 0 0 2px var(--accent-fg), 0 0 0 4px var(--accent-dark);
box-shadow: 0 0 0 2px var(--accent-fg), 0 0 0 4px var(--accent-dark);
}
body#tinymce .button.button--accent:active, body#tinymce .button.button--accent.active,
body#tinymce button.button--accent:active,
body#tinymce button.button--accent.active,
body#tinymce input[type=submit].button--accent:active,
body#tinymce input[type=submit].button--accent.active {
background-image: none;
-webkit-box-shadow: 0 0 0 3px var(--accent-alpha), inset 0 3px 5px rgba(0, 0, 0, 0.125);
box-shadow: 0 0 0 3px var(--accent-alpha), inset 0 3px 5px rgba(0, 0, 0, 0.125);
}
body#tinymce .call-to-action {
background-color: var(--primary-fg);
border-color: var(--primary);
color: var(--primary);
}
body#tinymce .call-to-action:focus, body#tinymce .call-to-action.focus, body#tinymce .call-to-action:hover {
background-color: var(--primary-fg);
border-color: var(--primary-dark);
color: var(--primary-dark);
}
body#tinymce .call-to-action:focus, body#tinymce .call-to-action.focus {
-webkit-box-shadow: 0 0 0 2px var(--primary-fg), 0 0 0 4px var(--primary-dark);
box-shadow: 0 0 0 2px var(--primary-fg), 0 0 0 4px var(--primary-dark);
}
body#tinymce .call-to-action.call-to-action--accent {
background-color: var(--accent-fg);
border-color: var(--accent);
color: var(--accent);
}
body#tinymce .call-to-action.call-to-action--accent:focus, body#tinymce .call-to-action.call-to-action--accent.focus, body#tinymce .call-to-action.call-to-action--accent:hover {
background-color: var(--accent-fg);
border-color: var(--accent-dark);
color: var(--accent-dark);
}
body#tinymce .call-to-action.call-to-action--accent:focus, body#tinymce .call-to-action.call-to-action--accent.focus {
-webkit-box-shadow: 0 0 0 2px var(--accent-fg), 0 0 0 4px var(--accent-dark);
box-shadow: 0 0 0 2px var(--accent-fg), 0 0 0 4px var(--accent-dark);
}
body#tinymce .call-to-action.call-to-action--accent:active, body#tinymce .call-to-action.call-to-action--accent.active {
background-image: none;
-webkit-box-shadow: 0 0 0 3px var(--accent-alpha), inset 0 3px 5px rgba(0, 0, 0, 0.125);
box-shadow: 0 0 0 3px var(--accent-alpha), inset 0 3px 5px rgba(0, 0, 0, 0.125);
}
body#tinymce [class$="--accent"] .call-to-action {
background-color: var(--accent);
border-color: var(--accent-fg);
color: var(--accent-fg);
}
body#tinymce [class$="--accent"] .call-to-action:focus, body#tinymce [class$="--accent"] .call-to-action.focus, body#tinymce [class$="--accent"] .call-to-action:hover {
background-color: var(--accent-dark);
border-color: var(--accent-fg);
color: var(--accent-fg);
}
body#tinymce [class$="--accent"] .call-to-action:focus, body#tinymce [class$="--accent"] .call-to-action.focus {
-webkit-box-shadow: 0 0 0 2px var(--accent-dark), 0 0 0 4px var(--accent-fg);
box-shadow: 0 0 0 2px var(--accent-dark), 0 0 0 4px var(--accent-fg);
}
body#tinymce [class$="--accent"] .call-to-action:active, body#tinymce [class$="--accent"] .call-to-action.active {
background-image: none;
-webkit-box-shadow: 0 0 0 3px var(--accent-alpha), inset 0 3px 5px rgba(0, 0, 0, 0.125);
box-shadow: 0 0 0 3px var(--accent-alpha), inset 0 3px 5px rgba(0, 0, 0, 0.125);
}
body#tinymce .button--circle {
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
background-color: var(--primary);
border-color: var(--primary);
border-radius: 50%;
border-style: solid;
border-width: 2px;
color: var(--primary-fg);
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
height: 3.75rem;
width: 3.75rem;
}
body#tinymce .button--circle:focus, body#tinymce .button--circle.focus, body#tinymce .button--circle:hover {
background-color: var(--primary-dark);
border-color: var(--primary-dark);
color: var(--primary-fg);
text-decoration: none;
}
body#tinymce .button--circle:focus, body#tinymce .button--circle.focus {
-webkit-box-shadow: 0 0 0 2px var(--primary-fg), 0 0 0 4px var(--primary-dark);
box-shadow: 0 0 0 2px var(--primary-fg), 0 0 0 4px var(--primary-dark);
}
body#tinymce .button--circle:active, body#tinymce .button--circle.active {
background-image: none;
-webkit-box-shadow: 0 0 0 3px var(--primary-alpha), inset 0 3px 5px rgba(0, 0, 0, 0.125);
box-shadow: 0 0 0 3px var(--primary-alpha), inset 0 3px 5px rgba(0, 0, 0, 0.125);
}
body#tinymce .button--circle--accent {
background-color: var(--accent);
color: var(--accent-fg);
}
body#tinymce .button--circle--accent:focus, body#tinymce .button--circle--accent.focus, body#tinymce .button--circle--accent:hover {
background-color: var(--accent-dark);
border-color: var(--accent-dark);
color: var(--accent-fg);
}
body#tinymce .button--circle--accent:focus, body#tinymce .button--circle--accent.focus {
-webkit-box-shadow: 0 0 0 2px var(--accent-fg), 0 0 0 4px var(--accent-dark);
box-shadow: 0 0 0 2px var(--accent-fg), 0 0 0 4px var(--accent-dark);
}
body#tinymce .button--circle--accent:active, body#tinymce .button--circle--accent.active {
-webkit-box-shadow: 0 0 0 3px var(--accent-alpha), inset 0 3px 5px rgba(0, 0, 0, 0.125);
box-shadow: 0 0 0 3px var(--accent-alpha), inset 0 3px 5px rgba(0, 0, 0, 0.125);
}
body#tinymce .page-section {
width: 100%;
padding: 4rem 1rem;
background: var(--body-bg);
text-align: center;
}
body#tinymce .page-section ul,
body#tinymce .page-section ol {
padding-left: 0;
list-style-position: inside;
}
body#tinymce .page-section--accent {
color: var(--accent-fg);
background: var(--accent);
}
body#tinymce .page-section--accent h2 {
color: var(--accent-fg);
}
body#tinymce .page-section--accent h2::before {
background: var(--accent-fg);
}
body#tinymce .page-section--bordered {
width: calc(100% - 2rem);
margin: 5rem auto 0;
border: solid 4px var(--accent);
}
body#tinymce .page-section--borderless {
-webkit-box-shadow: none;
box-shadow: none;
}
body#tinymce .block__subtitle {
font-size: 1.5rem;
margin-bottom: 1rem;
text-transform: uppercase;
}
@media screen and (min-width: 768px) {
body#tinymce .block__subtitle {
margin-bottom: 1.5rem;
}
}
body#tinymce .block-toggle__cta {
position: relative;
text-align: center;
}
@media screen and (min-width: 60rem) {
body#tinymce .block-toggle__cta {
display: none;
}
}
body#tinymce .block-toggle__cta__blurb {
font-size: 0.875rem;
margin-bottom: 0;
padding-bottom: 2.5rem;
}
body#tinymce .block-toggle__cta__button {
bottom: 0;
cursor: pointer;
font-size: 1.5rem;
left: 50%;
margin: 0;
position: absolute;
-webkit-transform: translate(-50%, 50%);
-o-transform: translate(-50%, 50%);
transform: translate(-50%, 50%);
z-index: 10;
color: var(--primary);
}
body#tinymce .block-toggle__cta__button svg {
width: 1.5rem;
height: 2rem;
}
body#tinymce .block-toggle__cta__button.--visible svg {
-webkit-transform: rotate(180deg);
-o-transform: rotate(180deg);
transform: rotate(180deg);
}
body#tinymce .block.block-toggle {
padding-bottom: 0;
}
@media screen and (max-width: 59.975rem) {
body#tinymce .block.block-toggle:not(.block-toggle--visible) .block-toggle__content {
display: none;
}
body#tinymce .block.block-toggle.block-toggle--visible .block-toggle__cta__blurb {
display: none;
}
}
body#tinymce .block.block-toggle.block-meta {
padding-bottom: 6rem;
}
@media screen and (min-width: 60rem) {
body#tinymce .has-sections .entry-content {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
width: 100%;
max-width: 90rem;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
-ms-flex-pack: distribute;
justify-content: space-around;
}
body#tinymce .page-section {
width: 100%;
max-width: 50rem;
margin: 4rem auto;
padding: 4rem 5.625rem;
-webkit-box-shadow: -3px 5px 4px 2px rgba(135, 135, 135, 0.09);
box-shadow: -3px 5px 4px 2px rgba(135, 135, 135, 0.09);
}
body#tinymce .page-section:first-of-type, body#tinymce .page-section:nth-of-type(2) {
width: calc(50% - 4rem);
}
body#tinymce .page-section:only-of-type {
width: 100%;
max-width: 50rem;
}
body#tinymce .page-section--bordered {
margin: 4rem auto;
width: 100%;
max-width: 50rem;
-webkit-box-shadow: none;
box-shadow: none;
}
body#tinymce .page-section--bordered:first-of-type, body#tinymce .page-section--bordered:nth-of-type(2) {
width: calc(50% - 4rem);
}
body#tinymce .page-section--bordered:only-of-type {
width: 100%;
max-width: 50rem;
}
}