@import "/css/defs.css";
@import url("https://fonts.googleapis.com/icon?family=Material+Icons");
@import url("https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;700&display=swap");
.settings-container {
  position: absolute;
  top: -100px;
  height: 100px;
  width: 100vw;
  z-index: 100; }

.settings-inner {
  max-width: 720px;
  width: calc(100vw - 160px);
  margin: 0 auto;
  height: 100px;
  margin: 0 auto;
  position: relative;
  display: flex;
  align-items: center; }

.settings-toggle {
  position: absolute;
  right: 0;
  top: 100px;
  height: 60px;
  display: inline-flex;
  align-items: center;
  user-select: none;
  color: #19B5FE;
  filter: grayscale(1);
  transition: filter .2s ease, transform 1s ease;
  cursor: pointer; }
  .settings-toggle:hover {
    filter: grayscale(0); }
  body.settings-extended .settings-toggle {
    transform: rotate(360deg); }

body.settings-extended {
  transform: translateY(100px); }

.settings-section {
  display: flex;
  align-items: center;
  position: relative;
  padding-top: 18px; }
  .settings-section-label {
    position: absolute;
    top: 0;
    font-size: 12px;
    line-height: 18px;
    font-family: 'Open Sans', sans-serif;
    color: var(--color-hint-text);
    font-weight: 400;
    text-transform: uppercase; }

.settings-action {
  font-family: 'Open Sans', sans-serif;
  font-weight: 400;
  color: var(--color-main-text);
  color: #19B5FE;
  filter: grayscale(1);
  transition: filter .2s ease;
  cursor: pointer;
  user-select: none;
  display: inline-flex;
  align-items: center;
  margin-right: 20px; }
  .settings-action .material-icons {
    margin-right: 5px; }
  .settings-action:hover {
    filter: grayscale(0.5); }

body[data-current-brightness="auto"] [data-brightness="auto"], body:not([data-current-brightness]) [data-brightness="auto"] {
  filter: grayscale(0);
  cursor: default; }
  body[data-current-brightness="auto"] [data-brightness="auto"]:hover, body:not([data-current-brightness]) [data-brightness="auto"]:hover {
    filter: grayscale(0); }

body[data-current-brightness="dark"] [data-brightness="dark"] {
  filter: grayscale(0);
  cursor: default; }
  body[data-current-brightness="dark"] [data-brightness="dark"]:hover {
    filter: grayscale(0); }

body[data-current-brightness="light"] [data-brightness="light"] {
  filter: grayscale(0);
  cursor: default; }
  body[data-current-brightness="light"] [data-brightness="light"]:hover {
    filter: grayscale(0); }

html[lang="zh"] [data-lang="zh"] {
  filter: grayscale(0);
  cursor: default; }
  html[lang="zh"] [data-lang="zh"]:hover {
    filter: grayscale(0); }

html[lang="en"] [data-lang="en"] {
  filter: grayscale(0);
  cursor: default; }
  html[lang="en"] [data-lang="en"]:hover {
    filter: grayscale(0); }

/* CSS Reset */
* {
  box-sizing: inherit; }

a {
  color: var(--color-title); }

/* Shared styles */
body {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', "Hiragino Sans GB", "Source Han Sans SC", "Noto Sans CJK SC", "WenQuanYi Zen Hei", "WenQuanYi Micro Hei", "Microsoft YaHei", sans-serif;
  background: var(--color-body-bg); }

/* Colorization */
body {
  transition-property: transform, --color-body-bg, --color-sheet-bg, --color-hl-bg, --color-hint-text, --color-secondary-text, --color-main-text, --color-title, --color-icons;
  transition-duration: .2s;
  transition-timing-function: ease; }

body[data-current-brightness="dark"] {
  --color-body-bg: #333;
  --color-sheet-bg: #222;
  --color-hl-bg: #222;
  --color-recent-news-bg: rgba(255,255,255,.2);
  --color-hint-text: rgba(255,255,255,.38);
  --color-secondary-text: rgba(255,255,255,.54);
  --color-main-text: rgba(255,255,255,.87);
  --color-title: #46a5d1;
  --color-icons: rgba(255,255,255,.54);
  color: white; }

body[data-current-brightness="light"] {
  --color-body-bg: #f4f4f4;
  --color-sheet-bg: white;
  --color-hl-bg: rgba(25, 181, 254, 0.2);
  --color-recent-news-bg: rgba(255,255,255,.4);
  --color-hint-text: rgba(0,0,0,.38);
  --color-secondary-text: rgba(0,0,0,.54);
  --color-main-text: rgba(0,0,0,.87);
  --color-title: #01567d;
  --color-icons: rgba(0,0,0,.54);
  color: black; }

