theming ui

template/static/stylesheets/app.css

@@ -119,6 +119,10 @@ select.form-control:not([multiple]):not([size]) {
   outline: none;
 }
 
+.popover:focus {
+  outline: none;
+}
+
 /* custom elements */
 
 .icon {
@@ -245,6 +249,15 @@ select.form-control:not([multiple]):not([size]) {
   border-color: var(--color-primary);
 }
 
+.btn-outline {
+  border: 1px solid #ced4da;
+  border-radius: .25rem;
+}
+
+.btn-outline:hover {
+  background-color: #f8f9fa;
+}
+
 .list-row {
   padding-left: .5rem;
   padding-right: .5rem;
@@ -349,6 +362,64 @@ select.form-control:not([multiple]):not([size]) {
   transition: background-color .1s ease-out;
 }
 
+.themepicker {
+  position: relative;
+  background: none;
+  border: none;
+  width: 100%;
+  margin-bottom: 0;
+}
+
+.themepicker input {
+  opacity: 0;
+  position: absolute;
+  z-index: -1;
+  top: 0; left: 0;
+}
+
+.themepicker-label {
+  height: 1.75rem;
+  border-radius: 4px;
+  cursor: pointer;
+  border: 1px solid transparent;
+}
+
+.themepicker input:checked + .themepicker-label {
+  box-shadow: inset 0 0 0px 1px #017bfe;
+  border-color: #017bfe !important;
+}
+
+.themepicker-label:hover {
+  box-shadow: inset 0 0 0px 1px rgb(1, 123, 254, .6);
+  border-color: rgb(1, 123, 254, .6) !important;
+}
+
+.themepicker input[value=light] + .themepicker-label {
+  background: #fff;
+  border-color: #dee2e6;
+}
+
+.themepicker input[value=sepia] + .themepicker-label {
+  background: yellow;
+  border-color: yellow;
+}
+
+.themepicker input[value=night] + .themepicker-label {
+  background: #111;
+  border-color: #111;
+}
+
+.themepicker + .themepicker {
+  margin-left: .5rem;
+}
+
+.appearance-option {
+  height: 2rem;
+  padding-top: 0 !important;
+  padding-bottom: 0 !important;
+  line-height: 2rem;
+}
+
 /* content */
 
 .content {