Browse Source

readme

master
lefteris 3 years ago
parent
commit
6e65724cb6
  1. 2
      README.md
  2. 210
      src/assets/css/style.css

2
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.

210
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;
}

Loading…
Cancel
Save