lakelib 0.2.6 → 0.3.1

package/dist/lake.css

@@ -83,6 +83,14 @@
   padding: 0;
   margin-bottom: 8px;
 }
+.lake-container a {
+  color: var(--lake-link-color);
+  text-decoration: none;
+}
+.lake-container a:hover {
+  color: var(--lake-link-hover-color);
+  text-decoration: underline;
+}
 .lake-drop-indication {
   position: absolute;
   height: 2px;
@@ -682,53 +690,6 @@ button.lake-primary-button.lake-button-hovered {
   margin-bottom: 8px;
 }
 
-.lake-container a {
-  color: var(--lake-link-color);
-  text-decoration: none;
-}
-.lake-container a:hover {
-  color: var(--lake-link-hover-color);
-  text-decoration: underline;
-}
-.lake-link-popup {
-  position: absolute;
-  top: 0;
-  left: 0;
-  z-index: var(--lake-popup-z-index);
-  border: 1px solid var(--lake-popup-border-color);
-  border-radius: 5px;
-  padding: 16px;
-  width: fit-content;
-  background-color: #fff;
-  box-shadow: var(--lake-popup-shadow);
-  display: none;
-}
-.lake-link-popup .lake-url-row {
-  display: flex;
-  align-items: center;
-}
-.lake-link-popup .lake-button-row {
-  padding-top: 16px;
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-}
-.lake-link-popup input[type="text"] {
-  width: 220px;
-  margin-right: 4px;
-}
-.lake-link-popup button[name="copy"] svg:first-child {
-  display: inline;
-}
-.lake-link-popup button[name="copy"] svg:nth-child(2) {
-  display: none;
-  fill: var(--lake-success-color);
-}
-.lake-link-popup button[name="copy"] svg:last-child {
-  display: none;
-  fill: var(--lake-error-color);
-}
-
 .lake-container ol,
 .lake-container ul {
   list-style: none;
@@ -886,17 +847,120 @@ button.lake-primary-button.lake-button-hovered {
   background-color: #f43f5e24;
 }
 
+.lake-toolbar {
+  box-sizing: border-box;
+  font-family: var(--lake-font-family);
+  font-size: 14px;
+  font-weight: normal;
+  line-height: normal;
+  padding: 4px;
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+}
+.lake-toolbar *,
+.lake-toolbar ::before,
+.lake-toolbar ::after {
+  box-sizing: border-box;
+}
+.lake-toolbar .lake-toolbar-divider {
+  width: 1px;
+  height: 20px;
+  margin: 0 4px;
+  border-left: 1px solid var(--lake-border-color);
+  user-select: none;
+}
+.lake-toolbar .lake-upload {
+  line-height: 0;
+}
+.lake-toolbar .lake-upload input[type="file"] {
+  display: none;
+}
+
+.lake-floating-toolbar {
+  position: absolute;
+  top: 0;
+  left: 0;
+  z-index: var(--lake-popup-z-index);
+  border: 1px solid var(--lake-border-color);
+  border-radius: 5px;
+  background-color: #fff;
+  box-shadow: var(--lake-button-shadow);
+  padding: 4px;
+  display: flex;
+  align-items: center;
+}
+.lake-floating-toolbar .lake-toolbar-divider {
+  width: 1px;
+  height: 20px;
+  margin: 0 4px;
+  border-left: 1px solid var(--lake-border-color);
+  user-select: none;
+}
+
 .lake-container table {
-  display: block;
+  display: table;
   border-collapse: collapse;
   border: 0;
   margin: 20px 0;
-  overflow-x: auto;
+  overflow: visible;
+}
+.lake-container table tr,
+.lake-container table tr:nth-child(n) {
+  border: 0;
+  background-color: transparent;
 }
 .lake-container table td {
+  font-size: var(--lake-font-size);
   padding: 8px 16px;
+  min-width: 33px;
   border: 1px solid var(--lake-border-color);
 }
+.lake-container table td p {
+  margin-bottom: 0;
+}
+.lake-container table td.lake-td-focused {
+  outline: var(--lake-input-outline);
+}
+
+.lake-link-popup {
+  position: absolute;
+  top: 0;
+  left: 0;
+  z-index: var(--lake-popup-z-index);
+  border: 1px solid var(--lake-popup-border-color);
+  border-radius: 5px;
+  padding: 16px;
+  width: fit-content;
+  background-color: #fff;
+  box-shadow: var(--lake-popup-shadow);
+  display: none;
+}
+.lake-link-popup .lake-url-row {
+  display: flex;
+  align-items: center;
+}
+.lake-link-popup .lake-button-row {
+  padding-top: 16px;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+.lake-link-popup input[type="text"] {
+  width: 220px;
+  margin-right: 4px;
+}
+.lake-link-popup button[name="copy"] svg:first-child {
+  display: inline;
+}
+.lake-link-popup button[name="copy"] svg:nth-child(2) {
+  display: none;
+  fill: var(--lake-success-color);
+}
+.lake-link-popup button[name="copy"] svg:last-child {
+  display: none;
+  fill: var(--lake-error-color);
+}
 
 lake-box[name="hr"] {
   margin-bottom: 8px;
@@ -1113,320 +1177,6 @@ lake-box[name="image"] .lake-box-selected .lake-image-error {
   cursor: pointer;
 }
 
-.lake-video {
-  position: relative;
-  font-size: 14px;
-  font-weight: normal;
-  line-height: 0;
-  border: 1px solid transparent;
-}
-lake-box[name="video"] .lake-box-hovered .lake-resizer {
-  display: block;
-}
-.lake-video .lake-video-form {
-  padding: 16px;
-  line-height: normal;
-  border: 1px solid var(--lake-box-border-color);
-  border-radius: 4px;
-}
-.lake-video input[type="text"] {
-  font-family: var(--lake-font-family);
-  font-size: 14px;
-  color: var(--lake-text-color);
-  border-radius: 5px;
-  border: 1px solid var(--lake-input-border-color);
-  padding: 4px 10px;
-  width: 100%;
-}
-.lake-video input[type="text"]:hover {
-  border: 1px solid var(--lake-input-border-hover-color);
-}
-.lake-video input[type="text"]:focus-visible {
-  outline: var(--lake-input-outline);
-  outline-offset: -2px;
-}
-.lake-video .lake-row {
-  padding-bottom: 8px;
-}
-.lake-video .lake-desc-row {
-  padding-top: 8px;
-  padding-bottom: 16px;
-  color: var(--lake-secondary-text-color);
-}
-.lake-video .lake-button-row {
-  padding-top: 16px;
-}
-.lake-video .lake-button-row button {
-  width: 100%;
-}
-
-.lake-file {
-  position: relative;
-  font-size: var(--lake-font-size);
-  font-weight: normal;
-  line-height: 0;
-  border: 1px solid transparent;
-  border-radius: 4px;
-}
-.lake-container[contenteditable="true"] .lake-file {
-  cursor: default;
-  user-select: none;
-}
-.lake-container[contenteditable="false"] .lake-file {
-  cursor: pointer;
-  user-select: auto;
-}
-lake-box[name="file"] .lake-box-strip {
-  align-self: center;
-}
-.lake-file .lake-file-info {
-  display: flex;
-  align-items: center;
-}
-.lake-file .lake-file-type svg {
-  width: 16px;
-  height: 16px;
-  margin: 4px;
-}
-.lake-file .lake-file-name {
-  line-height: 24px;
-  margin-right: 6px;
-  color: var(--lake-link-color);
-}
-lake-box[name="file"] .lake-box-hovered .lake-file {
-  background-color: var(--lake-box-background-color);
-}
-lake-box[name="file"] .lake-box-selected .lake-file {
-  background-color: var(--lake-selection-background-color);
-}
-lake-box[name="file"] .lake-box-focused .lake-file {
-  background-color: var(--lake-selection-background-color);
-}
-/* uploading status */
-.lake-file-uploading .lake-progress {
-  display: flex;
-  align-items: center;
-  margin-right: 6px;
-}
-.lake-file-uploading .lake-progress svg {
-  width: 16px;
-  height: 16px;
-  margin: 4px;
-  animation: lakerotate 1s linear 0s infinite normal none;
-}
-.lake-file-uploading .lake-progress .lake-percent {
-  line-height: 24px;
-  margin-left: 4px;
-  white-space: nowrap;
-}
-/* error status */
-.lake-file-error .lake-file-type svg {
-  fill: var(--lake-error-color);
-}
-.lake-file-error .lake-file-name {
-  color: var(--lake-error-color);
-}
-
-.lake-emoji {
-  line-height: 0;
-  border: 1px solid transparent;
-  border-radius: 2px;
-}
-.lake-emoji img {
-  border: 0;
-  border-radius: 2px;
-  width: 32px;
-  height: 32px;
-}
-lake-box[name="emoji"] .lake-box-focused .lake-emoji {
-  border-color: var(--lake-selection-background-color);
-  background-color: var(--lake-selection-background-color);
-}
-
-.lake-equation {
-  position: relative;
-  font-weight: normal;
-  border: 1px solid transparent;
-  border-radius: 4px;
-}
-.lake-container[contenteditable="true"] .lake-equation {
-  user-select: none;
-}
-lake-box[name="equation"] .lake-box-strip {
-  align-self: center;
-}
-lake-box[name="equation"] .lake-box-selected .lake-equation {
-  background-color: var(--lake-selection-background-color);
-}
-lake-box[name="equation"] .lake-box-focused .lake-equation {
-  background-color: var(--lake-selection-background-color);
-}
-.lake-equation .lake-equation-view {
-  padding: 0 6px;
-}
-.lake-equation .lake-equation-form {
-  position: absolute;
-  top: 28px;
-  left: 0;
-  z-index: 1;
-  border: 1px solid var(--lake-border-color);
-  border-radius: 5px;
-  padding: 16px;
-  width: fit-content;
-  background-color: #fff;
-  box-shadow: var(--lake-popup-shadow);
-  display: none;
-}
-lake-box[name="equation"] .lake-box-focused .lake-equation-form,
-lake-box[name="equation"] .lake-box-activated .lake-equation-form {
-  display: flex;
-}
-.lake-equation .lake-equation-form textarea {
-  border: 0;
-  font-family: Consolas, Courier, monospace;
-  font-size: 14px;
-  color: var(--lake-text-color);
-  padding: 0;
-  margin-right: 8px;
-  width: 300px;
-  height: 80px;
-  resize: none;
-  scrollbar-width: thin;
-}
-.lake-equation .lake-equation-form textarea:focus-visible {
-  outline: 0;
-}
-.lake-equation .lake-equation-form .lake-button-row {
-  display: flex;
-  flex-direction: column;
-  justify-content: space-between;
-  align-items: flex-end;
-}
-/* error status */
-.lake-equation-error {
-  padding: 0 6px;
-  font-size: 14px;
-  color: var(--lake-error-color);
-  background-color: var(--lake-box-background-color);
-}
-
-.lake-mention {
-  border: 1px solid transparent;
-  border-radius: 2px;
-}
-.lake-container[readonly="false"] .lake-mention a:hover {
-  color: var(--lake-link-color);
-  text-decoration: none;
-}
-lake-box[name="mention"] .lake-box-focused .lake-mention {
-  border-color: var(--lake-selection-background-color);
-  background-color: var(--lake-selection-background-color);
-}
-.lake-mention-menu {
-  max-height: 208px;
-}
-.lake-mention-menu .lake-mention-avatar {
-  margin-inline-end: 8px;
-  line-height: 0;
-}
-.lake-mention-menu .lake-mention-avatar img {
-  border-radius: 100%;
-  width: 32px;
-  height: 32px;
-}
-.lake-mention-menu .lake-mention-nickname {
-  margin-inline-end: 4px;
-  font-weight: 500;
-  color: var(--lake-text-color);
-  white-space: nowrap;
-}
-.lake-mention-menu .lake-mention-name {
-  color: #8c8c8c;
-}
-
-.lake-slash-menu {
-  max-height: 330px;
-}
-.lake-slash-menu .lake-menu-item input[type="file"] {
-  display: none;
-}
-.lake-slash-menu .lake-slash-icon {
-  margin-inline-end: 8px;
-  border-radius: 5px;
-  border: 1px solid var(--lake-border-color);
-  background-color: #fff;
-  line-height: 0;
-}
-.lake-slash-menu .lake-slash-icon svg,
-.lake-slash-menu .lake-slash-icon img {
-  width: 32px;
-  height: 32px;
-  margin: 6px;
-}
-.lake-slash-menu .lake-slash-text {
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-}
-.lake-slash-menu .lake-slash-title {
-  font-weight: 500;
-  color: var(--lake-text-color);
-}
-.lake-slash-menu .lake-slash-description {
-  color: #8c8c8c;
-}
-
-.lake-toolbar {
-  box-sizing: border-box;
-  font-family: var(--lake-font-family);
-  font-size: 14px;
-  font-weight: normal;
-  line-height: normal;
-  padding: 4px;
-  display: flex;
-  flex-wrap: wrap;
-  align-items: center;
-}
-.lake-toolbar *,
-.lake-toolbar ::before,
-.lake-toolbar ::after {
-  box-sizing: border-box;
-}
-.lake-toolbar .lake-toolbar-divider {
-  width: 1px;
-  height: 20px;
-  margin: 0 4px;
-  border-left: 1px solid var(--lake-border-color);
-  user-select: none;
-}
-.lake-toolbar .lake-upload {
-  line-height: 0;
-}
-.lake-toolbar .lake-upload input[type="file"] {
-  display: none;
-}
-
-.lake-floating-toolbar {
-  position: absolute;
-  top: 0;
-  left: 0;
-  z-index: var(--lake-popup-z-index);
-  border: 1px solid var(--lake-border-color);
-  border-radius: 5px;
-  background-color: #fff;
-  box-shadow: 0 2px 0 #00000005;
-  padding: 4px;
-  display: flex;
-  align-items: center;
-}
-.lake-floating-toolbar .lake-toolbar-divider {
-  width: 1px;
-  height: 20px;
-  margin: 0 4px;
-  border-left: 1px solid var(--lake-border-color);
-  user-select: none;
-}
-
 /*! PhotoSwipe main CSS by Dmytro Semenov | photoswipe.com */
 
 .pswp {
@@ -1847,3 +1597,267 @@ div.pswp__img--placeholder,
 .pswp--one-slide .pswp__counter {
   display: none;
 }
+
+.lake-video {
+  position: relative;
+  font-size: 14px;
+  font-weight: normal;
+  line-height: 0;
+  border: 1px solid transparent;
+}
+lake-box[name="video"] .lake-box-hovered .lake-resizer {
+  display: block;
+}
+.lake-video .lake-video-form {
+  padding: 16px;
+  line-height: normal;
+  border: 1px solid var(--lake-box-border-color);
+  border-radius: 4px;
+}
+.lake-video input[type="text"] {
+  font-family: var(--lake-font-family);
+  font-size: 14px;
+  color: var(--lake-text-color);
+  border-radius: 5px;
+  border: 1px solid var(--lake-input-border-color);
+  padding: 4px 10px;
+  width: 100%;
+}
+.lake-video input[type="text"]:hover {
+  border: 1px solid var(--lake-input-border-hover-color);
+}
+.lake-video input[type="text"]:focus-visible {
+  outline: var(--lake-input-outline);
+  outline-offset: -2px;
+}
+.lake-video .lake-row {
+  padding-bottom: 8px;
+}
+.lake-video .lake-desc-row {
+  padding-top: 8px;
+  padding-bottom: 16px;
+  color: var(--lake-secondary-text-color);
+}
+.lake-video .lake-button-row {
+  padding-top: 16px;
+}
+.lake-video .lake-button-row button {
+  width: 100%;
+}
+
+.lake-file {
+  position: relative;
+  font-size: var(--lake-font-size);
+  font-weight: normal;
+  line-height: 0;
+  border: 1px solid transparent;
+  border-radius: 4px;
+}
+.lake-container[contenteditable="true"] .lake-file {
+  cursor: default;
+  user-select: none;
+}
+.lake-container[contenteditable="false"] .lake-file {
+  cursor: pointer;
+  user-select: auto;
+}
+lake-box[name="file"] .lake-box-strip {
+  align-self: center;
+}
+.lake-file .lake-file-info {
+  display: flex;
+  align-items: center;
+}
+.lake-file .lake-file-type svg {
+  width: 16px;
+  height: 16px;
+  margin: 4px;
+}
+.lake-file .lake-file-name {
+  line-height: 24px;
+  margin-right: 6px;
+  color: var(--lake-link-color);
+}
+lake-box[name="file"] .lake-box-hovered .lake-file {
+  background-color: var(--lake-box-background-color);
+}
+lake-box[name="file"] .lake-box-selected .lake-file {
+  background-color: var(--lake-selection-background-color);
+}
+lake-box[name="file"] .lake-box-focused .lake-file {
+  background-color: var(--lake-selection-background-color);
+}
+/* uploading status */
+.lake-file-uploading .lake-progress {
+  display: flex;
+  align-items: center;
+  margin-right: 6px;
+}
+.lake-file-uploading .lake-progress svg {
+  width: 16px;
+  height: 16px;
+  margin: 4px;
+  animation: lakerotate 1s linear 0s infinite normal none;
+}
+.lake-file-uploading .lake-progress .lake-percent {
+  line-height: 24px;
+  margin-left: 4px;
+  white-space: nowrap;
+}
+/* error status */
+.lake-file-error .lake-file-type svg {
+  fill: var(--lake-error-color);
+}
+.lake-file-error .lake-file-name {
+  color: var(--lake-error-color);
+}
+
+.lake-emoji {
+  line-height: 0;
+  border: 1px solid transparent;
+  border-radius: 2px;
+}
+.lake-emoji img {
+  border: 0;
+  border-radius: 2px;
+  width: 32px;
+  height: 32px;
+}
+lake-box[name="emoji"] .lake-box-focused .lake-emoji {
+  border-color: var(--lake-selection-background-color);
+  background-color: var(--lake-selection-background-color);
+}
+
+.lake-equation {
+  position: relative;
+  font-weight: normal;
+  border: 1px solid transparent;
+  border-radius: 4px;
+}
+.lake-container[contenteditable="true"] .lake-equation {
+  user-select: none;
+}
+lake-box[name="equation"] .lake-box-strip {
+  align-self: center;
+}
+lake-box[name="equation"] .lake-box-selected .lake-equation {
+  background-color: var(--lake-selection-background-color);
+}
+lake-box[name="equation"] .lake-box-focused .lake-equation {
+  background-color: var(--lake-selection-background-color);
+}
+.lake-equation .lake-equation-view {
+  padding: 0 6px;
+}
+.lake-equation .lake-equation-form {
+  position: absolute;
+  top: 28px;
+  left: 0;
+  z-index: 1;
+  border: 1px solid var(--lake-border-color);
+  border-radius: 5px;
+  padding: 16px;
+  width: fit-content;
+  background-color: #fff;
+  box-shadow: var(--lake-popup-shadow);
+  display: none;
+}
+lake-box[name="equation"] .lake-box-focused .lake-equation-form,
+lake-box[name="equation"] .lake-box-activated .lake-equation-form {
+  display: flex;
+}
+.lake-equation .lake-equation-form textarea {
+  border: 0;
+  font-family: Consolas, Courier, monospace;
+  font-size: 14px;
+  color: var(--lake-text-color);
+  padding: 0;
+  margin-right: 8px;
+  width: 300px;
+  height: 80px;
+  resize: none;
+  scrollbar-width: thin;
+}
+.lake-equation .lake-equation-form textarea:focus-visible {
+  outline: 0;
+}
+.lake-equation .lake-equation-form .lake-button-row {
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  align-items: flex-end;
+}
+/* error status */
+.lake-equation-error {
+  padding: 0 6px;
+  font-size: 14px;
+  color: var(--lake-error-color);
+  background-color: var(--lake-box-background-color);
+}
+
+.lake-mention-menu {
+  max-height: 208px;
+}
+.lake-mention-menu .lake-mention-avatar {
+  margin-inline-end: 8px;
+  line-height: 0;
+}
+.lake-mention-menu .lake-mention-avatar img {
+  border-radius: 100%;
+  width: 32px;
+  height: 32px;
+}
+.lake-mention-menu .lake-mention-nickname {
+  margin-inline-end: 4px;
+  font-weight: 500;
+  color: var(--lake-text-color);
+  white-space: nowrap;
+}
+.lake-mention-menu .lake-mention-name {
+  color: #8c8c8c;
+}
+
+.lake-mention {
+  border: 1px solid transparent;
+  border-radius: 2px;
+}
+.lake-container[readonly="false"] .lake-mention a:hover {
+  color: var(--lake-link-color);
+  text-decoration: none;
+}
+lake-box[name="mention"] .lake-box-focused .lake-mention {
+  border-color: var(--lake-selection-background-color);
+  background-color: var(--lake-selection-background-color);
+}
+
+.lake-slash-menu {
+  max-height: 330px;
+}
+.lake-slash-menu .lake-menu-item input[type="file"] {
+  display: none;
+}
+.lake-slash-menu .lake-slash-icon {
+  margin-inline-end: 8px;
+  border-radius: 5px;
+  border: 1px solid var(--lake-border-color);
+  background-color: #fff;
+  line-height: 0;
+}
+.lake-slash-menu .lake-slash-icon svg,
+.lake-slash-menu .lake-slash-icon img {
+  width: 32px;
+  height: 32px;
+  margin: 6px;
+}
+.lake-slash-menu .lake-slash-text {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+}
+.lake-slash-menu .lake-slash-title {
+  font-weight: 500;
+  color: var(--lake-text-color);
+}
+.lake-slash-menu .lake-slash-description {
+  color: #8c8c8c;
+}