se intento agregar encender el vsorc desde la web
[VSoRC/.git] / 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: 150px;\r
169         margin-right: 0px;\r
170         padding-top: 10px;\r
171         width: 1130px;\r
172 }\r
173 \r
174 \r
175 /****************************************************************************/\r
176 /*                            Snack Bar                                     */\r
177 /****************************************************************************/\r
178 \r
179 /* The snackbar - position it at the bottom and in the middle of the screen */\r
180 #snackbar {\r
181     visibility: hidden;\r
182     min-width: 250px; \r
183     margin-left: -125px; /* min-width / 2 */\r
184     background-color: var(--pcolor-0);\r
185     color: white;\r
186     text-align: center;\r
187     border-radius: 5px;\r
188     padding: 16px;\r
189     position: fixed; /* Sit on top of the screen */\r
190     z-index: 1;\r
191     left: 50%; /* Center the snackbar */\r
192     bottom: 30px;\r
193 }\r
194 \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
197 #snackbar.show {\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
201 }\r
202 \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
207 }\r
208 \r
209 @keyframes fadein {\r
210     from {bottom: 0; opacity: 0;}\r
211     to {bottom: 30px; opacity: 1;}\r
212 }\r
213 \r
214 @-webkit-keyframes fadeout {\r
215     from {bottom: 30px; opacity: 1;}\r
216     to {bottom: 0; opacity: 0;}\r
217 }\r
218 \r
219 @keyframes fadeout {\r
220     from {bottom: 30px; opacity: 1;}\r
221     to {bottom: 0; opacity: 0;}\r
222 }\r