pages_core 3.13.0 → 3.15.0

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

@@ -1,10 +1,13 @@
 header {
   background: var(--background-invert-color);
-  height: 86px;
+  padding: 1.25rem 1rem 0rem 1rem;
   color: var(--text-invert-color);
+  display: flex;
+  flex-wrap: wrap;
+  gap: 1rem;
 
-  & a,
-  & a:visited {
+  a,
+  a:visited {
     background: none;
     border: 0;
     padding: 0;
@@ -12,44 +15,38 @@ header {
     color: var(--text-invert-color);
   }
 
-  & .logo {
-    position: absolute;
-    z-index: 2;
-    top: 11px;
-    left: 16px;
-    width: 21px;
-    height: 27px;
+  .logo {
+    background: url("pages/admin/icon.svg");
+    background-repeat: no-repeat;
+    min-height: 27px;
+    padding-left: 38px;
   }
 
-  & .site-name {
+  .site-name {
     color: var(--text-invert-color);
-    position: absolute;
-    top: 15px;
-    left: 52px;
+    flex-grow: 1;
 
-    & h1 {
+    h1 {
       margin: 0;
       padding: 0;
-      font-family: Arial, Helvetica, sans-serif;
       display: inline;
-      font-size: 20px;
+      font-size: 1.4rem;
+      letter-spacing: -0.04rem;
       font-weight: normal;
 
-      & a {
-        font-weight: bold;
+      a {
+        font-weight: 800;
         text-decoration: none;
         padding-right: 6px;
       }
     }
   }
 
-  & .user {
-    font-size: 13px;
-    position: absolute;
-    top: 20px;
-    right: 16px;
+  .user {
+    display: flex;
+    align-items: center;
 
-    & a {
+    a {
       border-left: 1px solid var(--text-light-color);
       padding-left: 10px;
       margin-left: 6px;
@@ -62,35 +59,32 @@ header {
     }
   }
 
-  & .tabs {
-    position: absolute;
-    top: 54px;
-    height: 29px;
-    left: 16px;
-    right: 8px;
+  .tabs {
+    display: flex;
+    overflow: scroll;
+    width: 100%;
+    gap: 8px;
 
-    & ul {
-      padding: 0;
-      margin: 0 8px 0 0;
+    ul {
+      padding: 0px;
+      margin: 0px;
       list-style-type: none;
-      display: block;
-      float: left;
+      display: flex;
+      gap: 4px;
 
       &.account {
-        float: right;
+        flex-grow: 1;
+        justify-content: flex-end;
       }
     }
 
-    & li {
-      display: inline;
+    li {
       margin: 0;
       padding: 0;
-      font-weight: normal;
-      font-size: 13px;
     }
 
-    & a,
-    & a:visited {
+    a,
+    a:visited {
       background: #333;
       color: var(--text-invert-color);
       display: block;
@@ -98,13 +92,13 @@ header {
       padding: 0 15px;
       line-height: 32px;
       height: 32px;
-      margin: 0 2px 0 0;
+      margin: 0px;
       text-decoration: none;
     }
 
-    & a:hover,
-    & a.current,
-    & a.current:visited {
+    a:hover,
+    a.current,
+    a.current:visited {
       background: linear-gradient(to bottom, #cfcfcf 0%, #fefefe 100%);
       color: var(--text-color);
     }
@@ -116,22 +110,22 @@ header {
   margin: 24px 0px -12px -18px;
   padding: 0;
 
-  & li {
+  li {
     color: hsla(0, 0%, 0%, 0.25);
     display: inline;
     background: transparent;
     padding: 6px 17px;
-    font-weight: bold;
   }
 
-  & li.current {
+  li.current {
     background: var(--background-color);
     padding: 5px 16px;
     border: 1px solid #cae6f1;
     border-bottom: 1px solid var(--background-color);
+    font-weight: var(--bold-weight);
 
-    & a,
-    & a:visited {
+    a,
+    a:visited {
       text-decoration: none;
       color: #444;
     }
@@ -146,15 +140,19 @@ header {
   border-bottom: 1px solid #d4eaf4;
   color: var(--text-color);
 
-  & em {
+  h3 {
+    font-weight: var(--bold-weight);
+  }
+
+  em {
     font-style: normal;
     color: #4a5357;
   }
 
-  & .links {
+  .links {
     float: right;
 
-    & a {
+    a {
       border-left: 1px solid #779cb3;
       padding-left: 8px;
       margin-left: 8px;
@@ -166,14 +164,14 @@ header {
       }
 
       &.current {
-        font-weight: bold;
+        font-weight: var(--bold-weight);
         text-decoration: none;
         color: var(--text-color);
       }
     }
   }
 
-  & .separator {
+  .separator {
     color: #779cb3;
     margin: 0 4px;
   }
@@ -182,6 +180,6 @@ header {
 main .page-description h3 {
   margin: 0;
   padding: 0;
-  font-size: 13px;
+  font-size: 0.875rem;
   text-shadow: #e9f6ff 1px 1px 1px;
 }

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

@@ -1,30 +1,33 @@
 .editable-image {
   cursor: pointer;
   display: block;
-  transition: transform 200ms, box-shadow 200ms, border-color 200ms ease-out;
+  transition:
+    transform 200ms,
+    box-shadow 200ms,
+    border-color 200ms ease-out;
   box-shadow: 0px 2px 5px rgba(0, 0, 0, 0);
   border: 1px solid #fff;
   position: relative;
   -webkit-perspective: 1000;
 
-  & .alt-warning {
+  .alt-warning {
     position: absolute;
     bottom: 5px;
     right: 6px;
-    font-size: 14px;
+    font-size: 1rem;
     color: var(--background-warning-color);
     text-shadow: 0px 0px 5px rgba(0, 0, 0, 1);
     z-index: 100;
   }
 
-  & img {
+  img {
     display: block;
   }
 
   &:hover {
     border-color: rgba(20, 20, 20, 0.5);
     transform: scale(1.01) translate(0px, -1px);
-    box-shadow: 0px 5px 10px rgba(0, 0, 0, 0.2);
+    box-shadow: 0px 5px 20px rgba(0, 0, 0, 0.2);
   }
 }
 
@@ -39,19 +42,19 @@
     flex-direction: column;
   }
 
-  & .toolbars {
-    & .aspect-ratios {
+  .toolbars {
+    .aspect-ratios {
       border-top: 0px;
     }
   }
 
-  & .visual {
+  .visual {
     flex: 1 1 auto;
     display: flex;
     flex-direction: column;
   }
 
-  & .image-container {
+  .image-container {
     flex: 1 1 auto;
     width: 100%;
     height: 100%;
@@ -61,7 +64,11 @@
       linear-gradient(45deg, transparent 75%, #fff 75%),
       linear-gradient(135deg, transparent 75%, #fff 75%);
     background-size: 12px 12px;
-    background-position: 0 0, 6px 0, 6px -6px, 0px 6px;
+    background-position:
+      0 0,
+      6px 0,
+      6px -6px,
+      0px 6px;
     display: flex;
     flex-direction: column;
     justify-content: center;
@@ -69,7 +76,7 @@
     border: 1px solid var(--border-color);
     border-top: 0px;
 
-    & .image-wrapper {
+    .image-wrapper {
       position: absolute;
       flex-grow: 0;
 
@@ -77,18 +84,18 @@
         position: relative;
       }
 
-      & img {
+      img {
         display: block;
         width: 100%;
         height: auto;
       }
 
-      & .ReactCrop {
+      .ReactCrop {
         width: 100%;
         background-color: transparent;
       }
 
-      & .ReactCrop__crop-selection {
+      .ReactCrop__crop-selection {
         &:before,
         &:after {
           content: "";
@@ -115,7 +122,7 @@
         }
       }
 
-      & .ReactCrop--active .ReactCrop__crop-selection {
+      .ReactCrop--active .ReactCrop__crop-selection {
         &:before,
         &:after {
           opacity: 0.75;
@@ -123,17 +130,17 @@
       }
     }
 
-    & .loading {
+    .loading {
       color: var(--text-light-color);
     }
   }
 
-  & form {
+  form {
     width: 300px;
     display: block;
     margin-left: 20px;
 
-    & textarea {
+    textarea {
       max-width: 100%;
 
       &.caption {
@@ -141,8 +148,8 @@
       }
     }
 
-    & .embed-code {
-      & input {
+    .embed-code {
+      input {
         width: 50%;
         margin-right: 8px;
       }
@@ -153,20 +160,20 @@
       margin-left: 0px;
       padding-bottom: 20px;
 
-      & textarea.caption {
+      textarea.caption {
         height: inherit;
       }
     }
   }
 
-  & .focal-editor {
+  .focal-editor {
     position: absolute;
     width: 100%;
     height: 100%;
     touch-action: none;
     overflow: hidden;
 
-    & .focal-point {
+    .focal-point {
       &:after {
         content: "";
         display: block;
@@ -190,7 +197,11 @@
       touch-action: none;
       user-select: none;
       cursor: pointer;
-      transition: border-radius 200ms, margin 200ms, width 200ms, height 200ms,
+      transition:
+        border-radius 200ms,
+        margin 200ms,
+        width 200ms,
+        height 200ms,
         border-color 200ms ease-out;
 
       &:hover {

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

@@ -1,30 +1,31 @@
 .image-grid {
-  --image-padding: 7px;
+  --image-padding: 0.5rem;
   margin-bottom: 40px;
   display: flex;
+  gap: 1rem;
 
   @media (--mobile) {
     flex-direction: column;
   }
 
-  & input[type="file"] {
+  input[type="file"] {
     display: none;
   }
 
-  & h3 {
+  h3 {
     margin: 10px var(--image-padding) 10px var(--image-padding);
     border-bottom: 1px solid var(--border-color);
     padding-bottom: 5px;
   }
 
-  & img {
+  img {
     display: block;
     width: 100%;
     height: auto;
     min-height: 1px; /* Hack for IE11 */
   }
 
-  & .grid-image {
+  .grid-image {
     padding: var(--image-padding);
 
     &.placeholder {
@@ -36,19 +37,19 @@
       opacity: 0.5;
       overflow: hidden;
 
-      & .temp-image {
+      .temp-image {
         position: relative;
         cursor: pointer;
         overflow: hidden;
         background: #000;
       }
 
-      & img {
+      img {
         filter: blur(20px);
         opacity: 0.75;
       }
 
-      & span {
+      span {
         position: absolute;
         top: 50%;
         left: 50%;
@@ -65,8 +66,8 @@
       }
     }
 
-    & .file-placeholder,
-    & .placeholder {
+    .file-placeholder,
+    .placeholder {
       position: relative;
       vertical-align: middle;
       background: var(--background-disabled-color);
@@ -74,13 +75,13 @@
       width: 100%;
       padding-bottom: 100%;
 
-      & span {
+      span {
         color: var(--text-light-color);
         text-shadow: none;
       }
     }
 
-    & .actions {
+    .actions {
       margin-top: 7px;
       display: flex;
       gap: 4px;
@@ -91,33 +92,33 @@
         visibility: visible;
       }
 
-      & button {
+      button {
         flex: 1;
       }
     }
 
     &:hover {
-      & .actions {
+      .actions {
         visibility: visible;
       }
     }
   }
 
-  & .primary-image {
+  .primary-image {
     width: 33.33%;
 
     @media (--mobile) {
       width: 100%;
     }
 
-    & .drop-target {
+    .drop-target {
       position: relative;
       width: 100%;
       padding-bottom: 66.67%;
       text-align: center;
       line-height: 1.6;
 
-      & > .upload-button {
+      > .upload-button {
         position: absolute;
         display: flex;
         flex-direction: column;
@@ -133,15 +134,15 @@
     }
   }
 
-  & .grid {
+  .grid {
     width: 100%;
 
-    & .images {
+    .images {
       position: relative;
       display: flex;
       flex-wrap: wrap;
 
-      & .grid-image {
+      .grid-image {
         display: flex;
         flex-direction: column;
         justify-content: flex-end;
@@ -157,10 +158,10 @@
       }
     }
 
-    & .editable-image {
+    .editable-image {
       padding-bottom: 75%;
 
-      & img {
+      img {
         position: absolute;
         top: 0px;
         left: 0px;
@@ -171,18 +172,18 @@
       }
     }
 
-    & .drop-target {
+    .drop-target {
       margin: 10px var(--image-padding);
       padding-top: 10px;
 
-      & button {
+      button {
         margin: 0px 7px;
       }
     }
   }
 
   &.with-primary-image {
-    & .grid {
+    .grid {
       width: 66.67%;
 
       @media (--mobile) {
@@ -190,7 +191,7 @@
       }
     }
 
-    & .images .grid-image {
+    .images .grid-image {
       width: 25%;
 
       @media (--narrow) {
@@ -203,7 +204,7 @@
     }
   }
 
-  & .drag-image {
+  .drag-image {
     position: absolute;
     width: 150px;
     z-index: 100;

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

@@ -17,14 +17,14 @@
     border: 2px dashed var(--border-color);
   }
 
-  & .image {
+  .image {
     display: flex;
     align-items: center;
     justify-content: center;
     max-width: 250px;
     max-height: 400px;
 
-    & .editable-image img {
+    .editable-image img {
       width: auto;
       max-height: 400px;
     }
@@ -34,19 +34,19 @@
     }
   }
 
-  & .ui-wrapper {
+  .ui-wrapper {
     flex: 1;
     display: flex;
     align-items: center;
     justify-content: center;
   }
 
-  & .ui {
+  .ui {
     text-align: center;
     padding: 20px;
   }
 
-  & .remove-image {
+  .remove-image {
     display: block;
     margin-top: 20px;
   }

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

@@ -17,6 +17,12 @@ body {
   flex-flow: column nowrap;
   height: 100vh;
 
+  & > div[data-react-class] {
+    flex-grow: 1;
+    display: flex;
+    flex-flow: column nowrap;
+  }
+
   & > *,
   & .main-wrapper {
     flex-shrink: 0;
@@ -40,7 +46,7 @@ body {
   & > aside {
     min-width: 300px;
     width: 20%;
-    padding: 0px 16px;
+    padding: 1rem;
 
     @media (--mobile) {
       width: 100%;