alchemy_cms 7.4.5 → 8.0.0.a

data/app/stylesheets/alchemy/admin.scss

@@ -0,0 +1,44 @@
+@use "custom-properties";
+@use "defaults";
+@use "fonts";
+@use "admin/archive";
+@use "admin/attachment-select";
+@use "admin/attachments";
+@use "admin/base";
+@use "admin/buttons";
+@use "admin/clipboard";
+@use "admin/dashboard";
+@use "admin/dialogs";
+@use "admin/elements";
+@use "admin/errors";
+@use "admin/filters";
+@use "admin/flash";
+@use "admin/flatpickr";
+@use "admin/form_fields";
+@use "admin/forms";
+@use "admin/frame";
+@use "admin/hints";
+@use "admin/icons";
+@use "admin/image_library";
+@use "admin/images";
+@use "admin/labels";
+@use "admin/list_filter";
+@use "admin/lists";
+@use "admin/navigation";
+@use "admin/node-select";
+@use "admin/nodes";
+@use "admin/notices";
+@use "admin/pagination";
+@use "admin/preview_window";
+@use "admin/resource_info";
+@use "admin/search";
+@use "admin/selects";
+@use "admin/shoelace";
+@use "admin/sitemap";
+@use "admin/spinner";
+@use "admin/tables";
+@use "admin/tags";
+@use "admin/toolbar";
+@use "admin/typography";
+@use "admin/upload";
+@use "cropper.min";

data/app/stylesheets/alchemy/custom-properties.css

