/*
Filename: videockg.css
Description: The look of srichinmoy.video over the CSS of MediaCMS: the colours of the old site, the emblem, the name of the site and the footer.
Author: SCS
Copyright: Copyright (C) 2026, SCS, all rights reserved.
Created: 2026-11-08 Sun 10:45
Version: 0.1.0
Last-Updated: 2026-11-09 Mon 13:39
Update #: 11
*/

/*
 * The colours of the old site, measured in a browser on 2026-11-07. They
 * are variables of MediaCMS, and our CSS loads after its own, so ours win.
 * The primary colour is an orange, hsl(24, 90%, 45%), in place of the
 * green of MediaCMS. The page, the sidebar, the boxes of the items and the
 * headers of the playlist and profile pages are white. The playlist page
 * is white too: its details, its list of videos, the titles in that list
 * and its icon buttons. The search field is #f2f0f0. The current entry of
 * the sidebar has the background #e6e6e6.
 */
body {
  --default-brand-color: hsl(24, 90%, 45%);
  --default-theme-color: hsl(24, 90%, 45%);
  --body-bg-color: #fff;
  --sidebar-bg-color: #fff;
  --item-bg-color: #fff;
  --playlist-view-header-bg-color: #fff;
  --playlist-view-header-toggle-bg-color: #fff;
  --playlist-view-actions-bg-color: #fff;
  --profile-page-header-bg-color: #fff;
  --playlist-page-bg-color: #fff;
  --playlist-page-details-bg-color: #fff;
  --playlist-page-video-list-bg-color: #fff;
  --playlist-page-video-list-item-title-bg-color: #fff;
  --playlist-page-actions-circle-icon-bg-color: #fff;
  --playlist-page-author-edit-playlist-icon-button-bg-color: #fff;
  --search-field-input-bg-color: #f2f0f0;
  --nav-menu-active-item-bg-color: #e6e6e6;
  --body-text-color: #000;
  --item-title-font-size: 16px;
  --item-title-line-height: 22px;
  font-size: 16px;
  line-height: 24px;
}

/*
 * The font of the site is Source Sans 3, the font of the old site, by
 * decision 54. Our own site serves the file SourceSans3VF-Roman.ttf.woff2.
 * It comes from the vendor copy of PeerTube. Its licence is the SIL Open
 * Font License, in the file SourceSans3-LICENSE.md. The font-weight range
 * 200 to 900 says that one file holds all weights.
 */
@font-face {
  font-family: "Source Sans";
  font-style: normal;
  font-weight: 200 900;
  font-display: swap;
  src: url("SourceSans3VF-Roman.ttf.woff2") format("woff2");
}

/*
 * All text uses this font. MediaCMS names Roboto and Arial in many places,
 * so the rule needs !important. Material Icons and the video player are
 * left out, since their icons are letters of their own fonts.
 */
*:not(.material-icons, .video-js, .video-js *) {
  font-family: "Source Sans", Arial, sans-serif !important;
}

/*
 * The headings are black, as the visible headings of the old site.
 */
h1,
h2,
h3 {
  color: #000;
}

/*
 * These sizes are those of the old site, measured on 2026-11-08. MediaCMS
 * sets its sizes on each element, so each needs a rule. On the body, the
 * variables --item-title-font-size and --item-title-line-height set the
 * size of the video titles on the lists.
 */
.videockg-home h1 {
  font-size: 40px;
  line-height: 48px;
  font-weight: 500;
}

.videockg-home p {
  font-size: 16px;
  line-height: 24px;
}

.media-list-header h2 {
  font-size: 16px;
  font-weight: 600;
}

.item h3,
.item h3 a,
.item .item-title {
  color: #000;
  font-weight: 700;
}

.item-meta,
.item-meta span,
.item-author {
  color: rgb(77, 77, 77);
}

.nav-menu li a,
.nav-menu li button {
  font-size: 16px;
}

.viewer-info .media-title-banner h1 {
  color: #000;
  font-size: 27px;
  font-weight: 600;
  line-height: 32px;
}

.viewer-info .media-content-description,
.viewer-info .media-content-description p {
  color: #000;
  font-size: 16px;
  line-height: 24px;
}

/*
 * The emblem in the top bar is 78 by 56 pixels, at the left, before the
 * name of the site, as the typography rules of the SCS Foundation say.
 * The file is 310 by 224 pixels, so the emblem stays sharp. MediaCMS
 * limits a logo with max-width and max-height. These rules lift both
 * limits.
 */
.page-header .logo img {
  height: 56px;
  max-height: none;
  max-width: none;
  width: 78px;
}

