mirror of
https://github.com/Part-DB/Part-DB-server.git
synced 2025-08-03 09:44:41 +02:00
The parsedown parser has problems with links in <>, so we use marked.js now which is more conform with (GFM) CommonMark and offers more feautures. Also with the usage of DOMPurify you can now use every HTML tag in Markdown without need to worry about XSS.
804 lines
16 KiB
CSS
804 lines
16 KiB
CSS
/*
|
|
*
|
|
* Part-DB Version 0.4+ "nextgen"
|
|
* Copyright (C) 2016 - 2018 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 General Public License
|
|
* as published by the Free Software Foundation; either version 2
|
|
* 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 General Public License for more details.
|
|
*
|
|
* You should have received a copy of the GNU General Public License
|
|
* along with this program; if not, write to the Free Software
|
|
* Foundation, Inc., 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301, USA
|
|
*
|
|
*/
|
|
|
|
/************************************
|
|
* 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;
|
|
background-color: inherit;
|
|
/* 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;
|
|
|
|
/** Hide scrollbar in Firefox and Edge **/
|
|
-ms-overflow-style: none;
|
|
overflow: -moz-scrollbars-none;
|
|
/* Use standard version for hiding the scrollbar */
|
|
scrollbar-width: none;
|
|
}
|
|
|
|
.sidebar-container {
|
|
margin-top: 0;
|
|
padding-top: 5px;
|
|
background-color: #F8F8F8;
|
|
}
|
|
}
|
|
|
|
/* 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: 1;
|
|
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;
|
|
|
|
}
|
|
|
|
.hoverpic:hover {
|
|
transform: scale(6);
|
|
background: white;
|
|
box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
|
|
}
|
|
|
|
|
|
.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 {
|
|
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;
|
|
}
|
|
|
|
|
|
|
|
/*********************************
|
|
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 table {
|
|
border-width: 1px 0 0 1px;
|
|
border-color: #bbb;
|
|
border-style: solid;
|
|
width: 100%;
|
|
margin-bottom: 1rem;
|
|
color: #212529;
|
|
}
|
|
|
|
.markdown table td, .markdown table th {
|
|
border-width: 0 1px 1px 0;
|
|
border-color: #bbb;
|
|
border-style: solid;
|
|
padding: 10px;
|
|
}
|
|
|
|
.markdown table tbody tr:hover {
|
|
color: #212529;
|
|
background-color: rgba(0, 0, 0, 0.075);
|
|
}
|
|
|
|
.markdown table tbody tr:nth-of-type(odd) {
|
|
background-color: rgba(0, 0, 0, 0.05);
|
|
}
|
|
|
|
.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;
|
|
}
|