Pila de basura, seguro tiene problemas

[VSoRC/.git] / styles / style.css

diff --git a/styles/style.css b/styles/style.css
new file mode 100644 (file)
index 0000000..5763334
--- /dev/null
+++ b/styles/style.css
@@ -0,0 +1,222 @@
+/*\r
+    Copyright (c) Maen Artimy, 2018\r
+*/\r
+\r
+/*\r
+    The window is divided into 3 (4) sections:\r
+        - The header has the logo, the view name, and (sometimes) a refresh control.\r
+        - The menu\r
+        - The main view\r
+        - The footer (missing from most files)\r
+*/\r
+\r
+/* General Styles */\r
+@import "colors.css";\r
+\r
+* {\r
+       font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;\r
+       font-size: 14px;\r
+       color: var(--pcolor-3);\r
+}\r
+\r
+/*:focus {\r
+       outline: 1px dashed gray;\r
+       background: yellow;\r
+}*/\r
+\r
+.license {\r
+       font-family: 'Courier New', monospace;  \r
+}\r
+\r
+#header {\r
+       background: transparent url("../img/switch.svg") no-repeat;\r
+       background-size: 40px 40px;\r
+       background-position: 10px 10px;\r
+       background-color: var(--pcolor-0);\r
+       height: 60px;\r
+       border-radius: 5px;\r
+}\r
+\r
+#header h1 {\r
+       color: var(--white);\r
+       font-size: 24px;\r
+       display: inline-block;\r
+       margin: 0 50px;\r
+       padding: 18px 20px;\r
+}\r
+\r
+#header .refresh {\r
+       float: right;\r
+       margin: 18px 24px 0 0;\r
+       padding: 5px 15px;\r
+       /*min-width: 90px;*/\r
+       background-color: var(--tcolor-2);\r
+       border: none;\r
+       color: var(--white);\r
+       cursor: pointer;\r
+       border-radius: 4px;\r
+       font-weight: bold;\r
+}\r
+\r
+#header .refresh:hover {\r
+       background-color: var(--tcolor-0);\r
+}\r
+\r
+#header .reficon {\r
+       float: right;\r
+       margin: 18px 24px 0 0;\r
+       padding: 5px 5px;\r
+       background-color: var(--tcolor-2);\r
+       border: none;\r
+       color: var(--white);\r
+       cursor: pointer;\r
+       border-radius: 4px;\r
+}\r
+\r
+#header .reficon:hover {\r
+       background-color: var(--tcolor-0);\r
+}\r
+\r
+#header i {\r
+       color: white;\r
+}\r
+\r
+#header i:hover {\r
+       cursor: pointer;\r
+}\r
+\r
+.frontleft,.frontright {\r
+       display: block;\r
+       float: left;\r
+\r
+       margin-left: 10px;\r
+       padding: 20px;\r
+/*     border: solid black 2px;\r
+       border-radius: 5px;*/\r
+\r
+}\r
+\r
+.frontleft {\r
+       background-color: var(--scolor-2);\r
+       border-radius: 10px;\r
+}\r
+\r
+.frontleft h2 {\r
+       font-size: 20px;\r
+       font-style: normal;\r
+}\r
+\r
+.frontleft * {\r
+       font-size: 18px;\r
+       color: var(--white);\r
+       font-style: italic;\r
+       text-align: justify;\r
+}\r
+\r
+\r
+.frontright {\r
+       background: transparent url("../img/logo.svg") no-repeat;\r
+       background-size: 300px 300px;\r
+       background-position: left top;\r
+       position: relative;\r
+       border: solid 2px var(--pcolor-0);\r
+       border-radius: 10px;\r
+}\r
+\r
+.frontright div {\r
+       position: absolute;\r
+       bottom: 0;\r
+       left: 0;\r
+}\r
+\r
+.frontright p {\r
+       font-size: 20px;\r
+       font-style: normal;\r
+}\r
+\r
+#footer {\r
+    position: fixed;\r
+    left: 0;\r
+    bottom: 0;\r
+       height: 30px;\r
+       background-color: var(--pcolor-0);\r
+    color: white;\r
+       text-align: center;\r
+       width: 100%;\r
+\r
+}\r
+\r
+/******* Grid managment **************/\r
+.container_16 {\r
+\r
+       margin-left: auto;\r
+       margin-right: auto;\r
+       width: 1280px;\r
+\r
+       /*overflow: auto;*/\r
+  }\r
+\r
+.grid_2 { /*menu*/\r
+       float: left;\r
+       margin-left: 0px;\r
+       margin-right: 10px;\r
+       padding-top: 10px;\r
+       width: 140px;\r
+}\r
+\r
+.grid_14 { /*main*/\r
+       margin-left: 150px;\r
+       margin-right: 0px;\r
+       padding-top: 10px;\r
+       width: 1130px;\r
+}\r
+\r
+\r
+/****************************************************************************/\r
+/*                            Snack Bar                                     */\r
+/****************************************************************************/\r
+\r
+/* The snackbar - position it at the bottom and in the middle of the screen */\r
+#snackbar {\r
+    visibility: hidden;\r
+    min-width: 250px; \r
+    margin-left: -125px; /* min-width / 2 */\r
+    background-color: var(--pcolor-0);\r
+    color: white;\r
+    text-align: center;\r
+    border-radius: 5px;\r
+    padding: 16px;\r
+    position: fixed; /* Sit on top of the screen */\r
+    z-index: 1;\r
+    left: 50%; /* Center the snackbar */\r
+    bottom: 30px;\r
+}\r
+\r
+/* Add animation: Take 0.5 seconds to fade in and out the snackbar.\r
+   However, delay the fade out process for 2.5 seconds */\r
+#snackbar.show {\r
+    visibility: visible; /* Show the snackbar */\r
+    -webkit-animation: fadein 0.5s, fadeout 0.5s 2.5s;\r
+    animation: fadein 0.5s, fadeout 0.5s 2.5s;\r
+}\r
+\r
+/* Animations to fade the snackbar in and out */\r
+@-webkit-keyframes fadein {\r
+    from {bottom: 0; opacity: 0;}\r
+    to {bottom: 30px; opacity: 1;}\r
+}\r
+\r
+@keyframes fadein {\r
+    from {bottom: 0; opacity: 0;}\r
+    to {bottom: 30px; opacity: 1;}\r
+}\r
+\r
+@-webkit-keyframes fadeout {\r
+    from {bottom: 30px; opacity: 1;}\r
+    to {bottom: 0; opacity: 0;}\r
+}\r
+\r
+@keyframes fadeout {\r
+    from {bottom: 30px; opacity: 1;}\r
+    to {bottom: 0; opacity: 0;}\r
+}\r