itty-bitty/docs/edit.css

html {
  --text-color:rgba(0, 0, 0, 0.87);
  --selected-text-color:#D42A20;
  --text-placeholder-color: rgba(0,0,0,0.54);
  --text-link-color:#0070e0;
  --background-color:white;
  --shadow-color:black;
  color: var(--text-color);
  background-color: var(--background-color);
--divider-color: rgba(0,0,0,0.15);
}
@media (prefers-color-scheme: dark) {
  html {
    --text-color:white;
    --selected-text-color:#e45149;
    --text-placeholder-color:rgba(255,255,255,0.33);
    --text-link-color:#40a0ff;
    --background-color:#111;
    --shadow-color:black;
    --divider-color: rgba(255,255,255,0.15);

  }
}

body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
  line-height: 1.5em;
  min-height:100vh;
  display:
  flex;
  flex-direction: row-reverse;
  /* justify-content: space-between; */
  margin: 0;
}

.editor-container {
  /* margin: 0 auto; */
  padding: 160px 6vmin 4vmin 6vmin;
  /* max-width: 100%; */
  /* background-color:#0070e0; */
  /* box-sizing:
  border-box; */
  /* width: auto; */
  width: 100%;
  max-width: 45em;
  margin: 0 auto;
}

body:not(.preview) #preview-frame {
  display:none;
}
#preview-frame {
  background-color:#fafafa;
  border:0;
  /* position:absolute; */
  right:0;
  width:50%;
  bottom:0;
  height:100vh;
  background: repeating-conic-gradient(rgba(128,128,128,.10) 0% 25%, transparent 0% 50%) 50% / 4px 4px;
  padding-top: 80px;
}
h1 {
  font-weight: 400;
}
h2 {
  font-weight: 500;
}

a {
  color: var(--text-link-color);
}

*[contenteditable="true"] {
  /* display: inline-block; */
}

body.loaded:not(.edited) #placeholder {
  display: block;
}

#placeholder {
  display: none;
  font-style: italic;
  color: var(--text-placeholder-color);
  pointer-events: none;
  position: absolute;
  z-index: 100;
}

body.drag #content {
  outline: 3px dashed #ccc;
  background-color: #fafafa;
  border-radius: 1em;
  pointer-events: all;
}

#content,
#placeholder {
  margin: -1em;
  padding: 1em;
  min-height: 7em;
  /* margin-top: -3.6em; */
}

#content {
  width: 100%;
  outline: none;
}
#content:focus {
  outline-color: #ccc;
}

#doc-title {
  outline: none;
  /* min-width: 180px; */
  /* top: 0; */
  position: absolute;
  padding: 0 1em;
  font-weight: bold;
  /* opacity:0.33; */
  user-select: none;
  cursor:
  default;
  margin-left: -1em;
  line-height: 2.5em;
  display: inline-block;
  margin-top: -2.7em;
  z-index: 2000;
  float: left;
}

#doc-title.open {
  background-color:
  var(--text-color);
  color:
  var(--background-color);
  /* opacity:1.0; */
  font-weight:
  bold;
}

.no-metadata .metadata-on {
  display:none;
}

#doc-title-text:empty:after {
  content:"untitled";
  opacity:0.5;
  font-weight:normal;
}

#doc-title.open #metadata-text {
  display:none;
}

body:not(.edited) #doc-title {
  /* display:none; */
}
body.edited #doc-title:empty:after{
  content: "untitled";
  color: var(--text-placeholder-color);
}

body.edited #doc-title.open:after {
  content:"metadata";
  color: var(--background-color);
}

#doc-title:focus {
  border-bottom: 1px solid var(--divider-color);
}

#doc-title:empty:before {
  background: transparent;
}
 
#content:empty:before {
  content: attr(placeholder);
  color: rgba(0, 0, 0, 0.2);
  background: transparent;
}

#md-contents {
  display: flex;
  flex-direction: column;
  position: absolute;
  /* top: 2em; */
  background-color: var(--background-color);
  padding: 1em;
  z-index: 100;
  border: 2px solid var(--text-color);
  box-shadow: 2px 1px var(--text-color);
  gap: 2px;
  font-weight: bold;
  margin-left: -1em;
  line-height:1.5em;
  /* min-width: 320px; */
}
input {
  border: none;
  background-color: transparent;
  border-left: -18px solid transparent;
  margin:-1px -2px;
  padding:1px 2px;
  min-width: 18em;
  color:var(--text-color);
}
input::placeholder {
  color:var(--text-placeholder-color);
}

