2 Copyright (c) Maen Artimy, 2018
\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
10 - The footer (missing from most files)
\r
13 /* General Styles */
\r
14 @import "colors.css";
\r
17 font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
\r
19 color: var(--pcolor-3);
\r
23 outline: 1px dashed gray;
\r
28 font-family: 'Courier New', monospace;
\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
41 color: var(--white);
\r
43 display: inline-block;
\r
50 margin: 18px 24px 0 0;
\r
52 /*min-width: 90px;*/
\r
53 background-color: var(--tcolor-2);
\r
55 color: var(--white);
\r
61 #header .refresh:hover {
\r
62 background-color: var(--tcolor-0);
\r
67 margin: 18px 24px 0 0;
\r
69 background-color: var(--tcolor-2);
\r
71 color: var(--white);
\r
76 #header .reficon:hover {
\r
77 background-color: var(--tcolor-0);
\r
88 .frontleft,.frontright {
\r
94 /* border: solid black 2px;
\r
95 border-radius: 5px;*/
\r
100 background-color: var(--scolor-2);
\r
101 border-radius: 10px;
\r
106 font-style: normal;
\r
111 color: var(--white);
\r
112 font-style: italic;
\r
113 text-align: justify;
\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
127 position: absolute;
\r
134 font-style: normal;
\r
142 background-color: var(--pcolor-0);
\r
144 text-align: center;
\r
149 /******* Grid managment **************/
\r
153 margin-right: auto;
\r
156 /*overflow: auto;*/
\r
162 margin-right: 10px;
\r
167 .grid_14 { /*main*/
\r
168 margin-left: 150px;
\r
175 /****************************************************************************/
\r
177 /****************************************************************************/
\r
179 /* The snackbar - position it at the bottom and in the middle of the screen */
\r
181 visibility: hidden;
\r
183 margin-left: -125px; /* min-width / 2 */
\r
184 background-color: var(--pcolor-0);
\r
186 text-align: center;
\r
187 border-radius: 5px;
\r
189 position: fixed; /* Sit on top of the screen */
\r
191 left: 50%; /* Center the snackbar */
\r
195 /* Add animation: Take 0.5 seconds to fade in and out the snackbar.
\r
196 However, delay the fade out process for 2.5 seconds */
\r
198 visibility: visible; /* Show the snackbar */
\r
199 -webkit-animation: fadein 0.5s, fadeout 0.5s 2.5s;
\r
200 animation: fadein 0.5s, fadeout 0.5s 2.5s;
\r
203 /* Animations to fade the snackbar in and out */
\r
204 @-webkit-keyframes fadein {
\r
205 from {bottom: 0; opacity: 0;}
\r
206 to {bottom: 30px; opacity: 1;}
\r
209 @keyframes fadein {
\r
210 from {bottom: 0; opacity: 0;}
\r
211 to {bottom: 30px; opacity: 1;}
\r
214 @-webkit-keyframes fadeout {
\r
215 from {bottom: 30px; opacity: 1;}
\r
216 to {bottom: 0; opacity: 0;}
\r
219 @keyframes fadeout {
\r
220 from {bottom: 30px; opacity: 1;}
\r
221 to {bottom: 0; opacity: 0;}
\r