diff --git a/app/static/css/main.css b/app/static/css/main.css index a03cbb6..178805a 100644 --- a/app/static/css/main.css +++ b/app/static/css/main.css @@ -1,5 +1,6 @@ /* Custom CSS */ :root { + /*Darkmode colors*/ --dGray0:#B0B0B8; --dGray1:#8E8E93; --dGray2:#636366; @@ -10,6 +11,92 @@ --dBlue:#0A84FF; } +body { + padding-top: 70px; +} + +.padding-top { + padding-top: 10px; +} + +.darker { + background-color: #fafafa; + margin-top: 10px; + padding-bottom: 5px; +} + +@media (min-width: 992px) { + .align-bottom { + margin-top: 2.5em; + } +} + +.full-width { + width: 100%; +} + +.product .extras { + padding-left: 20px; +} + +@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; + } +} + +.showcase .product { + font-size: 16px; +} + +/* Add clickable box */ +div.box:hover { + cursor: hand; + cursor: pointer; + opacity: .9; + box-shadow: 2px 4px 4px -1px #888888; +} + +.table-hover tbody tr:hover{ + background-color: var(--dGray3); +} + +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; +} + .darkmode { background-color: var(--dGray5); color: var(--dGray1); @@ -18,8 +105,10 @@ color: var(--dBlue); } .darkmode .btn { - color: var(--dGray0); + color: white; + background-color: var(--dBlue);; } + .darkmode .navbar { background-color: var(--dGray6); } @@ -53,7 +142,7 @@ color: var(--dGray3); } .darkmode .jumbotron, .darkmode .darker { - background-color: var(--dGray4)!important; + background-color: var(--dGray4); } .darkmode .table tbody tr td { border-top: 1px solid var(--dGray3); @@ -61,91 +150,11 @@ .darkmode .table thead tr th { border-bottom: 2px solid var(--dGray2); } - -.enter_darkmode a { - text-align: center; +.darkmode .navbar-toggle .icon-bar { + background-color: var(--dGray0); + opacity: 0.5; } -body { - padding-top: 70px; -} - -.footerWrapper { - display: flex; - justify-content: space-between; -} - -.darkCheck:checked ~ body { - background-color: var(--dGray5); - color: var(--dGray1); -} - - -.padding-top { - padding-top: 10px; -} - -.darker { - background-color: #fafafa; - margin-top: 10px; - padding-bottom: 5px; -} - -@media (min-width: 992px) { - .align-bottom { - margin-top: 2.5em; - } -} - -.full-width { - width: 100%; -} - -.product .extras { - padding-left: 20px; -} - - -@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; - } -} - -.showcase .product { - font-size: 16px; -} - -/* Add clickable box */ -div.box:hover { - cursor: hand; - cursor: pointer; - opacity: .9; - box-shadow: 2px 4px 4px -1px #888888; -} - -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 */ +.enter_darkmode>a { + text-align: center; } \ No newline at end of file