input:focus {
  outline:none;
}
#doc-file {
  border-radius: 1em;
  background-color: #fafafa;
  padding: 0.25em 1em;
  margin-bottom: 2em;
  background-position: top center;
  background-repeat: no-repeat;
  background-image: url("data:image/svg+xml,%3Csvg width='128' height='128' viewBox='0 0 128 128' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M112 126H20C18.8954 126 18 125.105 18 124V4C18 2.89543 18.8954 2 20 2H88.3431C88.8736 2 89.3823 2.21071 89.7574 2.58579L113.414 26.2426C113.789 26.6177 114 27.1264 114 27.6569V124C114 125.105 113.105 126 112 126Z' fill='white' stroke='black' stroke-width='4'/%3E%3Crect x='88' y='4' width='4' height='24' fill='black'/%3E%3Crect x='88' y='24' width='24' height='4' fill='black'/%3E%3C/svg%3E%0A");
  background-image: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTI4IiBoZWlnaHQ9IjEyOCIgdmlld0JveD0iMCAwIDEyOCAxMjgiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjxwYXRoIGQ9Ik0xMTIgMTI2SDIwQzE4Ljg5NTQgMTI2IDE4IDEyNS4xMDUgMTggMTI0VjRDMTggMi44OTU0MyAxOC44OTU0IDIgMjAgMkg4OC4zNDMxQzg4Ljg3MzYgMiA4OS4zODIzIDIuMjEwNzEgODkuNzU3NCAyLjU4NTc5TDExMy40MTQgMjYuMjQyNkMxMTMuNzg5IDI2LjYxNzcgMTE0IDI3LjEyNjQgMTE0IDI3LjY1NjlWMTI0QzExNCAxMjUuMTA1IDExMy4xMDUgMTI2IDExMiAxMjZaIiBmaWxsPSJ3aGl0ZSIgc3Ryb2tlPSJibGFjayIgc3Ryb2tlLXdpZHRoPSI0Ii8+CjxyZWN0IHg9Ijg4IiB5PSI0IiB3aWR0aD0iNCIgaGVpZ2h0PSIyNCIgZmlsbD0iYmxhY2siLz4KPHJlY3QgeD0iODgiIHk9IjI0IiB3aWR0aD0iMjQiIGhlaWdodD0iNCIgZmlsbD0iYmxhY2siLz4KPC9zdmc+Cg==");
  min-height: 160px;
  text-align: center;
  padding-top: 200px;
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background-position: center 60px;
  box-sizing: border-box;
}
#doc-file:empty {
  display: none;
}

#ib-info {
  pointer-events: all;
}
#ib-info:hover {
  pointer-events: all;
  color: var(--text-color);
}

/*#toolbar a#copy {
  transition: transform 1s;
  cursor: default;
}

#copy:active {
  transform:translate(0, -0.5em);
  transition: transform 100ms;
  color:red;
}
*/

#sharehint {
  display: none;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  font-weight: bold;
  text-align: center;
}

#toolbar button {
  vertical-align: baseline;
}

#toolbar a.invalid {
  text-decoration: line-through;
}

#length {
  color:var(--text-placeholder-color);
  text-align: right;
}

/*body.edited #toolbar {
  opacity:1.0;
  transform: translateY(0);
}
*/

.toolbar {
  font-size: 0.25rem;
}
.toolbar .spacer {
  width:auto;
  flex-grow: 1;
}
#menubar {
  font-size:1rem;
  position: fixed;
  /* top: 0; */
  right: 0;
  left: 0;
  font-weight: 600;
  transition: transform 100ms ease-out;
  cursor: pointer;
  /* height: 40px; */
  /* height: 2.5rem; */
  box-sizing: border-box;
  padding:0;
  user-select: none;
  display: flex;
  justify-content: space-between;
  flex-direction: row;
  /* flex-wrap: wrap; */
  border: none;
  /* background: var(--divider-color); */
  /* z-index: 100; */
  position: fixed;
  top: 0;
  left:0;
  right:0;
  /* max-height: 5rem; */
  padding:0;
  border:
  none;
  /* background-color:
  var(--background-color); */
  display:
  flex;
  align-items: left;
  flex-direction: row-reverse;
  justify-content: flex-end;
  /* flex-wrap: nowrap; */
  /* height: 10rem; */
  /* padding-left: 4vmin; */
  z-index: 10;
}

