Add core theme variables and service adapters
This commit is contained in:
Bannerets
85
adapters/gitea.css
Normal file
85
adapters/gitea.css
Normal file
@@ -0,0 +1,85 @@
|
|||||||
|
/**
|
||||||
|
* RSP Works - Gitea Theme Adapter
|
||||||
|
* Applies blog theme to Gitea interface
|
||||||
|
*
|
||||||
|
* Deploy to: /opt/gitea/data/gitea/custom/public/css/
|
||||||
|
* Then set CUSTOM_STYLE_URL in app.ini
|
||||||
|
*/
|
||||||
|
|
||||||
|
@import url('../css/core.css');
|
||||||
|
|
||||||
|
/* Base */
|
||||||
|
body {
|
||||||
|
background-color: var(--background) !important;
|
||||||
|
color: var(--text-primary) !important;
|
||||||
|
font-family: var(--font-family) !important;
|
||||||
|
font-size: var(--font-size-base) !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Links */
|
||||||
|
a {
|
||||||
|
color: var(--link-color) !important;
|
||||||
|
}
|
||||||
|
a:hover, a:focus {
|
||||||
|
color: var(--link-hover) !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Top navigation bar */
|
||||||
|
.ui.top.attached.header,
|
||||||
|
.header .ui.menu {
|
||||||
|
background-color: var(--text-secondary) !important;
|
||||||
|
color: white !important;
|
||||||
|
border-color: var(--text-secondary) !important;
|
||||||
|
}
|
||||||
|
.ui.menu .item,
|
||||||
|
.ui.menu a.item {
|
||||||
|
color: white !important;
|
||||||
|
}
|
||||||
|
.ui.menu .item:hover,
|
||||||
|
.ui.menu a.item:hover {
|
||||||
|
background-color: var(--link-hover) !important;
|
||||||
|
color: white !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Buttons */
|
||||||
|
.ui.primary.button {
|
||||||
|
background-color: var(--text-secondary) !important;
|
||||||
|
color: white !important;
|
||||||
|
}
|
||||||
|
.ui.primary.button:hover {
|
||||||
|
background-color: var(--link-hover) !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Repository list */
|
||||||
|
.repository.list .item {
|
||||||
|
border-bottom: 1px solid #ddd !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Code blocks */
|
||||||
|
.code-view .code-inner,
|
||||||
|
.hljs {
|
||||||
|
background-color: var(--background) !important;
|
||||||
|
color: var(--text-primary) !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Headings */
|
||||||
|
h1, h2, h3, h4, h5, h6 {
|
||||||
|
color: var(--text-primary) !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Cards / segments */
|
||||||
|
.ui.segment {
|
||||||
|
background-color: white !important;
|
||||||
|
border-color: #ddd !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Footer */
|
||||||
|
.footer {
|
||||||
|
color: var(--text-secondary) !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Selection */
|
||||||
|
::selection {
|
||||||
|
background: var(--selection-bg);
|
||||||
|
color: var(--selection-text);
|
||||||
|
}
|
||||||
68
adapters/nextcloud.css
Normal file
68
adapters/nextcloud.css
Normal file
@@ -0,0 +1,68 @@
|
|||||||
|
/**
|
||||||
|
* RSP Works - Nextcloud Theme Adapter
|
||||||
|
* Applies blog theme to Nextcloud interface
|
||||||
|
*
|
||||||
|
* Deploy to: Nextcloud container at /var/www/html/themes/custom/
|
||||||
|
*/
|
||||||
|
|
||||||
|
@import url('../css/core.css');
|
||||||
|
|
||||||
|
/* Base */
|
||||||
|
body {
|
||||||
|
background-color: var(--background) !important;
|
||||||
|
color: var(--text-primary) !important;
|
||||||
|
font-family: var(--font-family) !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Top header bar */
|
||||||
|
#header {
|
||||||
|
background-color: var(--text-secondary) !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Links */
|
||||||
|
a {
|
||||||
|
color: var(--link-color) !important;
|
||||||
|
}
|
||||||
|
a:hover, a:focus {
|
||||||
|
color: var(--link-hover) !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Buttons */
|
||||||
|
.button.primary,
|
||||||
|
button.primary,
|
||||||
|
input[type="submit"] {
|
||||||
|
background-color: var(--text-secondary) !important;
|
||||||
|
color: white !important;
|
||||||
|
border-color: var(--text-secondary) !important;
|
||||||
|
}
|
||||||
|
.button.primary:hover,
|
||||||
|
button.primary:hover {
|
||||||
|
background-color: var(--link-hover) !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Sidebar navigation */
|
||||||
|
#app-navigation {
|
||||||
|
background-color: var(--background) !important;
|
||||||
|
}
|
||||||
|
#app-navigation a {
|
||||||
|
color: var(--text-secondary) !important;
|
||||||
|
}
|
||||||
|
#app-navigation a:hover {
|
||||||
|
color: var(--link-hover) !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Main content area */
|
||||||
|
#app-content {
|
||||||
|
background-color: var(--background) !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Headings */
|
||||||
|
h1, h2, h3, h4, h5, h6 {
|
||||||
|
color: var(--text-primary) !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Selection */
|
||||||
|
::selection {
|
||||||
|
background: var(--selection-bg);
|
||||||
|
color: var(--selection-text);
|
||||||
|
}
|
||||||
62
adapters/shlink.css
Normal file
62
adapters/shlink.css
Normal file
@@ -0,0 +1,62 @@
|
|||||||
|
/**
|
||||||
|
* RSP Works - Shlink Theme Adapter
|
||||||
|
* Applies blog theme to Shlink URL shortener
|
||||||
|
*
|
||||||
|
* Note: Shlink is a React app - theming is limited.
|
||||||
|
* This works best injected via Nginx or a browser extension.
|
||||||
|
*
|
||||||
|
* Deploy to: FR1 Nginx config as a location block,
|
||||||
|
* or inject via browser extension on short.rspworks.tech
|
||||||
|
*/
|
||||||
|
|
||||||
|
@import url('../css/core.css');
|
||||||
|
|
||||||
|
/* Base */
|
||||||
|
body {
|
||||||
|
background-color: var(--background) !important;
|
||||||
|
color: var(--text-primary) !important;
|
||||||
|
font-family: var(--font-family) !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Links */
|
||||||
|
a {
|
||||||
|
color: var(--link-color) !important;
|
||||||
|
}
|
||||||
|
a:hover, a:focus {
|
||||||
|
color: var(--link-hover) !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Shlink uses Bootstrap-style classes */
|
||||||
|
.btn-primary {
|
||||||
|
background-color: var(--text-secondary) !important;
|
||||||
|
border-color: var(--text-secondary) !important;
|
||||||
|
color: white !important;
|
||||||
|
}
|
||||||
|
.btn-primary:hover {
|
||||||
|
background-color: var(--link-hover) !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Cards */
|
||||||
|
.card {
|
||||||
|
background-color: white !important;
|
||||||
|
border-color: #ddd !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Navbar */
|
||||||
|
.navbar {
|
||||||
|
background-color: var(--text-secondary) !important;
|
||||||
|
}
|
||||||
|
.navbar a, .navbar .nav-link {
|
||||||
|
color: white !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Headings */
|
||||||
|
h1, h2, h3, h4, h5, h6 {
|
||||||
|
color: var(--text-primary) !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Selection */
|
||||||
|
::selection {
|
||||||
|
background: var(--selection-bg);
|
||||||
|
color: var(--selection-text);
|
||||||
|
}
|
||||||
80
adapters/ttrss.css
Normal file
80
adapters/ttrss.css
Normal file
@@ -0,0 +1,80 @@
|
|||||||
|
/**
|
||||||
|
* RSP Works - TT-RSS Theme Adapter
|
||||||
|
* Applies blog theme to Tiny Tiny RSS
|
||||||
|
*
|
||||||
|
* Deploy to: /var/www/tt-rss/themes/custom/ on FR1
|
||||||
|
* Or paste into TT-RSS Preferences > Interface > Custom CSS
|
||||||
|
*/
|
||||||
|
|
||||||
|
@import url('../css/core.css');
|
||||||
|
|
||||||
|
/* Base */
|
||||||
|
body {
|
||||||
|
background-color: var(--background) !important;
|
||||||
|
color: var(--text-primary) !important;
|
||||||
|
font-family: var(--font-family) !important;
|
||||||
|
font-size: var(--font-size-base) !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Links */
|
||||||
|
a {
|
||||||
|
color: var(--link-color) !important;
|
||||||
|
}
|
||||||
|
a:hover, a:focus {
|
||||||
|
color: var(--link-hover) !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Toolbar */
|
||||||
|
#toolbar {
|
||||||
|
background-color: var(--text-secondary) !important;
|
||||||
|
color: white !important;
|
||||||
|
}
|
||||||
|
#toolbar a {
|
||||||
|
color: white !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Feed list / headlines */
|
||||||
|
#headlines-frame {
|
||||||
|
background-color: var(--background) !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Headline items */
|
||||||
|
.hl {
|
||||||
|
border-bottom: 1px solid #ddd !important;
|
||||||
|
color: var(--text-primary) !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Selected headline */
|
||||||
|
.hl.Selected {
|
||||||
|
background-color: var(--text-secondary) !important;
|
||||||
|
color: white !important;
|
||||||
|
}
|
||||||
|
.hl.Selected a {
|
||||||
|
color: white !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Read vs unread */
|
||||||
|
.hl.read {
|
||||||
|
color: var(--text-secondary) !important;
|
||||||
|
}
|
||||||
|
.hl.unread {
|
||||||
|
color: var(--text-primary) !important;
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Article view */
|
||||||
|
#content-frame {
|
||||||
|
background-color: white !important;
|
||||||
|
color: var(--text-primary) !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Headings */
|
||||||
|
h1, h2, h3, h4, h5, h6 {
|
||||||
|
color: var(--text-primary) !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Selection */
|
||||||
|
::selection {
|
||||||
|
background: var(--selection-bg);
|
||||||
|
color: var(--selection-text);
|
||||||
|
}
|
||||||
54
css/core.css
Normal file
54
css/core.css
Normal file
@@ -0,0 +1,54 @@
|
|||||||
|
/**
|
||||||
|
* RSP Works - Core Theme Variables
|
||||||
|
* Extracted from css/style.css
|
||||||
|
* Single source of truth for all service theming
|
||||||
|
*
|
||||||
|
* Usage: @import url('../css/core.css');
|
||||||
|
*/
|
||||||
|
|
||||||
|
:root {
|
||||||
|
/* Background */
|
||||||
|
--background: #f6f6e3;
|
||||||
|
|
||||||
|
/* Text */
|
||||||
|
--text-primary: black;
|
||||||
|
--text-secondary: #565;
|
||||||
|
--text-tertiary: #444;
|
||||||
|
--text-accent: #232;
|
||||||
|
|
||||||
|
/* Links */
|
||||||
|
--link-color: #565;
|
||||||
|
--link-hover: black;
|
||||||
|
|
||||||
|
/* Selection */
|
||||||
|
--selection-bg: #898;
|
||||||
|
--selection-text: white;
|
||||||
|
|
||||||
|
/* Typography */
|
||||||
|
--font-family: serif;
|
||||||
|
--font-size-base: 12pt;
|
||||||
|
--line-height: 1.5em;
|
||||||
|
|
||||||
|
/* Layout */
|
||||||
|
--max-width: 70em;
|
||||||
|
--padding-desktop: 2em 4em;
|
||||||
|
--padding-tablet: 1em 2em;
|
||||||
|
--padding-mobile: 1em 1em;
|
||||||
|
|
||||||
|
/* Breakpoints (for reference) */
|
||||||
|
--break-tablet: 720px;
|
||||||
|
--break-mobile: 53em;
|
||||||
|
|
||||||
|
/* Spacing */
|
||||||
|
--spacing-xs: 0.3em;
|
||||||
|
--spacing-sm: 0.5em;
|
||||||
|
--spacing-md: 1em;
|
||||||
|
--spacing-lg: 2em;
|
||||||
|
--spacing-xl: 4em;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Selection highlight */
|
||||||
|
::selection {
|
||||||
|
background: var(--selection-bg);
|
||||||
|
color: var(--selection-text);
|
||||||
|
}
|
||||||
Reference in New Issue
Block a user