Part-DB.Part-DB-server/assets/css/app.css

/*
 * This file is part of Part-DB (https://github.com/Part-DB/Part-DB-symfony).
 *
 * Copyright (C) 2019 - 2020 Jan Böhmer (https://github.com/jbtronics)
 *
 * 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.
 *
 * This program is distributed in the hope that it will be useful,
 * but WITHOUT ANY WARRANTY; without even the implied warranty of
 * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
 * GNU Affero General Public License for more details.
 *
 * You should have received a copy of the GNU Affero General Public License
 * along with this program.  If not, see <https://www.gnu.org/licenses/>.
 */


/************************************
* Basic layout (Navbar, sidebar, etc.)
*************************************/

/* Add padding for fixed header bar */
body {
    overflow-x: hidden;
    position: relative;
    padding-top: 70px;
    /* Use font size like in BS3 */
    font-size: 14px;
    line-height: 1.428;
}

@media  (min-width: 768px) {
    .fixed-sidebar {
        /*
        position: fixed;
        left: 15px;
        z-index: 1000;
        /* display: flex;
        width: inherit; '/
        overflow-x: hidden;
        overflow-y: auto;
        /*noinspection W3CssValidation*/
        /* -webkit-overflow-scrolling: touch;
         max-height: 100%;
         padding-bottom: 50px; */


        position: fixed;
        top: 60px;
        bottom: 0;
        left: 0;
        /* z-index: 1000;*/
        /* padding: 20px; */
        padding-left: 15px;
        /* padding-top: 15px; */
        padding-right: 0;
        overflow-x: hidden;
        overflow-y: auto;

        /*noinspection W3CssValidation*/
        -webkit-overflow-scrolling: touch;

        /** Hide scrollbar in old Firefox and Edge **/
        -ms-overflow-style: none;
        overflow: -moz-scrollbars-none;
        scrollbar-width: none;
    }


}

/*noinspection W3CssValidation*/
@media  (max-width: 768px) {
    .fixed-sidebar {
        position: fixed;
        top: 56px;
        right: 0;
        left: 0;
        z-index: 1000;
        width: inherit;
        overflow-x: hidden;
        overflow-y: auto;
        /*noinspection W3CssValidation*/
        -webkit-overflow-scrolling: touch;
        max-height: 100%;
        opacity: 0.97;
        padding: 7px 15px 50px;
        margin-top: -10px;

        /* Fill window */
        height: 100%;

        /** Hide scrollbar in Firefox and Edge **/
        -ms-overflow-style: none;
        overflow: -moz-scrollbars-none;
        /* Use standard version for hiding the scrollbar */
        scrollbar-width: none;

        background-color: var(--light);
    }

    .sidebar-container {
        margin-top: 0;
        padding-top: 5px;
        background-color: #F8F8F8;
    }

    /* Hide devices menu */
    #treeBox-devices {
        display: none;
    }
}

/* Hide scrollbar */
.fixed-sidebar::-webkit-scrollbar {display:none;}

@media (min-width: 768px) {
    .sidebar-collapse.collapse {
        display: block !important;
        height: auto !important;
        padding-bottom: 0;
        overflow: visible !important;
    }
}

/* Back to top button  */
.back-to-top {
    cursor: pointer;
    position: fixed;
    bottom: 20px;
    right: 20px;
    display:none;
    z-index: 1030;
}


.sidebar-title {
    margin-top: 0;
    font-size: 18px;
    margin-bottom: 10px;
    line-height: 1.1;
}

/* Blur content during loading*/
.loading-content {
    filter: blur(2px);
}

/*
The sidebar toggle button floats on the left side and is hidden when the viewport is to small for
showing the sidebar (on devices with md or higher)
 */
#sidebar-toggle-button {
    position: fixed;
    left: 3px;
    bottom: 50%;
}

@media (max-width: 576px) {
    #sidebar-toggle-button {
        display: none;
    }
}


/********************************
* Toasts
 ********************************/
.toast-container {
    position: fixed;
    top: auto;
    z-index: 3000; /* Over darkmode layer for correct colors! */
    right: 25px;
}

