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('https://www.augustin64.fr/static/font/iosevka.css'); */
|
|
|
|
|
|
/** Color Schemes */
|
|
/* Themes used: Catppuccin Latte & Moccha
|
|
* https://github.com/catppuccin/catppuccin */
|
|
|
|
/* Dark theme: Catpuccin Mocha */
|
|
:root {
|
|
--color-rosewater: #f5e0dc;
|
|
--color-flamingo: #f2cdcd;
|
|
--color-pink: #f5c2e7;
|
|
--color-mauve: #cba6f7;
|
|
--color-red: #f38ba8;
|
|
--color-maroon: #eba0ac;
|
|
--color-peach: #fab387;
|
|
--color-yellow: #f9e2af;
|
|
--color-green: #a6e3a1;
|
|
--color-teal: #94e2d5;
|
|
--color-sky: #89dceb;
|
|
--color-sapphire: #74c7ec;
|
|
--color-blue: #89b4fa;
|
|
--color-lavender: #b4befe;
|
|
--color-text: #cdd6f4;
|
|
--color-subtext1: #bac2de;
|
|
--color-subtext0: #a6adc8;
|
|
--color-overlay2: #9399b2;
|
|
--color-overlay1: #7f849c;
|
|
--color-overlay0: #6c7086;
|
|
--color-surface2: #585b70;
|
|
--color-surface1: #45475a;
|
|
--color-surface0: #313244;
|
|
--color-base: #1e1e2e;
|
|
--color-mantle: #181825;
|
|
--color-crust: #11111b;
|
|
|
|
/* --font-family: Iosevka Web; /* Specify the font here */
|
|
}
|
|
|
|
/* Light theme: Catppuccin Latte */
|
|
@media (prefers-color-scheme: light) {
|
|
:root {
|
|
--color-rosewater: #dc8a78;
|
|
--color-flamingo: #dd7878;
|
|
--color-pink: #ea76cb;
|
|
--color-mauve: #8839ef;
|
|
--color-red: #d20f39;
|
|
--color-maroon: #e64553;
|
|
--color-peach: #fe640b;
|
|
--color-yellow: #df8e1d;
|
|
--color-green: #40a02b;
|
|
--color-teal: #179299;
|
|
--color-sky: #04a5e5;
|
|
--color-sapphire: #209fb5;
|
|
--color-blue: #1e66f5;
|
|
--color-lavender: #7287fd;
|
|
--color-text: #4c4f69;
|
|
--color-subtext1: #5c5f77;
|
|
--color-subtext0: #6c6f85;
|
|
--color-overlay2: #7c7f93;
|
|
--color-overlay1: #8c8fa1;
|
|
--color-overlay0: #9ca0b0;
|
|
--color-surface2: #acb0be;
|
|
--color-surface1: #bcc0cc;
|
|
--color-surface0: #ccd0da;
|
|
--color-base: #eff1f5;
|
|
--color-mantle: #e6e9ef;
|
|
--color-crust: #dce0e8;
|
|
}
|
|
}
|
|
|
|
|
|
/** Various settings (variables) */
|
|
:root {
|
|
--sidebar-size: max(10vw, 160px);
|
|
--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;
|
|
}
|
|
|
|
.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>.user {
|
|
margin-top: 6px;
|
|
border-radius: 3px;
|
|
}
|
|
|
|
#settings-container>.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,
|
|
#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;
|
|
}
|
|
|
|
#share-url {
|
|
background-color: var(--color-surface1);
|
|
width: fit-content;
|
|
border-radius: 4px;
|
|
padding: 10px;
|
|
margin-bottom: 100px;
|
|
margin-top: 20px;
|
|
}
|