forked from mirror/Part-DB.Part-DB-server
Cleaned up and reorganized projects CSS.
This commit is contained in:
Jan Böhmer
parent
853fc513f7
commit
81328071f7
13 changed files with 592 additions and 934 deletions
108
assets/css/app/bs-overrides.css
Normal file
108
assets/css/app/bs-overrides.css
Normal file
|
|
@ -0,0 +1,108 @@
|
|||
/*
|
||||
* This file is part of Part-DB (https://github.com/Part-DB/Part-DB-symfony).
|
||||
*
|
||||
* Copyright (C) 2019 - 2022 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/>.
|
||||
*/
|
||||
|
||||
a.badge {
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
@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;
|
||||
}
|
||||
|
||||
/* 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;
|
||||
}
|
||||
|
||||
/*******************************************
|
||||
* Hovering carousel gallery
|
||||
*******************************************/
|
||||
.carousel-caption-hover {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.carousel .mask {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.carousel:hover .mask {
|
||||
display: block;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
transition: .5s ease;
|
||||
background-color: #0a0909;
|
||||
opacity: 0.7;
|
||||
border: 1px solid #dee2e6;
|
||||
border-radius: .25rem;
|
||||
}
|
||||
|
||||
.carousel-control {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.carousel:hover .carousel-caption-hover {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.carousel:hover .carousel-control {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
/***********************************************
|
||||
* Form required dots
|
||||
***********************************************/
|
||||
|
||||
form .col-form-label.required:after, form label.required:after {
|
||||
bottom: 4px;
|
||||
color: var(--bs-dark);
|
||||
content: "\2022";
|
||||
filter: opacity(75%);
|
||||
position: relative;
|
||||
right: -2px;
|
||||
z-index: 700;
|
||||
}
|
||||
32
assets/css/app/darkmode.css
Normal file
32
assets/css/app/darkmode.css
Normal file
|
|
@ -0,0 +1,32 @@
|
|||
/*
|
||||
* This file is part of Part-DB (https://github.com/Part-DB/Part-DB-symfony).
|
||||
*
|
||||
* Copyright (C) 2019 - 2022 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/>.
|
||||
*/
|
||||
|
||||
.darkmode-layer {
|
||||
z-index: 2020;
|
||||
}
|
||||
|
||||
/** If darkmode is enabled revert the blening for images and videos, as these should be shown not inverted */
|
||||
.darkmode--activated img,
|
||||
.darkmode--activated video {
|
||||
mix-blend-mode: difference;
|
||||
}
|
||||
|
||||
.darkmode--activated .hoverpic:hover {
|
||||
background: black;
|
||||
}
|
||||
127
assets/css/app/helpers.css
Normal file
127
assets/css/app/helpers.css
Normal file
|
|
@ -0,0 +1,127 @@
|
|||
/*
|
||||
* This file is part of Part-DB (https://github.com/Part-DB/Part-DB-symfony).
|
||||
*
|
||||
* Copyright (C) 2019 - 2022 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/>.
|
||||
*/
|
||||
|
||||
.w-fit {
|
||||
width: -moz-fit-content;
|
||||
width: fit-content;
|
||||
}
|
||||
|
||||
.bg-primary-striped {
|
||||
background: repeating-linear-gradient(
|
||||
-45deg,
|
||||
var(--bs-primary),
|
||||
var(--bs-primary) 10px,
|
||||
var(--bs-info) 10px,
|
||||
var(--bs-info) 20px
|
||||
)
|
||||
}
|
||||
|
||||
.emoji {
|
||||
height: 1.5em;
|
||||
}
|
||||
|
||||
.hoverpic {
|
||||
min-width: 10px;
|
||||
max-width: 30px;
|
||||
display: block;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
}
|
||||
|
||||
.thumbnail-sm {
|
||||
max-height: 100px;
|
||||
}
|
||||
|
||||
/* 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;
|
||||
}
|
||||
|
||||
/****************************************************
|
||||
* Search highlighting
|
||||
*****************************************************/
|
||||
|
||||
span.highlight {
|
||||
background-color: yellow;
|
||||
}
|
||||
|
||||
/******************************
|
||||
* 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;
|
||||
}
|
||||
|
||||
/***********************************************
|
||||
* Typeahead image
|
||||
***********************************************/
|
||||
.typeahead-image {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
/***********************************************
|
||||
* Permission checkboxes
|
||||
***********************************************/
|
||||
.permission-checkbox:checked {
|
||||
background-color: var(--bs-success);
|
||||
border-color: var(--bs-success);
|
||||
}
|
||||
156
assets/css/app/layout.css
Normal file
156
assets/css/app/layout.css
Normal file
|
|
@ -0,0 +1,156 @@
|
|||
/*
|
||||
* This file is part of Part-DB (https://github.com/Part-DB/Part-DB-symfony).
|
||||
*
|
||||
* Copyright (C) 2019 - 2022 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;
|
||||
padding-top: 70px;
|
||||
}
|
||||
|
||||
@media (min-width: 768px) {
|
||||
.fixed-sidebar {
|
||||
|
||||
position: fixed;
|
||||
top: 60px;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
padding-left: 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;
|
||||
/*noinspection CssInvalidPropertyValue*/
|
||||
overflow: -moz-scrollbars-none;
|
||||
/*noinspection CssUnknownProperty*/
|
||||
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;
|
||||
/*noinspection CssInvalidPropertyValue*/
|
||||
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;
|
||||
}
|
||||
105
assets/css/app/tables.css
Normal file
105
assets/css/app/tables.css
Normal file
|
|
@ -0,0 +1,105 @@
|
|||
/*
|
||||
* This file is part of Part-DB (https://github.com/Part-DB/Part-DB-symfony).
|
||||
*
|
||||
* Copyright (C) 2019 - 2022 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/>.
|
||||
*/
|
||||
|
||||
/****************************************
|
||||
* Tables
|
||||
****************************************/
|
||||
|
||||
/* 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;
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Enforce white links on selected rows in datatables
|
||||
*/
|
||||
table.dataTable > tbody > tr.selected > td > a {
|
||||
color: white !important;
|
||||
}
|
||||
|
||||
/*******************************
|
||||
Parts datatable styling
|
||||
******************************/
|
||||
.attach-table-icon {
|
||||
margin-right: 0.7em;
|
||||
color: var(--bs-gray);
|
||||
}
|
||||
.attach-table-icon:hover {
|
||||
color: var(--bs-gray-dark);
|
||||
}
|
||||
.badge-table {
|
||||
margin-right: 0.2em;
|
||||
}
|
||||
|
||||
/** Do not add margin below description in part table */
|
||||
.markdown-inline p {
|
||||
margin-block-end: 0;
|
||||
}
|
||||
|
||||
.card-footer-table {
|
||||
padding-top: 0;
|
||||
}
|
||||
|
||||
table.dataTable {
|
||||
margin-top: 0 !important;
|
||||
}
|
||||
|
||||
div.dataTables_wrapper div.dataTables_info {
|
||||
white-space: normal;
|
||||
}
|
||||
|
||||
/** Ensure proper rendering/spacing of the select checkbox in tables */
|
||||
th.select-checkbox {
|
||||
min-width: 10px;
|
||||
}
|
||||
|
||||
/********************************************************************
|
||||
* Datatables definitions/overrides
|
||||
********************************************************************/
|
||||
|
||||
.dataTables_length {
|
||||
display: inline-flex;
|
||||
}
|
||||
|
||||
/** Fix datatables select-checkbox position */
|
||||
table.dataTable tr.selected td.select-checkbox:after, table.dataTable tr.selected th.select-checkbox:after {
|
||||
margin-top: -28px !important;
|
||||
}
|
||||
|
||||
|
||||
/******************************************************
|
||||
Classes for Datatables export
|
||||
*******************************************************/
|
||||
|
||||
#export-title,
|
||||
#export-messageTop,
|
||||
.export-helper{
|
||||
display: none;
|
||||
}
|
||||
53
assets/css/app/treeview.css
Normal file
53
assets/css/app/treeview.css
Normal file
|
|
@ -0,0 +1,53 @@
|
|||
/*
|
||||
* This file is part of Part-DB (https://github.com/Part-DB/Part-DB-symfony).
|
||||
*
|
||||
* Copyright (C) 2019 - 2022 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/>.
|
||||
*/
|
||||
|
||||
/******************************
|
||||
* 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;
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.treeview span.icon {
|
||||
width: 20px !important;
|
||||
height: 20px !important;
|
||||
}
|
||||
}
|
||||
|
||||
.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;
|
||||
}
|
||||
Loading…
Add table
Add a link
Reference in a new issue