pages_core 3.13.0 → 3.15.0

data/app/assets/stylesheets/pages_core/admin/components/list_table.css

@@ -3,25 +3,25 @@ table.list {
   margin: 16px 0;
   width: 100%;
 
-  & td,
-  & th {
+  td,
+  th {
     padding: 8px 16px;
     text-align: left;
     vertical-align: top;
   }
 
-  & th {
+  th {
     background: linear-gradient(
       to bottom,
       var(--background-color) 0%,
       var(--background-disabled-color) 100%
     );
     color: var(--text-light-color);
-    font-weight: bold;
+    font-weight: var(--bold-weight);
     border-bottom: 1px solid var(--border-color);
   }
 
-  & td {
+  td {
     border-bottom: 1px solid var(--border-color);
 
     &.note {
@@ -29,45 +29,54 @@ table.list {
     }
 
     &.name {
-      font-weight: bold;
+      font-weight: var(--bold-weight);
+      a,
+      a:visited {
+        text-decoration: none;
+        color: var(--text-color);
+      }
+      a:focus,
+      a:hover {
+        border-bottom: 1px solid var(--text-color);
+      }
     }
   }
 
-  & tr td:first-child,
-  & tr th:first-child {
+  tr td:first-child,
+  tr th:first-child {
     padding-left: 32px;
   }
 
-  & tr td:last-child,
-  & tr th:last-child {
+  tr td:last-child,
+  tr th:last-child {
     padding-right: 32px;
   }
 
-  & tr.disabled td {
+  tr.disabled td {
     opacity: 0.5;
   }
 
-  & tr.disabled td:first-child {
+  tr.disabled td:first-child {
     background: transparent
       radial-gradient(ellipse at center, #bdbdbd 50%, transparent 50%) no-repeat
       left 12px top 50%;
     background-size: 10px 10px;
   }
 
-  & tr.active td:first-child {
+  tr.active td:first-child {
     background: transparent
       radial-gradient(ellipse at center, #92b6c4 50%, transparent 50%) no-repeat
       left 12px top 50%;
     background-size: 10px 10px;
   }
 
-  & .actions {
+  .actions {
     float: right;
     margin-bottom: 2px;
     margin-left: 16px;
   }
 
-  & p {
+  p {
     margin: 0;
     padding: 0;
   }

data/app/assets/stylesheets/pages_core/admin/components/page_tree.css

@@ -5,14 +5,15 @@
   margin: 20px 0 40px 0;
   margin-left: -20px;
   margin-right: -10px;
+  max-width: 90rem;
 
-  & .draggable {
+  .draggable {
     user-select: none;
     position: absolute;
     opacity: 0.8;
   }
 
-  & .node {
+  .node {
     &.placeholder > * {
       visibility: hidden;
     }
@@ -21,33 +22,45 @@
       border: 1px dashed var(--border-color);
     }
 
-    & .inner {
+    .inner {
       position: relative;
-      cursor: pointer;
-      padding-left: 10px;
+      padding-left: 1.75rem;
+      display: flex;
+      border-radius: 5px;
+      &:hover {
+        background: var(--background-highlight-color);
+      }
     }
 
-    & .collapse {
+    .collapse {
       position: absolute;
-      left: 0;
+      left: 0.625rem;
+      top: 0.5rem;
       cursor: pointer;
-      font-size: 15px;
-      padding-top: 5px;
+      padding-top: 0px;
+      transition: transform 250ms cubic-bezier(0.165, 0.84, 0.44, 1);
+      &.open {
+        transform: rotate(90deg);
+      }
+    }
+
+    .inner:has(.edit-name) {
+      .collapse {
+        top: 0.75rem;
+      }
     }
   }
 
-  & .page {
-    font-size: 15px;
-    padding: 6px 10px;
-    border: 1px solid transparent;
+  .page {
+    padding: 0.2rem;
+    display: flex;
+    flex-wrap: wrap;
 
-    &:after {
-      content: "";
-      display: table;
-      clear: both;
-    }
+    gap: 0.5rem;
+    align-items: baseline;
+    width: 100%;
 
-    &:hover {
+    &:hove2r {
       border: 1px solid var(--border-color-light);
       background: linear-gradient(
         to bottom,
@@ -56,52 +69,42 @@
       );
     }
 
-    & .date {
-      font-size: 12px;
-      margin-left: 10px;
-      color: var(--text-light-color);
-    }
-
-    & .name {
-      font-weight: bold;
+    .page-icon {
+      margin-right: 0rem;
     }
 
-    & .icon {
-      margin-right: 8px;
+    .date {
+      margin-left: 10px;
+      color: var(--text-light-color);
     }
 
-    & .status-label,
-    & .collapsed-label {
-      margin-left: 3px;
-      font-size: 12px;
+    .name {
+      font-weight: var(--bold-weight);
     }
 
-    & form {
-      display: inline;
+    .edit-name {
       margin: 0;
       padding: 0;
-
-      & input {
-        font-size: 15px;
-        padding: 2px 4px;
-        margin-top: -2px;
-        margin-bottom: -2px;
-        margin-right: 5px;
+      flex-grow: 1;
+      display: flex;
+      gap: 0.5rem;
+      input {
+        max-width: 100%;
+        flex: 1 1 auto;
       }
-
-      & button {
-        margin-left: 5px;
+      button {
+        white-space: nowrap;
       }
     }
 
-    & a,
-    & a:visited {
+    a,
+    a:visited {
       color: var(--text-color);
       text-decoration: none;
     }
 
-    & a:hover,
-    & a:focus {
+    a:hover,
+    a:focus {
       text-decoration: underline;
     }
 
@@ -109,74 +112,30 @@
     &.status-1,
     &.status-3 {
       &,
-      & a,
-      & a:visited {
+      a,
+      a:visited {
         color: var(--text-light-color);
       }
     }
   }
 
-  & .page .actions {
-    float: right;
+  .page .actions {
     visibility: hidden;
-    margin: -4px -6px -4px 5px;
-
-    & button {
-      margin-left: 5px;
-    }
+    flex-grow: 1;
+    display: flex;
+    justify-content: flex-end;
+    gap: 0.5rem;
   }
 
-  & .page:hover .actions {
+  .page:hover .actions {
     visibility: visible;
   }
 
-  & button {
-    padding: 0;
-    border: 0;
-    background: transparent;
-    cursor: pointer;
-    font-size: 13px;
-    padding: 3px 5px;
-    border-radius: 3px;
-    color: var(--link-hover-color);
-
-    & .icon {
-      margin-right: 8px;
-    }
-
-    &:hover,
-    &:focus {
-      color: var(--blue-hover);
-      background: var(--blue-transparent);
-    }
-
-    &.add {
-      color: var(--green);
-
-      &:hover,
-      &:focus {
-        color: var(--green-hover);
-        background: var(--green-transparent);
-      }
-    }
-
-    &.delete,
-    &.cancel {
-      color: var(--red);
-
-      &:hover,
-      &:focus {
-        color: var(--red-hover);
-        background: var(--red-transparent);
-      }
-    }
-  }
-
-  & button.add-inline {
-    margin: 5px 0 5px 30px;
+  button.add-inline {
+    margin: 0.25rem 0 0.25rem 2.875rem;
   }
 
-  & .node .node .node .page .name {
+  .node .node .node .page .name {
     font-weight: normal;
   }
 }

data/app/assets/stylesheets/pages_core/admin/components/pagination.css

@@ -1,12 +1,11 @@
 .pagination {
   margin: 30px 30px;
   line-height: 20px;
-  font-size: 14px;
 
-  & a,
-  & .current,
-  & .disabled,
-  & .gap {
+  a,
+  .current,
+  .disabled,
+  .gap {
     display: inline-block;
     font-style: normal;
     margin: 0px 1px;
@@ -17,29 +16,29 @@
     text-align: center;
   }
 
-  & a:hover,
-  & a:focus {
+  a:hover,
+  a:focus {
     text-decoration: underline;
   }
 
-  & .current {
+  .current {
     font-weight: bold;
   }
 
-  & .disabled {
+  .disabled {
     color: var(--text-light-color);
   }
 
-  & .next,
-  & .previous {
+  .next,
+  .previous {
     background: none;
   }
 
-  & .next {
+  .next {
     margin-left: 10px;
   }
 
-  & .previous {
+  .previous {
     margin-right: 10px;
   }
 }

data/app/assets/stylesheets/pages_core/admin/components/search.css

@@ -1,18 +1,7 @@
 .search-bar {
-  display: flex;
-  & input {
-    flex: 1 1 auto;
-    border-right: none;
+  input {
     max-width: 600px;
     min-width: 50px;
-    &:focus {
-      z-index: 20;
-    }
-  }
-  & button {
-    border-top-left-radius: 0px;
-    border-bottom-left-radius: 0px;
-    white-space: nowrap;
   }
 }
 
@@ -21,7 +10,3 @@ main .search-bar {
   padding: 16px 32px;
   margin: 0px 0px 16px 0px;
 }
-
-.sidebar .search-bar {
-  margin-top: 16px;
-}

data/app/assets/stylesheets/pages_core/admin/components/sidebar.css

@@ -4,25 +4,19 @@
   line-height: 1.3;
   color: var(--text-color);
 
-  & h2 {
-    margin: 20px 0 0px 0;
-    padding: 0 0 10px 0;
-    color: var(--text-color);
-    font-size: 18px;
+  h2 {
     border-bottom: 1px solid var(--border-color);
-
-    &:first-child {
-      margin-top: 16px;
-    }
+    padding-bottom: 0.5rem;
+    margin-bottom: 0.5rem;
   }
 
-  & ul {
+  ul {
     list-style-type: disc;
     margin: 1em 0 1em 14px;
     padding: 0;
   }
 
-  & ul li {
+  ul li {
     margin: 0;
     padding: 0;
   }

data/app/assets/stylesheets/pages_core/admin/components/tag_editor.css

@@ -1,39 +1,41 @@
 .tag-editor {
-  margin-top: 10px;
-  margin-bottom: 1.5em;
-
-  & .tags {
-    line-height: 1.5;
-  }
-
-  & .tag {
-    font-size: 13px;
+  margin-top: 0.5rem;
+  margin-bottom: 1.5rem;
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.5rem;
+
+  .tag {
+    font-size: 1rem;
     cursor: pointer;
-    display: block;
-    float: left;
-    margin: 0 5px 5px 0;
     padding: 0px;
     background: var(--background-disabled-color);
     border-radius: 5px;
-    line-height: 26px;
-    line-height: 36px;
     min-width: 40px;
+    height: 2rem;
     transition: all 200ms ease-out;
     user-select: none;
+    display: flex;
 
-    & label {
+    label {
+      display: flex;
       margin: 0px;
       padding: 0px 10px;
       color: inherit;
+      align-items: center;
+      gap: 0.5rem;
     }
 
-    & input {
-      margin: 2px 3px 0 0;
+    input {
+      /*margin: 2px 3px 0 0;*/
     }
 
-    & .name {
-      padding: 1px 5px;
-      margin: 0;
+    .name {
+    }
+
+    &:hover,
+    &:focus {
+      background: var(--background-highlight-color);
     }
 
     &.enabled {
@@ -41,20 +43,4 @@
       background: var(--blue-dark);
     }
   }
-
-  & .add-tag-form {
-    float: left;
-    width: 178px;
-    white-space: nowrap;
-  }
-
-  & input.add-tag {
-    margin-top: 0px;
-    border-radius: 5px;
-    margin: 0 4px 0 0;
-
-    &.example {
-      color: var(--text-light-color);
-    }
-  }
 }

data/app/assets/stylesheets/pages_core/admin/components/toast.css

@@ -6,8 +6,7 @@
   overflow: hidden;
   z-index: 200;
 
-  & .toast {
-    font-size: 14px;
+  .toast {
     display: inline-block;
     background: var(--background-invert-color);
     color: white;

data/app/assets/stylesheets/pages_core/admin/components/toolbar.css

@@ -15,27 +15,27 @@
     clear: both;
   }
 
-  & li {
+  li {
     list-style: none;
     margin: 0;
     padding: 0;
   }
 
-  & .info {
+  .info {
     float: right;
     color: var(--text-lighter-color);
     padding: 0px 10px;
   }
 
-  & .label {
+  .label {
     float: left;
     padding: 0px 10px;
     color: var(--text-light-color);
     border-right: 1px solid var(--border-color);
   }
 
-  & .button,
-  & button {
+  .button,
+  button {
     float: left;
     display: inline;
     margin: 0px;
@@ -51,12 +51,12 @@
     border-left: 1px solid #fff;
     border-right: 1px solid var(--border-color);
     color: var(--text-light-color);
-    font-size: 12px;
+    font-size: 0.875rem;
     background-color: #f8f8f8;
     transition: all 200ms ease-out;
 
-    & i.fa {
-      font-size: 14px;
+    i.fa {
+      font-size: 1rem;
     }
 
     &:focus,
@@ -87,11 +87,11 @@
     &.header {
       vertical-align: bottom;
 
-      & i {
+      i {
         margin-left: -6px;
       }
 
-      & i:after {
+      i:after {
         font-family: var(--font-os-sans);
         font-weight: bold;
         font-size: 13px;

data/app/assets/stylesheets/pages_core/admin/components/totp.css

@@ -0,0 +1,26 @@
+.totp-enrollment {
+  .qr-code {
+    width: 20rem;
+    height: 20rem;
+    border: 1px solid var(--border-color);
+    padding: 1rem;
+    border-radius: 5px;
+    svg {
+      width: 100%;
+      height: 100%;
+    }
+  }
+}
+
+ul.recovery-codes {
+  list-style-type: none;
+  padding: 0rem;
+  margin: 2rem 0rem;
+  font-family: monospace;
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: 1rem;
+  font-size: 1.2rem;
+  font-weight: bold;
+}