/*********************************
* Emojis
 ********************************/
.emoji {
    height: 1.5em;
}

/**********************************
* Helper classes
 *********************************/

.vertical-align {
    display: flex;
    align-items: center;
}

.vertical-align-table>tbody>tr>td,
.vertical-align-table>tbody>tr>th,
.vertical-align-table>tfoot>tr>td,
.vertical-align-table>tfoot>tr>th,
.vertical-align-table>thead>tr>td,
.vertical-align-table>thead>tr>th {
    vertical-align: middle;
}

.table-center{
    text-align: center;
}

.font-weight-bold {
    font-weight:bold;
}

.table-no-margin {
    margin-top: 0;
    margin-bottom: 0;
}

/**
 Use this class if you has a <span> or <p> and you want to create automatic textbreaks in the text.
 */
.text-break {
    /*noinspection W3CssValidation,CssUnknownProperty*/
    -ms-word-break: break-all;
    /*noinspection CssOverwrittenProperties*/
    word-break: break-all;

    /* Non standard for webkit */
    /*noinspection W3CssValidation,CssInvalidPropertyValue,CssOverwrittenProperties*/
    word-break: break-word;

    /*noinspection W3CssValidation*/
    -webkit-hyphens: auto;
    /*noinspection W3CssValidation*/
    -moz-hyphens: auto;
    hyphens: auto;
}

.auto-size-select {
    height: inherit;
}

/****************************************
* Bootstrap extensions
*****************************************/

.form-group-sm {
    margin-bottom: 5px;
}

/* Use this if you want to use a link inside a form-group */
.form-control-link {
    display: block;
    padding-top: 7px;
    padding-bottom: 7px;
}


/* A text-only button without border */
.btn-text {
    color: inherit;
    padding: 0;
    border: hidden;
    background-color: transparent;
}


/* Size sensitive pull-* helpers */

@media (max-width: 767px) {
    .pull-right-not-xs, .pull-left-not-xs{
        float: none;
    }
    .pull-right-xs {
        float: right;
    }
    .pull-left-xs {
        float: left;
    }
}
@media (min-width: 768px) and (max-width: 991px) {
    .pull-right-not-sm, .pull-left-not-sm{
        float: none;
    }
    .pull-right-sm {
        float: right;
    }
    .pull-left-sm {
        float: left;
    }
}
@media (min-width: 992px) and (max-width: 1199px) {
    .pull-right-not-md, .pull-left-not-md{
        float: none;
    }
    .pull-right-md {
        float: right;
    }
    .pull-left-md {
        float: left;
    }
}
@media (min-width: 1200px) {
    .pull-right-not-lg, .pull-left-not-lg{
        float: none;
    }
    .pull-right-lg {
        float: right;
    }
    .pull-left-lg {
        float: left;
    }
}

/**************************************
btn-xs
btn-xs
 */

.btn-xs {
    /*padding: .1rem .3rem; */
    padding: 1px 5px;
    font-size: 12px;
    line-height: 1.5
}

.not-enough-instock {
    background-color: rgba(220, 53, 69, 0.4);
}

/****************************************
* Picture classes
*****************************************/

.companypic {
    width: 17px;
    display: inline;
}

.companypic:hover {
    filter: opacity(60%);
}

.companypic-bg {
    width: 20px;
    display: inline;
}

.companypic-bg:hover {
    filter: opacity(60%);
}

.hoverpic {
    min-width: 10px;
    max-width: 30px;
    display: block;
    margin-left: auto;
    margin-right: auto;
}

.darkmode--activated .hoverpic:hover {
    background: black;
}


.thumbnail-sm {
    max-height: 100px;
}

img.img-attachement {
    max-width: 25%;
    margin: 10px;
}

/****************************************
* Tables
****************************************/
.table-compact>tbody>tr>td,
.table-compact>tbody>tr>th,
.table-compact>tfoot>tr>td,
.table-compact>tfoot>tr>th,
.table-compact>thead>tr>td,
.table-compact>thead>tr>th,
table.dataTable>tbody>tr>th,
table.dataTable>tbody>tr>td
{
    padding: 3px;
}