@@ -0,0 +1,244 @@
+:root {
+  /* Sizes */
+  --spacing-0: 2px;
+  --spacing-1: 4px;
+  --spacing-2: 8px;
+  --spacing-3: 12px;
+  --spacing-4: 16px;
+  --spacing-5: 20px;
+  --spacing-6: 24px;
+  --spacing-7: 28px;
+  --spacing-8: 32px;
+
+  /* Font Families */
+  --font-mono: Menlo, Monaco, "Bitstream Vera Sans Mono", "Lucida Console",
+    Terminal, monospace;
+  --font-sans: "Open Sans", "Lucida Grande", "Lucida Sans Unicode",
+    "Lucida Sans", Verdana, Tahoma, sans-serif;
+
+  /* Font Size - at the moment only in Pixel, because the base font size is 12px */
+  --font-size_small: 10px; /* 0.875rem */
+  --font-size_medium: 12px; /* 1rem */
+  --font-size_large: 16px; /* 1.25 rem */
+
+  --font-weight_normal: 500;
+  --font-weight_bold: 700;
+
+  --font-default: var(--font-size_medium) var(--font-sans);
+
+  --body-background-color: var(--color-grey_very_light);
+
+  /* Borders */
+  --border-radius_medium: 3px;
+  --border-width_small: 1px;
+  --border-style: solid;
+  --border-color: hsla(0deg, 0%, 69%, 0.5);
+  --border-inset-color: hsla(0deg, 0%, 79%, 0.5);
+  --border-default: var(--border-width_small) var(--border-style)
+    var(--border-color);
+
+  /* Buttons */
+  --button-bg-color: var(--color-white);
+  --button-border-color: var(--border-color);
+  --button-box-shadow: 0 1px 1px -1px hsl(0deg, 0%, 20%);
+  --button-focus-border-color: var(--color-orange_dark);
+  --button-focus-box-shadow: 0 1px 1px 0 var(--button-focus-border-color);
+  --button-hover-bg-color: transparent;
+  --button-hover-border-color: hsla(0deg, 0%, 59%, 0.5);
+  --button-text-color: var(--text-color);
+  --button-text-shadow: none;
+  --button-secondary-bg-color: transparent;
+  --button-secondary-border-color: var(--border-color);
+  --button-secondary-text-color: var(--text-color);
+
+  /* Colors */
+  --color-blue_very_light: hsl(203deg, 32%, 97%);
+  --color-blue_light: hsl(203deg, 32%, 85%);
+  --color-blue_medium: hsl(212deg, 52%, 36%);
+  --color-blue_dark: hsl(212deg, 52%, 26%);
+
+  --color-green_very_light: hsl(88deg, 47%, 88%);
+  --color-green_light: hsl(127deg, 25%, 69%);
+  --color-green_medium: hsl(127deg, 25%, 48%);
+  --color-green_dark: hsl(128deg, 32%, 26%);
+
+  --color-yellow_light: hsl(60deg, 81%, 92%);
+  --color-yellow_medium: hsl(56deg, 68%, 85%);
+  --color-yellow_dark: hsl(56deg, 53%, 29%);
+
+  --color-orange_medium: hsl(42deg, 100%, 74%);
+  --color-orange_dark: hsl(28deg, 77%, 68%);
+  --color-orange_very_dark: hsl(28deg, 77%, 48%);
+
+  --color-red_very_light: hsl(0deg, 47%, 88%);
+  --color-red_light: hsl(0deg, 25%, 69%);
+  --color-red_medium: hsl(0deg, 51%, 42%);
+  --color-red_dark: hsl(0deg, 51%, 25%);
+
+  --color-grey_very_light: hsl(0deg, 0%, 97%);
+  --color-grey_light: hsl(0deg, 0%, 94%);
+  --color-grey_medium: hsl(0deg, 0%, 78%);
+  --color-grey_dark: hsl(0deg, 0%, 40%);
+  --color-grey_very_dark: hsl(0deg, 0%, 20%);
+
+  --color-white: hsl(0deg, 0%, 100%);
+
+  /* Datepicker */
+  --datepicker-bg-color: var(--color-white);
+  --datepicker-box-shadow: 1px 0 0 var(--color-grey_light),
+    -1px 0 0 var(--color-grey_light), 0 1px 0 var(--color-grey_light),
+    0 -1px 0 var(--color-grey_light), 0 3px 13px rgba(0, 0, 0, 0.08);
+  --datepicker-text-color: var(--text-color);
+  --datepicker-text-hover-color: var(--color-orange_dark);
+  --datepicker-day-hover-bg: var(--color-grey_light);
+  --datepicker-today-border-color: var(--color-grey_dark);
+  --datepicker-today-hover-bg-color: var(--color-grey_dark);
+  --datepicker-today-hover-text-color: var(--color-white);
+  --datepicker-selected-bg-color: var(--color-blue_medium);
+  --datepicker-selected-text-color: var(--color-white);
+
+  /* Dialogs */
+  --dialog-header-color: var(--color-blue_dark);
+  --dialog-header-text-color: var(--color-white);
+  --dialog-box-shadow: 0 var(--spacing-2) var(--spacing-4)
+    hsla(0deg, 0%, 14%, 0.5);
+  --dialog-overlay-color: hsla(0deg, 0%, 39%, 0.4);
+  --dialog-background-color: var(--color-grey_very_light);
+
+  /* Elements */
+  --element-header-bg-color: transparent;
+  --element-header-active-bg-color: var(--color-blue_dark);
+  --element-header-active-color: var(--color-white);
+  --element-header-deprecated-bg-color: hsla(29deg, 95%, 84%, 0.25);
+  --element-deprecated-border-color: hsl(29deg, 95%, 84%);
+
+  /* Focus Status */
+  --focus-color: hsla(28deg, 77%, 68%, 0.75);
+
+  /* Form Fields */
+  --form-field-background-color: var(--color-white);
+  --form-field-border-color: var(--border-color) var(--border-color)
+    var(--border-inset-color) var(--border-inset-color);
+  --form-field-box-shadow: inset 0 0 1px var(--color-grey_light);
+  --form-field-text-color: var(--text-color);
+  --form-field-disabled-text-color: hsl(0deg, 0%, 53%);
+  --form-field-disabled-bg-color: hsla(0deg, 0%, 100%, 0.5);
+  --form-field-error-bg-color: hsl(0deg, 47%, 96%);
+  --form-field-error-box-shadow: inset 0 0 1px hsla(0deg, 25%, 69%, 0.5);
+
+  /* Header */
+  --header-background: hsl(0deg, 0%, 85%);
+
+  /* Hints */
+  --hint-background-color: var(--color-yellow_light);
+  --hint-text-color: hsl(49deg, 18%, 30%);
+
+  /* Icon Buttons */
+  --icon-button-linked-color: hsla(42deg, 100%, 74%, 0.75);
+  --icon-button-linked-hover-color: hsla(42deg, 100%, 64%, 0.75);
+  --icon-button-linked-border-color: hsl(42deg, 100%, 64%);
+  --icon-button-linked-hover-border-color: hsl(42deg, 100%, 54%);
+
+  /* Icons */
+  --icon-color: hsla(224deg, 23%, 26%, 0.75);
+
+  /* Main Menu */
+  --main-menu-bg-color: var(--color-blue_dark);
+  --main-menu-active-bg-color: var(--color-orange_dark);
+  --main-menu-active-text-color: var(--color-blue_dark);
+  --main-menu-text-color: var(--color-white);
+  --main-menu-icon-color: var(--color-white);
+
+  /* Notices */
+  --notice-success-background-color: hsl(88deg, 47%, 88%);
+  --notice-success-border-color: hsl(127deg, 25%, 69%);
+  --notice-success-text-color: hsl(128deg, 32%, 26%);
+
+  --notice-info-background-color: hsl(215deg, 63%, 87%);
+  --notice-info-border-color: hsl(222deg, 25%, 61%);
+  --notice-info-text-color: hsl(225deg, 53%, 29%);
+
+  --notice-warning-background-color: hsl(56deg, 68%, 85%);
+  --notice-warning-border-color: hsl(55deg, 25%, 69%);
+  --notice-warning-text-color: hsl(56deg, 53%, 29%);
+
+  --notice-error-background-color: hsl(0deg, 47%, 88%);
+  --notice-error-border-color: hsl(0deg, 25%, 69%);
+  --notice-error-text-color: hsl(0deg, 51%, 42%);
+
+  /* Pagination */
+  --pagination-background-color: var(--color-grey_very_light);
+
+  /* Selects */
+  --select-hover-bg-color: var(--color-blue_dark);
+  --select-hover-text-color: var(--color-white);
+
+
+  /* Sidebar */
+  --sidebar-width: 232px;
+
+  /* Sitemap */
+  --sitemap-page-background-color: hsla(0deg, 0%, 100%, 0.75);
+  --sitemap-page-hover-color: hsla(60deg, 81%, 92%, 0.5);
+  --sitemap-info-background-color: hsla(0deg, 0%, 100%, 0.5);
+  --sitemap-highlight-color: hsla(57deg, 100%, 82%, 0.5);
+
+  /* Tables */
+  --table-row-even-background-color: var(--color-white);
+  --table-row-odd-background-color: hsla(0deg, 0%, 100%, 0.5);
+  --table-row-hover-color: hsla(60deg, 81%, 92%, 0.5);
+
+  /* Text */
+  --text-color: hsla(224deg, 23%, 26%, 0.8);
+  --text-color-muted: hsla(224deg, 23%, 26%, 0.5);
+  --text-link-color: var(--color-orange_very_dark);
+  --text-shadow-light: 0 0 var(--spacing-1) hsla(0deg, 0%, 100%, 0.5);
+
+  /* Thumbnails */
+  --thumbnail-background: linear-gradient(
+        45deg,
+        var(--color-grey_light) 25%,
+        transparent 25%
+      )
+      0.5em 0.5em/1em 1em,
+    linear-gradient(-45deg, var(--color-grey_light) 25%, transparent 25%) -0.5em
+      0/1em 1em,
+    linear-gradient(45deg, transparent 75%, var(--color-grey_light) 75%) 0 0/1em
+      1em,
+    linear-gradient(-45deg, transparent 75%, var(--color-grey_light) 75%) 0
+      0.5em/1em 1em var(--color-grey_medium);
+
+  /* Toolbar */
+  --toolbar-bg-color: var(--color-grey_light);
+
+  /* Tooltips */
+  --tooltip-background-color: var(--color-blue_dark);
+
+  /* Transitions */
+  --transition-duration: 250ms;
+  --transition-easing: linear;
+
+  /* Shoelace */
+  --tabs_indicator-color: var(--color-orange_dark);
+  --tabs_track-color: var(--color-grey_light);
+  --sl-input-label-color: var(--text-color);
+
+  /* File Upload */
+  --file-upload-failed-text-color: var(--color-red_medium);
+  --file-upload-text-color: var(--text-color);
+  --file-upload_background-color: hsla(0deg, 0%, 80%, 0.8);
+  --file-upload_single-upload-background-color: var(--color-grey_light);
+  --file-upload_progress-track-color: var(--color-blue_very_light);
+  --file-upload_progress-indicator-color: var(--color-blue_dark);
+  --file-upload_progress-indicator-color-canceled: hsla(0deg, 0%, 60%, 0.8);
+  --file-upload_progress-indicator-color-failed: var(--color-red_medium);
+  --file-upload_progress-indicator-color-invalid: var(--color-red_medium);
+  --file-upload_progress-indicator-color-successful: var(--color-green_medium);
+  --file-upload_progress-indicator-color-upload-finished: var(
+    --color-blue_dark
+  );
+}
+
+.alchemy-light {
+  color-scheme: light;
+}