/*
 * The name of the site in the top bar, after the emblem. It is 24 pixels
 * bold, as on the old site. It is Mother Kali red, --kali-red of
 * colours.css. This is the one colour where the site differs from the old
 * site, which shows its name in black. SCS asked for the red on
 * 2026-11-07. contents.html puts the link in the top bar.
 */
.videockg-name {
  color: var(--kali-red);
  font-size: 24px;
  font-weight: 700;
  margin-left: 8px;
  text-decoration: none;
  white-space: nowrap;
}

/*
 * On a screen up to 999 pixels wide the name is hidden. It shows from 1000
 * pixels up. The name video, the middle dot U+00B7 and ckg ends at 277
 * pixels in a window 1100 pixels wide. The search field starts at 30
 * percent of the width of the window. So below about 923 pixels the search
 * field would cover the end of that name. The longer name srichinmoy.video
 * would end at 355 pixels, and it would need the limit of 1199 pixels.
 */
@media (max-width: 999px) {
  .videockg-name {
    display: none;
  }
}

/*
 * The footer lies after the main part of the page. When the sidebar is
 * open, MediaCMS pads the main part on the left by the width of the
 * sidebar. The footer gets the same padding plus 1rem. So its line stays
 * centred in the room beside the sidebar.
 */
.visible-sidebar .videockg-footer {
  padding-left: calc(var(--sidebar-width) + 1rem);
}

/*
 * The links About, Terms and Contact of the sidebar are written into the
 * web client, so CSS hides them. Apache answers 404 for their pages, and
 * the site needs none of them. The link Latest is hidden too, since the
 * home page shows the latest videos.
 */
.nav-item-latest,
.nav-item-about,
.nav-item-terms,
.nav-item-contact {
  display: none;
}

/*
 * Decision 50 shows the account on each video. These rules hide four
 * things that MediaCMS shows with an account. They are the small picture
 * beside the name on the video page, the stock picture of palm trees, the
 * grey figure and the tab About. The pages of an account show the last
 * three. The tab About has only an empty heading Biography.
 */
.media-author-banner .author-banner-thumb,
.profile-banner-wrap,
.profile-page-header .profile-info .profile-info-inner > div:first-child,
.profile-nav li:has(a[href$="/about"]) {
  display: none;
}

/*
 * When the account shows, MediaCMS moves the description of a video 64
 * pixels to the right, to make room for the small picture. It also limits
 * the description to 615 pixels wide. The picture is hidden, so the
 * description starts at the left and uses the full width. On the video
 * page media.css loads after our CSS. So these rules name .viewer-info,
 * to be stronger than its rule.
 *
 * The first rule removes the space at the left of the description. It
 * holds only from 640 pixels up. Below that width MediaCMS keeps its
 * margin of 16 pixels, so that the text does not touch the edge of a
 * phone screen. The second rule holds at every width.
 */
@media screen and (min-width: 640px) {
  .viewer-info .media-info-content .media-author-banner + .media-content-banner {
    padding-left: 0;
  }
}

.viewer-info .media-info-content .media-author-banner + .media-content-banner .media-content-banner-inner {
  max-width: none;
}

/*
 * The box behind the player is clear, so that the page shows white beside
 * a narrow video and not black bars, as decision 38 asks. Black bars that
 * are inside the video file itself stay. This needs a check in the
 * browser.
 */
.viewer-container .player-container,
.viewer-container .video-js,
.viewer-image-container {
  background: transparent;
}

/*
 * The home text, which setup makes from home.md. The template
 * cms/index.html puts it above the list of videos, in this box. The box
 * has 16 pixels above, 24 pixels at both sides and none below.
 */
.videockg-home {
  padding: 16px 24px 0;
}

/*
 * The footer is one line at the foot of every page, centred, in grey
 * #5f5f5f at 0.85rem, below a thin line #e6e6e6. It is the CSS of the
 * footer of sangitadm, another project of SCS. The template
 * components/footer.html writes the line.
 */
.videockg-footer {
  border-top: 1px solid #e6e6e6;
  color: #5f5f5f;
  font-size: 0.85rem;
  padding: 2rem 1rem 3rem;
  text-align: center;
}

/*
 * The list of the language pages. Our template cms/set_language.html puts
 * it in a box of the class videockg-languages, under the choice of
 * MediaCMS on the page Language. The list holds one link for each
 * language page, such as /de-DE. It runs in columns at least 12em wide,
 * so that a phone gets one column and a wide screen gets several. It has
 * no bullets and no padding at the left.
 */
.videockg-languages ul {
  column-width: 12em;
  list-style: none;
  padding: 0;
}