mithril-materialized 3.3.3 → 3.3.5

package/dist/index.css

@@ -3064,7 +3064,6 @@ td, th {
     border-spacing: 0;
     display: block;
     position: relative;
-    /* sort out borders */
   }
   table.responsive-table td:empty:before {
     content: " ";
@@ -3112,6 +3111,9 @@ td, th {
     border-bottom: none;
     padding: 0 10px;
   }
+  table.responsive-table {
+    /* sort out borders */
+  }
   table.responsive-table thead {
     border: 0;
     border-right: 1px solid rgba(0, 0, 0, 0.12);
@@ -4186,13 +4188,6 @@ table span.badge {
   }
 }
 
-nav {
-  color: var(--mm-nav-text, #fff);
-  background-color: var(--mm-nav-background, #ee6e73);
-  width: 100%;
-  height: 56px;
-  line-height: 56px;
-}
 nav.nav-extended {
   height: auto;
 }
@@ -4204,6 +4199,13 @@ nav.nav-extended .nav-content {
   position: relative;
   line-height: normal;
 }
+nav {
+  color: var(--mm-nav-text, #fff);
+  background-color: var(--mm-nav-background, #ee6e73);
+  width: 100%;
+  height: 56px;
+  line-height: 56px;
+}
 nav a {
   color: var(--mm-nav-text, #fff);
 }
@@ -4570,9 +4572,6 @@ small {
   }
 }
 
-.scale-transition {
-  transition: transform 0.3s cubic-bezier(0.53, 0.01, 0.36, 1.63) !important;
-}
 .scale-transition.scale-out {
   transform: scale(0);
   transition: transform 0.2s !important;
@@ -4580,6 +4579,9 @@ small {
 .scale-transition.scale-in {
   transform: scale(1);
 }
+.scale-transition {
+  transition: transform 0.3s cubic-bezier(0.53, 0.01, 0.36, 1.63) !important;
+}
 
 .card-panel {
   transition: box-shadow 0.25s;
@@ -4634,9 +4636,6 @@ small {
 .card.large {
   height: 500px;
 }
-.card.horizontal {
-  display: flex;
-}
 .card.horizontal.small .card-image, .card.horizontal.medium .card-image, .card.horizontal.large .card-image {
   height: 100%;
   max-height: none;
@@ -4645,6 +4644,9 @@ small {
 .card.horizontal.small .card-image img, .card.horizontal.medium .card-image img, .card.horizontal.large .card-image img {
   height: 100%;
 }
+.card.horizontal {
+  display: flex;
+}
 .card.horizontal .card-image {
   max-width: 50%;
 }
@@ -4708,15 +4710,15 @@ small {
 .card .card-content .card-title i {
   line-height: 32px;
 }
+.card .card-action:last-child {
+  border-radius: 0 0 2px 2px;
+}
 .card .card-action {
   background-color: inherit;
   border-top: 1px solid rgba(160, 160, 160, 0.2);
   position: relative;
   padding: 16px 24px;
 }
-.card .card-action:last-child {
-  border-radius: 0 0 2px 2px;
-}
 .card .card-action a:not(.btn):not(.btn-large):not(.btn-floating) {
   color: #ffab40;
   margin-right: 24px;
@@ -4807,17 +4809,6 @@ small {
   }
 }
 
-.tabs {
-  position: relative;
-  overflow-x: auto;
-  overflow-y: hidden;
-  height: 48px;
-  width: 100%;
-  background-color: var(--mm-background-color, #fff);
-  color: var(--mm-text-primary, rgba(0, 0, 0, 0.87));
-  margin: 0 auto;
-  white-space: nowrap;
-}
 .tabs.tabs-transparent {
   background-color: transparent;
 }
@@ -4839,6 +4830,17 @@ small {
 .tabs.tabs-fixed-width .tab {
   flex-grow: 1;
 }
+.tabs {
+  position: relative;
+  overflow-x: auto;
+  overflow-y: hidden;
+  height: 48px;
+  width: 100%;
+  background-color: var(--mm-background-color, #fff);
+  color: var(--mm-text-primary, rgba(0, 0, 0, 0.87));
+  margin: 0 auto;
+  white-space: nowrap;
+}
 .tabs .tab {
   display: inline-block;
   text-align: center;
@@ -4848,6 +4850,14 @@ small {
   margin: 0;
   text-transform: uppercase;
 }
+.tabs .tab a:focus, .tabs .tab a:focus.active {
+  background-color: rgba(246.0277777778, 178.4722222222, 181.1111111111, 0.2);
+  outline: none;
+}
+.tabs .tab a:hover, .tabs .tab a.active {
+  background-color: transparent;
+  color: var(--mm-primary-color, #ee6e73);
+}
 .tabs .tab a {
   color: var(--mm-text-secondary, rgba(238, 110, 115, 0.7));
   display: block;
@@ -4859,14 +4869,6 @@ small {
   overflow: hidden;
   transition: color 0.28s ease, background-color 0.28s ease;
 }
-.tabs .tab a:focus, .tabs .tab a:focus.active {
-  background-color: rgba(246.0277777778, 178.4722222222, 181.1111111111, 0.2);
-  outline: none;
-}
-.tabs .tab a:hover, .tabs .tab a.active {
-  background-color: transparent;
-  color: var(--mm-primary-color, #ee6e73);
-}
 .tabs .tab.disabled a, .tabs .tab.disabled a:hover {
   color: var(--mm-text-disabled, rgba(238, 110, 115, 0.4));
   cursor: default;
@@ -5011,57 +5013,57 @@ small {
   background-color: rgb(42.75, 186.75, 173.25);
 }
 
-.btn-floating {
-  display: inline-block;
-  color: #fff;
-  position: relative;
-  overflow: hidden;
-  z-index: 1;
-  width: 40px;
-  height: 40px;
-  line-height: 40px;
-  padding: 0;
-  background-color: #26a69a;
-  border-radius: 50%;
-  transition: background-color 0.3s;
-  cursor: pointer;
-  vertical-align: middle;
-}
 .btn-floating:hover {
   background-color: #26a69a;
 }
 .btn-floating:before {
   border-radius: 0;
 }
+.btn-floating.btn-large.halfway-fab {
+  bottom: -28px;
+}
 .btn-floating.btn-large {
   width: 56px;
   height: 56px;
   padding: 0;
 }
-.btn-floating.btn-large.halfway-fab {
-  bottom: -28px;
-}
 .btn-floating.btn-large i {
   line-height: 56px;
 }
+.btn-floating.btn-small.halfway-fab {
+  bottom: -16.2px;
+}
 .btn-floating.btn-small {
   width: 32.4px;
   height: 32.4px;
 }
-.btn-floating.btn-small.halfway-fab {
-  bottom: -16.2px;
-}
 .btn-floating.btn-small i {
   line-height: 32.4px;
 }
+.btn-floating.halfway-fab.left {
+  right: auto;
+  left: 24px;
+}
 .btn-floating.halfway-fab {
   position: absolute;
   right: 24px;
   bottom: -20px;
 }
-.btn-floating.halfway-fab.left {
-  right: auto;
-  left: 24px;
+.btn-floating {
+  display: inline-block;
+  color: #fff;
+  position: relative;
+  overflow: hidden;
+  z-index: 1;
+  width: 40px;
+  height: 40px;
+  line-height: 40px;
+  padding: 0;
+  background-color: #26a69a;
+  border-radius: 50%;
+  transition: background-color 0.3s;
+  cursor: pointer;
+  vertical-align: middle;
 }
 .btn-floating i {
   width: inherit;
@@ -5076,14 +5078,6 @@ button.btn-floating {
   border: none;
 }
 
-.fixed-action-btn {
-  position: fixed;
-  right: 23px;
-  bottom: 23px;
-  padding-top: 15px;
-  margin-bottom: 0;
-  z-index: 997;
-}
 .fixed-action-btn.active ul {
   visibility: visible;
 }
@@ -5128,13 +5122,13 @@ button.btn-floating {
 .fixed-action-btn.direction-bottom ul li {
   margin: 15px 0 0 0;
 }
+.fixed-action-btn.toolbar.active > a i {
+  opacity: 0;
+}
 .fixed-action-btn.toolbar {
   padding: 0;
   height: 56px;
 }
-.fixed-action-btn.toolbar.active > a i {
-  opacity: 0;
-}
 .fixed-action-btn.toolbar ul {
   display: flex;
   top: 0;
@@ -5163,6 +5157,14 @@ button.btn-floating {
 .fixed-action-btn.toolbar ul li a i {
   line-height: inherit;
 }
+.fixed-action-btn {
+  position: fixed;
+  right: 23px;
+  bottom: 23px;
+  padding-top: 15px;
+  margin-bottom: 0;
+  z-index: 997;
+}
 .fixed-action-btn ul {
   left: 0;
   right: 0;
@@ -5232,6 +5234,9 @@ button.btn-floating {
   display: block;
 }
 
+.dropdown-content:focus {
+  outline: 0;
+}
 .dropdown-content {
   background-color: var(--mm-surface-color, #fff);
   margin: 0;
@@ -5245,18 +5250,6 @@ button.btn-floating {
   z-index: 9999;
   transform-origin: 0 0;
 }
-.dropdown-content:focus {
-  outline: 0;
-}
-.dropdown-content li {
-  clear: both;
-  color: var(--mm-text-primary, rgba(0, 0, 0, 0.87));
-  cursor: pointer;
-  min-height: 50px;
-  line-height: 1.5rem;
-  width: 100%;
-  text-align: left;
-}
 .dropdown-content li:hover, .dropdown-content li.active {
   background-color: var(--mm-dropdown-hover, #eee);
 }
@@ -5289,6 +5282,15 @@ button.btn-floating {
 .dropdown-content li.disabled {
   cursor: not-allowed;
 }
+.dropdown-content li {
+  clear: both;
+  color: var(--mm-text-primary, rgba(0, 0, 0, 0.87));
+  cursor: pointer;
+  min-height: 50px;
+  line-height: 1.5rem;
+  width: 100%;
+  text-align: left;
+}
 
 body.keyboard-focused .dropdown-content li:focus {
   background-color: var(--mm-dropdown-focus, rgb(217.6, 217.6, 217.6));
@@ -5411,6 +5413,9 @@ body.keyboard-focused .dropdown-content li:focus {
   z-index: -1;
 }
 
+.modal:focus {
+  outline: none;
+}
 .modal {
   display: none;
   position: fixed;
@@ -5426,9 +5431,6 @@ body.keyboard-focused .dropdown-content li:focus {
   border-radius: 2px;
   will-change: top, opacity;
 }
-.modal:focus {
-  outline: none;
-}
 @media only screen and (max-width : 992px) {
   .modal {
     width: 80%;
@@ -5505,6 +5507,9 @@ body.keyboard-focused .dropdown-content li:focus {
   margin: 0.5rem 0 1rem 0;
 }
 
+.collapsible-header:focus {
+  outline: 0;
+}
 .collapsible-header {
   display: flex;
   cursor: pointer;
@@ -5513,9 +5518,6 @@ body.keyboard-focused .dropdown-content li:focus {
   padding: 1rem;
   border-bottom: 1px solid var(--mm-border-color, #ddd);
 }
-.collapsible-header:focus {
-  outline: 0;
-}
 .collapsible-header i {
   width: 2rem;
   font-size: 1.6rem;
@@ -5585,6 +5587,11 @@ body.keyboard-focused .dropdown-content li:focus {
   margin: 16px 0;
 }
 
+.chip:focus {
+  outline: none;
+  background-color: var(--mm-primary-color, #26a69a);
+  color: var(--mm-button-text, #fff);
+}
 .chip {
   display: inline-block;
   height: 32px;
@@ -5598,11 +5605,6 @@ body.keyboard-focused .dropdown-content li:focus {
   margin-bottom: 5px;
   margin-right: 5px;
 }
-.chip:focus {
-  outline: none;
-  background-color: var(--mm-primary-color, #26a69a);
-  color: var(--mm-button-text, #fff);
-}
 .chip > img {
   float: left;
   margin: 0 8px 0 -12px;
@@ -5667,6 +5669,9 @@ body.keyboard-focused .dropdown-content li:focus {
   transform: translateY(-140%);
 }
 
+.materialboxed:hover:not(.active) {
+  opacity: 0.8;
+}
 .materialboxed {
   display: block;
   cursor: zoom-in;
@@ -5674,9 +5679,6 @@ body.keyboard-focused .dropdown-content li:focus {
   transition: opacity 0.4s;
   -webkit-backface-visibility: hidden;
 }
-.materialboxed:hover:not(.active) {
-  opacity: 0.8;
-}
 .materialboxed.active {
   cursor: zoom-out;
 }
@@ -6159,11 +6161,6 @@ textarea.materialize-textarea + label:after {
   transition: 0.2s opacity ease-out, 0.2s color ease-out;
 }
 
-.input-field {
-  position: relative;
-  margin-top: 1rem;
-  margin-bottom: 1rem;
-}
 .input-field.inline {
   display: inline-block;
   vertical-align: middle;
@@ -6180,6 +6177,11 @@ textarea.materialize-textarea + label:after {
 .input-field.col .prefix ~ .validate ~ label {
   width: calc(100% - 3rem - 1.5rem);
 }
+.input-field {
+  position: relative;
+  margin-top: 1rem;
+  margin-bottom: 1rem;
+}
 .input-field > label {
   color: #9e9e9e;
   position: absolute;
@@ -6200,6 +6202,12 @@ textarea.materialize-textarea + label:after {
   transform: translateY(-14px) scale(0.8);
   transform-origin: 0 0;
 }
+.input-field .helper-text::after {
+  opacity: 1;
+  position: absolute;
+  top: 0;
+  left: 0;
+}
 .input-field .helper-text {
   position: relative;
   min-height: 18px;
@@ -6207,12 +6215,6 @@ textarea.materialize-textarea + label:after {
   font-size: 12px;
   color: var(--mm-text-secondary, rgba(0, 0, 0, 0.54));
 }
-.input-field .helper-text::after {
-  opacity: 1;
-  position: absolute;
-  top: 0;
-  left: 0;
-}
 .input-field .prefix {
   position: absolute;
   width: 3rem;
@@ -6481,9 +6483,6 @@ textarea.materialize-textarea {
   color: var(--mm-text-disabled, rgba(0, 0, 0, 0.42));
 }
 
-[type=checkbox] {
-  /* checkbox aspect */
-}
 [type=checkbox] + span:not(.lever) {
   position: relative;
   padding-left: 35px;
@@ -6496,6 +6495,9 @@ textarea.materialize-textarea {
      -moz-user-select: none;
           user-select: none;
 }
+[type=checkbox] {
+  /* checkbox aspect */
+}
 [type=checkbox] + span:not(.lever):before, [type=checkbox]:not(.filled-in) + span:not(.lever):after {
   content: "";
   position: absolute;
@@ -6741,13 +6743,16 @@ select {
   position: absolute;
 }
 
-.select-wrapper {
-  position: relative;
-}
 .select-wrapper.valid + label, .select-wrapper.invalid + label {
   width: 100%;
   pointer-events: none;
 }
+.select-wrapper {
+  position: relative;
+}
+.select-wrapper input.select-dropdown:focus {
+  border-bottom: 1px solid #26a69a;
+}
 .select-wrapper input.select-dropdown {
   position: relative;
   cursor: pointer;
@@ -6767,9 +6772,6 @@ select {
           user-select: none;
   z-index: 1;
 }
-.select-wrapper input.select-dropdown:focus {
-  border-bottom: 1px solid #26a69a;
-}
 .select-wrapper .caret {
   position: absolute;
   right: 0;
@@ -7020,6 +7022,9 @@ body.keyboard-focused .select-dropdown.dropdown-content li:focus {
 .file-field span {
   cursor: pointer;
 }
+.file-field input[type=file]::-webkit-file-upload-button {
+  display: none;
+}
 .file-field input[type=file] {
   position: absolute;
   top: 0;
@@ -7034,9 +7039,6 @@ body.keyboard-focused .select-dropdown.dropdown-content li:focus {
   opacity: 0;
   filter: alpha(opacity=0);
 }
-.file-field input[type=file]::-webkit-file-upload-button {
-  display: none;
-}
 .file-field .close {
   height: 20px;
 }
@@ -7737,6 +7739,9 @@ input[type=range]::-ms-thumb {
 .sidenav li.active {
   background-color: rgba(0, 0, 0, 0.05);
 }
+.sidenav li > a:not(.btn):not(.btn-large):not(.btn-flat):not(.btn-floating):hover {
+  background-color: var(--mm-border-color, rgba(0, 0, 0, 0.05));
+}
 .sidenav li > a:not(.btn):not(.btn-large):not(.btn-flat):not(.btn-floating) {
   color: var(--mm-text-primary, rgba(0, 0, 0, 0.87));
   display: block;
@@ -7746,9 +7751,6 @@ input[type=range]::-ms-thumb {
   line-height: 48px;
   padding: 0 32px;
 }
-.sidenav li > a:not(.btn):not(.btn-large):not(.btn-flat):not(.btn-floating):hover {
-  background-color: var(--mm-border-color, rgba(0, 0, 0, 0.05));
-}
 .sidenav li > a:not(.btn):not(.btn-large):not(.btn-flat):not(.btn-floating) > i, .sidenav li > a:not(.btn):not(.btn-large):not(.btn-flat):not(.btn-floating) > [class^=mdi-], .sidenav li > a:not(.btn):not(.btn-large):not(.btn-flat):not(.btn-floating) li > a > [class*=mdi-], .sidenav li > a:not(.btn):not(.btn-large):not(.btn-flat):not(.btn-floating) > i.material-icons {
   float: left;
   height: 48px;
@@ -7763,6 +7765,9 @@ input[type=range]::-ms-thumb {
 .sidenav .divider {
   margin: 8px 0 0 0;
 }
+.sidenav .subheader:hover {
+  background-color: transparent;
+}
 .sidenav .subheader {
   cursor: initial;
   pointer-events: none;
@@ -7775,21 +7780,18 @@ input[type=range]::-ms-thumb {
   display: flex;
   align-items: center;
 }
-.sidenav .subheader:hover {
-  background-color: transparent;
-}
 .sidenav .user-view {
   position: relative;
   padding: 32px 32px 0;
   margin-bottom: 8px;
 }
+.sidenav .user-view > a:hover {
+  background-color: transparent;
+}
 .sidenav .user-view > a {
   height: auto;
   padding: 0;
 }
-.sidenav .user-view > a:hover {
-  background-color: transparent;
-}
 .sidenav .user-view .background {
   overflow: hidden;
   position: absolute;
@@ -7820,6 +7822,9 @@ input[type=range]::-ms-thumb {
   font-weight: 400;
 }
 
+.drag-target.right-aligned {
+  right: 0;
+}
 .drag-target {
   height: 100%;
   width: 10px;
@@ -7828,19 +7833,16 @@ input[type=range]::-ms-thumb {
   left: 0;
   z-index: 998;
 }
-.drag-target.right-aligned {
+
+.sidenav.sidenav-fixed.right-aligned {
   right: 0;
+  left: auto;
 }
-
 .sidenav.sidenav-fixed {
   left: 0;
   transform: translateX(0);
   position: fixed;
 }
-.sidenav.sidenav-fixed.right-aligned {
-  right: 0;
-  left: auto;
-}
 
 @media only screen and (max-width : 992px) {
   .sidenav.sidenav-fixed {
@@ -8277,19 +8279,13 @@ input[type=range]::-ms-thumb {
   background-color: #4CAF50;
 }
 
-.carousel {
-  overflow: hidden;
-  position: relative;
-  width: 100%;
-  height: 400px;
-  perspective: 500px;
-  transform-style: preserve-3d;
-  transform-origin: 0% 50%;
-}
 .carousel.carousel-slider {
   top: 0;
   left: 0;
 }
+.carousel.carousel-slider .carousel-fixed-item.with-indicators {
+  bottom: 68px;
+}
 .carousel.carousel-slider .carousel-fixed-item {
   position: absolute;
   left: 0;
@@ -8297,9 +8293,6 @@ input[type=range]::-ms-thumb {
   bottom: 20px;
   z-index: 1;
 }
-.carousel.carousel-slider .carousel-fixed-item.with-indicators {
-  bottom: 68px;
-}
 .carousel.carousel-slider .carousel-item {
   width: 100%;
   height: 100%;
@@ -8316,6 +8309,15 @@ input[type=range]::-ms-thumb {
 .carousel.carousel-slider .carousel-item p {
   font-size: 15px;
 }
+.carousel {
+  overflow: hidden;
+  position: relative;
+  width: 100%;
+  height: 400px;
+  perspective: 500px;
+  transform-style: preserve-3d;
+  transform-origin: 0% 50%;
+}
 .carousel .carousel-item {
   visibility: hidden;
   width: 200px;
@@ -8335,6 +8337,9 @@ input[type=range]::-ms-thumb {
   bottom: 0;
   margin: 0;
 }
+.carousel .indicators .indicator-item.active {
+  background-color: #fff;
+}
 .carousel .indicators .indicator-item {
   display: inline-block;
   position: relative;
@@ -8346,9 +8351,6 @@ input[type=range]::-ms-thumb {
   transition: background-color 0.3s;
   border-radius: 50%;
 }
-.carousel .indicators .indicator-item.active {
-  background-color: #fff;
-}
 .carousel.scrolling .carousel-item .materialboxed,
 .carousel .carousel-item:not(.active) .materialboxed {
   pointer-events: none;
@@ -8399,11 +8401,6 @@ input[type=range]::-ms-thumb {
   display: table-cell;
 }
 
-.tap-target-wave {
-  position: absolute;
-  border-radius: 50%;
-  z-index: 10001;
-}
 .tap-target-wave::before, .tap-target-wave::after {
   content: "";
   display: block;
@@ -8422,7 +8419,15 @@ input[type=range]::-ms-thumb {
   transition: opacity 0.3s, transform 0.3s, visibility 0s;
   z-index: -1;
 }
+.tap-target-wave {
+  position: absolute;
+  border-radius: 50%;
+  z-index: 10001;
+}
 
+.tap-target-origin:not(.btn), .tap-target-origin:not(.btn):hover {
+  background: none;
+}
 .tap-target-origin {
   top: 50%;
   left: 50%;
@@ -8430,9 +8435,6 @@ input[type=range]::-ms-thumb {
   z-index: 10002;
   position: absolute !important;
 }
-.tap-target-origin:not(.btn), .tap-target-origin:not(.btn):hover {
-  background: none;
-}
 
 @media only screen and (max-width: 600px) {
   .tap-target, .tap-target-wrapper {
@@ -8440,10 +8442,6 @@ input[type=range]::-ms-thumb {
     height: 600px;
   }
 }
-.pulse {
-  overflow: visible;
-  position: relative;
-}
 .pulse::before {
   content: "";
   display: block;
@@ -8458,6 +8456,10 @@ input[type=range]::-ms-thumb {
   animation: pulse-animation 1s cubic-bezier(0.24, 0, 0.38, 1) infinite;
   z-index: -1;
 }
+.pulse {
+  overflow: visible;
+  position: relative;
+}
 
 @keyframes pulse-animation {
   0% {
@@ -8505,15 +8507,15 @@ input[type=range]::-ms-thumb {
   position: relative;
   overflow: visible;
 }
+.datepicker-controls .select-wrapper input:focus {
+  border-bottom: none;
+}
 .datepicker-controls .select-wrapper input {
   border-bottom: none;
   text-align: center;
   margin: 0;
   cursor: pointer;
 }
-.datepicker-controls .select-wrapper input:focus {
-  border-bottom: none;
-}
 .datepicker-controls .select-wrapper .caret {
   position: absolute;
   right: 0;
@@ -8652,10 +8654,6 @@ input[type=range]::-ms-thumb {
   text-decoration: none;
   color: var(--mm-text-secondary, rgba(0, 0, 0, 0.54));
 }
-.datepicker-table td {
-  border-radius: 50%;
-  padding: 0;
-}
 .datepicker-table td.is-today {
   color: var(--mm-primary-color, #26a69a);
 }
@@ -8700,6 +8698,10 @@ input[type=range]::-ms-thumb {
   background-color: var(--mm-border-color, rgba(0, 0, 0, 0.02));
   border-right: 1px solid var(--mm-border-color, rgba(0, 0, 0, 0.05));
 }
+.datepicker-table td {
+  border-radius: 50%;
+  padding: 0;
+}
 
 .datepicker-day-button {
   background-color: transparent;
@@ -8936,15 +8938,15 @@ input[type=range]::-ms-thumb {
   transition: transform 350ms, opacity 350ms;
 }
 
-.timepicker-dial-out {
-  opacity: 0;
-}
 .timepicker-dial-out.timepicker-hours {
   transform: scale(1.1, 1.1);
 }
 .timepicker-dial-out.timepicker-minutes {
   transform: scale(0.8, 0.8);
 }
+.timepicker-dial-out {
+  opacity: 0;
+}
 
 .timepicker-canvas {
   transition: opacity 175ms;
@@ -9896,7 +9898,6 @@ nav .theme-toggle:focus {
           user-select: none;
   position: relative;
   transition: background-color 0.2s ease;
-  padding-right: 32px;
 }
 .datatable thead th.sortable:hover {
   background-color: var(--mm-dropdown-hover);
@@ -9924,6 +9925,9 @@ nav .theme-toggle:focus {
 .datatable thead th.sortable .sort-indicators .sort-desc {
   margin-top: 0px;
 }
+.datatable thead th.sortable {
+  padding-right: 32px;
+}
 .datatable .align-left {
   text-align: left;
 }
@@ -11216,8 +11220,6 @@ body.dark {
   align-items: center;
   justify-content: center;
   z-index: 3;
-  opacity: 0;
-  transform: scale(0.8);
 }
 [data-theme=dark] .image-list-item-action {
   background: rgba(0, 0, 0, 0.7);
@@ -11255,6 +11257,10 @@ body.dark {
   bottom: 8px;
   right: 8px;
 }
+.image-list-item-action {
+  opacity: 0;
+  transform: scale(0.8);
+}
 .image-list-with-actions .image-list-item-action {
   opacity: 1;
   transform: scale(1);