data/app/stylesheets/alchemy/welcome.scss

@@ -0,0 +1,75 @@
+@use "custom-properties";
+@use "fonts";
+
+body {
+  background-color: var(--color-blue_dark);
+  color: var(--color-white);
+  font-family: var(--font-sans);
+  font-weight: var(--font-weight_normal);
+  font-size: var(--font-size_large);
+  line-height: 22px;
+}
+
+h3 {
+  font-weight: bold;
+  font-size: 1.5rem;
+  line-height: 1.2;
+  margin-bottom: 20px;
+  padding-top: 20px;
+}
+
+.container {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  max-width: 50vw;
+  margin-top: -50px;
+  transform: translateY(-50%) translateX(-50%);
+
+  img {
+    height: 75px;
+    margin-left: -0.35em;
+  }
+}
+
+ul {
+  line-height: 1.6;
+  margin-bottom: 17px;
+  padding: 0;
+  padding-left: 20px;
+  margin: 0px;
+  list-style-position: outside;
+
+  li {
+    color: var(--color-white);
+    margin-bottom: 12px;
+    background-color: none;
+    border-bottom: 0 none;
+    line-height: 22px;
+  }
+}
+
+p {
+  margin: 2em 0;
+}
+
+a {
+  color: var(--color-white);
+  text-decoration: none;
+  transition: all var(--transition-duration) var(--transition-easing);
+
+  &:hover {
+    color: var(--color-white);
+    text-decoration: underline;
+  }
+
+  &.button {
+    background-color: white;
+    border-radius: var(--border-radius_medium);
+    padding: 0.5em 0.75em;
+    text-decoration: none;
+    font-size: 0.9em;
+    font-weight: 600;
+    color: var(--color-blue_dark);
+  }
+}

