Heimdall Style

heimdall-style.css

/* Paste these lines in Settings > Advanced > Custom CSS */
/* ================ */
/* generic elements */
body {
    background-color: rgb(16, 16, 16);
    color: rgb(198, 198, 198);
    /* font-family: monospace; */
    line-height: 1.8;
}

/* text styling */
a,
p,
h1,
h2,
h3,
h4,
h5,
h6,
.module-actions .button,
.module-container .table tbody a {
    background-color: unset;
    color: inherit;
    /* font-family: monospace; */
}


/* remove underline from links */
a {
    text-decoration: none;
}

/* horizontal bars */
hr {
    border: 1px solid rgba(0, 0, 0, 0.2);
}

/* table cells have limited height */
td,
td>pre {
    font-family: monospace;
    max-height: 300px;
    overflow: auto;
}

/* ================================= */
/* blur background of large elements */
#main {
    backdrop-filter: blur(3px) contrast(0.8) brightness(0.8) saturate(1.2) sepia(0.1);
}

#create {
    backdrop-filter: blur(8px);
    background-color: transparent;
}

/* ====================== */
/* main dark theme block */
input,
header,
.alert,
textarea,
.newblock h2,
#sapconfig h2,
.module-container,
.searchform select,
div.create .input input,
div.create .input select,
.create .textarea textarea,
.searchform .input-container,
.select2-container--default .select2-selection--multiple,
.select2-container--default .select2-selection--multiple .select2-selection__choice {
    backdrop-filter: blur(6px);
    /* 1 percent noise */
    /* background-image: url(https://i.imgur.com/OiW1iGs.png); */
    /* 3 percent noise */
    background-image: url(https://i.imgur.com/6eed9Rs.png);
    /* 5 percent noise */
    /* background-image: url(https://i.imgur.com/qYEaQUR.png); */
    background-blend-mode: multiply;
    background-repeat: round;
    background-position: center;
    border: none;
    background-color: rgba(16, 16, 16, 0.452);
    color: rgb(198, 198, 198);
}

.module-container footer,
.module-container header,
.module-container .table tbody,
.module-container .table tbody td,
.module-container .table thead th,
.module-container .table {
    background: transparent;
    color: inherit;
    border: none;
}

table.table.table-hover thead th,
.module-container .table thead th {
    border-top: 1px thin rgba(0, 0, 0, 0.2) !important;
}

.module-container header .section-title {
    color: rgb(198, 198, 198);
    background: none;
}

/* dark 'error' background */
.module-container .table tbody td.form-error {
    background-color: #2e0609;
}

/* more table styling */
/* ================== */

/* background change on hover */
.module-container .table tbody tr:hover {
    background-color: rgba(255, 255, 255, 0.038);
    transition: background-color 0.2s ease-in-out;
}

.module-container footer,
.module-container header {
    border: none;
}

.module-container {
    border-radius: 1em;
}

.module-container header,
.module-container .table thead th {
    background-color: rgba(122, 35, 11, 0.76);
    font-family: monospace;
}

/* top action buttons in forms and tables */
/* ====================================== */
.module-actions .button::after {
    border-right: 1px solid rgba(0, 0, 0, 0.2);
    bottom: 0;
    content: "";
    left: 0;
    position: absolute;
    top: 0;
}

.module-actions .button {
    border-left: 1px solid rgba(0, 0, 0, 0.2);
}

/* ======================== */
/* table buttons with icons */
a.secondary {
    padding: 1em;
    border-radius: 50%;
    background-color: rgba(122, 35, 11, 0.76) !important;
    transition: background-color 0.2s ease-in-out;
}

.select2-container--default .select2-selection--multiple .select2-selection__choice {
    padding: 0.8em;
    margin: 0.8em;
    border-radius: 0.5em;
    background-color: rgba(122, 35, 11, 0.76) !important;
}

/* increase the size of the little 'x' to remove a tag */
.select2-selection__choice__remove {
    width: 2em;
    height: 2em;
    margin-right: 1em !important;
    border-radius: 50%;
    color: inherit;
    background-color: #2e0609a9;
}

a.secondary:hover {
    background-color: rgba(122, 35, 11, 0.76) !important;
}

/* =============== */
/* control buttons */
/* make it always show to the top right of the screen */
#config-buttons {
    position: fixed;
    top: 0;
    right: 0;
    opacity: 0.6;
    padding: 0.5em;
    height: fit-content;
    transition: opacity 0.2s ease-in-out;
}

#config-buttons:hover {
    opacity: 1;
}

a.config {
    transition: opacity 0.2s ease-in-out;
    border-radius: 1em;
    margin: 0.5em;
    opacity: 0.3;
}

a.config:hover {
    opacity: 1;
}

/* =============== */
/* dashboard cards */

.item {
    backdrop-filter: blur(3px);
    background-color: rgba(0, 0, 0, 0.435) !important;
    background-image: none !important;
    border-radius: 1em;
    border: none;
    box-shadow: 0 0 0.5em rgba(0, 0, 0, 0.2);
}

.item:hover {
    /* transform: scale(1.05); */
    /* transition: transform 0.05s ease-in-out; */
    box-shadow: 0 0 2em rgba(0, 0, 0, 0.2);
}

.item::after {
    opacity: 0 !important;
    background: hsla(0, 0%, 100%, .1);
    background-color: rgba(255, 255, 255, 0.1);
    background-position-x: 0%;
    background-position-y: 0%;
    background-repeat: repeat;
    background-attachment: scroll;
    background-image: none;
    background-size: auto;
    background-origin: padding-box;
    background-clip: border-box;
    border-radius: 50%;
    box-shadow: 0 0 40px 0 rgba(0, 0, 0, .2);
    content: "";
    height: 90px;
    position: absolute;
    right: -48px;
    top: 0;
    width: 90px;
}

.item:hover::after {
    opacity: 1 !important;
    transition: opacity 0.15s ease-in-out;
}

.link.white {
    opacity: 0;
    transition: opacity 0.35s ease-in-out;
}

.link.white:hover {
    opacity: 1;
    transition: opacity 0.35s ease-in-out;
}

/* ============ */
/* better forms */
div.create .input input,
div.create .input select {
    /* width: unset; */
    padding: 1em;
    border-radius: 0.5em;
    margin: 0 0.5em 0.5em 0.5em;
}

.tooltip {
    display: None;
}

#create,
#create.create {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: wrap !important;
}

.input {
    border-radius: 1em;
    text-align: center;
}

input {
    border-bottom: 1px groove rgba(255, 255, 255, 0.3);
    background-color: rgb(25, 25, 25);
}

.input,
input,
label {
    width: fit-content;
    color: inherit;
    /* border: 1px solid red; */
}

div.create .input label:not(.switch) {
    margin-bottom: 0.5em;
    text-align: center;
    font-weight: inherit;
    color: inherit;
}

/* center avatar in user creation */
.icon-container {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    margin: 0 auto;
    width: 100%;
}

/* override password styling */
body div#app div.content main#main form#userform section.module-container div#create.create div.create {
    margin-top: 0;
    width: inherit;
    padding: inherit;
}

/* ================================== */
/* select the custom CSS editor input */
/* body>div>div>#main>form>section.module-container>div.create:nth-child(2)>div.input {
    width: 100% !important;
} */

section.module-container {
    min-width: 700px;
}

textarea.form-control {
    font-family: monospace;
    min-height: 700px;
    height: 100%;
    max-height: fit-content;
    width: 100%;
    padding: 1em;
    border-radius: 1em;
}

#sortable {
    max-width: 1750px;
}