More dev

filadelfia_web/app/header.js

@@ -1,6 +1,7 @@
 const m = require('mithril')
 const videos = require('./videos')
 const Authentication = require('./authentication')
+const lang = require('./lang')
 
 const Menu = {
   oninit: function(vnode) {
@@ -26,11 +27,12 @@ const Menu = {
     return Authentication.currentUser
       ? [
           m('nav', [
-            m('h4', m(m.route.Link, { href: '/browse' }, 'Filadelfia archival center')),
+            m('h4', m(m.route.Link, { href: '/browse' }, lang.header_title /* Filadelfia archival center */)),
+            m('a.change', { onclick: lang.langtoggle }, lang.lang_current),
             Authentication.currentUser.rank > 10
-              ? m(m.route.Link, { class: 'upload', href: '/upload' }, 'Upload')
+              ? m(m.route.Link, { class: 'upload', href: '/upload' }, lang.upload_goto) // Upload
               : null,
-            m('button.logout', { onclick: this.logOut }, 'Log out'),
+            m('button.logout', { onclick: this.logOut }, lang.header_logout), // Log out
           ])
         ]
       : null

filadelfia_web/app/index.js

@@ -6,11 +6,19 @@ const Browse = require('./page_browse')
 const Upload = require('./page_upload')
 window.m = m
 
-var fileref = document.createElement("link");
+let css = [
-fileref.setAttribute("rel", "stylesheet");
+  '/assets/app.css?v=2',
-fileref.setAttribute("type", "text/css");
+  '/assets/tempus-dominus.css',
-fileref.setAttribute("href", '/assets/app.css?v=2');
+  '/assets/fontawesome.css',
-document.head.appendChild(fileref) 
+]
+
+for (let item of css) {
+  var fileref = document.createElement("link");
+  fileref.setAttribute("rel", "stylesheet");
+  fileref.setAttribute("type", "text/css");
+  fileref.setAttribute("href", item);
+  document.head.appendChild(fileref)
+}
 
 m.route.setOrig = m.route.set
 m.route.set = function(path, data, options){

filadelfia_web/app/input.js

@@ -1,17 +1,70 @@
 const m = require('mithril')
+const popper = require('@popperjs/core')
+const tempus = require('@eonasdan/tempus-dominus')
 
 const Input = {
   oninit: function(vnode) {
+    this.tempus = null
+    this.subscription = null
+  },
+
+  onremove: function(vnode) {
+    if (!this.tempus) return
+    this.tempus.dispose()
+    this.tempus = null
+  },
+
+  getInput: function(vnode) {
+    switch (vnode.attrs.utility) {
+      case 'datetime':
+        return m('input', {
+          type: 'text',
+          oncreate: (e) => {
+            this.tempus = new tempus.TempusDominus(e.dom, {
+              defaultDate: vnode.attrs.form[vnode.attrs.formKey],
+              viewDate: vnode.attrs.form[vnode.attrs.formKey],
+              localization: {
+                locale: 'is',
+                startOfTheWeek: 0,
+                hourCycle: 'h23',
+                dateFormats: {
+                  LTS: 'H:mm:ss',
+                  LT: 'H:mm',
+                  L: 'dd.MM.yyyy',
+                  LL: 'd [de] MMMM [de] yyyy',
+                  LLL: 'd [de] MMMM [de] yyyy H:mm',
+                  LLLL: 'dddd, d [de] MMMM [de] yyyy H:mm',
+                },
+              },
+            })
+            this.subscription = this.tempus.subscribe(tempus.Namespace.events.change, (e) => {
+              console.log(e);
+            });
+          },
+        })
+      default:
+        return m('input', {
+          type: vnode.attrs.type || 'text',
+          value: vnode.attrs.form[vnode.attrs.formKey],
+          oninput: (e) => { vnode.attrs.form[vnode.attrs.formKey] = e.currentTarget.value },
+        })
+    }
   },
 
   view: function(vnode) {
+    let input = m('input', {
+      type: vnode.attrs.type || 'text',
+      value: vnode.attrs.form[vnode.attrs.formKey],
+      oninput: (e) => { vnode.attrs.form[vnode.attrs.formKey] = e.currentTarget.value },
+    })
+
+    if (vnode.attrs.utility === 'datetime') {
+
+    }
+
     return [
       m('label', vnode.attrs.label),
-      m('input', {
+      this.getInput(vnode),
-        type: vnode.attrs.type || 'text',
-        value: vnode.attrs.form[vnode.attrs.formKey],
-        oninput: (e) => { vnode.attrs.form[vnode.attrs.formKey] = e.currentTarget.value },
-      }),
     ]
   },
 }

filadelfia_web/app/lang.js

@@ -0,0 +1,76 @@
+const out = {
+  currentlang: 'en',
+}
+
+const i18n = {
+  lang_change_long:       ['Skipta yfir á íslensku',
+                           'Change to english'],
+  lang_current:           ['en',
+                           'is'],
+  header_title:           ['Fíladelfia archival center',
+                           'Fíladelfia myndhvelfing'],
+  header_logout:          ['Log out',
+                           'Skrá út'],
+  title:                  ['Title',
+                           'Titill'],
+  date:                   ['Date',
+                           'Dagsetning'],
+  language:               ['EN',
+                           'IS'],
+  upload_goto:            ['Upload',
+                           'Upphlaða'],
+  login_error:            ['Error while logging in: {0}',
+                           'Villa við innskráningu: {0}'],
+  login_error_auth:       ['Unknown error from server. Try again later.',
+                           'Óþekkt villa frá vefþjóni. Reyndu aftur seinna.'],
+  login_missing_email:    ['Email is missing',
+                           'Email eða nafn vantar'],
+  login_missing_password: ['Password is missing',
+                           'Lykilorð vantar'],
+  login_email:            ['Email or name',
+                           'Email eða nafn'],
+  login_password:         ['Password',
+                           'Lykilorð'],
+  login_submit:           ['Log in',
+                           'Skrá inn'],
+  login_footer:           ['Photo by {0} on {1}',
+                           'Mynd eftir {0} frá {1}'],
+}
+const langs = {
+  'en': 0,
+  'is': 1,
+}
+
+const regexNumber = new RegExp('^\\d+$')
+
+out.langset = function(lang) {
+  out.currentlang = lang
+  let index = langs[lang]
+  let keys = Object.keys(i18n)
+  for (let key of keys) {
+    out[key] = i18n[key][index]
+  }
+}
+
+out.langtoggle = function() {
+  out.langset(out.currentlang === 'en' ? 'is' : 'en')
+  return false
+}
+
+out.format = function(str, ...args) {
+  return out.mformat(str, ...args).join('')
+}
+
+out.mformat = function(str, ...args) {
+  let split = (str || '').split(/\{|\}/)
+  return split.map(function(item) {
+    if (regexNumber.test(item)) {
+      return args[Number(item)] || item
+    }
+    return item
+  })
+}
+
+out.langset('is')
+
+module.exports = out

filadelfia_web/app/page_login.js

@@ -2,6 +2,7 @@ const m = require('mithril')
 const Authentication = require('./authentication')
 const api = require('./api')
 const Input = require('./input')
+const lang = require('./lang')
 
 const Login = {
   oninit: function(vnode) {
@@ -19,8 +20,8 @@ const Login = {
     e.preventDefault()
     this.error = ''
 
-    if (!this.form.password) this.error = 'Password is missing'
+    if (!this.form.email) this.error = lang.login_missing_email // Email is missing
-    if (!this.form.email) this.error = 'Email is missing'
+    if (!this.form.password) this.error = lang.login_missing_password // Password is missing
 
     if (this.error) return false
 
@@ -30,12 +31,12 @@ const Login = {
       body: this.form,
     })
     .then((result) => {
-      if (!result.token) return Promise.reject(new Error('Server authentication down.'))
+      if (!result.token) return Promise.reject(new Error(lang.login_error_auth)) // Unknown error from server. Try again later
       Authentication.updateToken(result.token)
       m.route.set(this.redirect || '/browse')
     })
     .catch((error) => {
-      this.error = 'Error while logging in: ' + error.message
+      this.error = lang.format(lang.login_error, error.message) // Error while logging in:
       this.form.password = ''
     })
 
@@ -49,15 +50,15 @@ const Login = {
           m('form', {
             onsubmit: this.loginuser.bind(this, vnode),
           }, [
-            m('h3', 'Filadelfia archival center'),
+            m('h3', lang.header_title /* Filadelfia archival center */),
             this.error ? m('p.error', this.error) : null,
             m(Input, {
-              label: 'Email or name',
+              label: lang.login_email, // Email or name
               form: this.form,
               formKey: 'email',
             }),
             m(Input, {
-              label: 'Password',
+              label: lang.login_password, // Password
               type: 'password',
               form: this.form,
               formKey: 'password',
@@ -65,18 +66,17 @@ const Login = {
             m('input.spinner', {
               hidden: api.loading,
               type: 'submit',
-              value: 'Log in',
+              value: lang.login_submit, // Log in
             }),
             api.loading ? m('div.loading-spinner') : null,
+            m('a', { onclick: lang.langtoggle }, lang.lang_change_long /* Skipta yfir á íslensku */),
           ]),
-          m('div.login--asuna.spritesheet'),
         ]),
-        m('footer', [
+        m('footer', lang.mformat(
-            'Photo by ',
+            lang.login_footer, // Photo by X on Y
             m('a', { href: 'https://unsplash.com/@franhotchin?utm_content=creditCopyText&utm_medium=referral&utm_source=unsplash', target: '_blank' }, 'Francesca Hotchin'),
-            ' on ',
             m('a', { href: 'https://unsplash.com/photos/landscape-photo-of-mountain-covered-with-snow-FN-cedy6NHA?utm_content=creditCopyText&utm_medium=referral&utm_source=unsplash', target: '_blank' }, 'Unsplash'),
-        ]),
+        )),
       ]),
     ]
   },

filadelfia_web/app/page_upload.js

@@ -7,14 +7,23 @@ const Upload = {
   oninit: function(vnode) {
     Authentication.requiresLogin()
     this.error = ''
+    let d = new Date()
+    d.setDate(d.getDate() - d.getDay())
+    d.setHours(11)
+    d.setMinutes(0)
+    d.setSeconds(0)
+    d.setMilliseconds(0)
+
     this.form = {
       title: '',
-      date: new Date(),
+      date: d,
       file: null,
     }
   },
   
   uploadvideo: function(vnode, e) {
+    console.log(this.form)
+    return false
   },
 
   view: function(vnode) {
@@ -33,18 +42,18 @@ const Upload = {
             }),
             m(Input, {
               label: 'Date',
-              type: 'datetime',
+              type: 'text',
+              utility: 'datetime',
               form: this.form,
               formKey: 'date',
             }),
             m('input.spinner', {
               hidden: api.loading,
               type: 'submit',
-              value: 'Log in',
+              value: 'Begin upload',
             }),
             api.loading ? m('div.loading-spinner') : null,
           ]),
-          m('div.login--asuna.spritesheet'),
         ]),
       ]),
     ]

