Skip to content

Instantly share code, notes, and snippets.

@lucaspar

lucaspar/heimdall-style.css

Created July 20, 2023 15:18
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save lucaspar/3b304e4f5fb387b28f2996bf0c6608d9 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save lucaspar/3b304e4f5fb387b28f2996bf0c6608d9 to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. lucaspar created this gist Jul 20, 2023.
    351 changes: 351 additions & 0 deletions heimdall-style.css
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,351 @@
    /* 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;
    }