@media (prefers-color-scheme: dark) {
  body[data-current-brightness="auto"] {
    --color-body-bg: #333;
    --color-sheet-bg: #222;
    --color-hl-bg: #222;
    --color-recent-news-bg: rgba(255,255,255,.2);
    --color-hint-text: rgba(255,255,255,.38);
    --color-secondary-text: rgba(255,255,255,.54);
    --color-main-text: rgba(255,255,255,.87);
    --color-title: #46a5d1;
    --color-icons: rgba(255,255,255,.54);
    color: white; } }

@media (prefers-color-scheme: light) {
  body[data-current-brightness="auto"] {
    --color-body-bg: #f4f4f4;
    --color-sheet-bg: white;
    --color-hl-bg: rgba(25, 181, 254, 0.2);
    --color-recent-news-bg: rgba(255,255,255,.4);
    --color-hint-text: rgba(0,0,0,.38);
    --color-secondary-text: rgba(0,0,0,.54);
    --color-main-text: rgba(0,0,0,.87);
    --color-title: #01567d;
    --color-icons: rgba(0,0,0,.54);
    color: black; } }

/* Page sections */
h1, h2, h3, h4, h5, h6 {
  margin-top: 1.66em;
  color: var(--color-title); }
  h1 a, h2 a, h3 a, h4 a, h5 a, h6 a {
    color: var(--color-title); }

header {
  max-width: 720px;
  width: calc(100vw - 160px);
  margin: 0 auto;
  min-height: 360px;
  padding: 20px 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-end;
  z-index: 1;
  position: relative; }
  header h1 {
    font-size: 48px;
    margin-top: 0; }

.post-container {
  max-width: 720px;
  width: calc(100vw - 160px);
  margin: 0 auto;
  padding: 40px 0;
  display: flex;
  align-items: flex-start; }

.post {
  flex: 1;
  color: var(--color-main-text); }

.post-meta {
  max-width: 720px;
  width: calc(100vw - 160px);
  margin: 0 auto; }

.toc {
  width: 320px;
  position: sticky;
  top: 0px;
  margin-left: 80px;
  background-color: #dee7eb;
  padding: 10px 20px 15px 20px;
  border-top: #19B5FE 10px solid;
  box-shadow: rgba(0, 0, 0, 0.3) 0 2px 6px;
  border-radius: 4px; }

footer {
  max-width: 720px;
  width: calc(100vw - 160px);
  margin: 0 auto; }

.header-wrapper {
  background: var(--color-hl-bg);
  position: relative;
  box-shadow: rgba(0, 0, 0, 0.3) 0 4px 12px; }
  .header-wrapper:before {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    top: 0;
    z-index: 0;
    background-image: url(/images/gray.svg);
    background-repeat: no-repeat;
    background-position: 75% 100px;
    opacity: .18; }

.iconed-title {
  display: flex;
  align-items: center; }
  .iconed-title .material-icons {
    font-size: .8em;
    margin-right: 15px;
    user-select: none; }

main {
  padding-bottom: 80px; }

/* Components */
code {
  font-family: 'Droid Sans Mono', 'Roboto Mono', 'Courier New', Courier, monospace;
  background: rgba(140, 140, 140, 0.2);
  padding: 3px 8px;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone; }

pre {
  color: white;
  background: #002b36;
  padding: 20px 25px;
  word-break: break-all;
  white-space: pre-wrap;
  box-shadow: rgba(0, 0, 0, 0.3) 0 2px 6px;
  border-radius: 4px; }
  pre code {
    background: none;
    padding: 0; }

