[CSS] Ngrams Table, nested ngrams in groups

* #414

dist/styles/bootstrap-darkster.css

@@ -8747,31 +8747,6 @@ a:focus, a:hover {
   top: 50%;
 }
 
-.table tr td {
-  color: #005a9aff;
-}
-.table tr td .active {
-  font-weight: bold;
-  text-decoration: underline;
-}
-.table tr td .ngrams-selector {
-  display: flex;
-}
-.table tr td .ngrams-selector .ngrams-chooser {
-  padding: 3px;
-}
-.table tr td .trash {
-  text-decoration: line-through;
-}
-
-.action-search {
-  margin: 10px;
-}
-
-.search-bar {
-  margin: 10px;
-}
-
 /* */
 .join-button {
   padding-bottom: 100px;
@@ -8960,6 +8935,116 @@ select.form-control {
   opacity: var(--over50, 0);
 }
 
+.table tr td {
+  height: 48px;
+}
+.table .page-paint-raw--selected {
+  position: relative;
+}
+.table .page-paint-raw--selected td:first-child::before {
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  content: "";
+  width: 3px;
+  background-color: #0F81C7;
+  position: absolute;
+}
+.table .page-paint-row--trash {
+  text-decoration: line-through;
+}
+.table .doc-chooser {
+  padding-top: 3px;
+  text-align: center;
+}
+.table .rating-group {
+  display: flex;
+  padding-top: 3px;
+}
+.table .rating-group__action {
+  width: 14px;
+  margin-right: 8px;
+}
+
+.search-button-prepend .input-group-text {
+  width: 41px;
+  z-index: initial;
+}
+
+.ngrams-table-container__header {
+  display: flex;
+  align-items: flex-start;
+}
+.ngrams-table-container__header__item {
+  padding: 0.75rem 1.25rem;
+}
+.ngrams-table-container__header__item:not(:first-child) {
+  margin-left: 8px;
+}
+.ngrams-table-container__header__item:not(:last-child) {
+  margin-right: 8px;
+}
+.ngrams-table-container__add-term {
+  margin-top: -8px;
+  margin-bottom: 12px;
+}
+.ngrams-table-container__footer {
+  padding: 0.75rem 1.25rem;
+}
+.ngrams-table-container__footer__item {
+  text-align: center;
+}
+
+.ngrams-tree-edit-real {
+  min-width: 416px;
+  width: fit-content;
+  border-color: #FF550B;
+  margin-top: 16px;
+  margin-bottom: 16px;
+}
+.ngrams-tree-edit-real__actions {
+  display: flex;
+  margin-top: 16px;
+}
+.ngrams-tree-edit-real__actions .b-button {
+  margin-right: 8px;
+}
+
+.loaded-ngrams-table-header {
+  text-align: center;
+  margin-top: 12px;
+  margin-bottom: 12px;
+}
+.loaded-ngrams-table-header__icon {
+  font-size: 16px;
+}
+.loaded-ngrams-table-header__text {
+  font-size: 22px;
+  font-weight: bold;
+  font-family: "Comfortaa";
+}
+
+.ngrams-tree-loaded-node--first-child::before, .ngrams-tree-loaded-node--grand-child::before {
+  color: #6C757D;
+  font-size: 11px;
+  margin-right: 4px;
+}
+.right-handed .ngrams-tree-loaded-node--first-child::before, .right-handed .ngrams-tree-loaded-node--grand-child::before {
+  content: "└";
+}
+
+.left-handed .ngrams-tree-loaded-node--first-child::before, .left-handed .ngrams-tree-loaded-node--grand-child::before {
+  content: "┘";
+}
+
+.ngrams-tree-loaded-node--first-child {
+  margin-left: -2px;
+}
+.ngrams-tree-loaded-node--grand-child {
+  margin-left: 13px;
+}
+
 .annotation-run {
   cursor: pointer;
 }

dist/styles/bootstrap-default.css

@@ -8700,31 +8700,6 @@ a:focus, a:hover {
   top: 50%;
 }
 
-.table tr td {
-  color: #005a9aff;
-}
-.table tr td .active {
-  font-weight: bold;
-  text-decoration: underline;
-}
-.table tr td .ngrams-selector {
-  display: flex;
-}
-.table tr td .ngrams-selector .ngrams-chooser {
-  padding: 3px;
-}
-.table tr td .trash {
-  text-decoration: line-through;
-}
-
-.action-search {
-  margin: 10px;
-}
-
-.search-bar {
-  margin: 10px;
-}
-
 /* */
 .join-button {
   padding-bottom: 100px;
@@ -8913,6 +8888,115 @@ select.form-control {
   opacity: var(--over50, 0);
 }
 
+.table tr td {
+  height: 48px;
+}
+.table .page-paint-raw--selected {
+  position: relative;
+}
+.table .page-paint-raw--selected td:first-child::before {
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  content: "";
+  width: 3px;
+  background-color: #17a2b8;
+  position: absolute;
+}
+.table .page-paint-row--trash {
+  text-decoration: line-through;
+}
+.table .doc-chooser {
+  padding-top: 3px;
+  text-align: center;
+}
+.table .rating-group {
+  display: flex;
+  padding-top: 3px;
+}
+.table .rating-group__action {
+  width: 14px;
+  margin-right: 8px;
+}
+
+.search-button-prepend .input-group-text {
+  width: 41px;
+  z-index: initial;
+}
+
+.ngrams-table-container__header {
+  display: flex;
+  align-items: flex-start;
+}
+.ngrams-table-container__header__item {
+  padding: 0.75rem 1.25rem;
+}
+.ngrams-table-container__header__item:not(:first-child) {
+  margin-left: 8px;
+}
+.ngrams-table-container__header__item:not(:last-child) {
+  margin-right: 8px;
+}
+.ngrams-table-container__add-term {
+  margin-top: -8px;
+  margin-bottom: 12px;
+}
+.ngrams-table-container__footer {
+  padding: 0.75rem 1.25rem;
+}
+.ngrams-table-container__footer__item {
+  text-align: center;
+}
+
+.ngrams-tree-edit-real {
+  min-width: 416px;
+  width: fit-content;
+  border-color: #005a9a;
+  margin-top: 16px;
+  margin-bottom: 16px;
+}
+.ngrams-tree-edit-real__actions {
+  display: flex;
+  margin-top: 16px;
+}
+.ngrams-tree-edit-real__actions .b-button {
+  margin-right: 8px;
+}
+
+.loaded-ngrams-table-header {
+  text-align: center;
+  margin-top: 12px;
+  margin-bottom: 12px;
+}
+.loaded-ngrams-table-header__icon {
+  font-size: 16px;
+}
+.loaded-ngrams-table-header__text {
+  font-size: 22px;
+  font-weight: bold;
+}
+
+.ngrams-tree-loaded-node--first-child::before, .ngrams-tree-loaded-node--grand-child::before {
+  color: #CED4DA;
+  font-size: 11px;
+  margin-right: 4px;
+}
+.right-handed .ngrams-tree-loaded-node--first-child::before, .right-handed .ngrams-tree-loaded-node--grand-child::before {
+  content: "└";
+}
+
+.left-handed .ngrams-tree-loaded-node--first-child::before, .left-handed .ngrams-tree-loaded-node--grand-child::before {
+  content: "┘";
+}
+
+.ngrams-tree-loaded-node--first-child {
+  margin-left: -2px;
+}
+.ngrams-tree-loaded-node--grand-child {
+  margin-left: 13px;
+}
+
 .annotation-run {
   cursor: pointer;
 }

dist/styles/bootstrap-greyson.css

@@ -8456,31 +8456,6 @@ a:focus, a:hover {
   top: 50%;
 }
 
-.table tr td {
-  color: #005a9aff;
-}
-.table tr td .active {
-  font-weight: bold;
-  text-decoration: underline;
-}
-.table tr td .ngrams-selector {
-  display: flex;
-}
-.table tr td .ngrams-selector .ngrams-chooser {
-  padding: 3px;
-}
-.table tr td .trash {
-  text-decoration: line-through;
-}
-
-.action-search {
-  margin: 10px;
-}
-
-.search-bar {
-  margin: 10px;
-}
-
 /* */
 .join-button {
   padding-bottom: 100px;
@@ -8669,6 +8644,116 @@ select.form-control {
   opacity: var(--over50, 0);
 }
 
+.table tr td {
+  height: 48px;
+}
+.table .page-paint-raw--selected {
+  position: relative;
+}
+.table .page-paint-raw--selected td:first-child::before {
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  content: "";
+  width: 3px;
+  background-color: #5c8f94;
+  position: absolute;
+}
+.table .page-paint-row--trash {
+  text-decoration: line-through;
+}
+.table .doc-chooser {
+  padding-top: 3px;
+  text-align: center;
+}
+.table .rating-group {
+  display: flex;
+  padding-top: 3px;
+}
+.table .rating-group__action {
+  width: 14px;
+  margin-right: 8px;
+}
+
+.search-button-prepend .input-group-text {
+  width: 41px;
+  z-index: initial;
+}
+
+.ngrams-table-container__header {
+  display: flex;
+  align-items: flex-start;
+}
+.ngrams-table-container__header__item {
+  padding: 0.75rem 1.25rem;
+}
+.ngrams-table-container__header__item:not(:first-child) {
+  margin-left: 8px;
+}
+.ngrams-table-container__header__item:not(:last-child) {
+  margin-right: 8px;
+}
+.ngrams-table-container__add-term {
+  margin-top: -8px;
+  margin-bottom: 12px;
+}
+.ngrams-table-container__footer {
+  padding: 0.75rem 1.25rem;
+}
+.ngrams-table-container__footer__item {
+  text-align: center;
+}
+
+.ngrams-tree-edit-real {
+  min-width: 416px;
+  width: fit-content;
+  border-color: #2f3c48;
+  margin-top: 16px;
+  margin-bottom: 16px;
+}
+.ngrams-tree-edit-real__actions {
+  display: flex;
+  margin-top: 16px;
+}
+.ngrams-tree-edit-real__actions .b-button {
+  margin-right: 8px;
+}
+
+.loaded-ngrams-table-header {
+  text-align: center;
+  margin-top: 12px;
+  margin-bottom: 12px;
+}
+.loaded-ngrams-table-header__icon {
+  font-size: 16px;
+}
+.loaded-ngrams-table-header__text {
+  font-size: 22px;
+  font-weight: bold;
+  font-family: "Oswald";
+}
+
+.ngrams-tree-loaded-node--first-child::before, .ngrams-tree-loaded-node--grand-child::before {
+  color: #CED4DA;
+  font-size: 11px;
+  margin-right: 4px;
+}
+.right-handed .ngrams-tree-loaded-node--first-child::before, .right-handed .ngrams-tree-loaded-node--grand-child::before {
+  content: "└";
+}
+
+.left-handed .ngrams-tree-loaded-node--first-child::before, .left-handed .ngrams-tree-loaded-node--grand-child::before {
+  content: "┘";
+}
+
+.ngrams-tree-loaded-node--first-child {
+  margin-left: -2px;
+}
+.ngrams-tree-loaded-node--grand-child {
+  margin-left: 13px;
+}
+
 .annotation-run {
   cursor: pointer;
 }

dist/styles/bootstrap-herbie.css

@@ -8704,31 +8704,6 @@ a:focus, a:hover {
   top: 50%;
 }
 
-.table tr td {
-  color: #005a9aff;
-}
-.table tr td .active {
-  font-weight: bold;
-  text-decoration: underline;
-}
-.table tr td .ngrams-selector {
-  display: flex;
-}
-.table tr td .ngrams-selector .ngrams-chooser {
-  padding: 3px;
-}
-.table tr td .trash {
-  text-decoration: line-through;
-}
-
-.action-search {
-  margin: 10px;
-}
-
-.search-bar {
-  margin: 10px;
-}
-
 /* */
 .join-button {
   padding-bottom: 100px;
@@ -8917,6 +8892,116 @@ select.form-control {
   opacity: var(--over50, 0);
 }
 
+.table tr td {
+  height: 48px;
+}
+.table .page-paint-raw--selected {
+  position: relative;
+}
+.table .page-paint-raw--selected td:first-child::before {
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  content: "";
+  width: 3px;
+  background-color: #74DBEF;
+  position: absolute;
+}
+.table .page-paint-row--trash {
+  text-decoration: line-through;
+}
+.table .doc-chooser {
+  padding-top: 3px;
+  text-align: center;
+}
+.table .rating-group {
+  display: flex;
+  padding-top: 3px;
+}
+.table .rating-group__action {
+  width: 14px;
+  margin-right: 8px;
+}
+
+.search-button-prepend .input-group-text {
+  width: 41px;
+  z-index: initial;
+}
+
+.ngrams-table-container__header {
+  display: flex;
+  align-items: flex-start;
+}
+.ngrams-table-container__header__item {
+  padding: 0.75rem 1.25rem;
+}
+.ngrams-table-container__header__item:not(:first-child) {
+  margin-left: 8px;
+}
+.ngrams-table-container__header__item:not(:last-child) {
+  margin-right: 8px;
+}
+.ngrams-table-container__add-term {
+  margin-top: -8px;
+  margin-bottom: 12px;
+}
+.ngrams-table-container__footer {
+  padding: 0.75rem 1.25rem;
+}
+.ngrams-table-container__footer__item {
+  text-align: center;
+}
+
+.ngrams-tree-edit-real {
+  min-width: 416px;
+  width: fit-content;
+  border-color: #083358;
+  margin-top: 16px;
+  margin-bottom: 16px;
+}
+.ngrams-tree-edit-real__actions {
+  display: flex;
+  margin-top: 16px;
+}
+.ngrams-tree-edit-real__actions .b-button {
+  margin-right: 8px;
+}
+
+.loaded-ngrams-table-header {
+  text-align: center;
+  margin-top: 12px;
+  margin-bottom: 12px;
+}
+.loaded-ngrams-table-header__icon {
+  font-size: 16px;
+}
+.loaded-ngrams-table-header__text {
+  font-size: 22px;
+  font-weight: bold;
+  font-family: "Crete Round";
+}
+
+.ngrams-tree-loaded-node--first-child::before, .ngrams-tree-loaded-node--grand-child::before {
+  color: #CED4DA;
+  font-size: 11px;
+  margin-right: 4px;
+}
+.right-handed .ngrams-tree-loaded-node--first-child::before, .right-handed .ngrams-tree-loaded-node--grand-child::before {
+  content: "└";
+}
+
+.left-handed .ngrams-tree-loaded-node--first-child::before, .left-handed .ngrams-tree-loaded-node--grand-child::before {
+  content: "┘";
+}
+
+.ngrams-tree-loaded-node--first-child {
+  margin-left: -2px;
+}
+.ngrams-tree-loaded-node--grand-child {
+  margin-left: 13px;
+}
+
 .annotation-run {
   cursor: pointer;
 }

dist/styles/bootstrap-monotony.css

@@ -8705,31 +8705,6 @@ a:focus, a:hover {
   top: 50%;
 }
 
-.table tr td {
-  color: #005a9aff;
-}
-.table tr td .active {
-  font-weight: bold;
-  text-decoration: underline;
-}
-.table tr td .ngrams-selector {
-  display: flex;
-}
-.table tr td .ngrams-selector .ngrams-chooser {
-  padding: 3px;
-}
-.table tr td .trash {
-  text-decoration: line-through;
-}
-
-.action-search {
-  margin: 10px;
-}
-
-.search-bar {
-  margin: 10px;
-}
-
 /* */
 .join-button {
   padding-bottom: 100px;
@@ -8918,6 +8893,116 @@ select.form-control {
   opacity: var(--over50, 0);
 }
 
+.table tr td {
+  height: 48px;
+}
+.table .page-paint-raw--selected {
+  position: relative;
+}
+.table .page-paint-raw--selected td:first-child::before {
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  content: "";
+  width: 3px;
+  background-color: #515151;
+  position: absolute;
+}
+.table .page-paint-row--trash {
+  text-decoration: line-through;
+}
+.table .doc-chooser {
+  padding-top: 3px;
+  text-align: center;
+}
+.table .rating-group {
+  display: flex;
+  padding-top: 3px;
+}
+.table .rating-group__action {
+  width: 14px;
+  margin-right: 8px;
+}
+
+.search-button-prepend .input-group-text {
+  width: 41px;
+  z-index: initial;
+}
+
+.ngrams-table-container__header {
+  display: flex;
+  align-items: flex-start;
+}
+.ngrams-table-container__header__item {
+  padding: 0.75rem 1.25rem;
+}
+.ngrams-table-container__header__item:not(:first-child) {
+  margin-left: 8px;
+}
+.ngrams-table-container__header__item:not(:last-child) {
+  margin-right: 8px;
+}
+.ngrams-table-container__add-term {
+  margin-top: -8px;
+  margin-bottom: 12px;
+}
+.ngrams-table-container__footer {
+  padding: 0.75rem 1.25rem;
+}
+.ngrams-table-container__footer__item {
+  text-align: center;
+}
+
+.ngrams-tree-edit-real {
+  min-width: 416px;
+  width: fit-content;
+  border-color: #222222;
+  margin-top: 16px;
+  margin-bottom: 16px;
+}
+.ngrams-tree-edit-real__actions {
+  display: flex;
+  margin-top: 16px;
+}
+.ngrams-tree-edit-real__actions .b-button {
+  margin-right: 8px;
+}
+
+.loaded-ngrams-table-header {
+  text-align: center;
+  margin-top: 12px;
+  margin-bottom: 12px;
+}
+.loaded-ngrams-table-header__icon {
+  font-size: 16px;
+}
+.loaded-ngrams-table-header__text {
+  font-size: 22px;
+  font-weight: bold;
+  font-family: "Open Sans";
+}
+
+.ngrams-tree-loaded-node--first-child::before, .ngrams-tree-loaded-node--grand-child::before {
+  color: #CED4DA;
+  font-size: 11px;
+  margin-right: 4px;
+}
+.right-handed .ngrams-tree-loaded-node--first-child::before, .right-handed .ngrams-tree-loaded-node--grand-child::before {
+  content: "└";
+}
+