/* We need to override the z index, or the elements will overlap the fixed header from datatables. */
table .input-group .form-control {
    z-index: 0;
}

table .input-group-btn:last-child>.btn, table .input-group-btn:last-child>.btn-group {
    z-index: 0;
}

/* Hide datatables fixedHeaders on small devices */
@media  only screen and (max-width: 1000px){
    .fixedHeader-floating {
        display: none;
    }
}
/***************************************
* Dropdown with radio buttons
***************************************/

.container-progress {
    padding-top: 25%;
}

.dropdown-menu-radio {
    padding-left: 10px;
}

.drop-radio {
    margin-left: 10px;
}

/*************************************
* Smaller radio buttons
**************************************/

.radio-small {
    margin-bottom: 0;
    margin-top: 0;
}

/************************************
 X3DOM
*************************************/

.x3d-fullscreen {
    /*height: auto;*/
    width: 100%;
}

/*******************************
* Collapsable panel definitions.
********************************/

.fancy-collapse-panel .panel-default > .panel-heading {
    padding: 0;
}

.card-header a[data-toggle=collapse] {
    display: inline-block;
    width: 100%;
    position: relative;
}

/*
@font-face {
    font-family: 'FA5';
    font-style: normal;
    font-weight: 900;
    src: url("../../webfonts/fa-solid-900.eot");
    src: url("../../webfonts/fa-solid-900.eot?#iefix") format("embedded-opentype"), url("../../webfonts/fa-solid-900.woff2") format("woff2"), url("../../webfonts/fa-solid-900.woff") format("woff"), url("../../webfonts/fa-solid-900.ttf") format("truetype"), url("../../webfonts/fa-solid-900.svg#fontawesome") format("svg");
} */

.card-header a[data-toggle=collapse]:after {
    /*noinspection CssNoGenericFontName*/
    font-family: "Font Awesome 5 Free";
    content: "\f106";
    position: absolute;
    right: 20px;
    font-size: 20px;
    font-weight: 900;
    top: 50%;
    line-height: 1;
    margin-top: -10px;
}

.card-header a[data-toggle=collapse].collapsed:after
{
    content: "\f107";
}

.card-header {
    overflow: hidden;
}

a.link-collapse {
    color: #333;
}

/******************************************************
Classes for Datatables export
*******************************************************/

#export-title,
#export-messageTop,
.export-helper{
    display: none;
}

/**************************************************
* Link styles
***************************************************/

/* Show symbol after exteral links */
/*noinspection CssNoGenericFontName*/
a[target="_blank"].link-external:after {
    content: "\f35d ";
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    margin-left: 3px;
    font-size: smaller;
    font-style: normal;
    display: inline-block;
    text-decoration: inherit;
}

a.text-white {
    color: #fff;
}

/****************************************************
* Search highlighting
*****************************************************/

span.highlight {
    background-color: yellow;
}

/******************************
* Bootstrap treeview overrides
*******************************/
/* Set display style to flexbox, so wraped text is aligned to */

.list-group-item {
    padding: 5px 10px;
    display: flex;
}

.treeview {
    font-size: 12px;
}

.fa-treeview {
    line-height: 1.428;
}

.treeview-sm .list-group-item {
    padding-top: 3px;
    padding-bottom: 3px;
}

.treeview .badge {
    margin-left: auto;
    line-height:  1.42857143;
}

/*****************************
* Pagination bar
*****************************/

/** Select in pagination */
.pagination>li>select
{
    position: relative;
    float: left;
    padding: 7px 5px;
    margin-left: -1px;
    line-height: 1.42857143;
    color: #337ab7;
    text-decoration: none;
    background-color: #fff;
    border: 1px solid #ddd;
}

.pagination>li>button
{
    position: relative;
    float: left;
    padding: 6px 5px;
    margin-left: -1px;
    line-height: 1.42857143;
    color: #337ab7;
    text-decoration: none;
    background-color: #fff;
    border: 1px solid #ddd;
}

/******************************
* Breadcrumb like structural links
********************************/

