gpm/templates/brutalist.css

/* antidesign CSS
author: Yann Esposito
copyright: 2018 © Yann Esposito
*/
html, body, input, button, pre, textarea {
    font-size: 15px;
    font-family: Menlo, Inconsolata, monospace;
    text-rendering: optimizeLegibility;
    background: white;
}
body {
    color: #444;
    background: white;
    max-width: 50em;
    margin: auto;
    border-left: solid 1em;
    padding: 1em;
    margin: 0 auto;
    line-height: 1.5em; }

/* minimal modern colors */
a { color: #002ea2; font-weight: 700; text-decoration: none; }
a:hover { border-bottom: solid; }
a:visited { color: SlateBlue; }

ul { padding-left: 1em;
     list-style-type: none; }

ul ul { border-left: 2px solid #CCC; }
ul ul { margin-left: 1.5ex; }

code { background: #EEE;
       padding: 2px; }

blockquote {
    border-left: solid 1em LightGray;
    margin-left: 0px;
    padding-left: 1em; }
pre { font-size: .8em;
      padding: 5px;
      overflow: scroll;
      margin: 0;
    }
pre::after,pre::before { content: "~~~~~~";
                         display: block;
                         font-size: 1.25em;
                         opacity: 0.3; }

/* forms, inputs, buttons */
/* buttons */
input,textarea,button { font-size: 0.8em; }
input:focus,textarea:focus { outline: none;
                             color: #002ea2;
                             background-color: #eaf4ff;
                             border-color: DodgerBlue; }
input,textarea { padding: 4px;
                 border: none;
                 background: #FAFAFA;
                 border: solid 1px LightGray;
                 vertical-align: top;
                 min-width: 65%; }
textarea { min-height: 13em; }
*:focus { outline: solid 2px DodgerBlue; }

// div.form { display: grid;
//            grid-template-columns: max-content auto;
//            gird-gap: 5px;
//          }

.block { display: inline-block; }

label {
    display: inline-block;
    min-width: 8em;
    line-height: 2em;
    margin-right: 1ex;
}

/* colors */
button.red { color: black; }
button.red:hover { color: #C5283D; }
button.red:hover::before { color: #C5283D;}
button.red:hover::after { color: #C5283D; }

button.orange { color: black; }
button.orange:hover { color: #EE6600; }
button.orange:hover::before { color: #EE6600; }
button.orange:hover::after { color: #EE6600; }

button.yellow { color: black; }
button.yellow:hover { color: #AA6600; }
button.yellow:hover::before { color: #AA6600; }
button.yellow:hover::after { color: #AA6600; }

button.green { color: black; }
button.green:hover { color: green; }
button.green:hover::before { color: green; }
button.green:hover::after { color: green; }

button.cyan { color: black; }
button.cyan:hover { color: DodgerBlue; }
button.cyan:hover::before { color: DodgerBlue; }
button.cyan:hover::after { color: DodgerBlue; }

button.blue { color: black; }
button.blue:hover { color: #002ea2; }
button.blue:hover::before { color: #002ea2; }
button.blue:hover::after { color: #002ea2; }

button.violet { color: black; }
button.violet:hover { color: #CC00FF; }
button.violet:hover::before { color: #CC00FF; }
button.violet:hover::after { color: #CC00FF; }

button.magenta { color: black; }
button.magenta:hover { color: #CC0066; }
button.magenta:hover::before { color: #CC0066; }
button.magenta:hover::after { color: #CC0066; }

button { font-weight: bold;
         padding: .1em .1em;
         background: white;
         border: none;
         margin-right: 6px;
         margin-bottom: 6px;
       }
button::before { content: "["; opacity: 0.3; }
button::after { content: "]"; opacity: 0.3; }
button:hover { cursor: pointer; text-decoration: underline; }

button:active { color: #C5283D; border-color: #C5283D;  }
button:disabled { color: Gray; }
button:disabled:hover { color: Gray; text-decoration: none; }
button:disabled:hover::before { color: Gray; }
button:disabled:hover::after { color: Gray; }

/* == tables === */

table { max-width: 100%;
        overflow: scroll; }
th { border-bottom: solid 2px;
     padding: 0 1em; }
td { border-bottom: dotted 1px LightGray;
     overflow: scroll;
     padding: 0 1em; }

/* == Alerts == */
.alerts { position: fixed;
          top: 20px;
          z-index: 100000;
          }
.alert { padding: 0.2em 1em;
         border: solid 2px black;
         margin: 2px;
         position: relative;
       }
.alert:hover { cursor: pointer; }
.alert::after { content: " ×";
                opacity: 0.5;
                display: inline-block;
                top: -5px;
                right: 2px;
                position: absolute; }
.alert:hover::after { content: " ×"; opacity: 1; }
.alert.error { background-color: #C5283D; color: white; }
.alert.warn { background-color: #AA6600; color: white; }
.alert.info { background-color: #002ea2; color: white; }

.small { font-size: .8em; }
.discrete { opacity: 0.5; }
.calm > * { opacity: 0.5; }
.calm > *:hover { opacity: 1; }

.overlay { position: fixed;
           display: flex;
           justify-content: center;
           width: 100%;
           height: 100%;
           top: 0;
           left: 0;
           right: 0;
           bottom: 0;
           background-color: rgba(0,0,0,0.5);
           z-index: 2;
           cursor: pointer;
           }
.popin, .box {
    border-top: solid 2px #000;
    border-left: solid 2px #000;
    border-bottom: solid 4px #000;
    border-right: solid 4px #000;
    box-shadow: 8px 8px #000;
    background: white;
    padding: 2em;
    margin: 0 0 8px 0;
    cursor: auto;
}
.close { position: relative;
         top: -4em;
         right: -4em;
         text-align: center;
         cursor: pointer; /* Add a pointer on hover */
       }

/* Specific */
.c20 { display: inline-block; min-width: 8em; }
.c45 { display: inline-block; min-width: 13.5em; }

.login { padding-left: 1em; border-left: 5px solid #CCC; line-height: 1.25em; }