/** * Base styles * * @package PoliCromix template * @author Alejandro Caballero - lava.caballero@gmail.com */ @import url('https://fonts.googleapis.com/css2?family=Roboto+Condensed:ital,wght@0,400;0,700;1,400;1,700&family=Roboto+Mono:ital,wght@0,400;0,700;1,400;1,700&display=swap'); @import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@400..900&family=PT+Sans:ital,wght@0,400;0,700;1,400;1,700&display=swap'); @import url('https://fonts.googleapis.com/css2?family=Rajdhani:wght@400;700&display=swap'); /* References */ :root { --ref-colorB: #00092C; /* Body background */ --ref-colorB2: #001361; /* Featured posts background */ --ref-color0: #dfdfdf; /* Normal text */ --ref-color1: #ffffff; /* Headings */ --ref-color2: #24BAFC; /* Links on dark backgrounds, bold in headings */ --ref-color3: #196c91; /* Links on light backgrounds */ --ref-color4: #ffffff; /* Buttons, post rating stars, big highlight characters, lines */ --ref-color5: #00084a; /* Content frames, sidebars */ --ref-color6: #24BAFC; /* Footer bullets */ --ref-color2-darker: #00084a; --ref-color2-lighter: #78e1fc; --ref-color3-lighter: #23a3df; --headings-font: 'Cinzel', Arial, Helvetica, sans-serif; --body-font: 'PT Sans', Arial, Helvetica, sans-serif; --tables-font: 'Roboto Condensed', 'Arial Narrow', Arial, Helvetica, sans-serif; --mono-font: 'Roboto Mono', Consolas, 'Lucida Console', 'Courier New', monospace; --arial-font: arial, helvetica, sans-serif; --special-font: "Rajdhani", sans-serif; --ref-color-buttons: #001b81; --button-text-stroke: 0 0 2px var(--ref-color-buttons), 0 0 2px var(--ref-color-buttons), 0 0 2px var(--ref-color-buttons), 0 0 2px var(--ref-color-buttons), 0 0 2px var(--ref-color-buttons), 0 0 2px var(--ref-color-buttons), 0 0 2px var(--ref-color-buttons), 0 0 2px var(--ref-color-buttons), 0 0 2px var(--ref-color-buttons), 0 0 2px var(--ref-color-buttons) ; --button-hover-stroke: 0 0 2px var(--ref-color-buttons), 0 0 2px var(--ref-color-buttons), 0 0 2px var(--ref-color-buttons), 0 0 2px var(--ref-color-buttons), 0 0 2px var(--ref-color-buttons), 0 0 2px var(--ref-color-buttons), 0 0 2px var(--ref-color-buttons), 0 0 2px var(--ref-color-buttons), 0 0 2px var(--ref-color-buttons), 0 0 2px var(--ref-color-buttons), 0 2px 2px var(--ref-color-buttons), 0 2px 2px var(--ref-color-buttons), 0 2px 2px var(--ref-color-buttons), 0 2px 2px var(--ref-color-buttons), 0 2px 2px var(--ref-color-buttons), 0 2px 2px var(--ref-color-buttons), 0 2px 2px var(--ref-color-buttons), 0 2px 2px var(--ref-color-buttons), 0 2px 2px var(--ref-color-buttons), 0 2px 2px var(--ref-color-buttons) ; } .ref-colorB { color: #00092C } /* Body background */ .ref-color0 { color: #c0c0c0 } /* Normal text */ .ref-color1 { color: #ffffff } /* Headings */ .ref-color2 { color: #24BAFC } /* Links on dark backgrounds, bold in headings */ .ref-color3 { color: #24BAFC } /* Links on light backgrounds */ .ref-color4 { color: #ffffff } /* Buttons, post rating stars, big highlight characters, lines */ .ref-color5 { color: #00084a } /* Content frames, sidebars */ .ref-color6 { color: #24BAFC } /* Footer bullets */ .--headings { font-family: var(--headings-font); font-variant: small-caps; } .--body { font-family: var(--body-font); } .--tables { font-family: var(--tables-font); } .--mono { font-family: var(--mono-font); } body { font-family: var(--body-font); font-size: 12pt; color: white; background-color: var(--ref-colorB); } th { font-family: var(--tables-font); font-size: 11pt; color: var(--ref-color0); } td { font-family: var(--tables-font); font-size: 11pt; color: var(--ref-color0); } #header { font-family: var(--body-font); font-size: 12pt; } #footer { font-family: var(--body-font); font-size: 11pt; } #content { line-height: 1.2em; padding-top: 20px; } #admin_menu { font-family: var(--tables-font); font-size: 10pt; } .dropdown_menu { font-family: var(--arial-font); } body.popup { color: black; background-color: transparent; } textarea, pre, .fixed_font, code { font-family: var(--mono-font); font-size: 10pt; } textarea.no_fw_font { font-family: var(--body-font); } h1 { font-family: var(--headings-font); font-size: 34pt; line-height: 36pt; font-variant: small-caps; } h2 { font-family: var(--headings-font); font-size: 32pt; line-height: 34pt; font-variant: small-caps; } h3 { font-family: var(--headings-font); font-size: 30pt; line-height: 32pt; font-variant: small-caps; } h4 { font-family: var(--headings-font); font-size: 28pt; line-height: 30pt; font-variant: small-caps; } h5 { font-family: var(--headings-font); font-size: 26pt; line-height: 28pt; font-variant: small-caps; } #footer h1 { font-family: var(--body-font); font-size: 24pt; line-height: 26pt; font-variant: none; } #footer h2 { font-family: var(--body-font); font-size: 22pt; line-height: 24pt; font-variant: none; } #footer h3 { font-family: var(--body-font); font-size: 20pt; line-height: 22pt; font-variant: none; } #footer h4 { font-family: var(--body-font); font-size: 18pt; line-height: 20pt; font-variant: none; } #footer h5 { font-family: var(--body-font); font-size: 16pt; line-height: 18pt; font-variant: none; } h1 a.small { font-family: var(--arial-font); font-size: 12pt; font-weight: bold; } h1 a.small:before { content: '[' } h1 a.small:after { content: ']' } /* Forms */ #post_form textarea[name="title"] { font-family: var(--headings-font); font-size: 18pt; min-height: 34px; height: 34px; font-variant: small-caps; } #media_form textarea[name="title"] { font-family: var(--headings-font); font-size: 18pt; min-height: 34px; height: 34px; font-variant: small-caps; } #post_form textarea[name="excerpt"] { font-family: var(--body-font); font-size: 12pt; min-height: 30px; height: 30px; } body.mce-content-body { background-color: var(--ref-colorB); margin: 0 10px; } /* Emojione adjustments */ body .emojione { height: 12pt; } th .emojione { height: 11pt; } td .emojione { height: 11pt; } #header .emojione { height: 12pt; } #footer .emojione { height: 11pt; } .fixed_font .emojione , code .emojione { height: 10pt; } h1 .emojione { height: 1em; } h2 .emojione { height: 1em; } h3 .emojione { height: 1em; } h4 .emojione { height: 1em; } h5 .emojione { height: 1em; } /* Admin - modules manager */ #modules_listing tr { -webkit-box-shadow: 1px 1px 5px 0 rgba(0, 0, 0, 0.25); -moz-box-shadow: 1px 1px 5px 0 rgba(0, 0, 0, 0.25); box-shadow: 1px 1px 5px 0 rgba(0, 0, 0, 0.25); } /* Admin - settings manager */ .settings_group { -webkit-box-shadow: 1px 1px 5px 0 rgba(0, 0, 0, 0.25); -moz-box-shadow: 1px 1px 5px 0 rgba(0, 0, 0, 0.25); box-shadow: 1px 1px 5px 0 rgba(0, 0, 0, 0.25); } /* Thumbnail placeholders */ .thumbnail { border: 1px solid; background-color: transparent; } .nav_table .thumbnail { display: inline-block; line-height: 0; border: 1px solid; background-color: transparent; position: relative; width: 230px; height: 110px; overflow: hidden; } .nav_table .thumbnail img { position: absolute; left: 50%; top: 50%; max-width: 100%; height: auto; -webkit-transform: translate(-50%,-50%); -ms-transform: translate(-50%,-50%); transform: translate(-50%,-50%); } .posts_index .thumbnail { border: none; } .posts_index .thumbnail img { width: 100%; } /* User profile styles */ #user_profile_area { background-color: white; box-shadow: 1px 1px 5px 0 rgba(0, 0, 0, 0.25); position: relative; } #user_profile_heading { background: var(--ref-colorB) center center no-repeat; background-size: cover; width: 100%; height: 300px; display: table; } #user_profile_area .details { width: 100%; height: 300px; padding: 0 10px 10px 195px; display: table-cell; text-align: left; vertical-align: bottom; color: white; font-weight: bold; text-shadow: 2px 2px 5px black; } #user_profile_area .display_name { font-size: 20pt; margin-bottom: 5px; } #user_profile_area .display_name .emojione { height: 20pt; } #user_profile_area .handler { font-size: 14pt; margin-bottom: 5px; } #user_profile_area .extras { font-size: 12pt; } #user_profile_area .avatar { background-color: white; padding: 5px; border: 1px solid silver; border-radius: 3px; display: inline-block; position: absolute; margin-top: 165px; margin-left: 20px; } #user_profile_area .avatar img { width: 150px; height: 150px; } #user_profile_tabs { min-height: 45px; margin-bottom: 20px; margin-left: 190px; margin-top: 5px; padding-bottom: 5px; } #user_profile_tabs .tab { display: inline-block; padding: 5px 8px; text-align: center; color: #22266D; border-radius: 3px; } #user_profile_tabs .tab.current { color: white; background-color: var(--ref-color2); text-decoration: none; } #user_info_sections { -moz-column-gap: 10px; -webkit-column-gap: 5px; column-gap: 5px; } #user_info_sections { -moz-column-count: 2; -webkit-column-count: 2; column-count: 2; } #user_info_sections section { display: inline-block; width: 100%; } #user_info_sections section form .field:last-child { margin-bottom: 0; } #user_info_sections .user_signature * , #user_info_sections .user_bio * { margin-top: 0; margin-bottom: 0; } #user_info_sections .user_signature img , #user_info_sections .user_bio img { max-width: 100%; } /* Signatures, for both base pages and tinymce */ .author_signature { margin-top: 20px; padding-top: 10px; padding-right: 20px; border-top: 2px solid silver; display: inline-block; width: auto; font-family: var(--arial-font); font-size: 11pt; line-height: normal; } body#tinymce[data-id="account_signature"] { font-family: var(--arial-font); font-size: 11pt; line-height: normal; } .author_signature *, body#tinymce[data-id="account_signature"] * { margin-top: 1px; margin-bottom: 1px; } .author_signature .emojione, body#tinymce[data-id="account_signature"] .emojione { height: 11pt; } /* Search form styles */ .search_form .form_wrapper { white-space: nowrap; overflow: hidden; } .search_form input[name="s"] { font-size: 16px; width: 100%; padding: 6px 28px 6px 6px; } .search_form .submit_icon { font-size: 20px; line-height: 30px; z-index: 1; position: absolute; margin-left: -28px; } /* Sidebar generics */ .sidebar ul { padding-left: 12px; margin-top: 2px; margin-bottom: 0; } .sidebar ul li { margin-top: 0; margin-bottom: 2px; padding-bottom: 2px; border-bottom: 1px solid silver; } .sidebar ul li:last-child { border-bottom: 0; padding-bottom: 0; } /* ETC */ .records_browser.filter_links { font-family: var(--arial-font); font-size: 10pt; } .records_browser.filter_links .framed_content { cursor: pointer; padding: 2px 4px; line-height: 14pt; text-decoration: none; } .records_browser.filter_links .framed_content.seamless_right { border-right: none; border-top-right-radius: 0; border-bottom-right-radius: 0; margin-right: 0; } .records_browser.filter_links .framed_content.seamless_left { border-left: none; border-top-left-radius: 0; border-bottom-left-radius: 0; margin-left: 0; } .windowed_image { background: transparent center center no-repeat; background-size: cover; } .nav_table tr { background-color: white; } .nav_table td { color: black; } .noty_message a:link, .noty_message a:visited, .noty_message .pseudo_link { color: black; } .noty_message a:hover, .noty_message .pseudo_link:hover { color: var(--ref-color2-darker); } /* Media lists on record browsers */ .media_bullet { padding: 0 0 4px 22px; margin-bottom: 2px; position: relative; color: #bf0060; border-bottom: 1px solid silver; } .media_bullet .bullet { position: absolute; margin-left: -22px; margin-top: 2px; } .media_bullet:last-child { border-bottom: none; margin-bottom: 0; } .media_bullet a, .media_bullet .pseudo_link { color: #bf0060; }