@blinkk/root-cms 1.0.0-beta.3 → 1.0.0-beta.30

package/dist/ui/ui.css

@@ -1,50 +1,79 @@
-/* ui/components/SplitPanel/SplitPanel.css */
-.SplitPanel {
-  display: flex;
-  height: 100%;
+/* ui/components/Heading/Heading.css */
+.heading {
+  font-size: 18px;
+  line-height: 1.2;
+  font-weight: 700;
+  margin-top: 0;
+  margin-bottom: 0;
 }
-.SplitPanel__divider {
-  flex: 0 0 3px;
-  width: 3px;
-  height: 100%;
-  cursor: col-resize;
-  position: relative;
+.heading.size\:h1 {
+  font-size: 24px;
 }
-.SplitPanel__divider::before {
-  content: "";
-  display: block;
-  z-index: 0;
-  position: absolute;
-  top: 0;
-  height: 100%;
-  left: 1px;
-  width: 1px;
-  background-color: var(--color-border);
+.heading.size\:h2 {
+  font-size: 18px;
 }
-.SplitPanel__divider::after {
-  content: "";
-  display: block;
-  z-index: 1;
-  position: absolute;
-  top: 0;
-  height: 100%;
-  left: 0;
-  width: 100%;
-  background-color: transparent;
-  transition: background-color 0.18s ease;
+.heading.size\:h3 {
+  font-size: 16px;
 }
-.SplitPanel__divider:hover::after {
-  background-color: lightblue;
+.heading.size\:h4 {
+  font-size: 14px;
 }
-.SplitPanel__item.static {
-  flex: 0 0 var(--panel-size, 100%);
+.heading.weight\:regular {
+  font-weight: 400;
 }
-.SplitPanel__item.fluid {
-  flex: 1;
+.heading.weight\:semi-bold {
+  font-weight: 500;
 }
-.SplitPanel.dragging .SplitPanel__item {
-  pointer-events: none;
-  user-select: none;
+.heading.weight\:bold {
+  font-weight: 700;
+}
+.heading.color\:gray {
+  color: var(--color-text-gray);
+}
+.heading.color\:dark {
+  color: var(--color-text-dark);
+}
+
+/* ui/components/Text/Text.css */
+.text {
+  font-size: 14px;
+  line-height: 1.5;
+  font-weight: 400;
+  color: var(--color-text-default);
+}
+.text.size\:body-sm {
+  font-size: 12px;
+}
+.text.size\:body {
+  font-size: 14px;
+}
+.text.size\:body-lg {
+  font-size: 16px;
+}
+.text.weight\:regular {
+  font-weight: 400;
+}
+.text.weight\:semi-bold {
+  font-weight: 500;
+}
+.text.weight\:bold {
+  font-weight: 700;
+}
+.text.color\:gray {
+  color: var(--color-text-gray);
+}
+.text.color\:dark {
+  color: var(--color-text-dark);
+}
+.text code {
+  background: #efefef;
+  padding: 4px 8px;
+  border-radius: 2px;
+  white-space: nowrap;
+  font-family: var(--font-family-mono);
+  font-weight: 600;
+  margin-left: 4px;
+  margin-right: 4px;
 }
 
 /* ui/layout/Layout.css */
@@ -83,6 +112,12 @@
   padding: 0 4px;
   border-radius: 2px;
 }
+.Layout__top__project {
+  font-size: 13px;
+  line-height: 1;
+  font-weight: 600;
+  margin-left: 12px;
+}
 .Layout__top__logo:hover {
   background-color: var(--button-background-hover);
 }
@@ -139,6 +174,34 @@
   grid-area: bottom;
 }
 
+/* ui/pages/AssetsPage/AssetsPage.css */
+.AssetsPage {
+  padding: 60px;
+}
+.AssetsPage h1 {
+  margin-bottom: 24px;
+}
+.AssetsPage p {
+  margin-top: 16px;
+  max-width: 70ch;
+}
+
+/* ui/components/SlugInput/SlugInput.css */
+.SlugInput__inputs {
+  display: flex;
+  gap: 8px;
+  align-items: center;
+}
+.SlugInput__slug {
+  flex: 1;
+}
+.SlugInput__urlHelp {
+  margin-top: 8px;
+}
+.SlugInput__urlHelp::before {
+  content: "URL: ";
+}
+
 /* ui/components/NewDocModal/NewDocModal.css */
 .NewDocModal__body {
   font-size: 12px;
@@ -155,6 +218,55 @@
   gap: 12px;
 }
 
+/* ui/components/SplitPanel/SplitPanel.css */
+.SplitPanel {
+  display: flex;
+  height: 100%;
+}
+.SplitPanel__divider {
+  flex: 0 0 3px;
+  width: 3px;
+  height: 100%;
+  cursor: col-resize;
+  position: relative;
+}
+.SplitPanel__divider::before {
+  content: "";
+  display: block;
+  z-index: 0;
+  position: absolute;
+  top: 0;
+  height: 100%;
+  left: 1px;
+  width: 1px;
+  background-color: var(--color-border);
+}
+.SplitPanel__divider::after {
+  content: "";
+  display: block;
+  z-index: 1;
+  position: absolute;
+  top: 0;
+  height: 100%;
+  left: 0;
+  width: 100%;
+  background-color: transparent;
+  transition: background-color 0.18s ease;
+}
+.SplitPanel__divider:hover::after {
+  background-color: lightblue;
+}
+.SplitPanel__item.static {
+  flex: 0 0 var(--panel-size, 100%);
+}
+.SplitPanel__item.fluid {
+  flex: 1;
+}
+.SplitPanel.dragging .SplitPanel__item {
+  pointer-events: none;
+  user-select: none;
+}
+
 /* ui/pages/CollectionPage/CollectionPage.css */
 .CollectionPage__side__title {
   padding: 8px 12px;
@@ -339,6 +451,7 @@
   font-weight: 500;
 }
 .CollectionPage__collection__docsList__doc__image {
+  border: 1px solid var(--color-border);
   flex-shrink: 0;
 }
 .CollectionPage__collection__docsList__doc__content__title {
@@ -367,79 +480,16 @@
   font-weight: 500;
 }
 
-/* ui/components/Heading/Heading.css */
-.heading {
-  font-size: 18px;
-  line-height: 1.2;
-  font-weight: 700;
-  margin-top: 0;
-  margin-bottom: 0;
-}
-.heading.size\:h1 {
-  font-size: 24px;
-}
-.heading.size\:h2 {
-  font-size: 18px;
-}
-.heading.size\:h3 {
-  font-size: 16px;
-}
-.heading.weight\:regular {
-  font-weight: 400;
-}
-.heading.weight\:semi-bold {
-  font-weight: 500;
-}
-.heading.weight\:bold {
-  font-weight: 700;
-}
-.heading.color\:gray {
-  color: var(--color-text-gray);
-}
-.heading.color\:dark {
-  color: var(--color-text-dark);
-}
-
-/* ui/components/Text/Text.css */
-.text {
-  font-size: 14px;
-  line-height: 1.5;
-  font-weight: 400;
-  color: var(--color-text-default);
-}
-.text.size\:body-sm {
-  font-size: 12px;
-}
-.text.size\:body {
-  font-size: 14px;
-}
-.text.size\:body-lg {
-  font-size: 16px;
-}
-.text.weight\:regular {
-  font-weight: 400;
-}
-.text.weight\:semi-bold {
-  font-weight: 500;
-}
-.text.weight\:bold {
-  font-weight: 700;
-}
-.text.color\:gray {
-  color: var(--color-text-gray);
+/* ui/pages/DataPage/DataPage.css */
+.DataPage {
+  padding: 60px;
 }
-.text.color\:dark {
-  color: var(--color-text-dark);
+.DataPage h1 {
+  margin-bottom: 24px;
 }
-.text code {
-  background: #efefef;
-  padding: 4px 8px;
-  border-radius: 2px;
-  white-space: nowrap;
-  font-family: var(--font-family-mono);
-  font-weight: 600;
-  margin-left: 4px;
-  margin-right: 4px;
+.DataPage p {
+  margin-top: 16px;
+  max-width: 70ch;
 }
 
 /* ui/components/DocEditor/DocEditor.css */
@@ -471,6 +521,9 @@
 .DocEditor__statusBar__statusBadges {
   margin-right: 16px;
 }
+.DocEditor__statusBar__i18n {
+  margin-right: 8px;
+}
 .DocEditor__statusBar__actionsMenu {
   margin-left: 4px;
 }
@@ -597,14 +650,19 @@
 .DocEditor__ImageField__imagePreview {
   margin-bottom: 10px;
 }
+.DocEditor__ImageField__imagePreview__controls {
+  display: flex;
+  justify-content: flex-end;
+  gap: 4px;
+}
 .DocEditor__ImageField__imagePreview__image {
   background: #f5f5f5;
   border: 1px solid #dedede;
   aspect-ratio: 16/9;
   width: 100%;
-  overflow: hidden;
   padding: 10px;
   margin-bottom: 10px;
+  position: relative;
 }
 .DocEditor__ImageField__imagePreview__image img {
   display: block;
@@ -613,6 +671,19 @@
   object-fit: contain;
   object-position: center;
 }
+.DocEditor__ImageField__imagePreview__dimens {
+  position: absolute;
+  top: -1px;
+  right: -1px;
+  padding: 4px 8px;
+  background: black;
+  color: white;
+  font-size: 8px;
+  font-weight: 700;
+}
+.DocEditor__ImageField__imagePreview__image__alt {
+  margin-top: 4px;
+}
 .DocEditor__ImageField__noImage {
   font-family: var(--font-family-mono);
   margin: 10px 0;
@@ -638,6 +709,104 @@
 .DocEditor__ImageField__uploadButton__icon {
   margin-right: 10px;
 }
+.DocEditor__FileField__file {
+  margin-bottom: 10px;
+}
+.DocEditor__FileField__noFile {
+  font-family: var(--font-family-mono);
+  margin: 10px 0;
+}
+.DocEditor__FileField__uploadButton {
+  display: inline-flex;
+  align-items: center;
+  cursor: pointer;
+  background: #25262b;
+  border-radius: 4px;
+  padding: 0 14px;
+  height: 30px;
+  color: #ffffff;
+  font-weight: 600;
+  transition: all 0.3s ease;
+}
+.DocEditor__FileField__uploadButton[aria-disabled=true] {
+  opacity: 0.5;
+}
+.DocEditor__FileField__uploadButton input[type=file] {
+  display: none;
+}
+.DocEditor__FileField__uploadButton__icon {
+  margin-right: 10px;
+}
+
+/* ui/components/LocalizationModal/LocalizationModal.css */
+.LocalizationModal .mantine-Modal-modal {
+  padding: 30px 40px;
+}
+.LocalizationModal__layout {
+  display: grid;
+  grid-template-columns: 400px 1fr;
+  margin-top: -20px;
+  margin-bottom: 20px;
+}
+.LocalizationModal__iconTitle {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+.LocalizationModal__locales,
+.LocalizationModal__translations {
+  height: 100%;
+  min-height: 400px;
+  padding-top: 30px;
+  padding-bottom: 30px;
+}
+.LocalizationModal__locales {
+  padding-right: 30px;
+}
+.LocalizationModal__translations {
+  border-left: 1px solid var(--color-border);
+  padding-left: 30px;
+  margin-right: -30px;
+  padding-right: 30px;
+  max-height: 80vh;
+  overflow: auto;
+}
+.LocalizationModal__translations__header {
+  display: flex;
+  justify-content: space-between;
+  margin-bottom: 30px;
+}
+.LocalizationModal__translations__header__buttons {
+  display: flex;
+  gap: 8px;
+}
+.LocalizationModal__translations__table {
+  display: flex;
+  flex-direction: column;
+}
+.LocalizationModal__translations__table__row {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+}
+.LocalizationModal__translations__table__row--header {
+  align-items: center;
+}
+.LocalizationModal__translations__table__row + .LocalizationModal__translations__table__row {
+  border-top: 1px solid var(--color-border);
+  padding-top: 12px;
+  margin-top: 12px;
+}
+.LocalizationModal__translations__table__header,
+.LocalizationModal__translations__table__col {
+  padding-left: 8px;
+  padding-right: 8px;
+  text-align: left;
+}
+.LocalizationModal__translations__localeSelect {
+  display: flex;
+  gap: 8px;
+  align-items: center;
+}
 
 /* ui/components/PublishDocModal/PublishDocModal.css */
 .PublishDocModal .mantine-Modal-title {
@@ -711,14 +880,27 @@
   border-bottom: 1px solid var(--color-border);
   display: flex;
   align-items: center;
-  gap: 4px;
+  justify-content: space-between;
+  gap: 24px;
   height: var(--top-bar-height);
+  position: sticky;
+  top: 0;
+  z-index: 10;
+  background: white;
+}
+.DocumentPage__side__header__nav {
+  display: flex;
+  align-items: center;
+  gap: 4px;
 }
 .DocumentPage__side__header__back {
   color: var(--color-text-default);
 }
+.DocumentPage__side__header__buttons {
+  justify-self: flex-end;
+}
 .DocumentPage__side__editor {
-  padding: 8px 12px;
+  padding: 8px 12px 120px;
 }
 .DocumentPage__main {
   width: 100%;
@@ -803,18 +985,6 @@
   font-size: 12px;
 }
 
-/* ui/pages/ProjectPage/ProjectPage.css */
-.ProjectPage {
-  padding: 60px;
-}
-.ProjectPage h1 {
-  margin-bottom: 24px;
-}
-.ProjectPage p {
-  margin-top: 16px;
-  max-width: 70ch;
-}
-
 /* ui/pages/NotFoundPage/NotFoundPage.css */
 .NotFoundPage {
   display: flex;
@@ -831,23 +1001,60 @@
   font-weight: 500;
 }
 
-/* ui/pages/SettingsPage/SettingsPage.css */
-.SettingsPage {
-  padding: 30px;
+/* ui/pages/ProjectPage/ProjectPage.css */
+.ProjectPage {
+  padding: 60px;
 }
-.SettingsPage__section {
+.ProjectPage h1 {
+  margin-bottom: 24px;
+}
+.ProjectPage p {
+  margin-top: 16px;
+  max-width: 70ch;
+}
+.ProjectPage__section {
+  margin-top: 60px;
+}
+.ProjectPage__section__title {
+  margin-bottom: 20px;
+}
+.ProjectPage__collectionList {
+  display: flex;
+  flex-direction: column;
+  justify-content: flex-start;
+  gap: 12px;
+  max-width: 580px;
+}
+.ProjectPage__collectionList__collection {
   display: grid;
-  grid-template-columns: 1fr 2fr;
+  grid-template-columns: 20px 1fr;
+  align-items: center;
+  padding: 8px 12px;
+  column-gap: 12px;
+  row-gap: 4px;
+  width: 100%;
+  background: transparent;
+  border: 2px solid black;
+  border-radius: 8px;
+  cursor: pointer;
+  font-size: 14px;
+  font-weight: 500;
+  text-decoration: none;
+  transition: background-color 0.18s ease;
+  position: relative;
 }
-.SettingsPage__section__left,
-.SettingsPage__section__right {
-  padding: 30px;
+.ProjectPage__collectionList__collection:hover {
+  background-color: var(--button-background-hover);
 }
-.SettingsPage__section__left__title {
-  margin-bottom: 8px;
+.ProjectPage__collectionList__collection:active {
+  background-color: var(--button-background-active);
 }
-.SettingsPage__section__right__title {
-  margin-bottom: 12px;
+.ProjectPage__collectionList__collection__icon {
+  margin-top: 2px;
+}
+.ProjectPage__collectionList__collection__desc {
+  grid-column: 2 / span 1;
+  font-size: 12px;
 }
 
 /* ui/components/ShareBox/ShareBox.css */
@@ -879,28 +1086,23 @@
   text-overflow: ellipsis;
 }
 
-/* ui/pages/AssetsPage/AssetsPage.css */
-.AssetsPage {
-  padding: 60px;
-}
-.AssetsPage h1 {
-  margin-bottom: 24px;
+/* ui/pages/SettingsPage/SettingsPage.css */
+.SettingsPage {
+  padding: 30px;
 }
-.AssetsPage p {
-  margin-top: 16px;
-  max-width: 70ch;
+.SettingsPage__section {
+  display: grid;
+  grid-template-columns: 1fr 2fr;
 }
-
-/* ui/pages/DataPage/DataPage.css */
-.DataPage {
-  padding: 60px;
+.SettingsPage__section__left,
+.SettingsPage__section__right {
+  padding: 30px;
 }
-.DataPage h1 {
-  margin-bottom: 24px;
+.SettingsPage__section__left__title {
+  margin-bottom: 8px;
 }
-.DataPage p {
-  margin-top: 16px;
-  max-width: 70ch;
+.SettingsPage__section__right__title {
+  margin-bottom: 12px;
 }
 
 /* ui/pages/TranslationsPage/TranslationsPage.css */
@@ -965,6 +1167,9 @@ iframe {
   height: auto;
   margin: 0;
 }
+details > div {
+  box-sizing: border-box;
+}
 a {
   color: inherit;
 }
@@ -1031,3 +1236,27 @@ body.menu\:open {
   color: var(--color-text-default);
   border-bottom-color: lightblue;
 }
+
+/* ui/components/CopyDocModal/CopyDocModal.css */
+.CopyDocModal__from__label,
+.CopyDocModal__to__label {
+  margin-bottom: 8px;
+}
+.CopyDocModal__from__value code {
+  margin-left: 0;
+}
+.CopyDocModal__to {
+  margin-top: 16px;
+}
+.CopyDocModal__error {
+  margin: 24px 0;
+  font-size: 14px;
+  color: red;
+  font-weight: 600;
+}
+.CopyDocModal__buttons {
+  margin-top: 24px;
+  display: flex;
+  justify-content: flex-end;
+  gap: 12px;
+}