mirror of
https://github.com/partitioncloud/partitioncloud-server.git
synced 2025-01-23 17:26:26 +01:00
773 lines
13 KiB
CSS
773 lines
13 KiB
CSS
@import url('/static/style/colors.css');
|
|
/** @import url('https://www.augustin64.fr/static/font/iosevka.css'); */
|
|
|
|
|
|
/** Various settings (variables) */
|
|
:root {
|
|
--sidebar-size: max(10vw, 250px);
|
|
--sidebar-sz-plus10: calc(var(--sidebar-size) + 10px);
|
|
--sidebar-sz-moins20: calc(var(--sidebar-size) - 20px);
|
|
}
|
|
|
|
* {
|
|
font-family: var(--font-family);
|
|
}
|
|
|
|
body {
|
|
overflow-x: hidden;
|
|
}
|
|
|
|
|
|
/** Hide scrollbars (deeply needed on Chromium) */
|
|
::-webkit-scrollbar {
|
|
display: none;
|
|
}
|
|
|
|
:root {
|
|
-ms-overflow-style: none;
|
|
scrollbar-width: none;
|
|
}
|
|
|
|
|
|
/** Generic things */
|
|
h1 {
|
|
font-size: 32px;
|
|
}
|
|
|
|
h2 {
|
|
font-size: 24px;
|
|
}
|
|
|
|
h1,
|
|
#sidebar>h2 {
|
|
margin-left: 30px;
|
|
}
|
|
|
|
h2 {
|
|
color: var(--color-subtext1);
|
|
}
|
|
|
|
a {
|
|
text-decoration: none;
|
|
color: var(--color-blue);
|
|
}
|
|
|
|
body {
|
|
color: var(--color-text);
|
|
background-color: var(--color-base);
|
|
}
|
|
|
|
#page-header {
|
|
margin-left: 10px;
|
|
}
|
|
|
|
|
|
/** Just general styling of elements */
|
|
#content-container {
|
|
background-color: var(--color-base);
|
|
position: absolute;
|
|
top: 0;
|
|
left: var(--sidebar-size);
|
|
right: 0;
|
|
bottom: 0;
|
|
|
|
-moz-transition: left 0.5s ease;
|
|
transition: left 0.5s ease;
|
|
|
|
padding: 0 25px;
|
|
}
|
|
|
|
#content {
|
|
margin-bottom: 50px;
|
|
}
|
|
|
|
#footer {
|
|
position: fixed;
|
|
text-align: center;
|
|
|
|
bottom: 0;
|
|
right: 0;
|
|
left: var(--sidebar-size);
|
|
|
|
background-color: var(--color-base);
|
|
-moz-transition: left 0.5s ease;
|
|
transition: left 0.5s ease;
|
|
|
|
padding: 5px;
|
|
}
|
|
|
|
.album-cover, .groupe-cover {
|
|
padding: 5px;
|
|
margin: 5px;
|
|
border-radius: 3px;
|
|
background-color: inherit;
|
|
overflow-x: hidden;
|
|
}
|
|
|
|
.album-cover:hover, .groupe-album-cover:hover {
|
|
background-color: var(--color-base);
|
|
}
|
|
|
|
.groupe-cover {
|
|
background-color: var(--color-crust);
|
|
}
|
|
|
|
.groupe-albums-cover {
|
|
background-color: var(--color-mantle);
|
|
border-radius: 3px;
|
|
margin: -1px;
|
|
margin-top: 10px;
|
|
}
|
|
|
|
|
|
/** Sidebar toggle */
|
|
#sidebar {
|
|
background-color: var(--color-mantle);
|
|
width: var(--sidebar-size);
|
|
position: fixed;
|
|
top: 0;
|
|
left: 0;
|
|
bottom: 0;
|
|
|
|
-moz-transition: width 0.5s ease;
|
|
transition: width 0.5s ease;
|
|
}
|
|
|
|
#slide {
|
|
padding: 10px 6px 3px 10px;
|
|
border-radius: 3px;
|
|
background-color: var(--color-crust);
|
|
color: var(--color-blue);
|
|
}
|
|
|
|
#slide-sidebar {
|
|
display: none;
|
|
}
|
|
|
|
input:checked#slide-sidebar~#content-container {
|
|
left: 0;
|
|
overflow: unset;
|
|
margin-left: 0;
|
|
}
|
|
|
|
input:checked#slide-sidebar~#footer {
|
|
left: 0;
|
|
overflow: unset;
|
|
margin-left: 0;
|
|
}
|
|
|
|
input:checked#slide-sidebar~#sidebar {
|
|
display: none;
|
|
transition: display 0s 0.5s;
|
|
}
|
|
|
|
input:checked#slide-sidebar~label {
|
|
left: 10px;
|
|
}
|
|
|
|
#slide-sidebar~label {
|
|
z-index: 1;
|
|
position: absolute;
|
|
top: 20px;
|
|
left: var(--sidebar-sz-plus10);
|
|
background-color: var(--color-base);
|
|
|
|
-moz-transition: left 0.5s ease;
|
|
transition: left 0.5s ease;
|
|
}
|
|
|
|
|
|
/** Albums: users */
|
|
#album-header {
|
|
display: flex;
|
|
}
|
|
|
|
section#users {
|
|
display: flex;
|
|
}
|
|
|
|
#header-actions {
|
|
align-self: center;
|
|
margin-left: auto;
|
|
margin-right: 0;
|
|
display: flex;
|
|
}
|
|
|
|
.user-profile-picture,
|
|
.dropdown {
|
|
margin: 3px;
|
|
width: 30px;
|
|
height: 30px;
|
|
|
|
text-align: center;
|
|
line-height: 30px;
|
|
|
|
border-radius: 5px;
|
|
font-weight: 600;
|
|
}
|
|
|
|
.user-profile-picture {
|
|
color: var(--color-mantle);
|
|
}
|
|
|
|
.user-profile {
|
|
display: inline-flex;
|
|
}
|
|
|
|
.user-profile .user-profile-picture {
|
|
position: absolute;
|
|
left: 30px;
|
|
}
|
|
|
|
.dropdown {
|
|
background-color: var(--color-surface1);
|
|
}
|
|
|
|
|
|
/** Partitions Grid */
|
|
#partitions-grid {
|
|
margin-top: 50px;
|
|
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fill, 200px);
|
|
justify-content: center;
|
|
overflow-x: scroll;
|
|
}
|
|
|
|
#partitions-grid a {
|
|
text-decoration: none;
|
|
}
|
|
|
|
#search-partitions-grid {
|
|
display: flex;
|
|
overflow-x: scroll;
|
|
}
|
|
|
|
.partition {
|
|
background-color: var(--color-surface0);
|
|
|
|
width: 178px;
|
|
margin: 15px 0;
|
|
|
|
border-radius: 5px;
|
|
}
|
|
|
|
img.partition-thumbnail {
|
|
border-radius: 5px 5px 0 0;
|
|
height: 178px;
|
|
width: 178px;
|
|
|
|
background-color: var(--color-surface2);
|
|
}
|
|
|
|
.partition {
|
|
color: var(--color-text);
|
|
}
|
|
|
|
.partition-author {
|
|
font-style: italic;
|
|
font-size: .9rem;
|
|
}
|
|
|
|
.partition-description {
|
|
padding: 3px;
|
|
min-height: 50px;
|
|
}
|
|
|
|
.partition-action {
|
|
padding: 7px;
|
|
margin: 3px;
|
|
border-radius: 3px;
|
|
box-shadow: 1px 2px 2px rgba(0, 0, 0, 0.2);
|
|
background-color: #cdd6f4;
|
|
}
|
|
|
|
.partition-buttons {
|
|
float: right;
|
|
display: flex;
|
|
transform: translateX(-22px) translateY(-115px);
|
|
}
|
|
|
|
.partition-name {
|
|
text-overflow: ellipsis;
|
|
overflow: hidden;
|
|
}
|
|
|
|
|
|
/** Albums grid in groupe view */
|
|
#albums-grid > a > .album {
|
|
padding: 10px;
|
|
border-radius: 3px;
|
|
}
|
|
|
|
#albums-grid > a > .album:hover {
|
|
background-color: var(--color-surface0);
|
|
}
|
|
|
|
|
|
/** Sidebar content */
|
|
.create-button {
|
|
text-align: center;
|
|
margin: 10px;
|
|
background-color: var(--color-surface1);
|
|
padding: 8px 0;
|
|
border-radius: 5px;
|
|
color: var(--color-text);
|
|
border: 2px solid var(--color-overlay0);
|
|
}
|
|
|
|
.create-button:hover {
|
|
border-color: var(--color-blue);
|
|
background-color: var(--color-surface0);
|
|
}
|
|
|
|
#sidebar-navigation {
|
|
overflow: scroll;
|
|
height: calc(100% - 375px); /* we don't want it hidden behind settings */
|
|
padding: 0 5px;
|
|
}
|
|
|
|
#albums div, #groupes div {
|
|
padding: 5px;
|
|
}
|
|
|
|
.user {
|
|
display: flex;
|
|
color: var(--color-text);
|
|
}
|
|
|
|
.username {
|
|
margin-top: 7px;
|
|
margin-left: 5px;
|
|
}
|
|
|
|
#settings-container button {
|
|
background-color: inherit;
|
|
color: var(--color-text);
|
|
border-style: none;
|
|
border-radius: 3px;
|
|
font-size: .9rem;
|
|
|
|
width: 100%;
|
|
width: -moz-available;
|
|
width: -webkit-fill-available;
|
|
width: stretch;
|
|
|
|
padding: 5px;
|
|
padding-left: 20px; /* Prevent overlay with svg */
|
|
}
|
|
|
|
#settings-container button:hover {
|
|
background-color: var(--color-crust);
|
|
}
|
|
|
|
#settings-container {
|
|
position: fixed;
|
|
bottom: 0;
|
|
|
|
background-color: var(--color-base);
|
|
width: var(--sidebar-sz-moins20);
|
|
padding: 5px;
|
|
margin: 5px;
|
|
|
|
border-radius: 3px;
|
|
|
|
-moz-transition: width 0.5s ease;
|
|
transition: width 0.5s ease;
|
|
}
|
|
|
|
button#logout,
|
|
a#delete-album {
|
|
color: var(--color-red);
|
|
}
|
|
|
|
#settings-container svg.icon {
|
|
scale: 0.9;
|
|
position: absolute;
|
|
left: 10px;
|
|
transform: translateY(-17%);
|
|
}
|
|
|
|
#settings-container > a > .user {
|
|
margin-top: 6px;
|
|
border-radius: 3px;
|
|
padding: 3px;
|
|
}
|
|
|
|
#settings-container > a > .user:hover {
|
|
background-color: var(--color-mantle);
|
|
}
|
|
|
|
|
|
/** Dropdown */
|
|
.dropdown-content {
|
|
display: none;
|
|
position: absolute;
|
|
z-index: 2;
|
|
|
|
background-color: var(--color-surface1);
|
|
font-size: 0.9rem;
|
|
transform: translateX(-130px);
|
|
min-width: 160px;
|
|
border-radius: 3px;
|
|
|
|
box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3);
|
|
}
|
|
|
|
.dropdown:hover .dropdown-content {
|
|
display: block;
|
|
width: unset;
|
|
}
|
|
|
|
.dropdown-content>a:hover {
|
|
background-color: var(--color-surface0);
|
|
}
|
|
|
|
.dropdown-content>a {
|
|
color: var(--color-text);
|
|
padding: 3px 0;
|
|
display: block;
|
|
border-radius: inherit;
|
|
}
|
|
|
|
|
|
/** Dialogs */
|
|
dialog {
|
|
display: none;
|
|
z-index: 3;
|
|
|
|
/* Geometry */
|
|
top: 0;
|
|
border-width: 2px;
|
|
border-radius: 3px;
|
|
|
|
/* Colors */
|
|
background-color: var(--color-crust);
|
|
color: var(--color-text);
|
|
border-color: var(--color-lavender);
|
|
|
|
min-width: 75vw;
|
|
}
|
|
|
|
.close-dialog {
|
|
float: right;
|
|
}
|
|
|
|
dialog:target {
|
|
display: block;
|
|
}
|
|
|
|
dialog:target~.mask {
|
|
display: block;
|
|
}
|
|
|
|
.mask {
|
|
display: none;
|
|
position: fixed;
|
|
top: 0;
|
|
left: 0;
|
|
width: 100vw;
|
|
height: 100vh;
|
|
background-color: var(--color-crust);
|
|
z-index: 1;
|
|
opacity: 50%;
|
|
}
|
|
|
|
|
|
/** Different kinds of inputs */
|
|
input[type="text"],
|
|
input[type="search"],
|
|
input[type="password"],
|
|
select,
|
|
textarea {
|
|
padding: 7px;
|
|
background-color: var(--color-surface1);
|
|
color: var(--color-text);
|
|
margin: 3px;
|
|
|
|
border-radius: 3px;
|
|
border-width: 0;
|
|
border-style: unset;
|
|
}
|
|
|
|
select {
|
|
max-width: 190px;
|
|
/* We don't want loong album names to break the css */
|
|
}
|
|
|
|
textarea {
|
|
resize: both;
|
|
min-width: 178px;
|
|
}
|
|
|
|
input[type="submit"],
|
|
button {
|
|
padding: 10px 20px;
|
|
border: none;
|
|
border-radius: 3px;
|
|
margin: 5px;
|
|
cursor: pointer;
|
|
font-weight: bold;
|
|
}
|
|
|
|
input[type="submit"] {
|
|
background-color: var(--color-blue);
|
|
color: var(--color-base);
|
|
}
|
|
|
|
button {
|
|
background-color: var(--color-subtext0);
|
|
color: var(--color-base)
|
|
}
|
|
|
|
/* Styles for input[type="file"] */
|
|
input[type="file"] {
|
|
padding: 7px 20px;
|
|
border: none;
|
|
border-radius: 3px;
|
|
margin: 3px;
|
|
background-color: var(--color-blue);
|
|
color: var(--color-base);
|
|
cursor: pointer;
|
|
}
|
|
|
|
::placeholder {
|
|
color: var(--color-text);
|
|
opacity: 40%;
|
|
}
|
|
|
|
|
|
/** Dangerous buttons */
|
|
button#logout:hover,
|
|
a#delete-album:hover,
|
|
.red-confirm,
|
|
input[type="submit"].red-confirm,
|
|
#delete-partition {
|
|
background-color: var(--color-red);
|
|
color: var(--color-mantle);
|
|
}
|
|
|
|
|
|
/** Search bar */
|
|
#search-form {
|
|
margin: 10px;
|
|
}
|
|
|
|
#search-bar {
|
|
width: 100%;
|
|
width: -moz-available;
|
|
width: -webkit-fill-available;
|
|
width: stretch;
|
|
}
|
|
|
|
#search-submit {
|
|
padding: 5px;
|
|
position: absolute;
|
|
right: 10px;
|
|
width: calc(100% - 90px);
|
|
}
|
|
|
|
|
|
/** Search results */
|
|
.add-partition-form select {
|
|
width: 178px;
|
|
margin: 0px;
|
|
}
|
|
|
|
.add-partition-form {
|
|
align-items: center;
|
|
display: grid;
|
|
}
|
|
|
|
.add-partition-form input[type="submit"] {
|
|
margin: 5px 0;
|
|
width: 178px;
|
|
}
|
|
|
|
|
|
/** Flashed messages */
|
|
.flash {
|
|
margin: 1em;
|
|
padding: 1em;
|
|
background: var(--color-mantle);
|
|
border: 2px solid var(--color-lavender);
|
|
border-radius: 3px;
|
|
}
|
|
|
|
|
|
/** Tableaux */
|
|
table {
|
|
border: thin solid var(--color-surface0);
|
|
border-collapse: collapse;
|
|
margin: auto;
|
|
width: 100%;
|
|
width: -moz-available;
|
|
width: -webkit-fill-available;
|
|
width: stretch;
|
|
}
|
|
|
|
td {
|
|
height: 35px; /* will grow automatically */
|
|
min-width: 178px;
|
|
border: thin solid var(--color-surface0);
|
|
text-align: center;
|
|
}
|
|
|
|
.table-username {
|
|
line-height: 37px;
|
|
}
|
|
|
|
|
|
/** Panneau admin */
|
|
#actions-rapides .button {
|
|
background-color: var(--color-base);
|
|
color: var(--color-text);
|
|
padding: 10px;
|
|
border-radius: 5px;
|
|
margin: 10px;
|
|
}
|
|
|
|
#actions-rapides {
|
|
display: flex;
|
|
padding: 5px;
|
|
background-color: var(--color-crust);
|
|
justify-content: center;
|
|
text-align: center;
|
|
align-items: center;
|
|
margin: 5px;
|
|
border-radius: 5px;
|
|
margin-bottom: 20px;
|
|
}
|
|
|
|
#actions-rapides .button:hover {
|
|
background-color: var(--color-lavender);
|
|
color: var(--color-crust);
|
|
}
|
|
|
|
.liste {
|
|
text-align: left;
|
|
}
|
|
|
|
.x-scrollable {
|
|
overflow-x: auto;
|
|
}
|
|
|
|
|
|
/** Attachment page */
|
|
#pdf-embed {
|
|
margin: auto;
|
|
|
|
width: 100%;
|
|
width: -moz-available;
|
|
width: -webkit-fill-available;
|
|
width: stretch;
|
|
|
|
height: 50vh;
|
|
}
|
|
|
|
midi-visualizer {
|
|
background-color: white;
|
|
border-radius: 3px;
|
|
}
|
|
|
|
midi-player {
|
|
color: black;
|
|
}
|
|
|
|
#attachments {
|
|
overflow-y: scroll;
|
|
}
|
|
|
|
#attachments > table {
|
|
border: none;
|
|
}
|
|
|
|
#attachments > table > tbody > tr > td {
|
|
border: none;
|
|
min-width: fit-content;
|
|
}
|
|
|
|
.centered {
|
|
justify-content: center;
|
|
display: flex;
|
|
}
|
|
|
|
#share-qrcode {
|
|
margin: 20px;
|
|
margin-top: 50px;
|
|
border-radius: 15px;
|
|
width: 370px;
|
|
height: 370px;
|
|
background-color: white;
|
|
}
|
|
|
|
#share-url {
|
|
background-color: var(--color-surface1);
|
|
width: fit-content;
|
|
border-radius: 4px;
|
|
padding: 10px;
|
|
margin-bottom: 100px;
|
|
margin-top: 20px;
|
|
}
|
|
|
|
#logs-embed {
|
|
margin: auto;
|
|
height: 80vh;
|
|
width: 95%;
|
|
padding: 5px;
|
|
border-radius: 5px;
|
|
background-color: var(--color-crust);
|
|
}
|
|
|
|
/** Input[file] */
|
|
.file-area {
|
|
position: relative;
|
|
}
|
|
.file-area input[type=file] {
|
|
position: absolute;
|
|
height: 100%;
|
|
top: 0;
|
|
left: 0;
|
|
right: 0;
|
|
bottom: 0;
|
|
opacity: 0;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.file-area .inner-file-area {
|
|
padding: 30px;
|
|
background: var(--color-mantle);
|
|
border: 2px dashed var(--color-red);
|
|
text-align: center;
|
|
transition: background 0.3s ease-in-out;
|
|
}
|
|
|
|
.file-area .inner-file-area .success {
|
|
display: none;
|
|
}
|
|
|
|
.file-area:hover > .inner-file-area {
|
|
background: var(--color-surface0);
|
|
}
|
|
|
|
.file-area input[type=file]:valid + .inner-file-area {
|
|
border-color: var(--color-green);
|
|
}
|
|
.file-area input[type=file]:not(:required) + .inner-file-area {
|
|
border-color: var(--color-blue);
|
|
}
|
|
|
|
.file-area input[type=file]:valid + .inner-file-area .success {
|
|
display: inline-block;
|
|
}
|
|
.file-area input[type=file]:valid + .inner-file-area .default {
|
|
display: none;
|
|
}
|
|
|
|
.file-area input[type=file]:not(:required) + .inner-file-area .success {
|
|
display: none;
|
|
}
|
|
|
|
.file-area input[type=file]:not(:required) + .inner-file-area .default {
|
|
display: inline-block;
|
|
} |