ebt-vue3/src/assets/main.css

Vue3 Library for SuttaCentral Voice EBT-Sites

/****************** CORE CSS (BEGIN) *********************/

@font-face {
  font-family: "SourceSansPro";
  font-weight: 400;
  font-style: normal;
  font-display: auto;
  unicode-range: U+000-5FF;
  src: local("SourceSansPro"), url("/fonts/SourceSansPro/SourceSansPro-Regular.woff2") format("woff2"), url("/fonts/SourceSansPro/SourceSansPro-Regular.woff") format("woff");
}

:root {
  --focus-color: rgb(206, 132, 0);
  --focus-border: 2pt dashed;
  --ebt-sc-sans-font: "Skolar Sans PE", "Noto Sans", sans-serif;
  --ebt-sc-serif-font: "Skolar PE", "Noto Serif", "Skolar Sans PE", "Noto Sans", serif;
}
div.v-theme--light {
  --v-high-emphasis-opacity: 1;
}
div.v-theme--dark {
  --v-high-emphasis-opacity: 1;
}
.v-btn:hover {
  color: rgb(var(--v-theme-link));
}
.v-btn:focus-within {
  border: var(--focus-border) var(--focus-color);
  border-radius: 8pt;
  color: rgb(var(--v-theme-link));
}
.v-btn--icon:focus-within {
  border: var(--focus-border) var(--focus-color);
  border-radius: 8pt;
}
.v-btn__overlay {
  background-color: rgba(0,0,0,0);
}
.v-expansion-panel {
  border: 2pt dashed rgb(0,0,0,0);
}
.v-expansion-panel-title:focus {
  border: 2pt dashed var(--focus-color);
  border-radius: 0.5em;
}
.v-input:focus-within {
  outline: 2pt dashed var(--focus-color);
  outline-offset: 2pt;
}
a {
  color: rgb(var(--v-theme-on-surface));
  text-decoration: none;
  font-weight: 500;
}
.ebt-card:hover a {
  color: rgb(var(--v-theme-link));
}
a:hover {
  color: rgb(var(--v-theme-link));
  text-decoration: underline;
}
a > img:hover {
  border: 2px solid rgb(var(--v-theme-link));
}
a .ebt-thumbnail:hover {
  border: 2px solid rgb(var(--v-theme-link));
}
a:focus,
a:focus div {
  color: rgb(var(--v-theme-link));
  outline: 2pt dashed rgba(var(--v-theme-link),0.5);
}
.scv-matched {
  color: rgb(var(--v-theme-matched));
  font-weight: 600;
}
a.scv-matched {
  color: green;
}
.debug {
  color: aqua;
}
.debug:hover {
  color: red;
}
.ebt-example {
  font-weight: 600;
  color: rgb(var(--v-theme-example));
}
.ebt-example:hover {
  text-decoration: underline;
  cursor: zoom-in;
}
.v-enter-active,
.v-leave-active {
  transition: opacity 0.5s ease;
}

.v-enter-from,
.v-leave-to {
  opacity: 0;
}

.ebt-menu .v-list {
  border: 2pt solid rgba(var(--v-theme-menu), 0.4);
}
.ebt-menu .v-list-item:hover {
  color: rgb(var(--v-theme-menu));
}

.ebt-icon-btn {
  margin: 0;
  margin-left:2px;
  margin-right:2px;
  border-radius:5px;
  border: none;
  font-size: 24px ;
  min-height: 1.7em !important;
  min-width: 1.7em !important;
}
.ebt-icon-btn svg {
  bottom: 0em !important;
}
.ebt-icon-btn:focus, 
.ebt-icon-btn:hover {
  outline: 2px solid rgb(var(--v-theme-link));
}
.TBDtheme--dark.ebt-icon-btn:focus-within, 
.TBDtheme--dark.ebt-icon-btn:hover {
  outline: 2px solid var(--ebt-focus-color-dark);
  background-color: var(--ebt-focus-background-color-dark);
}
.TBDtheme--dark.ebt-icon-btn:focus-within svg, 
.TBDtheme--dark.ebt-icon-btn:hover svg{
  color: var(--ebt-focus-color-dark);
  background-color: var(--ebt-focus-background-color-dark);
}

