422 lines
7.5 KiB
CSS
422 lines
7.5 KiB
CSS
/*
|
|
Cockpit Navigator - A File System Browser for Cockpit.
|
|
Copyright (C) 2021 Josh Boudreau <jboudreau@45drives.com>
|
|
Copyright (C) 2021 Sam Silver <ssilver@45drives.com>
|
|
|
|
This file is part of Cockpit Navigator.
|
|
Cockpit Navigator 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 3 of the License, or
|
|
(at your option) any later version.
|
|
Cockpit Navigator 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 Cockpit Navigator. If not, see <https://www.gnu.org/licenses/>.
|
|
*/
|
|
|
|
:root {
|
|
/* white style */
|
|
--container: #fff;
|
|
--border: #bebebe;
|
|
--navigation: #fff;
|
|
--font: #1c1c1c;
|
|
--selected: #f8f8f8;
|
|
--toggle-light: #151515;
|
|
--toggle-dark: #ccc;
|
|
--scrollbar-thumb: var(--border);
|
|
--scrollbar-bg: var(--navigation);
|
|
--scrollbar-color: var(--scrollbar-thumb) var(--scrollbar-bg);
|
|
--loading-bg-color: rgba(255, 255, 255, 0.5);
|
|
--textarea-bg: var(--navigation);
|
|
--logo-45: #333;
|
|
--nav-entry-color: #555F6E;
|
|
--nav-border-radius: 4px;
|
|
--symlink-symbol-color: var(--navigation);
|
|
}
|
|
|
|
[data-theme="dark"] {
|
|
/* Dark style */
|
|
--container: #212427;
|
|
--border: #3c3f42;
|
|
--navigation: #151515;
|
|
--font: #fff;
|
|
--selected: #191a1b;
|
|
--scrollbar-thumb: var(--container);
|
|
--scrollbar-bg: var(--navigation);
|
|
--scrollbar-color: var(--scrollbar-thumb) var(--scrollbar-bg);
|
|
--loading-bg-color: rgba(33, 36, 39, 0.5);
|
|
--textarea-bg: var(--navigation);
|
|
--logo-45: #fff;
|
|
--nav-entry-color: #555F6E;
|
|
--symlink-symbol-color: var(--navigation);
|
|
}
|
|
|
|
.pf-c-button:disabled[data-theme="dark"] {
|
|
background-color: var(--border);
|
|
}
|
|
|
|
.nav-loader-container {
|
|
position: absolute;
|
|
top: 0;
|
|
bottom: 0;
|
|
left: 0;
|
|
right: 0;
|
|
background-color: var(--loading-bg-color);
|
|
z-index: 10;
|
|
}
|
|
|
|
.nav-loader-centerer {
|
|
position: absolute;
|
|
top: 0;
|
|
bottom: 0;
|
|
left: 0;
|
|
right: 27%;
|
|
display: flex;
|
|
align-items: center;
|
|
align-content: center;
|
|
}
|
|
|
|
.nav-loader {
|
|
margin: auto;
|
|
border: 6px solid rgba(0,0,0,0);
|
|
border-radius: 50%;
|
|
border-top: 6px solid var(--border);
|
|
width: 100px;
|
|
height: 100px;
|
|
-webkit-animation: spin 2s linear infinite; /* Safari */
|
|
animation: spin 2s linear infinite;
|
|
}
|
|
|
|
/* Safari */
|
|
@-webkit-keyframes spin {
|
|
0% { -webkit-transform: rotate(0deg); }
|
|
100% { -webkit-transform: rotate(360deg); }
|
|
}
|
|
|
|
@keyframes spin {
|
|
0% { transform: rotate(0deg); }
|
|
100% { transform: rotate(360deg); }
|
|
}
|
|
|
|
body::-webkit-scrollbar {
|
|
width: 11px;
|
|
}
|
|
|
|
body {
|
|
scrollbar-width: thin;
|
|
scrollbar-color: var(--scrollbar-color);
|
|
}
|
|
|
|
body::-webkit-scrollbar-track {
|
|
background: var(--scrollbar-bg);
|
|
}
|
|
|
|
body::-webkit-scrollbar-thumb {
|
|
background-color: var(--scrollbar-thumb) ;
|
|
border-radius: 6px;
|
|
border: 3px solid var(--scrollbar-bg);
|
|
}
|
|
|
|
.flex-row {
|
|
display: flex;
|
|
flex-direction: row;
|
|
}
|
|
|
|
.flex-col {
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
|
|
.space-between {
|
|
justify-content: space-between;
|
|
}
|
|
|
|
.horizontal-spacer {
|
|
margin-right: 1em;
|
|
}
|
|
|
|
.horizontal-spacer-sm {
|
|
margin-right: 0.25em;
|
|
}
|
|
|
|
.vertical-spacer {
|
|
margin-bottom: 1em;
|
|
}
|
|
|
|
.spacer-stretchy {
|
|
flex-grow: 1;
|
|
}
|
|
|
|
.nav-hidden {
|
|
display: none;
|
|
}
|
|
|
|
.outer-container {
|
|
height: 100%;
|
|
background-color: var(--container);
|
|
color: var(--font);
|
|
padding: 1em;
|
|
padding-bottom: 0;
|
|
}
|
|
|
|
input[type="text"] {
|
|
background-color: var(--container);
|
|
color: inherit;
|
|
flex-grow: 1;
|
|
padding: 0.25em 1em 0.25em 1em;
|
|
border: 1px solid var(--border);
|
|
border-radius: 4px;
|
|
}
|
|
|
|
.inner-container {
|
|
height: 100%;
|
|
flex-grow: 1;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.contents-view {
|
|
height: 100%;
|
|
flex-basis: 0;
|
|
flex-grow: 8;
|
|
background-color: var(--navigation);
|
|
border: 1px solid var(--border);
|
|
border-radius: var(--nav-border-radius);
|
|
padding: 0.5em;
|
|
display: flex;
|
|
flex-flow: row wrap;
|
|
justify-content: flex-start;
|
|
align-items: flex-start;
|
|
align-content: flex-start;
|
|
overflow: auto;
|
|
}
|
|
|
|
.nav-item {
|
|
margin: 2px;
|
|
padding: 3px;
|
|
flex: 0;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
cursor: pointer;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
.nav-item-selected {
|
|
background-color: var(--selected);
|
|
border: 1px solid var(--border);
|
|
border-radius: var(--nav-border-radius);
|
|
box-sizing: border-box;
|
|
padding: 2px;
|
|
}
|
|
|
|
.nav-item .nav-item-title {
|
|
text-align: center;
|
|
overflow-wrap: anywhere;
|
|
}
|
|
|
|
.nav-item .nav-item-icon {
|
|
position: relative;
|
|
text-align: center;
|
|
width: 100px;
|
|
font-size: 80px;
|
|
color: var(--nav-entry-color);
|
|
}
|
|
|
|
.nav-item-symlink-symbol-dir {
|
|
position: absolute;
|
|
color: var(--symlink-symbol-color);
|
|
font-size: 12pt;
|
|
bottom: 19%;
|
|
right: 15%;
|
|
}
|
|
|
|
.nav-item-symlink-symbol-file {
|
|
position: absolute;
|
|
color: var(--symlink-symbol-color);
|
|
font-size: 12pt;
|
|
bottom: 6%;
|
|
right: 25%;
|
|
}
|
|
|
|
.nav-info-column {
|
|
background-color: var(--container);
|
|
flex-basis: 0;
|
|
flex-grow: 3;
|
|
padding: 1em;
|
|
border: 1px solid var(--border);
|
|
border-radius: var(--nav-border-radius);
|
|
}
|
|
|
|
.nav-info-column-filename {
|
|
margin: 0 12px 0 12px;
|
|
font-weight: bolder;
|
|
font-size: 150%;
|
|
}
|
|
|
|
.nav-property-pair {
|
|
margin: 2px 12px 2px 12px;
|
|
display: flex;
|
|
flex-flow: row nowrap;
|
|
align-items: baseline;
|
|
}
|
|
|
|
.nav-property-pair-key {
|
|
font-weight: bold;
|
|
flex-basis: 0;
|
|
flex: 2;
|
|
padding-right: 5px;
|
|
}
|
|
|
|
.nav-property-pair-value {
|
|
font-family: "Courier New", Courier, monospace;
|
|
font-size: 85%;
|
|
flex-basis: 0;
|
|
flex: 3;
|
|
}
|
|
|
|
.nav-property-pair > input[type="text"] {
|
|
flex-grow: 3;
|
|
flex-basis: 0;
|
|
padding: 0px 12px 0px 12px;
|
|
}
|
|
|
|
.grid-container {
|
|
margin: 0 24px 2px 24px;
|
|
display: grid;
|
|
grid-template-columns: 2fr 1fr 1fr 1fr;
|
|
justify-items: center;
|
|
row-gap: 4px;
|
|
}
|
|
|
|
.grid-label {
|
|
font-weight: bold;
|
|
flex-basis: 0;
|
|
font-size: 90%;
|
|
}
|
|
|
|
.grid-row-label {
|
|
justify-self: start;
|
|
padding-right: 5px;
|
|
padding-left: 50%;
|
|
}
|
|
|
|
.nav-btn-group {
|
|
display: flex;
|
|
flex-flow: row nowrap;
|
|
justify-content: flex-end;
|
|
align-items: flex-start;
|
|
}
|
|
|
|
.editor-header {
|
|
font-weight: bold;
|
|
}
|
|
|
|
.edit-file-contents {
|
|
height: 100%;
|
|
flex-basis: 0;
|
|
flex-grow: 8;
|
|
flex-flow: column nowrap;
|
|
align-items: stretch;
|
|
}
|
|
|
|
.edit-file-contents > textarea {
|
|
flex-grow: 1;
|
|
white-space: pre;
|
|
overflow: auto;
|
|
resize: none;
|
|
border: 1px solid var(--border);
|
|
border-radius: var(--nav-border-radius);
|
|
outline: none;
|
|
padding: 5px;
|
|
color: var(--font);
|
|
background-color: var(--textarea-bg);
|
|
}
|
|
|
|
.nav-footer {
|
|
flex: 1;
|
|
align-items: baseline;
|
|
justify-content: space-between;
|
|
padding: 5px;
|
|
}
|
|
|
|
.nav-footer > a > img {
|
|
height: 1.25em;
|
|
width: auto;
|
|
margin-bottom: 4px;
|
|
}
|
|
|
|
.nav-footer > a > .logo-45 {
|
|
font-weight: 900;
|
|
color: var(--logo-45);
|
|
}
|
|
|
|
.nav-footer > a > .logo-drives {
|
|
font-weight: 600;
|
|
color: #981c20;
|
|
}
|
|
|
|
.nav-toggle {
|
|
justify-self: flex-end;
|
|
}
|
|
|
|
.switch {
|
|
position: relative;
|
|
display: inline-block;
|
|
width: 30px;
|
|
height: 17px;
|
|
}
|
|
|
|
.switch input {
|
|
opacity: 0;
|
|
width: 0;
|
|
height: 0;
|
|
}
|
|
|
|
.slider {
|
|
position: absolute;
|
|
cursor: pointer;
|
|
top: 0;
|
|
left: 0;
|
|
right: 0;
|
|
bottom: 0;
|
|
background-color: var(--toggle-light);
|
|
-webkit-transition: 0.4s;
|
|
transition: 0.4s;
|
|
}
|
|
|
|
.slider:before {
|
|
position: absolute;
|
|
content: "";
|
|
height: 13px;
|
|
width: 13px;
|
|
left: 2px;
|
|
bottom: 2px;
|
|
background-color: white;
|
|
-webkit-transition: 0.4s;
|
|
transition: 0.4s;
|
|
}
|
|
|
|
input:checked + .slider {
|
|
background-color: var(--toggle-dark);
|
|
}
|
|
|
|
input:focus + .slider {
|
|
box-shadow: 0 0 1px var(--toggle-dark);
|
|
}
|
|
|
|
input:checked + .slider:before {
|
|
-webkit-transform: translateX(13px);
|
|
-ms-transform: translateX(13px);
|
|
transform: translateX(13px);
|
|
}
|
|
|
|
.slider.round {
|
|
border-radius: 17px;
|
|
}
|
|
|
|
.slider.round:before {
|
|
border-radius: 50%;
|
|
}
|