@collectionspace/cspace-public-browser 1.5.1

package/styles/cspace/FieldListGroup.css

@@ -0,0 +1,27 @@
+.common + .common {
+  margin-top: 16px;
+}
+
+.common > div {
+  display: grid;
+  grid-template-columns: 33% auto;
+  grid-auto-rows: min-content;
+  align-items: baseline;
+}
+
+.common > div > h4 {
+  font: inherit;
+  margin: 0 6px 0 0;
+}
+
+.common > div > h4::after {
+  content: ':';
+}
+
+.common > div > * {
+  margin-bottom: 4px;
+}
+
+.inline > div {
+  grid-auto-flow: column;
+}

package/styles/cspace/FieldValueList.css

@@ -0,0 +1,19 @@
+.common {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+}
+
+.common > li {
+  margin-bottom: 4px;
+}
+
+.inline {
+  display: flex;
+  flex-wrap: wrap;
+}
+
+.inline > li {
+  margin-right: 1em;
+  white-space: nowrap;
+}

package/styles/cspace/Filter.css

@@ -0,0 +1,64 @@
+@value highlightColor, inputBgColor, inputBorderColor, panelBorderColor from '../colors.css';
+
+.common {
+  padding: 2px 20px 18px 20px;
+}
+
+.common > ul {
+  list-style: none;
+  margin: 0;
+  padding: 4px 0 0 0;
+  max-height: 150px;
+  overflow: auto;
+}
+
+.common li {
+  margin: 0;
+}
+
+.common li > label > div {
+  padding: 4px;
+}
+
+.common li > label:hover > input + div::before {
+  border-color: #424242;
+  background-color: rgb(248, 248, 248);
+}
+
+.common li input {
+  width: 1px;
+  height: 1px;
+  opacity: 0;
+  box-sizing: border-box;
+  position: absolute;
+}
+
+.common li input + div {
+  display: flex;
+  align-items: center;
+}
+
+.common li input + div::before {
+  flex: 0 0 auto;
+  content: '';
+  width: 18px;
+  height: 18px;
+  margin-right: 4px;
+  border: 1px solid inputBorderColor;
+  background-color: inputBgColor;
+  background-repeat: none;
+  background-position: center center;
+  outline-offset: -1px;
+}
+
+.common li input:focus + div::before {
+  outline: 2px solid highlightColor;
+}
+
+.common li input:checked + div::before {
+  background-image: url(../../images/check.svg);
+}
+
+.common li label > div > span > span {
+  color: #808080;
+}

package/styles/cspace/FilterGroup.css

@@ -0,0 +1,21 @@
+
+@value panelBorderColor from '../colors.css';
+@value filterPanelWidth from '../dimensions.css';
+
+.common {
+  border-top: 1px solid panelBorderColor;
+  font-size: .85rem;
+}
+
+.common > h1 {
+  margin: 0;
+  border-bottom: 1px solid panelBorderColor;
+  padding: 18px 20px;
+  background-color: rgb(230, 230, 230);
+  font-size: inherit;
+  text-transform: uppercase;
+}
+
+.empty {
+  display: none;
+}

package/styles/cspace/FilterPanel.css

@@ -0,0 +1,45 @@
+@value inputBgColor, inputBorderColor, panelBorderColor from '../colors.css';
+@value filterPanelCutoffWidth, filterPanelWidth, filterPanelCollapsedLeft, searchInputHeight, searchInputPaddingHeight, searchInputBorderWidth from '../dimensions.css';
+
+.common {
+  position: absolute;
+  width: filterPanelWidth;
+  height: 100px;
+  overflow-y: auto;
+  background-color: rgb(245, 245, 245);
+  z-index: 1;
+  transition: left 0.3s;
+  scroll-behavior: smooth;
+}
+
+.common > div > header {
+  margin-bottom: 1px;
+  padding: 18px 20px;
+  font-size: .85rem;
+  white-space: nowrap;
+  transition: padding 0.3s;
+}
+
+.collapsed {
+  composes: common;
+}
+
+.expanded {
+  composes: common;
+}
+
+@media only screen
+and (max-width: filterPanelCutoffWidth) {
+  .collapsed {
+    left: filterPanelCollapsedLeft;
+  }
+
+  .expanded {
+    left: 0;
+    box-shadow: 0 0 9px 3px panelBorderColor;
+  }
+
+  .common > div > header {
+    padding-left: 78px;
+  }
+}

package/styles/cspace/FilterSearchInput.css

@@ -0,0 +1,13 @@
+@value highlightColor, inputBgColor, inputBorderColor from '../colors.css';
+
+.common {
+  width: 100%;
+  margin: 0;
+  border: 1px solid inputBorderColor;
+  background: inputBgColor;
+  padding: 8px;
+}
+
+.common:focus {
+  outline: 2px solid highlightColor;
+}

package/styles/cspace/Fixed.css

@@ -0,0 +1,8 @@
+.common {
+  position: sticky;
+  position: -webkit-sticky;
+  top: 0;
+  left: 0;
+  width: 100%;
+  z-index: 11;
+}

package/styles/cspace/IconButton.css

@@ -0,0 +1,11 @@
+.common > span {
+	border: 0;
+	clip: rect(0 0 0 0);
+	height: 1px;
+	margin: -1px;
+	overflow: hidden;
+	padding: 0;
+	position: absolute;
+	white-space: nowrap;
+	width: 1px;
+}

package/styles/cspace/ImageGallery.css

@@ -0,0 +1,43 @@
+.common {
+  display: flex;
+  justify-content: center;
+  margin-bottom: 16px;
+  width: 100%;
+}
+
+.common :global(.image-gallery) {
+  width: 100%;
+}
+
+.common :global(.image-gallery-left-nav),
+.common :global(.image-gallery-right-nav) {
+  padding: 0;
+}
+
+.common :global(.image-gallery-thumbnails) {
+  padding-bottom: 0;
+}
+
+.common :global(.image-gallery-thumbnail) {
+  width: 25%;
+  max-width: 100px;
+}
+
+.common :global(.image-gallery-slide) {
+  display: flex;
+  justify-content: center;
+}
+
+.common :global(.image-gallery-slide img) {
+  max-width: 420px;
+}
+
+.common button:focus, .common button:focus:hover {
+  background-color: rgba(255, 255, 255, .5);
+  outline: 1px dotted black;
+  outline-offset: -1px;
+}
+
+.common button:hover {
+  background-color: inherit;
+}

package/styles/cspace/InstitutionHoldingList.css