.ebt-wiki {
  padding: 1em;
  padding-bottom: 2em;
  font-size: 107%;
}
.ebt-wiki li {
  margin-left: 1.8em;
  margin-top: 0.15em;
  margin-bottom: 0.15em;
}
.ebt-wiki p {
  padding-top: 0.2em;
  padding-bottom: 0.2em;
  max-width: calc(min(100vw - 30px, 700px));
}
.ebt-wiki h1,h2 {
  padding-top: 0.9em;
  padding-bottom: 0.2em;
}
.ebt-wiki h3 {
  padding-top: 0.7em;
  padding-bottom: 0.1em;
}
.ebt-wiki h4,h5,h6 {
  padding-top: 0.5em;
}
.ebt-wiki h1 {
  font-size: 1.2em !important;
}
.ebt-wiki td {
  vertical-align: top;
  padding-right: 0.2em;
  padding-bottom: 0.1em;
}
.ebt-wiki th {
  border-bottom: 1pt solid grey;
}
.ebt-wiki details {
  padding-left: 1em;
}
.ebt-wiki details:focus-within {
  outline: 1pt dashed rgb(var(--v-theme-link));
}
.ebt-wiki summary {
  margin-left: -0.5em;
  font-weight: 700;
  padding-top: 0.3em;
  padding-bottom: 0.3em;
}
.ebt-wiki summary {
  outline: none;
}
.ebt-wiki-heading {
  display: flex;
  flex-flow: row wrap;
  align-items: flex-start;
}
.ebt-wiki-heading img {
  height: 150px;
  border-top-left-radius: 0.5em;
}
.ebt-wiki-heading-text {
  margin-left: 1em;
  display: flex;
  flex-flow: column;
}
.ebt-wiki-description {
  padding-top: 0em;
  padding-bottom: 0.5em;
  font-size: 90%;
  font-style: italic;
}
.ebt-wiki-breadcrumbs {
  font-weight: 500;
}
.ebt-image {
  outline: 1px solid rgba(127,127,255, 0.8);
  border: 3px solid rgba(127,127,255, 0.2);
  border-radius: 5px;
}
.ebt-toc {
  margin: 1em;
}
.ebt-toc-item {
  display: flex;
  flex-flow: row wrap;
  align-items: flex-start;
  margin-top: 0.6em;
  border-top: 1pt solid gray;
  border-top-left-radius: 0.5em;
}
.ebt-toc-category {
  margin-top: 1em;
  margin-left: -0.8em;
}
.ebt-toc-item-text {
  font-size: .93em;
  margin-top: 0.3em;
  margin-left: 1em;
}
a:focus-within > .ebt-toc-item-title {
  padding: 1pt;
  outline: 1pt dashed rgb(var(--v-theme-link));
} 
.ebt-toc-detail summary {
  font-size: .93em;
}
.ebt-toc-detail ul {
  font-size: .93em;
  padding-left: 1em;
  font-weight: 400;
}
.ebt-thumbnail {
  height: 4em;
  width: 5em;
  overflow: hidden;
  border-top-left-radius: 0.5em;
}
.ebt-thumbnail img {
  height: 4.5em;
}

blockquote {
  border-left: 3px solid grey;
  padding-left: 0.5em;
}
.footnotes {
  padding-top: 8em;
}
.footnotes-body {
  padding: 1em;
}
.footnotes-title {
  text-decoration: overline;
  opacity: 0.5;
  width: fit-content;
}
.footnotes:focus-within .footnotes-body {
  outline: 2pt dashed rgb(var(--v-theme-link));
}
.footnotes:focus {
  outline: none !important;
  border: none !important;
}
code {
  background-color: rgba(var(--v-theme-on-surface), 0.2);
}
.v-spacer {
  flex-grow: 1;
}
.card-top-anchor {
  font-size: 12px;
  position: relative;
  overflow: hidden;
  border-left: 1pt solid rgb(0,0,0,0);
  width: 1px;
  height: 118px;
  top: 0em;
}
.card-top-anchor-debug {
  color: rgba(var(--v-theme-debug), 1);
  width: 100%;
}
.card-title {
  overflow: hidden;
  text-overflow: ellipsis;
}
.card-title-anchor {
  position: relative;
}
.card-icon {
  opacity: 0.5;
  margin-right: 0.2em;
}
.ebt-card {
  background: rgb(var(--v-theme-surface)) !important;
  margin-left: 2px;
  margin-right: 1em;
  border-radius: 4px;
}
.ebt-card-current {
  -webkit-box-shadow:0px 0px 3px 3px rgba(var(--v-theme-focus), 0.5);
  -moz-box-shadow: 0px 0px 3px 3px 1px rgba(var(--v-theme-focus), 0.5);
  box-shadow: 0px 0px 3px 3px rgba(var(--v-theme-focus), 0.5);
}
.ebt-card > .v-card {
  opacity: 0.8 !important;
}
.ebt-card:hover > .v-card {
  opacity: 1 !important;
}
.ebt-card-current > .v-card--variant-flat {
  opacity: 1 !important;
}
.ebt-card-search {
  max-width: 600px;
  min-height: calc(min(100vh - 50px, 500px));
}
.v-card-text {
  min-width: 20em;
}
.close-item {
  cursor: pointer;
}
.close-item:hover {
  color: rgb(var(--v-theme-link));
}
.card-sheet {
  background: rgba(0,0,0,0);
}
.card-sheet-closed {
  display: none;
}
.last-tab {
  display: flex;
  opacity: 0.0;
  justify-content: center;
  cursor: pointer;
  height: 1px;
}
.last-tab:focus {
  outline: 1pt solid green;
}

.pali-panel-title {
  max-height: 48px;
  background: linear-gradient(160deg, 
    rgb(var(--v-theme-currentbg)), 
    rgb(var(--v-theme-toolbar))
    ) !important;
}
.pali-panel-title-text {
  max-width: 100%;
}
.pali-group {
  margin-top: 0.4em;
  max-width: 35em;
}

.tooltip-button {
  padding: 0px;
}
.dpd-raw {
  opacity: 0.6;
}
.dpd-lit {
  text-style: italic;
}
.dpd-tooltip {
  color: white !important;
  background-color: black !important;
  border: 1pt solid rgba(255,255,255,0.4);
}
.dpd-cartouche {
  display: inline-block;
  color: white;
  text-transform: none;
  max-width: 23em;
  hyphens: manual;
  border-left: solid 1px gray;
  border-top: solid 1px gray;
  background: linear-gradient(1600deg, 
    rgba(255,255,255,0.3), 
    rgba(255,255,255,0.1) 
    ) !important;
  border-radius: 6px;
  padding-top: 0px;
  padding-left: 3px;
  padding-right: 6px;
  margin-right: 2px;
}

.dpd-grammar {
  display: inline-block;
  opacity: 0.8;
  font-style: italic;
  margin-left: 0.2em;
}

div[title]:hover::before {
  content: attr(title);
  background-color: #000000;
  color: #ffffff;
  padding: 5px;
  border-radius: 5px;
  position: absolute;
  z-index: 1;
}

.dpd-link {
  display: flex;
  justify-content: center;
  margin-top: 1em;
}
.dpd-link div {
  border-top: 1px solid rgba(255,255,255,0.1);
  text-align: center;
  padding-left: 0.7em;
  padding-right: 0.7em;
}

/******************** CORE CSS (END) ********************/

/**************** Search Results (BEGIN)  ***************/

.result-title {
  display: flex;
  flex-flow: row wrap;
  align-items: baseline;
  min-width: 220px;
  max-width: 40em;
  justify-content: space-between;
}
.result-title-main {
  display: flex;
  flex-flow: row nowrap;
  min-width: 210px;
  max-width: 30em;
  justify-content: space-between;
  margin-top: 0.2rem;
  margin-bottom: 0.3rem;
  margin-left: 1rem;
}
.result-subtitle {
  margin-left: 1rem;
  margin-right: 0.3rem;
  margin-bottom: 0.3rem;
  text-align: right;
  font-size: small;
  font-style: italic;
  width: 270px;
}
.result-title-body {
  margin-right: 10px;
  height: 1.25em;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  font-weight: 600;
}
.result-title-stats {
}
.result-expansion {
  border-left: 3pt solid rgb(var(--v-theme-expansion));
  margin-top: 2pt;
}
.result-title-number {
  position: absolute;
  font-size: 140%;
  text-align: right;
  top: 0.35em;
  left: 0rem;
  width: 1.3em;
  opacity: 0.4;
}
.result-blurb {
  font-style: italic;
  padding-bottom: 0.2em;
  cursor: pointer;
  margin-left: 1em;
}
.result-quote {
  display: inline-block;
  margin-left: 0.3em;
}
.result-segment {
  margin-left: 1em;
}
.result-scid {
  opacity: 0.5;
  font-size: 80%;
  padding-right: 0.5em;
}
.result:hover .result-scid {
  opacity: 1.0;
}

