Created
July 20, 2023 15:18
-
-
Save lucaspar/3b304e4f5fb387b28f2996bf0c6608d9 to your computer and use it in GitHub Desktop.
Heimdall Style
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
/* 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; | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment