styles/style.css

   1 /*\r
   2     Copyright (c) Maen Artimy, 2018\r
   3 */\r
   4 \r
   5 /*\r
   6     The window is divided into 3 (4) sections:\r
   7         - The header has the logo, the view name, and (sometimes) a refresh control.\r
   8         - The menu\r
   9         - The main view\r
  10         - The footer (missing from most files)\r
  11 */\r
  12 \r
  13 /* General Styles */\r
  14 @import "colors.css";\r
  15 \r
  16 * {\r
  17         font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;\r
  18         font-size: 14px;\r
  19         color: var(--pcolor-3);\r
  20 }\r
  21 \r
  22 /*:focus {\r
  23         outline: 1px dashed gray;\r
  24         background: yellow;\r
  25 }*/\r
  26 \r
  27 .license {\r
  28         font-family: 'Courier New', monospace;  \r
  29 }\r
  30 \r
  31 #header {\r
  32         background: transparent url("../img/switch.svg") no-repeat;\r
  33         background-size: 40px 40px;\r
  34         background-position: 10px 10px;\r
  35         background-color: var(--pcolor-0);\r
  36         height: 60px;\r
  37         border-radius: 5px;\r
  38 }\r
  39 \r
  40 #header h1 {\r
  41         color: var(--white);\r
  42         font-size: 24px;\r
  43         display: inline-block;\r
  44         margin: 0 50px;\r
  45         padding: 18px 20px;\r
  46 }\r
  47 \r
  48 #header .refresh {\r
  49         float: right;\r
  50         margin: 18px 24px 0 0;\r
  51         padding: 5px 15px;\r
  52         /*min-width: 90px;*/\r
  53         background-color: var(--tcolor-2);\r
  54         border: none;\r
  55         color: var(--white);\r
  56         cursor: pointer;\r
  57         border-radius: 4px;\r
  58         font-weight: bold;\r
  59 }\r
  60 \r
  61 #header .refresh:hover {\r
  62         background-color: var(--tcolor-0);\r
  63 }\r
  64 \r
  65 #header .reficon {\r
  66         float: right;\r
  67         margin: 18px 24px 0 0;\r
  68         padding: 5px 5px;\r
  69         background-color: var(--tcolor-2);\r
  70         border: none;\r
  71         color: var(--white);\r
  72         cursor: pointer;\r
  73         border-radius: 4px;\r
  74 }\r
  75 \r
  76 #header .reficon:hover {\r
  77         background-color: var(--tcolor-0);\r
  78 }\r
  79 \r
  80 #header i {\r
  81         color: white;\r
  82 }\r
  83 \r
  84 #header i:hover {\r
  85         cursor: pointer;\r
  86 }\r
  87 \r
  88 .frontleft,.frontright {\r
  89         display: block;\r
  90         float: left;\r
  91 \r
  92         margin-left: 10px;\r
  93         padding: 20px;\r
  94 /*      border: solid black 2px;\r
  95         border-radius: 5px;*/\r
  96 \r
  97 }\r
  98 \r
  99 .frontleft {\r
 100         background-color: var(--scolor-2);\r
 101         border-radius: 10px;\r
 102 }\r
 103 \r
 104 .frontleft h2 {\r
 105         font-size: 20px;\r
 106         font-style: normal;\r
 107 }\r
 108 \r
 109 .frontleft * {\r
 110         font-size: 18px;\r
 111         color: var(--white);\r
 112         font-style: italic;\r
 113         text-align: justify;\r
 114 }\r
 115 \r
 116 \r
 117 .frontright {\r
 118         background: transparent url("../img/logo.svg") no-repeat;\r
 119         background-size: 300px 300px;\r
 120         background-position: left top;\r
 121         position: relative;\r
 122         border: solid 2px var(--pcolor-0);\r
 123         border-radius: 10px;\r
 124 }\r
 125 \r
 126 .frontright div {\r
 127         position: absolute;\r
 128         bottom: 0;\r
 129         left: 0;\r
 130 }\r
 131 \r
 132 .frontright p {\r
 133         font-size: 20px;\r
 134         font-style: normal;\r
 135 }\r
 136 \r
 137 #footer {\r
 138     position: fixed;\r
 139     left: 0;\r
 140     bottom: 0;\r
 141         height: 30px;\r
 142         background-color: var(--pcolor-0);\r
 143     color: white;\r
 144         text-align: center;\r
 145         width: 100%;\r
 146 \r
 147 }\r
 148 \r
 149 /******* Grid managment **************/\r
 150 .container_16 {\r
 151 \r
 152         margin-left: auto;\r
 153         margin-right: auto;\r
 154         width: 1280px;\r
 155 \r
 156         /*overflow: auto;*/\r
 157   }\r
 158 \r
 159 .grid_2 { /*menu*/\r
 160         float: left;\r
 161         margin-left: 0px;\r
 162         margin-right: 10px;\r
 163         padding-top: 10px;\r
 164         width: 140px;\r
 165 }\r
 166 \r
 167 .grid_14 { /*main*/\r
 168         margin-left: 0px;\r
 169         margin-right: 0px;\r
 170         padding-top: 10px;\r
 171         width: 1130px;\r
 172         padding-left: 0px;\r
 173 }\r
 174 \r
 175 \r
 176 /****************************************************************************/\r
 177 /*                            Snack Bar                                     */\r
 178 /****************************************************************************/\r
 179 \r
 180 /* The snackbar - position it at the bottom and in the middle of the screen */\r
 181 #snackbar {\r
 182     visibility: hidden;\r
 183     min-width: 250px; \r
 184     margin-left: -125px; /* min-width / 2 */\r
 185     background-color: var(--pcolor-0);\r
 186     color: white;\r
 187     text-align: center;\r
 188     border-radius: 5px;\r
 189     padding: 16px;\r
 190     position: fixed; /* Sit on top of the screen */\r
 191     z-index: 1;\r
 192     left: 50%; /* Center the snackbar */\r
 193     bottom: 30px;\r
 194 }\r
 195 \r
 196 /* Add animation: Take 0.5 seconds to fade in and out the snackbar.\r
 197    However, delay the fade out process for 2.5 seconds */\r
 198 #snackbar.show {\r
 199     visibility: visible; /* Show the snackbar */\r
 200     -webkit-animation: fadein 0.5s, fadeout 0.5s 2.5s;\r
 201     animation: fadein 0.5s, fadeout 0.5s 2.5s;\r
 202 }\r
 203 \r
 204 /* Animations to fade the snackbar in and out */\r
 205 @-webkit-keyframes fadein {\r
 206     from {bottom: 0; opacity: 0;}\r
 207     to {bottom: 30px; opacity: 1;}\r
 208 }\r
 209 \r
 210 @keyframes fadein {\r
 211     from {bottom: 0; opacity: 0;}\r
 212     to {bottom: 30px; opacity: 1;}\r
 213 }\r
 214 \r
 215 @-webkit-keyframes fadeout {\r
 216     from {bottom: 30px; opacity: 1;}\r
 217     to {bottom: 0; opacity: 0;}\r
 218 }\r
 219 \r
 220 @keyframes fadeout {\r
 221     from {bottom: 30px; opacity: 1;}\r
 222     to {bottom: 0; opacity: 0;}\r
 223 }\r