#menubar > span {
  display: flex;
  /* outline:1px solid red; */
  width:
  auto;
  margin-right: 0;
}


.hide-before-edit,
.ql-formats {
  opacity:1.0;
  transition:
  opacity 1s, transform 1s;
}

body:not(.edited) .hide-before-edit {
  opacity: 0 !important;
  pointer-events: none;
}

/* body.loaded:not(.edited) #menubar .ql-formats{
  opacity: 0;
  pointer-events: none;
  transform:translateX(-2px)
} */
#copy-message {
  background: #2d2d2d;
  color: white;
  top: 0.5em;
  right: 0.5em;
  position: absolute;
  padding: 0.5em 1em;
  z-index: 100;
  font-weight: bold;
}

body:not(.copied) #copy-message {
  display: none;
}

#menus-share-hint {
  content: "hello";
  padding-left: 1em;
}
#menubar .disabled {
  opacity: 0.333;
}
#menubar > div {
  /* margin-left: 0.5em; */
  cursor: pointer;
  text-decoration: none;
  color: var(--text-color);
  vertical-align: middle;
  padding: 0;
  line-height: 2.5em;
  /* height: 2em; */
  /* margin-top: 2px; */
  /* box-sizing: border-box; */
  /* display: inline-block; */
  height: 2.5rem;
  /* overflow: hidden; */
  /* width: 3.7rem; */
  z-index: 100;
  white-space: nowrap;
  position: relative;
}
#menubar .menu a:hover {
  /* text-decoration: underline; */
  background-color: var(--text-color);
  color: var(--background-color);
}

.menu {
  width: auto;
  display: none;
  color: var(--text-color);
  /* background-color: var(--background-color); */
  border: 2px solid currentColor;
  padding: 0.5em 0;
  box-shadow: 2px 2px var(--shadow-color);
  margin-right: 2px;
  border-radius: 2px;
  margin-top: -2px;
  z-index: 300;
  /* top: 100px; */
  /* text-align: left; */
  /* float: right; */
  /* width: 10rem; */
  position: absolute;
  /* right: 1rem; */
  }

  #ql-header .ql-picker-label:before {
    /* min-width: 7.5rem !important; */
    max-width:20px;
    overflow:
    hidden;
    content:
    "H";
    font-size: 19px;
    line-height: 17px;
  }
div.menu-contents {
  display:none;
}

.menu-visible .menu {
  display: block;
  background-color: var(--background-color);
}

#menubar > a:active,
#menubar.menu-visible .menu-item {
  background-color: var(--text-color);
  color: var(--background-color);
  box-sizing: border-box;
}

#md-contents:not(.menu-visible) {
  display:none;
}

.menu-visible > .menu-item {
  background-color: var(--text-color);
  color: var(--background-color);
}

.menu-item {
  padding: 0 1em;
  cursor:
  default;
  font-size: 16px;
  line-height: 40px;
}
.toolbar-right .menu-item {
  margin-left: -0.5em;
}
.menu-item:hover {
  background-color:var(--text-color);
  color:var(--background-color) !important;
}

.menu hr {
  border: none;
  background-color: transparent;
  height: 0;
  border-bottom: 1px dotted var(--text-color);
  cursor:default;
}


.inputrow {
    padding: 0.2em 0;
    border-bottom: 1px solid var(--divider-color);
    display: flex;
    margin-bottom: 0.5em;
}
.inputrow:focus-within {
  border-bottom:2px solid var(--text-color);
  padding-bottom:calc(0.2em - 1px);
}

input {
  font-size:16px;
}
label:first-child {
    min-width: 6em;
    display: block;
    margin-right: 1em;
    user-select:none;
}




#editor .ql-editor {
  font-size: 16px;
  padding:0;
  /* max-width: 100%; */
}



