/*
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-08 Sun 18:44
Update #: 5
*/

/*
 * 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;
}

/* The headings are grey, rgb(73, 80, 87), as on the old site. */
h1,
h2,
h3 {
  color: rgb(73, 80, 87);
}

/*
 * 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 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: 20px;
  font-weight: 500;
  margin-left: 8px;
  text-decoration: none;
  white-space: nowrap;
}

/*
 * On a screen up to 1119 pixels wide the name is hidden. The search field
 * starts at 30 percent of the width of the window. The name ends at 325
 * pixels. So below about 1085 pixels the search field would cover the end
 * of the name.
 */
@media (max-width: 1119px) {
  .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.
 */
.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;
}

/*
 * On the login page the emblem is 155 by 112 pixels, centred above the
 * form, with 24 pixels above it and 12 below, as the typography rules of
 * the SCS Foundation say.
 */
.videockg-login-emblem {
  display: block;
  height: 112px;
  margin: 24px auto 12px;
  width: 155px;
}

/*
 * 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;
}