@jupytergis/base 0.1.1

package/style/layerBrowser.css

@@ -0,0 +1,256 @@
+.jGIS-layerbrowser-FormDialog .jp-Dialog-header {
+  padding: 0;
+}
+
+.jGIS-layerbrowser-FormDialog .jp-Dialog-content {
+  width: calc(100% - 4rem);
+  max-width: 100%;
+  height: calc(100% - 2rem);
+  max-height: 100%;
+}
+
+.jGIS-layerbrowser-FormDialog form {
+  padding: 10px;
+}
+
+.jGIS-customlayer-form {
+  height: 100%;
+  overflow: auto;
+}
+
+.jGIS-layer-browser-container * {
+  box-sizing: border-box;
+}
+
+.jGIS-layer-browser-container {
+  display: flex;
+  flex-direction: column;
+}
+
+.jGIS-layer-browser-header-container {
+  position: sticky;
+  top: 0;
+  z-index: 40;
+  background-color: var(--jp-layout-color1);
+}
+
+.jGIS-layer-browser-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  gap: 20px;
+  padding: 1rem 2rem;
+}
+
+.jGIS-layer-browser-header-text {
+  padding-right: 1rem;
+  font-weight: bold;
+}
+
+.jGIS-layer-browser-header-search-container {
+  display: flex;
+  align-items: center;
+  flex-grow: 1;
+  position: relative;
+}
+
+.jGIS-layer-browser-header-search-icon {
+  position: absolute;
+  top: 50%;
+  left: 0.75rem;
+  transform: translateY(-50%);
+}
+
+.jGIS-layer-browser-header-search {
+  box-shadow: none;
+  flex: 1 1 0%;
+  height: 40px;
+  padding: 1rem 2rem;
+  padding-left: 2.5rem;
+  background-color: transparent;
+  border: 1px solid var(--jp-border-color1);
+  border-radius: 8px;
+  color: var(--jp-ui-font-color1);
+}
+
+.jGIS-layer-browser-grid {
+  display: grid;
+  gap: 1.25rem;
+  grid-template-rows: 1fr;
+  grid-template-columns: repeat(3, minmax(0px, 1fr));
+  padding: 1rem 2rem;
+}
+
+@media (min-width: 1400px) {
+  .jGIS-layer-browser-grid {
+    grid-template-columns: repeat(5, minmax(0px, 1fr));
+  }
+}
+
+.jGIS-layer-browser-categories {
+  display: flex;
+  gap: 2rem;
+  padding: 0 2rem;
+  border-bottom: 2px solid var(--jp-border-color1);
+}
+
+.jGIS-layer-browser-category {
+  position: relative;
+  opacity: 0.7;
+  padding: 4px 0 14px;
+  cursor: pointer;
+  text-decoration: none;
+}
+
+.jGIS-layer-browser-category::after {
+  content: '';
+  position: absolute;
+  bottom: -2px;
+  left: 0;
+  width: 0px;
+  height: 3px;
+  transition:
+    background-color 300ms ease-in,
+    width 300ms ease-in,
+    opacity 300ms ease-in;
+  background-color: transparent;
+}
+
+.jGIS-layer-browser-category.jGIS-layer-browser-category-selected::after {
+  width: 100%;
+  background-color: var(--jp-inverse-layout-color2);
+}
+
+.jGIS-layer-browser-category.jGIS-layer-browser-category-selected {
+  opacity: 1;
+  font-weight: bold;
+}
+
+.jGIS-layer-browser-tile {
+  display: flex;
+  flex-direction: column;
+  gap: 0.75rem;
+  position: relative;
+  margin-top: 4px;
+  padding: 8px;
+  transition: transform 150ms ease-out;
+  cursor: pointer;
+  border: 1px solid var(--jp-border-color1);
+  background-color: var(--jp-layout-color1);
+  border-radius: 8px;
+}
+
+.jGIS-layer-browser-custom-tile {
+  border: 1px solid var(--jp-border-color2);
+  background-color: var(--jp-layout-color2);
+}
+
+.jGIS-layer-browser-tile:hover {
+  box-shadow: var(--jp-layout-color2);
+  transform: translateY(-4px);
+  background-color: var(--jp-brand-color2);
+}
+
+.jGIS-layer-browser-tile-img-container {
+  /* isolation: isolate; */
+  /* border: medium; */
+  /* background: transparent; */
+  /* padding: 0px; */
+  /* width: 100%; */
+  aspect-ratio: 16 / 10;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  position: relative;
+  overflow: hidden;
+  border-radius: 8px;
+}
+
+.jGIS-layer-browser-img {
+  /* position: absolute; */
+  /* height: 100%; */
+  /* object-fit: cover; */
+  /* box-sizing: border-box; */
+  width: 100%;
+}
+
+.jGIS-layer-browser-icon {
+  padding-inline: 8px;
+  display: inline-flex;
+  justify-content: center;
+  align-items: center;
+  position: absolute;
+  overflow: hidden;
+  box-sizing: border-box;
+  width: 32px;
+  height: 32px;
+  transition:
+    width 125ms ease-in-out,
+    background-color 125ms ease-in-out,
+    opacity 150ms ease-out;
+  background-color: var(--jp-accent-color1);
+  border-radius: 20px;
+}
+
+.jGIS-layer-browser-tile:not(.jGIS-layer-browser-tile:hover)
+  .jGIS-layer-browser-icon {
+  opacity: 0;
+}
+
+.jGIS-layer-browser-added {
+  display: inline-flex;
+  gap: 0.35rem;
+  opacity: 1 !important;
+  width: 7rem;
+  color: var(--jp-ui-inverse-font-color1);
+}
+
+.jGIS-layer-browser-text-container {
+  padding-inline: 4px;
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  gap: 8px;
+  flex: 1 1 0%;
+  box-sizing: border-box;
+}
+
+.jGIS-layer-browser-text-info {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  box-sizing: border-box;
+}
+
+.jGIS-layer-browser-text-header {
+  overflow: hidden;
+  font-weight: bold;
+  text-transform: capitalize;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.jGIS-layer-browser-text-p {
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.jGIS-layer-browser-text-source {
+  overflow: hidden;
+  font-size: 0.75rem;
+  font-weight: lighter;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.jGIS-layer-browser-text-description {
+  -webkit-line-clamp: 2;
+  -moz-box-orient: vertical;
+  display: -webkit-box;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.jGIS-layer-browser-text-general {
+  margin: 0;
+}

package/style/leftPanel.css

@@ -0,0 +1,150 @@
+/* -----------------------------------------------------------------------------
+| Copyright (c) Jupyter Development Team.
+| Distributed under the terms of the Modified BSD License.
+|---------------------------------------------------------------------------- */
+
+.jp-gis-sourcePanel,
+.jp-gis-layerPanel {
+  min-height: 3em;
+}
+
+.jp-gis-layerItem,
+.jp-gis-source {
+  padding: 2px 0 2px 12px;
+}
+
+.jp-gis-layerGroup {
+  display: flex;
+  flex-direction: column;
+}
+
+.jp-gis-layerGroupHeader {
+  display: flex;
+  margin-left: -2px;
+  padding-bottom: 4px;
+}
+
+.jp-gis-layerGroupHeader:hover {
+  cursor: pointer;
+}
+
+.jp-gis-layerGroupCollapser {
+  transform: rotate(-90deg);
+  margin: auto 0;
+  height: 16px;
+}
+
+.jp-gis-layerGroupCollapser.jp-mod-expanded {
+  transform: rotate(0deg);
+}
+
+.jp-gis-layer,
+.jp-gis-source {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  color: var(--jp-ui-font-color1);
+}
+
+.jp-gis-layer.jp-mod-selected,
+.jp-gis-source.jp-mod-selected,
+.jp-gis-layerGroupHeader.jp-mod-selected {
+  color: var(--jp-ui-inverse-font-color1);
+  background: var(--jp-brand-color1);
+}
+
+.jp-gis-layer:hover:not(.jp-mod-selected),
+.jp-gis-source:hover:not(.jp-mod-selected) {
+  cursor: pointer;
+  background: var(--jp-layout-color2);
+}
+
+.jp-gis-layer.jp-mod-selected .jp-icon-selectable,
+.jp-gis-source.jp-mod-selected .jp-icon-selectable,
+.jp-gis-layerGroupHeader.jp-mod-selected .jp-icon-selectable {
+  fill: var(--jp-ui-inverse-font-color1);
+}
+
+.jp-gis-layer button,
+.jp-gis-source button {
+  margin-left: auto;
+  min-height: unset;
+  min-width: unset;
+  padding: unset;
+  margin-right: 4px;
+}
+
+.jp-gis-layer.jp-mod-selected button:hover .jp-icon-selectable,
+.jp-gis-source.jp-mod-selected button:hover .jp-icon-selectable {
+  fill: var(--jp-ui-font-color1);
+}
+
+.jp-gis-layerIcon,
+.jp-gis-sourceIcon {
+  display: flex;
+  align-items: center;
+}
+
+.jp-gis-layerIcon > svg,
+.jp-gis-sourceIcon > svg {
+  height: 16px;
+  width: 16px;
+}
+
+.jp-gis-layerTitle,
+.jp-gis-sourceTitle {
+  display: flex;
+  flex-grow: 1;
+  align-items: center;
+}
+
+.jp-gis-layerText:focus,
+.jp-gis-sourceText:focus {
+  outline: none;
+}
+
+.jp-gis-layerTitle .jp-gis-layerIcon,
+.jp-gis-sourceTitle .jp-gis-sourceIcon {
+  padding-right: 4px;
+}
+
+.jp-gis-left-panel-input {
+  background-color: transparent;
+  border: 1px solid var(--jp-border-color1);
+  border-radius: 8px;
+  color: var(--jp-ui-font-color1);
+  flex-grow: 1;
+  margin-right: 4px;
+  outline: none;
+  padding: 2px 7px;
+}
+
+.jp-gis-left-panel-input:focus {
+  border: 1px solid var(--jp-brand-color1);
+}
+
+.jp-gis-layerText,
+.jp-gis-sourceText {
+  padding: 3px 0;
+  cursor: pointer;
+}
+
+li .lm-Menu-itemLabel {
+  text-transform: capitalize;
+}
+
+.jp-gis-sourceInfo {
+  font-size: var(--jp-ui-font-size0);
+  font-style: italic;
+  padding-left: 5px;
+  color: var(--jp-ui-font-color2);
+}
+
+#jp-drag-indicator {
+  top: calc(-1 * var(--jp-border-width) + 1px);
+  left: calc(-1 * var(--jp-border-width));
+  content: '';
+  height: var(--jp-private-horizontal-tab-active-top-border);
+  width: calc(100% + 2 * var(--jp-border-width));
+  background: var(--jp-brand-color1);
+}

package/style/symbologyDialog.css

@@ -0,0 +1,86 @@
+.jp-gis-symbology-dialog .jp-Dialog-header {
+  font-weight: bold;
+}
+
+.jp-gis-symbology-dialog .jp-Dialog-content {
+  width: calc(80% - 4rem);
+  max-width: 80%;
+  height: fit-content;
+  max-height: 80%;
+}
+
+.jp-gis-symbology-row {
+  display: flex;
+  justify-content: space-between;
+  align-items: baseline;
+  gap: 2rem;
+}
+
+.jp-gis-symbology-row label {
+  font-size: var(--jp-ui-font-size2);
+  flex: 0 1 20%;
+}
+
+.jp-gis-symbology-row > .jp-select-wrapper {
+  flex: 1 0 50%;
+  max-width: 50%;
+}
+
+.jp-gis-band-container {
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+}
+
+.jp-gis-layer-symbology-container {
+  display: flex;
+  flex-direction: column;
+}
+
+.jp-gis-band-container .jp-gis-symbology-row:last-child {
+  margin-bottom: 12px;
+}
+
+.jp-gis-stop-container {
+  display: flex;
+  flex-direction: column;
+  gap: 0.1rem;
+}
+
+.jp-gis-stop-labels {
+  display: flex;
+  font-weight: bold;
+  font-size: var(--jp-ui-font-size1);
+  gap: 0.25rem;
+  padding-bottom: 0.25rem;
+}
+
+.jp-gis-stop-labels > span {
+  flex: 0 0 18%;
+}
+
+.jp-gis-color-row {
+  display: flex;
+  width: 100%;
+  gap: 0.25rem;
+  height: 32px;
+}
+
+.jp-gis-color-row > input[type='number'] {
+  flex: 0 1 18%;
+  min-width: 0px;
+}
+
+.jp-gis-color-row > input[type='color'] {
+  flex-grow: 1;
+}
+
+.jp-gis-color-row > button {
+  color: var(--jp-ui-font-color0);
+  background: none;
+  padding-right: 0px;
+}
+
+.jp-gis-symbology-button-container {
+  padding-top: 0.5rem;
+}

package/style/terrainDialog.css

@@ -0,0 +1,14 @@
+.jp-gis-terrain-main {
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+  overflow: hidden;
+}
+
+.jp-gis-terrain-label {
+  margin: 0;
+  padding: 0;
+  font-weight: bold;
+  display: block;
+  position: relative;
+}