/* ========================================================================== style-A1.css Jeden plik stylów panelu administracyjnego — zastępuje style-v2.css i style-v3.css (wcześniej ładowane razem, w tej kolejności). Zawartość: CZĘŚĆ 1 — dawny style-v2.css (baza, bez zmian) CZĘŚĆ 2 — dawny style-v3.css (dopracowanie, ładowane po bazie, bez zmian) CZĘŚĆ 3 — WARSTWA A1: propozycja nowoczesnego, czytelnego panelu (typografia, karty, listy/tabele, odznaki statusów, podgląd, formularze edycji) Kaskada zachowana jak w oryginale (v2 -> v3), warstwa A1 dochodzi na końcu i tylko dopracowuje wygląd — nie zmienia kolorów marki (czarny sidebar, akcent #b48c80, czerwień #cc0000 dla akcji krytycznych). ========================================================================== */ /* -------------------------------------------------------------------------- CZĘŚĆ 1 — style-v2.css -------------------------------------------------------------------------- */ body, html { font-size: .875rem; background-color: #fff; min-height:100%; height:100%; } .errors { color: red; } .bg-login { background:url('../img/bg-login.jpg') center no-repeat; background-size:cover; } .bg-login:before {content:''; display:block; z-index:0; position:absolute; top:0; left:0; height:100%; width:100%; opacity:.8; background:#000;} a {color:#a05f33;} a:hover {color:#000;} a:focus, .btn:focus, button:focus {outline:none !important; text-decoration:none;} .feather { width: 16px; height: 16px; vertical-align: text-bottom; } h2.breadcrumbs { font-weight: 400; font-style: normal; font-size: 18px; color: #4E7087; margin-bottom: 20px; } h2.breadcrumbs a:hover {text-decoration:none; color: #4E7087;} label { font-size: 10px; color: rgba(115, 151, 174, 0.7); text-transform: uppercase; font-weight: 700; margin: 0 0 .3rem 0; display: block; } .form-control { margin-bottom: 0px; } .form-control { font-size: .8rem; padding: .495rem .75rem; } .module.to-delete { margin: 15px 0; } table th .fa-2x {font-size:1.2rem;} table td .fa.text-secondary {opacity:.2;} .dropdown-menu {padding:0;} .dropdown-menu .dropdown-item {padding:.5rem 1.5rem;} .legend .dot {display:inline-block; width:14px; height:14px; border-radius:50%; margin-left:15px; margin-bottom:-3px;} #ceep-filters-form button {margin-top:19px !important;} .bg-dark { background:#0b0e13 !important;} .fixed-top {z-index:1;} /* * Sidebar */ .sidebar .logo {width:60%; margin:0 auto; margin-top:-3rem;} .sidebar { position: fixed; top: 0; bottom: 0; left: 0; z-index: 100; /* Behind the navbar */ padding: 48px 0 0; /* Height of navbar */ box-shadow: inset -1px 0 0 rgba(0, 0, 0, .1); background:#0b0e13; z-index:111; } .sidebar-sticky { position: relative; top: 0; height: calc(100vh - 48px); padding-top: .8rem; } .sidebar-sticky .nav-item.dropdown {overflow:hidden;} .sidebar-sticky .dropdown-menu { position:relative !important; top:0; left:0; padding: 0; margin: 0 1rem; font-size: 1rem; color: #fff; text-align: left; list-style: none; background-color: #0b0e13; background-clip: padding-box; border: none; border-radius: 0; transform:none !important; display:block !important; float:none !important; height:0 !important; overflow:hidden; } .sidebar-sticky .dropdown-menu.show {height:auto !important;} .sidebar-sticky .dropdown-menu a.dropdown-item {display:block !important; padding: .45rem .45rem .45rem .85rem; margin-left:.45rem; border-left:solid 1px rgba(248, 241, 241, 1); font-size:.75rem; line-height:1rem; position:relative; color:#fff;} .sidebar-sticky .dropdown-menu a.dropdown-item .fa {opacity:.7; width:20px; text-align:center; display:inline-block;} .sidebar-sticky .dropdown-menu a.dropdown-item:before {content:''; width:8px; height:8px; position:absolute; background:#fff; border:solid 1px rgba(248, 241, 241, 1); top:.85rem; left:-4px;} .sidebar-sticky .dropdown-menu a.dropdown-item + a.dropdown-item { border-top: dotted 1px rgba(248, 241, 241, .8);} .sidebar-sticky .dropdown-menu a.dropdown-item:hover .fa {opacity:1; margin-right:5px;} @supports ((position: -webkit-sticky) or (position: sticky)) { .sidebar-sticky { position: -webkit-sticky; position: sticky; } } .st0{fill-rule:evenodd;clip-rule:evenodd;fill:#FCDA9A;} .sidebar .nav-link { font-weight: 500; color: #fff; font-size:16px; position:relative; } .sidebar .mb-2 .nav-link {font-weight:400; font-size:12px; color:#874E4E;} .sidebar .nav-link .feather { margin-right: 4px; color: #999; } .sidebar .nav-link.active { color: #CC0000; } .sidebar .nav-link { padding: .32rem 0 .55rem 1rem; margin:0 ; border-bottom:1px solid #874E4E; border-color: rgba(248, 241, 241, .2); } .sidebar .nav-item ul {padding:0; margin:0; list-style-type:none;} .sidebar .nav-item ul .nav-link {background:#e5ded1; color:#0b0e13; border-bottom: none; padding: .22rem 0 .35rem 1.1rem; font-size: 13px;} .sidebar .nav-link .fa {position:relative; color:#b48c80; width:28px; height:28px; border-radius:50%; border:solid 1px #b48c80; font-size:12px; text-align:center; line-height:27px; margin-right:5px;} .sidebar .nav-item ul .nav-link, .sidebar ul ul .nav-item {position:relative;} .sidebar .nav-item ul .nav-link .fa {width:25px; height:25px; line-height:23px; font-size:10px; background:#e5ded1;} .sidebar ul ul {overflow:hidden;} .sidebar ul ul .nav-item .nav-link:before { content: ''; width: 1px; height: 95%; border-left: solid 1px #b48c80; left: 27px; top: -.4rem; position: absolute; z-index: 0; } .sidebar .active .nav-link {background:#fff; color:#0b0e13; } .sidebar .nav-item .active ul .nav-link { background:#fff;} .sidebar .nav-item ul .active .nav-link {background:#fff; color:#000;} .sidebar .nav-item.active ul .active .nav-link {background: #ddcfc2;} .sidebar .nav-link:hover .feather, .sidebar .nav-link.active .feather { color: inherit; } .sidebar-heading { font-size: .7rem; text-transform: uppercase; } .sidebar-heading span {color: #b48c80; padding-bottom:.5rem; display:block;} .fixed {position:absolute; width:40px; height:40px; border-radius:50%; left:50%; margin-left:-20px; bottom:20px; border:solid 1px #874E4E; } .fixed .nav-link {padding:0; line-height:40px; text-align:center; margin:0; padding:0;} .fixed .fa {color:#874E4E;} /* * Content */ [role="main"] { padding-top: 70px; /* Space for fixed navbar */ } /* * Navbar */ .fixed-top { box-shadow: inset 0 -1px 0 rgba(0, 0, 0, .1); background:#0b0e13; } .fixed-top h1 {font-size:1.2rem; text-transform:uppercase;} .navbar-brand { padding-top: .75rem; padding-bottom: .75rem; font-size: 1rem; } nav .navbar-brand img {height:50px;} nav h1.mail-title {font-size:20px; font-weight:400;} .navbar .form-control { padding: .75rem 1rem; border-width: 0; border-radius: 0; } .form-control-dark { color: #fff; background-color: rgba(255, 255, 255, .1); border-color: rgba(255, 255, 255, .1); } .form-control-dark:focus { border-color: transparent; box-shadow: 0 0 0 3px rgba(255, 255, 255, .25); } /* * Utilities */ .border-top { border-top: 1px solid #e5e5e5; } .border-bottom { border-bottom: 1px solid #e5e5e5; } #sidesetigs .nav-item {padding:5px 0; margin:0 12px;} #sidesetigs .nav-item .nav-link {color:#fff7e9; font-size:16px; position:relative;} #sidesetigs .nav-item .nav-link .fa {color:#fff;} #sidesetigs .nav-item .nav-link .badge {display:block; width:20px; line-height:18px; text-align:center; height:20px; border-radius:50%; background:#cc0000; color:#fff; font-size:9px; position:absolute; top:10px; right:-12px; padding:0;} #sidesetigs .nav-item.disabled .nav-link {color:#d7b9b9; } #sidesetigs .nav-item.disabled .nav-link .badge {display:none;} #sidesetigs .nav-item .nav-link .user {position:relative; } #sidesetigs .nav-item .nav-link.dropdown-toggle::after{font-size:16px; margin-right:20px;} #sidesetigs .nav-item .nav-link.dropdown-toggle + .dropdown-menu { position: absolute !important; top: 100%; left: auto !important; right:22px !important; } #sidesetigs .nav-item .nav-link .user img {border-radius:50%;} #sidesetigs .nav-item .nav-link .user .dot {width:10px; height:10px; position:absolute; bottom:-5px; right:8px; border-radius:5px;} #sidesetigs .nav-item .nav-link .user .dot.green {background:green;} #sidesetigs .nav-item .nav-link .user .dot.yellow {background:yellow;} #sidesetigs .nav-item .nav-link .user .dot.red {background:red;} .card-header, .card-footer { background-color: rgba(0,0,0,.1); } .card.big, .card {margin-bottom:30px; background: #fff7e9;} .card.big .fa, .card.medium .fa , .card.sm .fa{font-size:50px; color:#7397AE;} .card.big .card-body {min-height:220px;} .card.bigest .card-body {min-height:90vh;} .card.sm .card-body {min-height:160px;} .card.big .card-body a {display:block; padding-top:60px; color:#7397AE; } .card.sm .card-body p{padding-top:20px; color: #CC0000;} .card.sm .fa {color:#CC0000; } .card.big .card-body a:hover, .card.big .card-body a:focus {text-decoration:none; opacity:.7;} .card.big .card-body h4 {font-size:30px; color:#CC0000; padding-top:30px; text-transform:uppercase;} .card.sm .card-body h4 {font-size:.8rem; color:#CC0000;} .card.big.mt-5 {margin-top:3.5rem!important} .card .card-title, h2 { font-weight: 400; font-style: normal; font-size: 18px; color: #4E7087; margin-bottom:20px; } .card .ml-mr-20 { margin-left:-20px; margin-right:-20px; } .card .ml-mr-21 { margin-left:-21px; margin-right:-21px; } .card .table-responsive.ml-mr-20, .card .table-responsive.ml-mr-21 {width:auto;} .card table {margin-top:10px; margin-bottom:0;} .card .table-responsive table th:first-child, .card .table-responsive table td:first-child { padding-left:20px;} .card .table-responsive table th:last-child, .card .table-responsive table td:last-child {padding-right:10px;} ..collection-table {border:none !important;} .collection-item.table-row{border:none; border-top: 1px solid #dee2e6 !important;} .collection-item.table-row.table-cell {border:none;} .card table.table th, .table-cell.table-header {border:none; color:#874E4E; font-weight:700; font-size:12px;} .card table.table.table-alt th, label {color: #b48c80;} .card .circle {width:120px; height:120px; border-radius:50%; margin:0 auto; margin-top:-140px; background:#fff; border:solid 1px #b48c80; text-align:center;} .card a:hover .circle, .card a:hover {opacity:1 !important;} .card .circle .fa {padding-top:34px; color:#b48c80; font-size:50px; display:inline-block;} label { font-size:9px; line-height:16px; text-transform:uppercase; font-weight:700; margin:0 0 .3rem 0; display:block;} label:after {content:' '; display:inline-block;} .input-group-text { background-color: #feedcd; border: 1px solid rgba(0,0,0,.125); padding: .3rem .6rem; } .input-group>.custom-file, .input-group>.custom-select, .input-group>.form-control {border: 1px solid rgba(0,0,0,.125);} .card .table td, .card .table th { padding:.5rem; vertical-align: middle; } .card blockquote {padding:10px; font-size:80%; border: 1px solid rgba(0,0,0,.125); border-radius:5px;} .card.brt-0 {border-radius:0 0 5px 5px; border-top:none;} .pic-circle {border-radius:50%;} .card .table-responsive .table td a .fa {color:#7397ae; padding:0 5px; font-size:20px; width:30px; text-align:center;} .card .table-responsive .table td a .btn .fa {color:#fff; font-size:inherit;} .card.login .card-header, .card.login .card-body, .card.login .card-footer {padding:15px 45px;} .card.login .btn {font-size:1.2rem; font-weight:700;} .card.login .btn-primary { background: #feedcd; border: 1px solid rgba(0,0,0,.125); color: #21252F; } .card.login label {color: #feedcd ;} .card.login .btn .fa {color: #21252F; font-size:1.2rem; padding-left:1rem;} .card.login .card-footer {background:rgba(254,237,205,.3); } .table img {border-radius:3px;} .table tr td .btn .fa { font-size: 1.1rem; width: 30px; margin: -0.2rem -.5rem; } .btn {font-size:.7rem; line-height:1.3rem; padding: .36rem .75rem;} .btn-primary, .badge-primary {background:rgba(204, 0, 0, 1); color:#fff; border-color:rgba(204, 0, 0, 1);} .btn-primary:hover, .btn-primary:focus {background:rgba(215, 185, 185, 1); color:#fff; border-color:rgba(215, 185, 185, 1);} .btn-default {background:#fff; color:#7397AE; border-color: rgba(201, 215, 224, 1);} .card-header .btn-default, .card-footer .btn-default {background:#feedcd; border: 1px solid rgba(0,0,0,.125); color:#21252F;} .card-footer select {margin-top:5px;} .card-footer .btn {font-weight:700; letter-spacing:1px; margin-top:5px;} .btn-xs {padding:.3rem .9rem; font-size:.7rem; line-height:.8rem; text-transform:uppercase;} .btn-sm-1 {padding:.3rem .9rem; font-size:.7rem; line-height:.8rem;} .btn-success {background: ; border-color: ;} .table td, .table th { padding: .75rem; vertical-align: top; border-top: 1px solid rgba(0,0,0,.125); } table .badge-pill {padding:.5rem 1rem;} a.disabled {cursor:auto; opacity:.3;} .grey {color:#333; opacity:.3;} .green {color:#00cc00;} .yellow {color:#ff9900;} .red {color:#cc0000;} .dark {color:#222;} .purple {color:#874E4E;} .well { background: #f4eeee; padding: .5rem; border-radius: 5px; } .well label, .well a {color:#212529;} .well a:hover {text-decoration:none; color:#CC0000;} .dropzone {border: 1px solid rgba(0,0,0,.125);} h6 {font-size:12px;} .op-03 {opacity:.3;} .op-05 {opacity:.5;} .op-07 {opacity:.7;} .no-border {background:none !important; border:none !important; position:relative;} .form-control { font-size: .8rem; padding: .45rem .75rem; } .form-control-sm {padding:.295rem .75rem;} .form-group { margin-bottom: .7rem; } .page-link {color: #7397AE;} .page-item.active .page-link { z-index: 1; color: #7397AE; background-color: rgba(245, 239, 239, 1); border-color: #dee2e6; } .line {margin:10px -20px; position:relative;} .line:before {content:''; width:100%; display:block; height:1px; float:left; margin:13px 0 -28px 0; border-bottom:1px solid rgba(115, 151, 174, 0.498039215686275);} .line span {display:inline-block; font-weight:700; padding:0 10px; background:#fff; font-size:10px; text-transform:uppercase; color:rgba(115, 151, 174, 0.498039215686275);} hr { margin:15px -19px; border:none; border-bottom:1px solid rgba(0, 0, 0, 0.1);} .text-underline {display:block; padding-bottom:.2rem; border-bottom:1px solid rgba(115, 151, 174, 0.498039215686275);} .text-underline .btn-xs {margin-top:-.1rem} .line-b-blue {border-bottom:solid 1px rgba(115, 151, 174, 1); margin-bottom:0;} .line-b-blue:before {display:none;} .table-secondary, .table-secondary>td, .table-secondary>th {background-color: rgba(242, 242, 242, 1);} .table-active, .table-active>td, .table-active>th {background:#fff;} .table-active td:first-child , .table-active td:last-child {position:relative;} .table-active td:first-child:before, .table-active td:last-child:before { content: ''; position: absolute; top: -1px; left: -1px; width: 0; height: 0; border-top: 28px solid transparent; border-bottom: 28px solid transparent; border-left: 18px solid rgb(245, 239, 239); } .table-active td:last-child:before { transform: rotate(180deg); right:-1px; left:auto; } .table.table-zapytania .table-active td:first-child {font-weight:700;} .table.table-zapytania tr td, .table.table-zapytania tr th { color: #7397AE;} .table.table-zapytania tr td a.disabled {color:#333; opacity:.5;} .table-more-info >td, .table-more-info > td {background-color: rgb(245, 239, 239); position:relative;} .table-more-info p {color:#000; font-size:.8rem;} .table-more-info small {color: #999999;} .table-more-info hr {border-color:#d4d4d4; opacity:.7; margin:5px 0 15px -15px; } .table-more-info .row {margin:0;} .table-more-info a .fa {color:#000 !important;} .table-more-info > td:before { content: ''; position: absolute; top: -14px; left: 4.2%; width: 0; height: 0; border-left: 20px solid transparent; border-right: 20px solid transparent; border-bottom: 15px solid rgb(245, 239, 239); } } .nav-pills {margin:0 0 0 -20px;} .nav-pills .nav-link { background-color: rgba(250, 250, 250, 1); color: #7397AE; border-bottom:solid 1px #7397AE; border-right:solid 1px #7397AE; border-radius:0; } .nav-pills .nav-link:first-child { } .nav-pills .nav-link.active, .nav-pills .show>.nav-link{ background:#fff; border-right:none; color: #7397AE; } .card-header.no-bg {border:none !important; background-color: rgb(245, 239, 239); padding:0; border:none; margin-top:-2px;} .card-header.no-bg .nav-pills .nav-link {color:#333; border-radius:5px 5px 0 0 ; background:#e6d2d2; border: none !important;} .card-header.no-bg .nav-pills .nav-link + .nav-link {margin-left: .25rem;} .nav-pills.card-header-pills .nav-link + .nav-link {margin-left:.25rem;} .nav-pills.card-header-pills .nav-link:last-child {margin-right:.6rem;} .card-header.no-bg .nav-pills .nav-link.active, .nav-pills .nav-item.active .nav-link{background:#fff; border-bottom: none !important;} .nav-pills .nav-item.disabled .nav-link{background-color: rgb(245, 239, 239); border: 1px solid #e6d2d2 !important; border-bottom:none !important; } .bs-tooltip-auto[x-placement^=top] .arrow::before, .bs-tooltip-top .arrow::before { top: 0; border-width: .4rem .4rem 0; border-top-color: #fff; } .tooltip-inner { max-width: 200px; padding: .25rem .5rem; color: #222; text-align: center; background-color: #fff; border-radius: .25rem; } .inputfile-box { position: relative; } .inputfile { display: none !important; opacity:0 !important; } .inputfile-box label {position:relative; width:100%;} .file-box { display: block; width: 98%; border: 1px solid #ccc; border-radius:4px; padding: 5px 0px 5px 5px; box-sizing: border-box; height:39px; line-height:21px; } .file-button { position: absolute; top: 0px; right: 0px; width:30%; } .d-relative {position:relative;} .d-absolute {position:absolute;} .domain .d-absolute {right:10px; top:34px; color:green; font-size:18px;} .form-success {border-color:green;} .steps {list-style-type:none; margin:0; padding:0;} .steps li {display:inline-block; padding:6px 4px 0 0;} .steps li span {display:inline-block; width:20px; height:20px; border-radius:50%; border:solid 2px #CC0000;} .steps li.active span {background:#CC0000;} .panel-radio {border-color:#efefef;} .panel-radio .table {margin:0 !important;} .panel-radio .panel-heading, .panel-radio .panel-footer {background:#efe4e4; color:#fff !important; padding:.8rem 0 .5rem 0;} .panel-radio .panel-heading h2 {color:#fff; font-weight:700; font-size:20px;} .panel-radio .panel-heading h2 small {color:#fff; display:block; line-height:.3; padding-top:5px; font-weight:400; font-size:14px;} .panel-radio .panel-footer {padding:0; margin:0;} .panel-radio .panel-footer .text-center {padding:10px 5px;} .panel-radio .panel-footer .col-xs-6 + .col-xs-6 .text-center {border-left:solid 1px #efefef;} .panel-radio .panel-footer .text-center .price {padding:1px 0; font-size:20px; font-weight:700;} .checkcontainer {position:relative; display:block; cursor:pointer;} .checkcontainer input {display:none;} .checkcontainer input:checked ~ .panel-radio { ransform:scale(1.2); -webkit-transform:scale(1.2); -moz-transform:scale(1.2); -o-transform:scale(1.2); z-index:30; position:absolute; -webkit-box-shadow: 0px 0px 15px 3px rgba(0,0,0,0.44) !important; -moz-box-shadow: 0px 0px 15px 3px rgba(0,0,0,0.44) !important; box-shadow: 0px 0px 15px 3px rgba(0,0,0,0.44) !important; border:none !important; left:0px; width:100%; } .checkcontainer input:checked ~ .panel-radio .panel-heading, .checkcontainer input:checked ~ .panel-radio .panel-footer{ background:#CC0000; } .checkcontainer input:checked ~ .panel-radio .panel-footer .col-xs-6 + .col-xs-6 .text-center {border-left:solid 1px #fff;} .checkcontainer input:checked ~ .panel-radio .table tr td {color:#222;} ul.timeline { list-style-type: none; position: relative; padding-left:20px; } ul.timeline:before { content: ' '; background: #e6d2d2; display: inline-block; position: absolute; left: 14px; width: 3px; height: 100%; z-index: 400; } ul.timeline > li { margin: 20px 0; padding-left: 20px; position:relative; } ul.timeline > li:before { content: ' '; background: white; display: inline-block; position: absolute; border-radius: 50%; border: 3px solid #e6d2d2; left: -25px; width: 40px; height: 40px; z-index: 400; } ul.timeline > li.ok:before { border: 3px solid #CC0000; } ul.timeline > li.ok:after, ul.timeline > li.working:after { content: "\f00c"; font: normal normal normal 14px/1 FontAwesome; font-size: inherit; text-align:center; display: inline-block; position: absolute; border-radius: 50%; left: -25px; top:13px; width: 40px; height: 20px; z-index: 401; } ul.timeline > li.working:after { content: "\f017"; } .timeline .table tr td:last-child a {padding:0 2px;} span.dot {display:inline-block; width:22px; height:22px; line-height:22px; text-align:cetner; border-radius:11px; background:#ccc;} span.dot.warning {color:#222; background:yellow;} span.dot.danger {color:#fff; background:red;} .pagination {padding-top:15px;} .pagination span:first-child {margin-left:auto;} .pagination span { padding: 0 px; border: #dee2e6 1px solid; border-radius: 3px; margin: 0 1px; display: block; min-width: 30px; height:30px; line-height:30px; text-align: center; } .pagination span a {display:block; width:100%; height:100%;} .select2-container .select2-selection {margin-top:0; height: 32px; } .select2-container--default .select2-selection--single { border: 1px solid #ced4da;} /* faktrua */ #faktura {} .invoice-title h1, .invoice-title h3 { display: inline-block; line-height:46px; } #faktura address {font-size:1.2rem;} strong.text-uppercase {padding-bottom:5px; padding-top:10px; margin-bottom:1px; border-bottom:4px solid #e9ecef; display:block;} .table > tbody > tr > .no-line { border-top: none; } .table > thead > tr > .no-line { border-bottom: none; } .table > tbody > tr > .thick-line { border-top: 2px solid; } /* komunikacja */ .inbox_people { background: #fff none repeat scroll 0 0; float: left; overflow: hidden; width: 40%; border-right:1px solid #c4c4c4; } .inbox_msg { border: 1px solid #c4c4c4; clear: both; overflow: hidden; border-radius:5px; } .top_spac{ margin: 20px 0 0;} .recent_heading {float: left; width:40%;} .srch_bar { display: inline-block; text-align: right; width: 60%; padding: } .headind_srch{ padding:10px 29px 10px 20px; overflow:hidden; border-bottom:1px solid #c4c4c4;} .recent_heading h4 { font-size: 21px; margin: auto; } .srch_bar input{ border:1px solid #cdcdcd; border-width:0 0 1px 0; width:80%; padding:2px 0 4px 6px; background:none;} .srch_bar .input-group-addon button { background: rgba(0, 0, 0, 0) none repeat scroll 0 0; border: medium none; padding: 0; color: #707070; font-size: 18px; } .srch_bar .input-group-addon { margin: 0 0 0 -27px;} .chat_ib h5{ font-size:15px; color:#464646; margin:0 0 8px 0;} .chat_ib h5 span{ font-size:13px; float:right;} .chat_ib p{ font-size:14px; color:#989898; margin:auto} .chat_img { float: left; width: 11%; } .chat_ib { float: left; padding: 0 0 0 15px; width: 88%; } .chat_people{ overflow:hidden; clear:both;} .chat_list { border-bottom: 1px solid #c4c4c4; margin: 0; padding: 18px 16px 10px; } .inbox_chat { height: 550px; overflow-y: scroll;} .active_chat{ background:#e5ded1;} .incoming_msg_img { display: inline-block; width: 6%; } .incoming_msg_img img, .chat_img img{max-width:100%;} .received_msg { display: inline-block; padding: 0 0 0 10px; vertical-align: top; width: 92%; } .received_withd_msg p { background: #e5ded1 none repeat scroll 0 0; border-radius: 3px; color: #646464; font-size: 14px; margin: 0; padding: 5px 10px 5px 12px; width: 100%; } .time_date { color: #747474; display: block; font-size: 12px; margin: 8px 0 0; } .received_withd_msg { width: 57%;} .mesgs { background: #fff none repeat scroll 0 0; float: left; padding: 30px 15px 0 25px; width: 60%; } .sent_msg p { background: #0b0e13 none repeat scroll 0 0; border-radius: 3px; font-size: 14px; margin: 0; color:#fff; padding: 5px 10px 5px 12px; width:100%; } .sent_msg div {float:left; width: -webkit-calc(100% - 62px); width: -moz-calc(100% - 62px); width: calc(100% - 62px); } .sent_msg:after { float:right; content:''; width:52px; height:52px; border-radius:50%; background: #0b0e13 url(../img/logo.png) center no-repeat; background-size:94%; } .outgoing_msg{ overflow:hidden; margin:26px 0 26px;} .sent_msg { float: right; width: 46%; } .input_msg_write input { background: rgba(0, 0, 0, 0) none repeat scroll 0 0; border: medium none; color: #4c4c4c; font-size: 15px; min-height: 48px; width: 100%; } .type_msg {border-top: 1px solid #c4c4c4;position: relative;} .msg_send_btn { background: #cc0000 none repeat scroll 0 0; border: medium none; border-radius: 50%; color: #fff; cursor: pointer; font-size: 13px; height: 33px; line-height:20px; text-align:center; position: absolute; right: 0; top: 11px; width: 33px; } .messaging { padding: 0 0 10px 0; border-radius:5px;} .msg_history { min-height: 516px; height:100%; overflow-y: auto; } @media (max-width: 1700px) { .input-group div {display:flex; max-width: 80%;} .input-group .input-group-prepend + div {width:60px;} .input-group-text {padding: .3rem .35rem; max-width: 100% !important;} .btn { font-size: .7rem; line-height: 1.3rem; padding: .36rem .3rem; } .btn.ml-3 {margin-left:3px !important;} .btn-xs { padding: .3rem .8rem; } } @media (min-width: 992px) { .fixed-top .navbar-nav { -ms-flex-direction: row; flex-direction: row; } } @media screen and (min-width: 768px) { #toggle-sidebar {display:none; color:#333 !important;} .sm-hidden {display:none;} .fixed-top.nav-klient .navbar-brand { position:absolute; z-index:2; height:60px; background:#fff !important; width:100%; top:-60px; left:0; right:0; padding-left:47%; } .fixed-top.nav-klient .navbar-brand:after { content: ''; display: inline-block; position: absolute; margin: 0 0 -20px 0; left: 49%; margin-left: -50px; top: 59px; width: 0; height: 0; border-left: 70px solid transparent; border-right: 70px solid transparent; border-top: 20px solid #fff; } .fixed-top.nav-klient {top:60px; background:#efe4e4 !important; } .nav-klient .navbar-collapse { display: -ms-flexbox!important; display: flex!important; -ms-flex-preferred-size: auto !important; flex-basis: auto !important; background:#efe4e4; padding:.25rem 0; } .nav-klient .navbar-collapse .nav-link { padding-right: .5rem; padding-left: .5rem; color:#cb0100 !important; } .nav-klient .navbar-collapse .nav-link a{ color:#cb0100 !important; } .nav-klient #sidesetigs .nav-link {padding: .5rem;} .nav-klient #sidesetigs .nav-item { margin:-.8rem .5rem; } } @media screen and (max-width: 767px) { #sidesetigs .nav-item .nav-link.dropdown-toggle + .dropdown-menu { top: 100%; left: a0 !important; right:0 !important; } nav h1.mail-title {display:none;} #sidesetigs {width:300px; padding:20px 30px; border: solid 1px #efefef;} #sidesetigs .navbar-nav { -ms-flex-direction: row; flex-direction: row;} #sidesetigs .nav-item { -ms-flex: 0 0 25%; flex: 0 0 25%; max-width: 25%; padding:5px 0; margin:0; text-align:center; } #sidesetigs .nav-item .nav-link .badge {right:0;} #sidesetigs .dropdown-toggle::after {position:absolute; right:-2px; top:50%; width:auto; margin:0 !important;} .ml-auto.set {margin:0; position:absolute; right:0; top:60px; z-index:1111; background:#fff; } .navbar-toggler {font-size: 2.2rem; top:12px; right:10px; position:absolute; border:none;} .navbar-brand {margin-left:50px;} .xs-none {display:none;} .sidebar-sticky {display:block; height:auto; position:relative; width:100%;} .sidebar {position:relative; width:100%;} #toggle-sidebar {display:block; position:absolute; top: 5px; left: 10px; color: #333 !important; font-size: 2.2rem;} } #cart_item_added_notify {position:fixed; top: 69px; right: 20px; width: 280px; text-align:center; z-index:9999; } #product_quantity {text-align:center; margin:0 4px; width:89%;} @media screen and (max-width: 510px) { .h-100 .col-8 { -ms-flex: 0 0 80%; flex: 0 0 80%; max-width: 80%; } .card.login .btn { font-size: 1rem; } .card.login .card-header, .card.login .card-body, .card.login .card-footer {padding:15px 20px;} } @media screen and (max-width: 420px) { .h-100 .col-8 { -ms-flex: 0 0 95%; flex: 0 0 95%; max-width: 95%; } } /* -------------------------------------------------------------------------- CZĘŚĆ 2 — style-v3.css -------------------------------------------------------------------------- */ /* ========================================================================== style-v3.css Warstwa dopracowująca panel administracyjny (ładowana po style-v2.css). Sidebar pozostaje czarny, kolor akcentu: #b48c80. ========================================================================== */ :root { --kk-accent: #b48c80; --kk-accent-dark: #9a6f62; --kk-accent-darker: #7f5a4f; --kk-accent-tint: rgba(180, 140, 128, .12); --kk-accent-tint-strong: rgba(180, 140, 128, .28); --kk-sidebar-bg: #0b0e13; --kk-sidebar-bg-soft: rgba(255, 255, 255, .045); --kk-sidebar-line: rgba(255, 255, 255, .08); --kk-bg: #f2f3f5; --kk-surface: #ffffff; --kk-surface-soft: #f8f7f6; --kk-border: #e4e6ea; --kk-border-strong: #ccd1d8; --kk-text: #262a2f; --kk-text-muted: #707784; --kk-radius: .5rem; --kk-radius-sm: .5rem; --kk-shadow-sm: 0 1px 3px rgba(16, 24, 40, .06), 0 1px 2px rgba(16, 24, 40, .04); --kk-shadow-md: 0 6px 16px rgba(16, 24, 40, .09); --kk-shadow-lg: 0 14px 34px rgba(16, 24, 40, .14); --kk-header-h: 64px; --kk-sidebar-header-h: 74px; --kk-control-h: 38px; --kk-table-btn-size: 32px; } /* ========================================================================== Scrollbary — 4px, dopasowane kolorystycznie ========================================================================== */ html { scrollbar-width: thin; scrollbar-color: var(--kk-accent) transparent; } ::-webkit-scrollbar { width: 4px; height: 4px; } ::-webkit-scrollbar-track { background: transparent; } ::-webkit-scrollbar-thumb { background-color: var(--kk-accent); border-radius: 4px; } ::-webkit-scrollbar-thumb:hover { background-color: var(--kk-accent-dark); } .sidebar-sticky { scrollbar-width: thin; scrollbar-color: rgba(255, 255, 255, .25) transparent; } .sidebar-sticky::-webkit-scrollbar-thumb { background-color: rgba(255, 255, 255, .25); } .sidebar-sticky::-webkit-scrollbar-thumb:hover { background-color: var(--kk-accent); } /* ========================================================================== Layout: nagłówek, sidebar, treść ========================================================================== */ body, html { color: var(--kk-text); font-size:1rem;} .navbar-brand { padding-top: .5rem; padding-bottom: .5rem; } nav .navbar-brand img { height: 38px; } .fixed-top { min-height: var(--kk-header-h); box-shadow: 0 1px 0 rgba(0, 0, 0, .35); } /* pola i przyciski w ciemnym nagłówku (np. przełącznik klienta, wyszukiwarka) — ta sama wysokość co linki/ikony po prawej stronie nagłówka */ .navbar .form-control { height: var(--kk-control-h) !important; line-height: calc(var(--kk-control-h) - 2px); padding-top: 0 !important; padding-bottom: 0 !important; border-radius: var(--kk-radius-sm); border: 1px solid rgba(255, 255, 255, .15); background: rgba(255, 255, 255, .08); color: #fff; } .navbar .form-control:focus { border-color: var(--kk-accent); background: #fff; color: var(--kk-text); box-shadow: 0 0 0 .18rem var(--kk-accent-tint-strong); } .navbar .form-control::placeholder { color: rgba(255, 255, 255, .6); } #sidesetigs .nav-item .nav-link { display: flex; align-items: center; justify-content: center; gap: .35rem; height: var(--kk-control-h); padding: 0 .6rem; border-radius: var(--kk-radius-sm); transition: background-color .15s ease, color .15s ease; } #sidesetigs .nav-item .nav-link:hover { background: rgba(255, 255, 255, .08); color: var(--kk-accent); } #sidesetigs .nav-item .nav-link:hover .fa { color: var(--kk-accent); } #sidesetigs .nav-item.disabled .nav-link:hover { background: transparent; color: #d7b9b9; } [role="main"] { padding-top: calc(var(--kk-header-h) + 28px); background: var(--kk-bg); min-height: 100vh; } .sidebar { height: 100vh; padding-top: 0; background: var(--kk-sidebar-bg); } /* pasek z logo i przyciskiem zwijania — poza scrollowanym obszarem, żeby logo (pozycjonowane wcześniej ujemnym marginesem) nigdy nie było przycinane przez overflow ustawiony niżej na .sidebar-sticky */ .sidebar-header { position: relative; display: flex; align-items: center; justify-content: center; min-height: var(--kk-sidebar-header-h); padding: .5rem 1rem; } .sidebar .logo { width: 70%; max-width: 160px; margin: 0; } /* wymagane: max-height = 100vh - pasek logo, z paskiem przewijania */ .sidebar-sticky { position: sticky; top: 0; height: auto; max-height: calc(100vh - var(--kk-sidebar-header-h)); overflow-y: auto; overflow-x: hidden; padding-top: .5rem; padding-bottom: 30px; padding-right: 2px; } @media screen and (max-width: 767px) { .sidebar-sticky { max-height: none; overflow: visible; } [role="main"] { padding-top: calc(var(--kk-header-h) + 16px); } } /* ========================================================================== Sidebar — pozostaje czarny, nawigacja dopracowana kolorem akcentu ========================================================================== */ .sidebar { transition: width .2s ease, max-width .2s ease, flex-basis .2s ease; } .sidebar .nav-link { display: flex; align-items: center; border-radius: var(--kk-radius-sm); margin: .1rem .65rem; transition: background-color .15s ease, color .15s ease; } .sidebar .nav-link:hover { background: var(--kk-sidebar-bg-soft); color: #fff; } .sidebar .nav-link .fa { flex: 0 0 auto; transition: background-color .15s ease, color .15s ease, border-color .15s ease; } .sidebar .nav-link:hover .fa { background: var(--kk-accent); color: #0b0e13; border-color: var(--kk-accent); } .sidebar .nav-label { flex: 1 1 auto; } .sidebar .nav-counter { margin-left: auto; flex: 0 0 auto; } /* stan aktywny — wyróżniony kolorem akcentu zamiast płaskiej bieli */ .sidebar .active .nav-link { background: var(--kk-accent); color: #1a1410; font-weight: 600; } .sidebar .active .nav-link .fa { background: #1a1410; color: var(--kk-accent); border-color: #1a1410; } .sidebar .nav-item ul .nav-link:hover { background: #ecdfd8; } .sidebar .nav-item ul .active .nav-link, .sidebar .nav-item.active ul .active .nav-link { background: var(--kk-accent); color: #1a1410; } .sidebar .nav-item ul .active .nav-link .fa, .sidebar .nav-item.active ul .active .nav-link .fa { background: #1a1410; color: var(--kk-accent); } .sidebar-heading span { letter-spacing: .08em; } /* ========================================================================== Sidebar — przycisk zwijania/rozwijania i tryb "tylko ikony" ========================================================================== */ .sidebar-collapse-toggle { position: absolute; top: 14px; right: 20px; width: 28px; height: 28px; padding: 0; display: flex; align-items: center; justify-content: center; background: transparent; color: var(--kk-accent); border: 2px solid var(--kk-sidebar-bg); border-radius: 50%; box-shadow: var(--kk-shadow-sm); cursor: pointer; z-index: 120; transition: background-color .15s ease; } .sidebar-collapse-toggle:hover { background: var(--kk-accent-dark); } .sidebar-collapse-toggle:focus { outline: none; box-shadow: 0 0 0 .18rem var(--kk-accent-tint-strong); } .sidebar-collapse-toggle .hamburger { position: relative; display: inline-block; width: 13px; height: 11px; } .sidebar-collapse-toggle .hamburger-bar { position: absolute; left: 0; width: 100%; height: 2px; border-radius: 2px; background: var(--kk-accent); transition: top .18s ease .18s, transform .18s ease, opacity .12s ease .18s; } .sidebar-collapse-toggle .hamburger-bar:nth-child(1) { top: 5px; transform: rotate(45deg); transition-delay: 0s, .18s, 0s; } .sidebar-collapse-toggle .hamburger-bar:nth-child(2) { top: 5px; opacity: 0; transition-delay: 0s, 0s, 0s; } .sidebar-collapse-toggle .hamburger-bar:nth-child(3) { top: 5px; transform: rotate(-45deg); transition-delay: 0s, .18s, 0s; } /* zwinięty sidebar => trzy kreski (hamburger) */ body.sidebar-collapsed .sidebar-collapse-toggle .hamburger-bar:nth-child(1) { top: 0; transform: rotate(0); transition-delay: .18s, 0s, .18s; } body.sidebar-collapsed .sidebar-collapse-toggle .hamburger-bar:nth-child(2) { opacity: 1; transition-delay: .3s; } body.sidebar-collapsed .sidebar-collapse-toggle .hamburger-bar:nth-child(3) { top: 9px; transform: rotate(0); transition-delay: .18s, 0s, .18s; } body.sidebar-collapsed .sidebar { width: 68px; min-width: 68px; max-width: 68px; flex: 0 0 68px; } body.sidebar-collapsed [role="main"] { margin-left: 68px !important; width: calc(100% - 68px) !important; max-width: calc(100% - 68px) !important; flex: 0 0 calc(100% - 68px) !important; transition: margin-left .2s ease, width .2s ease; } body.sidebar-collapsed .sidebar .logo, body.sidebar-collapsed .sidebar-heading span, body.sidebar-collapsed .sidebar .nav-label, body.sidebar-collapsed .sidebar .nav-counter, body.sidebar-collapsed .sidebar .nav-item ul { display: none !important; } body.sidebar-collapsed .sidebar .nav-link { justify-content: center; margin: .15rem .5rem; padding-left: 0; padding-right: 0; } body.sidebar-collapsed .sidebar .nav-link .fa { margin-right: 0; } @media screen and (max-width: 767px) { .sidebar-collapse-toggle { display: none; } } /* ========================================================================== Karty ========================================================================== */ .card { border: 1px solid var(--kk-border); border-radius: var(--kk-radius); box-shadow: var(--kk-shadow-sm); background: var(--kk-surface); } .card-header, .card-footer { background: var(--kk-surface-soft); border-color: var(--kk-border); padding: .9rem 1.25rem; } .card-header:first-child { border-radius: calc(var(--kk-radius) - 1px) calc(var(--kk-radius) - 1px) 0 0; } .card-footer:last-child { border-radius: 0 0 calc(var(--kk-radius) - 1px) calc(var(--kk-radius) - 1px); } .card-body { padding: 1.25rem; } .card .card-title, h2 { font-weight: 600; font-size: 1.05rem; color: var(--kk-text); margin-bottom: 1.1rem; } h2.breadcrumbs { font-weight: 500; font-size: 1rem; color: var(--kk-text-muted); } h2.breadcrumbs a:hover { color: var(--kk-accent-darker); } .well { background: var(--kk-surface-soft); border: 1px solid var(--kk-border); border-radius: var(--kk-radius-sm); } /* ========================================================================== Kafelki dashboardu (.card.big / .medium / .sm) — te same selektory co w style-v2.css, żeby wygrać ze specyficznością ".card.big" nad zwykłym ".card" ========================================================================== */ .card.big, .card.medium, .card.sm { background: var(--kk-surface); transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease; } .card.big:hover, .card.medium:hover, .card.sm:hover { transform: translateY(-3px); box-shadow: var(--kk-shadow-md); border-color: var(--kk-accent); } .card .circle { background: var(--kk-accent-tint); border: 1px solid var(--kk-accent); transition: background-color .15s ease; } .card.big:hover .circle, .card.medium:hover .circle, .card.sm:hover .circle { background: var(--kk-accent); } .card.big:hover .circle .fa, .card.medium:hover .circle .fa, .card.sm:hover .circle .fa { color: #1a1410; } .card .circle .fa { color: var(--kk-accent-darker); } .card.big .card-body a, .card.big .card-body a:hover, .card.big .card-body a:focus { color: var(--kk-text); opacity: 1; text-decoration: none; } .card.big .card-body h4, .card.sm .card-body h4 { color: var(--kk-text); font-weight: 700; text-transform: none; letter-spacing: .01em; } .card.big .card-body p, .card.sm .card-body p { color: var(--kk-text-muted); font-size: .85rem; } /* ========================================================================== Przyciski — .btn i .btn-sm mają te same parametry, spójne kolory/hover/focus ========================================================================== */ .btn, .btn-sm, .btn-xs, .btn-sm-1 { font-family: inherit; font-size: .8rem; font-weight: 600; height: var(--kk-control-h); line-height: calc(var(--kk-control-h) - 2px); padding: 0 .95rem; border-width: 1px; border-radius: var(--kk-radius) !important; letter-spacing: .01em; text-transform: none; transition: background-color .15s ease, border-color .15s ease, box-shadow .15s ease, color .15s ease; } .btn:active { transform: translateY(1px); } .btn:focus, .btn.focus { outline: none; box-shadow: 0 0 0 .18rem var(--kk-accent-tint-strong); } .btn:disabled, .btn.disabled { opacity: .55; cursor: not-allowed; box-shadow: none; } .btn .fa { margin-right: .35rem; } .btn .fa:only-child { margin-right: 0; } .btn-primary { background: var(--kk-accent); border-color: var(--kk-accent); color: #1a1410; } .btn-primary:hover, .btn-primary:focus { background: var(--kk-accent-dark); border-color: var(--kk-accent-dark); color: #fff; } .badge-primary { background: #cc0000; color: #fff; } .btn-secondary { background: #5b6472; border-color: #5b6472; color: #fff; } .btn-secondary:hover, .btn-secondary:focus { background: #454c58; border-color: #454c58; color: #fff; } .btn-success { background: #2f9e63; border-color: #2f9e63; color: #fff; } .btn-success:hover, .btn-success:focus { background: #25824f; border-color: #25824f; color: #fff; } .btn-danger { background: #cc0000; border-color: #cc0000; color: #fff; } .btn-danger:hover, .btn-danger:focus { background: #a80000; border-color: #a80000; color: #fff; } .btn-warning { background: #e0a221; border-color: #e0a221; color: #3a2c05; } .btn-warning:hover, .btn-warning:focus { background: #c68812; border-color: #c68812; color: #3a2c05; } .btn-info { background: #3d7ea6; border-color: #3d7ea6; color: #fff; } .btn-info:hover, .btn-info:focus { background: #2f6483; border-color: #2f6483; color: #fff; } .btn-light { background: #f3f4f6; border-color: var(--kk-border); color: #3f4650; } .btn-light:hover, .btn-light:focus { background: #e7e9ed; border-color: var(--kk-border-strong); } .btn-dark { background: #20242b; border-color: #20242b; color: #fff; } .btn-dark:hover, .btn-dark:focus { background: #0f1116; border-color: #0f1116; } .btn-default, .card-header .btn-default, .card-footer .btn-default { background: #fff; border: 1px solid var(--kk-border-strong); color: var(--kk-text-muted); } .btn-default:hover, .btn-default:focus, .card-header .btn-default:hover, .card-footer .btn-default:hover { background: var(--kk-surface-soft); border-color: var(--kk-border-strong); color: var(--kk-text); } .btn-outline-primary, .btn-outline-danger { color: #cc0000; border-color: #cc0000; background: transparent; } .btn-outline-primary:hover, .btn-outline-danger:hover { background: #cc0000; color: #fff; } .btn-outline-secondary { color: #5b6472; border-color: var(--kk-border-strong); background: transparent; } .btn-outline-secondary:hover { background: #5b6472; border-color: #5b6472; color: #fff; } .btn-link { color: var(--kk-accent-dark); font-weight: 600; } .btn-link:hover { color: var(--kk-accent-darker); text-decoration: underline; } @media (max-width: 1700px) { .btn, .btn-sm, .btn-xs, .btn-sm-1 { padding: 0 .7rem; } } /* ========================================================================== Formularze ========================================================================== */ label { font-size: .68rem; letter-spacing: .04em; color: var(--kk-text-muted); word-break: normal; overflow-wrap: normal; hyphens: none; } .form-control { font-size: .875rem; padding: 0 .85rem; border: 1px solid var(--kk-border-strong); border-radius: var(--kk-radius-sm); background: #fff; color: var(--kk-text); transition: border-color .15s ease, box-shadow .15s ease; } .form-control:not(textarea):not(select[multiple]) { height: var(--kk-control-h); line-height: calc(var(--kk-control-h) - 2px); } .form-control:focus { border-color: var(--kk-accent); box-shadow: 0 0 0 .18rem var(--kk-accent-tint-strong); } textarea.form-control { padding: .55rem .85rem; } .input-group-text { background: #f3f4f6; border: 1px solid var(--kk-border-strong); } .input-group > .custom-file, .input-group > .custom-select, .input-group > .form-control { border: 1px solid var(--kk-border-strong); } .select2-container--default .select2-selection--single { border: 1px solid var(--kk-border-strong); border-radius: var(--kk-radius-sm); } /* ========================================================================== Formularze filtrów w wąskich kolumnach (np. col-lg-1) — poniżej tych szerokości etykiety typu "NR ZAMÓWIENIA" nie mieszczą się w kolumnie i łamią się w środku słowa. Wymuszamy minimalną szerokość kolumny, więc Bootstrapowy .row (flex-wrap) sam przenosi nadmiarowe pola do nowego wiersza. Skopowane do bezpośrednich kolumn formularza (form > .row > col-*), żeby nie ruszać zagnieżdżonych par "Od/Do" wewnątrz jednego form-group. ========================================================================== */ @media (max-width: 1900px) { form > .row > [class*="col-"] { min-width: 150px; } label { font-size: .64rem; } } @media (max-width: 1600px) { form > .row > [class*="col-"] { min-width: 130px; } label { font-size: .6rem; letter-spacing: .02em; } .form-control { padding-left: .6rem; padding-right: .6rem; } } /* ========================================================================== Tabele ========================================================================== */ .table { font-size: .875rem; } .table th, .table td { border-top: 1px solid var(--kk-border); vertical-align: middle; } .table thead th { border-bottom: 2px solid var(--kk-border); color: var(--kk-text-muted); font-weight: 700; text-transform: uppercase; font-size: .72rem; letter-spacing: .04em; background: var(--kk-surface-soft); } .card table.table th, .table-cell.table-header { color: var(--kk-text-muted); font-weight: 700; font-size: .72rem; border-bottom: 2px solid var(--kk-border); } .table-hover tbody tr:hover { background-color: var(--kk-accent-tint); } .table-responsive { border-radius: var(--kk-radius); } /* przyciski akcji w tabelach — zawsze kwadratowe, ikony wyśrodkowane, ta sama wielkość */ .table tr td .btn { width: var(--kk-table-btn-size); height: var(--kk-table-btn-size); padding: 0; display: inline-flex; align-items: center; justify-content: center; vertical-align: middle; flex: 0 0 auto; } .table tr td .btn + .btn { margin-left: .3rem; } .table tr td .btn .fa { font-size: .85rem; width: auto; height: auto; margin: 0; padding: 0; line-height: 1; text-align: center; } .badge { font-weight: 600; border-radius: var(--kk-radius-sm); } table .badge-pill, .badge-pill { border-radius: 50rem; } .pagination span { border-radius: var(--kk-radius-sm) !important; border-color: var(--kk-border-strong); transition: background-color .15s ease, color .15s ease; } .pagination span a:hover { color: var(--kk-accent-darker); } .page-item.active .page-link { background-color: var(--kk-accent-tint); border-color: var(--kk-accent); color: var(--kk-accent-darker); } /* ========================================================================== Dropdowny, tooltipy, alerty ========================================================================== */ .dropdown-menu { border: 1px solid var(--kk-border); border-radius: var(--kk-radius-sm); box-shadow: var(--kk-shadow-md); } .dropdown-menu .dropdown-item:hover, .dropdown-menu .dropdown-item:focus { background: var(--kk-accent-tint); color: var(--kk-accent-darker); } .tooltip-inner { border-radius: var(--kk-radius-sm); } .alert { border: none; border-left: 4px solid transparent; border-radius: var(--kk-radius-sm); font-size: .85rem; } .alert-danger { background: #fdecec; color: #8a1f1f; border-left-color: #cc0000; } .alert-success { background: #eaf7ef; color: #1f6b3d; border-left-color: #2f9e63; } /* ========================================================================== Komunikacja — lista wątków i czat (MessageThread / Message, front + admin) ========================================================================== */ .messaging { border-radius: var(--kk-radius); } .inbox_msg { border: 1px solid var(--kk-border); border-radius: var(--kk-radius); box-shadow: var(--kk-shadow-sm); overflow: hidden; } .inbox_people { background: var(--kk-surface); border-right: 1px solid var(--kk-border); } .headind_srch { border-bottom: 1px solid var(--kk-border); background: var(--kk-surface-soft); } .recent_heading h4 { font-size: 1.05rem; font-weight: 700; color: var(--kk-text); } .srch_bar input { border: 1px solid var(--kk-border-strong) !important; border-radius: var(--kk-radius-sm); padding: .4rem .6rem !important; background: #fff !important; transition: border-color .15s ease, box-shadow .15s ease; } .srch_bar input:focus { outline: none; border-color: var(--kk-accent) !important; box-shadow: 0 0 0 .15rem var(--kk-accent-tint-strong); } .srch_bar .btn { border-radius: var(--kk-radius-sm) !important; } .chat_list { transition: background-color .15s ease; cursor: pointer; } .chat_list:hover { background: var(--kk-surface-soft); } .chat_list.active_chat, .chat_list.active_chat:hover { background: var(--kk-accent-tint); } .chat_ib h5 { color: var(--kk-text); font-weight: 600; } .chat_ib p { color: var(--kk-text-muted); } .chat_list .badge-primary { background: #cc0000; } .mesgs { background: var(--kk-surface); } .received_withd_msg p { background: var(--kk-surface-soft); border: 1px solid var(--kk-border); color: var(--kk-text); border-radius: var(--kk-radius-sm) var(--kk-radius-sm) var(--kk-radius-sm) 4px; box-shadow: var(--kk-shadow-sm); } .sent_msg p { background: var(--kk-sidebar-bg); border-radius: var(--kk-radius-sm) var(--kk-radius-sm) 4px var(--kk-radius-sm); box-shadow: var(--kk-shadow-sm); } .time_date { color: var(--kk-text-muted); } .type_msg { border-top: 1px solid var(--kk-border); } .input_msg_write input, .input_msg_write textarea { color: var(--kk-text); } .input_msg_write input::placeholder, .input_msg_write textarea::placeholder { color: var(--kk-text-muted); } .msg_send_btn { background: #cc0000; width: 36px; height: 36px; transition: background-color .15s ease, transform .1s ease; } .msg_send_btn:hover { background: #a80000; } .msg_send_btn:active { transform: translateY(1px); } .msg_send_btn:focus { outline: none; box-shadow: 0 0 0 .18rem var(--kk-accent-tint-strong); } /* niestandardowa paginacja KnpPaginatorBundle (span, nie .page-item) */ .pagination span:not(.current) a:hover { color: var(--kk-accent-darker); } .pagination span.current { background: var(--kk-accent); border-color: var(--kk-accent); color: #1a1410; font-weight: 600; } /* ========================================================================== Logowanie (/login i /admin/login — ten sam markup i klasy w obu miejscach) ========================================================================== */ .bg-login:before { opacity: .72; background: linear-gradient(180deg, #0b0e13 0%, #1a1410 100%); } .card.login { background: linear-gradient(180deg, #14181f 0%, #0b0e13 100%) !important; border: 1px solid rgba(255, 255, 255, .08); box-shadow: var(--kk-shadow-lg); overflow: hidden; } .card.login .card-body, .card.login .card-footer { padding: 2rem 2.25rem; } .card.login .card-body > .row > .col-12 > p { font-size: .72rem; font-weight: 700; letter-spacing: .18em; color: var(--kk-accent) !important; opacity: 1; } .card.login .navbar-brand { margin-bottom: 1.75rem !important; } .card.login label { color: var(--kk-accent); } .card.login label.text-center { display: block; width: 100%; background: rgba(204, 0, 0, .15); border: 1px solid rgba(204, 0, 0, .35); color: #ff8a8a; text-transform: none; letter-spacing: normal; font-size: .8rem; font-weight: 500; padding: .6rem .85rem; border-radius: var(--kk-radius-sm); margin-bottom: 1rem; } .card.login .form-control { background: rgba(255, 255, 255, .96); border-color: rgba(255, 255, 255, .12); } .card.login .form-control:focus { background: #fff; border-color: var(--kk-accent); } .card.login .form-group.text-right a { color: rgba(255, 255, 255, .55); font-size: .8rem; transition: color .15s ease; } .card.login .form-group.text-right a:hover { color: var(--kk-accent); text-decoration: none; } .card.login .card-footer { background: rgba(255, 255, 255, .03); border-top: 1px solid rgba(255, 255, 255, .08); } .card.login .btn { height: 3.1rem; line-height: calc(3.1rem - 2px); font-size: 1rem; letter-spacing: .06em; } .card.login .btn-primary { background: var(--kk-accent); border: none; color: #1a1410; box-shadow: 0 8px 20px rgba(180, 140, 128, .3); } .card.login .btn-primary:hover, .card.login .btn-primary:focus { background: var(--kk-accent-dark); color: #fff; box-shadow: 0 10px 24px rgba(180, 140, 128, .4); } .card.login .btn .fa { color: inherit; font-size: 1rem; padding-left: .5rem; margin-right: 0; } /* ========================================================================== Kafelki dashboardu — generowane z drzewa KnpMenu (Menu/partials/dashboardCards.html.twig) ========================================================================== */ .dashboard-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(148px, 1fr)); gap: 1rem; margin: 1rem 0 .5rem; } .dashboard-card { position: relative; display: flex; flex-direction: column; align-items: center; text-align: center; gap: .55rem; padding: 1.6rem 1rem 1.3rem; background: var(--kk-surface); border: 1px solid var(--kk-border); border-radius: var(--kk-radius); box-shadow: var(--kk-shadow-sm); color: var(--kk-text); text-decoration: none; transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease; } .dashboard-card:hover, .dashboard-card:focus { transform: translateY(-3px); box-shadow: var(--kk-shadow-md); border-color: var(--kk-accent); color: var(--kk-text); text-decoration: none; } .dashboard-card-icon { width: 54px; height: 54px; flex: 0 0 auto; display: flex; align-items: center; justify-content: center; border-radius: 50%; background: var(--kk-accent-tint); color: var(--kk-accent-darker); font-size: 1.3rem; transition: background-color .15s ease, color .15s ease; } .dashboard-card:hover .dashboard-card-icon { background: var(--kk-accent); color: #1a1410; } .dashboard-card-group { font-size: .62rem; font-weight: 700; text-transform: uppercase; letter-spacing: .07em; color: var(--kk-text-muted); margin-top: -.2rem; } .dashboard-card-label { font-size: .85rem; font-weight: 600; line-height: 1.25; } .dashboard-card-badge { position: absolute; top: .65rem; right: .65rem; min-width: 20px; height: 20px; padding: 0 .35rem; display: flex; align-items: center; justify-content: center; border-radius: 50rem; background: #cc0000; color: #fff; font-size: .68rem; font-weight: 700; line-height: 1; } @media (max-width: 575px) { .dashboard-cards { grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); } } /* ========================================================================== CZĘŚĆ 3 — WARSTWA A1 Propozycja: nowoczesny, czytelny panel — lepsze oznaczenia na listach, w podglądzie i w edycji. Dobudowana na zmiennych --kk-* z CZĘŚCI 2. ========================================================================== */ :root { --kk-radius-lg: .9rem; --kk-surface-alt: #fbfaf9; --kk-info-bg: #f5f1ee; --kk-status-new: #3d7ea6; --kk-status-new-bg: #e9f2f8; --kk-status-progress: #c68812; --kk-status-progress-bg: #fbf1de; --kk-status-done: #2f9e63; --kk-status-done-bg: #e9f7ef; --kk-status-cancelled: #8a1f1f; --kk-status-cancelled-bg: #fdecec; --kk-status-neutral: #5b6472; --kk-status-neutral-bg: #eef0f2; } /* -------------------------------------------------------------------------- 3.1 Typografia i czytelność -------------------------------------------------------------------------- */ body, html { font-family: -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; line-height: 1.55; -webkit-font-smoothing: antialiased; } .table, .card-body, .card-footer { line-height: 1.5; } p { color: var(--kk-text); } small, .small { color: var(--kk-text-muted); } a:focus-visible, .btn:focus-visible, button:focus-visible, .form-control:focus-visible, input:focus-visible, select:focus-visible { outline: 2px solid var(--kk-accent); outline-offset: 2px; } h2, h3, h4, h5 { color: var(--kk-text); } h2.breadcrumbs { display: flex; align-items: center; gap: .4rem; } /* -------------------------------------------------------------------------- 3.2 Karty — więcej „oddechu”, spójny rytm sekcji -------------------------------------------------------------------------- */ .card { border-radius: var(--kk-radius-lg); box-shadow: var(--kk-shadow-sm); } .card-header:first-child { border-radius: calc(var(--kk-radius-lg) - 1px) calc(var(--kk-radius-lg) - 1px) 0 0; } .card-footer:last-child { border-radius: 0 0 calc(var(--kk-radius-lg) - 1px) calc(var(--kk-radius-lg) - 1px); } .card-header h5, .card-header h4 { font-weight: 600; letter-spacing: .01em; } /* nagłówki sekcji wewnątrz kart/formularzy (np. "Nabywca", "Adres dostawy", "Produkty", "Zamówienie") — akcentowana kreska z lewej zamiast gołego

*/ .card-body h3, form h3 { position: relative; font-size: .95rem; font-weight: 700; color: var(--kk-text); padding: .1rem 0 .1rem .75rem; margin: 1.75rem 0 1.1rem; border-left: 3px solid var(--kk-accent); } .card-body h3:first-child, form h3:first-child { margin-top: .25rem; } /* -------------------------------------------------------------------------- 3.3 Listy / tabele — czytelniejsze oznaczenia -------------------------------------------------------------------------- */ /* etykiety typu "Klub:", "Firma:", "planowana:", "Zamawiający:" — jako drobne, wersalikowe „kickery” zamiast zwykłego pogrubienia w linii tekstu */ .table td strong, .card-body .row strong { display: block; font-size: .66rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--kk-text-muted); margin-bottom: .15rem; } .table thead th a.sortable, .table thead th a.desc { color: inherit; transition: color .15s ease; } .table thead th a.sortable:hover, .table thead th a.desc:hover { color: var(--kk-accent-darker); } .table thead th .sort_arrow { margin-left: .25rem; opacity: .6; } .table-striped tbody tr:nth-of-type(odd) { background-color: var(--kk-surface-alt); } .table-hover tbody tr { transition: background-color .12s ease; } input.select_order, input[type="checkbox"], input[type="radio"] { accent-color: var(--kk-accent-dark); width: 16px; height: 16px; } /* przyciski akcji w tabelach — kolor = znaczenie akcji, żeby rozpoznać ją „na oko”, bez czytania etykiety (podgląd / edycja / usuwanie / inne) */ .table tr td .btn { border-radius: 50% !important; border-width: 1px; } .table tr td .btn-default { background: var(--kk-surface-soft); border-color: var(--kk-border-strong); color: var(--kk-text-muted); } .table tr td .btn-default:hover { background: #eceef1; color: var(--kk-text); } .table tr td .btn-secondary { background: var(--kk-status-new-bg); border-color: var(--kk-status-new-bg); color: var(--kk-status-new); } .table tr td .btn-secondary:hover { background: var(--kk-status-new); color: #fff; } .table tr td .btn-success { background: var(--kk-status-done-bg); border-color: var(--kk-status-done-bg); color: var(--kk-status-done); } .table tr td .btn-success:hover { background: var(--kk-status-done); color: #fff; } .table tr td .btn-warning { background: var(--kk-status-progress-bg); border-color: var(--kk-status-progress-bg); color: var(--kk-status-progress); } .table tr td .btn-warning:hover { background: var(--kk-status-progress); color: #fff; } .table tr td .btn-danger { background: var(--kk-status-cancelled-bg); border-color: var(--kk-status-cancelled-bg); color: var(--kk-status-cancelled); } .table tr td .btn-danger:hover { background: var(--kk-status-cancelled); color: #fff; } /* wiersz z rozwiniętymi dodatkowymi informacjami — akcent z lewej zamiast samego jaśniejszego tła, żeby było od razu widać że to wiersz „podrzędny” */ .table-active, .table-more-info { box-shadow: inset 3px 0 0 var(--kk-accent); } /* paginacja — czytelne „pigułki”, wyraźnie zaznaczona bieżąca strona */ .pagination { display: flex; gap: .25rem; align-items: center; } .pagination span { border-radius: 50rem !important; font-weight: 600; } .pagination span.current, .pagination span:not(.current):hover { box-shadow: var(--kk-shadow-sm); } /* -------------------------------------------------------------------------- 3.4 Odznaki statusów — gotowy zestaw klas do oznaczania stanu na listach i w podglądzie. Wystarczy owinąć istniejący tekst statusu, np.: W realizacji Tak Nazwy dopasowane do statusów zamówień (Nowe / W realizacji / Zrealizowane / Anulowane) oraz do pól "Aktywny" (Tak/Nie) w produktach i klubach. -------------------------------------------------------------------------- */ .badge-status { display: inline-flex; align-items: center; gap: .4rem; padding: .3rem .7rem; border-radius: 50rem; font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; background: var(--kk-status-neutral-bg); color: var(--kk-status-neutral); } .badge-status::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: currentColor; flex: 0 0 auto; } .badge-status.is-new { background: var(--kk-status-new-bg); color: var(--kk-status-new); } .badge-status.is-progress { background: var(--kk-status-progress-bg); color: var(--kk-status-progress); } .badge-status.is-done { background: var(--kk-status-done-bg); color: var(--kk-status-done); } .badge-status.is-cancelled { background: var(--kk-status-cancelled-bg); color: var(--kk-status-cancelled); } .badge-status.is-active { background: var(--kk-status-done-bg); color: var(--kk-status-done); } .badge-status.is-inactive { background: var(--kk-status-neutral-bg); color: var(--kk-status-neutral); } /* -------------------------------------------------------------------------- 3.5 Podgląd (widok szczegółów) — czytelne bloki informacyjne -------------------------------------------------------------------------- */ /* bloki danych w podglądzie zamówienia/klubu: kolumna zaczynająca się od Etykieta: zamieniona w kartę informacyjną z akcentem z lewej. Wzbogacenie progresywne (:has) — bez wsparcia przeglądarki dane wciąż są czytelne dzięki regule z pkt 3.3 (etykieta-kicker). */ .card-body > .row > [class*="col-"]:has(> strong:first-child) { background: var(--kk-info-bg); border-radius: var(--kk-radius-sm); padding: .9rem 1rem; box-shadow: inset 3px 0 0 var(--kk-accent); } .card-body > .row > [class*="col-"]:has(> strong:first-child) + [class*="col-"] { margin-left: .6rem; } .well { position: relative; padding: .9rem 1rem .9rem 1.1rem; box-shadow: inset 3px 0 0 var(--kk-accent); } .line span { color: var(--kk-text-muted); } /* podsumowanie w podglądzie zamówienia ("Wartość zamówienia:", "Planowana data dostawy:") — wyróżnione jako karta zamiast gołych

*/ .card-body > .row:has(> .col-sm-10.text-right) { background: var(--kk-surface-soft); border: 1px solid var(--kk-border); border-radius: var(--kk-radius-sm); padding: .6rem 1rem; margin: .5rem 0; } .card-body > .row:has(> .col-sm-10.text-right) h4 { margin: 0; font-size: 1rem; } .card-body > .row:has(> .col-sm-10.text-right) .col-sm-2 h4 { color: var(--kk-accent-darker); font-weight: 700; } /* -------------------------------------------------------------------------- 3.6 Edycja (formularze) — sekcje, pola wymagane, walidacja -------------------------------------------------------------------------- */ label.required { color: var(--kk-text-muted); } span.required, label .required { color: #cc0000; font-weight: 700; margin-left: .15rem; } .form-group { margin-bottom: 1rem; } .form-control:disabled, .form-control[readonly] { background: var(--kk-surface-soft); opacity: .8; } /* stany walidacji formularzy (klasy generowane przez Symfony form theme) */ .is-invalid, .form-control.is-invalid { border-color: var(--kk-status-cancelled) !important; } .is-invalid:focus { box-shadow: 0 0 0 .18rem rgba(204, 0, 0, .18) !important; } .invalid-feedback { display: block; font-size: .74rem; color: var(--kk-status-cancelled); margin-top: .25rem; } .is-valid, .form-control.is-valid { border-color: var(--kk-status-done) !important; } .form-check-label { text-transform: none; font-size: .8rem; letter-spacing: normal; font-weight: 400; color: var(--kk-text); } /* select2 / datetimepicker — spójne z resztą formularza także w stanie otwartym */ .select2-container--default.select2-container--open .select2-selection--single { border-color: var(--kk-accent) !important; box-shadow: 0 0 0 .18rem var(--kk-accent-tint-strong); } .bootstrap-datetimepicker-widget { box-shadow: var(--kk-shadow-md); border: none !important; border-radius: var(--kk-radius-sm); overflow: hidden; } .bootstrap-datetimepicker-widget table td.active, .bootstrap-datetimepicker-widget table td.active:hover { background: var(--kk-accent) !important; } /* stopka formularza z akcjami (zapisz / anuluj) — lekko oddzielona od treści */ .card-footer .row-akcje { align-items: flex-end; } .card-footer { box-shadow: inset 0 1px 0 rgba(0, 0, 0, .05); } @media (min-width: 992px) { .card-footer .row-akcje .btn-block { width: auto; } } /* ========================================================================== CZĘŚĆ 4 — Jasna wersja panelu: sidebar + header, oraz przełącznik motywu Punkt wyjścia do dopracowania trybu ciemnego w kolejnym kroku. Lewe menu w trybie jasnym jest białe (nie czarne) — patrz sekcja 4.3. ========================================================================== */ :root { --kk-sidebar-bg: #ffffff; --kk-sidebar-border: #ece5e0; --kk-sidebar-text: #57514c; --kk-sidebar-text-muted: #9c948d; --kk-sidebar-heading: #b7ada4; --kk-sidebar-hover-bg: var(--kk-accent-tint); --kk-sidebar-active-bg: var(--kk-accent); --kk-sidebar-active-text: #ffffff; --kk-sidebar-icon-bg: var(--kk-accent-tint); --kk-header-bg: #ffffff; --kk-header-border: #ece5e0; --kk-header-text: var(--kk-text); --kk-header-icon-bg: #f6f2ef; --kk-header-icon-hover-bg: var(--kk-accent-tint); } /* pierwszy zarys trybu ciemnego — do dopracowania w kolejnym kroku */ [data-theme="dark"] { --kk-bg: #14161a; --kk-surface: #1b1e24; --kk-surface-soft: #20242b; --kk-surface-alt: #1e2229; --kk-info-bg: #232830; --kk-border: #2b2f37; --kk-border-strong: #383d46; --kk-text: #e8e9ec; --kk-text-muted: #9aa1ab; --kk-sidebar-bg: #0f1116; --kk-sidebar-border: #23262d; --kk-sidebar-text: #c7cad0; --kk-sidebar-text-muted: #767c87; --kk-sidebar-heading: #5c6169; --kk-sidebar-hover-bg: rgba(255, 255, 255, .06); --kk-sidebar-active-text: #1a1410; --kk-sidebar-icon-bg: rgba(255, 255, 255, .08); --kk-header-bg: #15171c; --kk-header-border: #242830; --kk-header-icon-bg: #1e222a; --kk-header-icon-hover-bg: rgba(180, 140, 128, .18); } /* -------------------------------------------------------------------------- 4.1 Tło aplikacji — podążają za motywem -------------------------------------------------------------------------- */ body, html { background-color: var(--kk-bg); } .form-control { background: var(--kk-surface); } .dropdown-menu { background: var(--kk-surface); } .tooltip-inner { background-color: var(--kk-surface); color: var(--kk-text); } .input-group-text { background: var(--kk-surface-soft); border-color: var(--kk-border-strong); } .pagination span { background: var(--kk-surface); border-color: var(--kk-border-strong); color: var(--kk-text-muted); } .btn-default, .card-header .btn-default, .card-footer .btn-default { background: var(--kk-surface); } /* okruszki (breadcrumb) nad kartą — Bootstrap zostawiał tu twarde jasne tło */ .breadcrumb { background: var(--kk-surface-alt); border: 1px solid var(--kk-border); border-radius: var(--kk-radius-sm); padding: .55rem 1rem; } .breadcrumb-item, .breadcrumb-item a { color: var(--kk-text-muted); } .breadcrumb-item a:hover { color: var(--kk-accent); text-decoration: none; } .breadcrumb-item.active { color: var(--kk-text); font-weight: 600; } .breadcrumb-item + .breadcrumb-item::before { color: var(--kk-text-muted); } /* -------------------------------------------------------------------------- 4.2 Header (.fixed-top) — jasny, czytelny pasek górny -------------------------------------------------------------------------- */ .fixed-top { background: var(--kk-header-bg) !important; box-shadow: 0 1px 0 var(--kk-header-border); } .fixed-top .text-light { color: var(--kk-header-text) !important; } .fixed-top h1 { color: var(--kk-header-text); font-weight: 600; text-transform: none; letter-spacing: normal; font-size: 1.1rem; } nav h1.mail-title { color: var(--kk-header-text); } /* select/input w jasnym headerze (np. przełącznik klubu "- WYBIERZ KLUB -") dziedziczyły styl z myślą o ciemnym pasku (biały tekst na przezroczystym tle) — po rozjaśnieniu headera stawały się nieczytelne w stanie domyślnym, widoczne dopiero po kliknięciu (:focus). Zamiana na tokeny motywu naprawia to w obu trybach (jasnym i ciemnym). */ .navbar .form-control { background: var(--kk-surface) !important; color: var(--kk-text) !important; border-color: var(--kk-border-strong) !important; } .navbar .form-control::placeholder { color: var(--kk-text-muted) !important; } .navbar .form-control option { background: var(--kk-surface); color: var(--kk-text); } #toggle-sidebar { color: var(--kk-text-muted) !important; } .navbar-toggler .fa { color: var(--kk-text-muted); } #sidesetigs .nav-item { margin: 0 .2rem; } #sidesetigs .nav-item .nav-link { background: var(--kk-header-icon-bg); color: var(--kk-text-muted); border-radius: var(--kk-radius-sm); } #sidesetigs .nav-item .nav-link .fa { color: inherit; } #sidesetigs .nav-item .nav-link small { color: inherit; } #sidesetigs .nav-item .nav-link:hover { background: var(--kk-header-icon-hover-bg); color: var(--kk-accent-darker); } #sidesetigs .nav-item.disabled .nav-link { color: var(--kk-border-strong); } #sidesetigs .nav-item.disabled .nav-link:hover { background: var(--kk-header-icon-bg); color: var(--kk-border-strong); } /* przełącznik jasny / ciemny — ikona księżyca/słońca w headerze */ .theme-toggle { border: none; cursor: pointer; font: inherit; } .theme-toggle .icon-sun { display: none; } [data-theme="dark"] .theme-toggle .icon-moon { display: none; } [data-theme="dark"] .theme-toggle .icon-sun { display: inline-block; } /* -------------------------------------------------------------------------- 4.3 Lewe menu (sidebar) — pełny redesign, jasne tło (nigdy czarne) -------------------------------------------------------------------------- */ .sidebar { background: var(--kk-sidebar-bg); border-right: 1px solid var(--kk-sidebar-border); box-shadow: none; } .sidebar .logo { margin-top: 0; } /* logo to biały PNG — na jasnym tle (sidebar + mobilny header panelu) zamieniamy je filtrem na czarne; w trybie ciemnym wraca do bieli. Nie dotyczy loginu (.card.login ma zawsze ciemne tło, więc białe logo tam zostaje białe) — stąd zawężenie do .fixed-top .navbar-brand. */ .sidebar .logo img, .fixed-top .navbar-brand img { filter: brightness(0); } [data-theme="dark"] .sidebar .logo img, [data-theme="dark"] .fixed-top .navbar-brand img { filter: none; } .sidebar-header { border-bottom: 1px solid var(--kk-sidebar-border); } .sidebar-collapse-toggle { background: var(--kk-surface); border-color: var(--kk-sidebar-border); color: var(--kk-accent-darker); } .sidebar-collapse-toggle:hover { background: var(--kk-accent); } .sidebar-collapse-toggle:hover .hamburger-bar { background: #fff; } .sidebar-collapse-toggle .hamburger-bar { background: var(--kk-accent-darker); } .sidebar-heading span { color: var(--kk-sidebar-heading); font-weight: 700; } /* pozycje menu — bez linii dzielących, za to spójny odstęp i zaokrąglenie */ .sidebar .nav-link { color: var(--kk-sidebar-text); font-size: .86rem; font-weight: 500; padding: .62rem .85rem; margin: .12rem .65rem; border-bottom: none; border-radius: .65rem; transition: background-color .15s ease, color .15s ease; } .sidebar .mb-2 .nav-link { color: var(--kk-sidebar-text-muted); } /* ikona w miękkim, zaokrąglonym chipie zamiast obrysowanego kółka na czarnym tle */ .sidebar .nav-link .fa { color: var(--kk-accent-darker); background: var(--kk-sidebar-icon-bg); border: none; width: 30px; height: 30px; line-height: 30px; font-size: .8rem; margin-right: .7rem; transition: background-color .15s ease, color .15s ease; } .sidebar .nav-link:hover { background: var(--kk-sidebar-hover-bg); color: var(--kk-accent-darker); } .sidebar .nav-link:hover .fa { background: var(--kk-accent); color: #fff; } /* stan aktywny — wypełniona pigułka w kolorze akcentu */ .sidebar .active .nav-link { background: var(--kk-sidebar-active-bg); color: var(--kk-sidebar-active-text); font-weight: 600; box-shadow: var(--kk-shadow-sm); } .sidebar .active .nav-link .fa { background: rgba(255, 255, 255, .3); color: #fff; } .sidebar .nav-item .active ul .nav-link { background: transparent; } /* -------------------------------------------------------------------------- 4.4 Rozwinięte sekcje (podmenu) — czytelne wcięcie zamiast kropek na linii -------------------------------------------------------------------------- */ .sidebar .nav-item ul { margin: .1rem 0 .35rem; padding-left: 1.55rem; border-left: 1px solid var(--kk-sidebar-border); margin-left: 1.55rem; } .sidebar .nav-item ul .nav-link { background: transparent; color: var(--kk-sidebar-text-muted); font-size: .8rem; font-weight: 500; padding: .5rem .75rem; margin: .05rem .65rem .05rem 0; border-radius: .55rem; } .sidebar .nav-item ul .nav-link:before { content: none; } .sidebar ul ul .nav-item .nav-link:before { content: none; } .sidebar .nav-item ul .nav-link .fa { width: 20px; height: 20px; line-height: 20px; font-size: .68rem; background: transparent; color: var(--kk-sidebar-text-muted); margin-right: .55rem; } .sidebar .nav-item ul .nav-link:hover { background: var(--kk-sidebar-hover-bg); color: var(--kk-accent-darker); } .sidebar .nav-item ul .nav-link:hover .fa { color: var(--kk-accent-darker); } .sidebar .nav-item ul .active .nav-link, .sidebar .nav-item.active ul .active .nav-link { background: var(--kk-accent-tint-strong); color: var(--kk-accent-darker); font-weight: 700; } .sidebar .nav-item ul .active .nav-link .fa, .sidebar .nav-item.active ul .active .nav-link .fa { background: transparent; color: var(--kk-accent-darker); } @media screen and (max-width: 767px) { .sidebar { border-right: none; border-bottom: 1px solid var(--kk-sidebar-border); } } /* ========================================================================== CZESC 6 -- Ekran logowania: podzial na pol (formularz / zdjecie) Zawsze ciemny, niezaleznie od przelacznika motywu (login nie ma toggle'a). ========================================================================== */ .login-shell { display: flex; min-height: 100vh; } .login-pane-form { flex: 0 0 44%; max-width: 44%; display: flex; align-items: center; justify-content: center; padding: 3rem 2rem; background: #0b0e13; } .login-pane-photo { flex: 1 1 auto; position: relative; background-size: cover; background-position: center; } .login-pane-photo:before { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(11, 14, 19, .25) 0%, rgba(11, 14, 19, .65) 100%); } .login-form-box { width: 100%; max-width: 360px; } .login-logo { display: block; text-align: center; margin-bottom: 1.5rem; } .login-logo img { height: 94px; width: auto; } .login-eyebrow { text-align: center; color: var(--kk-accent); font-size: .72rem; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; margin-bottom: 2rem; } .login-form-box label { color: var(--kk-accent); } .login-form-box .form-control { background: rgba(255, 255, 255, .96); border-color: rgba(255, 255, 255, .12); } .login-form-box .form-control:focus { background: #fff; border-color: var(--kk-accent); box-shadow: 0 0 0 .18rem var(--kk-accent-tint-strong); } .login-submit { height: 3.1rem; line-height: calc(3.1rem - 2px); font-size: 1rem; letter-spacing: .06em; margin-top: .5rem; box-shadow: 0 8px 20px rgba(180, 140, 128, .3); } @media (max-width: 900px) { .login-pane-photo { display: none; } .login-pane-form { flex: 1 1 100%; max-width: 100%; } } /* ========================================================================== Dashboard — widgety: zamówienia / rozliczenia (3 miesiące) + wykres porównawczy. Dokłada się pod siatką kafelków modułów (.dashboard-cards), jako osobny wiersz w .startPanel. Kolory czerpią z istniejących tokenów --kk-accent / --kk-status-*, więc automatycznie dopasowują się do kolorystyki tej wersji (v1/v2/v3) bez dodatkowych zmian. ========================================================================== */ .dashboard-widgets-row > [class*="col-"] { min-width: 0; } .widget-card .card-body { padding: 1.1rem 1.35rem; } .widget-stat-list { display: flex; flex-direction: column; } .widget-stat-row { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; gap: .5rem 1rem; padding: .85rem 0; } .widget-stat-row + .widget-stat-row { border-top: 1px solid var(--kk-border); } .widget-stat-list .widget-stat-row:first-child { padding-top: 0; } .widget-stat-month { display: flex; flex-direction: column; min-width: 0; } .widget-stat-month-name { font-weight: 600; color: var(--kk-text); font-size: .88rem; } .widget-stat-month-sub { font-size: .72rem; color: var(--kk-text-muted); } .widget-stat-amount { font-weight: 700; font-size: .95rem; color: var(--kk-text); text-align: right; white-space: nowrap; } .widget-stat-trend { display: inline-flex; align-items: center; gap: .3rem; font-size: .68rem; font-weight: 700; padding: .25rem .55rem; border-radius: 50rem; white-space: nowrap; background: var(--kk-status-neutral-bg); color: var(--kk-status-neutral); } .widget-stat-trend .fa { font-size: .62rem; } .widget-stat-trend.is-up { background: var(--kk-status-done-bg); color: var(--kk-status-done); } .widget-stat-trend.is-down { background: var(--kk-status-cancelled-bg); color: var(--kk-status-cancelled); } .widget-stat-trend.is-flat { background: var(--kk-status-progress-bg); color: var(--kk-status-progress); } .widget-stat-bar { grid-column: 1 / -1; height: 6px; border-radius: 50rem; background: var(--kk-surface-soft); overflow: hidden; } .widget-stat-bar-fill { display: block; height: 100%; border-radius: 50rem; background-image: linear-gradient(90deg, var(--kk-accent), var(--kk-accent-dark)); } .widget-stat-bar-fill.is-alt { background-image: linear-gradient(90deg, var(--kk-status-new), #2f6483); } .widget-summary-total { display: flex; align-items: baseline; justify-content: space-between; margin-top: 1rem; padding-top: 1rem; border-top: 1px dashed var(--kk-border); font-size: .8rem; color: var(--kk-text-muted); } .widget-summary-total strong { color: var(--kk-text); font-size: 1.1rem; margin-left: .4rem; } .widget-chart-card .card-body { padding: 1.1rem 1.35rem 1.4rem; } .widget-chart-legend { display: flex; gap: 1.25rem; margin-bottom: .75rem; font-size: .78rem; color: var(--kk-text-muted); } .widget-chart-legend .dot { width: 10px; height: 10px; margin: 0 .4rem 0 0; vertical-align: 1px; } .widget-chart { display: block; width: 100%; height: auto; } .widget-chart .chart-axis { stroke: var(--kk-border-strong); stroke-width: 1; } .widget-chart .chart-bar { transition: opacity .15s ease; } .widget-chart .chart-bar:hover { opacity: .75; } .widget-chart .chart-bar.is-orders { fill: var(--kk-accent); } .widget-chart .chart-bar.is-billed { fill: var(--kk-status-new); } .widget-chart .chart-label { fill: var(--kk-text-muted); font-size: 10px; font-family: inherit; } @media (max-width: 575px) { .widget-stat-row { grid-template-columns: 1fr; } .widget-stat-amount { text-align: left; } }