/*----------------------------------------------------------------------- MOBILE CONFIGURATION (portrait orientation) -----------------------------------------------------------------------*/ /* __________________________________________________________________________________ */ /* ALL POPUPs /* ¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨ */ .popup .popup-background, .popup .popup-content-container { width: var(--page_container_width_px); height: var(--page_container_height_px); position: absolute; z-index: 500; top: 0; left: 0; } .popup .popup-background { background-color: rgba(0, 0, 0, 0.9); display: none; } .popup .popup-content-container { visibility: hidden; } .popup .popup-content-container .popup-content { max-width: 100%; max-height: 100%; padding: var(--popup_top_bottom_padding_px) var(--popup_left_right_padding_px); } .popup .scroll-container { overflow-y: scroll; text-align: center; } /* __________________________________________________________________________________ */ /* UNIVERSAL POPUPs /* ¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨ */ .popup:not([data-popup-type="book-details"]) h3 { margin-bottom: calc(2 * var(--popup_top_bottom_padding_px)); line-height: 1.6rem; } /* ---- bookastic-buttons ------------------------------------------------------- */ .popup .bookastic-button { white-space: nowrap; } .popup:not([data-popup-type="book-details"]) .bookastic-button:first-of-type { margin-top: calc(2 * var(--popup_top_bottom_padding_px)); } .popup:not([data-popup-type="book-details"]) .bookastic-button:not(:first-of-type) { margin-top: var(--popup_top_bottom_padding_px); } /* ---- forms ------------------------------------------------------------------- */ .popup:not([data-popup-type="book-details"]) form > p:first-of-type { margin-bottom: calc(0.4rem + (var(--popup_top_bottom_padding_px) / 2)); } .popup:not([data-popup-type="book-details"], [data-popup-type="contact-form"]) input:not([type="radio"]), .popup:not([data-popup-type="book-details"], [data-popup-type="contact-form"]) textarea { border: 1px solid white; border-radius: 6px; background-color: transparent; color: var(--verylightgreen_color); padding: 0 calc(var(--popup_left_right_padding_px) / 2); } .popup:not([data-popup-type="book-details"]) input:not([type="radio"])::placeholder, .popup:not([data-popup-type="book-details"]) textarea::placeholder { font-style: italic; color: white; opacity: 0.5; } .popup:not([data-popup-type="book-details"], [data-popup-type="contact-form"]) .form-section { margin-bottom: calc(var(--popup_top_bottom_padding_px) / 2); } .popup:not([data-popup-type="book-details"], [data-popup-type="contact-form"]) .form-label, .popup:not([data-popup-type="book-details"], [data-popup-type="contact-form"]) .form-input { display: inline-block; } .popup:not([data-popup-type="book-details"], [data-popup-type="contact-form"]) .form-label { padding-right: var(--popup_left_right_padding_px); text-align: right; width: 37%; } .popup:not([data-popup-type="book-details"], [data-popup-type="contact-form"]) .form-input { width: 63%; text-align: left; } .popup:not([data-popup-type="book-details"]) input[type="radio"]:checked + label { color: var(--verylightgreen_color); } .popup:not([data-popup-type="book-details"]) .form-input[data-form-input-type="radio"] > div { display: inline-block; } .popup:not([data-popup-type="book-details"]) .form-input[data-form-input-type="radio"] > div:first-of-type { margin-right: calc(var(--popup_left_right_padding_px) / 2); } /* __________________________________________________________________________________ */ /* LOADING-IN-PROGRESS POPUP /* ¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨ */ .popup[data-popup-type="loading-in-progress"] h4 { text-align: center; font-size: 0.95rem; line-height: 1rem; margin-bottom: 1.5rem; } .popup[data-popup-type="loading-in-progress"] .progress-bar-container { height: 0.5rem; width: 14rem; border: 1px solid rgba(255, 255, 255, 0.8); margin: auto; } .popup[data-popup-type="loading-in-progress"] .progress-bar-container .progress-bar { height: 100%; width: 20%; background-color: var(--brown_color); } /* __________________________________________________________________________________ */ /* REQUIRED-LOGIN POPUPs /* ¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨ */ /* __________________________________________________________________________________ */ /* REQUIRED-LOGIN POPUP /* ¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨ */ [data-popup-type="required-login"] .delimiter { border-bottom: 1px solid white; width: 80%; margin-left: auto; margin-right: auto; } [data-popup-type="required-login"] .scroll-container > p, [data-popup-type="required-login"] .login-form, [data-popup-type="required-login"] .delimiter { margin-bottom: calc(1.5 * var(--popup_top_bottom_padding_px)); } [data-popup-type="required-login"] .see-general-terms-button { text-decoration: underline; } /* __________________________________________________________________________________ */ /* USER-SETTINGS POPUPs /* ¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨ */ /* __________________________________________________________________________________ */ /* USER-SETTINGS POPUP /* ¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨ */ [data-popup-type="user-settings"] .popup-content { width: 100%; } /* __________________________________________________________________________________ */ /* EMAIL-UPDATING POPUP /* ¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨ */ [data-popup-type="email-updating"] .popup-content { width: 100%; } /* __________________________________________________________________________________ */ /* LEGAL-NOTICES POPUP /* ¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨ */ [data-popup-type="legal-notices"] .scroll-container > div:not(:last-of-type) { margin-bottom: var(--popup_top_bottom_padding_px); } [data-popup-type="legal-notices"] .scroll-container .title { margin-bottom: 0.6rem; } [data-popup-type="legal-notices"] .scroll-container .content { color: var(--verylightgreen_color); } /* __________________________________________________________________________________ */ /* CONTACT-FORM POPUP /* ¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨ */ [data-popup-type="contact-form"] .popup-content { width: 100%; } [data-popup-type="contact-form"] .form-section:not(:last-of-type) { margin-bottom: var(--popup_top_bottom_padding_px); } [data-popup-type="contact-form"] .form-section:last-of-type { margin-bottom: calc(var(--popup_top_bottom_padding_px) / 2); } [data-popup-type="contact-form"] .form-label { display: block; text-align: center; margin-bottom: calc(var(--popup_top_bottom_padding_px) / 2); } [data-popup-type="contact-form"] .form-input { width: 80%; } [data-popup-type="contact-form"] input { border: none; border-bottom: 1px solid white; border-radius: 0px; background-color: transparent; color: var(--verylightgreen_color); padding: 0 calc(var(--popup_left_right_padding_px) / 2); text-align: center; } [data-popup-type="contact-form"] textarea { border: 1px solid white; border-radius: 0px; background-color: transparent; color: var(--verylightgreen_color); padding: calc(var(--popup_top_bottom_padding_px) / 2) calc(var(--popup_left_right_padding_px) / 2); height: calc(0.3 * var(--page_container_height_px)); resize: none; } /* __________________________________________________________________________________ */ /* GENERAL-TERMS POPUP /* ¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨ */ [data-popup-type="general-terms"] .scroll-container { text-align: unset; } [data-popup-type="general-terms"] ol > li > p:first-of-type { text-transform: uppercase; } [data-popup-type="general-terms"] ol > li { list-style-type: decimal; } [data-popup-type="general-terms"] ul > li { list-style-type: square; } /* __________________________________________________________________________________ */ /* SEARCH-HELP POPUP /* ¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨ */ [data-popup-type="search-help"] .scroll-container { text-align: unset; } [data-popup-type="search-help"] ol > li > p:first-of-type { text-transform: uppercase; } [data-popup-type="search-help"] ol > li { list-style-type: decimal; } [data-popup-type="search-help"] ul > li { list-style-type: square; } /* __________________________________________________________________________________ */ /* BOOK-DETAILS POPUP /* ¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨ */ [data-popup-type="book-details"] .popup-content-container .popup-content { width: var(--page_container_width_px); height: var(--page_container_height_px); } [data-popup-type="book-details"] .scroll-container { text-align: unset; } /*-- Ribbon -----------------------------------------------*/ [data-popup-type="book-details"] .ribbon { --ribbon_width: 3rem; --ribbon_height: calc(0.55 * var(--page_container_height_px)); background-color: var(--ribbon_main_color); width: var(--ribbon_width); height: var(--ribbon_height); position: relative; margin: 0 var(--popup_left_right_padding_px) calc((var(--ribbon_width) / 2) - 2px + var(--popup_top_bottom_padding_px)) 0; float: left; } [data-popup-type="book-details"] .ribbon .ribbon-medium-part-left::before, [data-popup-type="book-details"] .ribbon .ribbon-medium-part-right::after, [data-popup-type="book-details"] .ribbon::before, [data-popup-type="book-details"] .ribbon::after { content: ""; display: block; border-top: none; position: absolute; bottom: calc(0px - (var(--ribbon_width) / 2) + 2px); } [data-popup-type="book-details"] .ribbon .ribbon-medium-part-left::before, [data-popup-type="book-details"] .ribbon::before { border-left: calc((var(--ribbon_width) / 2) + 2px) solid var(--ribbon_main_color); border-right: none; border-bottom: calc(var(--ribbon_width) / 2) solid transparent; left: 0; } [data-popup-type="book-details"] .ribbon .ribbon-medium-part-right::after, [data-popup-type="book-details"] .ribbon::after { border-left: none; border-right: calc((var(--ribbon_width) / 2) + 2px) solid var(--ribbon_main_color); border-bottom: calc(var(--ribbon_width) / 2) solid transparent; right: 0; } [data-popup-type="book-details"] .ribbon .book-title { color: black; white-space: nowrap; writing-mode: vertical-lr; transform: rotateZ(180deg); font-size: 1.3rem; line-height: var(--ribbon_width); margin: 0 auto; padding: calc(0.02 * var(--page_container_height_px)) 0; position: absolute; } [data-popup-type="book-details"] .ribbon .ribbon-medium-part-left, [data-popup-type="book-details"] .ribbon .ribbon-medium-part-right, [data-popup-type="book-details"] .ribbon .ribbon-last-part-left, [data-popup-type="book-details"] .ribbon .ribbon-last-part-right { display: none; } /*-- Popup buttons ----------------------------------------*/ [data-popup-type="book-details"] .popup-buttons-container { float: right; margin: 0 0 var(--popup_top_bottom_padding_px) var(--popup_left_right_padding_px); } [data-popup-type="book-details"] .popup-buttons-container .popup-previous-button, [data-popup-type="book-details"] .popup-buttons-container .close-all-book-details-popups-button { height: calc(0.035 * var(--page_container_height_px)); opacity: 0.5; } [data-popup-type="book-details"] .popup-buttons-container .popup-previous-button:hover, [data-popup-type="book-details"] .popup-buttons-container .popup-previous-button:active, [data-popup-type="book-details"] .popup-buttons-container .popup-previous-button:focus, [data-popup-type="book-details"] .popup-buttons-container .close-all-book-details-popups-button:hover, [data-popup-type="book-details"] .popup-buttons-container .close-all-book-details-popups-button:active, [data-popup-type="book-details"] .popup-buttons-container .close-all-book-details-popups-button:focus { opacity: 1; cursor: pointer; } [data-popup-type="book-details"] .popup-buttons-container .popup-previous-button { margin-right: calc(var(--popup_left_right_padding_px) / 2); } /*-- Tab-content ------------------------------------------*/ [data-popup-type="book-details"] .tab-content { height: 100%; } /*-- Front-cover, h4, h5 ------------------------------*/ [data-popup-type="book-details"] .front-cover { height: calc(0.25 * var(--page_container_height_px)); margin-bottom: var(--popup_top_bottom_padding_px); vertical-align: bottom; } [data-popup-type="book-details"] h4 { font-size: 1.1rem; line-height: 1.2rem; } [data-popup-type="book-details"] h5 { font-size: 1rem; line-height: 1.2rem; color: var(--khaki_color); } /*-- Tags -----------------------------------------*/ [data-popup-type="book-details"] .tags-container { overflow-x: hidden; } [data-popup-type="book-details"] .tags-container .row:not(:last-child) { margin-bottom: 0.3rem; } [data-popup-type="book-details"] .tags-container .tag:not(:last-child) { margin-right: 0.3rem; } [data-popup-type="book-details"] .tags-container .tag { padding: 0.3rem 0.5rem 0.2rem; height: calc(0.3rem + 0.7rem + 0.2rem); font-family: 'courier_primeregular'; font-size: 0.7rem; line-height: 0.7rem; background-color: var(--khaki_color); white-space: nowrap; } /*-- Quotation ----------------------------------------*/ [data-popup-type="book-details"] .quotation { line-height: 1.1rem; } [data-popup-type="book-details"] .quotation .quotation-mark { font-size: 1.4rem; margin: 0 0.3rem; vertical-align: -0.2rem; } [data-popup-type="book-details"] .quotation-caption { font-family: 'lobster_tworegular'; font-size: 1rem; line-height: 1.2rem; color: var(--khaki_color); text-align: right; } /*-- Tab-name = presentation --------------------------*/ /*-- Series & author ------------------------------*/ [data-popup-type="book-details"] [data-tab-name="presentation"] .book-series:hover, [data-popup-type="book-details"] [data-tab-name="presentation"] .book-series:active, [data-popup-type="book-details"] [data-tab-name="presentation"] .book-series:focus, [data-popup-type="book-details"] [data-tab-name="presentation"] .author:hover, [data-popup-type="book-details"] [data-tab-name="presentation"] .author:active, [data-popup-type="book-details"] [data-tab-name="presentation"] .author:focus { color: var(--verylightgreen_color); } /*-- Tags -----------------------------------------*/ [data-popup-type="book-details"] [data-tab-name="presentation"] .tags-container:hover .tag, [data-popup-type="book-details"] [data-tab-name="presentation"] .tags-container:active .tag, [data-popup-type="book-details"] [data-tab-name="presentation"] .tags-container:focus .tag { background-color: var(--verylightgreen_color); } [data-popup-type="book-details"] [data-tab-name="presentation"] .tags-container:hover .tag span, [data-popup-type="book-details"] [data-tab-name="presentation"] .tags-container:active .tag span, [data-popup-type="book-details"] [data-tab-name="presentation"] .tags-container:focus .tag span, [data-popup-type="book-details"] [data-tab-name="presentation"] .tags-container:hover .tag::before, [data-popup-type="book-details"] [data-tab-name="presentation"] .tags-container:active .tag::before, [data-popup-type="book-details"] [data-tab-name="presentation"] .tags-container:focus .tag::before, [data-popup-type="book-details"] [data-tab-name="presentation"] .tags-container:hover .tag::after, [data-popup-type="book-details"] [data-tab-name="presentation"] .tags-container:active .tag::after, [data-popup-type="book-details"] [data-tab-name="presentation"] .tags-container:focus .tag::after { color: black; } /*-- Add & remove book buttons --------------------*/ [data-popup-type="book-details"] [data-tab-name="presentation"] .add-remove-book-buttons-container { margin-bottom: var(--popup_top_bottom_padding_px); clear: left; } [data-popup-type="book-details"] [data-tab-name="presentation"] .add-remove-book-buttons[data-activated="yes"] { opacity: 1; cursor: pointer; } [data-popup-type="book-details"] [data-tab-name="presentation"] .add-remove-book-buttons[data-activated="no"] { opacity: 0.5; cursor: unset; } [data-popup-type="book-details"] [data-tab-name="presentation"] .add-remove-book-buttons { background-color: transparent; border: 1px solid var(--verylightgreen_color); border-radius: 8px; font-size: 0.8rem; line-height: 1.1rem; padding: 0.4rem 0.6rem 0.45rem; flex-basis: 50%; } [data-popup-type="book-details"] [data-tab-name="presentation"] .add-remove-book-buttons:first-of-type { margin-right: var(--popup_left_right_padding_px); } [data-popup-type="book-details"] [data-tab-name="presentation"] .add-remove-book-buttons[data-activated="yes"]:hover, [data-popup-type="book-details"] [data-tab-name="presentation"] .add-remove-book-buttons[data-activated="yes"]:active, [data-popup-type="book-details"] [data-tab-name="presentation"] .add-remove-book-buttons[data-activated="yes"]:focus { background-color: var(--verylightgreen_color); } [data-popup-type="book-details"] [data-tab-name="presentation"] .add-remove-book-buttons[data-activated="yes"]:hover span, [data-popup-type="book-details"] [data-tab-name="presentation"] .add-remove-book-buttons[data-activated="yes"]:active span, [data-popup-type="book-details"] [data-tab-name="presentation"] .add-remove-book-buttons[data-activated="yes"]:focus span { color: black; } [data-popup-type="book-details"] [data-tab-name="presentation"] .add-remove-book-buttons span { display: inline-block; } /*-- Quotation ------------------------------------*/ [data-popup-type="book-details"] [data-tab-name="presentation"] .quotation-container { clear: left; } [data-popup-type="book-details"] [data-tab-name="presentation"] .quotation:hover + .quotation-caption, [data-popup-type="book-details"] [data-tab-name="presentation"] .quotation:active + .quotation-caption, [data-popup-type="book-details"] [data-tab-name="presentation"] .quotation:focus + .quotation-caption, [data-popup-type="book-details"] [data-tab-name="presentation"] .quotation-caption:hover, [data-popup-type="book-details"] [data-tab-name="presentation"] .quotation-caption:active, [data-popup-type="book-details"] [data-tab-name="presentation"] .quotation-caption:focus { color: var(--verylightgreen_color); } [data-popup-type="book-details"] [data-tab-name="presentation"] .quotation { overflow: scroll; } [data-popup-type="book-details"] [data-tab-name="presentation"] .quotation-caption { margin: 0; } /*-- Tab-name = news ----------------------------------*/ [data-popup-type="book-details"] [data-tab-name="news"] .news-container .news-first-part, [data-popup-type="book-details"] [data-tab-name="news"] .news-container .news-second-part, [data-popup-type="book-details"] [data-tab-name="news"] .news-container .news-third-part { margin-bottom: calc(1.5 * var(--popup_top_bottom_padding_px)); } [data-popup-type="book-details"] [data-tab-name="news"] .piece-of-news { margin-bottom: 0.2rem; } [data-popup-type="book-details"] [data-tab-name="news"] h5, [data-popup-type="book-details"] [data-tab-name="news"] .label { padding: 0 10px; margin-bottom : 0; line-height: 1.5rem; } [data-popup-type="book-details"] [data-tab-name="news"] h5 { color: white; border-bottom: 1px solid rgba(255, 255, 255, 0.5); font-size: 0.9rem; } [data-popup-type="book-details"] [data-tab-name="news"] .label { text-transform: uppercase; font-size: 0.8rem; opacity: 0.5; } [data-popup-type="book-details"] [data-tab-name="news"] .piece-of-news[data-name="language"] h5 { text-transform: capitalize; } [data-popup-type="book-details"] [data-tab-name="news"] .piece-of-news[data-name="author"]:hover h5, [data-popup-type="book-details"] [data-tab-name="news"] .piece-of-news[data-name="author"]:active h5, [data-popup-type="book-details"] [data-tab-name="news"] .piece-of-news[data-name="author"]:focus h5, [data-popup-type="book-details"] [data-tab-name="news"] .piece-of-news[data-name="author"]:hover .label, [data-popup-type="book-details"] [data-tab-name="news"] .piece-of-news[data-name="author"]:active .label, [data-popup-type="book-details"] [data-tab-name="news"] .piece-of-news[data-name="author"]:focus .label, [data-popup-type="book-details"] [data-tab-name="news"] .piece-of-news[data-name="original-book"]:hover h5, [data-popup-type="book-details"] [data-tab-name="news"] .piece-of-news[data-name="original-book"]:active h5, [data-popup-type="book-details"] [data-tab-name="news"] .piece-of-news[data-name="original-book"]:focus h5, [data-popup-type="book-details"] [data-tab-name="news"] .piece-of-news[data-name="original-book"]:hover .label, [data-popup-type="book-details"] [data-tab-name="news"] .piece-of-news[data-name="original-book"]:active .label, [data-popup-type="book-details"] [data-tab-name="news"] .piece-of-news[data-name="original-book"]:focus .label, [data-popup-type="book-details"] [data-tab-name="news"] .piece-of-news[data-name="book-series"]:hover h5, [data-popup-type="book-details"] [data-tab-name="news"] .piece-of-news[data-name="book-series"]:active h5, [data-popup-type="book-details"] [data-tab-name="news"] .piece-of-news[data-name="book-series"]:focus h5, [data-popup-type="book-details"] [data-tab-name="news"] .piece-of-news[data-name="book-series"]:hover .label, [data-popup-type="book-details"] [data-tab-name="news"] .piece-of-news[data-name="book-series"]:active .label, [data-popup-type="book-details"] [data-tab-name="news"] .piece-of-news[data-name="book-series"]:focus .label, [data-popup-type="book-details"] [data-tab-name="news"] .piece-of-news[data-name="book-world"]:hover h5, [data-popup-type="book-details"] [data-tab-name="news"] .piece-of-news[data-name="book-world"]:active h5, [data-popup-type="book-details"] [data-tab-name="news"] .piece-of-news[data-name="book-world"]:focus h5, [data-popup-type="book-details"] [data-tab-name="news"] .piece-of-news[data-name="book-world"]:hover .label, [data-popup-type="book-details"] [data-tab-name="news"] .piece-of-news[data-name="book-world"]:active .label, [data-popup-type="book-details"] [data-tab-name="news"] .piece-of-news[data-name="book-world"]:focus .label { color: var(--verylightgreen_color); } [data-popup-type="book-details"] [data-tab-name="news"] .piece-of-news[data-name="author"]:hover h5, [data-popup-type="book-details"] [data-tab-name="news"] .piece-of-news[data-name="author"]:active h5, [data-popup-type="book-details"] [data-tab-name="news"] .piece-of-news[data-name="author"]:focus h5, [data-popup-type="book-details"] [data-tab-name="news"] .piece-of-news[data-name="original-book"]:hover h5, [data-popup-type="book-details"] [data-tab-name="news"] .piece-of-news[data-name="original-book"]:active h5, [data-popup-type="book-details"] [data-tab-name="news"] .piece-of-news[data-name="original-book"]:focus h5, [data-popup-type="book-details"] [data-tab-name="news"] .piece-of-news[data-name="book-series"]:hover h5, [data-popup-type="book-details"] [data-tab-name="news"] .piece-of-news[data-name="book-series"]:active h5, [data-popup-type="book-details"] [data-tab-name="news"] .piece-of-news[data-name="book-series"]:focus h5, [data-popup-type="book-details"] [data-tab-name="news"] .piece-of-news[data-name="book-world"]:hover h5, [data-popup-type="book-details"] [data-tab-name="news"] .piece-of-news[data-name="book-world"]:active h5, [data-popup-type="book-details"] [data-tab-name="news"] .piece-of-news[data-name="book-world"]:focus h5 { border-bottom: 1px solid rgba(160, 160, 131, 0.5); } /*-- Tab-name = synopsis ------------------------------*/ [data-popup-type="book-details"] [data-tab-name="synopsis"] .synopsis-container p { line-height: 1.1rem; } /*-- Tab-name = keywords ------------------------------*/ [data-popup-type="book-details"] [data-tab-name="keywords"] .keywords-container { overflow-x: hidden; position: relative; } [data-popup-type="book-details"] [data-tab-name="keywords"] .classification .question-label .triangle { border-left : 0.5rem solid var(--khaki_color); } [data-popup-type="book-details"] [data-tab-name="keywords"] .classification .question-label .triangle.unrolled { border-top : 0.5rem solid var(--khaki_color) !important; } /*-- Tab-name = author --------------------------------*/ [data-popup-type="book-details"] [data-tab-name="author"] .author-container p { line-height: 1.1rem; } [data-popup-type="book-details"] [data-tab-name="author"] .portrait { float: left; shape-margin: var(--popup_left_right_padding_px); margin-right: var(--popup_left_right_padding_px); margin-bottom: var(--popup_top_bottom_padding_px); filter: grayscale(100%); max-height: 300px; } [data-popup-type="book-details"] [data-tab-name="author"] .portrait.fixed { position: fixed; } [data-popup-type="book-details"] [data-tab-name="author"] .portrait.hidden-shaping { visibility: hidden; } /*-- Tab-name = book-series ---------------------------*/ [data-popup-type="book-details"] [data-tab-name="book-series"] h5 { margin-bottom: var(--popup_top_bottom_padding_px); } [data-popup-type="book-details"] [data-tab-name="book-series"] .collection-title[data-unwrapped="no"]::before { content: "+"; } [data-popup-type="book-details"] [data-tab-name="book-series"] .collection-title[data-unwrapped="yes"]::before { content: "-"; } [data-popup-type="book-details"] [data-tab-name="book-series"] .collection-title[data-unwrapped="no"]::before, [data-popup-type="book-details"] [data-tab-name="book-series"] .collection-title[data-unwrapped="yes"]::before { display: inline-block; width: 0.7rem; height: 0.7rem; line-height: 0.7rem; border: 1px solid white; margin-right: 0.5rem; text-align: center; } [data-popup-type="book-details"] [data-tab-name="book-series"] .collection-container { padding: 0.4rem 0; } [data-popup-type="book-details"] [data-tab-name="book-series"] .book-container { text-align: center; } [data-popup-type="book-details"] [data-tab-name="book-series"] .book-container:not(:last-of-type) { margin-right: var(--popup_left_right_padding_px); } [data-popup-type="book-details"] [data-tab-name="book-series"] .book-container p { color: var(--verylightgreen_color); } [data-popup-type="book-details"] [data-tab-name="book-series"] .front-cover { height: 100px; margin-bottom: 0.4rem; } [data-popup-type="book-details"] [data-tab-name="book-series"] [data-current-book="yes"] .front-cover, [data-popup-type="book-details"] [data-tab-name="book-series"] .book-container[data-current-book="no"]:hover .front-cover, [data-popup-type="book-details"] [data-tab-name="book-series"] .book-container[data-current-book="no"]:active .front-cover, [data-popup-type="book-details"] [data-tab-name="book-series"] .book-container[data-current-book="no"]:focus .front-cover { outline: 1px solid var(--verylightgreen_color); outline-offset: -1px; } /*-- Tab-name = book-world ----------------------------*/ [data-popup-type="book-details"] [data-tab-name="book-world"] h4 { margin-bottom: var(--popup_top_bottom_padding_px); } [data-popup-type="book-details"] [data-tab-name="book-world"] .book-series-container { text-align: center; width: calc(50% - (var(--popup_left_right_padding_px) / 2)); margin-bottom: var(--popup_top_bottom_padding_px); } [data-popup-type="book-details"] [data-tab-name="book-world"] .book-series-container:not(:last-of-type) { margin-right: var(--popup_left_right_padding_px); } [data-popup-type="book-details"] [data-tab-name="book-world"] .front-cover { height: 180px; max-height: 300px; margin-bottom: 0.4rem; } [data-popup-type="book-details"] [data-tab-name="book-world"] .book-series-name { font-family: 'lobster_tworegular'; color: var(--khaki_color); font-size: 1rem; line-height: 1.2rem; } [data-popup-type="book-details"] [data-tab-name="book-world"] [data-current-book-series="yes"] .front-cover, [data-popup-type="book-details"] [data-tab-name="book-world"] .book-container[data-current-book-series="no"]:hover .front-cover, [data-popup-type="book-details"] [data-tab-name="book-world"] .book-container[data-current-book-series="no"]:active .front-cover, [data-popup-type="book-details"] [data-tab-name="book-world"] .book-container[data-current-book-series="no"]:focus .front-cover { outline: 1px solid var(--verylightgreen_color); outline-offset: -1px; } /*-- Book-details-nav -------------------------------------*/ [data-popup-type="book-details"] .book-details-nav { --circle_size_rem: 0.9rem; --line_thickness: 0.2rem; position: fixed; bottom: var(--popup_top_bottom_padding_px); width: calc(100% - (2 * var(--popup_left_right_padding_px))); margin-top: var(--popup_top_bottom_padding_px); } [data-popup-type="book-details"] .book-details-nav .tab-button { width: var(--circle_size_rem); overflow: visible; } [data-popup-type="book-details"] .book-details-nav .circle { width: var(--circle_size_rem); height: var(--circle_size_rem); border-radius: 50%; background-color: white; opacity: 0.5; position: relative; margin-bottom: 0.3rem; } [data-popup-type="book-details"] .book-details-nav .tab-button:hover .circle, [data-popup-type="book-details"] .book-details-nav .tab-button:active .circle, [data-popup-type="book-details"] .book-details-nav .tab-button:focus .circle, [data-popup-type="book-details"] .book-details-nav .tab-button:hover .tab-title, [data-popup-type="book-details"] .book-details-nav .tab-button:active .tab-title, [data-popup-type="book-details"] .book-details-nav .tab-button:focus .tab-title, [data-popup-type="book-details"] .book-details-nav .tab-button[data-selected="yes"] .circle, [data-popup-type="book-details"] .book-details-nav .tab-button[data-selected="yes"] .tab-title { opacity: 1; } [data-popup-type="book-details"] .book-details-nav .tab-button:hover .tab-title::after, [data-popup-type="book-details"] .book-details-nav .tab-button:active .tab-title::after, [data-popup-type="book-details"] .book-details-nav .tab-button:focus .tab-title::after, [data-popup-type="book-details"] .book-details-nav .tab-button[data-selected="yes"] .tab-title::after { content: ""; display: block; width: calc(100% + 10px); height: 1px; background-color: white; position: absolute; bottom: -2px; left: calc(50% - ((100% + 10px) / 2)); } [data-popup-type="book-details"] .book-details-nav .tab-title { text-transform: uppercase; font-size: 1.1rem; line-height: 1rem; text-align: center; position: relative; opacity: 0.5; margin-bottom: 0; white-space: nowrap; } [data-popup-type="book-details"] .book-details-nav .line { height: var(--line_thickness); background-color: white; opacity: 0.5; margin-top: calc((var(--circle_size_rem) - var(--line_thickness)) / 2); } /*----------------------------------------------------------------------- MOBILE CONFIGURATION (landscape orientation) -----------------------------------------------------------------------*/ @media (orientation: landscape) { /* __________________________________________________________________________________ */ /* UNIVERSAL POPUPs /* ¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨ */ .popup:not([data-popup-type="book-details"]) h3 { margin-bottom: var(--popup_top_bottom_padding_px); } /* ---- bookastic-buttons ------------------------------------------------------- */ .popup:not([data-popup-type="book-details"]) .bookastic-buttons-container { display: flex; flex-direction: row; justify-content: space-around; } .popup:not([data-popup-type="book-details"]) .bookastic-button { margin-top: var(--popup_top_bottom_padding_px) !important; } .popup:not([data-popup-type="book-details"]) .bookastic-button:not(:last-of-type) { margin-right: var(--popup_left_right_padding_px); } /* __________________________________________________________________________________ */ /* REQUIRED-LOGIN POPUPs /* ¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨ */ /* __________________________________________________________________________________ */ /* REQUIRED-LOGIN POPUP /* ¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨ */ [data-popup-type="required-login"] .popup-content { width: 100%; } [data-popup-type="required-login"] .delimiter { border-right: 1px solid white; border-bottom: none; width: unset; margin: 0; } [data-popup-type="required-login"] .scroll-container > p { margin-bottom: var(--popup_top_bottom_padding_px); } [data-popup-type="required-login"] .scroll-container > div { display: flex; flex-direction: row; justify-content: space-between; } [data-popup-type="required-login"] form { flex-basis: 45%; margin: 0; } [data-popup-type="required-login"] .bookastic-button:nth-child(2) { order: 3; margin-right: 0 !important; } [data-popup-type="required-login"] .bookastic-button:nth-child(3) { order: 2; margin-right: var(--popup_left_right_padding_px) !important; } /* __________________________________________________________________________________ */ /* BOOK-DETAILS POPUP /* ¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨ */ /*-- Ribbon -----------------------------------------------*/ [data-popup-type="book-details"] .ribbon { --ribbon_height: calc(100% - (var(--ribbon_width) / 2) + 2px); margin-bottom: calc((var(--ribbon_width) / 2) - 2px); } /*-- Popup buttons ----------------------------------------*/ [data-popup-type="book-details"] .popup-buttons-container .popup-previous-button, [data-popup-type="book-details"] .popup-buttons-container .close-all-book-details-popups-button { height: calc(0.06 * var(--page_container_height_px)); } /*-- Tab-content ------------------------------------------*/ /*-- Front-cover, h4, h5 ------------------------------*/ [data-popup-type="book-details"] .front-cover { height: calc(0.7 * var(--page_container_height_px)); margin-bottom: 0; margin-right: var(--popup_left_right_padding_px); float: left; } /*-- Tab-name = presentation --------------------------*/ /*-- Add & remove book buttons --------------------*/ [data-popup-type="book-details"] [data-tab-name="presentation"] .add-remove-book-buttons-container { clear: none; margin-top: var(--popup_top_bottom_padding_px); } /*-- Quotation ------------------------------------*/ [data-popup-type="book-details"] [data-tab-name="presentation"] .quotation-container { clear: none; } /*-- Tab-name = book-series ---------------------------*/ [data-popup-type="book-details"] [data-tab-name="book-series"] .front-cover { float: none; margin-right: 0; } /*-- Tab-name = book-world ----------------------------*/ [data-popup-type="book-details"] [data-tab-name="book-world"] .book-series-container { width: calc(25% - (3 * var(--popup_left_right_padding_px) / 4)); } [data-popup-type="book-details"] [data-tab-name="book-world"] .front-cover { float: none; margin-right: 0; height: 160px; } } /*----------------------------------------------------------------------- TABLET CONFIGURATION (portrait orientation) -----------------------------------------------------------------------*/ @media (min-width: 767px) and (orientation: portrait) { /* __________________________________________________________________________________ */ /* BOOK-DETAILS POPUP /* ¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨ */ /*-- Ribbon -----------------------------------------------*/ [data-popup-type="book-details"] .ribbon { --ribbon_width: calc(0.7 * var(--page_container_width_px)); --ribbon_height: 3rem; --ribbon_offset: calc(var(--ribbon_height) / 2.8); float: none; margin: 0 auto calc((2 * var(--ribbon_offset)) + var(--popup_top_bottom_padding_px)); } [data-popup-type="book-details"] .ribbon .ribbon-medium-part-left::before, [data-popup-type="book-details"] .ribbon .ribbon-medium-part-right::after, [data-popup-type="book-details"] .ribbon::before, [data-popup-type="book-details"] .ribbon::after { bottom: calc(0px - var(--ribbon_offset)); } [data-popup-type="book-details"] .ribbon .ribbon-medium-part-left::before, [data-popup-type="book-details"] .ribbon::before { border-right: calc(var(--ribbon_height) / 2) solid var(--ribbon_shadow_color); border-left: none; border-bottom: var(--ribbon_offset) solid transparent; } [data-popup-type="book-details"] .ribbon .ribbon-medium-part-right::after, [data-popup-type="book-details"] .ribbon::after { border-right: none; border-left: calc(var(--ribbon_height) / 2) solid var(--ribbon_shadow_color); border-bottom: var(--ribbon_offset) solid transparent; } [data-popup-type="book-details"] .ribbon .book-title { writing-mode: horizontal-tb; transform: none; padding: 0 calc(0.02 * var(--page_container_height_px)); line-height: var(--ribbon_height); } [data-popup-type="book-details"] .ribbon .ribbon-medium-part-left, [data-popup-type="book-details"] .ribbon .ribbon-medium-part-right, [data-popup-type="book-details"] .ribbon .ribbon-last-part-left, [data-popup-type="book-details"] .ribbon .ribbon-last-part-right { display: block; width: var(--ribbon_height); height: var(--ribbon_height); position: absolute; } [data-popup-type="book-details"] .ribbon .ribbon-medium-part-left, [data-popup-type="book-details"] .ribbon .ribbon-medium-part-right { background-color: var(--ribbon_medium_color); top: var(--ribbon_offset); z-index: -1; } [data-popup-type="book-details"] .ribbon .ribbon-medium-part-left { left: calc(0px - (var(--ribbon_height) / 2)); } [data-popup-type="book-details"] .ribbon .ribbon-medium-part-right { right: calc(0px - (var(--ribbon_height) / 2)); } [data-popup-type="book-details"] .ribbon .ribbon-last-part-left, [data-popup-type="book-details"] .ribbon .ribbon-last-part-right { background-color: var(--ribbon_last_color); top: calc(2 * var(--ribbon_offset)); z-index: -2; } [data-popup-type="book-details"] .ribbon .ribbon-last-part-left { left: calc(0px - var(--ribbon_height)); } [data-popup-type="book-details"] .ribbon .ribbon-last-part-right { right: calc(0px - var(--ribbon_height)); } [data-popup-type="book-details"] .ribbon .ribbon-last-part-left::before, [data-popup-type="book-details"] .ribbon .ribbon-last-part-left::after { content: ""; display: block; position: absolute; border-right: calc(var(--ribbon_height) / 2) solid var(--ribbon_last_color); border-left: none; left: calc(0px - (var(--ribbon_height) / 2)); } [data-popup-type="book-details"] .ribbon .ribbon-last-part-left::before { border-top: none; border-bottom: calc(var(--ribbon_height) / 2) solid transparent; top: 0; } [data-popup-type="book-details"] .ribbon .ribbon-last-part-left::after { border-top: calc(var(--ribbon_height) / 2) solid transparent; border-bottom: none; bottom: 0; } [data-popup-type="book-details"] .ribbon .ribbon-last-part-right::before, [data-popup-type="book-details"] .ribbon .ribbon-last-part-right::after { content: ""; display: block; position: absolute; border-right: none; border-left: calc(var(--ribbon_height) / 2) solid var(--ribbon_last_color); right: calc(0px - (var(--ribbon_height) / 2)); } [data-popup-type="book-details"] .ribbon .ribbon-last-part-right::before { border-top: none; border-bottom: calc(var(--ribbon_height) / 2) solid transparent; border-bottom: calc(var(--ribbon_height) / 2) solid transparent; top: 0; } [data-popup-type="book-details"] .ribbon .ribbon-last-part-right::after { border-top: calc(var(--ribbon_height) / 2) solid transparent; border-bottom: none; bottom: 0; } /*-- Popup buttons ----------------------------------------*/ [data-popup-type="book-details"] .popup-buttons-container .popup-previous-button, [data-popup-type="book-details"] .popup-buttons-container .close-all-book-details-popups-button { height: calc(0.025 * var(--page_container_height_px)); } /*-- Tab-content ------------------------------------------*/ /*-- Front-cover, h4, h5 ------------------------------*/ [data-popup-type="book-details"] .front-cover { display: block; margin-left: auto; margin-right: auto; height: calc(0.3 * var(--page_container_height_px)); } /*-- Tab-name = presentation --------------------------*/ /*-- Add & remove book buttons --------------------*/ [data-popup-type="book-details"] [data-tab-name="presentation"] .add-remove-book-buttons-container { margin-top: var(--popup_top_bottom_padding_px); } /*-- Tab-name = news ----------------------------------*/ [data-popup-type="book-details"] [data-tab-name="news"] .piece-of-news { align-items: center; } /*-- Tab-name = book-series ---------------------------*/ [data-popup-type="book-details"] [data-tab-name="book-series"] .aside-ribbon { text-align: center; } [data-popup-type="book-details"] [data-tab-name="book-series"] .collection-container > div { justify-content: center; } /*-- Tab-name = book-world ----------------------------*/ [data-popup-type="book-details"] [data-tab-name="book-world"] .aside-ribbon { text-align: center; } [data-popup-type="book-details"] [data-tab-name="book-world"] .book-world-container > div { justify-content: center; } [data-popup-type="book-details"] [data-tab-name="book-world"] .book-series-container { width: calc(35% - (var(--popup_left_right_padding_px) / 2)); margin-left: calc(var(--popup_left_right_padding_px) / 2); margin-right: calc(var(--popup_left_right_padding_px) / 2) !important; } [data-popup-type="book-details"] [data-tab-name="book-world"] .front-cover { height: calc(0.3 * var(--page_container_height_px)); } /*-- Book-details-nav -------------------------------------*/ [data-popup-type="book-details"] .book-details-nav { --circle_size_rem: 0.8rem; --line_thickness: 0.1rem; } [data-popup-type="book-details"] .book-details-nav .tab-title { font-size: 0.9rem; line-height: 0.9rem; } } /*----------------------------------------------------------------------- TABLET AND BIG SCREENS CONFIGURATION (landscape orientation) -----------------------------------------------------------------------*/ @media (min-width: 1022px) and (orientation: landscape) { /* __________________________________________________________________________________ */ /* UNIVERSAL POPUPs /* ¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨ */ /* __________________________________________________________________________________ */ /* GENERAL-TERMS POPUP /* ¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨ */ [data-popup-type="general-terms"] .popup-content { width: 60%; } /* __________________________________________________________________________________ */ /* BOOK-DETAILS POPUP /* ¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨ */ /*-- Ribbon -----------------------------------------------*/ [data-popup-type="book-details"] .ribbon { --ribbon_width: calc(0.7 * var(--page_container_width_px)); --ribbon_height: 3rem; --ribbon_offset: calc(var(--ribbon_height) / 4); float: none; margin: 0 auto calc((2 * var(--ribbon_offset)) + var(--popup_top_bottom_padding_px)); } [data-popup-type="book-details"] .ribbon .ribbon-medium-part-left::before, [data-popup-type="book-details"] .ribbon .ribbon-medium-part-right::after, [data-popup-type="book-details"] .ribbon::before, [data-popup-type="book-details"] .ribbon::after { bottom: calc(0px - var(--ribbon_offset)); } [data-popup-type="book-details"] .ribbon .ribbon-medium-part-left::before, [data-popup-type="book-details"] .ribbon::before { border-right: calc(var(--ribbon_height) / 2) solid var(--ribbon_shadow_color); border-left: none; border-bottom: var(--ribbon_offset) solid transparent; } [data-popup-type="book-details"] .ribbon .ribbon-medium-part-right::after, [data-popup-type="book-details"] .ribbon::after { border-right: none; border-left: calc(var(--ribbon_height) / 2) solid var(--ribbon_shadow_color); border-bottom: var(--ribbon_offset) solid transparent; } [data-popup-type="book-details"] .ribbon .book-title { writing-mode: horizontal-tb; transform: none; padding: 0 calc(0.02 * var(--page_container_height_px)); line-height: var(--ribbon_height); } [data-popup-type="book-details"] .ribbon .ribbon-medium-part-left, [data-popup-type="book-details"] .ribbon .ribbon-medium-part-right, [data-popup-type="book-details"] .ribbon .ribbon-last-part-left, [data-popup-type="book-details"] .ribbon .ribbon-last-part-right { display: block; width: var(--ribbon_height); height: var(--ribbon_height); position: absolute; } [data-popup-type="book-details"] .ribbon .ribbon-medium-part-left, [data-popup-type="book-details"] .ribbon .ribbon-medium-part-right { background-color: var(--ribbon_medium_color); top: var(--ribbon_offset); z-index: -1; } [data-popup-type="book-details"] .ribbon .ribbon-medium-part-left { left: calc(0px - (var(--ribbon_height) / 2)); } [data-popup-type="book-details"] .ribbon .ribbon-medium-part-right { right: calc(0px - (var(--ribbon_height) / 2)); } [data-popup-type="book-details"] .ribbon .ribbon-last-part-left, [data-popup-type="book-details"] .ribbon .ribbon-last-part-right { background-color: var(--ribbon_last_color); top: calc(2 * var(--ribbon_offset)); z-index: -2; } [data-popup-type="book-details"] .ribbon .ribbon-last-part-left { left: calc(0px - var(--ribbon_height)); } [data-popup-type="book-details"] .ribbon .ribbon-last-part-right { right: calc(0px - var(--ribbon_height)); } [data-popup-type="book-details"] .ribbon .ribbon-last-part-left::before, [data-popup-type="book-details"] .ribbon .ribbon-last-part-left::after { content: ""; display: block; position: absolute; border-right: calc(var(--ribbon_height) / 2) solid var(--ribbon_last_color); border-left: none; left: calc(0px - (var(--ribbon_height) / 2)); } [data-popup-type="book-details"] .ribbon .ribbon-last-part-left::before { border-top: none; border-bottom: calc(var(--ribbon_height) / 2) solid transparent; top: 0; } [data-popup-type="book-details"] .ribbon .ribbon-last-part-left::after { border-top: calc(var(--ribbon_height) / 2) solid transparent; border-bottom: none; bottom: 0; } [data-popup-type="book-details"] .ribbon .ribbon-last-part-right::before, [data-popup-type="book-details"] .ribbon .ribbon-last-part-right::after { content: ""; display: block; position: absolute; border-right: none; border-left: calc(var(--ribbon_height) / 2) solid var(--ribbon_last_color); right: calc(0px - (var(--ribbon_height) / 2)); } [data-popup-type="book-details"] .ribbon .ribbon-last-part-right::before { border-top: none; border-bottom: calc(var(--ribbon_height) / 2) solid transparent; border-bottom: calc(var(--ribbon_height) / 2) solid transparent; top: 0; } [data-popup-type="book-details"] .ribbon .ribbon-last-part-right::after { border-top: calc(var(--ribbon_height) / 2) solid transparent; border-bottom: none; bottom: 0; } /*-- Popup buttons ----------------------------------------*/ [data-popup-type="book-details"] .popup-buttons-container .popup-previous-button, [data-popup-type="book-details"] .popup-buttons-container .close-all-book-details-popups-button { height: calc(0.03 * var(--page_container_height_px)); } /*-- Tab-content ------------------------------------------*/ /*-- Tab-name = news ----------------------------------*/ [data-popup-type="book-details"] [data-tab-name="news"] .aside-ribbon { display: flex; flex-direction: row; justify-content: center; } [data-popup-type="book-details"] [data-tab-name="news"] .front-cover { margin: 0 calc(0.05 * var(--page_container_width_px)); float: none; } [data-popup-type="book-details"] [data-tab-name="news"] .news-first-part .piece-of-news { align-items: flex-end; } [data-popup-type="book-details"] [data-tab-name="news"] .news-first-part, [data-popup-type="book-details"] [data-tab-name="news"] .news-container { flex-basis: 50%; } /*-- Tab-name = book-series ---------------------------*/ [data-popup-type="book-details"] [data-tab-name="book-series"] .aside-ribbon { text-align: center; } [data-popup-type="book-details"] [data-tab-name="book-series"] .collection-container > div { justify-content: center; } /*-- Tab-name = book-world ----------------------------*/ [data-popup-type="book-details"] [data-tab-name="book-world"] .aside-ribbon { text-align: center; } [data-popup-type="book-details"] [data-tab-name="book-world"] .book-world-container > div { justify-content: center; } [data-popup-type="book-details"] [data-tab-name="book-world"] .book-series-container { width: calc(25% - (3 * var(--popup_left_right_padding_px) / 4)); } [data-popup-type="book-details"] [data-tab-name="book-world"] .front-cover { height: calc(0.5 * var(--page_container_height_px)); } /*-- Book-details-nav -------------------------------------*/ [data-popup-type="book-details"] .book-details-nav { --circle_size_rem: 0.8rem; --line_thickness: 0.1rem; } [data-popup-type="book-details"] .book-details-nav .tab-title { font-size: 0.9rem; line-height: 0.9rem; } }