diff --git a/src/static/base.scss b/src/static/base.scss new file mode 100644 index 0000000000000000000000000000000000000000..57ddfb9cb999ce6daf893a71361530e90afc29d4 --- /dev/null +++ b/src/static/base.scss @@ -0,0 +1,30 @@ + .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); +} + +.sidebar-sticky { + position: relative; + top: 0; + height: calc(100vh - 48px); + padding-top: .5rem; + overflow-x: hidden; + overflow-y: auto; /* Scrollable contents if viewport is shorter than content. */ +} + +@supports ((position: -webkit-sticky) or (position: sticky)) { + .sidebar-sticky { + position: -webkit-sticky; + position: sticky; + } +} + +#footer { + color: #777; + overflow: hidden; +} \ No newline at end of file diff --git a/src/static/memberdb.css b/src/static/memberdb.css index a5059159e31511c445593d3d2687baa63919e287..ecd684873e89d3531535e8e974f65a72eb21208a 100644 --- a/src/static/memberdb.css +++ b/src/static/memberdb.css @@ -100,37 +100,6 @@ ul.errorlist { font-weight: bold; } -nav { - background-color: #333; - overflow: auto; /* make navbar expand in case the tab buttons flow to a second row */ -} - -.navtab, .userinfo { - float: left; - text-decoration: none; - color: white; - text-align: center; - font-size: 22px; - font-variant-caps: all-petite-caps; - font-weight: 400; - line-height: 26px; - padding: 17px 20px; /* line-height and padding adds up to minimum 60px element height */ - border-style: solid; - border-color: #555; - border-width: 0 1px 0 1px; - margin-right: -1px; - background-color: #3c3c3c; -} - -.navtab:hover, .navtab.active { - color: #eee; - background-color: black; -} - -.navtab:last-child { - border-right: 1.5px solid #555; -} - .userinfo { float: right; border-right: 0; @@ -138,11 +107,9 @@ nav { font-variant-caps: normal; border: none; background-color: none; - padding: 19px 20px; } .userinfo.groups { - padding: 7px 20px; } .userinfo .username { diff --git a/src/static/shared.css b/src/static/shared.css deleted file mode 100644 index c226de2a0bed888e63f784cb6b2544a417f06a47..0000000000000000000000000000000000000000 --- a/src/static/shared.css +++ /dev/null @@ -1,218 +0,0 @@ -/* memberdb: css used by both main site & admin pages - * some of this is just copied from the admin css */ - -* { - box-sizing: border-box; -} - -body { - min-height: 100%; - position: relative; - background-color: #f8f8f8; - font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; - font-weight: normal; - margin: 0; -} - -.logo { - float: left; - margin: 5px 30px 5px 20px; - height: 50px; - width: 50px; - overflow: hidden; /* hide the overflow when it is rotated on the admin site */ -} - -.logo span { - height: 100%; - width: 100%; - display: block; - background-image: url("ucc-logo-white.png"); - background-repeat: no-repeat; - background-position: center; - background-size: cover; -} - -#container { - padding-bottom: 60px; - position: static; -} - -#footer { - position: absolute; - left: 0; - bottom: 0; - width: 100%; - clear: both; - background-color: #ccc; - color: #777; - text-align: center; - overflow: hidden; -} - -#footer p { - padding: 0; - margin: 12px 0 6px 0; -} - -.linkslist a { - display: inline-block; - padding: 0; - margin: 6px 10px 12px 10px; - color: #555; -} - -.linkslist a:visited { - color: #333; -} - -/* make div expand to contain float children */ -.float-container { - overflow: auto; - display: inline-block; -} - - - -/* MESSAGES & ERRORS */ -ul.messagelist { - padding: 0; - margin: 0; -} - -ul.messagelist li { - display: block; - font-weight: 400; - font-size: 13px; - padding: 10px 10px 10px 65px; - margin: 0 0 10px 0; - background: #dfd url(/media/admin/img/icon-yes.svg) 40px 12px no-repeat; - background-size: 16px auto; - color: #333; -} - -ul.messagelist li.warning { - background: #ffc url(/media/admin/img/icon-alert.svg) 40px 14px no-repeat; - background-size: 14px auto; -} - -ul.messagelist li.error { - background: #ffefef url(/media/admin/img/icon-no.svg) 40px 12px no-repeat; - background-size: 16px auto; -} - -.errornote { - font-size: 14px; - font-weight: 700; - display: block; - padding: 10px 12px; - margin: 0 0 10px 0; - color: #ba2121; - border: 1px solid #ba2121; - border-radius: 4px; - background-color: #fff; - background-position: 5px 12px; -} - -/* FORM BUTTONS */ - -.button, input[type=submit], input[type=button], .submit-row input,.submit-row button, a.button { - background: #79aec8; - padding: 10px 15px; - border: none; - border-radius: 4px; - color: #fff; - cursor: pointer; -} - -a.button { - padding: 4px 5px; - display: inline-block; -} - -.button:active, input[type=submit]:active, input[type=button]:active, -.button:focus, input[type=submit]:focus, input[type=button]:focus, -.button:hover, input[type=submit]:hover, input[type=button]:hover { - background: #609ab6; -} - -.button[disabled], input[type=submit][disabled], input[type=button][disabled] { - opacity: 0.4; -} - -.button.default, input[type=submit].default, .submit-row input.default { - float: right; - border: none; - font-weight: 400; - background: #417690; -} - -.button.default:active, input[type=submit].default:active, -.button.default:focus, input[type=submit].default:focus, -.button.default:hover, input[type=submit].default:hover { - background: #205067; -} - -.button[disabled].default, -input[type=submit][disabled].default, -input[type=button][disabled].default { - opacity: 0.4; -} - -.help, p.help, form p.help, div.help, form div.help, div.help li { - font-size: 12px; - color: #999; -} - -/* TABLES */ - -table { - border-collapse: collapse; - border-color: #ccc; -} - -td, th { - font-size: 13px; - line-height: 16px; - border-bottom: 1px solid #eee; - vertical-align: top; - padding: 8px; - /*font-family: "Roboto", "Lucida Grande", Verdana, Arial, sans-serif;*/ -} - -th { - font-weight: 600; - text-align: left; -} - -thead th, -tfoot td { - color: #666; - padding: 5px 10px; - font-size: 11px; - background: #fff; - border: none; - border-top: 1px solid #eee; - border-bottom: 1px solid #eee; -} - -tfoot td { - border-bottom: none; - border-top: 1px solid #eee; -} - -thead th.required { - color: #000; -} - -tr.alt { - background: #f6f6f6; -} - -.row1 { - background: rgba(255, 255, 255, 0.7); -} - -.row2 { - background: rgba(230, 230, 230, 0.7); -} - diff --git a/src/static/shared.scss b/src/static/shared.scss new file mode 100644 index 0000000000000000000000000000000000000000..d45825c0f1f853371f03db0c7fe000ac15192fb6 --- /dev/null +++ b/src/static/shared.scss @@ -0,0 +1,311 @@ +/* memberdb: css used by both main site & admin pages + * some of this is just copied from the admin css */ +/* static theme colors */ +.grey-900 { + background-color: #272c30; +} +.grey-800 { + background-color: #343a40; +} +.grey-700 { + background-color: #495057; +} + +* { + box-sizing: border-box; +} + +.nav .nav-item .nav-link { + color: rgba(0, 0, 0, 0.65); + font-weight: 400; +} + +.icon { + width: 24px; + height: 24px; + vertical-align: text-bottom; +} + +/* Rules for sizing the icon. */ +.icon.md-18 { + width: 18px; + height: 18px; +} +.icon.md-36 { + width: 36px; + height: 36px; +} +.icon.md-48 { + width: 48px; + height: 48px; +} + +/* Rules for using icons as black on a light background. */ +.icon.md-dark { + color: rgba(0, 0, 0, 0.54); +} +.icon.md-dark.md-inactive { + color: rgba(0, 0, 0, 0.26); +} + +/* Rules for using icons as white on a dark background. */ +.icon.md-light { + color: rgba(255, 255, 255, 1); +} +.icon.md-light.md-inactive { + color: rgba(255, 255, 255, 0.3); +} + +body { + min-height: 100%; + position: relative; + font-family: "Roboto", "Lucida Grande", "DejaVu Sans", "Bitstream Vera Sans", Verdana, Arial, sans-serif; + font-weight: normal; + margin: 0; +} + +.logo { + overflow: hidden; /* hide the overflow when it is rotated on the admin site */ + float: left; + margin: 0px 10px 0px 10px; + height: 30px; + width: 30px; + display: block; + background-image: url("ucc-logo-white.png"); + background-repeat: no-repeat; + background-position: center; + background-size: cover; +} + +.navbar-dark .navbar-nav .nav-link { + color: #fefefe; +} + +.navbar .active { + background-color: #343a40; +} + +.nav .nav-item .nav-link:hover { + color: rgba(0, 0, 0, 0.9); + .icon { + color: rgba(0, 0, 0, 0.7); + } +} + +.sidebar .nav-link.active { + color: #007bff; + .icon { + color: #007bff; + } +} +.sidebar .nav-link.disabled { + color: rgba(0, 0, 0, 0.25); + .icon { + color: rgba(0, 0, 0, 0.25); + } +} + +.dropdown-menu { + padding-top: 0; + padding-bottom: 0; + margin: 1px .125rem 0 0; +} + +.dropdown-item:hover { + background-color: #3e454c; + color: #ffffff; +} +#header { + box-shadow: 0 0 8px 0 rgba(0, 0, 0, 0.12); + -webkit-box-shadow: 0 0 8px 0 rgba(0, 0, 0, 0.12); + -moz-box-shadow: 0 0 8px 0 rgba(0, 0, 0, 0.12); +} + +#footer p { + padding: 0; + margin: 12px 0 6px 0; +} + +.linkslist a { + display: inline-block; + padding: 0; + margin: 6px 10px 12px 10px; + color: #555; +} + +.linkslist a:visited { + color: #333; +} + +/* make div expand to contain float children */ +.float-container { + overflow: auto; + display: inline-block; +} + +/* MESSAGES & ERRORS */ +ul.messagelist { + padding: 0; + margin: 0; +} + +ul.messagelist li { + display: block; + font-weight: 400; + font-size: 13px; + padding: 10px 10px 10px 65px; + margin: 0 0 10px 0; + background: #dfd url(/media/admin/img/icon-yes.svg) 40px 12px no-repeat; + background-size: 16px auto; + color: #333; +} + +ul.messagelist li.warning { + background: #ffc url(/media/admin/img/icon-alert.svg) 40px 14px no-repeat; + background-size: 14px auto; +} + +ul.messagelist li.error { + background: #ffefef url(/media/admin/img/icon-no.svg) 40px 12px no-repeat; + background-size: 16px auto; +} + +.errornote { + font-size: 14px; + font-weight: 700; + display: block; + padding: 10px 12px; + margin: 0 0 10px 0; + color: #ba2121; + border: 1px solid #ba2121; + border-radius: 4px; + background-color: #fff; + background-position: 5px 12px; +} + +/* FORM BUTTONS */ + +.button, +input[type="submit"], +input[type="button"], +.submit-row input, +.submit-row button, +a.button { + background: #79aec8; + padding: 10px 15px; + border: none; + border-radius: 4px; + color: #fff; + cursor: pointer; +} + +a.button { + padding: 4px 5px; + display: inline-block; +} + +.button:active, +input[type="submit"]:active, +input[type="button"]:active, +.button:focus, +input[type="submit"]:focus, +input[type="button"]:focus, +.button:hover, +input[type="submit"]:hover, +input[type="button"]:hover { + background: #609ab6; +} + +.button[disabled], +input[type="submit"][disabled], +input[type="button"][disabled] { + opacity: 0.4; +} + +.button.default, +input[type="submit"].default, +.submit-row input.default { + float: right; + border: none; + font-weight: 400; + background: #417690; +} + +.button.default:active, +input[type="submit"].default:active, +.button.default:focus, +input[type="submit"].default:focus, +.button.default:hover, +input[type="submit"].default:hover { + background: #205067; +} + +.button[disabled].default, +input[type="submit"][disabled].default, +input[type="button"][disabled].default { + opacity: 0.4; +} + +.help, +p.help, +form p.help, +div.help, +form div.help, +div.help li { + font-size: 12px; + color: #999; +} + +/* TABLES */ + +table { + border-collapse: collapse; + border-color: #ccc; +} + +td, +th { + font-size: 13px; + line-height: 16px; + border-bottom: 1px solid #eee; + vertical-align: top; + padding: 8px; + /*font-family: "Roboto", "Lucida Grande", Verdana, Arial, sans-serif;*/ +} + +th { + font-weight: 600; + text-align: left; +} + +thead th, +tfoot td { + color: #666; + padding: 5px 10px; + font-size: 11px; + background: #fff; + border: none; + border-top: 1px solid #eee; + border-bottom: 1px solid #eee; +} + +tfoot td { + border-bottom: none; + border-top: 1px solid #eee; +} + +thead th.required { + color: #000; +} + +tr.alt { + background: #f6f6f6; +} + +.row1 { + background: rgba(255, 255, 255, 0.7); +} + +.row2 { + background: rgba(230, 230, 230, 0.7); +} diff --git a/src/templates/base.html b/src/templates/base.html index 496776536c9326a4685b8003390d400ba1f63039..4776dcb7f330ebd74656f1cbbabf5f40aa0d5d4f 100644 --- a/src/templates/base.html +++ b/src/templates/base.html @@ -15,8 +15,15 @@ <!-- MemberDB base template --> <title>{% block title %}UCC MemberDB{% endblock %}</title> <link rel="shortcut icon" type="image/png" href="{% static 'ucc-logo.png' %}"/> - <link rel="stylesheet" type="text/css" href="{% static 'shared.css' %}"/> - <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons"> + {% if request.user.dark_theme_enabled %} + <link rel="stylesheet" type="text/css" href="{% sass_src 'theme-dark.scss' %}"/> + {%else%} + <link rel="stylesheet" type="text/css" href="{% sass_src 'theme-light.scss' %}"/> + {%endif%} + <link rel="stylesheet" type="text/css" href="{% sass_src 'shared.scss' %}"/> + <link rel="stylesheet" type="text/css" href="{% sass_src 'base.scss' %}"/> + <link rel="stylesheet" type="text/css" href="{% static 'memberdb.css' %}"/> + <script src="https://unpkg.com/feather-icons"></script> {% block prestyle %}{% endblock %} {% block extrahead %}{% endblock %} {% block extrastyle %}{% endblock %}