/* Style the list */
ul.structural_link {
    padding-top: 7px;
    padding-bottom: 7px;
    padding-left: 0;
    list-style: none;
    background-color: inherit;
}

/* Display list items side by side */
ul.structural_link li {
    display: inline;
    font-size: inherit;
}

/* Add a slash symbol (/) before/behind each list item */
ul.structural_link li+li:before {
    padding: 2px;
    color: grey;
    /*content: "/\00a0";*/
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    font-style: normal;
    content: "\f30b"; /* long-arrow-alt-right */
}

/* Add a color to all links inside the list */
ul.structural_link li a {
    color: #0275d8;
    text-decoration: none;
}

/* Add a color on mouse-over */
ul.structural_link li a:hover {
    color: #01447e;
    text-decoration: underline;
}

/*****************************
* Print styles
*****************************/
@media print {
    body {
        padding-top: 0;
    }

    a.hidden-print-href[href]:after {
        content: none !important;
    }
}

/*****************************
BS 4 overrides
 ****************************/
@media (min-width: 768px) {
    .col-form-label {
        font-weight: bold;
        text-align: right;
    }
}

.form-group > label,
.form-group > .col-form-label {
    font-weight: bold;
}

label:not(.form-check-label, custom-control-label) {
    font-weight: bold;
}

.form-group {
    margin-bottom: 0.4rem;
}

.dropdown-item,
.dropdown-header,
.dropdown-divider {
    padding: .1rem 1.5rem;
}

.btn-group-append {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0
}

.tooltip {
    pointer-events: none;
}

/* Style datatables */
.card-footer-table {
    padding-top: 0;
}

table.dataTable {
    margin-top: 0 !important;
}

div.dataTables_wrapper div.dataTables_info {
    white-space: normal;
}


/*******************************
    Parts datatable styling
 ******************************/
.attach-table-icon {
    margin-right: 0.7em;
    color: var(--gray);
}
.attach-table-icon:hover {
    color: var(--gray-dark);
}
.badge-table {
    margin-right: 0.2em;
}

/*********************************
    Workarounds
 *********************************/

/* Hide tab content even, if tab contents are wrapped inside a form. */
.tab-content>form>.tab-pane {
    display: none;
}

.tab-content>form>.active {
    display: block;
}

.dataTables_length {
    display: inline-flex;
}

/******************************************
* Typeahead menu
*******************************************/

.tt-query {
    -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
    -moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
}

.tt-hint {
    color: #999
}

.tt-menu {    /* used to be tt-dropdown-menu in older versions */
    width: 422px;
    margin-top: 4px;
    padding: 4px 0;
    background-color: #fff;
    border: 1px solid #ccc;
    border: 1px solid rgba(0, 0, 0, 0.2);
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
    -webkit-box-shadow: 0 5px 10px rgba(0,0,0,.2);
    -moz-box-shadow: 0 5px 10px rgba(0,0,0,.2);
    box-shadow: 0 5px 10px rgba(0,0,0,.2);
}

.tt-suggestion {
    padding: 3px 20px;
    line-height: 24px;
}

.tt-suggestion.tt-cursor,.tt-suggestion:hover {
    color: #fff;
    background-color: #0097cf;

}

.tt-suggestion p {
    margin: 0;
}

/***************************************************
 * Markdown styles
 ***************************************************/
.markdown code {
    padding: 2px 4px;
    font-size: 90%;
    color: #c7254e;
    background-color: #f9f2f4;
    border-radius: 4px;
}

.markdown pre {
    display: block;
    padding: 9.5px;
    margin: 0 0 10px;
    font-size: 13px;
    line-height: 1.42857143;
    color: #333;
    word-break: break-all;
    word-wrap: break-word;
    background-color: #f5f5f5;
    border: 1px solid #ccc;
    border-radius: 4px;
}

.markdown img {
    max-width: 35%;
    vertical-align: middle;
}

.markdown blockquote {
    padding: 10px 10px;
    margin: 0 0 10px;
    font-size: 17.5px;
    border-left: 5px solid #eee;
}

.darkmode-layer {
    z-index: 2020;
}

.darkmode--activated img {
    mix-blend-mode: difference;
}