/*
Filename: style.css
Description: The style of srichinmoy.video: the footer, the emblem in the top bar and on the login page.
Author: SCS
Copyright: Copyright (C) 2026, SCS, all rights reserved.
Created: 2026-11-07 Sat 10:03
Version: 0.1.0
Last-Updated: 2026-11-07 Sat 14:12
Update #: 4
*/

/*
The plugin loads this file on every page. See design.org, The style.
*/

/*
The footer that common.js adds: centred, grey, below a thin line. Its CSS
is that of sangitadm, another project of SCS.
*/
footer.videockg-footer {
  text-align: center;
  color: #5f5f5f;
  font-size: 0.85rem;
  padding: 2rem 1rem 3rem;
  border-top: 1px solid #e6e6e6;
}

/*
The emblem in the top bar: 78 by 56 pixels, as on my.ckg.is, at the left,
before the name of the site. PeerTube keeps the uploaded instance logo
only 48 pixels high, and its own CSS draws it 34 pixels high. So the top
bar hides that image and draws the emblem of the plugin, 310 by 224
pixels, which stays sharp. The path holds the version of the plugin, as
the path of the login page does.
*/
my-header .peertube-title .logo {
  display: none;
}

my-header .peertube-title::before {
  background: url("/plugins/videockg/0.1.5/static/images/emblem.png") no-repeat center / contain;
  content: "";
  display: inline-block;
  flex: none;
  height: 56px;
  width: 78px;
}

/*
The emblem above the login form: centred, 155 by 112 pixels, with 24
pixels above it and 12 below it. The top bar of PeerTube stays above the
emblem. So the 24 pixels count from the top of the page body, not of the
window.

The path of the emblem holds the version of the plugin, 0.1.5. A new
version of the plugin must change this path too. The file is
images/emblem.png of the plugin, which package.json serves from the folder
images.
*/
my-login .login-form-and-externals::before {
  background: url("/plugins/videockg/0.1.5/static/images/emblem.png") no-repeat center / contain;
  content: "";
  display: block;
  height: 112px;
  width: 155px;
  margin: 24px auto 12px;
}

/*
The colours of SCS (typography, Colours). PeerTube draws its own parts
with CSS variables, so the plugin sets four of them here. html:root wins
over the palette that PeerTube writes at run time with :root.
--border-primary marks the current tab and the watched part of a
thumbnail: Mother Kali red, the colour of the current item. The active
entry of the left menu is Mother Kali red on white, and so is an entry
under the pointer: no grey background.
*/
html:root.color-palette {
  --border-primary: #C8161E;
  --menu-fg-600: #C8161E;
  --menu-bg-550: #FFFFFF;
  --menu-bg-600: #FFFFFF;
}

/*
Titles are Mother Kali red: the headings, the title of a list of videos,
the labels of the date groups and the names of the videos. PeerTube
scopes its own CSS to each part of the page, which outranks a plain rule,
so these rules and those below use !important.
*/
h1,
h2,
h3,
my-video-filters-header .scope-info,
my-date-group-label,
.video-name {
  color: #C8161E !important;
}

/*
The tab of the current page is Mother Kali red too, as its line.
*/
.parent-container .entry.active {
  color: #C8161E !important;
}

/*
Links in text that people write are link blue: the description of a
video, of a channel and of an account, the about pages, and the pages of
this plugin. Their line is link blue too.
*/
my-video-description a,
.description-html a,
.text-content a,
.custom-markup-container a,
.videockg-page a {
  color: #1A5FB4;
  text-decoration-color: #1A5FB4 !important;
}

/*
Fields stay white, so a thin line marks them. The lists of choices under
More filters are white too.
*/
my-search-typeahead input,
.form-control,
textarea,
.p-multiselect {
  background-color: #FFFFFF !important;
  border: 1px solid #c4c4c4 !important;
}

/*
No mention of PeerTube and of federation on the site (SCS, 2026-11-07).
These rules hide the parts of PeerTube that name it, or link to
joinpeertube.org: the last block of the left menu, the notice of the
login page, the line of the settings on translations, and the tabs and
the pages About PeerTube and Follows. client/common.js renames what is
left.
*/
my-menu .menu-container > div:has(a[href*="joinpeertube.org"]),
my-login my-alert:has(a[href*="joinpeertube.org"]),
my-user-interface-settings .form-group-description > div:has(> a[href*="translation.md"]),
li:has(> a.entry[href="/about/peertube"]),
li:has(> a.entry[href="/about/follows"]),
my-about-peertube,
my-about-follows,
a[href*="joinpeertube.org"] {
  display: none !important;
}