blockquote {
  background: rgba(140, 140, 140, 0.2);
  margin: 20px 0;
  padding: 20px 15px;
  border-left: #19B5FE 10px solid; }
  blockquote > p {
    margin: 0; }

.breadcrumbs {
  user-select: none;
  color: var(--color-title); }
  .breadcrumbs a {
    transition: filter .5s ease;
    text-decoration: none;
    filter: grayscale(1); }
    .breadcrumbs a:hover {
      filter: none; }
  .breadcrumbs-sep {
    filter: grayscale(1);
    opacity: .5; }

.prop-group {
  display: flex;
  align-items: center;
  margin: 20px 0; }

.prop-sep {
  margin: 0 30px;
  user-select: none;
  font-size: 12px; }

.prop,
.prop-mini {
  display: inline-flex; }
  .prop .material-icons,
  .prop-mini .material-icons {
    margin-right: 10px;
    font-size: 32px;
    line-height: 32px;
    color: var(--color-icons);
    user-select: none; }
  .prop-desc,
  .prop-mini-desc {
    font-family: 'Open Sans', sans-serif;
    color: var(--color-hint-text);
    font-weight: 400;
    text-transform: uppercase;
    font-size: 12px;
    line-height: 12px;
    user-select: none;
    color: var(--color-hint-text); }
  .prop-info,
  .prop-mini-info {
    font-family: 'Open Sans', sans-serif;
    font-weight: 400;
    color: var(--color-main-text);
    font-size: 20px;
    line-height: 20px; }

.prop-mini .material-icons {
  line-height: 16px;
  font-size: 16px; }

.prop-mini .prop-info {
  color: var(--color-secondary-text);
  line-height: 16px;
  font-size: 16px; }

.spanner {
  flex: 1; }

.footer-wrapper {
  padding: 40px 0;
  background: var(--color-hl-bg); }

.footer {
  max-width: 720px;
  width: calc(100vw - 160px);
  margin: 0 auto;
  font-size: 14px;
  color: var(--color-secondary-text); }

.list {
  max-width: 720px;
  width: calc(100vw - 160px);
  margin: 0 auto; }
  .list-nav {
    position: sticky;
    top: 20px;
    margin: 30px -30px;
    background-color: var(--color-sheet-bg);
    border-radius: 4px;
    box-shadow: rgba(0, 0, 0, 0.3) 0 2px 6px;
    z-index: 50; }
  .list-entry {
    margin: 30px -30px;
    background-color: var(--color-sheet-bg);
    border-radius: 4px;
    box-shadow: rgba(0, 0, 0, 0.3) 0 2px 6px;
    position: relative; }
    .list-entry-header {
      display: flex;
      align-items: center; }
    .list-entry-name {
      margin: 0;
      flex: 1;
      font-family: "Open Sans", sans-serif; }
    .list-entry-state {
      height: 78px;
      width: 78px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      font-size: 0;
      --state-color: rgb(143, 143, 143); }
      .list-entry-state-success {
        --state-color: rgb(10, 156, 10); }
      .list-entry-state-failed {
        --state-color: rgb(177, 32, 32); }
      .list-entry-state-syncing {
        --state-color: rgb(61, 166, 214); }
      .list-entry-state-syncing {
        animation: blinking 2s ease infinite; }

@keyframes blinking {
  0% {
    opacity: 1; }
  50% {
    opacity: 0.5; }
  100% {
    opacity: 1; } }
      .list-entry-state:after {
        content: '';
        width: 18px;
        height: 18px;
        border-radius: 50%;
        background-color: var(--state-color);
        box-shadow: rgba(0, 0, 0, 0.3) 0 2px 6px inset; }
    .list-entry-update {
      display: flex;
      align-items: center;
      padding: 0 30px;
      color: var(--color-secondary-text); }
      .list-entry-update .material-icons {
        font-size: 32px;
        margin-left: 10px; }
      .list-entry-update-info-abbr {
        font-size: 18px;
        font-weight: bold;
        text-align: right; }
      .list-entry-update-info-full {
        font-size: 12px;
        font-family: 'Courier', monospace; }
    .list-entry-desc {
      padding: 0 30px;
      margin-bottom: 30px;
      font-size: 16px;
      color: var(--color-secondary-text); }
    .list-entry-actions {
      display: flex;
      padding: 20px;
      padding-top: 0; }
    .list-entry-action {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      text-transform: uppercase;
      font-weight: 600;
      font-size: 18px;
      line-height: 24px;
      text-decoration: none;
      padding: 5px 10px;
      filter: grayscale(1);
      transition: filter .2s ease;
      color: #19B5FE;
      cursor: pointer; }
      .list-entry-action:hover {
        filter: none; }
      .list-entry-action .material-icons {
        font-size: 24px;
        line-height: 24px;
        margin-right: 5px; }

.home-nav-entry {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-transform: uppercase;
  font-weight: 600;
  font-size: 18px;
  line-height: 24px;
  text-decoration: none;
  margin-right: 20px;
  filter: grayscale(1);
  transition: filter .2s ease;
  color: var(--color-title);
  cursor: pointer; }
  .home-nav-entry:hover {
    filter: none; }
  .home-nav-entry .material-icons {
    font-size: 24px;
    line-height: 24px;
    margin-right: 5px; }

.tabs {
  display: flex;
  border-right: rgba(0, 0, 0, 0.12) 1px solid;
  padding: 20px 30px 0 30px;
  align-items: center;
  user-select: none; }

.tab {
  height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #19B5FE;
  text-transform: uppercase;
  cursor: pointer;
  filter: grayscale(1);
  transition: filter .2s ease; }
  .tab:hover {
    filter: grayscale(0.5); }
  .tab .material-icons {
    font-size: 18px;
    color: #19B5FE;
    margin-right: 5px; }

.tab-sep {
  color: var(--color-hint-text);
  font-size: 12px;
  margin: 0 10px; }

.tab-stat {
  --state-color: rgb(143, 143, 143);
  display: inline-flex;
  align-items: center;
  line-height: 18px;
  margin: 0 5px;
  color: var(--color-hint-text);
  cursor: pointer; }
  .tab-stat-success {
    --state-color: rgb(10, 156, 10); }
  .tab-stat-failed {
    --state-color: rgb(177, 32, 32); }
  .tab-stat-syncing {
    --state-color: rgb(61, 166, 214); }
  .tab-stat:before {
    content: '';
    display: inline-block;
    height: 18px;
    width: 18px;
    border-radius: 50%;
    margin-right: 10px;
    background-color: var(--state-color); }

.tab-stat-iso {
  display: inline-flex;
  align-items: center;
  line-height: 18px;
  color: var(--color-hint-text);
  cursor: pointer; }
  .tab-stat-iso .material-icons {
    margin-right: 10px; }

.tabs-right {
  position: relative;
  height: 28px;
  display: block; }

.tab-stats,
.tab-iso-stats {
  display: inline-flex;
  align-items: center;
  pointer-events: none;
  opacity: 0;
  position: absolute;
  right: 0;
  top: 0;
  bottom: 0;
  width: auto;
  transition: opacity .2s ease; }

.list-mirrors .tab-stats {
  pointer-events: all;
  opacity: 1; }

.list-downloads .tab-iso-stats {
  pointer-events: all;
  opacity: 1; }

.list-mirrors .tab[data-view="mirrors"] {
  filter: grayscale(0);
  pointer-events: none; }
  .list-mirrors .tab[data-view="mirrors"]:hover {
    filter: grayscale(0); }

.list-downloads .tab[data-view="downloads"] {
  filter: grayscale(0);
  pointer-events: none; }
  .list-downloads .tab[data-view="downloads"]:hover {
    filter: grayscale(0); }

.search {
  position: relative;
  flex: 1;
  height: 64px; }
  .search .material-icons {
    position: absolute;
    height: 64px;
    width: auto;
    left: 0;
    top: 0;
    left: 30px;
    color: var(--color-icons);
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none; }
  .search-inner {
    outline: 0;
    border: 0;
    height: 100%;
    background: transparent;
    color: var(--color-main-text);
    padding: 0;
    padding-left: 64px;
    font-size: 18px;
    width: 100%; }

.list-entry-iso-list {
  padding: 20px 30px; }
  .list-entry-iso-list a {
    display: flex;
    align-items: center;
    text-decoration: none;
    padding: 5px 0px; }
    .list-entry-iso-list a:hover span {
      text-decoration: underline; }
  .list-entry-iso-list .material-icons {
    font-size: 18px;
    margin-right: 10px; }

.list-entry-iso-category {
  width: 78px;
  height: 78px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-icons); }

.home-recent-news {
  position: relative;
  display: block;
  text-decoration: none;
  margin-top: 15px;
  margin-bottom: 10px;
  padding: 20px 60px 20px 30px;
  background: var(--color-recent-news-bg);
  border-radius: 4px; }
  .home-recent-news:before {
    content: '';
    display: block;
    position: absolute;
    background: var(--color-recent-news-bg);
    top: -10px;
    left: 20px;
    width: 20px;
    height: 20px;
    clip-path: polygon(0 0, 0 100%, 100% 0);
    transform: rotate(45deg); }
  .home-recent-news-title {
    color: var(--color-main-text);
    font-size: 20px;
    line-height: 28px; }
  .home-recent-news-time {
    color: var(--color-secondary-text); }

.last-updated {
  font-size: 12px;
  color: var(--color-secondary-text); }

.post-help {
  line-height: 28px; }

.news-list {
  max-width: 720px;
  width: calc(100vw - 160px);
  margin: 0 auto; }

.news-entry {
  padding: 40px;
  margin: 60px -40px;
  border-radius: 4px;
  background-color: var(--color-sheet-bg);
  display: block;
  text-decoration: none;
  color: inherit;
  position: relative; }
  .news-entry-title {
    margin: 0;
    font-size: 28px; }
  .news-entry-summary {
    margin-top: 40px; }
  .news-entry:after {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
    border-radius: 4px;
    box-shadow: rgba(0, 0, 0, 0.3) 0 4px 12px;
    pointer-events: none;
    opacity: .5;
    transition: opacity .2s ease; }
  .news-entry:hover:after {
    opacity: 1; }

.post-news {
  font-size: 16px;
  line-height: 28px; }
  .post-news p {
    margin: 40px 0; }