all repos — ArtBoundPanel @ 9d2568092d58d9e40e1353fc7ab3328a2cf3aa94

An administration panel for the "ArtBound" competition, that works entirely via client-side Javascript and HTML5.

style.css (view raw)

  1:root {
  2    --jumbotron-padding-y: 3rem;
  3    /* Using Open Color 1.9.1: https://yeun.github.io/open-color/ */
  4    --background0: #212529; /* GRAY 9 */
  5    --background1: #343a40; /* GRAY 8 */
  6    --accent: #1864ab; /* BLUE 9 */
  7    --title: #339af0; /* BLUE 5 */
  8    --text: #f8f9fa; /* GRAY 0 */
  9  }
 10  
 11  .jumbotron {
 12    padding-top: var(--jumbotron-padding-y);
 13    padding-bottom: var(--jumbotron-padding-y);
 14    margin-bottom: 0;
 15    background-color: var(--background1);
 16  }
 17  @media (min-width: 768px) {
 18    .jumbotron {
 19      padding-top: calc(var(--jumbotron-padding-y) * 2);
 20      padding-bottom: calc(var(--jumbotron-padding-y) * 2);
 21    }
 22  }
 23  
 24  .jumbotron p:last-child {
 25    margin-bottom: 0;
 26  }
 27  
 28  .jumbotron-heading {
 29    font-weight: 300;
 30    color: var(--title);
 31  }
 32  
 33  .jumbotron .container {
 34    max-width: 40rem;
 35  }
 36  
 37  footer {
 38    padding-top: 3rem;
 39    padding-bottom: 3rem;
 40  }
 41  
 42  footer p {
 43    margin-bottom: .25rem;
 44  }
 45  
 46  .box-shadow { box-shadow: 0 .25rem .75rem rgba(0, 0, 0, .05); }
 47
 48  .entry-disabled {
 49    opacity: 0.25
 50  }
 51  
 52#main_container, .jumbotron {
 53	padding: 20px!important;
 54}
 55
 56.card-controls {
 57  flex-direction: row-reverse;
 58}
 59
 60.card-text {
 61  text-decoration: underline !important;
 62}
 63
 64body {
 65  background-color: var(--background0);
 66  color: var(--text);
 67  color-scheme: dark;
 68}
 69
 70.lead {
 71  color: var(--text);
 72}
 73
 74.btn-go {
 75  color: var(--text);
 76  background-color: var(--accent);
 77  border-color: var(--accent);
 78}
 79
 80a {
 81  color: var(--text);
 82  cursor: pointer;
 83}
 84a:hover {
 85  color: var(--text);
 86}
 87
 88.my-card{
 89  background-color: var(--background1);
 90}
 91
 92#opacity_range {
 93  accent-color: var(--accent);
 94}
 95
 96#month_input {
 97  background-color: var(--background0);
 98  color: var(--text);
 99  color-scheme: dark;
100}