haldis/app/static/css/main.css
Midgard 1ff8ceb521
Improve design
Remove main CSS from shop view page. Make it theme independent and
maximize contrast.

Improve spacing in "add item" list.

Refactor old term "showcase" to "shop_view" in code.
2021-07-24 17:51:25 +02:00

246 lines
4.9 KiB
CSS

:root {
/* Darkmode colors */
--gray0: #d0d0d8;
--gray1: #8e8e93;
--gray2: #636366;
--gray3: #48484a;
--gray4: #3a3a3c;
--gray5: #2c2c2e;
--gray6: #1c1c1e;
--accent: #0a84ff;
--bg: #2c2c2e;
--navbarBg: #1c1c1e;
--fontFamily: "Roboto","Helvetica Neue",Helvetica,Arial,sans-serif;
--fontSize: 13px;
}
html {
height: 100%;
}
body {
padding-top: 70px;
background-color: var(--bg);
color: var(--gray1);
height: 100%;
font-family: var(--fontFamily);
font-size: var(--fontSize);
}
.background {
position: absolute;
z-index: -1000;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-size: cover;
background-repeat: no-repeat;
background-position: center;
-webkit-filter: blur(2px) brightness(50%);
-moz-filter: blur(2px) brightness(50%);
-o-filter: blur(2px) brightness(50%);
-ms-filter: blur(2px) brightness(50%);
filter: blur(2px) brightness(50%);
}
.padding-top {
padding-top: 10px;
}
@media (min-width: 992px) {
.align-bottom {
margin-top: 2.5em;
}
}
.full-width {
width: 100%;
}
.time_data{
display: flex;
justify-content: space-between;
}
@media(min-width: 768px) and (max-width: 991px){
/* Make sure the small map in the location page has the same with as the block above */
.sm-no-side-padding {
padding-left: 0px;
padding-right: 0px;
}
}
@media(min-width: 992px){
.md-no-right-padding {
padding-right: 0px;
}
}
a.divLink {
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
text-decoration: none;
/* Makes sure the link doesn't get underlined */
z-index: 10;
/* raises anchor tag above everything else in div */
background-color: white;
/*workaround to make clickable in IE */
opacity: 0;
/*workaround to make clickable in IE */
filter: alpha(opacity=0);
/*workaround to make clickable in IE */
}
.footerWrapper {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
margin: 0 -1rem;
}
.footerWrapper>div{
margin: 0 1rem;
}
.hidden {
display: none;
}
.table-hover tbody tr:hover{
background-color: var(--gray4);
}
a {
color: var(--accent);
}
.btn-primary {
color: var(--gray6);
background-color: var(--accent);
}
.navbar {
background-color: var(--navbarBg);
}
.navbar-default .navbar-nav .active a {
background-color: var(--gray5);
color: var(--gray1);
}
.navbar-default .navbar-nav .active a:hover,
.navbar-default .navbar-nav .active a:focus,
.navbar-default .navbar-nav > li > a:hover,
.navbar-default .navbar-nav > li > a:focus {
background-color: var(--gray4);
color: var(--gray0);
}
.navbar-default .navbar-nav li a,
.navbar-default .navbar-brand {
color: var(--gray1);
}
.navbar-default .navbar-nav li a:hover,
.navbar-default .navbar-nav li a:focus,
.navbar-default .navbar-brand:hover,
.navbar-default .navbar-brand:focus {
color: var(--gray0);
}
hr{
border-top: 1px solid var(--gray2);
}
h1, h2, h3, h4, h5, h6{
color: var(--gray1);
}
.jumbotron, .darker, .order_row {
background: var(--gray5);
}
.darker {
margin-top: 10px;
padding-top: 5px;
padding-bottom: 5px;
}
.table tbody tr td {
border-top: 1px solid var(--gray3);
}
.table thead tr th {
border-bottom: 2px solid var(--gray2);
}
.navbar-toggle .icon-bar {
background-color: var(--gray0);
opacity: 0.5;
}
.select2-container--default .select2-selection--single{
background-color: var(--gray3);
color: var(--gray0);
}
.select2-container--default .select2-selection--single .select2-selection__rendered{
color: var(--gray0);
}
.select2-results__option{
background-color: var(--gray5);
color: var(--gray0);
}
.select2-container--default .select2-results__option--highlighted[aria-selected] {
background-color: var(--gray4);
color: var(--gray0);
}
.bootstrap-datetimepicker-widget table thead tr:first-child th:hover,
.bootstrap-datetimepicker-widget table td.day:hover,
.bootstrap-datetimepicker-widget table td.hour:hover,
.bootstrap-datetimepicker-widget table td.minute:hover,
.bootstrap-datetimepicker-widget table td span:hover,
.bootstrap-datetimepicker-widget table td.second:hover {
background: var(--gray4);
}
.select2-container--default .select2-results__option[aria-selected=true]{
background-color: var(--accent);
color: var(--gray0);
}
.select2-search{
background-color: var(--gray2);
}
.select2-selection--multiple .select2-search{
background-color: transparent;
}
.select2-selection--multiple .select2-search{
background-color: transparent;
}
.select2-selection--multiple .select2-search.select2-search--inline .select2-search__field{
border: 1px solid #ccc;
padding-left: 0.3em;
box-sizing: content-box;
}
.select2-search input{
background-color: var(--gray0);
}
.dropdown-menu{
background-color: var(--gray5);
}
.form-control{
color: var(--gray0);
}
.form-control::placeholder{
color: var(--gray2);
}
.dish-choices summary {
font-style: italic;
}
details summary {
cursor: pointer;
}
details summary:before {
font-style: normal;
content: "⯈";
padding-right: 0.4em;
}
details[open] summary:before {
content: "⯆";
}