/*! * Kolory */ /*kolor przewodni*/ @main-color: #000; @main-color-hover: #0cafb1; @main-bg-color: @main-color; @main-bg-text-color: #fff; /*linki*/ @a-color: @main-color; @a-color-hover: @main-color-hover; /*tło strony*/ @body-bg: #f3f5f7; @body-text-color: #1d1c21; /*menu*/ @navbar-bg: #fff; @navbar-a-color: #000; @navbar-a-color-hover: #fff; @navbar-a-bg-hover: #0cafb1; @navbar-a-text-size: 15px; @navbar-a-text-transform: uppercase; /*guziki default*/ @btn-d-color: @main-bg-text-color; @btn-d-bg: @main-color-hover; @btn-d-border: @btn-d-bg; @btn-d-color-hover: #fff; @btn-d-bg-hover: @main-color; /*guziki primary*/ @btn-p-color: @main-bg-text-color; @btn-p-bg: @main-color-hover; @btn-p-border: @btn-d-bg; @btn-p-color-hover: #fff; @btn-p-bg-hover: @main-color; /*guziki kontrolki*/ @btn-l-color: @main-color-hover; @btn-l-color-hover: @main-color; @btn-male-female: @main-color; /*nagłowek i kreska*/ @header-font-size: 30px; @line-color: rgba(0,0,0,.07); /*grafik tabela*/ @th-header-color: rgba(0,0,0,.3); @th-header-bg: none; @td-hour-color: rgba(0,0,0,.3); @td-hour-bg: none; @td-today: none; @td-bg: none; @td-padding: 10px 5px; /*gora/dol lewo/prawo*/ .td-border (@top: 2px, @right: 0px, @bottom: 2px, @left: 0px, @color: rgba(0,0,0,.07)) { border-top: @top; border-bottom: @bottom; border-left: @left; border-right: @right; border-style: solid; border-color: @color; } .td-event-spacing (@border-bottom: 0px, @border-color: #fff, @margin-bottom: 10px) { /* odstep mniedzy zajeciemi w jednej celi */ border-bottom: @border-bottom solid @border-color; margin-bottom: @margin-bottom; } @td-event-color: @main-bg-text-color; @td-event-active: @main-bg-color; @td-event-inactive: @main-color-hover; @td-event-cancel: rgba(0,0,0,.2); /*grafik tabela mobilny*/ @li-header-color: @td-hour-color; @li-hour-color: @td-hour-color; @li-hour-bg: @td-hour-color; /*grafik tabela lista*/ @tl-header-color: @main-color-hover; @tl-table-header-color: @line-color; @tl-table-header-bg: @line-color; @tl-table-td-border: @body-bg; @tl-table-td-color: @main-color-hover; @tl-table-td-bg: @line-color; @tl-table-th-color: @th-header-color; @tl-table-th-bg: none; /*grafik pionowy*/ @tv-header-color: @th-header-color; @tv-header-bg: @body-bg; @tv-hour-color: @th-header-color; @tv-hour-bg: @line-color; @tv-lines: @body-bg; @tv-body-bg: @line-color; @tv-event-active-color: @td-event-color; @tv-event-active-bg: @td-event-active; @tv-event-busy-bg: @th-header-color; /*grafik poziomy*/ @thor-header-color: @th-header-color; @thor-header-bg: @body-bg; @thor-hour-color: @th-header-color; @thor-hour-bg: @line-color; @thor-lines: @body-bg; @thor-body-bg: @line-color; @thor-event-active-color: @td-event-color; @thor-event-active-bg: @td-event-active; @thor-event-busy-bg: @th-header-color; /*cennik*/ @pl-h3-color: @main-bg-text-color; @pl-h3-bg: @main-bg-color; @pl-h3-padding: 5px; @pl-name-color: @main-bg-color; @pl-th-color: @td-hour-color; @pl-th-bg: @body-bg; @pl-td-color: @body-text-color; @pl-td-bg: @line-color; @pl-td-border: @body-bg; /*rezerwacja*/ @r-bg: @body-bg; @r-border: @line-color; /*kalendarz*/ @cal-header-bg: @main-bg-color; @cal-header-color: @main-bg-text-color; @cal-today-bg: @main-bg-color; @cal-today-color: @main-bg-text-color; @cal-day-bg-hover: @line-color; /*tabele*/ @table-striped-bg: rgba(0, 0, 0, .02); @table-border-color: @main-bg-color; @table-th-border-color: @main-bg-color; @table-th-color: @body-bg; @table-th-bg: rgba(0, 0, 0, .15); /*kursy*/ @cou-plus-bg: @main-bg-color; @cou-plus-color: @main-bg-text-color; @cou-bar-bg: @line-color; @cou-bar-color: @body-text-color; @cou-bar-open-bg: @td-hour-color; @cou-bar-open-color: @body-text-color; @cou-panel-color: @body-text-color; @cou-panel-bg: rgba(0, 0, 0, .03); /*! * Style ogólne */ html, body { font-family: Arial, sans-serif; background: @body-bg; color: @body-text-color; } html { height: 100%; } body { min-height: 100%; position: relative; } a { color: @a-color; } a:hover, a:active, a:focus { text-decoration: none; color: @a-color-hover; } .alert { border-radius: 0; } .form-control:focus, input:focus, .btn:focus, .btn:active:focus, .btn.active:focus { outline: none !important; box-shadow: none; } .form-control:focus { border: 1px solid @main-color; box-shadow: inset 0 1px 1px rgba(0,0,0,.075); } .radio input[type="radio"]:focus + label::before, .checkbox input[type="checkbox"]:focus + label::before, .checkbox input[type="radio"]:focus + label::before { outline: none !important; } .radio label::before, .checkbox label::before { border: 1px solid #ccc; box-shadow: inset 0 1px 1px rgba(0,0,0,.075); } .container-main { padding-top: 80px; padding-bottom: 80px; } .btn-back { margin-top: 80px; } .navbar { background: @navbar-bg; box-shadow: 0 6px 12px rgba(0,0,0,.175); border: 0; } .navbar-nav>li>a { color: @navbar-a-color; line-height: 30px; text-transform: @navbar-a-text-transform; font-size: @navbar-a-text-size; } .nav>li>a:hover, .nav>li>a:focus { color: @navbar-a-color-hover; background-color: @navbar-a-bg-hover; } .nav>li>a.l-icon { padding-top:0; padding-bottom: 0; } .nav>li>a.l-icon i { color: @main-color; font-size: 26px; line-height: 60px; } .nav>li>a.l-icon:hover i { color: @navbar-a-color-hover; } .nav .open>a, .nav .open>a:hover, .nav .open>a:focus { color: @navbar-a-color-hover; background-color: @navbar-a-bg-hover; } .navbar-nav>li>.dropdown-menu { border-radius: 0; /*border-top: 0;*/ } .navbar-toggle { border-color: @main-color; border-radius: 0; } .navbar-toggle .icon-bar { background: @main-color; } .btn-default, .btn-default:focus { color: @btn-d-color; background-color: @btn-d-bg; border-color: @btn-d-border; } .btn-default:hover, .btn-default:active, .btn-default.active, .open>.dropdown-toggle.btn-default { color: @btn-d-color-hover; background-color: @btn-d-bg-hover; border-color: @btn-d-bg-hover; opacity: 1; } .btn-default:active, .btn-default.active { opacity: 0.8; } .btn-primary, .btn-primary:focus { color: @btn-p-color; background-color: @btn-p-bg-hover; border-color: @btn-p-bg-hover; } .btn-primary:hover, .btn-primary:active, .btn-primary.active, .open>.dropdown-toggle.btn-primary { color: @btn-p-color; background-color: @btn-p-bg; border-color: @btn-p-border; opacity: 1; } .btn-primary:active, .btn-primary.active { opacity: 0.8; } .page-header { font-size: @header-font-size; border-bottom: 1px solid @line-color; color: @main-color; } hr { border-top: 1px solid @line-color; } .off { background: #444; opacity: .1; } .popover { border-radius: 0; font-size: 12px; } .btn, .form-control { border-radius: 0; } #content, #cover { height: 100%; } #content.on { filter: blur(20px); } #cover.on { position: absolute; top: 0; left: 0; right: 0; bottom: 0; z-index: 1666; background: rgba(255, 255, 255, 0.7); } .lds-dual-ring { display: none; width: 64px; height: 64px; position: fixed; left: 50%; top: 50%; margin-left: -32px; margin-top: -32px; } #cover.on .lds-dual-ring { display: inline-block; } .lds-dual-ring:after { content: " "; display: block; width: 46px; height: 46px; margin: 1px; border-radius: 50%; border: 5px solid @main-color; border-color: @main-color transparent @main-color transparent; animation: lds-dual-ring 1.2s linear infinite; } .cover-anim { display: none; width: 64px; height: 64px; position: fixed; left: 50%; top: 50%; margin-left: -32px; margin-top: 10px; color: @main-color; } #cover.on .cover-anim { display: block; } .cover-anim img { margin-top: 20px; } .modal-content { border-radius: 0; } .modal-header { border: 0 !important; border-radius: 0 !important; } .modal-header .close { margin: 0; opacity: 1; } #modal-cal .datepicker-inline { width: 100%; } #modal-cal .datepicker table { width: 100%; } #modal-cal .datepicker td, #modal-cal .datepicker th { border-radius: 0; height: 50px; } .checkbox label::before { border-radius: 0; } .table-striped>tbody>tr:nth-child(odd)>td, .table-striped>tbody>tr:nth-child(odd)>th { background-color: @table-striped-bg; } .table>thead>tr>th, .table>tbody>tr>th, .table>tfoot>tr>th, .table>thead>tr>td, .table>tbody>tr>td, .table>tfoot>tr>td { border-top: 1px solid @table-border-color; } .table>thead>tr>th { border-bottom: 2px solid @table-border-color; color: @table-th-color; background: @table-th-bg; } .progress { height: 10px; margin-bottom: 5px !important; margin-top: 4px !important; background-color: #eee; opacity: 0.3; border-radius: 0px; -webkit-box-shadow: inset 0 1px 2px rgba(0,0,0,0.1); box-shadow: inset 0 1px 2px rgba(0,0,0,0.1); } .progress-bar { background-color: #333; opacity: 0.7; } .gender-label i { color: @btn-male-female; font-size: 26px; margin-top: -5px; } /*! * Kursy */ /*@cou-plus-bg: @main-bg-color; @cou-plus-color: @main-bg-text-color; @cou-bar-bg: @line-color; @cou-bar-color: @body-text-color;*/ #courses { margin-bottom: 20px; } .course h2 { margin: 0; } .course h2 a { display: block; position: relative; font-size: 15px; line-height: 20px; cursor: pointer; border: none; background: @cou-bar-open-bg; color: @cou-bar-open-color; outline: none !important; font-weight: 700; line-height: 40px; margin-bottom: 5px; padding-left: 55px; } .course h2 a.collapsed { background: @cou-bar-bg; color: @cou-bar-color; } .course h2 a:hover { text-decoration: none; opacity: .7; } .course h2 a.collapsed:before { content: "+"; } .course h2 a:before { display: block; content: "-"; position: absolute; left: 0; top: 0; width: 40px; height: 40px; background: @cou-plus-bg; color: @cou-plus-color; font-weight: normal; text-align: center; font-size: 20px; } .course .panel { border-radius: 0; background: none; box-shadow: none; margin-bottom:1px; } .course .panel:last-child { margin-bottom: 40px; } #courses p { margin: 10px; } .course .panel-heading { padding: 10px; background: @cou-panel-bg; color: @cou-panel-color; border-radius: 0; } /*! * Grafik zajęć tabela */ .btn-group .btn-link { font-size: 26px; line-height: 34px; color: @btn-l-color; padding-top: 0; padding-bottom: 0; } .btn-group .btn-link:hover { color: @btn-l-color-hover; } #schedule { margin-bottom: 20px; } #schedule th { text-align: center; padding: 5px; background: @th-header-bg !important; color: @th-header-color; } #schedule td.schedule-hour { padding: 5px; background: @td-hour-bg !important; color: @td-hour-color; font-weight: bold; } #schedule td { padding: @td-padding; background: @td-bg; .td-border(); } #schedule td > div { .td-event-spacing(); } #schedule td div:last-child { border: 0; margin: 0; } #schedule td a { display: block; height: 100%; color: #fff; margin: -5px; padding: 5px; } #schedule td a:hover { text-decoration: none; opacity: 0.9; } #schedule td div strong { display: block; text-transform: capitalize; font-size: 14px; } #schedule td div:last-child { border: 0; } #schedule .day-highlight { background: @td-today; } .list-table-event { cursor: pointer !important; } .list-entry { color: @main-bg-text-color; padding: 5px; text-transform: uppercase; position: relative; min-height: 120px; } .list-entry-busy { background: #d9534f; opacity: 1; } .list-entry-color { background: @main-bg-color; } .list-entry-inactive { background: @main-color-hover !important; opacity: 0.1 !important; } .list-entry-cancel { background: @td-event-cancel; } .list-entry-info-cancel { padding-top: 5px; font-weight: bold; color: red; } .list-table-event:hover { opacity: 0.8; } .list-entry-header { font-weight: bold; font-size: 15px; line-height: 17px; height: 34px; } .list-entry-time { font-size: 12px; line-height: 13px; } .list-entry-info { font-size: 12px; line-height: 13px; } .list-entry-instructor { font-size: 12px; line-height: 13px; } .list-entry-title { position: absolute; bottom: 0; left: 0; width: 100%; text-align: right; background: rgba(255, 255, 255, 0.5); font-size: 10px; line-height: 10px; padding: 2px 0px; } .progress { height: 10px; margin-bottom: 4px; border-radius: 0px; margin-top: 1px; } .progress-bar { background-color: #428bca; } /*! * Grafik zajęć tabela widok listy */ #timetable-1 { color: #000; } #timetable-1 .list-entry { display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-flex-flow: row wrap; flex-flow: row wrap; } #timetable-1 .day-header { line-height: 20px; margin-right: 10px; color: @li-header-color; } #timetable-1 strong { font-weight: bold; font-size: 20px; display: block; padding-top: 10px; text-transform: uppercase; } #timetable-1 .day-header strong { display: inline-block; } #timetable-1 ul { display: block; margin: 15px 0; padding: 0; } #timetable-1 li { display: block; font-size: 16px; margin-bottom: 1px; color: #fff; padding: 0; overflow: hidden; position: relative; padding-left: 110px; } #timetable-1 li div { } #timetable-1 .list-hour { background: @body-bg; color: @li-hour-color; border-right: 1px solid @body-bg; overflow: hidden; line-height: 32px; float: left; padding: 5px; width: 110px; height: 100px; position: absolute; top: 0; left: 0; } #timetable-1 .list-name { text-transform: uppercase; float: left; padding: 5px; line-height: 20px; } #timetable-1 .list-name p { margin: 0; } #timetable-1 .list-name p.list-info { margin-bottom: 0; margin-top: -2px; font-size: 13px !important; } #timetable-1 .list-list-event { cursor: pointer; } #timetable-1 a.buy { float: right; color: #000; display: inline-block; width: 100px; height: 30px; background: darkred; color: #fff; margin-top: 3px; border: 0; text-align: center; } #timetable-1 a.buy:hover { background: red; } #timetable-1 .list-booking #page-modal { width: 100%; height: auto; font-size: 12px; background: #eee; } #timetable-1 .list-booking #page-modal strong { display: inline-block; font-size: 14px; } #timetable-1 .list-booking #page-modal .blu { width: 50% !important; } #timetable-1 .list-booking #page-modal .success { margin-bottom: 0 !important; } #timetable-1 .list-entry { min-height: 40px; } /*! * Grafik zajęć lista */ #timetable-list .panel { margin-bottom: 20px; background: none; border: 0; border-radius: 0; box-shadow: none; } #timetable-list .panel-heading { padding-left: 0; } #timetable-list .table td { border-top: 4px solid @tl-table-td-border; color: @tl-table-td-color; background: @tl-table-td-bg; } #timetable-list .table th { border-bottom: 2px solid @tl-table-td-border; color: @tl-table-th-color; background: @tl-table-th-bg; } #timetable-list .list-name strong, #timetable-list .list-name i { color: @main-color; } /*! * Grafik zajęć pionowy */ #i-table { width: 100%; position: relative; margin-bottom: 20px; } #i-table-row { border-bottom: 1px solid @tv-lines; } #i-table-row div { height: 50px; float: left; } #i-table-row .i-table-event-caption { height: 50px; line-height: 50px; text-transform: uppercase; font-weight: bold; text-align: center; color: @tv-header-color; background: @tv-header-bg; } #i-table-col1 { /*width: 50px;*/ float: left; position: relative; padding: 0; } .i-table-hour-line { position: absolute; left: 0; height: 0; border-bottom: 1px dotted @tv-lines; width: 100%; z-index: 3; opacity: 0.5; } #i-table-col1 div { width: 100%; height: 50px; text-align: center; line-height: 50px; } #i-table-col1 div.i-table-hour { color: @tv-hour-color; background: @tv-hour-bg; height: 29px; line-height: 29px; border-bottom: 1px solid @tv-lines; } #i-table-col1 div.i-table-hour.t25 { height: 14px; line-height: 14px; font-size: 10px; } #i-table-col1 div.i-table-hour.t50 { height: 29px; line-height: 29px; } #i-table-col1 div.i-table-hour.t100 { height: 60px; line-height: 60px; } #i-table-col2 { /*width: 930px;*/ float: left; background: @tv-body-bg; padding: 0; } .i-table-events { float: left; position: relative; overflow: hidden; border-left: 1px solid @tv-lines; border-bottom: 1px solid @tv-lines; } .i-table-event-body { background: @tv-event-busy-bg; width: 100%; position: absolute; left: 0; } .i-table-event { background: @tv-event-active-bg; color: @tv-event-active-color; width: 100%; position: absolute; left: 0; z-index: 1; } .i-table-event span { display: block; position: absolute; left: 50%; top: 50%; font-size: 13px; line-height: 13px; height: 26px; width: 120px; text-align: center; margin-left: -60px; margin-top: -13px; } .i-table-line { position: absolute; width: 100%; height: 1px; background: @tv-lines; left: 0; z-index: 2; } .i-table-event.click { cursor: pointer; } .i-table-event.click:hover { opacity: .9; } /*! * Grafik zajęć poziomy */ #i-table-h { width: 100%; position: relative; margin-top: 20px; margin-bottom: 20px; } #i-table-h-col-1 { float: left; border-bottom: 1px solid @thor-lines; width: 15%; } #i-table-h-col-2 { float: left; width: 85%; } .i-table-h-event-caption { height: 44px; line-height: 44px; background: @thor-hour-bg; border: 1px solid @thor-lines; text-transform: uppercase; font-weight: bold; text-align: center; } .i-table-h-hour-line { float: left; background: @thor-hour-bg; border: 1px solid @thor-lines; margin-top: 1px; font-size: 13px; width: 44px; height: 44px; line-height: 44px; text-align: center; } .i-table-h-hour-line.caption { width: 15%; } .i-table-h-event-body { background: @thor-body-bg; width: 44px; height: 44px; float: left; border: 1px solid @thor-lines; } .i-table-h-event-body.green { background: @thor-event-active-bg; cursor: pointer; } .i-table-h-event-body.green:hover { opacity: .9; } .i-table-h-event-body.red { background: @thor-event-busy-bg; } .i-table-h-event { background: #5cb85c; width: 100%; position: absolute; left: 0; cursor: pointer; z-index: 1; } .i-table-h-event span { display: block; position: absolute; left: 50%; top: 50%; color: #fff; font-size: 13px; line-height: 13px; height: 26px; width: 120px; text-align: center; margin-left: -60px; margin-top: -13px; } .i-table-h-line { position: absolute; width: 100%; height: 1px; background: @thor-lines; left: 0; z-index: 2; } .i-table-h-event:hover { opacity: .9; } /*! * Cennik */ #pricelist-d h3 { display: block; color: @pl-h3-color; background: @pl-h3-bg; padding: @pl-h3-padding; } #pricelist-d table td { vertical-align: middle; } #pricelist-d .panel>.panel-body+.table, #pricelist-d .panel>.panel-body+.table-responsive { border: 0; } #pricelist-d .panel { margin-bottom: 20px; background: none; border: 0; border-radius: 0; box-shadow: none; } #pricelist-d .panel-heading { padding-left: 0; color: @pl-name-color; text-transform: uppercase; font-size: 20px; } #pricelist-d .panel-body { padding-left: 0; padding-top: 0; } #pricelist-d .table td { border-top: 4px solid @pl-td-border; color: @pl-td-color; background: @pl-td-bg; } #pricelist-d .table th { border-bottom: 2px solid @pl-td-border; color: @pl-th-color; background: @pl-th-bg; } /*! * Rezerwacja */ .list-group-booking { margin-top: 20px; } .list-group-booking .alert { margin-top: 20px; } .list-group-booking .list-group-item:first-child { border-radius: 0; } .list-group-booking .list-group-item { padding: 10px 15px; margin-bottom: -1px; background: @r-bg; border: 0; border-top: 1px solid @r-border; } .list-group-booking .list-group-item:last-child { border-radius: 0; border-bottom: 1px solid @r-border; } .list-group-booking .badge { padding: 3px 7px; font-size: 16px; font-weight: normal; color: inherit; background: none; border-radius: 0px; } .list-group-booking .radio label { margin-bottom: 5px; font-size: 18px; } #page-book .radio label::before, #page-book .checkbox label::before { border: 1px solid @main-color; } #page-book .radio label::after { background: @main-color; } #page-book .form-inline { margin-top: 10px; } /*! * Kalendarz / modal */ .modal-header { color: @cal-header-color !important; background: @cal-header-bg !important; } .modal-header .close { color: @cal-header-color; } #modal-cal .datepicker td.today, #modal-cal .datepicker td.active { color: @cal-today-color; background: @cal-today-bg; } #modal-cal .datepicker th { font-size: 18px; } #modal-cal .datepicker table tr td.day:hover, #modal-cal .datepicker table tr td.day.focused, #modal-cal .datepicker table tr th:hover { background: @cal-day-bg-hover; } #cal-inline .datepicker-inline { width: 100%; } #cal-inline .datepicker table { width: 100%; } @media (max-width: 768px) { /* Force table to not be like tables anymore */ #pricelist, #pricelist thead, #pricelist tbody, #pricelist th, #pricelist td, #pricelist tr { display: block; } /* Hide table headers (but not display: none;, for accessibility) */ #pricelist thead tr { position: absolute; top: -9999px; left: -9999px; } #pricelist tr { border: 1px solid #ccc; margin-bottom: 10px; } #pricelist td { /* Behave like a "row" */ border: none; border-bottom: 1px solid #eee; position: relative; padding-left: 50%; } #pricelist td:before { /* Now like a table header */ position: absolute; /* Top/left values mimic padding */ top: 6px; left: 6px; width: 45%; padding-right: 10px; white-space: nowrap; } /* Label the data */ #pricelist td:nth-of-type(1):before { content: "First Name"; } #pricelist td:nth-of-type(2):before { content: "Data"; } #pricelist td:nth-of-type(3):before { content: "Nazwa"; } #pricelist td:nth-of-type(4):before { content: "ID rezerwacji"; } #pricelist td:nth-of-type(5):before { content: "Status"; } #pricelist td:nth-of-type(6):before { content: "Ilość szt"; } #pricelist td:nth-of-type(7):before { content: "Wartość"; } #pricelist td:nth-of-type(8):before { content: ""; } #pricelist td:nth-of-type(8) { padding-left: 0; text-align: center; padding-top: 15px; padding-bottom: 15px; } #pricelist td:nth-of-type(9):before { content: "Zaznacz do opłacenia"; padding-top: 5px; } #pricelist td:nth-of-type(9) { padding-top: 10px; padding-bottom: 10px; display: none; } #pricelist td.td-to-pay { display: block; } } @keyframes lds-dual-ring { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } @media only screen and (max-width:768px){ /* .navbar-nav .dropdown-menu { display: block; position: static; background-color:transparent; border:0 none; box-shadow:none; margin-top:0; position:static; width:100%; margin-bottom: 15px; } .navbar-nav .dropdown-menu > li > a, .navbar-nav .dropdown-menu .dropdown-header { padding:5px 15px 5px 25px; } .navbar-nav .dropdown-menu > li > a{ line-height:20px; }*/ .navbar-nav .dropdown-menu { display: block; position: static; float: none; width: auto; margin-top: 0; background-color: transparent; border: 0; -webkit-box-shadow: none; box-shadow: none; } a.dropdown-toggle .caret { display: none; } .nav>li>a.l-icon span { display: inline-block; padding-top: 10px; padding-bottom: 10px; } }