/** * 20160517 张启松标题、作者左对齐、行间距 line-height:1.25em;改 line-height:1.8em; * Responsive modifications added. * Padding applied directly to the element (Mobile: 5%, Desktop: 8%). * Removed .container specific styles as HTML structure doesn't use it. */ /* --- Base Styles --- */ html { font-size: 16px; /* Base font size for rem units */ -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; text-size-adjust: 100%; scroll-behavior: smooth; } body { font-family: SimSun, "Microsoft YaHei", sans-serif; font-size: 1.1rem; line-height: 1.8; margin: 0; /* Reset default body margin */ /* Default padding (Mobile First): 5% left/right */ padding: 1rem 5%; /* Apply padding directly to body */ background-color: #fff; color: #333; word-wrap: break-word; overflow-wrap: break-word; box-sizing: border-box; /* Include padding in body's total width */ /* text-align: center; /* Let content elements define their alignment */ } /* --- General Styles --- */ a { text-decoration: none; color: #4a86e8; } a:hover, a:focus { text-decoration: underline; } .key { font-weight: bold !important; } hr { /* Adjust width relative to the padded body */ /* Max-width is more reliable here than percentage */ max-width: 300px; width: 80%; /* Will be 80% of the available content width inside the padded body */ margin: 1.5rem auto; border: 0; border-top: 1px solid #ccc; } /* --- Typography --- */ /* Titles - Using rem */ h1.title, h1.title_translate, p.title_translate, p.etitle, h1.etitle { font-weight: bold; font-size: 1.8rem; color: #4a86e8; text-align: center; margin: 1em 0 0.5em 0; line-height: 1.3; } .subtitle { font-weight: bold; font-size: 1.2rem; color: #4a86e8; text-align: center; margin: 1em 0 0.5em 0; line-height: 1.4; } /* Paragraphs - Using rem */ p.author_info, p.author_info_translate, p.author_organization, p.author_introduction, p.corresponding_author, p.abstract, p.keywords, p.article_number, p.document_code, p.classification_code, p.column_name, p.digital_object_unique_identifier, p.fund_project, p.received_date, p.revision_date, p.reference, p.meta, p.author_introduction_translate, p.corresponding_author_translate, p.abstract_translate, p.keywords_translate, p.article_number_translate, p.document_code_translate, p.classification_code_translate, p.column_name_translate, p.digital_object_unique_identifier_translate, p.fund_project_translate, p.received_date_translate, p.revision_date_translate, p.reference_translate, p.content, p.content_metadata { font-size: 1rem; text-align: justify; text-justify: inter-ideograph; text-indent: 0em; line-height: 1.8; margin: 0.7em 0; hyphens: auto; } /* Add common paragraph indent */ p.author_introduction, p.corresponding_author, p.abstract, p.keywords, p.content_introduction, p.content { text-indent: 2em; } /* Ensure metadata and centered/right text are not indented */ p.article_number, p.document_code, p.classification_code, p.column_name, p.digital_object_unique_identifier, p.fund_project, p.received_date, p.revision_date, p.reference, p.meta, p.author_introduction_translate, p.corresponding_author_translate, p.abstract_translate, p.keywords_translate, p.article_number_translate, p.document_code_translate, p.classification_code_translate, p.column_name_translate, p.digital_object_unique_identifier_translate, p.fund_project_translate, p.received_date_translate, p.revision_date_translate, p.reference_translate, p.author_info, p.author_info_translate, p.author_organization, p.content_right, p.author_info_right, p.content_center, p.content_reference, p.content_reference_right, p.content_reference_center, p.content_reference_left, p.figure_note, p.figure_title, p.table_note, p.table_title, .picture_figure_note, .picture_figure_title, .picture_table_note, .picture_table_title { text-indent: 0em; } /* Centered Author Info */ p.author_info, p.author_info_translate, p.author_organization { text-align: center; } /* Specific Paragraph Styles */ p.content_introduction { font-size: 0.9rem; font-weight: bold; line-height: 1.6; } p.content_right, p.author_info_right { font-size: 1rem; text-align: right; line-height: 1.8; margin: 0.5em 0; } p.content_left { font-size: 1rem; text-align: justify; text-justify: inter-ideograph; line-height: 1.8; margin: 0.5em 0; } p.content_center { font-size: 1rem; text-align: center; line-height: 1.8; margin: 0.5em 0; } /* Reference Paragraphs */ p.content_reference, p.content_reference_right, p.content_reference_center, p.content_reference_left { font-size: 0.9rem; line-height: 1.7; margin: 0.5em 0 0.5em 2em; padding-left: 1em; border-left: 3px solid #eee; color: #555; } p.content_reference { text-align: justify; } p.content_reference_right { text-align: right; margin-right: 2em; margin-left: auto; border-left: none; border-right: 3px solid #eee; padding-left: 0; padding-right: 1em;} p.content_reference_center { text-align: center; margin-left: auto; margin-right: auto; border: none; } p.content_reference_left { text-align: justify; } /* Section Titles */ h1.sect1 { text-align: center; font-size: 1.6rem; color: #4a86e8; font-weight: bold; margin: 1.5em 0 1em 0; line-height: 1.3; } h2.sect2, h3.sect3, h4.sect4, h5.sect5, h6.sect6 { text-align: left; color: #4a86e8; font-weight: bold; margin: 1.2em 0 0.8em 0; line-height: 1.4; } h2.sect2 { font-size: 1.4rem; text-indent: 0em; } h3.sect3 { font-size: 1.3rem; text-indent: 0em; } h4.sect4 { font-size: 1.2rem; text-indent: 0em; } h5.sect5 { font-size: 1.1rem; text-indent: 1em; } h6.sect6 { font-size: 1rem; text-indent: 2em; } /* --- Bold Span Tags --- */ span.author_info, span.author_introduction, span.corresponding_author, span.abstract, span.keywords, span.article_number, span.document_code, span.classification_code, span.column_name, span.digital_object_unique_identifier, span.fund_project, span.received_date, span.revision_date, span.reference, span.author_info_translate, span.author_introduction_translate, span.corresponding_author_translate, span.abstract_translate, span.keywords_translate, span.article_number_translate, span.document_code_translate, span.classification_code_translate, span.column_name_translate, span.digital_object_unique_identifier_translate, span.fund_project_translate, span.received_date_translate, span.revision_date_translate, span.reference_translate { font-weight: bold; } .keywords { margin-bottom: 2rem; } /* --- Images --- */ img { max-width: 100%; /* Images will be constrained by the padded body */ height: auto; display: block; margin-left: auto; margin-right: auto; vertical-align: middle; } /* Inline images */ img.character, img.inline, img.formula_inline, img.figure_inline, .picture_character, .picture_line, .picture_line_figure, .picture_line_formula { display: inline-block; height: 1.2em; vertical-align: -0.2em; margin: 0 0.1em; max-width: none; } img.formula_inline, .picture_line_formula { height: 1.4em; } /* In-paragraph images */ img.inparagraph, img.formula_inparagraph, img.picture_figure_line, img.figure_inparagraph { display: inline-block; vertical-align: middle; max-width: 80%; margin: 0 0.2em; } /* Image/Figure/Table Groups */ div.formula, div.figure, div.table, .picture_formula, .picture, .picture_center, .picture_left, .picture_right, .picture_figure, .picture_table { margin: 1.5em auto; text-align: center; text-indent: 0; } .picture_left { text-align: left; margin-left: 0; margin-right: auto; } .picture_right { text-align: right; margin-left: auto; margin-right: 0; } /* Image/Table captions and notes */ p.figure_note, p.figure_title, p.table_note, p.table_title, .picture_figure_note, .picture_figure_title, .picture_table_note, .picture_table_title { font-size: 0.9rem; line-height: 1.6; text-align: center; margin-top: 0.3em; margin-bottom: 0.3em; color: #555; text-indent: 0; } p.table_note, .picture_table_note { text-align: left; margin-top: 0.5em; } p.table_title, .picture_table_title { margin-bottom: 0.5em; } p.figure_title, .picture_figure_title { margin-top: 0.5em; } p.table_content, .picture_table_content { display: none; font-size: 0.8rem; text-align: left; line-height: 1.6; color: red; } .picture_figure_title span.emphasis_italic { font-size: 1em; font-style: italic; } /* Floating images */ .picture_left_float { float: left; margin: 0 1em 0.5em 0; text-align: left; } .picture_right_float { float: right; margin: 0 0 0.5em 1em; text-align: right; } /* Clearfix for floated elements - apply to the container *after* the float */ /* This might need to be applied to specific parent elements in the HTML if floats cause issues */ .clearfix::after { content: ""; display: table; clear: both; } /* --- Footnotes --- */ span.footnote_quote { color: rgb(0, 153, 255); font-size: 0.75em; vertical-align: super; position: relative; top: -0.5em; line-height: 0; margin: 0 0.1em; } span.footnote_content { color: rgb(160, 160, 160); font-size: 0.85rem; } /* --- Text Styles --- */ span.emphasis_superscript, span.superscript, span.superscript[tag] { font-size: 0.75em; vertical-align: super; position: relative; top: -0.5em; line-height: 0; } span.emphasis_subscript, span.subscript, span.subscript[tag] { font-size: 0.75em; vertical-align: sub; position: relative; top: 0.3em; line-height: 0; } span.superscript[tag], span.subscript[tag] { color: rgb(0, 153, 255); } span.emphasis_italic { font-style: italic; } span.emphasis_bold { font-weight: bold; } span.emphasis_under_line { text-decoration: underline; } span.emphasis_delete_line { text-decoration: line-through; } /* --- Advanced Markup --- */ .page_break { font-size: 1rem; text-decoration: none; text-align: center; color: red; border: none; border-top: 2px dashed red; margin: 2rem 0; padding: 0.5rem 0; display: block; } .page_break::before { content: "--- Page Break ---"; display: block; margin-bottom: 0.5rem;} span.pagenumber { display: none; color: red; } span.err { color: red; background-color: #ffeeee; padding: 0.1em 0.2em; border-radius: 3px; } /* --- Table-like Layout (.ztablevir) --- */ .ztablevir { display: table; width: 100%; /* Will be 100% of the available width inside the padded body */ border-collapse: collapse; margin: 1em 0; border: 1px solid #eee; box-sizing: border-box; } .ztablevir-th, .ztablevir-td { display: table-cell; padding: 0.6em 0.8em; vertical-align: top; border: 1px solid #eee; } .ztablevir-th { white-space: nowrap; font-weight: bold; background-color: #f9f9f9; text-align: right; padding-right: 1em; width: 1%; } .ztablevir-td { text-align: left; } .ztablevir-td p { margin: 0; padding: 0; text-indent: 0; text-align: left; } /* --- Media Queries for Responsiveness --- */ /* Styles for Larger Screens (Tablets and Desktops: 768px and wider) */ @media (min-width: 768px) { body { /* Increase padding for wider screens */ padding-left: 25%; /* Changed to 8% */ padding-right: 25%; /* Changed to 8% */ /* Optional: Add a max-width to the body itself for very large screens, */ /* but be aware it interacts differently than a separate container */ /* max-width: 1400px; */ /* margin-left: auto; /* Required if max-width is set on body */ /* margin-right: auto; /* Required if max-width is set on body */ } /* Optional: Increase base font size slightly on larger screens */ /* html { font-size: 17px; } */ } /* Styles for Medium Screens (Stack .ztablevir, etc. - Screens smaller than 768px) */ @media (max-width: 767.98px) { html { font-size: 15px; } /* Adjust titles for medium screens */ h1.title, h1.title_translate, p.title_translate, p.etitle, h1.etitle { font-size: 1.6rem; } h1.sect1 { font-size: 1.5rem; } h2.sect2 { font-size: 1.3rem; } h3.sect3 { font-size: 1.2rem; } h4.sect4 { font-size: 1.1rem; } /* Adjust .ztablevir layout for stacking */ .ztablevir { display: block; border: none; } .ztablevir-th, .ztablevir-td { display: block; width: 100%; text-align: left !important; border: none; border-bottom: 1px solid #eee; box-sizing: border-box; padding: 0.5em 0; } .ztablevir-th { font-weight: bold; background-color: transparent; white-space: normal; width: auto; border-bottom: none; padding-bottom: 0.2em; } .ztablevir-td { padding-top: 0.2em; padding-bottom: 0.8em; } /* Remove border from the very last element in the stack */ .ztablevir > :last-child { border-bottom: none; } } /* Styles for Small Screens (Phones: 480px and narrower) */ @media (max-width: 480px) { html { font-size: 14px; } body { line-height: 1.7; /* Padding remains 5% from the base rule */ } /* Adjust titles for small screens */ h1.title, h1.title_translate, p.title_translate, p.etitle, h1.etitle { font-size: 1.4rem; } h1.sect1 { font-size: 1.3rem; } h2.sect2 { font-size: 1.2rem; } h3.sect3 { font-size: 1.1rem; } h4.sect4, h5.sect5, h6.sect6 { font-size: 1rem; } /* Reduce paragraph indent on small screens */ p.author_introduction, p.corresponding_author, p.abstract, p.keywords, p.content_introduction, p.content, h5.sect5, h6.sect6 { text-indent: 1.5em; } /* Reduce reference indent/padding */ p.content_reference, p.content_reference_left { margin-left: 1em; padding-left: 0.8em; } p.content_reference_right { margin-right: 1em; padding-right: 0.8em; } /* Disable image floating on small screens */ .picture_left_float, .picture_right_float { float: none; margin: 1em auto; text-align: center; display: block; } }