Skip to content

Instantly share code, notes, and snippets.

@Isaiah-Hamilton
Last active April 22, 2022 03:10
Show Gist options
  • Save Isaiah-Hamilton/5160669be3e17b33d39e9015cfa8cc6c to your computer and use it in GitHub Desktop.
Save Isaiah-Hamilton/5160669be3e17b33d39e9015cfa8cc6c to your computer and use it in GitHub Desktop.
/* The custom css for https://boards.greenhouse.io/supabase */
:root {
--brand-color: #3bd08f;
--background-color: #1f1f1f;
--light-background-color: #2a2a2abf;
--border-color: #333333;
--footer-color: #1f1f1f;
--main-text-color: #dddddd;
--highlight-text-color: #6ee7b7;
--sub-header-color: #6e6e6e;
--input-text-color: #a5a5a5;
--link-color: #65d9a5;
--box-shadow: 0px 0px 25px 0px rgba(0, 0, 0, 0.5);
}
* {
font-family: BlinkMacSystemFont, -apple-system, 'Segoe UI', 'Roboto', 'Oxygen',
'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
'Helvetica', 'Arial', sans-serif;
}
::selection {
background-color: var(--highlight-text-color);
color: #333 !important;
}
body {
background-color: var(--background-color);
color: var(--main-text-color);
}
body #wrapper {
background-color: var(--background-color);
min-height: 100vh;
max-width: 800px;
padding: 0 48px;
}
a {
color: var(--link-color);
}
input {
color: var(--main-text-color);
}
img {
border-radius: 0.75rem;
width: 100%;
height: auto;
object-fit: contain;
}
/* Select Boxes */
#main .select2-choice {
height: 35px;
}
#main .select2-chosen {
line-height: 35px;
}
#main .select2-arrow {
padding-top: 4px;
padding-right: 4px;
}
#main .filter-label {
color: var(--sub-header-color);
font-size: 12px;
font-weight: 600;
}
#main .location {
font-size: 12px;
font-weight: 600;
line-height: 18px;
color: var(--main-text-color);
}
/* Job Board Page */
#main > h1:not(.app-title) {
display: none;
}
#board_title {
margin: 0 0 16px 0;
font-size: 22px;
line-height: 36px;
font-weight: 400;
}
section {
margin-top: 16px;
}
section > h3 {
margin-top: 32px;
}
#logo {
display: inline-block;
}
body #content {
font-size: 14px;
font-weight: 400;
line-height: 20px;
}
#main section h3 {
font-size: 18px;
font-weight: 400;
line-height: 26px;
margin-bottom: 12px;
}
#main section .location {
display: block;
margin-top: -24px;
}
#main section .opening {
padding-top: 10px;
margin-bottom: 20px;
}
section .opening a {
font-size: 14px;
font-weight: 600;
line-height: 20px;
color: var(--main-text-color);
}
section .opening a {
display: block;
height: 44px;
width: 100%;
text-decoration: none;
margin-bottom: -20px;
padding-bottom: 0;
margin-left: -20px;
padding-left: 20px;
padding-top: 12px;
margin-top: -12px;
position: relative;
z-index: 1;
background-color: var(--light-background-color);
color: var(--main-text-color);
border-radius: 6px;
border: 1px solid var(--border-color);
}
section .opening a:hover {
background-color: var(--light-background-color);
color: var(--main-text-color);
border-radius: 6px;
border: 1px solid var(--brand-color);
box-shadow: var(--box-shadow);
-moz-box-shadow: var(--box-shadow);
-webkit-box-shadow: var(--box-shadow);
text-decoration: none;
}
body #footer {
border-top: 1px;
border-style: solid;
border-color: var(--border-color);
background-color: var(--footer-color);
height: 60px;
margin-top: -80px;
padding-top: 10px;
padding-bottom: 10px;
}
body #footer .privacy-policy {
line-height: 19px;
}
body #footer img {
width: 90px;
}
h3#filter-count {
margin-top: 30px;
margin-bottom: 0;
}
/* Job Post Page */
div#main div#app_body {
padding-left: 0 !important;
padding-right: 0;
}
div#app_body #header {
display: flex;
flex-direction: column;
}
div#app_body #header .company-name {
display: none;
}
div#app_body #header > a {
order: 1;
}
div#app_body #header .app-title {
order: 2;
}
div#app_body #header #apply_button {
order: 3;
margin-top: 37px;
}
div#app_body #header .location {
order: 4;
margin-top: 2px;
}
/* header mobile */
@media screen and (max-width: 510px) {
.accessible #header {
padding-right: 120px;
}
}
div#main #application_form h2.heading {
color: var(--main-text-color);
font-weight: 400;
}
div#app_body .app-title {
font-weight: 400;
font-size: 28px;
}
div#app_body div#header #apply_button {
top: auto;
background-color: var(--brand-color);
padding-top: 8px;
padding-bottom: 8px;
font-weight: 600;
}
div#submit_buttons input#submit_app {
background-color: var(--brand-color);
padding-top: 8px;
padding-bottom: 8px;
font-weight: 600;
text-shadow: none;
}
div#app_body {
max-width: none;
padding-right: 20px;
}
div#content {
padding-bottom: 16px;
}
div#application hr:nth-last-of-type(1) {
display: none;
}
div#application {
background-color: var(--background-color);
border-top: 1px solid var(--border-color);
padding-left: 0;
padding-right: 0;
max-width: none;
}
div#main_fields,
div#custom_fields {
font-weight: 400;
line-height: 26px;
}
div#application div.field label {
color: var(--input-text-color);
display: block;
float: none;
font-size: 12px;
font-weight: 400;
text-align: left;
}
div#application div.field label span.asterisk {
font-size: 12px;
}
div#application #main_fields div.field textarea {
background-color: var(--light-background-color);
border: solid 1px var(--border-color);
margin-left: 0;
}
div#application div.field input[type='text'] {
background-color: var(--light-background-color);
border: solid 1px var(--border-color);
height: 25px;
padding-left: 12px;
width: 455px;
}
@media (max-width: 640px) {
div#application div.field input[type='text'] {
width: 100%;
}
}
div#application div.field input[placeholder='MM'] {
background-color: var(--light-background-color);
border: solid 1px var(--border-color);
padding-left: 10px;
}
div#application div.field input[placeholder='YYYY'] {
background-color: var(--light-background-color);
border: solid 1px var(--border-color);
padding-left: 7px;
}
div#application legend {
float: none;
}
div.link-container a {
color: var(--link-color);
font-size: 14px;
}
div#application a#add_education {
margin-left: 0;
}
div#field {
margin-bottom: 10px;
}
#main_fields div.field div.field-error-msg {
padding-left: 0;
}
div.field div.msg-container {
padding-top: 5px;
}
#application .field .select2-container {
margin-top: 0;
}
div#application div.field a.locate-me {
display: block;
}
div#application div.field textarea {
border-color: var(--border-color);
background-color: var(--light-background-color);
color: var(--main-text-color);
width: 455px;
}
@media (max-width: 640px) {
div#application div.field textarea {
width: 100%;
}
}
div#application div.field div.select2-container {
width: 455px !important;
}
@media (max-width: 640px) {
div#application div.field div.select2-container {
width: 100% !important;
}
}
div.s3-upload-form {
display: none;
}
/* Confirmation Page */
#main #view-more {
text-align: left;
padding-top: 0;
}
#main strong > a {
color: var(--link-color);
font-weight: 400;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment