diff --git a/css/base/variables.css b/css/base/variables.css index 1052220..101ce39 100755 --- a/css/base/variables.css +++ b/css/base/variables.css @@ -18,7 +18,8 @@ /* --font-serif: "Lora", "georgia", serif; */ --font-sans: var(--font-im-fell); --font-serif: var(--font-im-fell-sc); - + --border-light: #ddd; + --border-dark: #bbb; /* Typography helpers. */ --font-size-base: 1rem; --font-size-l: 1.125rem; diff --git a/css/components/block.css b/css/components/block.css index 4f0ea8f..f7980a5 100755 --- a/css/components/block.css +++ b/css/components/block.css @@ -29,4 +29,5 @@ background: #ece8e3; padding: 1rem; border-radius: 5px; + border: 1px solid var(--border-dark); } diff --git a/css/components/form-select.css b/css/components/form-select.css index ce34f91..399d19f 100755 --- a/css/components/form-select.css +++ b/css/components/form-select.css @@ -21,7 +21,8 @@ select { padding-inline-start: var(--sp); padding-inline-end: var(--sp3); color: var(--color-text-neutral-loud); - border: 1px solid var(--color--gray-60); + /* border: 1px solid var(--color--gray-60); */ + border: 1px solid var(--border-dark); border-radius: var(--border-radius); background-color: var(--color--white); background-image: var(--form-element-select-icon); diff --git a/css/components/form-text.css b/css/components/form-text.css index face2c5..bbb82e0 100755 --- a/css/components/form-text.css +++ b/css/components/form-text.css @@ -30,7 +30,8 @@ textarea { min-height: var(--sp2); padding: 0 var(--sp); color: var(--color-text-neutral-loud); - border: 1px solid var(--color--gray-60); + /* border: 1px solid var(--color--gray-60); */ + border: 1px solid var(--border-dark); border-radius: var(--border-radius); background-color: var(--color--white); font-family: inherit; @@ -39,13 +40,45 @@ textarea { appearance: none; } -:is([type="color"], [type="date"], [type="datetime-local"], [type="email"], [type="file"], [type="month"], [type="number"], [type="password"], [type="search"], [type="tel"], [type="text"], [type="time"], [type="url"], [type="week"], textarea):focus { +:is( + [type="color"], + [type="date"], + [type="datetime-local"], + [type="email"], + [type="file"], + [type="month"], + [type="number"], + [type="password"], + [type="search"], + [type="tel"], + [type="text"], + [type="time"], + [type="url"], + [type="week"], + textarea + ):focus { border: solid 2px var(--color--primary-50); outline: solid 2px var(--color--primary-50); } @supports (outline-style: double) { - :is([type="color"], [type="date"], [type="datetime-local"], [type="email"], [type="file"], [type="month"], [type="number"], [type="password"], [type="search"], [type="tel"], [type="text"], [type="time"], [type="url"], [type="week"], textarea):focus { + :is( + [type="color"], + [type="date"], + [type="datetime-local"], + [type="email"], + [type="file"], + [type="month"], + [type="number"], + [type="password"], + [type="search"], + [type="tel"], + [type="text"], + [type="time"], + [type="url"], + [type="week"], + textarea + ):focus { border-width: 1px; outline-width: 6px; outline-style: double; @@ -53,25 +86,107 @@ textarea { } } -[disabled]:is([type="color"], [type="date"], [type="datetime-local"], [type="email"], [type="file"], [type="month"], [type="number"], [type="password"], [type="search"], [type="tel"], [type="text"], [type="time"], [type="url"], [type="week"], textarea) { +[disabled]:is( + [type="color"], + [type="date"], + [type="datetime-local"], + [type="email"], + [type="file"], + [type="month"], + [type="number"], + [type="password"], + [type="search"], + [type="tel"], + [type="text"], + [type="time"], + [type="url"], + [type="week"], + textarea + ) { color: var(--color--gray-60); background-color: var(--color--gray-100); } -.error:is([type="color"], [type="date"], [type="datetime-local"], [type="email"], [type="file"], [type="month"], [type="number"], [type="password"], [type="search"], [type="tel"], [type="text"], [type="time"], [type="url"], [type="week"], textarea) { +.error:is( + [type="color"], + [type="date"], + [type="datetime-local"], + [type="email"], + [type="file"], + [type="month"], + [type="number"], + [type="password"], + [type="search"], + [type="tel"], + [type="text"], + [type="time"], + [type="url"], + [type="week"], + textarea + ) { border: solid 2px var(--color--red); } -.error:is([type="color"], [type="date"], [type="datetime-local"], [type="email"], [type="file"], [type="month"], [type="number"], [type="password"], [type="search"], [type="tel"], [type="text"], [type="time"], [type="url"], [type="week"], textarea):focus { +.error:is( + [type="color"], + [type="date"], + [type="datetime-local"], + [type="email"], + [type="file"], + [type="month"], + [type="number"], + [type="password"], + [type="search"], + [type="tel"], + [type="text"], + [type="time"], + [type="url"], + [type="week"], + textarea + ):focus { outline-color: var(--color--red); outline-offset: -2px; } -.error:is([type="color"], [type="date"], [type="datetime-local"], [type="email"], [type="file"], [type="month"], [type="number"], [type="password"], [type="search"], [type="tel"], [type="text"], [type="time"], [type="url"], [type="week"], textarea) + .ck-editor > .ck-editor__main { +.error:is( + [type="color"], + [type="date"], + [type="datetime-local"], + [type="email"], + [type="file"], + [type="month"], + [type="number"], + [type="password"], + [type="search"], + [type="tel"], + [type="text"], + [type="time"], + [type="url"], + [type="week"], + textarea + ) + + .ck-editor + > .ck-editor__main { border: solid 2px var(--color--red); } -.form-element--small:is([type="color"], [type="date"], [type="datetime-local"], [type="email"], [type="file"], [type="month"], [type="number"], [type="password"], [type="search"], [type="tel"], [type="text"], [type="time"], [type="url"], [type="week"], textarea) { +.form-element--small:is( + [type="color"], + [type="date"], + [type="datetime-local"], + [type="email"], + [type="file"], + [type="month"], + [type="number"], + [type="password"], + [type="search"], + [type="tel"], + [type="text"], + [type="time"], + [type="url"], + [type="week"], + textarea + ) { min-height: var(--sp2-5); } diff --git a/css/components/form-textarea.css b/css/components/form-textarea.css index 30cfb3d..a3b1eb7 100755 --- a/css/components/form-textarea.css +++ b/css/components/form-textarea.css @@ -17,5 +17,5 @@ textarea { padding: var(--sp); } .region--sidebar input.form-text { - width: 14em; + max-width: 12em; } diff --git a/css/components/islandora_mods.css b/css/components/islandora_mods.css index f85b4be..2baeb97 100755 --- a/css/components/islandora_mods.css +++ b/css/components/islandora_mods.css @@ -94,6 +94,9 @@ div#block-olivesbooks-solrsearchcontentsearchresultspagerforpage { } } /* People objects/nodes */ +.views-view-grid__item { + display: flex; +} .person--layout { float: left; } @@ -121,7 +124,7 @@ div#block-olivesbooks-solrsearchcontentsearchresultspagerforpage { margin: 0; } input.form-text { - width: 400px; + max-width: 400px; font-size: 1.2rem; padding: 0.5rem; /* box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.08); */ @@ -138,6 +141,7 @@ div#block-olivesbooks-solrsearchcontentsearchresultspagerforpage { padding: 8px; border-radius: 4px; box-shadow: 0px 5px 11px -2px rgb(0 0 0 / 39%); + width: 100%; .views-field-did-image, .field--type-image { height: 230px; @@ -177,3 +181,9 @@ nav.pager { .search-result.views-row { min-width: 0; } +.social-bar { + border-right: 1px solid #ddd; +} +div#page { + border-right: 1px solid #ddd; +} diff --git a/css/components/pager.css b/css/components/pager.css index a9b82fa..1758c73 100755 --- a/css/components/pager.css +++ b/css/components/pager.css @@ -10,8 +10,9 @@ * Styles for pagination. */ -#block-olivesbooks-solrsearchcontentsearchresultspagerforcollectionmembers .pager__group { - justify-content: space-around; +#block-olivesbooks-solrsearchcontentsearchresultspagerforcollectionmembers + .pager__group { + justify-content: space-around; } .pager__items { display: flex; @@ -71,7 +72,10 @@ } .pager__link:hover { - background-color: var(--color--gray-95); + /* background-color: var(--color--gray-95); */ + + border: solid 2px #39481e; + border-radius: 4px; } .pager__link:focus { @@ -89,3 +93,16 @@ .pager__item--last svg { transform: rotate(180deg); } +/* Pager tweaks */ +.pager__link--is-active { + text-decoration: underline !important; + border: solid 2px #39481e; + border-radius: 4px; +} +.pager__item { + border: 1px solid var(--border-light); + border-radius: 4px; +} +span#override-default-display-mode { + display: none; +} diff --git a/css/components/tabs.css b/css/components/tabs.css index 1c1c15e..9d5c64f 100755 --- a/css/components/tabs.css +++ b/css/components/tabs.css @@ -9,16 +9,24 @@ --tabs-height: var(--sp3); --tabs-padding-inline: var(--sp1-5); --tabs-active-border-size: 0.375rem; - --tabs-highlight-color: var(--color--primary-50); /* Minimum 3:1 contrast ratio against --tabs-background-color and --tabs-background-color-hover. */ - --tabs-text-color: var(--color-text-neutral-soft); /* Minimum 4.5:1 contrast ratio against --tabs-background-color and --tabs-background-color-hover. */ - --tabs-text-color-active: var(--color--gray-5); /* Minimum 4.5:1 contrast ratio against --tabs-background-color and --tabs-background-color-hover. */ + --tabs-highlight-color: var( + --color--primary-50 + ); /* Minimum 3:1 contrast ratio against --tabs-background-color and --tabs-background-color-hover. */ + --tabs-text-color: var( + --color-text-neutral-soft + ); /* Minimum 4.5:1 contrast ratio against --tabs-background-color and --tabs-background-color-hover. */ + --tabs-text-color-active: var( + --color--gray-5 + ); /* Minimum 4.5:1 contrast ratio against --tabs-background-color and --tabs-background-color-hover. */ --tabs-letter-spacing: 1px; --tabs-font-size: var(--font-size-s); --tabs-background-color: var(--color--gray-100); --tabs-background-color-hover: var(--color--gray-95); --tabs-border-width: 1px; --tabs-border-color: var(--color--gray-95); + --tabs-border-color: var(--border-light); --tabs-transition-duration: 0.2s; + font-family: var(--font-serif); display: flex; flex-direction: column; @@ -107,14 +115,16 @@ html:not(.js) .tabs__tab { inset-inline-start: calc(-1 * var(--tabs-border-width)); height: calc(100% + var(--tabs-border-width) * 2); content: ""; - border-inline-start: var(--tabs-active-border-size) solid var(--tabs-highlight-color); + border-inline-start: var(--tabs-active-border-size) solid + var(--tabs-highlight-color); } @media (min-width: 43.75rem) { .tabs__link.is-active::after { inset-block: auto calc(-1 * var(--tabs-border-width)); width: calc(100% + 2 * var(--tabs-border-width)); height: 0; - border-block-start: var(--tabs-active-border-size) solid var(--tabs-highlight-color); + border-block-start: var(--tabs-active-border-size) solid + var(--tabs-highlight-color); border-inline-start: 0; } } @@ -166,26 +176,30 @@ html:not(.js) .tabs__trigger { inset-inline-start: 0; display: block; width: 100%; - transition: transform var(--tabs-transition-duration), opacity var(--tabs-transition-duration), top var(--tabs-transition-duration); + transition: transform var(--tabs-transition-duration), + opacity var(--tabs-transition-duration), top var(--tabs-transition-duration); border-block-start: solid 2px var(--tabs-highlight-color); } .tabs__trigger-icon > span:nth-child(1) { inset-block-start: 0; } -.tabs__trigger[aria-expanded="true"] :is(.tabs__trigger-icon > span:nth-child(1)) { +.tabs__trigger[aria-expanded="true"] + :is(.tabs__trigger-icon > span:nth-child(1)) { inset-block-start: calc(50% + 1px); transform: rotate(45deg); } .tabs__trigger-icon > span:nth-child(2) { inset-block-start: calc(50% + 1px); } -.tabs__trigger[aria-expanded="true"] :is(.tabs__trigger-icon > span:nth-child(2)) { +.tabs__trigger[aria-expanded="true"] + :is(.tabs__trigger-icon > span:nth-child(2)) { opacity: 0; } .tabs__trigger-icon > span:nth-child(3) { inset-block-start: calc(100% + 2px); } -.tabs__trigger[aria-expanded="true"] :is(.tabs__trigger-icon > span:nth-child(3)) { +.tabs__trigger[aria-expanded="true"] + :is(.tabs__trigger-icon > span:nth-child(3)) { inset-block-start: calc(50% + 1px); transform: rotate(-45deg); }