data/app/{assets/stylesheets → stylesheets}/tinymce/skins/content/alchemy/content.scss

@@ -5,18 +5,17 @@
 * For commercial licenses see https://www.tiny.cloud/
 */
 
-@import "alchemy/variables";
-@import "alchemy/custom-properties";
+@use "../../../../alchemy/custom-properties";
 
 html {
   font-size: 13px;
 }
 
 body {
-  font-family: $default-font-family;
+  font-family: var(--font-sans);
   line-height: 1.4;
   margin: 1em;
-  color: var(--color-text);
+  color: var(--text-color);
 }
 
 a {
@@ -29,7 +28,7 @@ table {
 
 table td,
 table th {
-  border: 1px solid $default-border-color;
+  border: 1px solid var(--border-color);
   padding: 0.4rem;
 }
 
@@ -46,25 +45,25 @@ figure figcaption {
 }
 
 hr {
-  border-color: $default-border-color;
+  border-color: var(--border-color);
   border-style: solid;
   border-width: 1px 0 0 0;
 }
 
 code {
   background-color: var(--color-grey_very_light);
-  border-radius: $default-border-radius;
+  border-radius: var(--border-radius_medium);
   padding: 0.1rem 0.2rem;
 }
 
 .mce-content-body:not([dir="rtl"]) blockquote {
-  border-left: 2px solid $default-border-color;
+  border-left: 2px solid var(--border-color);
   margin-left: 1.5rem;
   padding-left: 1rem;
 }
 
 .mce-content-body[dir="rtl"] blockquote {
-  border-right: 2px solid $default-border-color;
+  border-right: 2px solid var(--border-color);
   margin-right: 1.5rem;
   padding-right: 1rem;
 }

data/app/stylesheets/tinymce/skins/ui/alchemy/content.scss

@@ -0,0 +1 @@
+/* Left blank on purpose! Tinymce loads this file, but we do not need it. */