partitioncloud-server/partitioncloud/static/style/style.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);
}