From 6e65724cb632ee91387f97b0bcea041407f5c664 Mon Sep 17 00:00:00 2001 From: lefteris Date: Sun, 19 Sep 2021 18:03:57 +0300 Subject: [PATCH] readme --- README.md | 2 +- src/assets/css/style.css | 210 ++++++++++++++++++++++++++++++++++++++- 2 files changed, 210 insertions(+), 2 deletions(-) diff --git a/README.md b/README.md index c7d62a8..95cecd6 100644 --- a/README.md +++ b/README.md @@ -1,4 +1,4 @@ -# VueProject +# Single-page web app with the use of Vue-Router and much more Basically this is a project that i made during my process of learning the Vuejs framework. You can login with whatever credentials and check the functionality. Some socket services may not work because the back-end server is not online anymore. Anyway, this is a front-end project. diff --git a/src/assets/css/style.css b/src/assets/css/style.css index b2ffb14..d01dbcf 100644 --- a/src/assets/css/style.css +++ b/src/assets/css/style.css @@ -1 +1,209 @@ -.index .alert{padding:20px;background-color:#c5aaa8;color:#000;margin-bottom:15px;height:200px;overflow:scroll;text-align:left}.index .row{margin-top:5px;margin-left:5px;margin-right:5px}.index h3{margin:15px 0 0}.index .index{margin-top:5px}.index #tabs{box-shadow:2px 5px 15px 0 rgba(0,0,0,0.287),0 5px 15px 0 rgba(255,255,255,0.541)}.index .tabs{background-image:linear-gradient(to right, rgba(251,251,251,0.9), rgba(96,153,143,0.74))}.highchart .hc{box-shadow:0 4px 8px 0 rgba(0,0,0,0.267),0 6px 20px 0 rgba(0,0,0,0.157)}@keyframes h1anim{0%{background-color:#e9dedeab}50%{background-color:#81807e}100%{background-color:#e9dedeab}}.stats{text-align:center;text-align:-moz-center;text-align:-webkit-center}.stats .row{margin-top:5px;margin-left:5px;margin-right:5px}.stats .overf{background-color:#c5aaa8;height:250px;max-width:800px;resize:both;overflow:auto}.stats .boottable{height:300px;max-width:800px;resize:horizontal;overflow:auto;background-image:linear-gradient(to right, #958d8dbb, #a5a2a2ad, #958d8d5d)}.stats .jumbotron{max-width:1100px}.footer{position:absolute;right:0;bottom:0;left:0;padding:1rem;background-color:#343a40 !important;color:white;text-align:left}.footer #image:hover{transform:scale(1.1);-webkit-transform:scale(1.1)}.footer #image{max-width:220px;border-radius:2rem}.side{text-align:left;margin:15px}.side .accInfo{text-align:left;margin:15px}.side .accSet{text-align:left;margin:15px}.side #title{text-align:center;background-color:#a83c1bce !important;font-size:1.5rem;color:#fff}.side #title2{text-align:center;background-color:#456483ca !important;font-size:1.2rem;color:#fff}.side .table{overflow:auto}.side #spinner{margin-left:15px}.side #email{border-radius:0}.side #pass{border-radius:0}.mynav .dropup,.mynav .dropright,.mynav .dropdown,.mynav .dropleft{position:relative;padding:0px 0px}.mynav .navbar-light .navbar-nav .show>.nav-link{color:#f0f5f5}.mynav .navbar{background-color:rgba(63,60,60,0.205)}.mynav .navbar #nav-collapse{color:azure}.mynav .navbar .navbar-nav{background-color:#3f3c3c}.mynav .navbar .navbar-nav .nav-link{color:#cac9c9}.mynav .navbar .navbar-nav .nav-link a:hover{color:#fff;transform:scale(1.1)}.mynav .navbar .navbar-nav .nav-link:focus{color:azure}.mynav .navbar .navbar-nav .nav-drop .dropdown-menu{padding:10px, 2px;background-color:#b6b6b6}.mynav .navbar .navbar-nav .nav-drop .dropdown-menu a{color:#000;background-color:#b6b6b6}.mynav .navbar .navbar-nav .nav-drop .dropdown-menu a:hover{color:#fff}.mynav .navbar .navbar-nav .nav-drop:focus{color:azure}.mynav .navbar-brand:hover{transform:scale(1.2);-webkit-transform:scale(1.2)}.mynav #image{max-height:60px;border-radius:2rem}.testNav{position:fixed;top:0;right:0;left:0}.testNav ul{list-style-type:none;margin:0;padding:0;overflow:hidden;background-color:#333}.testNav ul li{float:left;display:inline}.testNav ul li a{display:block;color:white;text-align:center;padding:23px 23px;text-decoration:none}.testNav ul li a:hover{background-color:#111}.testNav ul li a.active{background-color:#4caf50;color:white} +.index .alert { + padding: 20px; + background-color: #c5aaa8; + color: #000; + margin-bottom: 15px; + height: 200px; + overflow: scroll; + text-align: left; +} +.index .row { + margin-top: 5px; + margin-left: 5px; + margin-right: 5px; +} +.index h3 { + margin: 15px 0 0; +} +.index .index { + margin-top: 5px; +} +.index #tabs { + box-shadow: 2px 5px 15px 0 rgba(0, 0, 0, 0.287), + 0 5px 15px 0 rgba(255, 255, 255, 0.541); +} +.index .tabs { + background-image: linear-gradient( + to right, + rgba(251, 251, 251, 0.9), + rgba(96, 153, 143, 0.74) + ); +} +.highchart .hc { + box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.267), + 0 6px 20px 0 rgba(0, 0, 0, 0.157); +} +@keyframes h1anim { + 0% { + background-color: #e9dedeab; + } + 50% { + background-color: #81807e; + } + 100% { + background-color: #e9dedeab; + } +} +.stats { + text-align: center; + text-align: -moz-center; + text-align: -webkit-center; +} +.stats .row { + margin-top: 5px; + margin-left: 5px; + margin-right: 5px; +} +.stats .overf { + background-color: #c5aaa8; + height: 250px; + max-width: 800px; + resize: both; + overflow: auto; +} +.stats .boottable { + height: 300px; + max-width: 800px; + resize: horizontal; + overflow: auto; + background-image: linear-gradient(to right, #958d8dbb, #a5a2a2ad, #958d8d5d); +} +.stats .jumbotron { + max-width: 1100px; +} +.footer { + position: absolute; + right: 0; + bottom: 0; + left: 0; + padding: 1rem; + background-color: #343a40 !important; + color: white; + text-align: left; +} +.footer #image:hover { + transform: scale(1.1); + -webkit-transform: scale(1.1); +} +.footer #image { + max-width: 220px; + border-radius: 2rem; +} +.side { + text-align: left; + margin: 15px; +} +.side .accInfo { + text-align: left; + margin: 15px; +} +.side .accSet { + text-align: left; + margin: 15px; +} +.side #title { + text-align: center; + background-color: #a83c1bce !important; + font-size: 1.5rem; + color: #fff; +} +.side #title2 { + text-align: center; + background-color: #456483ca !important; + font-size: 1.2rem; + color: #fff; +} +.side .table { + overflow: auto; +} +.side #spinner { + margin-left: 15px; +} +.side #email { + border-radius: 0; +} +.side #pass { + border-radius: 0; +} +.mynav .dropup, +.mynav .dropright, +.mynav .dropdown, +.mynav .dropleft { + position: relative; + padding: 0px 0px; +} +.mynav .navbar-light .navbar-nav .show > .nav-link { + color: #f0f5f5; +} +.mynav .navbar { + background-color: rgba(63, 60, 60, 0.205); +} +.mynav .navbar #nav-collapse { + color: azure; +} +.mynav .navbar .navbar-nav { + background-color: #3f3c3c; +} +.mynav .navbar .navbar-nav .nav-link { + color: #cac9c9; +} +.mynav .navbar .navbar-nav .nav-link a:hover { + color: #fff; + transform: scale(1.1); +} +.mynav .navbar .navbar-nav .nav-link:focus { + color: azure; +} +.mynav .navbar .navbar-nav .nav-drop .dropdown-menu { + padding: 10px, 2px; + background-color: #b6b6b6; +} +.mynav .navbar .navbar-nav .nav-drop .dropdown-menu a { + color: #000; + background-color: #b6b6b6; +} +.mynav .navbar .navbar-nav .nav-drop .dropdown-menu a:hover { + color: #fff; +} +.mynav .navbar .navbar-nav .nav-drop:focus { + color: azure; +} +.mynav .navbar-brand:hover { + transform: scale(1.2); + -webkit-transform: scale(1.2); +} +.mynav #image { + max-height: 60px; + border-radius: 2rem; +} +.testNav { + position: fixed; + top: 0; + right: 0; + left: 0; +} +.testNav ul { + list-style-type: none; + margin: 0; + padding: 0; + overflow: hidden; + background-color: #333; +} +.testNav ul li { + float: left; + display: inline; +} +.testNav ul li a { + display: block; + color: white; + text-align: center; + padding: 23px 23px; + text-decoration: none; +} +.testNav ul li a:hover { + background-color: #111; +} +.testNav ul li a.active { + background-color: #4caf50; + color: white; +}