styles.css

/* @copyright  2024 Ascensio System SIA <integration@onlyoffice.com>
 * @copyright  based on work by 2018 Olumuyiwa Taiwo <muyi.taiwo@logicexpertise.com>
 * @license    http://www.gnu.org/copyleft/gpl.html GNU GPL v3 or later
 */

#page-content h2,
#page-content .onlyofficeeditor .activityinstance > a {
    display: inline-block;
}

.onlyofficeeditor-container > iframe {
    height: 95vh;
    max-height: 60rem;
}

.onlyofficeeditor-container.onlyofficeeditor-fullscreen {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    margin: 0 0 0 50px;
    z-index: 100;
}

.onlyofficeeditor-container.onlyofficeeditor-rightindent {
    margin-right: 43px;
}

#onlyofficeeditor-editor.error {
    color: red;
}

.onlyofficeeditor-create-button {
    position: relative;
    justify-content: center;
    min-width: 85px;
    margin-top: 10px;
    padding: 45px 5px 6px;
    background-repeat: no-repeat;
}

.onlyofficeeditor-create-button input[type=radio] {
    margin: auto;
    appearance: none;
    position: absolute;
    top: 0;
    opacity: 0.5;
}

.onlyofficeeditor-create-button input[type=radio]:checked {
    opacity: 1;
}

.onlyofficeeditor-create-button input[value^="Document"] {
    content: url([[pix:onlyofficeeditor|file_docx]]);
}

.onlyofficeeditor-create-button input[value^="Presentation"] {
    content: url([[pix:onlyofficeeditor|file_pptx]]);
}

.onlyofficeeditor-create-button input[value^="Spreadsheet"] {
    content: url([[pix:onlyofficeeditor|file_xlsx]]);
}

.onlyofficeeditor-create-button input[value^="PDF form"] {
    content: url([[pix:onlyofficeeditor|file_pdf]]);
}

.onlyofficeeditor-create-button input[value^="Upload file"] {
    content: url([[pix:onlyofficeeditor|file_upload]]);
}

.onlyofficeeditor-saveas-section {
    max-width: 100%;
    padding: 0.5rem 0;
    color: rgb(44, 123, 194);
    font-size: 20px;
    cursor: pointer;
}

.onlyofficeeditor-saveas-section-selected {
    background-color: rgb(248, 249, 250);
}

.onlyofficeeditor-saveas-section:before,
.onlyofficeeditor-saveas-section:last-child:after {
    position: absolute;
    left: 0;
    content: '';
    width: 100%;
    height: 1px;
    background-color: rgb(222, 226, 230);
    top: 0;
}
.onlyofficeeditor-saveas-section:last-child:after {
    top: 100%;
}

.onlyofficeeditor-editor-fs-button {
    border: 1px solid rgb(15, 111, 197);
    background: white;
    color: rgb(15, 111, 197);
    float: right;
}

#onlyofficeeditor-enter-fs-button {
    padding: 5px;
    margin-right: 10px;
}

#onlyofficeeditor-exit-fs-button {
    margin: 12px;
}

.onlyoffice-banner {
    border: 1px solid #e9e9e9;
    border-radius: 3px;
    display: flex;
    align-items: center;
    padding: 16px 32px 21px 20px;
    width: fit-content;
    background-image: url([[pix:onlyofficeeditor|banner_bg]]);
    background-repeat: no-repeat;
    margin: 15px 0;
}

.banner-body {
    max-width: 398px;
    display: flex;
    align-items: center;
    column-gap: 35px;
    padding-right: 24px;
}

.banner-body h4,
.banner-body p {
    margin: 0;
}

.banner-body h4 {
    margin-bottom: 5px;
}

.banner-icon img {
    max-width: 82px;
    max-height: 79px;
    width: 82px;
    height: 79px;
    margin-right: 0;
}

.banner-title {
    font-weight: 700;
    font-size: 20px;
    line-height: 23px;
}

.banner-description {
    font-weight: 300;
    font-size: 14px;
}

.banner-links {
    margin-left: 24px;
}

.banner-links a {
    background-color: transparent;
    color: #316ab9;
    border: 1px solid #316ab9;
    padding: 6px 20px;
    border-radius: 3px;
    cursor: pointer;
    font-size: 14px;
    font-weight: 500;
}

.banner-links a:active {
    background-color: transparent;
}

.banner-links a:hover {
    text-decoration: none;
}

@media (max-width: 603px) {
    .onlyoffice-banner {
        flex-direction: column;
    }

    .banner-body {
        padding-right: 0;
    }

    .banner-links {
        margin-top: 15px;
    }
}

@media (max-width: 480px) {
    .banner-body {
        flex-direction: column;
        justify-items: center;
    }

    .banner-title,
    .banner-description {
        text-align: center;
    }
}