.result a,
.ebt-card:hover .result a {
  font-weight: 400;
}

.result-sutta:hover .result-title-main {
  text-decoration: underline;
  text-decoration-color: rgb(var(--v-theme-matched));
}

:is(
  .result a,
  .ebt-card:hover .result a 
){
  color: rgb(var(--v-theme-on-surface));
}
:is(
  .ebt-card:hover .result:hover .scv-matched,
  .ebt-card:hover .result:hover a 
){
  color: rgb(var(--v-theme-link));
}

/************** SearchResults (END) *************/

/************** EbtCards (BEGIN) ***************/

.ebt-cards {
  display: flex;
  flex-flow: row wrap;
  justify-content: center;
  min-height: 50em;
  padding-bottom: calc(80vw);
}
.ebt-cards1 {
  background-color: rgb(var(--v-theme-surface)) !important;
}
.play-col {
  display: flex;
  flex-flow: column nowrap;
}
.play-row {
  display: flex;
  flex-flow: row nowrap;
  justify-content: space-between;
  align-items: center;
  opacity: 1;
}
.play-row button {
  padding: 0;
  min-width: 48px;
  max-width: 54px;
}
.play-scid {
  display: flex;
  flex-flow: column;
  align-items: center;
  font-family: var(--ebt-sc-sans-font);
  font-size: larger;
  font-weight: 600;
  margin-left: 0.5rem;
  margin-right: 0.5rem;
}
.progressTime {
  font-weight: 400;
}
.ebt-card-wiki {
  max-width: calc(min(45em,100vw - 10px));
  min-height: calc(min(100vh - 30px, 600px));
}
.ebt-cards1 .ebt-card-wiki {
  max-width: calc(min(50em,100vw - 10px));
}
/************** EbtCards (END) ***************/