filadelfia_web/package.json

@@ -11,7 +11,7 @@
     "start": "node index.mjs",
     "test": "echo \"Error: no test specified\" && exit 1",
     "build:prod": "asbundle app/index.js public/assets/app.js",
-    "build": "asbundle app/index.js public/assets/app.js",
+    "build": "esbuild app/index.js --bundle --outfile=public/assets/app.js",
     "dev:build": "eltro --watch build --npm build",
     "dev:server": "eltro --watch server --npm server",
     "dev:build:old": "npm-watch build",
@@ -56,8 +56,8 @@
   "devDependencies": {
     "@eonasdan/tempus-dominus": "^6.7.19",
     "@popperjs/core": "^2.11.8",
-    "asbundle": "^2.6.1",
     "eltro": "^1.4.4",
+    "esbuild": "^0.19.5",
     "flaska": "^1.3.2",
     "mithril": "^2.2.2",
     "service-core": "^3.0.0-beta.17"

filadelfia_web/public/assets/tempus-dominus.css

@@ -0,0 +1,700 @@
+.visually-hidden, .tempus-dominus-widget [data-action]::after {
+  position: absolute !important;
+  width: 1px !important;
+  height: 1px !important;
+  padding: 0 !important;
+  margin: -1px !important;
+  overflow: hidden !important;
+  clip: rect(0, 0, 0, 0) !important;
+  white-space: nowrap !important;
+  border: 0 !important;
+}
+
+.tempus-dominus-widget {
+  list-style: none;
+  padding: 4px;
+  width: 19rem;
+  border-radius: 4px;
+  display: none;
+  z-index: 9999;
+  box-shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.2), 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12);
+}
+.tempus-dominus-widget.calendarWeeks {
+  width: 21rem;
+}
+.tempus-dominus-widget.calendarWeeks .date-container-days {
+  grid-auto-columns: 12.5%;
+  grid-template-areas: "a a a a a a a a";
+}
+.tempus-dominus-widget [data-action] {
+  cursor: pointer;
+}
+.tempus-dominus-widget [data-action]::after {
+  content: attr(title);
+}
+.tempus-dominus-widget [data-action].disabled, .tempus-dominus-widget [data-action].disabled:hover {
+  background: none;
+  cursor: not-allowed;
+}
+.tempus-dominus-widget .arrow {
+  display: none;
+}
+.tempus-dominus-widget.show {
+  display: block;
+}
+.tempus-dominus-widget.show.date-container {
+  min-height: 315px;
+}
+.tempus-dominus-widget.show.time-container {
+  min-height: 217px;
+}
+.tempus-dominus-widget .td-collapse:not(.show) {
+  display: none;
+}
+.tempus-dominus-widget .td-collapsing {
+  height: 0;
+  overflow: hidden;
+  transition: height 0.35s ease;
+}
+@media (min-width: 576px) {
+  .tempus-dominus-widget.timepicker-sbs {
+    width: 38em;
+  }
+}
+@media (min-width: 768px) {
+  .tempus-dominus-widget.timepicker-sbs {
+    width: 38em;
+  }
+}
+@media (min-width: 992px) {
+  .tempus-dominus-widget.timepicker-sbs {
+    width: 38em;
+  }
+}
+.tempus-dominus-widget.timepicker-sbs .td-row {
+  display: flex;
+}
+.tempus-dominus-widget.timepicker-sbs .td-row .td-half {
+  flex: 0 0 auto;
+  width: 50%;
+}
+.tempus-dominus-widget div[data-action]:active {
+  box-shadow: none;
+}
+.tempus-dominus-widget .timepicker-hour,
+.tempus-dominus-widget .timepicker-minute,
+.tempus-dominus-widget .timepicker-second {
+  width: 54px;
+  font-weight: bold;
+  font-size: 1.2em;
+  margin: 0;
+}
+.tempus-dominus-widget button[data-action] {
+  padding: 6px;
+}
+.tempus-dominus-widget .toggleMeridiem {
+  text-align: center;
+  height: 38px;
+}
+.tempus-dominus-widget .calendar-header {
+  display: grid;
+  grid-template-areas: "a a a";
+  margin-bottom: 10px;
+  font-weight: bold;
+}
+.tempus-dominus-widget .calendar-header .next {
+  text-align: right;
+  padding-right: 10px;
+}
+.tempus-dominus-widget .calendar-header .previous {
+  text-align: left;
+  padding-left: 10px;
+}
+.tempus-dominus-widget .calendar-header .picker-switch {
+  text-align: center;
+}
+.tempus-dominus-widget .toolbar {
+  display: grid;
+  grid-auto-flow: column;
+  grid-auto-rows: 40px;
+}
+.tempus-dominus-widget .toolbar div {
+  border-radius: 999px;
+  align-items: center;
+  justify-content: center;
+  box-sizing: border-box;
+  display: flex;
+}
+.tempus-dominus-widget .date-container-days {
+  display: grid;
+  grid-template-areas: "a a a a a a a";
+  grid-auto-rows: 40px;
+  grid-auto-columns: 14.2857142857%;
+}
+.tempus-dominus-widget .date-container-days .range-in {
+  background-color: #01419e !important;
+  border: none;
+  border-radius: 0 !important;
+  box-shadow: -5px 0 0 #01419e, 5px 0 0 #01419e;
+}
+.tempus-dominus-widget .date-container-days .range-end {
+  border-radius: 0 50px 50px 0 !important;
+}
+.tempus-dominus-widget .date-container-days .range-start {
+  border-radius: 50px 0 0 50px !important;
+}
+.tempus-dominus-widget .date-container-days .dow {
+  align-items: center;
+  justify-content: center;
+  text-align: center;
+}
+.tempus-dominus-widget .date-container-days .cw {
+  width: 90%;
+  height: 90%;
+  align-items: center;
+  justify-content: center;
+  display: flex;
+  font-size: 0.8em;
+  line-height: 20px;
+  cursor: default;
+}
+.tempus-dominus-widget .date-container-decades,
+.tempus-dominus-widget .date-container-years,
+.tempus-dominus-widget .date-container-months {
+  display: grid;
+  grid-template-areas: "a a a";
+  grid-auto-rows: calc((19rem - 8px) / 7);
+}
+.tempus-dominus-widget .time-container-hour,
+.tempus-dominus-widget .time-container-minute,
+.tempus-dominus-widget .time-container-second {
+  display: grid;
+  grid-template-areas: "a a a a";
+  grid-auto-rows: calc((19rem - 8px) / 7);
+}
+.tempus-dominus-widget .time-container-clock {
+  display: grid;
+  grid-auto-rows: calc((19rem - 8px) / 7);
+}
+.tempus-dominus-widget .time-container-clock .no-highlight {
+  width: 90%;
+  height: 90%;
+  align-items: center;
+  justify-content: center;
+  display: flex;
+}
+.tempus-dominus-widget .date-container-decades div:not(.no-highlight),
+.tempus-dominus-widget .date-container-years div:not(.no-highlight),
+.tempus-dominus-widget .date-container-months div:not(.no-highlight),
+.tempus-dominus-widget .date-container-days div:not(.no-highlight),
+.tempus-dominus-widget .time-container-clock div:not(.no-highlight),
+.tempus-dominus-widget .time-container-hour div:not(.no-highlight),
+.tempus-dominus-widget .time-container-minute div:not(.no-highlight),
+.tempus-dominus-widget .time-container-second div:not(.no-highlight) {
+  width: 90%;
+  height: 90%;
+  border-radius: 999px;
+  align-items: center;
+  justify-content: center;
+  box-sizing: border-box;
+  display: flex;
+}
+.tempus-dominus-widget .date-container-decades div:not(.no-highlight).disabled, .tempus-dominus-widget .date-container-decades div:not(.no-highlight).disabled:hover,
+.tempus-dominus-widget .date-container-years div:not(.no-highlight).disabled,
+.tempus-dominus-widget .date-container-years div:not(.no-highlight).disabled:hover,
+.tempus-dominus-widget .date-container-months div:not(.no-highlight).disabled,
+.tempus-dominus-widget .date-container-months div:not(.no-highlight).disabled:hover,
+.tempus-dominus-widget .date-container-days div:not(.no-highlight).disabled,
+.tempus-dominus-widget .date-container-days div:not(.no-highlight).disabled:hover,
+.tempus-dominus-widget .time-container-clock div:not(.no-highlight).disabled,
+.tempus-dominus-widget .time-container-clock div:not(.no-highlight).disabled:hover,
+.tempus-dominus-widget .time-container-hour div:not(.no-highlight).disabled,
+.tempus-dominus-widget .time-container-hour div:not(.no-highlight).disabled:hover,
+.tempus-dominus-widget .time-container-minute div:not(.no-highlight).disabled,
+.tempus-dominus-widget .time-container-minute div:not(.no-highlight).disabled:hover,
+.tempus-dominus-widget .time-container-second div:not(.no-highlight).disabled,
+.tempus-dominus-widget .time-container-second div:not(.no-highlight).disabled:hover {
+  background: none;
+  cursor: not-allowed;
+}
+.tempus-dominus-widget .date-container-decades div:not(.no-highlight).today,
+.tempus-dominus-widget .date-container-years div:not(.no-highlight).today,
+.tempus-dominus-widget .date-container-months div:not(.no-highlight).today,
+.tempus-dominus-widget .date-container-days div:not(.no-highlight).today,
+.tempus-dominus-widget .time-container-clock div:not(.no-highlight).today,
+.tempus-dominus-widget .time-container-hour div:not(.no-highlight).today,
+.tempus-dominus-widget .time-container-minute div:not(.no-highlight).today,
+.tempus-dominus-widget .time-container-second div:not(.no-highlight).today {
+  position: relative;
+}
+.tempus-dominus-widget .date-container-decades div:not(.no-highlight).today:before,
+.tempus-dominus-widget .date-container-years div:not(.no-highlight).today:before,
+.tempus-dominus-widget .date-container-months div:not(.no-highlight).today:before,
+.tempus-dominus-widget .date-container-days div:not(.no-highlight).today:before,
+.tempus-dominus-widget .time-container-clock div:not(.no-highlight).today:before,
+.tempus-dominus-widget .time-container-hour div:not(.no-highlight).today:before,
+.tempus-dominus-widget .time-container-minute div:not(.no-highlight).today:before,
+.tempus-dominus-widget .time-container-second div:not(.no-highlight).today:before {
+  content: "";
+  display: inline-block;
+  border: solid transparent;
+  border-width: 0 0 7px 7px;
+  position: absolute;
+  bottom: 6px;
+  right: 6px;
+}
+.tempus-dominus-widget .time-container {
+  margin-bottom: 0.5rem;
+}
+.tempus-dominus-widget button {
+  display: inline-block;
+  font-weight: 400;
+  line-height: 1.5;
+  text-align: center;
+  text-decoration: none;
+  vertical-align: middle;
+  cursor: pointer;
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  user-select: none;
+  padding: 0.375rem 0.75rem;
+  font-size: 1rem;
+  border-radius: 0.25rem;
+  transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
+}
+.tempus-dominus-widget.tempus-dominus-widget-readonly table td.day,
+.tempus-dominus-widget.tempus-dominus-widget-readonly table td.hour,
+.tempus-dominus-widget.tempus-dominus-widget-readonly table td.minute,
+.tempus-dominus-widget.tempus-dominus-widget-readonly table td.second,
+.tempus-dominus-widget.tempus-dominus-widget-readonly table td [data-action=incrementHours],
+.tempus-dominus-widget.tempus-dominus-widget-readonly table td [data-action=incrementMinutes],
+.tempus-dominus-widget.tempus-dominus-widget-readonly table td [data-action=incrementSeconds],
+.tempus-dominus-widget.tempus-dominus-widget-readonly table td [data-action=decrementHours],
+.tempus-dominus-widget.tempus-dominus-widget-readonly table td [data-action=decrementMinutes],
+.tempus-dominus-widget.tempus-dominus-widget-readonly table td [data-action=decrementSeconds],
+.tempus-dominus-widget.tempus-dominus-widget-readonly table td [data-action=showHours],
+.tempus-dominus-widget.tempus-dominus-widget-readonly table td [data-action=showMinutes],
+.tempus-dominus-widget.tempus-dominus-widget-readonly table td [data-action=showSeconds],
+.tempus-dominus-widget.tempus-dominus-widget-readonly table td [data-action=togglePeriod] {
+  pointer-events: none;
+  cursor: default;
+}
+.tempus-dominus-widget.tempus-dominus-widget-readonly table td.day:hover,
+.tempus-dominus-widget.tempus-dominus-widget-readonly table td.hour:hover,
+.tempus-dominus-widget.tempus-dominus-widget-readonly table td.minute:hover,
+.tempus-dominus-widget.tempus-dominus-widget-readonly table td.second:hover,
+.tempus-dominus-widget.tempus-dominus-widget-readonly table td [data-action=incrementHours]:hover,
+.tempus-dominus-widget.tempus-dominus-widget-readonly table td [data-action=incrementMinutes]:hover,
+.tempus-dominus-widget.tempus-dominus-widget-readonly table td [data-action=incrementSeconds]:hover,
+.tempus-dominus-widget.tempus-dominus-widget-readonly table td [data-action=decrementHours]:hover,
+.tempus-dominus-widget.tempus-dominus-widget-readonly table td [data-action=decrementMinutes]:hover,
+.tempus-dominus-widget.tempus-dominus-widget-readonly table td [data-action=decrementSeconds]:hover,
+.tempus-dominus-widget.tempus-dominus-widget-readonly table td [data-action=showHours]:hover,
+.tempus-dominus-widget.tempus-dominus-widget-readonly table td [data-action=showMinutes]:hover,
+.tempus-dominus-widget.tempus-dominus-widget-readonly table td [data-action=showSeconds]:hover,
+.tempus-dominus-widget.tempus-dominus-widget-readonly table td [data-action=togglePeriod]:hover {
+  background: none;
+}
+.tempus-dominus-widget.light {
+  color: #000;
+  background-color: #fff;
+}
+.tempus-dominus-widget.light [data-action].disabled, .tempus-dominus-widget.light [data-action].disabled:hover {
+  color: #6c757d;
+}
+.tempus-dominus-widget.light .toolbar div:hover {
+  background: #e9ecef;
+}
+.tempus-dominus-widget.light .date-container-days .dow {
+  color: rgba(0, 0, 0, 0.5);
+}
+.tempus-dominus-widget.light .date-container-days .cw {
+  color: rgba(0, 0, 0, 0.38);
+}
+.tempus-dominus-widget.light .date-container-decades div:not(.no-highlight):hover,
+.tempus-dominus-widget.light .date-container-years div:not(.no-highlight):hover,
+.tempus-dominus-widget.light .date-container-months div:not(.no-highlight):hover,
+.tempus-dominus-widget.light .date-container-days div:not(.no-highlight):hover,
+.tempus-dominus-widget.light .time-container-clock div:not(.no-highlight):hover,
+.tempus-dominus-widget.light .time-container-hour div:not(.no-highlight):hover,
+.tempus-dominus-widget.light .time-container-minute div:not(.no-highlight):hover,
+.tempus-dominus-widget.light .time-container-second div:not(.no-highlight):hover {
+  background: #e9ecef;
+}
+.tempus-dominus-widget.light .date-container-decades div:not(.no-highlight).active,
+.tempus-dominus-widget.light .date-container-years div:not(.no-highlight).active,
+.tempus-dominus-widget.light .date-container-months div:not(.no-highlight).active,
+.tempus-dominus-widget.light .date-container-days div:not(.no-highlight).active,
+.tempus-dominus-widget.light .date-container-days div.range-in:not(.no-highlight),
+.tempus-dominus-widget.light .date-container-days div.range-end:not(.no-highlight),
+.tempus-dominus-widget.light .date-container-days div.range-start:not(.no-highlight),
+.tempus-dominus-widget.light .time-container-clock div:not(.no-highlight).active,
+.tempus-dominus-widget.light .time-container-hour div:not(.no-highlight).active,
+.tempus-dominus-widget.light .time-container-minute div:not(.no-highlight).active,
+.tempus-dominus-widget.light .time-container-second div:not(.no-highlight).active {
+  background-color: #0d6efd;
+  color: #fff;
+  text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
+}
+.tempus-dominus-widget.light .date-container-decades div:not(.no-highlight).active.old, .tempus-dominus-widget.light .date-container-decades .date-container-days div.range-in:not(.no-highlight).old, .tempus-dominus-widget.light .date-container-days .date-container-decades div.range-in:not(.no-highlight).old, .tempus-dominus-widget.light .date-container-decades .date-container-days div.range-end:not(.no-highlight).old, .tempus-dominus-widget.light .date-container-days .date-container-decades div.range-end:not(.no-highlight).old, .tempus-dominus-widget.light .date-container-decades .date-container-days div.range-start:not(.no-highlight).old, .tempus-dominus-widget.light .date-container-days .date-container-decades div.range-start:not(.no-highlight).old, .tempus-dominus-widget.light .date-container-decades div:not(.no-highlight).active.new, .tempus-dominus-widget.light .date-container-decades .date-container-days div.range-in:not(.no-highlight).new, .tempus-dominus-widget.light .date-container-days .date-container-decades div.range-in:not(.no-highlight).new, .tempus-dominus-widget.light .date-container-decades .date-container-days div.range-end:not(.no-highlight).new, .tempus-dominus-widget.light .date-container-days .date-container-decades div.range-end:not(.no-highlight).new, .tempus-dominus-widget.light .date-container-decades .date-container-days div.range-start:not(.no-highlight).new, .tempus-dominus-widget.light .date-container-days .date-container-decades div.range-start:not(.no-highlight).new,
+.tempus-dominus-widget.light .date-container-years div:not(.no-highlight).active.old,
+.tempus-dominus-widget.light .date-container-years .date-container-days div.range-in:not(.no-highlight).old,
+.tempus-dominus-widget.light .date-container-days .date-container-years div.range-in:not(.no-highlight).old,
+.tempus-dominus-widget.light .date-container-years .date-container-days div.range-end:not(.no-highlight).old,
+.tempus-dominus-widget.light .date-container-days .date-container-years div.range-end:not(.no-highlight).old,
+.tempus-dominus-widget.light .date-container-years .date-container-days div.range-start:not(.no-highlight).old,
+.tempus-dominus-widget.light .date-container-days .date-container-years div.range-start:not(.no-highlight).old,
+.tempus-dominus-widget.light .date-container-years div:not(.no-highlight).active.new,
+.tempus-dominus-widget.light .date-container-years .date-container-days div.range-in:not(.no-highlight).new,
+.tempus-dominus-widget.light .date-container-days .date-container-years div.range-in:not(.no-highlight).new,
+.tempus-dominus-widget.light .date-container-years .date-container-days div.range-end:not(.no-highlight).new,
+.tempus-dominus-widget.light .date-container-days .date-container-years div.range-end:not(.no-highlight).new,
+.tempus-dominus-widget.light .date-container-years .date-container-days div.range-start:not(.no-highlight).new,
+.tempus-dominus-widget.light .date-container-days .date-container-years div.range-start:not(.no-highlight).new,
+.tempus-dominus-widget.light .date-container-months div:not(.no-highlight).active.old,
+.tempus-dominus-widget.light .date-container-months .date-container-days div.range-in:not(.no-highlight).old,
+.tempus-dominus-widget.light .date-container-days .date-container-months div.range-in:not(.no-highlight).old,
+.tempus-dominus-widget.light .date-container-months .date-container-days div.range-end:not(.no-highlight).old,
+.tempus-dominus-widget.light .date-container-days .date-container-months div.range-end:not(.no-highlight).old,
+.tempus-dominus-widget.light .date-container-months .date-container-days div.range-start:not(.no-highlight).old,
+.tempus-dominus-widget.light .date-container-days .date-container-months div.range-start:not(.no-highlight).old,
+.tempus-dominus-widget.light .date-container-months div:not(.no-highlight).active.new,
+.tempus-dominus-widget.light .date-container-months .date-container-days div.range-in:not(.no-highlight).new,
+.tempus-dominus-widget.light .date-container-days .date-container-months div.range-in:not(.no-highlight).new,
+.tempus-dominus-widget.light .date-container-months .date-container-days div.range-end:not(.no-highlight).new,
+.tempus-dominus-widget.light .date-container-days .date-container-months div.range-end:not(.no-highlight).new,
+.tempus-dominus-widget.light .date-container-months .date-container-days div.range-start:not(.no-highlight).new,
+.tempus-dominus-widget.light .date-container-days .date-container-months div.range-start:not(.no-highlight).new,
+.tempus-dominus-widget.light .date-container-days div:not(.no-highlight).active.old,
+.tempus-dominus-widget.light .date-container-days div.range-in:not(.no-highlight).old,
+.tempus-dominus-widget.light .date-container-days div.range-end:not(.no-highlight).old,
+.tempus-dominus-widget.light .date-container-days div.range-start:not(.no-highlight).old,
+.tempus-dominus-widget.light .date-container-days div:not(.no-highlight).active.new,
+.tempus-dominus-widget.light .date-container-days div.range-in:not(.no-highlight).new,
+.tempus-dominus-widget.light .date-container-days div.range-end:not(.no-highlight).new,
+.tempus-dominus-widget.light .date-container-days div.range-start:not(.no-highlight).new,
+.tempus-dominus-widget.light .time-container-clock div:not(.no-highlight).active.old,
+.tempus-dominus-widget.light .time-container-clock .date-container-days div.range-in:not(.no-highlight).old,
+.tempus-dominus-widget.light .date-container-days .time-container-clock div.range-in:not(.no-highlight).old,
+.tempus-dominus-widget.light .time-container-clock .date-container-days div.range-end:not(.no-highlight).old,
+.tempus-dominus-widget.light .date-container-days .time-container-clock div.range-end:not(.no-highlight).old,
+.tempus-dominus-widget.light .time-container-clock .date-container-days div.range-start:not(.no-highlight).old,
+.tempus-dominus-widget.light .date-container-days .time-container-clock div.range-start:not(.no-highlight).old,
+.tempus-dominus-widget.light .time-container-clock div:not(.no-highlight).active.new,
+.tempus-dominus-widget.light .time-container-clock .date-container-days div.range-in:not(.no-highlight).new,
+.tempus-dominus-widget.light .date-container-days .time-container-clock div.range-in:not(.no-highlight).new,
+.tempus-dominus-widget.light .time-container-clock .date-container-days div.range-end:not(.no-highlight).new,
+.tempus-dominus-widget.light .date-container-days .time-container-clock div.range-end:not(.no-highlight).new,
+.tempus-dominus-widget.light .time-container-clock .date-container-days div.range-start:not(.no-highlight).new,
+.tempus-dominus-widget.light .date-container-days .time-container-clock div.range-start:not(.no-highlight).new,
+.tempus-dominus-widget.light .time-container-hour div:not(.no-highlight).active.old,
+.tempus-dominus-widget.light .time-container-hour .date-container-days div.range-in:not(.no-highlight).old,
+.tempus-dominus-widget.light .date-container-days .time-container-hour div.range-in:not(.no-highlight).old,
+.tempus-dominus-widget.light .time-container-hour .date-container-days div.range-end:not(.no-highlight).old,
+.tempus-dominus-widget.light .date-container-days .time-container-hour div.range-end:not(.no-highlight).old,
+.tempus-dominus-widget.light .time-container-hour .date-container-days div.range-start:not(.no-highlight).old,
+.tempus-dominus-widget.light .date-container-days .time-container-hour div.range-start:not(.no-highlight).old,
+.tempus-dominus-widget.light .time-container-hour div:not(.no-highlight).active.new,
+.tempus-dominus-widget.light .time-container-hour .date-container-days div.range-in:not(.no-highlight).new,
+.tempus-dominus-widget.light .date-container-days .time-container-hour div.range-in:not(.no-highlight).new,
+.tempus-dominus-widget.light .time-container-hour .date-container-days div.range-end:not(.no-highlight).new,
+.tempus-dominus-widget.light .date-container-days .time-container-hour div.range-end:not(.no-highlight).new,
+.tempus-dominus-widget.light .time-container-hour .date-container-days div.range-start:not(.no-highlight).new,
+.tempus-dominus-widget.light .date-container-days .time-container-hour div.range-start:not(.no-highlight).new,
+.tempus-dominus-widget.light .time-container-minute div:not(.no-highlight).active.old,
+.tempus-dominus-widget.light .time-container-minute .date-container-days div.range-in:not(.no-highlight).old,
+.tempus-dominus-widget.light .date-container-days .time-container-minute div.range-in:not(.no-highlight).old,
+.tempus-dominus-widget.light .time-container-minute .date-container-days div.range-end:not(.no-highlight).old,
+.tempus-dominus-widget.light .date-container-days .time-container-minute div.range-end:not(.no-highlight).old,
+.tempus-dominus-widget.light .time-container-minute .date-container-days div.range-start:not(.no-highlight).old,
+.tempus-dominus-widget.light .date-container-days .time-container-minute div.range-start:not(.no-highlight).old,
+.tempus-dominus-widget.light .time-container-minute div:not(.no-highlight).active.new,
+.tempus-dominus-widget.light .time-container-minute .date-container-days div.range-in:not(.no-highlight).new,
+.tempus-dominus-widget.light .date-container-days .time-container-minute div.range-in:not(.no-highlight).new,
+.tempus-dominus-widget.light .time-container-minute .date-container-days div.range-end:not(.no-highlight).new,
+.tempus-dominus-widget.light .date-container-days .time-container-minute div.range-end:not(.no-highlight).new,
+.tempus-dominus-widget.light .time-container-minute .date-container-days div.range-start:not(.no-highlight).new,
+.tempus-dominus-widget.light .date-container-days .time-container-minute div.range-start:not(.no-highlight).new,
+.tempus-dominus-widget.light .time-container-second div:not(.no-highlight).active.old,
+.tempus-dominus-widget.light .time-container-second .date-container-days div.range-in:not(.no-highlight).old,
+.tempus-dominus-widget.light .date-container-days .time-container-second div.range-in:not(.no-highlight).old,
+.tempus-dominus-widget.light .time-container-second .date-container-days div.range-end:not(.no-highlight).old,
+.tempus-dominus-widget.light .date-container-days .time-container-second div.range-end:not(.no-highlight).old,
+.tempus-dominus-widget.light .time-container-second .date-container-days div.range-start:not(.no-highlight).old,
+.tempus-dominus-widget.light .date-container-days .time-container-second div.range-start:not(.no-highlight).old,
+.tempus-dominus-widget.light .time-container-second div:not(.no-highlight).active.new,
+.tempus-dominus-widget.light .time-container-second .date-container-days div.range-in:not(.no-highlight).new,
+.tempus-dominus-widget.light .date-container-days .time-container-second div.range-in:not(.no-highlight).new,
+.tempus-dominus-widget.light .time-container-second .date-container-days div.range-end:not(.no-highlight).new,
+.tempus-dominus-widget.light .date-container-days .time-container-second div.range-end:not(.no-highlight).new,
+.tempus-dominus-widget.light .time-container-second .date-container-days div.range-start:not(.no-highlight).new,
+.tempus-dominus-widget.light .date-container-days .time-container-second div.range-start:not(.no-highlight).new {
+  color: #fff;
+}
+.tempus-dominus-widget.light .date-container-decades div:not(.no-highlight).active.today:before,
+.tempus-dominus-widget.light .date-container-years div:not(.no-highlight).active.today:before,
+.tempus-dominus-widget.light .date-container-months div:not(.no-highlight).active.today:before,
+.tempus-dominus-widget.light .date-container-days div:not(.no-highlight).active.today:before,
+.tempus-dominus-widget.light .date-container-days div.range-in:not(.no-highlight).today:before,
+.tempus-dominus-widget.light .date-container-days div.range-end:not(.no-highlight).today:before,
+.tempus-dominus-widget.light .date-container-days div.range-start:not(.no-highlight).today:before,
+.tempus-dominus-widget.light .time-container-clock div:not(.no-highlight).active.today:before,
+.tempus-dominus-widget.light .time-container-hour div:not(.no-highlight).active.today:before,
+.tempus-dominus-widget.light .time-container-minute div:not(.no-highlight).active.today:before,
+.tempus-dominus-widget.light .time-container-second div:not(.no-highlight).active.today:before {
+  border-bottom-color: #fff;
+}
+.tempus-dominus-widget.light .date-container-decades div:not(.no-highlight).old, .tempus-dominus-widget.light .date-container-decades div:not(.no-highlight).new,
+.tempus-dominus-widget.light .date-container-years div:not(.no-highlight).old,
+.tempus-dominus-widget.light .date-container-years div:not(.no-highlight).new,
+.tempus-dominus-widget.light .date-container-months div:not(.no-highlight).old,
+.tempus-dominus-widget.light .date-container-months div:not(.no-highlight).new,
+.tempus-dominus-widget.light .date-container-days div:not(.no-highlight).old,
+.tempus-dominus-widget.light .date-container-days div:not(.no-highlight).new,
+.tempus-dominus-widget.light .time-container-clock div:not(.no-highlight).old,
+.tempus-dominus-widget.light .time-container-clock div:not(.no-highlight).new,
+.tempus-dominus-widget.light .time-container-hour div:not(.no-highlight).old,
+.tempus-dominus-widget.light .time-container-hour div:not(.no-highlight).new,
+.tempus-dominus-widget.light .time-container-minute div:not(.no-highlight).old,
+.tempus-dominus-widget.light .time-container-minute div:not(.no-highlight).new,
+.tempus-dominus-widget.light .time-container-second div:not(.no-highlight).old,
+.tempus-dominus-widget.light .time-container-second div:not(.no-highlight).new {
+  color: rgba(0, 0, 0, 0.38);
+}
+.tempus-dominus-widget.light .date-container-decades div:not(.no-highlight).disabled, .tempus-dominus-widget.light .date-container-decades div:not(.no-highlight).disabled:hover,
+.tempus-dominus-widget.light .date-container-years div:not(.no-highlight).disabled,
+.tempus-dominus-widget.light .date-container-years div:not(.no-highlight).disabled:hover,
+.tempus-dominus-widget.light .date-container-months div:not(.no-highlight).disabled,
+.tempus-dominus-widget.light .date-container-months div:not(.no-highlight).disabled:hover,
+.tempus-dominus-widget.light .date-container-days div:not(.no-highlight).disabled,
+.tempus-dominus-widget.light .date-container-days div:not(.no-highlight).disabled:hover,
+.tempus-dominus-widget.light .time-container-clock div:not(.no-highlight).disabled,
+.tempus-dominus-widget.light .time-container-clock div:not(.no-highlight).disabled:hover,
+.tempus-dominus-widget.light .time-container-hour div:not(.no-highlight).disabled,
+.tempus-dominus-widget.light .time-container-hour div:not(.no-highlight).disabled:hover,
+.tempus-dominus-widget.light .time-container-minute div:not(.no-highlight).disabled,
+.tempus-dominus-widget.light .time-container-minute div:not(.no-highlight).disabled:hover,
+.tempus-dominus-widget.light .time-container-second div:not(.no-highlight).disabled,
+.tempus-dominus-widget.light .time-container-second div:not(.no-highlight).disabled:hover {
+  color: #6c757d;
+}
+.tempus-dominus-widget.light .date-container-decades div:not(.no-highlight).today:before,
+.tempus-dominus-widget.light .date-container-years div:not(.no-highlight).today:before,
+.tempus-dominus-widget.light .date-container-months div:not(.no-highlight).today:before,
+.tempus-dominus-widget.light .date-container-days div:not(.no-highlight).today:before,
+.tempus-dominus-widget.light .time-container-clock div:not(.no-highlight).today:before,
+.tempus-dominus-widget.light .time-container-hour div:not(.no-highlight).today:before,
+.tempus-dominus-widget.light .time-container-minute div:not(.no-highlight).today:before,
+.tempus-dominus-widget.light .time-container-second div:not(.no-highlight).today:before {
+  border-bottom-color: #0d6efd;
+  border-top-color: rgba(0, 0, 0, 0.2);
+}
+.tempus-dominus-widget.light button {
+  color: #fff;
+  background-color: #0d6efd;
+  border-color: #0d6efd;
+}
+.tempus-dominus-widget.dark {
+  color: #e3e3e3;
+  background-color: #1b1b1b;
+}
+.tempus-dominus-widget.dark [data-action].disabled, .tempus-dominus-widget.dark [data-action].disabled:hover {
+  color: #6c757d;
+}
+.tempus-dominus-widget.dark .toolbar div:hover {
+  background: rgb(35, 38, 39);
+}
+.tempus-dominus-widget.dark .date-container-days .dow {
+  color: rgba(232, 230, 227, 0.5);
+}
+.tempus-dominus-widget.dark .date-container-days .range-in {
+  background-color: #0071c7 !important;
+  box-shadow: -5px 0 0 #0071c7, 5px 0 0 #0071c7;
+}
+.tempus-dominus-widget.dark .date-container-days .cw {
+  color: rgba(232, 230, 227, 0.38);
+}
+.tempus-dominus-widget.dark .date-container-decades div:not(.no-highlight):hover,
+.tempus-dominus-widget.dark .date-container-years div:not(.no-highlight):hover,
+.tempus-dominus-widget.dark .date-container-months div:not(.no-highlight):hover,
+.tempus-dominus-widget.dark .date-container-days div:not(.no-highlight):hover,
+.tempus-dominus-widget.dark .time-container-clock div:not(.no-highlight):hover,
+.tempus-dominus-widget.dark .time-container-hour div:not(.no-highlight):hover,
+.tempus-dominus-widget.dark .time-container-minute div:not(.no-highlight):hover,
+.tempus-dominus-widget.dark .time-container-second div:not(.no-highlight):hover {
+  background: rgb(35, 38, 39);
+}
+.tempus-dominus-widget.dark .date-container-decades div:not(.no-highlight).active,
+.tempus-dominus-widget.dark .date-container-years div:not(.no-highlight).active,
+.tempus-dominus-widget.dark .date-container-months div:not(.no-highlight).active,
+.tempus-dominus-widget.dark .date-container-days div:not(.no-highlight).active,
+.tempus-dominus-widget.dark .date-container-days div.range-in:not(.no-highlight),
+.tempus-dominus-widget.dark .date-container-days div.range-end:not(.no-highlight),
+.tempus-dominus-widget.dark .date-container-days div.range-start:not(.no-highlight),
+.tempus-dominus-widget.dark .time-container-clock div:not(.no-highlight).active,
+.tempus-dominus-widget.dark .time-container-hour div:not(.no-highlight).active,
+.tempus-dominus-widget.dark .time-container-minute div:not(.no-highlight).active,
+.tempus-dominus-widget.dark .time-container-second div:not(.no-highlight).active {
+  background-color: #4db2ff;
+  color: #fff;
+  text-shadow: 0 -1px 0 rgba(232, 230, 227, 0.25);
+}
+.tempus-dominus-widget.dark .date-container-decades div:not(.no-highlight).active.old, .tempus-dominus-widget.dark .date-container-decades .date-container-days div.range-in:not(.no-highlight).old, .tempus-dominus-widget.dark .date-container-days .date-container-decades div.range-in:not(.no-highlight).old, .tempus-dominus-widget.dark .date-container-decades .date-container-days div.range-end:not(.no-highlight).old, .tempus-dominus-widget.dark .date-container-days .date-container-decades div.range-end:not(.no-highlight).old, .tempus-dominus-widget.dark .date-container-decades .date-container-days div.range-start:not(.no-highlight).old, .tempus-dominus-widget.dark .date-container-days .date-container-decades div.range-start:not(.no-highlight).old, .tempus-dominus-widget.dark .date-container-decades div:not(.no-highlight).active.new, .tempus-dominus-widget.dark .date-container-decades .date-container-days div.range-in:not(.no-highlight).new, .tempus-dominus-widget.dark .date-container-days .date-container-decades div.range-in:not(.no-highlight).new, .tempus-dominus-widget.dark .date-container-decades .date-container-days div.range-end:not(.no-highlight).new, .tempus-dominus-widget.dark .date-container-days .date-container-decades div.range-end:not(.no-highlight).new, .tempus-dominus-widget.dark .date-container-decades .date-container-days div.range-start:not(.no-highlight).new, .tempus-dominus-widget.dark .date-container-days .date-container-decades div.range-start:not(.no-highlight).new,
+.tempus-dominus-widget.dark .date-container-years div:not(.no-highlight).active.old,
+.tempus-dominus-widget.dark .date-container-years .date-container-days div.range-in:not(.no-highlight).old,
+.tempus-dominus-widget.dark .date-container-days .date-container-years div.range-in:not(.no-highlight).old,
+.tempus-dominus-widget.dark .date-container-years .date-container-days div.range-end:not(.no-highlight).old,
+.tempus-dominus-widget.dark .date-container-days .date-container-years div.range-end:not(.no-highlight).old,
+.tempus-dominus-widget.dark .date-container-years .date-container-days div.range-start:not(.no-highlight).old,
+.tempus-dominus-widget.dark .date-container-days .date-container-years div.range-start:not(.no-highlight).old,
+.tempus-dominus-widget.dark .date-container-years div:not(.no-highlight).active.new,
+.tempus-dominus-widget.dark .date-container-years .date-container-days div.range-in:not(.no-highlight).new,
+.tempus-dominus-widget.dark .date-container-days .date-container-years div.range-in:not(.no-highlight).new,
+.tempus-dominus-widget.dark .date-container-years .date-container-days div.range-end:not(.no-highlight).new,
+.tempus-dominus-widget.dark .date-container-days .date-container-years div.range-end:not(.no-highlight).new,
+.tempus-dominus-widget.dark .date-container-years .date-container-days div.range-start:not(.no-highlight).new,
+.tempus-dominus-widget.dark .date-container-days .date-container-years div.range-start:not(.no-highlight).new,
+.tempus-dominus-widget.dark .date-container-months div:not(.no-highlight).active.old,
+.tempus-dominus-widget.dark .date-container-months .date-container-days div.range-in:not(.no-highlight).old,
+.tempus-dominus-widget.dark .date-container-days .date-container-months div.range-in:not(.no-highlight).old,
+.tempus-dominus-widget.dark .date-container-months .date-container-days div.range-end:not(.no-highlight).old,
+.tempus-dominus-widget.dark .date-container-days .date-container-months div.range-end:not(.no-highlight).old,
+.tempus-dominus-widget.dark .date-container-months .date-container-days div.range-start:not(.no-highlight).old,
+.tempus-dominus-widget.dark .date-container-days .date-container-months div.range-start:not(.no-highlight).old,
+.tempus-dominus-widget.dark .date-container-months div:not(.no-highlight).active.new,
+.tempus-dominus-widget.dark .date-container-months .date-container-days div.range-in:not(.no-highlight).new,
+.tempus-dominus-widget.dark .date-container-days .date-container-months div.range-in:not(.no-highlight).new,
+.tempus-dominus-widget.dark .date-container-months .date-container-days div.range-end:not(.no-highlight).new,
+.tempus-dominus-widget.dark .date-container-days .date-container-months div.range-end:not(.no-highlight).new,
+.tempus-dominus-widget.dark .date-container-months .date-container-days div.range-start:not(.no-highlight).new,
+.tempus-dominus-widget.dark .date-container-days .date-container-months div.range-start:not(.no-highlight).new,
+.tempus-dominus-widget.dark .date-container-days div:not(.no-highlight).active.old,
+.tempus-dominus-widget.dark .date-container-days div.range-in:not(.no-highlight).old,
+.tempus-dominus-widget.dark .date-container-days div.range-end:not(.no-highlight).old,
+.tempus-dominus-widget.dark .date-container-days div.range-start:not(.no-highlight).old,
+.tempus-dominus-widget.dark .date-container-days div:not(.no-highlight).active.new,
+.tempus-dominus-widget.dark .date-container-days div.range-in:not(.no-highlight).new,
+.tempus-dominus-widget.dark .date-container-days div.range-end:not(.no-highlight).new,
+.tempus-dominus-widget.dark .date-container-days div.range-start:not(.no-highlight).new,
+.tempus-dominus-widget.dark .time-container-clock div:not(.no-highlight).active.old,
+.tempus-dominus-widget.dark .time-container-clock .date-container-days div.range-in:not(.no-highlight).old,
+.tempus-dominus-widget.dark .date-container-days .time-container-clock div.range-in:not(.no-highlight).old,
+.tempus-dominus-widget.dark .time-container-clock .date-container-days div.range-end:not(.no-highlight).old,
+.tempus-dominus-widget.dark .date-container-days .time-container-clock div.range-end:not(.no-highlight).old,
+.tempus-dominus-widget.dark .time-container-clock .date-container-days div.range-start:not(.no-highlight).old,
+.tempus-dominus-widget.dark .date-container-days .time-container-clock div.range-start:not(.no-highlight).old,
+.tempus-dominus-widget.dark .time-container-clock div:not(.no-highlight).active.new,
+.tempus-dominus-widget.dark .time-container-clock .date-container-days div.range-in:not(.no-highlight).new,
+.tempus-dominus-widget.dark .date-container-days .time-container-clock div.range-in:not(.no-highlight).new,
+.tempus-dominus-widget.dark .time-container-clock .date-container-days div.range-end:not(.no-highlight).new,
+.tempus-dominus-widget.dark .date-container-days .time-container-clock div.range-end:not(.no-highlight).new,
+.tempus-dominus-widget.dark .time-container-clock .date-container-days div.range-start:not(.no-highlight).new,
+.tempus-dominus-widget.dark .date-container-days .time-container-clock div.range-start:not(.no-highlight).new,
+.tempus-dominus-widget.dark .time-container-hour div:not(.no-highlight).active.old,
+.tempus-dominus-widget.dark .time-container-hour .date-container-days div.range-in:not(.no-highlight).old,
+.tempus-dominus-widget.dark .date-container-days .time-container-hour div.range-in:not(.no-highlight).old,
+.tempus-dominus-widget.dark .time-container-hour .date-container-days div.range-end:not(.no-highlight).old,
+.tempus-dominus-widget.dark .date-container-days .time-container-hour div.range-end:not(.no-highlight).old,
+.tempus-dominus-widget.dark .time-container-hour .date-container-days div.range-start:not(.no-highlight).old,
+.tempus-dominus-widget.dark .date-container-days .time-container-hour div.range-start:not(.no-highlight).old,
+.tempus-dominus-widget.dark .time-container-hour div:not(.no-highlight).active.new,
+.tempus-dominus-widget.dark .time-container-hour .date-container-days div.range-in:not(.no-highlight).new,
+.tempus-dominus-widget.dark .date-container-days .time-container-hour div.range-in:not(.no-highlight).new,
+.tempus-dominus-widget.dark .time-container-hour .date-container-days div.range-end:not(.no-highlight).new,
+.tempus-dominus-widget.dark .date-container-days .time-container-hour div.range-end:not(.no-highlight).new,
+.tempus-dominus-widget.dark .time-container-hour .date-container-days div.range-start:not(.no-highlight).new,
+.tempus-dominus-widget.dark .date-container-days .time-container-hour div.range-start:not(.no-highlight).new,
+.tempus-dominus-widget.dark .time-container-minute div:not(.no-highlight).active.old,
+.tempus-dominus-widget.dark .time-container-minute .date-container-days div.range-in:not(.no-highlight).old,
+.tempus-dominus-widget.dark .date-container-days .time-container-minute div.range-in:not(.no-highlight).old,
+.tempus-dominus-widget.dark .time-container-minute .date-container-days div.range-end:not(.no-highlight).old,
+.tempus-dominus-widget.dark .date-container-days .time-container-minute div.range-end:not(.no-highlight).old,
+.tempus-dominus-widget.dark .time-container-minute .date-container-days div.range-start:not(.no-highlight).old,
+.tempus-dominus-widget.dark .date-container-days .time-container-minute div.range-start:not(.no-highlight).old,
+.tempus-dominus-widget.dark .time-container-minute div:not(.no-highlight).active.new,
+.tempus-dominus-widget.dark .time-container-minute .date-container-days div.range-in:not(.no-highlight).new,
+.tempus-dominus-widget.dark .date-container-days .time-container-minute div.range-in:not(.no-highlight).new,
+.tempus-dominus-widget.dark .time-container-minute .date-container-days div.range-end:not(.no-highlight).new,
+.tempus-dominus-widget.dark .date-container-days .time-container-minute div.range-end:not(.no-highlight).new,
+.tempus-dominus-widget.dark .time-container-minute .date-container-days div.range-start:not(.no-highlight).new,
+.tempus-dominus-widget.dark .date-container-days .time-container-minute div.range-start:not(.no-highlight).new,
+.tempus-dominus-widget.dark .time-container-second div:not(.no-highlight).active.old,
+.tempus-dominus-widget.dark .time-container-second .date-container-days div.range-in:not(.no-highlight).old,
+.tempus-dominus-widget.dark .date-container-days .time-container-second div.range-in:not(.no-highlight).old,
+.tempus-dominus-widget.dark .time-container-second .date-container-days div.range-end:not(.no-highlight).old,
+.tempus-dominus-widget.dark .date-container-days .time-container-second div.range-end:not(.no-highlight).old,
+.tempus-dominus-widget.dark .time-container-second .date-container-days div.range-start:not(.no-highlight).old,
+.tempus-dominus-widget.dark .date-container-days .time-container-second div.range-start:not(.no-highlight).old,
+.tempus-dominus-widget.dark .time-container-second div:not(.no-highlight).active.new,
+.tempus-dominus-widget.dark .time-container-second .date-container-days div.range-in:not(.no-highlight).new,
+.tempus-dominus-widget.dark .date-container-days .time-container-second div.range-in:not(.no-highlight).new,
+.tempus-dominus-widget.dark .time-container-second .date-container-days div.range-end:not(.no-highlight).new,
+.tempus-dominus-widget.dark .date-container-days .time-container-second div.range-end:not(.no-highlight).new,
+.tempus-dominus-widget.dark .time-container-second .date-container-days div.range-start:not(.no-highlight).new,
+.tempus-dominus-widget.dark .date-container-days .time-container-second div.range-start:not(.no-highlight).new {
+  color: #fff;
+}
+.tempus-dominus-widget.dark .date-container-decades div:not(.no-highlight).active.today:before,
+.tempus-dominus-widget.dark .date-container-years div:not(.no-highlight).active.today:before,
+.tempus-dominus-widget.dark .date-container-months div:not(.no-highlight).active.today:before,
+.tempus-dominus-widget.dark .date-container-days div:not(.no-highlight).active.today:before,
+.tempus-dominus-widget.dark .date-container-days div.range-in:not(.no-highlight).today:before,
+.tempus-dominus-widget.dark .date-container-days div.range-end:not(.no-highlight).today:before,
+.tempus-dominus-widget.dark .date-container-days div.range-start:not(.no-highlight).today:before,
+.tempus-dominus-widget.dark .time-container-clock div:not(.no-highlight).active.today:before,
+.tempus-dominus-widget.dark .time-container-hour div:not(.no-highlight).active.today:before,
+.tempus-dominus-widget.dark .time-container-minute div:not(.no-highlight).active.today:before,
+.tempus-dominus-widget.dark .time-container-second div:not(.no-highlight).active.today:before {
+  border-bottom-color: #1b1b1b;
+}
+.tempus-dominus-widget.dark .date-container-decades div:not(.no-highlight).old, .tempus-dominus-widget.dark .date-container-decades div:not(.no-highlight).new,
+.tempus-dominus-widget.dark .date-container-years div:not(.no-highlight).old,
+.tempus-dominus-widget.dark .date-container-years div:not(.no-highlight).new,
+.tempus-dominus-widget.dark .date-container-months div:not(.no-highlight).old,
+.tempus-dominus-widget.dark .date-container-months div:not(.no-highlight).new,
+.tempus-dominus-widget.dark .date-container-days div:not(.no-highlight).old,
+.tempus-dominus-widget.dark .date-container-days div:not(.no-highlight).new,
+.tempus-dominus-widget.dark .time-container-clock div:not(.no-highlight).old,
+.tempus-dominus-widget.dark .time-container-clock div:not(.no-highlight).new,
+.tempus-dominus-widget.dark .time-container-hour div:not(.no-highlight).old,
+.tempus-dominus-widget.dark .time-container-hour div:not(.no-highlight).new,
+.tempus-dominus-widget.dark .time-container-minute div:not(.no-highlight).old,
+.tempus-dominus-widget.dark .time-container-minute div:not(.no-highlight).new,
+.tempus-dominus-widget.dark .time-container-second div:not(.no-highlight).old,
+.tempus-dominus-widget.dark .time-container-second div:not(.no-highlight).new {
+  color: rgba(232, 230, 227, 0.38);
+}
+.tempus-dominus-widget.dark .date-container-decades div:not(.no-highlight).disabled, .tempus-dominus-widget.dark .date-container-decades div:not(.no-highlight).disabled:hover,
+.tempus-dominus-widget.dark .date-container-years div:not(.no-highlight).disabled,
+.tempus-dominus-widget.dark .date-container-years div:not(.no-highlight).disabled:hover,
+.tempus-dominus-widget.dark .date-container-months div:not(.no-highlight).disabled,
+.tempus-dominus-widget.dark .date-container-months div:not(.no-highlight).disabled:hover,
+.tempus-dominus-widget.dark .date-container-days div:not(.no-highlight).disabled,
+.tempus-dominus-widget.dark .date-container-days div:not(.no-highlight).disabled:hover,
+.tempus-dominus-widget.dark .time-container-clock div:not(.no-highlight).disabled,
+.tempus-dominus-widget.dark .time-container-clock div:not(.no-highlight).disabled:hover,
+.tempus-dominus-widget.dark .time-container-hour div:not(.no-highlight).disabled,
+.tempus-dominus-widget.dark .time-container-hour div:not(.no-highlight).disabled:hover,
+.tempus-dominus-widget.dark .time-container-minute div:not(.no-highlight).disabled,
+.tempus-dominus-widget.dark .time-container-minute div:not(.no-highlight).disabled:hover,
+.tempus-dominus-widget.dark .time-container-second div:not(.no-highlight).disabled,
+.tempus-dominus-widget.dark .time-container-second div:not(.no-highlight).disabled:hover {
+  color: #6c757d;
+}
+.tempus-dominus-widget.dark .date-container-decades div:not(.no-highlight).today:before,
+.tempus-dominus-widget.dark .date-container-years div:not(.no-highlight).today:before,
+.tempus-dominus-widget.dark .date-container-months div:not(.no-highlight).today:before,
+.tempus-dominus-widget.dark .date-container-days div:not(.no-highlight).today:before,
+.tempus-dominus-widget.dark .time-container-clock div:not(.no-highlight).today:before,
+.tempus-dominus-widget.dark .time-container-hour div:not(.no-highlight).today:before,
+.tempus-dominus-widget.dark .time-container-minute div:not(.no-highlight).today:before,
+.tempus-dominus-widget.dark .time-container-second div:not(.no-highlight).today:before {
+  border-bottom-color: #4db2ff;
+  border-top-color: rgba(232, 230, 227, 0.2);
+}
+.tempus-dominus-widget.dark button {
+  color: #fff;
+  background-color: #4db2ff;
+  border-color: #4db2ff;
+}
+/*# sourceMappingURL=tempus-dominus.css.map */

filadelfia_web/public/index.html

@@ -80,7 +80,8 @@ a, a:visited, button {
 
 
 input[type=text],
-input[type=password] {
+input[type=password],
+input[type=datetime] {
   border: 1px solid var(--main);
   background: #fff;
   color: var(--color);
@@ -108,8 +109,10 @@ input[type=password] {
   margin-bottom: 1.5rem;
 }
 
-input[type=text]:focus {
+input[type=text]:focus,
-  outline: 1px solid var(--link);
+input[type=password]:focus,
+input[type=datetime]:focus {
+  outline: 1px solid var(--main);
 }
 
 h1 {
@@ -211,6 +214,13 @@ form p, label {
   color: var(--color);
 }
 
+#header .change {
+  font-size: 1.2rem;
+  line-height: 2rem;
+  font-weight: normal;
+  padding: 0 0.5rem;
+}
+
 #header .logout,
 #header .upload {
   padding: 0.25rem 1.5rem;
@@ -254,6 +264,11 @@ footer a {
 
 /* login */
 
+.page-login form a {
+  text-align: center;
+  font-weight: normal;
+}
+
 .page-login {
   background-repeat: no-repeat;
   background-position: center;