From 73c77618373a46f3ecb680f2efee4783d0de0820 Mon Sep 17 00:00:00 2001 From: Siina Mashek Date: Sat, 15 Jul 2023 21:42:47 +0300 Subject: [PATCH] Updating files for owncast 0.1.1; changing owncast theme --- README.adoc | 6 + custom-page-content.md | 14 +- custom.css | 351 +++++++++++++++++++++++++++++++++-------- 3 files changed, 294 insertions(+), 77 deletions(-) diff --git a/README.adoc b/README.adoc index a9f9fb6..ad3614e 100644 --- a/README.adoc +++ b/README.adoc @@ -4,6 +4,12 @@ Customisations for OwnCast +== owncast colours + +* Action: #1DAD27 +* Action Hover: #7BFA56 +* Primary Button Border: #7BC965 + == custom page content Please ignore how markdown parsers render this file since it is not intended for their parser systems. diff --git a/custom-page-content.md b/custom-page-content.md index f69d5cb..c9ec492 100644 --- a/custom-page-content.md +++ b/custom-page-content.md @@ -10,9 +10,9 @@ Hardware: -* **CPU:** Ryzen 7 3700X @ 4.40GHz -* **GPU:** ASUS ROG Strix OC Radeon RX 580 8GB -* **RAM:** 32GB DDR4 3600 MHz +* **CPU:** Ryzen 5 7600X @ 4.70GHz +* **GPU:** Sapphire Pulse Radeon RX 6700 10GB DDR6 +* **RAM:** 32GB DDR5 6000 MHz * **Keyboard:** HyperX Alloy FPS Pro Mechanical * **Mouse:** ASUS TUF Gaming M3 * **Microphone:** TONOR TC-2030 with arm @@ -22,10 +22,8 @@ Hardware: Software: * **OS:** Gentoo/Linux x86_64 -* **Kernel:** 5.17.0-gentoo -* **Desktop:** Plasma 5.24.3 -* **Mesa:** 22.0.0 -* **Broadcast Software:** OBS Studio 27.2.3 +* **Desktop:** Plasma Wayland +* **Broadcast Software:** OBS Studio
@@ -37,6 +35,6 @@ Software: * 64 GB RAM * 2x512 GB NVMe * 1Gbit/s network connection -* Owncast v0.0.11 +* Owncast v0.1.1
diff --git a/custom.css b/custom.css index 18e5fef..fdf8f65 100644 --- a/custom.css +++ b/custom.css @@ -1,86 +1,299 @@ -:root { - --header-bg-color: #222; - --owncast-purple: #333; -} +/* +Copyright 2023 Le fractal +Permission is hereby granted, free of charge, to any person obtaining a copy +of this software and associated documentation files (the “Software”), to deal +in the Software without restriction, including without limitation the rights +to use, copy, modify, merge, publish, distribute, sublicense, and/or sell +copies of the Software, and to permit persons to whom the Software is furnished +to do so, subject to the following conditions: -#logo-container { - background-size: 2em; - background-image: url("/logo"); -} +The above copyright notice and this permission notice shall be included in all +copies or substantial portions of the Software. -.tab-bar [role="tab"][aria-selected="true"] { - background-color: #888; -} +THE SOFTWARE IS PROVIDED “AS IS”, WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, +INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, +FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS +OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN +AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH +THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE. +*/ + /* Custom theme by Le fractal - https://direct.disquette.top. */ + /* shoutout appreciated! */ + /* Smaller header */ + :root { + --header-height: 50px; + } -.tab-bar [role="tab"]:hover { - background-color: #444; -} + [class^="Sidebar_root"], + [class*=" Sidebar_root"] { + top: calc(var(--header-height) - 1px); + } -.text-indigo-600 { - color: #8b9fc3; -} + /* Add padding to chat */ + [class^="ChatContainer_virtuoso"] > div > div, + [class*=" ChatContainer_virtuoso"] > div > div { + padding-left: 1em; + padding-right: 1em; + } -.text-gray-500 { - color: #666; -} + /* Show user name for each message, inline */ + [class^="ChatUserMessage_repeat"], + [class*=" ChatUserMessage_repeat"], + [class^="ChatUserMessage_user"], + [class*=" ChatUserMessage_user"] { + display: inline-block!important; + margin-right: 3px; + } -.text-gray-700 { - color: #aaa; -} + [class^="ChatUserMessage_user_"]::after, + [class*=" ChatUserMessage_user_"]::after, + [class^="ChatUserMessage_repeat"]::after, + [class*=" ChatUserMessage_repeat"]::after { + content: ": "; + font-weight: normal; + } -.text-gray-800 { - color: #aaa; -} + [class^="ChatUserMessage_userBadges"], + [class*=" ChatUserMessage_userBadges"] { + margin: 0px 0px 0px -4px !important; + float: left; + /* Show badges on left of username */ + } -.bg-gray-300 { - background-color: #222; -} + [class^="ChatUserMessage_message"] p, + [class*=" ChatUserMessage_message"] p { + display: inline; + } -.bg-white { - border-color: #aaa; - background-color: rgba(26,32,44,var(--bg-opacity)); -} + /* Fix spacing between leading message and followups */ + [class^="ChatUserMessage_messagePadding"], + [class*=" ChatUserMessage_messagePadding"] { + padding: 0; + } -/* Browser notify content */ -#modal-content-content div { - background-color: #444; - color: #aaa; -} + /* Remove colorful border on messages */ + [class^="ChatUserMessage_root"], + [class*=" ChatUserMessage_root"], + [class^="ChatUserMessage_ownMessage"], + [class*=" ChatUserMessage_ownMessage"] { + border: none!important; + margin-bottom: 0.3em; + } -/* Requires important because colour set by javascript */ -#notify-button-container button { - background-color: #444 !important; - border-color: #666; -} + /* Colors */ + :root { + --darker-grey: #0B0C0D; + --lighter-grey-2: #29292E; + --lighter-grey: #131516; + --whitish: rgb(239, 239, 241); + } -/* Invert the bell svg colour */ -#notify-button-container .external-action-button img { - filter: invert(100%); -} -/*-- end browser notify content */ + body { + background-color: var(--darker-grey); + } -/* Formatting tech specs for thin vs wide */ -#tech-specs-flex { - display: flex; -} + [class^="Header_header"], + [class*=" Header_header"] { + background-color: var(--darker-grey); + } -.column { - width: 50%; -} + [class^="Content_mobileActionButtons"], + [class*=" Content_mobileActionButtons"] { + color: var(--theme-color-action); + font-weight: bolder; + } -@media (max-width: 960px) { - #tech-specs-flex { - display: initial; - } + #chat-container { + background-color: var(--lighter-grey); + } - .column { - width: 100%; - } -} + [class^="ChatContainer_chatTextField"], + [class*=" ChatContainer_chatTextField"] { + border-top: none; + } + + [class^="ChatTextField_root"], + [class*=" ChatTextField_root"] { + background-color: transparent; + } + + header { + background-color: var(--darker-grey); + } + + [class^="ChatUserMessage_background"], + [class*=" ChatUserMessage_background"] { + background-color: transparent!important; + } + + [class^="DesktopContent_bottomSectionContent"], + [class*=" DesktopContent_bottomSectionContent"] { + background-color: var(--darker-grey); + color: #fff!important; + } + + [class^="ContentHeader_root"], + [class*=" ContentHeader_root"] { + margin-top: 1em; + } + + [class^="ContentHeader_titleSection"], + [class*=" ContentHeader_titleSection"] { + padding: 2em; + border-radius: var(--theme-rounded-corners); + background-color: var(--lighter-grey); + } + + .ant-tabs-tab { + /*background-color: red;*/ + color: var(--theme-color-action); + } + .ant-tabs-tab:hover { + color: var(--whitish); + } + .ant-tabs-tab-active { + /*background-color: lime!important;*/ + background-color: transparent!important; + + } + .ant-tabs-tab.ant-tabs-tab-active .ant-tabs-tab-btn { + color: var(--whitish)!important; + } + + [class^="CustomPageContent_customPageContent"], + [class*=" CustomPageContent_customPageContent"], + [class^="Content_bottomPageContentContainer"], + [class*=" Content_bottomPageContentContainer"] { + background-color: var(--darker-grey); + color: var(--whitish); + } + + [class^="CustomPageContent_customPageContent"] a, + [class*=" CustomPageContent_customPageContent"] a, + [class^="Content_bottomPageContentContainer"] a, + [class*=" Content_bottomPageContentContainer"] a { + filter: saturate(1); + text-decoration: underline; + font-weight: bold; + } + + + [class^="CustomPageContent_customPageContent"] hr, + [class*=" CustomPageContent_customPageContent"] hr { + border-top: 1px solid var(--lighter-grey-2); + } + + [class^="ContentHeader_logoTitleSection"], + [class*=" ContentHeader_logoTitleSection"] { + color: var(--whitish); + } + + [class^="ContentHeader_tagList"] > span, + [class*=" ContentHeader_tagList"] > span { + background-color: #393939; + color: rgb(140, 140, 140); + padding-left: 9px; + border-radius: 20px; + padding-right: 5px; + padding-bottom: 2px; + } + + [class^="Logo_root"], + [class*=" Logo_root"] { + border-color: var(--theme-color-action-hover); + background-color: var(--theme-color-action); + } + + a[class^="SocialLinks_link"], + a[class*=" SocialLinks_link"] { + /*background-color: var(--theme-color-components-primary-button-background);*/ + background-color: var(--whitish); + padding: 5px; + width: 40px; + border-radius: 20px; + } + + [class^="ChatTextField_root"] :empty::before, + [class*=" ChatTextField_root"] :empty::before { + color: var(--theme-color-action); + font-weight: bold; + } + + [class^="ChatTextField_root"], + [class*=" ChatTextField_root"] { + color: var(--whitish); + } + + [class^="ChatTextField_inputWrap"], + [class*=" ChatTextField_inputWrap"] { + background-color: transparent!important; + border: 1px solid var(--theme-color-action); + color: var(--whitish)!important; + } + + [class^="ChatSystemMessage_chatSystemMessage"], + [class*=" ChatSystemMessage_chatSystemMessage"] { + /* + background: var(--theme-color-action); + background: linear-gradient(70deg,var(--theme-color-action),var(--theme-color-action-hover) 40%,var(--theme-color-action) 80%); + */ + background:none; + margin: 5px 5px 10px; + border-radius: 5px; + border-width: 1px; + border-style: solid; + padding: 12px; + } + + /* Followers list */ + [class^="FollowerCollection_followerRow"] > div > a, + [class*=" FollowerCollection_followerRow"] > div > a { + text-decoration: none; + } + [class^="FollowerCollection_followerRow"] > div > a > div, + [class*=" FollowerCollection_followerRow"] > div > a > div { + background-color: transparent; + + } + + [class^="SingleFollower_username"], + [class*=" SingleFollower_username"], + [class^="SingleFollower_account"], + [class*=" SingleFollower_account"] { + color: var(--whitish)!important; + font-weight: normal; + } + + [class^="SingleFollower_account"], + [class*=" SingleFollower_account"] { + /*display: none!important;*/ + } + + [class^="SingleFollower_follower"], + [class*=" SingleFollower_follower"] { + border: none; + border-bottom: 3px solid transparent; + } + [class^="SingleFollower_follower"]:hover, + [class*=" SingleFollower_follower"]:hover { + border: none; + border-bottom: 3px solid var(--theme-color-action); + border-radius: 0 + } + + [class^="FollowerCollection_pagination"] > li > button, + [class*=" FollowerCollection_pagination"] > li > button, + [class^="FollowerCollection_pagination"] > li, + [class*=" FollowerCollection_pagination"] > li { + background-color: var(--lighter-grey-2)!important; + border: none!important; + font-weight: bold!important; + } + + [class^="FollowerCollection_pagination"] > li > button, + [class*=" FollowerCollection_pagination"] > li > button, + [class^="FollowerCollection_pagination"] > li > a, + [class*=" FollowerCollection_pagination"] > li > a { + color: var(--whitish)!important; + } -@media (min-width: 1540px) { - .user-content { - margin: auto; - width: 75%; - } -}