@dschulmeis/mini-tutorial.js/themes/bootstrap.less

Beautiful HTML tutorials with minimal effort

/*
 * mini-tutorial.js (https://www.wpvs.de/mini-tutorial/)
 * © 2022  Dennis Schulmeister-Zimolong <dennis@pingu-mail.de>
 *
 * This program is free software: you can redistribute it and/or modify
 * it under the terms of the GNU Affero General Public License as
 * published by the Free Software Foundation, either version 3 of the
 * License, or (at your option) any later version.
 */

/*
 * BOOTSTRAP AND LS-PLUGIN-EXTRA-TAGS RELATED STYLING.
 * LIFTED FROM LECTURE-SLIDES.JS, WHITE.LESS.
 */

@border-color: lightgrey;

@box-header-background-color: white;
@box-label-border-color-active: rgb(44, 121, 145);
@box-label-border-color-hover: lighten(@box-label-border-color-active, 25%);
@box-content-background-color: rgb(241, 244, 246);

// More modern and responsive bootstrap tab pages and carousel
.tab-pages,
.carousel {
    margin-bottom: 1em;
}

.nav-tabs {
    background-color: @box-header-background-color;
    border: 0;

    .nav-link {
        background-color: transparent;
        border: 0;
        border-bottom: 2px solid transparent;

        &.active {
            border-bottom-color: @box-label-border-color-active;
        }

        &:hover {
            border-bottom-color: @box-label-border-color-hover;
        }
    }

    // bootstrap medium
    @media (max-width: 766px) {
        .nav-item {
            width: 100%;
        }
    }
}

.tab-content,
.carousel {
    padding: 1em;

    background-color: @box-content-background-color;

    border: 0px solid @border-color;
    border-top-width: 1px;
    border-bottom-width: 1px;

    .tab-content,
    .carousel {
        background-color: lighten(@box-content-background-color, 5%);
    }
}

.carousel-outer {
    // Remove padding for carousel-nav links, since there are no active nav links
    // with a permanent line below
    .nav-link {
        padding-left: 0;
        padding-right: 0;
        margin-right: 1em;
    }

    .sub-nav-tabs {
        .nav-link {
            padding-top: 0;
            padding-bottom: 0;
        }
    }
}

// Info boxes
.info-box-title {
    font-weight: bold;
}

.info-box {
    padding: 0.5em;
    margin-bottom: 0.75em;

    background-color: @box-content-background-color;
    border-left: 4px solid rgb(46, 114, 163);

    &.warning {
        border-left-color: rgb(246, 161, 34);
    }

    &.critical {
        border-left-color: rgb(207, 30, 30);
    }
}

.tab-content .info-box,
.carousel .info-box {
    background-color: darken(@box-content-background-color, 6%);
}

// Cursor for collapsible blocks
[data-toggle="collapse"] {
    cursor: pointer;
    text-decoration: none !important;
}

// Accordion
.accordion > .card {
    margin-top: -2px;
}