@media only screen and (max-device-width: 512px) {
  #menubar {
    flex-direction: column;
  }
  iframe, #preview-frame {
    display:none;
  }
  #twitter,
  #copy {
    display: none;
  }
  #sharehint {
    display: block;
  }
  #menu-share-hint {
    display: none;
  }
  .inputrow {
    flex-direction: column;
  }
  label {
    font-size:10px;
  }
}


#editor .ql-toolbar {
    /* background-color: red; */
}

#editor .ql-tooltip {
    background-color: var(--background-color);
    /* border: 2px solid var(--text-color); */
    box-shadow: 1px 2px 0 2px var(--text-color), 0 0 0px 2px var(--text-color);
    box-sizing: border-box;
}

#ql-editor .ql-bubble .ql-stroke {
    stroke: red;
}

.ql-bubble .ql-stroke {
    stroke: currentColor !important;
}

.ql-picker-item.ql-selected {
    color: red !important;
}

.menu a {
    color: var(--text-color);
    text-decoration: none;
    line-height: 2em;
    text-align: left;
    display: block;
    padding: 0 1em;
    cursor:default;
}

.menu {
  cursor:default;
}

#formatbar.ql-snow.ql-toolbar button,
#formatbar.ql-snow.ql-toolbar .ql-picker {
    height: 40px;
    min-width: 40px;
    float: none;
    vertical-align: middle;
    text-align: revert;
    width: 40px;
}
#formatbar.ql-snow.ql-toolbar button,
#formatbar.ql-snow.ql-toolbar .ql-picker .ql-picker-label {
  /* background-size: 24px; */
  padding: 10px;
  font-weight: bold;
  font-size: 16px;
  line-height: 23px;
}

div#editor.ql-container.ql-snow {
    border: none;
}

#menubar.ql-snow .ql-color-picker .ql-picker-item {
    margin: 0;
    width: 1.5rem;
    height: 1.5rem;
}

#formatbar.ql-snow .ql-color-picker .ql-picker-options {
    width: 11.2rem;
    padding: 0;
}

.toolbar-right {
    display: flex;
    width: auto;
    flex-wrap: nowrap;
    justify-self: flex-end;
    margin-left: auto;
}

#formatbar .ql-toolbar, 
#formatbar .ql-stroke, 
#formatbar .ql-picker:not(.ql-color-picker),
#formatbar.ql-snow a {
  color: var(--text-color) ;
  stroke: var(--text-color) ;
}
.ql-picker-label:hover,
.ql-active {
  color: var(--text-color) !important;
}

.ql-picker-options {
  background-color: var(--background-color) !important;
}
.ql-picker-item.ql-selected {
  color: #e45149 !important;
}

#mainmenu .menu {
    right: 0;
    /* top: 1px; */
}

div#mainmenu {
    position: relative;
}

input#md-include {min-width: unset;/* height: 2em; */width: 1em;margin-right: 0.5em;}

label:not(:first-child) {
    font-weight: normal;
    font-size: 16px;
}

#formatbar .ql-formats {
  opacity: 0.5;
margin-right:0;/* display: contents; */
}
body:not(.format) #formatbar .ql-formats {
  display:none;
}


body:not(.dragging) #drop-zone {
  display:none;
}
#drop-zone {
  /* display:none; */
  background: #e5e5e5;
  height: 100%;
  width: 100%;
  position: fixed;
  top: 0;
  z-index: 9999;
  text-align: center;
  left: 0;
  font-size: 100px;
  font-family: sans-serif;
  color: white;
  line-height: 100vh;
  opacity:0.2;
}

#formatbar {
  border:
  none;
  /* border-bottom:1px solid
  var(--divider-color); */
  /* position: fixed; */
  /* top: 0; */
  z-index: 100;
  /* background-color: var(--background-color); */
  padding: 0;
  /* margin: 0 -12px; */
  display: flex;
  flex-wrap: wrap;
  opacity: 1.0;
  /* margin-top: -5em; */
  /* float: left; */
  /* top: 44px; */
  width: fit-content;
  left: 0;
  /* display: contents; */
}
#formatbar:hover {
  opacity:1.0;
}

body.filecontent #formatbar {
  display:none;
}

#formatbar:hover .ql-formats {
    opacity: 1.0;
}