tc-ui-toolkit/lib/ScripturePane/ScripturePane.styles.css

React components used to develop tools for the desktop app translationCore

@import '../index.styles.css';

.scripture-pane-container {
  flex: 1;
  height: 100%;
  margin: 10px;
  box-shadow: 0 3px 10px var(--background-color);
  border-radius: 2px;
  overflow: auto;
}

.inner-container {
  height: 100%;
  display: flex;
  flex-direction: column;
}

.title-bar {
  flex: 0 0 40px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px;
  color: var(--reverse-color);
  background-color: var(--accent-color-dark);
  font-size: 16px;
  font-weight: bold;
}

.panes-container {
  flex: 1;
  display: flex;
  overflow-x: auto;
}

@font-face {
  font-family: Noto Sans;
  src: url(../fonts/NotoSans-Regular.ttf);
  font-weight: normal;
}
@font-face {
  font-family: Noto Sans;
  font-style: italic;
  src: url(../fonts/NotoSans-Italic.ttf);
}
@font-face {
  font-family: Noto Sans;
  font-weight: bold;
  src: url(../fonts/NotoSans-Bold.ttf);
}

@font-face {
  font-family: Noto Sans;
  font-style: italic;
  font-weight: bold;
  src: url(../fonts/NotoSans-BoldItalic.ttf);
}

/*
special font for Hebrew
 */
@font-face {
  font-family: Ezra;
  src: url(../fonts/SILEOTSR.ttf);
  font-weight: normal;
  unicode-range: U+0590-05FF;
}

/*
use Ezra for Hebrew characters and then Noto Sans for other characters
 */
* {
  font-family: Ezra, Noto Sans;
}