@@ -0,0 +1,109 @@
+@value panelBorderColor from '../colors.css';
+
+.common {
+  border-top: 1px solid panelBorderColor;
+}
+
+.common:last-child {
+  border-bottom: 1px solid panelBorderColor;
+}
+
+.common > button:focus {
+  background-color: inherit;
+  outline: 1px dotted black;
+  outline-offset: 1px;
+}
+
+.expanded {
+  composes: common;
+}
+
+.collapsed {
+  composes: common;
+}
+
+.common h3 {
+  margin: 0 0 10px 0;
+  font-weight: 600;
+}
+
+.common :global(.cspace-FieldListGroup--common) + :global(.cspace-FieldListGroup--common) {
+  margin-top: 2px;
+}
+
+.common :global(.cspace-FieldListGroup--common) > div > h4 {
+  font-weight: 600;
+}
+
+.common > div {
+  display: grid;
+  grid-template-columns: 210px auto;
+  grid-template-areas: 'gallery holdings';
+  grid-column-gap: 16px;
+  margin-top: 2px;
+  padding-bottom: 16px;
+}
+
+.common :global(.image-gallery-slide img) {
+  max-width: 210px;
+}
+
+.common :global(.image-gallery-slide img) {
+  max-width: 210px;
+}
+
+.common :global(.image-gallery-thumbnail) {
+  max-width: 50px;
+}
+
+.common > div > ul {
+  grid-area: holdings;
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+
+.common > div > ul > li {
+  display: grid;
+  grid-template-areas: 'fields1';
+}
+
+.common > div > ul > li > h3 {
+  margin-right: 16px;
+}
+
+.common > div > ul > li + li {
+  margin-top: 10px;
+  border-top: 1px solid panelBorderColor;
+  padding-top: 16px;
+}
+
+.common > div > ul > li > h4 + dl {
+  margin-left: 10px;
+}
+
+.common > div > ul > li p,
+.common > div > ul > li dl {
+  margin: 0;
+}
+
+.common > div > ul > li p + p,
+.common > div > ul > li p + dl {
+  margin-top: 4px;
+}
+
+.common :global(.cspace-FieldList--common) dt {
+  font-weight: 600;
+}
+
+.common :global(.image-gallery-svg){
+  width: 30px;
+  height: 60px;
+}
+
+@media only screen
+and (max-width: 640px) {
+  .common > div {
+    display: block;
+  }
+}

package/styles/cspace/InstitutionIndex.css

@@ -0,0 +1,13 @@
+.common {
+  margin-top: 16px;
+}
+
+.common > ul {
+  list-style: none;
+  padding: 0;
+  margin: 0;
+}
+
+.common > ul > li + li {
+  margin-top: 4px;
+}

package/styles/cspace/InstitutionSection.css

@@ -0,0 +1,4 @@
+.common {
+  grid-area: inst;
+  margin-top: 32px;
+}

package/styles/cspace/Link.css

@@ -0,0 +1,39 @@
+.common {
+  background-repeat: no-repeat;
+  background-size: 16px;
+}
+
+.external {
+  composes: common;
+  padding-right: 20px;
+  background-position: right center;
+  background-image: url(../../images/openNew.svg);
+}
+
+.hash {
+  composes: common;
+  padding-right: 20px;
+  background-position: right center;
+  background-image: url(../../images/linkDown.svg);
+}
+
+.back {
+  composes: common;
+  padding-left: 20px;
+  background-position: left center;
+  background-image: url(../../images/linkBack.svg);
+}
+
+.prev {
+  composes: common;
+  padding-left: 16px;
+  background-position: left center;
+  background-image: url(../../images/linkPrev.svg);
+}
+
+.next {
+  composes: common;
+  padding-right: 16px;
+  background-position: right center;
+  background-image: url(../../images/linkNext.svg);
+}

package/styles/cspace/Panel.css

@@ -0,0 +1,53 @@
+@value highlightColor, panelBorderColor from '../colors.css';
+
+.common {
+
+}
+
+.common + .common {
+  border-top: 1px solid panelBorderColor;
+  ;
+}
+
+.expanded {
+  composes: common;
+}
+
+.collapsed {
+  composes: common;
+}
+
+.common > header > button {
+  display: block;
+  width: 100%;
+  border: none;
+  padding: 18px 42px 18px 20px;
+  background-color: inherit !important;
+  text-align: left;
+  color: #424242;
+  background-position: calc(100% - 12px) center;
+  background-repeat: no-repeat;
+  font-weight: 600;
+  outline-offset: -6px;
+}
+
+.common > header > button:focus {
+  outline: 2px solid #424242;
+  box-shadow: none;
+}
+
+.expanded > header > button {
+  background-image: url(../../images/collapse.svg);
+}
+
+.expanded > header > button:hover {
+  background-image: url(../../images/collapseActive.svg);
+}
+
+.collapsed > header > button {
+  background-image: url(../../images/expand.svg);
+}
+
+.collapsed > header > button:hover {
+  background-image: url(../../images/expandActive.svg);
+}

package/styles/cspace/PanelTitle.css

@@ -0,0 +1,48 @@
+@value panelBorderColor from '../colors.css';
+
+.common {
+  display: block;
+  width: 100%;
+  border: none;
+  margin: 0;
+  padding: 0;
+  background-color: inherit;
+  text-align: left;
+  color: #424242;
+  font: inherit;
+}
+
+.common:focus {
+  outline: none;
+}
+
+.expanded {
+  composes: common;
+}
+
+.collapsed {
+  composes: common;
+}
+
+.common > div  {
+  padding: 10px 32px 10px 0;
+  font-weight: bold;
+  background-position: right center;
+  background-repeat: no-repeat;
+}
+
+.expanded > div {
+  background-image: url(../../images/collapse.svg);
+}
+
+.expanded:hover > div {
+  background-image: url(../../images/collapseActive.svg);
+}
+
+.collapsed > div {
+  background-image: url(../../images/expand.svg);
+}
+
+.collapsed:hover > div {
+  background-image: url(../../images/expandActive.svg);
+}

package/styles/cspace/RemoveSearchParamLink.css

@@ -0,0 +1,15 @@
+.common {
+  composes: common from './SearchParamLink.css';
+  max-width: 300px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  padding-right: 24px;
+  background-image: url(../../images/close.svg);
+  background-repeat: no-repeat;
+  background-position: calc(100% - 4px) center;
+  background-size: 16px;
+}
+
+.common:hover {
+  text-decoration: line-through;
+}

package/styles/cspace/RootPage.css

@@ -0,0 +1,60 @@
+@value buttonBgColor, buttonBgHoverColor, highlightColor from '../colors.css';
+
+html {
+  scroll-behavior: smooth;
+}
+
+body {
+  padding: 0;
+  margin: 0;
+  color: #424242;
+}
+
+a {
+  text-decoration: none;
+  color: highlightColor;
+}
+
+a:hover {
+  text-decoration: underline;
+}
+
+a:focus {
+  outline: 1px dotted highlightColor;
+  outline-offset: 1px;
+}
+
+p {
+  margin: 16px 0;
+}
+
+p:first-child {
+  margin-top: 0;
+}
+
+input {
+  outline-offset: -2px;
+}
+
+input, button {
+  color: inherit;
+  font: inherit;
+}
+
+button {
+  border: none;
+  border-radius: 3px;
+  background-color: buttonBgColor;
+  color: white;
+  outline-offset: -2px;
+}
+
+button:hover {
+  background-color: buttonBgHoverColor;
+  color: buttonBgColor;
+}
+
+button:focus {
+  outline-offset: 1px;
+  outline: 2px solid buttonBgColor;
+}

package/styles/cspace/ScrollTopButton.css

@@ -0,0 +1,32 @@
+@value highlightColor, panelBorderColor from '../colors.css';
+
+.common {
+  position: fixed;
+  width: 64px;
+  height: 64px;
+  right: 20px;
+  bottom: 20px;
+  border-radius: 32px;
+  border: none;
+  padding: 0;
+  background: white url(../../images/top.svg) no-repeat center center;
+  box-shadow: 0 0 9px 3px panelBorderColor;
+  z-index: 15;
+  transition: opacity 1s;
+}
+
+.common:focus {
+  outline: none;
+  border: 2px solid highlightColor;
+  box-shadow: 0 0 9px 3px highlightColor;
+}
+
+.common:hover {
+  background-color: rgb(248, 248, 248);
+}
+
+.hidden {
+  composes: common;
+  opacity: 0;
+  visibility: hidden;
+}

package/styles/cspace/SearchEntryForm.css

@@ -0,0 +1,4 @@
+.common {
+  margin: 0;
+  padding: 10px;
+}

package/styles/cspace/SearchEntryPanel.css

@@ -0,0 +1,11 @@
+@value panelBorderColor from '../colors.css';
+@value searchInputBorderWidth from '../dimensions.css';
+
+.common {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  background-color: white;
+  border-bottom: searchInputBorderWidth solid panelBorderColor;
+  z-index: 11;
+}

package/styles/cspace/SearchPage.css

@@ -0,0 +1,2 @@
+.common {
+}

package/styles/cspace/SearchParamLink.css

@@ -0,0 +1,21 @@
+@value highlightColor from '../colors.css';
+
+.common {
+  cursor: pointer;
+  padding: 8px;
+  border-radius: 3px;
+  text-decoration: none;
+  color: inherit;
+  white-space: nowrap;
+  margin: 4px 4px 0 0;
+  background-color: rgb(245, 245, 245);
+  outline-offset: -2px;
+}
+
+.common:hover {
+  background-color: rgb(238, 238, 238);
+}
+
+.common:focus {
+  outline: 2px solid highlightColor;
+}

package/styles/cspace/SearchParamList.css

@@ -0,0 +1,6 @@
+.common {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: baseline;
+  margin-bottom: 4px;
+}