diff --git a/content/styles/cards.css b/content/styles/cards.css new file mode 100644 index 0000000..77ed61d --- /dev/null +++ b/content/styles/cards.css @@ -0,0 +1,67 @@ +/* --- Post list container --- */ +html.rt-card-enabled #siteTable { + display: flex; + flex-direction: column; + align-items: flex-start; + gap: var(--rt-card-gap, 1rem); +} + +html.rt-card-enabled #siteTable > .clearleft { + display: none; +} + +/* --- Card container --- */ +.rt-card { + background: #ffffff; + color: #0a0a0a; + border: 1px solid #e5e5e5; + border-radius: 0.875rem; + padding: 1.5rem; + box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05); + transition: border-color 0.15s; + display: flex; + align-items: flex-start; + gap: 0.75rem; + width: 100%; + overflow: hidden; +} + +.rt-card:hover { + border-color: #d4d4d4; +} + +/* --- Card internal layout overrides --- */ +.rt-card .midcol, +.rt-card .thumbnail { + float: none; + flex-shrink: 0; +} + +.rt-card .entry { + flex: 1; + min-width: 0; +} + +.rt-card .clearleft { + display: none; +} + +/* --- Card dark mode --- */ +.rt-dark .rt-card { + background: #171717; + color: #fafafa; + border-color: rgba(255, 255, 255, 0.1); +} + +.rt-dark .rt-card:hover { + border-color: rgba(255, 255, 255, 0.18); +} + +/* --- Page background override --- */ +html.rt-card-bg-shadcn .content[role="main"] { + background: #f5f5f5; +} + +html.rt-card-bg-shadcn.rt-dark .content[role="main"] { + background: #262626; +} diff --git a/manifest.json b/manifest.json index 4ef1e29..767a1b6 100644 --- a/manifest.json +++ b/manifest.json @@ -16,7 +16,7 @@ "content_scripts": [ { "matches": ["*://old.reddit.com/*", "*://www.reddit.com/*"], - "css": ["content/styles/badges.css"], + "css": ["content/styles/badges.css", "content/styles/cards.css"], "js": [ "lib/settings.js", "content/tweaks/badges.js",