Changed the way themes work. The client sends a cookie containing the theme which the server uses to send the correct css file.
This commit is contained in:
kindtanton
parent
da8ad21119
commit
608e708a1d
13 changed files with 706 additions and 212 deletions
110
app/static/css/darkmode.css
Normal file
110
app/static/css/darkmode.css
Normal file
|
|
@ -0,0 +1,110 @@
|
|||
:root {
|
||||
/*Darkmode colors*/
|
||||
--dGray0:#D0D0D8;
|
||||
--dGray1:#8E8E93;
|
||||
--dGray2:#636366;
|
||||
--dGray3:#48484A;
|
||||
--dGray4:#3A3A3C;
|
||||
--dGray5:#2C2C2E;
|
||||
--dGray6:#1C1C1E;
|
||||
--dBlue:#0A84FF;
|
||||
}
|
||||
.table-hover tbody tr:hover{
|
||||
background-color: var(--dGray3);
|
||||
}
|
||||
body{
|
||||
background-color: var(--dGray5);
|
||||
color: var(--dGray1);
|
||||
}
|
||||
a {
|
||||
color: var(--dBlue);
|
||||
}
|
||||
.btn-primary {
|
||||
color: var(--dGray6);
|
||||
background-color: var(--dBlue);
|
||||
}
|
||||
|
||||
.navbar {
|
||||
background-color: var(--dGray6);
|
||||
}
|
||||
.navbar-default .navbar-nav .active a{
|
||||
background-color: var(--dGray4);
|
||||
color: var(--dGray1);
|
||||
}
|
||||
.navbar-default .navbar-nav .active a:hover{
|
||||
background-color: var(--dGray3);
|
||||
color: var(--dGray0);
|
||||
}
|
||||
.navbar-default .navbar-nav li a,.navbar-default .navbar-brand{
|
||||
color: var(--dGray1);
|
||||
}
|
||||
.navbar-default .navbar-nav li a:hover,.navbar-default .navbar-brand:hover{
|
||||
color: var(--dGray0);
|
||||
}
|
||||
hr{
|
||||
border-top: 1px solid var(--dGray2);
|
||||
}
|
||||
|
||||
h1, h2, h3, h4, h5, h6{
|
||||
color: var(--dGray1);
|
||||
}
|
||||
|
||||
.jumbotron, .darker {
|
||||
background-color: var(--dGray4);
|
||||
}
|
||||
.table tbody tr td {
|
||||
border-top: 1px solid var(--dGray3);
|
||||
}
|
||||
.table thead tr th {
|
||||
border-bottom: 2px solid var(--dGray2);
|
||||
}
|
||||
.navbar-toggle .icon-bar {
|
||||
background-color: var(--dGray0);
|
||||
opacity: 0.5;
|
||||
}
|
||||
.select2-container--default .select2-selection--single{
|
||||
background-color: var(--dGray3);
|
||||
color: var(--dGray0);
|
||||
}
|
||||
.select2-container--default .select2-selection--single .select2-selection__rendered{
|
||||
color: var(--dGray0);
|
||||
}
|
||||
.select2-results__option{
|
||||
background-color: var(--dGray5);
|
||||
color: var(--dGray0);
|
||||
}
|
||||
.select2-container--default .select2-results__option--highlighted[aria-selected] {
|
||||
background-color: var(--dGray4);
|
||||
color: var(--dGray0);
|
||||
}
|
||||
.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(--dGray4);
|
||||
}
|
||||
|
||||
.select2-container--default .select2-results__option[aria-selected=true]{
|
||||
background-color: var(--dBlue);
|
||||
color: var(--dGray0);
|
||||
}
|
||||
.select2-search{
|
||||
background-color: var(--dGray2);
|
||||
}
|
||||
.select2-search input{
|
||||
background-color: var(--dGray0);
|
||||
}
|
||||
.dropdown-menu{
|
||||
background-color: var(--dGray5);
|
||||
}
|
||||
.form-control{
|
||||
color: var(--dGray0);
|
||||
}
|
||||
.form-control::placeholder{
|
||||
color: var(--dGray2);
|
||||
}
|
||||
.enter_darkmode>a {
|
||||
text-align: center;
|
||||
}
|
||||
|
|
@ -86,10 +86,6 @@ div.box:hover {
|
|||
box-shadow: 2px 4px 4px -1px #888888;
|
||||
}
|
||||
|
||||
.darkmode .table-hover tbody tr:hover{
|
||||
background-color: var(--dGray3);
|
||||
}
|
||||
|
||||
a.divLink {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
|
|
@ -120,101 +116,4 @@ a.divLink {
|
|||
|
||||
.hidden {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.darkmode {
|
||||
background-color: var(--dGray5);
|
||||
color: var(--dGray1);
|
||||
}
|
||||
.darkmode a {
|
||||
color: var(--dBlue);
|
||||
}
|
||||
.darkmode .btn-primary {
|
||||
color: var(--dGray6);
|
||||
background-color: var(--dBlue);
|
||||
}
|
||||
|
||||
.darkmode .navbar {
|
||||
background-color: var(--dGray6);
|
||||
}
|
||||
.darkmode .navbar-default .navbar-nav .active a{
|
||||
background-color: var(--dGray4);
|
||||
color: var(--dGray1);
|
||||
}
|
||||
.darkmode .navbar-default .navbar-nav .active a:hover{
|
||||
background-color: var(--dGray3);
|
||||
color: var(--dGray0);
|
||||
}
|
||||
.darkmode .navbar-default .navbar-nav li a,.darkmode .navbar-default .navbar-brand{
|
||||
color: var(--dGray1);
|
||||
}
|
||||
.darkmode .navbar-default .navbar-nav li a:hover,.darkmode .navbar-default .navbar-brand:hover{
|
||||
color: var(--dGray0);
|
||||
}
|
||||
.darkmode hr{
|
||||
border-top: 1px solid var(--dGray2);
|
||||
}
|
||||
|
||||
.darkmode h1, .darkmode h2, .darkmode h3, .darkmode h4, .darkmode h5, .darkmode h6{
|
||||
color: var(--dGray1);
|
||||
}
|
||||
|
||||
.darkmode .jumbotron, .darkmode .darker {
|
||||
background-color: var(--dGray4);
|
||||
}
|
||||
.darkmode .table tbody tr td {
|
||||
border-top: 1px solid var(--dGray3);
|
||||
}
|
||||
.darkmode .table thead tr th {
|
||||
border-bottom: 2px solid var(--dGray2);
|
||||
}
|
||||
.darkmode .navbar-toggle .icon-bar {
|
||||
background-color: var(--dGray0);
|
||||
opacity: 0.5;
|
||||
}
|
||||
.darkmode .select2-container--default .select2-selection--single{
|
||||
background-color: var(--dGray3);
|
||||
color: var(--dGray0);
|
||||
}
|
||||
.darkmode .select2-container--default .select2-selection--single .select2-selection__rendered{
|
||||
color: var(--dGray0);
|
||||
}
|
||||
.darkmode .select2-results__option{
|
||||
background-color: var(--dGray5);
|
||||
color: var(--dGray0);
|
||||
}
|
||||
.darkmode .select2-container--default .select2-results__option--highlighted[aria-selected] {
|
||||
background-color: var(--dGray4);
|
||||
color: var(--dGray0);
|
||||
}
|
||||
.darkmode .bootstrap-datetimepicker-widget table thead tr:first-child th:hover,
|
||||
.darkmode .bootstrap-datetimepicker-widget table td.day:hover,
|
||||
.darkmode .bootstrap-datetimepicker-widget table td.hour:hover,
|
||||
.darkmode .bootstrap-datetimepicker-widget table td.minute:hover,
|
||||
.darkmode .bootstrap-datetimepicker-widget table td span:hover,
|
||||
.darkmode .bootstrap-datetimepicker-widget table td.second:hover {
|
||||
background: var(--dGray4);
|
||||
}
|
||||
|
||||
.darkmode .select2-container--default .select2-results__option[aria-selected=true]{
|
||||
background-color: var(--dBlue);
|
||||
color: var(--dGray0);
|
||||
}
|
||||
.darkmode .select2-search{
|
||||
background-color: var(--dGray2);
|
||||
}
|
||||
.darkmode .select2-search input{
|
||||
background-color: var(--dGray0);
|
||||
}
|
||||
.darkmode .dropdown-menu{
|
||||
background-color: var(--dGray5);
|
||||
}
|
||||
.darkmode .form-control{
|
||||
color: var(--dGray0);
|
||||
}
|
||||
.darkmode .form-control::placeholder{
|
||||
color: var(--dGray2);
|
||||
}
|
||||
.enter_darkmode>a {
|
||||
text-align: center;
|
||||
}
|
||||
111
app/static/css/themes/darkmode.css
Normal file
111
app/static/css/themes/darkmode.css
Normal file
|
|
@ -0,0 +1,111 @@
|
|||
/*Darkmode*/
|
||||
:root {
|
||||
/*Darkmode colors*/
|
||||
--dGray0:#D0D0D8;
|
||||
--dGray1:#8E8E93;
|
||||
--dGray2:#636366;
|
||||
--dGray3:#48484A;
|
||||
--dGray4:#3A3A3C;
|
||||
--dGray5:#2C2C2E;
|
||||
--dGray6:#1C1C1E;
|
||||
--dBlue:#0A84FF;
|
||||
}
|
||||
.table-hover tbody tr:hover{
|
||||
background-color: var(--dGray3);
|
||||
}
|
||||
body{
|
||||
background-color: var(--dGray5);
|
||||
color: var(--dGray1);
|
||||
}
|
||||
a {
|
||||
color: var(--dBlue);
|
||||
}
|
||||
.btn-primary {
|
||||
color: var(--dGray6);
|
||||
background-color: var(--dBlue);
|
||||
}
|
||||
|
||||
.navbar {
|
||||
background-color: var(--dGray6);
|
||||
}
|
||||
.navbar-default .navbar-nav .active a{
|
||||
background-color: var(--dGray4);
|
||||
color: var(--dGray1);
|
||||
}
|
||||
.navbar-default .navbar-nav .active a:hover{
|
||||
background-color: var(--dGray3);
|
||||
color: var(--dGray0);
|
||||
}
|
||||
.navbar-default .navbar-nav li a,.navbar-default .navbar-brand{
|
||||
color: var(--dGray1);
|
||||
}
|
||||
.navbar-default .navbar-nav li a:hover,.navbar-default .navbar-brand:hover{
|
||||
color: var(--dGray0);
|
||||
}
|
||||
hr{
|
||||
border-top: 1px solid var(--dGray2);
|
||||
}
|
||||
|
||||
h1, h2, h3, h4, h5, h6{
|
||||
color: var(--dGray1);
|
||||
}
|
||||
|
||||
.jumbotron, .darker {
|
||||
background-color: var(--dGray4);
|
||||
}
|
||||
.table tbody tr td {
|
||||
border-top: 1px solid var(--dGray3);
|
||||
}
|
||||
.table thead tr th {
|
||||
border-bottom: 2px solid var(--dGray2);
|
||||
}
|
||||
.navbar-toggle .icon-bar {
|
||||
background-color: var(--dGray0);
|
||||
opacity: 0.5;
|
||||
}
|
||||
.select2-container--default .select2-selection--single{
|
||||
background-color: var(--dGray3);
|
||||
color: var(--dGray0);
|
||||
}
|
||||
.select2-container--default .select2-selection--single .select2-selection__rendered{
|
||||
color: var(--dGray0);
|
||||
}
|
||||
.select2-results__option{
|
||||
background-color: var(--dGray5);
|
||||
color: var(--dGray0);
|
||||
}
|
||||
.select2-container--default .select2-results__option--highlighted[aria-selected] {
|
||||
background-color: var(--dGray4);
|
||||
color: var(--dGray0);
|
||||
}
|
||||
.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(--dGray4);
|
||||
}
|
||||
|
||||
.select2-container--default .select2-results__option[aria-selected=true]{
|
||||
background-color: var(--dBlue);
|
||||
color: var(--dGray0);
|
||||
}
|
||||
.select2-search{
|
||||
background-color: var(--dGray2);
|
||||
}
|
||||
.select2-search input{
|
||||
background-color: var(--dGray0);
|
||||
}
|
||||
.dropdown-menu{
|
||||
background-color: var(--dGray5);
|
||||
}
|
||||
.form-control{
|
||||
color: var(--dGray0);
|
||||
}
|
||||
.form-control::placeholder{
|
||||
color: var(--dGray2);
|
||||
}
|
||||
.enter_darkmode>a {
|
||||
text-align: center;
|
||||
}
|
||||
115
app/static/css/themes/halloween.css
Normal file
115
app/static/css/themes/halloween.css
Normal file
|
|
@ -0,0 +1,115 @@
|
|||
/*halloween*/
|
||||
|
||||
:root {
|
||||
/*Darkmode colors*/
|
||||
--dGray0:#FFEB65;
|
||||
--dGray1:#F28705;
|
||||
--dGray2:#F25C05;
|
||||
--dGray3:#F27405;
|
||||
--dGray4:#8C3D0F;
|
||||
--dGray5:#260101;
|
||||
--dGray6:#260101;
|
||||
--dBlue:#D91604;
|
||||
}
|
||||
.background{
|
||||
background-image: url("static/images/Halloween.jpeg");
|
||||
}
|
||||
.table-hover tbody tr:hover{
|
||||
background-color: var(--dGray3);
|
||||
}
|
||||
body{
|
||||
background-color: var(--dGray5);
|
||||
color: var(--dGray1);
|
||||
}
|
||||
a {
|
||||
color: var(--dBlue);
|
||||
}
|
||||
.btn-primary {
|
||||
color: var(--dGray6);
|
||||
background-color: var(--dBlue);
|
||||
}
|
||||
|
||||
.navbar {
|
||||
background-color: var(--dGray6);
|
||||
}
|
||||
.navbar-default .navbar-nav .active a{
|
||||
background-color: var(--dGray4);
|
||||
color: var(--dGray1);
|
||||
}
|
||||
.navbar-default .navbar-nav .active a:hover{
|
||||
background-color: var(--dGray3);
|
||||
color: var(--dGray0);
|
||||
}
|
||||
.navbar-default .navbar-nav li a,.navbar-default .navbar-brand{
|
||||
color: var(--dGray1);
|
||||
}
|
||||
.navbar-default .navbar-nav li a:hover,.navbar-default .navbar-brand:hover{
|
||||
color: var(--dGray0);
|
||||
}
|
||||
hr{
|
||||
border-top: 1px solid var(--dGray2);
|
||||
}
|
||||
|
||||
h1, h2, h3, h4, h5, h6{
|
||||
color: var(--dGray1);
|
||||
}
|
||||
|
||||
.jumbotron, .darker {
|
||||
background-color: var(--dGray4);
|
||||
}
|
||||
.table tbody tr td {
|
||||
border-top: 1px solid var(--dGray3);
|
||||
}
|
||||
.table thead tr th {
|
||||
border-bottom: 2px solid var(--dGray2);
|
||||
}
|
||||
.navbar-toggle .icon-bar {
|
||||
background-color: var(--dGray0);
|
||||
opacity: 0.5;
|
||||
}
|
||||
.select2-container--default .select2-selection--single{
|
||||
background-color: var(--dGray3);
|
||||
color: var(--dGray0);
|
||||
}
|
||||
.select2-container--default .select2-selection--single .select2-selection__rendered{
|
||||
color: var(--dGray0);
|
||||
}
|
||||
.select2-results__option{
|
||||
background-color: var(--dGray5);
|
||||
color: var(--dGray0);
|
||||
}
|
||||
.select2-container--default .select2-results__option--highlighted[aria-selected] {
|
||||
background-color: var(--dGray4);
|
||||
color: var(--dGray0);
|
||||
}
|
||||
.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(--dGray4);
|
||||
}
|
||||
|
||||
.select2-container--default .select2-results__option[aria-selected=true]{
|
||||
background-color: var(--dBlue);
|
||||
color: var(--dGray0);
|
||||
}
|
||||
.select2-search{
|
||||
background-color: var(--dGray2);
|
||||
}
|
||||
.select2-search input{
|
||||
background-color: var(--dGray0);
|
||||
}
|
||||
.dropdown-menu{
|
||||
background-color: var(--dGray5);
|
||||
}
|
||||
.form-control{
|
||||
color: var(--dGray0);
|
||||
}
|
||||
.form-control::placeholder{
|
||||
color: var(--dGray2);
|
||||
}
|
||||
.enter_darkmode>a {
|
||||
text-align: center;
|
||||
}
|
||||
100
app/static/css/themes/kerstmis.css
Normal file
100
app/static/css/themes/kerstmis.css
Normal file
|
|
@ -0,0 +1,100 @@
|
|||
/*kerstmis*/
|
||||
.table-hover tbody tr:hover{
|
||||
background-color: var(--dGray3);
|
||||
}
|
||||
body{
|
||||
background-color: var(--dGray5);
|
||||
color: var(--dGray1);
|
||||
}
|
||||
a {
|
||||
color: var(--dBlue);
|
||||
}
|
||||
.btn-primary {
|
||||
color: var(--dGray6);
|
||||
background-color: var(--dBlue);
|
||||
}
|
||||
|
||||
.navbar {
|
||||
background-color: var(--dGray6);
|
||||
}
|
||||
.navbar-default .navbar-nav .active a{
|
||||
background-color: var(--dGray4);
|
||||
color: var(--dGray1);
|
||||
}
|
||||
.navbar-default .navbar-nav .active a:hover{
|
||||
background-color: var(--dGray3);
|
||||
color: var(--dGray0);
|
||||
}
|
||||
.navbar-default .navbar-nav li a,.navbar-default .navbar-brand{
|
||||
color: var(--dGray1);
|
||||
}
|
||||
.navbar-default .navbar-nav li a:hover,.navbar-default .navbar-brand:hover{
|
||||
color: var(--dGray0);
|
||||
}
|
||||
hr{
|
||||
border-top: 1px solid var(--dGray2);
|
||||
}
|
||||
|
||||
h1, h2, h3, h4, h5, h6{
|
||||
color: var(--dGray1);
|
||||
}
|
||||
|
||||
.jumbotron, .darker {
|
||||
background-color: var(--dGray4);
|
||||
}
|
||||
.table tbody tr td {
|
||||
border-top: 1px solid var(--dGray3);
|
||||
}
|
||||
.table thead tr th {
|
||||
border-bottom: 2px solid var(--dGray2);
|
||||
}
|
||||
.navbar-toggle .icon-bar {
|
||||
background-color: var(--dGray0);
|
||||
opacity: 0.5;
|
||||
}
|
||||
.select2-container--default .select2-selection--single{
|
||||
background-color: var(--dGray3);
|
||||
color: var(--dGray0);
|
||||
}
|
||||
.select2-container--default .select2-selection--single .select2-selection__rendered{
|
||||
color: var(--dGray0);
|
||||
}
|
||||
.select2-results__option{
|
||||
background-color: var(--dGray5);
|
||||
color: var(--dGray0);
|
||||
}
|
||||
.select2-container--default .select2-results__option--highlighted[aria-selected] {
|
||||
background-color: var(--dGray4);
|
||||
color: var(--dGray0);
|
||||
}
|
||||
.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(--dGray4);
|
||||
}
|
||||
|
||||
.select2-container--default .select2-results__option[aria-selected=true]{
|
||||
background-color: var(--dBlue);
|
||||
color: var(--dGray0);
|
||||
}
|
||||
.select2-search{
|
||||
background-color: var(--dGray2);
|
||||
}
|
||||
.select2-search input{
|
||||
background-color: var(--dGray0);
|
||||
}
|
||||
.dropdown-menu{
|
||||
background-color: var(--dGray5);
|
||||
}
|
||||
.form-control{
|
||||
color: var(--dGray0);
|
||||
}
|
||||
.form-control::placeholder{
|
||||
color: var(--dGray2);
|
||||
}
|
||||
.enter_darkmode>a {
|
||||
text-align: center;
|
||||
}
|
||||
112
app/static/css/themes/lightmode.css
Normal file
112
app/static/css/themes/lightmode.css
Normal file
|
|
@ -0,0 +1,112 @@
|
|||
/*lightmode*/
|
||||
:root {
|
||||
/*Darkmode colors*/
|
||||
--dGray0:#444444;
|
||||
--dGray1:#666666;
|
||||
--dGray2:#212121;
|
||||
--dGray3:#ffffff;
|
||||
--dGray4:#f9f9f9;
|
||||
--dGray5:#ffffff;
|
||||
--dGray6:#ffffff;
|
||||
--dBlue:#0A84FF;
|
||||
}
|
||||
|
||||
.table-hover tbody tr:hover{
|
||||
background-color: var(--dGray3);
|
||||
}
|
||||
body{
|
||||
background-color: var(--dGray5);
|
||||
color: var(--dGray1);
|
||||
}
|
||||
a {
|
||||
color: var(--dBlue);
|
||||
}
|
||||
.btn-primary {
|
||||
color: var(--dGray6);
|
||||
background-color: var(--dBlue);
|
||||
}
|
||||
|
||||
.navbar {
|
||||
background-color: var(--dGray6);
|
||||
}
|
||||
.navbar-default .navbar-nav .active a{
|
||||
background-color: var(--dGray4);
|
||||
color: var(--dGray1);
|
||||
}
|
||||
.navbar-default .navbar-nav .active a:hover{
|
||||
background-color: var(--dGray3);
|
||||
color: var(--dGray0);
|
||||
}
|
||||
.navbar-default .navbar-nav li a,.navbar-default .navbar-brand{
|
||||
color: var(--dGray1);
|
||||
}
|
||||
.navbar-default .navbar-nav li a:hover,.navbar-default .navbar-brand:hover{
|
||||
color: var(--dGray0);
|
||||
}
|
||||
hr{
|
||||
border-top: 1px solid var(--dGray2);
|
||||
}
|
||||
|
||||
h1, h2, h3, h4, h5, h6{
|
||||
color: var(--dGray1);
|
||||
}
|
||||
|
||||
.jumbotron, .darker {
|
||||
background-color: var(--dGray4);
|
||||
}
|
||||
.table tbody tr td {
|
||||
border-top: 1px solid var(--dGray3);
|
||||
}
|
||||
.table thead tr th {
|
||||
border-bottom: 2px solid var(--dGray2);
|
||||
}
|
||||
.navbar-toggle .icon-bar {
|
||||
background-color: var(--dGray0);
|
||||
opacity: 0.5;
|
||||
}
|
||||
.select2-container--default .select2-selection--single{
|
||||
background-color: var(--dGray3);
|
||||
color: var(--dGray0);
|
||||
}
|
||||
.select2-container--default .select2-selection--single .select2-selection__rendered{
|
||||
color: var(--dGray0);
|
||||
}
|
||||
.select2-results__option{
|
||||
background-color: var(--dGray5);
|
||||
color: var(--dGray0);
|
||||
}
|
||||
.select2-container--default .select2-results__option--highlighted[aria-selected] {
|
||||
background-color: var(--dGray4);
|
||||
color: var(--dGray0);
|
||||
}
|
||||
.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(--dGray4);
|
||||
}
|
||||
|
||||
.select2-container--default .select2-results__option[aria-selected=true]{
|
||||
background-color: var(--dBlue);
|
||||
color: var(--dGray0);
|
||||
}
|
||||
.select2-search{
|
||||
background-color: var(--dGray2);
|
||||
}
|
||||
.select2-search input{
|
||||
background-color: var(--dGray0);
|
||||
}
|
||||
.dropdown-menu{
|
||||
background-color: var(--dGray5);
|
||||
}
|
||||
.form-control{
|
||||
color: var(--dGray0);
|
||||
}
|
||||
.form-control::placeholder{
|
||||
color: var(--dGray2);
|
||||
}
|
||||
.enter_darkmode>a {
|
||||
text-align: center;
|
||||
}
|
||||
115
app/static/css/themes/sinterklaas.css
Normal file
115
app/static/css/themes/sinterklaas.css
Normal file
|
|
@ -0,0 +1,115 @@
|
|||
/*sinterklaas*/
|
||||
:root {
|
||||
/*Darkmode colors*/
|
||||
--dGray0:#F2EB80;
|
||||
--dGray1:#F2EF05;
|
||||
--dGray2:#F2EF05;
|
||||
--dGray3:#177EBF;
|
||||
--dGray4:#0C6AA6;
|
||||
--dGray5:#F20505;
|
||||
--dGray6:#F50B00;
|
||||
--dBlue:#35F546;
|
||||
}
|
||||
|
||||
.table-hover tbody tr:hover{
|
||||
background-color: var(--dGray3);
|
||||
}
|
||||
.background{
|
||||
background-image: url("static/images/Sinterklaas.jpg");
|
||||
}
|
||||
body{
|
||||
background-color: var(--dGray5);
|
||||
color: var(--dGray1);
|
||||
}
|
||||
a {
|
||||
color: var(--dBlue);
|
||||
}
|
||||
.btn-primary {
|
||||
color: var(--dGray6);
|
||||
background-color: var(--dBlue);
|
||||
}
|
||||
|
||||
.navbar {
|
||||
background-color: var(--dGray6);
|
||||
}
|
||||
.navbar-default .navbar-nav .active a{
|
||||
background-color: var(--dGray4);
|
||||
color: var(--dGray1);
|
||||
}
|
||||
.navbar-default .navbar-nav .active a:hover{
|
||||
background-color: var(--dGray3);
|
||||
color: var(--dGray0);
|
||||
}
|
||||
.navbar-default .navbar-nav li a,.navbar-default .navbar-brand{
|
||||
color: var(--dGray1);
|
||||
}
|
||||
.navbar-default .navbar-nav li a:hover,.navbar-default .navbar-brand:hover{
|
||||
color: var(--dGray0);
|
||||
}
|
||||
hr{
|
||||
border-top: 1px solid var(--dGray2);
|
||||
}
|
||||
|
||||
h1, h2, h3, h4, h5, h6{
|
||||
color: var(--dGray1);
|
||||
}
|
||||
|
||||
.jumbotron, .darker {
|
||||
background-color: var(--dGray4);
|
||||
}
|
||||
.table tbody tr td {
|
||||
border-top: 1px solid var(--dGray3);
|
||||
}
|
||||
.table thead tr th {
|
||||
border-bottom: 2px solid var(--dGray2);
|
||||
}
|
||||
.navbar-toggle .icon-bar {
|
||||
background-color: var(--dGray0);
|
||||
opacity: 0.5;
|
||||
}
|
||||
.select2-container--default .select2-selection--single{
|
||||
background-color: var(--dGray3);
|
||||
color: var(--dGray0);
|
||||
}
|
||||
.select2-container--default .select2-selection--single .select2-selection__rendered{
|
||||
color: var(--dGray0);
|
||||
}
|
||||
.select2-results__option{
|
||||
background-color: var(--dGray5);
|
||||
color: var(--dGray0);
|
||||
}
|
||||
.select2-container--default .select2-results__option--highlighted[aria-selected] {
|
||||
background-color: var(--dGray4);
|
||||
color: var(--dGray0);
|
||||
}
|
||||
.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(--dGray4);
|
||||
}
|
||||
|
||||
.select2-container--default .select2-results__option[aria-selected=true]{
|
||||
background-color: var(--dBlue);
|
||||
color: var(--dGray0);
|
||||
}
|
||||
.select2-search{
|
||||
background-color: var(--dGray2);
|
||||
}
|
||||
.select2-search input{
|
||||
background-color: var(--dGray0);
|
||||
}
|
||||
.dropdown-menu{
|
||||
background-color: var(--dGray5);
|
||||
}
|
||||
.form-control{
|
||||
color: var(--dGray0);
|
||||
}
|
||||
.form-control::placeholder{
|
||||
color: var(--dGray2);
|
||||
}
|
||||
.enter_darkmode>a {
|
||||
text-align: center;
|
||||
}
|
||||
|
|
@ -1,108 +0,0 @@
|
|||
{
|
||||
const init = () => {
|
||||
const $darkmode = document.querySelector(".enter_darkmode");
|
||||
if($darkmode) $darkmode.addEventListener("click", ()=>toggleBetween("lightmode", "darkmode"));
|
||||
const $customThemes = document.querySelector(".custom__themes");
|
||||
if($customThemes) $customThemes.addEventListener("click", ()=>toggleBetween("darkmode", "sinterklaas")); //TODO: Create automatic custom team selector
|
||||
|
||||
reloadTheme();
|
||||
}
|
||||
|
||||
const toggleBetween = (first, second) => {
|
||||
if(localStorage.getItem("theme") == second){
|
||||
localStorage.setItem("theme", first)
|
||||
}else{
|
||||
localStorage.setItem("theme", second)
|
||||
}
|
||||
reloadTheme();
|
||||
}
|
||||
|
||||
const reloadTheme = () => {
|
||||
if (typeof(Storage) !== "undefined") {
|
||||
if(localStorage.getItem("theme") !== null){
|
||||
setTheme();
|
||||
}else if((window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches)){
|
||||
document.querySelector('body').classList.remove('lightmode');
|
||||
document.querySelector('body').classList.add('darkmode');
|
||||
}
|
||||
} else {
|
||||
console.log('You browser does not support local storage, no darkmode for you!' )
|
||||
}
|
||||
}
|
||||
|
||||
const setTheme = () =>{
|
||||
document.querySelector('body').classList.add('darkmode');
|
||||
switch(localStorage.getItem("theme")){
|
||||
case "halloween":
|
||||
setThemeHalloween();
|
||||
break;
|
||||
case "sinterklaas":
|
||||
setThemeSinterklaas();
|
||||
break;
|
||||
case "darkmode":
|
||||
setThemeDarkMode();
|
||||
break;
|
||||
case "lightmode":
|
||||
default:
|
||||
setThemeLightMode();
|
||||
break;
|
||||
}
|
||||
}
|
||||
|
||||
//TODO: Use an external file to load themes
|
||||
//TODO: Darkness and blur variables
|
||||
|
||||
const setThemeLightMode = () => {
|
||||
let root = document.documentElement;
|
||||
root.style.setProperty('--dGray6', "#ffffff"); //Dark color
|
||||
root.style.setProperty('--dGray5', "#ffffff");
|
||||
root.style.setProperty('--dGray4', "#f9f9f9");
|
||||
root.style.setProperty('--dGray3', "#ffffff");
|
||||
root.style.setProperty('--dGray2', "#212121");
|
||||
root.style.setProperty('--dGray1', "#666666");
|
||||
root.style.setProperty('--dGray0', "#444444"); //Light color
|
||||
root.style.setProperty('--dBlue', "#0A84FF");
|
||||
document.querySelector('.background').style.backgroundImage = 'none';
|
||||
}
|
||||
|
||||
const setThemeDarkMode = () => {
|
||||
let root = document.documentElement;
|
||||
root.style.setProperty('--dGray6', "#1C1C1E"); //Dark color
|
||||
root.style.setProperty('--dGray5', "#2C2C2E");
|
||||
root.style.setProperty('--dGray4', "#3A3A3C");
|
||||
root.style.setProperty('--dGray3', "#48484A");
|
||||
root.style.setProperty('--dGray2', "#636366");
|
||||
root.style.setProperty('--dGray1', "#8E8E93");
|
||||
root.style.setProperty('--dGray0', "#E0E0E8"); //Light color
|
||||
root.style.setProperty('--dBlue', "#0A84FF");
|
||||
document.querySelector('.background').style.backgroundImage = 'none';
|
||||
}
|
||||
|
||||
const setThemeHalloween = () => {
|
||||
let root = document.documentElement;
|
||||
root.style.setProperty('--dGray6', "#260101"); //Dark color
|
||||
root.style.setProperty('--dGray5', "#260101");
|
||||
root.style.setProperty('--dGray4', "#8C3D0F");
|
||||
root.style.setProperty('--dGray3', "#F27405");
|
||||
root.style.setProperty('--dGray2', "#F25C05");
|
||||
root.style.setProperty('--dGray1', "#F28705");
|
||||
root.style.setProperty('--dGray0', "#FFEB65"); //Light color
|
||||
root.style.setProperty('--dBlue', "#D91604");
|
||||
document.querySelector('.background').backgroundImage = "url('/static/images/Halloween.jpeg')";
|
||||
}
|
||||
|
||||
const setThemeSinterklaas = () => {
|
||||
let root = document.documentElement;
|
||||
root.style.setProperty('--dGray6', "#F50B00"); //Dark color
|
||||
root.style.setProperty('--dGray5', "#F20505");
|
||||
root.style.setProperty('--dGray4', "#0C6AA6");
|
||||
root.style.setProperty('--dGray3', "#177EBF");
|
||||
root.style.setProperty('--dGray2', "#F2EF05");
|
||||
root.style.setProperty('--dGray1', "#F2EF05");
|
||||
root.style.setProperty('--dGray0', "#F2EB80"); //Light color
|
||||
root.style.setProperty('--dBlue', "#35F546");
|
||||
document.body.style.background = "#000000";
|
||||
document.querySelector('.background').style.backgroundImage = "url('/static/images/Sinterklaas.jpg')";
|
||||
}
|
||||
init();
|
||||
}
|
||||
21
app/static/js/theme.js
Normal file
21
app/static/js/theme.js
Normal file
|
|
@ -0,0 +1,21 @@
|
|||
|
||||
{
|
||||
const init = () =>{
|
||||
document.cookie.split('; ').forEach(itCookie = cookie =>{
|
||||
if(cookie.split("=")[0] == "theme" && cookie.split("=")[1] == "darkmode"){
|
||||
document.querySelector(".toggleDarkmode").innerHTML = "<a>Enter lightmode</a>"
|
||||
document.querySelector(".toggleDarkmode").id = "lightmode"
|
||||
}
|
||||
});
|
||||
document.querySelectorAll('.changeThemeButton').forEach(changeThemeButton= e => {e.addEventListener(`click`, handleClickChangeTheme)});
|
||||
}
|
||||
|
||||
const handleClickChangeTheme = e =>{
|
||||
document.cookie = "theme = "+e.currentTarget.id+";path=/";
|
||||
location.reload();
|
||||
}
|
||||
|
||||
|
||||
|
||||
init();
|
||||
}
|
||||
|
|
@ -24,12 +24,13 @@ Haldis - {{ active_page|capitalize }}
|
|||
{% block styles %}
|
||||
{{ super() }}
|
||||
<link rel="stylesheet" href="{{ url_for('static', filename='css/main.css') }}" media="screen">
|
||||
<link rel="stylesheet" href="/css" media="screen">
|
||||
<link rel="stylesheet" href="{{ url_for('static', filename='css/print.css') }}" media="print">
|
||||
{% endblock %}
|
||||
|
||||
{% block scripts %}
|
||||
{{ super() }}
|
||||
<script type="text/javascript" src="{{ url_for('static', filename='js/darkmode.js') }}"></script>
|
||||
<script type="text/javascript" src="{{ url_for('static', filename='js/theme.js') }}"></script>
|
||||
<script type="text/javascript" src="{{ url_for('static', filename='js/timer.js') }}"></script>
|
||||
{% endblock %}
|
||||
|
||||
|
|
@ -80,7 +81,7 @@ Haldis - {{ active_page|capitalize }}
|
|||
<div class="container">
|
||||
<div class="footerWrapper">
|
||||
<div class="pull-left">Made with ❤ by <a href="http://zeus.ugent.be">Zeus WPI</a></div>
|
||||
<div class="enter_darkmode"><a>Toggle darkmode</a></div>
|
||||
<div class="changeThemeButton toggleDarkmode" id="darkmode"><a>Enter darkmode</a></div>
|
||||
<div class="pull-right"><a href="http://github.com/ZeusWPI/Haldis">© {{ ""|year }}</a></div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -8,6 +8,7 @@ Haldis - Order {{ order.id }}
|
|||
{% block styles %}
|
||||
{{ super() }}
|
||||
<link rel="stylesheet" href="{{ url_for('static', filename='css/main.css') }}" media="screen">
|
||||
<link rel="stylesheet" href="/css" media="screen">
|
||||
<link rel="stylesheet" href="{{ url_for('static', filename='css/print.css') }}" media="print">
|
||||
{% endblock %}
|
||||
|
||||
|
|
|
|||
|
|
@ -4,5 +4,5 @@
|
|||
{% block container %}
|
||||
<h1>{{ current_user.username }}</h1>
|
||||
<h3>Themes</h3>
|
||||
<p><a class="custom__themes">enable custom themes</a></p>
|
||||
<p><a class="changeThemeButton" id="customTheme">enable custom themes</a></p>
|
||||
{% endblock %}
|
||||
|
|
|
|||
|
|
@ -2,6 +2,8 @@
|
|||
import os
|
||||
from datetime import datetime, timedelta
|
||||
|
||||
from flask import Flask, render_template, make_response
|
||||
from flask import request
|
||||
from flask import Blueprint, abort
|
||||
from flask import current_app as app
|
||||
from flask import render_template, send_from_directory, url_for
|
||||
|
|
@ -25,6 +27,21 @@ def home() -> str:
|
|||
"home.html", orders=get_orders(), recently_closed=recently_closed
|
||||
)
|
||||
|
||||
@general_bp.route("/css")
|
||||
def css():
|
||||
"Generate the css"
|
||||
if request.cookies.get('theme'):
|
||||
if request.cookies['theme'] == 'customTheme':
|
||||
#TODO: The custom theme is hardcoded :(. Make the server auto select a custom team.
|
||||
f = open("app/static/css/themes/sinterklaas.css")
|
||||
else:
|
||||
f = open("app/static/css/themes/"+request.cookies['theme']+".css")
|
||||
else:
|
||||
f = open("app/static/css/main.css")
|
||||
response = make_response(f.read())
|
||||
response.headers['Content-Type'] = 'text/css'
|
||||
return response
|
||||
|
||||
|
||||
@general_bp.route("/map")
|
||||
def map_view() -> str:
|
||||
|
|
|
|||
Loading…
Reference in a new issue