.radius_100x{ border-radius: 100%; } .radius_100{ border-radius: 100px; } .radius_10{ border-radius: 8px; } .radius_5{ border-radius: 5px; } .radius_lenyilo_header{ border-radius: 7px; } .radius_felso_10{ border-radius: 8px 8px 0px 0px; } .radius_inputs{ border-radius: 5px; } @color_white: #fff; @color_black: #333; @color_ddgray: #333; @color_dgray: #888; @color_gray: #aaa; @color_lgray: #ccc ; @color_l1gray: #e6e6e6; @color_red: #f33; @color_green: #0eaf00; @color_link: #0b6acc; @nyelv_valaszto_anim_ido: 350ms; @arrow_anim_ido: 350ms; @elvalaszto_header_szin: #529c908c; @color1: #FFFFFF; @color2: #15435D; @color3: #C3DDB2; @color4: #CD8A00; @color5: #529c908c; //@import "colors.php"; .color1_bg{ background-color: @color1; } .color2_bg{ background-color: @color2; } .color3_bg{ background-color: @color3; } .color4_bg{ background-color: @color4; } .color5_bg{ background-color: @color5; } .color_red{ color: @color_red; } .color_link{ color: @color_red; } .clra{clear:both}.clra:after{clear:both;content:".";display:block;height:0;visibility:hidden} .noselect { -webkit-touch-callout: none; /* iOS Safari */ -webkit-user-select: none; /* Safari */ -khtml-user-select: none; /* Konqueror HTML */ -moz-user-select: none; /* Old versions of Firefox */ -ms-user-select: none; /* Internet Explorer/Edge */ user-select: none; /* Non-prefixed version, currently supported by Chrome, Edge, Opera and Firefox */ } .hide{ display: none; } .content_size{ width:800px; max-width:95%; margin:0px auto; } .link { color: blue !important; } .link:hover { text-decoration: underline; } .title{ font-size:12px; } .text_solid{ display: inline-block; } .pointer{ cursor: pointer; } .default_cursor{ cursor: default; } a{ text-decoration: none; color: inherit; &:hover, &:active, &:focus{ color: inherit; } } .row{ margin-left: -15px; margin-right: -15px; margin-bottom: 8px; .col{ position: relative; padding-left: 15px !important; padding-right: 15px !important; &.col-12{ float: left; width:100%; } &.col-6{ float: left; width:50%; &.teljes_szeles_b{ padding-right: 0px; } &.teljes_szeles_j{ padding-left: 0px; } } &.col-4{ float: left; width:33%; } &.col-3{ float: left; } .input_text, .select_input{ width: 100%; } } } .radio_sor_tarto{ display: inline-block; margin-left: -25px; .radio_gomb{ display: none; } input[type=radio] ~ label { padding-left: 25px; position: relative; cursor: pointer; vertical-align: top; z-index: 5; } input[type=radio] ~ .check { position: relative; display: inline-block; left: 24px; top: 1px; width: 20px; height: 20px; margin-top: 0px !important; border: 2px solid @color_dgray; background-color: transparent; z-index: 1; } input[type=radio]:checked ~ .check { display: inline-block; width: 20px; height: 20px; border:2px solid @color2; margin-top: 0px !important; background-color: @color1; } // //input[type=radio]:checked ~ .check::before{ // background: #0DFF92; //} } .checkbox_sor_tarto{ .checkbox_gomb{ display: none; } input[type=checkbox] ~ label { padding-left: 25px; position: relative; cursor: pointer; vertical-align: top; z-index: 5; } input[type=checkbox] ~ .check { position: relative; display: inline-block; left: 24px; top: 1px; width: 20px; height: 20px; margin-top: 0px !important; border: 2px solid @color_dgray; background-color: transparent; z-index: 1; } input[type=checkbox]:checked ~ .check { display: inline-block; width: 20px; height: 20px; border:2px solid @color2; margin-top: 0px !important; //background-color: @color1; &:before{ display: block; content: ""; height: 5px; width: 10px; border-left: 2px solid @color2; border-bottom: 2px solid @color2; transform: translate(3px,5px)rotate(-45deg); } } } .input_text{ padding:3px 7px; border: 1px solid @color_dgray; &:focus, &:active{ outline: none; } } .select_input{ padding:4px 7px; border: 1px solid @color_dgray; &:focus, &:active{ outline: none; } } body{ position: relative; min-height: 100vh; margin:0; padding:0; font-size:15px; font-weight: 300 !important; font-family: 'Ubuntu', sans-serif !important; background-color: #C3DDB2; } header{ position: fixed; width: 100%; height: 60px; background-color: @color1; z-index: 20; .navbar{ color: @color_white; .visszaX_gomb_tarto{ width:72px; .visszaX_gomb{ display: inline-block; height: 37px; margin:10px 0px; padding:6px 12px; font-size: 18px; font-weight: 800; background-color: @color_red; cursor: pointer; } } .vissza_gomb_tarto{ width:266px; .vissza_gomb{ display: inline-block; height: 50px; width: 260px; margin:4px 0px; padding:6px 12px; background-position: left; background-size: contain; background-repeat: no-repeat; background-image: url("../../assets/img/logo.svg"); cursor: pointer; } } .header_title { font-size: 23px; margin:13px 0px; width:~"calc(100% - 400px)"; } .nyelv_valaszto_tarto{ width:65px; height: 47px; padding-top:2px; display: inline-block; .nyelv_valaszto{ display: inline-block; padding:5px 20px 5px 7px; margin-top: 4px; //border: 2px solid @color_white; text-align: right; transition: all @nyelv_valaszto_anim_ido; &.aktiv{ background-color: @color_white; box-shadow: 0px 0px 7px rgba(0,0,0,0.5); .zaszlo { display: block; opacity: 1; } } .zaszlo{ display: none; opacity: 0; width: 35px; height: 35px; margin-top: 15px; background-position: center; background-size: cover; transition: all @nyelv_valaszto_anim_ido; cursor: pointer; &:first-child{ display: block; margin-top: 0px; opacity: 1; } &.HU{ background-image: url("../../assets/flags/HU.png"); } &.EN{ background-image: url("../../assets/flags/GB.png"); } &.DE{ background-image: url("../../assets/flags/DE.png"); } &.FR{ background-image: url("../../assets/flags/FR.png"); } &.ES{ background-image: url("../../assets/flags/ES.png"); } &.CH{ background-image: url("../../assets/flags/CH.png"); } } } &.aktiv{ .lenyilo_arrow_tarto { transform: translate(0px, -143px); .arrow{ border-left: 2px solid @color_ddgray; border-bottom: 2px solid @color_ddgray; transform: translate(-5px, 1px) rotate(135deg); } } } .lenyilo_arrow_tarto{ display: inline-block; width: 10px; height: 10px; padding: 10px; transform: translate(0px, -39px); cursor: pointer; .arrow{ width: 10px; height: 10px; border-left: 2px solid @color_white; border-bottom: 2px solid @color_white; transition: all 350ms; transform: translate(-5px, -7px) rotate(315deg); } } } } } .btn-primary { background-color: #15435D; } footer{ position: absolute; left: 0px; bottom: 0px; width: 100%; height: 200px; margin-top: 40px; padding:10px; color: black; text-align: center; background-color: @color1; z-index: 15; .footer_szoveg{ font-size: 12px; line-height: 13px; padding-bottom: 10px; } .footer_sp_h_logo{ width: 470px; max-width: 100%; padding: 5px; background-color: @color_white; } .footer_sp_v_logo{ display: none; max-width: 100%; height: 80px; padding: 5px; background-color: @color_white; } } .potdij_index{ padding-top: 60px; padding-bottom: 200px; &.potdij_index2{ padding-top: 75px; } } .potdij_csempe{ padding:10px; margin:10px 0px 20px 0px; background-color: @color_l1gray; //box-shadow: 0px 0px 7px rgba(0,0,0,0.5); &.tranzakcio{ .potdij_csempe_header{ //background-color: @color_gray; } .tranzakcio_table_tarto{ overflow-x: auto; .tranzakcio_table_belso{ min-width: 320px; overflow: hidden; } } .row{ &::after { content: ""; width: ~"calc(100% - 30px)"; height: 0px; margin: 0px auto; padding-top: 8px; border-bottom: 1px solid @color_gray; } &:last-child{ margin-bottom: 5px; } } } .felso_elem{ .jobb{ text-align: left !important; } } .row:last-child{ margin-bottom: 0px; } .egyenleg, .rendszam{ width:~"calc(100% - 30px)"; font-weight: 800; } .potdij_csempe_header{ margin: -10px -10px 10px -10px; padding: 7px 10px 7px 10px; font-size: 18px; font-weight: 800; color:@color_white; background-color: @color2; } .lenyilo_arrow_tarto{ display: inline-block; width:20px; height:20px; padding: 15px; transform: translate(0,-10px); cursor: pointer; &.aktiv{ .arrow{ transform: translate(-10px,-10px)rotate(135deg); } } .arrow{ width:20px; height:20px; border-left:2px solid @color_black; border-bottom:2px solid @color_black; transition: all @arrow_anim_ido; transform: translate(-10px,-20px)rotate(315deg); } } .lenyilo{ display: none; padding-top:8px; //padding-left: 15px !important; //padding-right: 15px !important; width: 100% !important; .row{ &::after { content: ""; width: ~"calc(100% - 30px)"; height: 0px; margin: 0px auto; padding-top: 8px; border-bottom: 1px solid @color_gray; } } .lenyilo_header{ width: auto; margin: 10px 0px 10px 0px; padding: 5px 2px; background-color: @elvalaszto_header_szin; color: @color_white; } .potdij_reszletei{ margin-bottom: 30px; &.also{ margin-bottom: 5px; } } .fotok_lenyilo{ margin-bottom: 30px; } .foto_ikon_tarto{ .fotok_gomb{ display: inline-block; padding: 5px 15px; color: #fff; background-color: @color_dgray; cursor: pointer; } .foto_ikon{ width: 40px; height: 40px; margin-right: 10px; background-position: left; background-size: contain; background-repeat: no-repeat; background-image: url("../../assets/img/camera_icon.png"); display: inline-block; cursor: pointer; &.foto_ikon2{ width: 25px; height: 25px; vertical-align: bottom; } } .foto_ikon_szoveg{ height: 25px; line-height: 25px; display: inline-block; } } .foto_tarto{ display: none; position: relative; margin-top: 15px; .foto{ width:~"calc(100% - 50px)"; //width:100%; margin: 0px 25px; } .balra, .jobbra{ position: absolute; top:0px; width: 7%; height: 100%; cursor: pointer; &:hover{ background-color: rgba(0,0,0,0.2); } .arrow_tarto{ margin-top: 50%; .arrow{ display: inline-block; width:20px; height:20px; border-left:2px solid @color_black; border-bottom:2px solid @color_black; transition: all @arrow_anim_ido; transform: translate(10px,0px)rotate(45deg); } } &.jobbra{ right:0px; .arrow_tarto{ text-align: right; .arrow{ transform: translate(-10px,0px)rotate(225deg); } } } } } } .penzugyi_osszesto{ .osszeg_tarto, .afa_tarto{ &.osszeg_tarto{ padding-right: 3px; } display: inline-block; text-align: right; } } .table_tarto{ overflow: auto; width:100%; max-width: 100%; border: 1px solid @color_gray; .penz_table{ width: 100%; min-width: 100%; tr{ &:nth-child(2n+1){ background-color: @color_lgray; //color: @color_white; } th{ background-color: @color_dgray; color:@color_white } td, th{ padding: 7px 7px; &:first-child{ width: 33%; min-width: 90px; text-align: left; } &:nth-child(2){ //width: 40%; min-width: 120px; //word-break: break-all; } &:last-child{ width: 33%; min-width: 75px; text-align: right; } } } } } &.ugyviteli_koltseg_csempe, &.fizetési_adatok_csempe{ .potdij_reszletei{ margin-bottom: 5px; } .row{ &::after { content: ""; width: ~"calc(100% - 30px)"; height: 0px; margin: 0px auto; padding-top: 8px; border-bottom: 1px solid @color_gray; } } } } .penz_csempe{ padding: 10px; margin: 35px 0px 20px 0px; background-color: #e6e6e6; .penz_osszesito_header{ padding: 5px 2px; margin: 0px 0px 15px 0px; color: @color_white; background-color: @elvalaszto_header_szin !important; } .penz_adat_tarto{ .lenyilo{ display: none; } &.aktiv{ .lenyilo{ display: table-row; } } .table_tarto{ overflow: auto; width:100%; max-width: 100%; border: 1px solid @color_gray; .penz_table{ width: 100%; min-width: 100%; tr{ &.lenyilo{} &:nth-child(2n+1){ background-color: @color_lgray; //color: @color_white; } th{ background-color: @color2; color:@color_white } td, th{ padding: 7px 7px; //text-align: center; &:first-child{ //text-align: left; min-width: 105px; } &:nth-child(2){ word-break: break-all; min-width: 130px; } &:nth-child(3){ min-width: 140px; } &:last-child{ //text-align: right; min-width: 95px; } } } } } .penz_tablazat_szoveg{ margin-top: 5px; display: none; } .penz_lenyilo_gomb{ display: inline-block; margin-top: 10px; padding:5px 15px; color:@color_white; background-color: @color2; cursor: pointer; } } } .fizetes_gomb_alul_tarto{ position: fixed; bottom:0px; left: 0px; width: 100%; z-index: 20; .ok{ //display: none; .fizetes_gomb_alul{ background-color: @color1 !important; } } .fizetes_gomb_alul{ width: ~"calc(100% - 20px)"; padding:15px 25px; margin: 0px 10px 15px 10px; color: white; font-size: 20px; font-weight: 800; background-color: @color2; //background-color: @color_green; z-index: 20; box-shadow: 0px 0px 5px rgba(0,0,10,0.6); &.bizonylat{ color: @color_white; background-color: @color_dgray; } } } .gazdalkodoi_adatok, .gazdalkodoi_adatok_eubelul, .gazdalkodoi_adatok_eukivul{ display: none; padding-left: 10px; } .adoszam_load_atarto, .tovabbi_adatok { display: none; } .tovabbi_adatok_show { display: block; } .nohide { display: block !important; } .potdij_sz_adatok{ padding-top: 75px; padding-bottom: 200px; } .sz_adatok_tipus_gomb{ display: inline-block; width: 100%; max-width:100%; padding: 5px 15px; margin: 0px 0px 20px 0px; color: #fff; background-color: @color_dgray; cursor: pointer; &.aktiv{ .lenyilo_arrow_tarto { //transform: translate(0px, 3px); //.arrow{ // transform: translate(-5px, 1px) rotate(135deg); //} } } .lenyilo_arrow_tarto{ display: inline-block; width: 10px; height: 10px; padding: 10px; transform: translate(0px, 3px); cursor: pointer; .arrow{ width: 10px; height: 10px; border-left: 2px solid @color_white; border-bottom: 2px solid @color_white; transition: all 350ms; transform: translate(-5px, -7px) rotate(315deg); } } } .sz_adatok_csempe{ padding:10px; margin:10px 0px 20px 0px; background-color: @color_l1gray; .sz_adatok_csempe_header{ margin: -10px -10px 10px -10px; padding: 5px 10px 5px 10px; font-weight: 800; color:@color_white; background-color: @color2; } .sz_adatok_tipus_gomb{ display: inline-block; width: 100%; max-width:100%; padding: 5px 15px; margin: 0px 0px 20px 0px; color: #fff; background-color: @color_dgray; cursor: pointer; &.aktiv{ .lenyilo_arrow_tarto { //transform: translate(0px, 3px); //.arrow{ // transform: translate(-5px, 1px) rotate(135deg); //} } } .lenyilo_arrow_tarto{ display: inline-block; width: 10px; height: 10px; padding: 10px; transform: translate(0px, 3px); cursor: pointer; .arrow{ width: 10px; height: 10px; border-left: 2px solid @color_white; border-bottom: 2px solid @color_white; transition: all 350ms; transform: translate(-5px, -7px) rotate(315deg); } } } .fizetes_gomb_tarto{ display: none; } .fizetes_gomb_small { display: inline-block; width: auto; max-width: 100%; padding:15px 35px 15px 35px; color: @color_white; font-size: 14px; font-weight: 800; background-color: @color1; z-index: 20; } .fizetes_gomb{ display: inline-block; width: 400px; max-width: 100%; padding:10px 25px; margin: 30px 0px 15px 0px; color: @color_white; font-size: 20px; font-weight: 800; background-color: @color1; z-index: 20; } .vissza_gomb_tarto{ //padding:0px 10px; .vissza_gomb{ display: inline-block; width: 400px; max-width: 100%; margin: 25px auto 10px auto; padding: 5px 10px 5px 10px; font-weight: 800; color:@color_white; background-color: @color2; } } } .vissza_gomb_tarto_left{ text-align: left; //padding:0px 10px; .vissza_gomb{ display: inline-block; width: 200px; max-width: 100%; margin: 5px auto 10px auto; padding: 5px 10px 5px 10px; font-weight: 800; color:@color_white; background-color: @color2; text-align: center; text-decoration: none; } .vissza_gomb:hover{ text-decoration: underline; } } .vissza_gomb_tarto_right{ text-align: right; //padding:0px 10px; .vissza_gomb{ display: inline-block; width: 200px; max-width: 100%; margin: 5px auto 10px auto; padding: 5px 10px 5px 10px; font-weight: 800; color:@color_white; background-color: @color2; text-align: center; } } .vissza_gomb_tarto_right_long{ text-align: right; //padding:0px 10px; .vissza_gomb{ display: inline-block; width: auto; max-width: 100%; margin: 5px auto 10px auto; padding: 5px 10px 5px 10px; font-weight: 800; color:@color_white; background-color: @color2; text-align: center; } } .potdij_fizetes_pay_status{ padding-top: 75px; padding-bottom: 200px; .vissza_gomb_tarto{ padding:0px 10px; .vissza_gomb{ display: inline-block; width: 400px; max-width: 100%; margin: 25px auto 10px auto; padding: 5px 10px 5px 10px; font-weight: 800; color:@color_white; background-color: @color2; } } } @media only screen and (max-width: 520px) { header .navbar .header_title{ margin: 14px 0px; font-size: 21px; } body { font-size: 16px; } .title { font-size: 14px; } .row{ margin-left: -10px; margin-right: -10px; margin-bottom: 8px; .col{ position: relative; padding-left: 10px !important; padding-right: 10px !important; &.col-6{ &:nth-child(2){ text-align: right; } } } } .potdij_csempe{ &.tranzakcio{ .row{ font-size: 14px; &::after { width: ~"calc(100% - 15px)"; } } } .table_tarto{ .penz_table{ font-size: 14px; tr{ td, th{ padding: 5px 5px; } } } } .lenyilo{ .row{ &:after{ width: ~"calc(100% - 20px)"; } } .foto_tarto{ .balra, .jobbra{ width: 20%; } } } &.ugyviteli_koltseg_csempe, &.fizetési_adatok_csempe{ .row{ &:after{ width: ~"calc(100% - 20px)"; } } } } .penz_csempe{ .penz_adat_tarto{ font-size: 14px; .table_tarto{ .penz_table{ width: auto; tr{ td, th{ padding: 1px 3px; &:first-child{ min-width: 90px; } &:last-child{ min-width: 85px; } } } } } .penz_tablazat_szoveg{ display: block; } } } .sz_adatok_csempe{ .fizetes_gomb{ padding: 5px 10px; line-height: 23px; span{ display: block; } } } .fizetes_gomb_alul_tarto{ .fizetes_gomb_alul{ padding: 5px 10px; line-height: 23px; span{ display: block; } } } footer{ //height: 240px; //.footer_sp_h_logo{ // display: none; //} //.footer_sp_v_logo{ // display: inline-block; //} } } @media only screen and (max-width: 320px) { header .navbar .header_title{ margin: 11px 0px; font-size: 18px; span{ display: block; line-height: 18px; } } .row{ margin-left: 0px; margin-right: 0px; margin-bottom: 0px; .col{ padding-left: 0px !important; padding-right: 0px !important; margin-bottom: 8px; &.col-6{ width:100%; &:nth-child(2){ text-align: left; } } &.col-4{ width:100%; } &.col-3{ width:100%; } } } .potdij_csempe{ &.tranzakcio{ .row{ .col{ &.col-6{ width:50%; } &.col-4{ width:33%; } &.col-3{ width:20%; } } } } .lenyilo_arrow_tarto{ transform: translate(0, -60px); } .row:last-child .col{ margin-bottom:0px; } .lenyilo { .row::after{ width: ~"calc(100% - 0px)"; padding: 0px; padding-top: 8px; margin-bottom: 8px; } .foto_ikon_tarto .foto_ikon_szoveg{ font-size: 14px; } } .penzugyi_osszesto{ .osszeg_tarto, .afa_tarto{ text-align: left; } } &.ugyviteli_koltseg_csempe, &.fizetési_adatok_csempe{ .row{ &:after{ width: ~"calc(100% - 0px)"; padding: 0px; padding-top: 8px; margin-bottom: 8px; } } } } } .dropdown-style{ background-color: #15435D; color: #fff; } .dropdown-menu>li>a{ color: #FFFFFF; } .dropdown-toggle { background-color: #15435D; } .dropdown-menu>li>a:hover{ color: #000000; background-color: #C3DDB2; } .navbar-nav>li>a{ color: #FFFFFF; } .navbar-nav>li>a:hover{ color: #FFFFFF; background-color: #15435D; } .navbar-nav>li>a:active{ color: #FFFFFF; background-color: #15435D; } .nav .open>a, .nav .open>a:hover, .nav .open>a:focus { background-color: #15435D; } .nav .open>a, .nav .open>a:hover, .nav .open>a:hover { background-color: #15435D; } .nav a:visited{ background-color: #222836; } .nav .caret{ border-top-color: #FFFFFF; border-bottom-color: #FFFFFF; } .nav a:hover .caret{ border-top-color: #FFFFFF; border-bottom-color: #FFFFFF; } .nav .open>a .caret, .nav .open>a:hover .caret, .nav .open>a:focus .caret{ border-top-color: #FFFFFF; border-bottom-color: #FFFFFF; } .nav>li>a:hover, .nav>li>a:focus{ background-color: #15435D; }