/************** SegmentView (BEGIN) ***************/
.seg-footer {
  font-size: smaller;
  padding-top: 1em;
}
.seg-match {
  display: flex;
  border-left: 2pt solid rgba(0,0,0,0);
}
.seg-matched {
  border-left-color: rgba(var(--v-theme-link), 0.5);
}
.seg-id-col {
  flex-flow: column;
}
.seg-id-row {
  flex-flow: row;
}
.seg-id {
  font-size: x-small;
  margin-left: 10px;
  color: rgba(var(--v-theme-on-surface), 0.6);
}
.seg-id-col .seg-id {
  margin-left: 5px;
}
.seg-text {
  display: flex;
  flex-flow: row wrap;
  justify-content: flex-start;
  opacity: 0.85;
  line-height: 1.5;
}
.seg-text-1col {
  flex-flow: column;
  max-width: calc(min(100vw - 30px, 600px));
}
.seg-lang {
  margin-bottom: 0.8em;
  margin-left: 10px;
}
.seg-root {
  font-style: italic;
  font-family: var(--ebt-sc-sans-font);
}
.seg-trans {
  font-family: var(--ebt-sc-sans-font);
}
.seg-ref {
  font-family: var(--ebt-sc-serif-font);
  font-size: 100%;
}
.seg-lang-1col-sm {
  width: calc(100svw-30px);
}
.seg-lang-1col-lg.seg-root,
.seg-lang-1col-sm.seg-root {
  padding-left: 0px;
}
.seg-lang-1col-lg.seg-trans,
.seg-lang-1col-sm.seg-trans {
  padding-left: 1.2em;
  background: linear-gradient(90deg,
    rgba(var(--v-theme-on-surface),0.1),
    rgba(0,0,0,0) 40% 
    );
}
.seg-lang-1col-lg.seg-ref,
.seg-lang-1col-sm.seg-ref {
  padding-left: 0px;
  font-size: 107%;
}
.seg-lang-1col-lg {
  width: calc(min(100vw - 30px, 500px));
  padding-left: 1em;
}
.seg-lang-2col-sm {
  width: 300px;
}
.seg-lang-2col-lg {
  width: calc(min(45vw - 30px, 330px));
}
.seg-lang-3col-sm {
  width: calc(30svw);
}
.seg-lang-3col-lg {
  width: 350px;
}
.seg-anchor {
  position: relative;
  font-size: 10px;
  top: -110px;
  height: 1px;
}
.seg-current {
  background-color: rgba(var(--v-theme-currentbg),1);
  border-radius: 5px;
}
.seg-current .seg-text {
  opacity: 1;
  font-size: larger;
}
.seg-audio {
  border: 2px dashed rgba(var(--v-theme-link), 1);
}
.seg-audio .ebt-example:hover {
  text-decoration: underline;
  cursor: pointer;
}
.empty-text {
  color: #888;
  padding-left: 1em;
  padding-right: 1em;
}
.seg-body {
}
.seg-body:focus {
  border: 2px dotted rgba(var(--v-theme-matched), 1);
}
.segment-menu {
  display: flex; 
  justify-content: flex-end;
  align-items: flex-end;
}
.pli-word:hover {
  color: rgb(var(--v-theme-link));
}
.pli-summary {
  padding: 0.5em;
  padding-top: 3px;
  padding-left: 1em;
  min-height: 3em;
  width: 340px;
  background-color: rgb(var(--v-theme-currentbg));
  border-bottom-left-radius: 1em;
  border-bottom-right-radius: 1em;
  border-left: 1px solid rgba(var(--v-theme-focus), 0.8);
}
.pli-summary-link {
  display: inline-block;
  margin-right: 1em;
}
.pli-summary-item {
  display: inline-block;
  margin-right: 0.3em;
}

/************** SegmentView (END) ***************/

/************** SuttaView (BEGIN) ***************/
.sutta {
  outline: none;
}
.sutta:focus {
}
.sutta-1col {
  max-width: calc(min(100vw - 30px, 70em));
}
.sutta-2col {
  max-width: 60em;
}
.sutta-3col {
  max-width: 100em;
}
.sutta-title {
  display: flex;
  flex-flow: column;
  align-items: center;
  font-family: var(--ebt-sc-sans-font);
  font-size: larger;
  font-weight: 600;
  line-height: 1.5em;
  margin-bottom: 1em;
}
.sutta-title div:first-child {
  font-size: smaller;
  font-weight: 400;
}
.tipitaka-nav {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  opacity: 0.4;
  margin-bottom: 0.5rem;
}
.tipitaka-nav:focus-within,
.tipitaka-nav:hover {
  opacity: 1;
}

/******************* SuttaVeew (END) ***********************/

/*
 * Accessible desktop (green)
 */
@media (max-width: 1300px) {
  .ebt-wiki-heading img {
    height: 80px;
  }
  .ebt-wiki-heading-text { 
    /* color: green !important; /* DEBUG */
  }
  .ebt-card-wiki {
    max-width: calc(35vw - 10px);
  }
  .ebt-cards1 .ebt-card-wiki {
    max-width: calc(min(40em,100vw - 10px));
  }
  .ebt-card-search {
    max-width: calc(45vw - 10px);
  }
}

/*
 * Mobile large (yellow)
 */
@media (max-width: 1100px) {
  .ebt-wiki-heading img {
    height: 55px;
  }
  .ebt-wiki-heading-text {
    /* color: yellow !important; /* DEBUG */
  }
  .ebt-card {
    max-width: calc(100vw - 10px);
    margin-right: 2px;
  }
  .ebt-card-search {
    max-width: calc(100vw - 10px);
  }
}

/*
 * Mobile small (red)
 */
@media (max-width: 600px) {
  .ebt-wiki-heading img {
    height: 55px;
  }
  .ebt-wiki-heading-text {
    /* color: red !important; /* DEBUG */
  }
  .v-app-bar-title {
    min-width: calc(50vw);
  }
  .ebt-card {
    max-width: calc(100vw - 10px);
    margin-right: 2px;
  }
}