diff options
Diffstat (limited to '')
| -rw-r--r-- | frontend/install/css/style.css | 479 |
1 files changed, 479 insertions, 0 deletions
diff --git a/frontend/install/css/style.css b/frontend/install/css/style.css new file mode 100644 index 0000000..e7cd886 --- /dev/null +++ b/frontend/install/css/style.css @@ -0,0 +1,479 @@ +/*
+ Created on : 6.5.2020
+ Author : Peter Hrvatin
+*/
+/* BARVE */
+/* FONTI */
+@import url("https://fonts.googleapis.com/css?family=Montserrat:300,400,400i,600,700&subset=latin-ext");
+.thin {
+ font-weight: 300;
+}
+
+.semibold {
+ font-weight: 600;
+}
+
+.bold {
+ font-weight: 700;
+}
+
+.italic {
+ font-style: italic;
+}
+
+.underline {
+ text-decoration: underline;
+}
+
+/* OSNOVNA STRUKTURA STRANI */
+body {
+ margin: 0;
+ padding: 0;
+ font-family: "Montserrat", sans-serif;
+ color: #535050;
+}
+body #content {
+ display: flex;
+ flex-direction: column;
+ justify-content: space-between;
+}
+
+h1 {
+ margin: 20px 0 30px 0;
+ font-weight: 600;
+ font-size: 32px;
+}
+
+h2 {
+ margin: 20px 0 30px 0;
+ font-weight: 600;
+ font-size: 26px;
+}
+
+p {
+ font-size: 16px;
+ line-height: 160%;
+}
+
+a {
+ color: #1e88e5;
+ text-decoration: none;
+}
+a:hover {
+ color: #4ca0ea;
+}
+
+.red {
+ color: red;
+}
+
+.spaceLeft {
+ margin-left: 20px;
+}
+
+input[type=submit],
+button,
+input[type=button],
+.button {
+ cursor: pointer;
+ width: 180px;
+ padding: 16px;
+ margin-right: 20px;
+ font-size: 16px;
+ line-height: 17px;
+ text-align: center;
+ text-transform: uppercase;
+ color: white;
+ background-color: #1e88e5;
+ border: 0;
+ outline: 0;
+ transition: 0.2s;
+}
+input[type=submit]:hover,
+button:hover,
+input[type=button]:hover,
+.button:hover {
+ background-color: #4ca0ea;
+}
+
+input[type=text],
+input[type=password],
+input[type=email] {
+ box-sizing: border-box;
+ padding: 7px 10px;
+ font-size: 17px;
+ color: #333;
+ background-color: white;
+ border: 1px solid #cccccc;
+}
+input[type=text].red,
+input[type=password].red,
+input[type=email].red {
+ border-color: red;
+}
+
+textarea {
+ box-sizing: border-box;
+ padding: 8px 12px;
+ font-size: 15px;
+ color: #333;
+ background-color: white;
+ border: 1px solid #cccccc;
+}
+
+label,
+input[type=radio],
+input[type=checkbox] {
+ cursor: pointer;
+}
+
+header {
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ height: 80px;
+ box-sizing: border-box;
+ padding: 0 20px;
+}
+header .logo {
+ height: 60px;
+}
+header .logo a img {
+ max-width: 300px;
+ max-height: 60px;
+ height: 60px;
+}
+header nav {
+ display: flex;
+ align-self: flex-end;
+ font-size: 17px;
+ text-transform: uppercase;
+ font-weight: 600;
+}
+header nav span.menu_item {
+ margin-left: 40px;
+ border-bottom: 3px transparent solid;
+}
+header nav span.menu_item a {
+ color: #333;
+ text-decoration: none;
+ line-height: 30px;
+ transition: 0.2s;
+}
+header nav span.menu_item a:hover {
+ color: #1e88e5;
+}
+header nav span.menu_item.active {
+ border-bottom: 3px #1e88e5 solid;
+}
+
+#main {
+ background-color: #f7f7f7;
+}
+#main .main_content {
+ max-width: 1400px;
+ margin: 0 auto;
+ padding: 30px 20px 60px 20px;
+}
+#main .main_content .bottom_buttons {
+ margin-top: 50px;
+}
+#main #fade {
+ display: none;
+ position: fixed;
+ z-index: 990;
+ top: 0;
+ left: 0;
+ width: 100%;
+ height: 100%;
+ background-color: #333;
+ opacity: 0.7;
+}
+#main #popup {
+ display: none;
+ position: fixed;
+ z-index: 999;
+ top: 40%;
+ left: calc(50% - 175px);
+ width: 350px;
+ padding: 20px;
+ text-align: center;
+ font-size: 18px;
+ font-weight: 500;
+ line-height: 30px;
+ background-color: #fff;
+}
+
+footer .footer_content {
+ display: flex;
+ justify-content: space-between;
+ max-width: 1400px;
+ margin: 0 auto;
+ padding: 70px 20px;
+}
+footer .footer_content .col {
+ display: flex;
+ flex-direction: column;
+ box-sizing: border-box;
+ width: 33%;
+}
+footer .footer_content .col span, footer .footer_content .col div.follow {
+ padding: 8px 0;
+ color: #333;
+ font-weight: 300;
+}
+footer .footer_content .col span.follow, footer .footer_content .col div.follow.follow {
+ display: flex;
+ align-items: center;
+}
+footer .footer_content .col span a, footer .footer_content .col div.follow a {
+ color: #333;
+}
+footer .footer_content .col span a:hover, footer .footer_content .col div.follow a:hover {
+ color: #1e88e5;
+}
+footer .footer_content .col span a:hover .icon.twitter, footer .footer_content .col div.follow a:hover .icon.twitter {
+ background-image: url("../../../public/img/social/twitter_blue.svg");
+}
+footer .footer_content .col span a:hover .icon.fb, footer .footer_content .col div.follow a:hover .icon.fb {
+ background-image: url("../../../public/img/social/fb_blue.svg");
+}
+footer .footer_content .col span a .icon, footer .footer_content .col div.follow a .icon {
+ display: inline-block;
+ width: 24px;
+ height: 24px;
+ padding: 0;
+ margin-left: 10px;
+ background-size: 24px 24px;
+}
+footer .footer_content .col span a .icon.twitter, footer .footer_content .col div.follow a .icon.twitter {
+ background-image: url("../../../public/img/social/twitter.svg");
+}
+footer .footer_content .col span a .icon.fb, footer .footer_content .col div.follow a .icon.fb {
+ background-image: url("../../../public/img/social/fb.svg");
+}
+footer .footer_content .logo_holder {
+ display: flex;
+ flex-direction: column;
+ margin: 20px 0;
+}
+footer .footer_content .logo_holder img {
+ max-width: 200px;
+ max-height: 80px;
+ margin-bottom: 40px;
+}
+
+/************WELCOME STRAN***************/
+.main_content.welcome h2::before {
+ content: "1/5 - ";
+}
+
+/******************************/
+/************FINISH STRAN***************/
+.main_content.finish h2::before {
+ content: "5/5 - ";
+}
+
+/******************************/
+/************CHECK STRAN***************/
+.main_content.check h2::before {
+ content: "2/5 - ";
+}
+.main_content.check .check_segment {
+ margin: 0 0 20px 0;
+ padding: 20px;
+ background-color: #eee;
+}
+.main_content.check .check_segment h3 {
+ margin: 0 0 20px 0;
+}
+.main_content.check .check_segment .check_item {
+ display: flex;
+ padding-bottom: 10px;
+}
+.main_content.check .check_segment .check_item .what {
+ width: 350px;
+ padding-right: 10px;
+ text-align: right;
+}
+.main_content.check .check_segment .check_item .value {
+ font-weight: 600;
+}
+.main_content.check .check_segment .check_item .value.green {
+ color: green;
+}
+.main_content.check .check_segment .check_item .value.orange {
+ color: orange;
+}
+.main_content.check .check_segment .check_item .value.red {
+ color: red;
+}
+
+/******************************/
+/************SETTINGS STRAN***************/
+.main_content.settings h2::before {
+ content: "3/5 - ";
+}
+.main_content.settings .settings_segment {
+ margin: 0 0 20px 0;
+ padding: 20px;
+ background-color: #eee;
+}
+.main_content.settings .settings_segment h3 {
+ margin: 0 0 20px 0;
+}
+.main_content.settings .settings_segment .settings_item {
+ display: flex;
+ vertical-align: middle;
+ padding-bottom: 10px;
+}
+.main_content.settings .settings_segment .settings_item.radio .value {
+ margin-top: 10px;
+}
+.main_content.settings .settings_segment .settings_item .what {
+ width: 400px;
+ padding-right: 10px;
+ line-height: 36px;
+ text-align: right;
+}
+.main_content.settings .settings_segment .settings_item input[type=text] {
+ width: 450px;
+}
+
+/******************************/
+/************DATABASE STRAN***************/
+.main_content.database h2::before {
+ content: "4/5 - ";
+}
+
+/******************************/
+/* Mobile prilagoditve */
+@media screen and (max-width: 700px) {
+ header nav {
+ flex-direction: column-reverse;
+ align-self: auto;
+ justify-content: space-evenly;
+ height: 100%;
+ text-align: right;
+ font-size: 14px;
+ }
+ header nav span.menu_item {
+ line-height: 18px;
+ }
+ header nav span.menu_item.active {
+ border-bottom: 2px #1e88e5 solid;
+ }
+ header nav span.menu_item a {
+ line-height: 18px;
+ }
+
+ body #main .main_content {
+ padding: 10px 20px 40px 20px;
+ }
+ body #main .main_content h1 {
+ padding: 10px 10px;
+ font-size: 22px;
+ text-align: center;
+ }
+ body #main .main_content .form_row {
+ margin: 0 !important;
+ padding-left: 0 !important;
+ padding-right: 0 !important;
+ }
+ body #main .main_content .label {
+ line-height: 30px;
+ }
+ body #main .main_content input[type=text],
+body #main .main_content input[type=email],
+body #main .main_content input[type=password] {
+ width: 100%;
+ }
+ body #main .main_content input[type=submit],
+body #main .main_content input[type=button] {
+ display: block;
+ width: 100%;
+ margin: 20px auto !important;
+ }
+ body #main .main_content .have_account {
+ display: block;
+ margin: 30px 0 0 0;
+ }
+ body #main .main_content .red.italic {
+ padding-left: 0 !important;
+ }
+ body #main .main_content .form_row.agreement {
+ margin-top: 10px !important;
+ }
+ body #main .main_content textarea#gdpr-note {
+ margin: 0;
+ width: 100%;
+ }
+
+ body.landing_page #main,
+body.login #main,
+body.register #main,
+body.login_noEmail #main {
+ min-height: auto;
+ /*background-image: none;*/
+ }
+ body.landing_page #main .main_content,
+body.login #main .main_content,
+body.register #main .main_content,
+body.login_noEmail #main .main_content {
+ padding: 30px 20px 30px 20px;
+ }
+ body.landing_page #main .main_content .app_title,
+body.login #main .main_content .app_title,
+body.register #main .main_content .app_title,
+body.login_noEmail #main .main_content .app_title {
+ width: 95%;
+ margin: 10px auto 40px auto;
+ font-size: 32px;
+ /*color: $color_text;*/
+ }
+ body.landing_page #main .main_content .landing_page_window,
+body.login #main .main_content .landing_page_window,
+body.register #main .main_content .landing_page_window,
+body.login_noEmail #main .main_content .landing_page_window {
+ width: 100%;
+ }
+ body.landing_page #main .main_content .landing_page_window .tab,
+body.login #main .main_content .landing_page_window .tab,
+body.register #main .main_content .landing_page_window .tab,
+body.login_noEmail #main .main_content .landing_page_window .tab {
+ font-size: 16px;
+ }
+ body.landing_page #main .main_content .landing_page_window .lostpass,
+body.login #main .main_content .landing_page_window .lostpass,
+body.register #main .main_content .landing_page_window .lostpass,
+body.login_noEmail #main .main_content .landing_page_window .lostpass {
+ font-size: 14px;
+ }
+ body.landing_page #main .main_content .landing_page_window input[type=submit],
+body.landing_page #main .main_content .landing_page_window input[type=button],
+body.login #main .main_content .landing_page_window input[type=submit],
+body.login #main .main_content .landing_page_window input[type=button],
+body.register #main .main_content .landing_page_window input[type=submit],
+body.register #main .main_content .landing_page_window input[type=button],
+body.login_noEmail #main .main_content .landing_page_window input[type=submit],
+body.login_noEmail #main .main_content .landing_page_window input[type=button] {
+ margin: 30px auto !important;
+ }
+
+ footer {
+ padding: 0 20px;
+ }
+ footer .footer_content {
+ flex-direction: column;
+ padding: 20px 0;
+ text-align: center;
+ }
+ footer .footer_content .col {
+ width: 100%;
+ }
+ footer .footer_content .col .follow {
+ justify-content: center;
+ }
+}
+
+/*# sourceMappingURL=style.css.map */
|