/* Site-wide theme: the warm cream / burgundy / gold look of the booking pages, applied to the older Bootstrap 3 markup (navbar, tabs, tables, forms, buttons, DataTables, dialogs) without touching the HTML. Everything is scoped under .sb-theme (the class), so it only restyles, never restructures. */ .sb-theme { --t-ink: #241F1B; --t-muted: #6B6259; --t-soft: #8A7F73; --t-line: #EAE2D5; --t-input-line: #D8CFC2; --t-burgundy: #6B1E23; --t-burgundy-dark: #55181C; --t-accent: #B3542E; --t-gold: #D9A544; --t-gold-dark: #B3862B; --t-danger: #B3261E; --t-display: "Fraunces", Georgia, "Times New Roman", serif; background: #F6F2EC; color: var(--t-ink); font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; } .sb-theme h1, .sb-theme h2, .sb-theme h3, .sb-theme h4, .sb-theme legend { font-family: var(--t-display); color: var(--t-ink); } .sb-theme legend { border-bottom: 1px solid var(--t-line); font-size: 22px; font-weight: 600; } .sb-theme a { color: var(--t-accent); } .sb-theme a:hover, .sb-theme a:focus { color: #8F3F1F; } .sb-theme hr { border-top-color: var(--t-line); } .sb-theme .body-content { padding-top: 20px; } .sb-theme footer, .sb-theme footer p { color: var(--t-soft); font-size: 13px; } /* ---- Navbar ---- */ .sb-theme .navbar-inverse { background: linear-gradient(180deg, #3B1418 0%, #591B21 100%); border-color: #3B1418; } .sb-theme .navbar-inverse .navbar-brand { color: #F6F2EC; font-family: var(--t-display); font-weight: 600; letter-spacing: 0.01em; } .sb-theme .navbar-inverse .navbar-brand:hover, .sb-theme .navbar-inverse .navbar-brand:focus { color: #fff; } .sb-theme .navbar-inverse .navbar-nav > li > a { color: #E5D9CC; } .sb-theme .navbar-inverse .navbar-nav > li > a:hover, .sb-theme .navbar-inverse .navbar-nav > li > a:focus { color: #fff; background: transparent; } .sb-theme .navbar-inverse .navbar-toggle { border-color: rgba(246, 242, 236, 0.4); } .sb-theme .navbar-inverse .navbar-toggle:hover, .sb-theme .navbar-inverse .navbar-toggle:focus { background: rgba(246, 242, 236, 0.12); } .sb-theme .navbar-inverse .navbar-toggle .icon-bar { background-color: #F6F2EC; } /* ---- Buttons ---- */ .sb-theme .btn, .sb-theme .btn-sm, .sb-theme .btn-lg { border-radius: 10px; font-weight: 600; } .sb-theme .btn-sm { border-radius: 8px; } .sb-theme .btn-default { background: #fff; border-color: var(--t-input-line); color: var(--t-ink); } .sb-theme .btn-default:hover, .sb-theme .btn-default:focus, .sb-theme .btn-default:active { background: #F6F2EC; border-color: var(--t-input-line); color: var(--t-ink); } .sb-theme .btn-primary { background: var(--t-burgundy); border-color: var(--t-burgundy); color: #F6F2EC; } .sb-theme .btn-primary:hover, .sb-theme .btn-primary:focus, .sb-theme .btn-primary:active { background: var(--t-burgundy-dark); border-color: var(--t-burgundy-dark); color: #F6F2EC; } .sb-theme .btn-success { background: var(--t-gold); border-color: var(--t-gold-dark); color: #2A1F06; } .sb-theme .btn-success:hover, .sb-theme .btn-success:focus, .sb-theme .btn-success:active { background: #C8952F; border-color: var(--t-gold-dark); color: #2A1F06; } .sb-theme .btn-warning, .sb-theme .btn-info { background: #FBF3E1; border-color: #EFD9A4; color: #7A5A12; } .sb-theme .btn-warning:hover, .sb-theme .btn-warning:focus, .sb-theme .btn-warning:active, .sb-theme .btn-info:hover, .sb-theme .btn-info:focus, .sb-theme .btn-info:active { background: #F6E7BF; border-color: #E5C97E; color: #7A5A12; } .sb-theme .btn-info { background: #E7EEF2; border-color: #B9C6CD; color: #35424A; } .sb-theme .btn-info:hover, .sb-theme .btn-info:focus, .sb-theme .btn-info:active { background: #D5E1E8; border-color: #9FB1BB; color: #35424A; } .sb-theme .btn-danger, .sb-theme .btn-danger2 { background: var(--t-danger); border-color: #8F1E18; color: #fff; } .sb-theme .btn-danger:hover, .sb-theme .btn-danger:focus, .sb-theme .btn-danger:active, .sb-theme .btn-danger2:hover, .sb-theme .btn-danger2:focus, .sb-theme .btn-danger2:active { background: #8F1E18; border-color: #6E1712; color: #fff; } /* Flat buttons: drop the old gradients, inset shadows and heavy borders */ .sb-theme .btn, .sb-theme .btn-default, .sb-theme .btn-primary, .sb-theme .btn-success, .sb-theme .btn-warning, .sb-theme .btn-info, .sb-theme .btn-danger, .sb-theme .btn-danger2 { background-image: none; text-shadow: none; box-shadow: none; border-width: 1px; border-style: solid; } /* Submit buttons on the older forms (log in, register, change password) are the main action */ .sb-theme input[type="submit"].btn-default { background: var(--t-burgundy); border-color: var(--t-burgundy); color: #F6F2EC; } .sb-theme input[type="submit"].btn-default:hover, .sb-theme input[type="submit"].btn-default:focus { background: var(--t-burgundy-dark); border-color: var(--t-burgundy-dark); color: #F6F2EC; } /* The older links styled as buttons (btn-sm / btn-lg with only a colour class) */ .sb-theme a.btn-sm, .sb-theme a.btn-lg, .sb-theme .btn-sm.btn-warning, .sb-theme .btn-sm.btn-success, .sb-theme .btn-sm.btn-info, .sb-theme .btn-sm.btn-danger2, .sb-theme .btn-lg.btn-warning, .sb-theme .btn-lg.btn-success { text-decoration: none; } /* ---- Tabs ---- */ .sb-theme .nav-tabs { border-bottom-color: var(--t-line); } .sb-theme .nav-tabs > li > a { color: var(--t-muted); border-radius: 10px 10px 0 0; font-weight: 600; } .sb-theme .nav-tabs > li > a:hover { background: #fff; border-color: var(--t-line) var(--t-line) transparent; color: var(--t-burgundy); } .sb-theme .nav-tabs > li.active > a, .sb-theme .nav-tabs > li.active > a:hover, .sb-theme .nav-tabs > li.active > a:focus { color: var(--t-burgundy); background: #fff; border-color: var(--t-line) var(--t-line) transparent; } .sb-theme .tab-content { background: #fff; border: 1px solid var(--t-line); border-top: 0; border-radius: 0 0 16px 16px; padding: 8px 24px 28px; } .sb-theme .tab-content .container { width: auto; max-width: none; padding-left: 0; padding-right: 0; } .sb-theme .tab-content .container > .row { margin-left: 0; margin-right: 0; } .sb-theme .tab-content .tab-content { border: 0; padding: 0; background: transparent; border-radius: 0; } /* ---- Tables (Bootstrap and DataTables) ---- */ .sb-theme .table > thead > tr > th { border-bottom: 2px solid var(--t-line); color: var(--t-muted); font-size: 13px; } .sb-theme .table > tbody > tr > td, .sb-theme .table > tbody > tr > th { border-top-color: var(--t-line); vertical-align: middle; } .sb-theme .table-bordered, .sb-theme .table-bordered > thead > tr > th, .sb-theme .table-bordered > tbody > tr > td { border-color: var(--t-line); } .sb-theme .table-striped > tbody > tr:nth-of-type(odd) { background: #FBF8F3; } .sb-theme table.dataTable { border-color: var(--t-line); } .sb-theme table.dataTable thead th, .sb-theme table.dataTable thead td { border-bottom: 2px solid var(--t-line); } .sb-theme table.dataTable.hover tbody tr:hover, .sb-theme table.dataTable.display tbody tr:hover { background-color: #FBF3E1; } .sb-theme table.dataTable tbody > tr.selected, .sb-theme table.dataTable tbody > tr > .selected { background-color: #F6E7BF !important; color: var(--t-ink) !important; } .sb-theme table.dataTable tbody td.select-checkbox:before, .sb-theme table.dataTable tbody th.select-checkbox:before { border-color: var(--t-input-line); } .sb-theme .dataTables_wrapper .dataTables_filter input, .sb-theme .dataTables_wrapper .dataTables_length select { border: 1px solid var(--t-input-line); border-radius: 8px; padding: 4px 8px; background: #fff; } .sb-theme .dataTables_wrapper .dataTables_info, .sb-theme .dataTables_wrapper .dataTables_length, .sb-theme .dataTables_wrapper .dataTables_filter { color: var(--t-muted); } .sb-theme .dataTables_wrapper .dataTables_paginate .paginate_button { border-radius: 8px; color: var(--t-muted) !important; } .sb-theme .dataTables_wrapper .dataTables_paginate .paginate_button:hover { background: #FBF3E1; border-color: #EFD9A4; color: #7A5A12 !important; } .sb-theme .dataTables_wrapper .dataTables_paginate .paginate_button.current, .sb-theme .dataTables_wrapper .dataTables_paginate .paginate_button.current:hover { background: var(--t-burgundy); border: 1px solid var(--t-burgundy); color: #F6F2EC !important; } .sb-theme .dt-button, .sb-theme button.dt-button, .sb-theme div.dt-button, .sb-theme a.dt-button { background: #fff; background-image: none; border: 1px solid var(--t-input-line); border-radius: 8px; color: var(--t-ink); font-weight: 600; } .sb-theme button.dt-button:hover:not(.disabled), .sb-theme a.dt-button:hover:not(.disabled) { background: #F6F2EC; background-image: none; border-color: var(--t-input-line); } /* ---- Forms ---- */ .sb-theme .form-control { border: 1px solid var(--t-input-line); border-radius: 9px; box-shadow: none; color: var(--t-ink); height: 38px; } .sb-theme textarea.form-control { height: auto; } .sb-theme .form-control:focus { border-color: var(--t-accent); box-shadow: 0 0 0 2px rgba(179, 84, 46, 0.18); } .sb-theme .control-label, .sb-theme .form-horizontal .control-label { font-weight: 600; color: #4A423A; } .sb-theme .input-group-addon { border: 1px solid var(--t-input-line); background: #F6F2EC; color: var(--t-muted); border-radius: 0 9px 9px 0; } .sb-theme .input-group .form-control:first-child { border-radius: 9px 0 0 9px; } .sb-theme .field-validation-error, .sb-theme .text-danger { color: var(--t-danger); } .sb-theme .validation-summary-errors ul { padding-left: 18px; } /* The start page text boxes: full width (the old Site.css caps every textarea at 280px), tall enough to show it all */ .sb-theme .home-text-block textarea.form-control { width: 100%; max-width: 100%; min-height: 250px; line-height: 1.5; } /* The stand-alone login / register / password forms read as a card */ .sb-theme #loginForm { background: #fff; border: 1px solid var(--t-line); border-radius: 16px; padding: 8px 28px 20px; } /* ---- Dialogs (bootbox) and date picker ---- */ .sb-theme .modal-content { border: 1px solid var(--t-line); border-radius: 16px; box-shadow: 0 12px 40px rgba(36, 31, 27, 0.25); } .sb-theme .modal-header { border-bottom-color: var(--t-line); } .sb-theme .modal-footer { border-top-color: var(--t-line); } .sb-theme .bootstrap-datetimepicker-widget table td.active, .sb-theme .bootstrap-datetimepicker-widget table td.active:hover { background-color: var(--t-burgundy); text-shadow: none; } .sb-theme .bootstrap-datetimepicker-widget table td.today:before { border-bottom-color: var(--t-gold); } .sb-theme .bootstrap-datetimepicker-widget table td span.active { background-color: var(--t-burgundy); } .sb-theme .bootstrap-datetimepicker-widget a[data-action] { color: var(--t-burgundy); } /* ---- Small things ---- */ .sb-theme .alert-danger { background: #FBECEA; border-color: #E9C3BF; color: #8A1F17; border-radius: 12px; } .sb-theme .alert-success { border-radius: 12px; } .sb-theme .lead { color: var(--t-muted); } .sb-theme .jumbotron { background: #fff; border: 1px solid var(--t-line); border-radius: 16px; } /* Phones: the fixed navbar grows tall (title + user + log off) and hid the top of every page, so let it scroll away with the page. */ @media (max-width: 767px) { .sb-theme { padding-top: 0; } .sb-theme .navbar-fixed-top { position: static; margin-bottom: 0; } } /* Admin action buttons under the reservation table: wrap and keep a gap instead of spilling out of the page on a narrow screen. */ .sb-theme #DeleteReservationSelected, .sb-theme #CheckInChosenSeats, .sb-theme #CheckInSeats { display: inline-block; white-space: normal; text-align: center; margin: 0 6px 8px 0; } /* Those links have no .btn class, so they were plain inline text: a wrapped second line ran over the first. Inline-block gives them a real box, and on a phone each gets its own full-width row. */ @media (max-width: 767px) { .sb-theme #DeleteReservationSelected, .sb-theme #CheckInChosenSeats, .sb-theme #CheckInSeats { display: block; width: 100%; margin-right: 0; } } /* Link-buttons inside table cells (Checka ut / Avboka, Göm föreställning / Ta bort): same inline-text problem as above, so a wrapped button ran over its neighbour. Give them a box and keep the buttons of a cell side by side (the table scrolls sideways if it must). */ .sb-theme a.btn-sm { display: inline-block; margin: 2px 4px 2px 0; } .sb-theme td:has(> a.btn-sm) { white-space: nowrap; } /* Wide tables (the nowrap action buttons make them wider than a phone) must scroll inside their own box (phones only: on a desktop the table fits, and the box would just add a stray scrollbar). Otherwise the whole page becomes wider than the screen, and the now non-fixed navbar (only as wide as the screen) ends halfway across it when you scroll sideways. */ @media (max-width: 767px) { .sb-theme .dataTables_wrapper { overflow-x: auto; -webkit-overflow-scrolling: touch; } } /* Phones: a table marked .sb-stack shows each row as a small card (label above value) instead of columns that run off the screen. Needs data-label on every td; the header row is hidden. */ @media (max-width: 767px) { .sb-theme table.sb-stack, .sb-theme table.sb-stack tbody, .sb-theme table.sb-stack tr, .sb-theme table.sb-stack td { display: block; width: 100% !important; } .sb-theme table.sb-stack thead, .sb-theme table.sb-stack colgroup { display: none; } .sb-theme table.sb-stack tr { border: 1px solid var(--t-line); border-radius: 10px; margin-bottom: 12px; padding: 4px 0; background: #fff; } .sb-theme table.sb-stack td { border: 0; padding: 6px 14px; white-space: normal; } .sb-theme table.sb-stack td::before { content: attr(data-label); display: block; font-size: 11px; font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase; color: var(--t-soft); margin-bottom: 2px; } .sb-theme table.sb-stack td:has(> a.btn-sm) { white-space: normal; } }