mirror of
https://gh.wpcy.net/https://github.com/discourse/discourse.git
synced 2026-06-19 04:25:50 +08:00
bdf62746b5
Tighten the AI share page visuals with updated page background, borders, spacing, and typography. Also add table and heading styles so shared content reads more cleanly across light and dark themes. examples: <img width="1168" height="1065" alt="image" src="https://github.com/user-attachments/assets/d58327da-0df5-48f6-8e1b-ee424b323578" /> <img width="1121" height="1337" alt="image" src="https://github.com/user-attachments/assets/b8120655-61bb-46a9-a46b-e161e7063ba4" />
698 lines
13 KiB
CSS
Vendored
698 lines
13 KiB
CSS
Vendored
:root {
|
|
--shadow-header: 0 2px 30px -1px rgba(0, 0, 0, 0.05);
|
|
--shadow-content: 0 12px 32px -28px rgba(0, 0, 0, 0.35);
|
|
|
|
--primary: #333;
|
|
--primary-50: #f7f8fa;
|
|
--primary-100: #eff2f5;
|
|
--primary-200: #e4e9ee;
|
|
--primary-300: #c9d2dd;
|
|
--primary-400: #aebccb;
|
|
--primary-500: #93a5ba;
|
|
--primary-600: #778fa9;
|
|
--primary-700: #5b7490;
|
|
--primary-800: #4e627a;
|
|
--primary-900: #344252;
|
|
|
|
--secondary: #fff;
|
|
--page-background: #fbfcfd;
|
|
|
|
--tertiary: #08c;
|
|
|
|
/* colors from the default dark discourse color scheme */
|
|
@media (prefers-color-scheme: dark) {
|
|
--primary: #dddddd;
|
|
--primary-50: #282828;
|
|
--primary-100: #2c2c2c;
|
|
--primary-200: #313131;
|
|
--primary-300: #585858;
|
|
--primary-400: #7a7a7a;
|
|
--primary-500: #858585;
|
|
--primary-600: #909090;
|
|
--primary-700: #9b9b9b;
|
|
--primary-800: #a6a6a6;
|
|
--primary-900: #c7c7c7;
|
|
|
|
--secondary: #222222;
|
|
--page-background: #242424;
|
|
|
|
--tertiary: #099dd7;
|
|
}
|
|
|
|
--border-radius-large: 1em;
|
|
--border-radius-small: 0.33em;
|
|
|
|
--font-up-6: 2.296em;
|
|
--font-up-5: 2em;
|
|
--font-up-4: 1.7511em;
|
|
--font-up-3: 1.5157em;
|
|
--font-up-2: 1.3195em;
|
|
--font-up-1: 1.1487em;
|
|
--font-0: 1em;
|
|
--font-down-1: 0.8706em;
|
|
--font-down-2: 0.7579em;
|
|
--font-down-3: 0.6599em;
|
|
--font-down-4: 0.5745em;
|
|
--font-down-5: 0.5em;
|
|
--font-down-6: 0.4355em;
|
|
}
|
|
|
|
* { /* reset */
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
body {
|
|
font-family: Söhne, ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, Noto Sans, sans-serif, Helvetica Neue, Arial, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji;
|
|
margin: 0;
|
|
font-size: 1.125em; /* root scale */
|
|
line-height: 1.8;
|
|
color: var(--primary);
|
|
background: var(--page-background);
|
|
}
|
|
|
|
.site-header {
|
|
display: grid;
|
|
grid-template-columns: 1fr auto 1fr;
|
|
grid-template-areas: "logo site llm";
|
|
position: sticky;
|
|
top: 0;
|
|
padding: 0 1em;
|
|
align-items: center;
|
|
background-color: var(--secondary);
|
|
box-shadow: var(--shadow-header);
|
|
z-index: 2;
|
|
@media screen and (max-width: 768px) {
|
|
grid-template-areas: "logo site" "logo llm";
|
|
font-size: var(--font-down-1);
|
|
padding-bottom: 0.25em;
|
|
gap: 0 1em;
|
|
align-items: start;
|
|
grid-template-columns: auto 1fr;
|
|
grid-template-rows: auto 1fr;
|
|
}
|
|
@media screen and (max-width: 500px) {
|
|
position: relative;
|
|
grid-template-areas: "logo" "site" "llm";
|
|
}
|
|
}
|
|
|
|
.ai-logo {
|
|
grid-area: logo
|
|
}
|
|
|
|
.ai-logo .logo {
|
|
height: 3.75em;
|
|
width: auto;
|
|
padding: 0.5em 0;
|
|
@media screen and (max-width: 768px) {
|
|
padding-bottom: 0;
|
|
max-width: 180px;
|
|
}
|
|
}
|
|
|
|
@media (prefers-color-scheme: dark) {
|
|
.d-logo-black {
|
|
fill: var(--primary);
|
|
}
|
|
}
|
|
|
|
@media (prefers-reduced-motion: no-preference) {
|
|
.ai-logo:hover #d-sparkles {
|
|
animation: d-rainbow-sparkles 1.5s forwards ease-in-out;
|
|
}
|
|
}
|
|
|
|
@keyframes d-rainbow-sparkles {
|
|
|
|
0% {
|
|
fill: #f15d22;
|
|
}
|
|
33% {
|
|
fill: #fff9ae;
|
|
}
|
|
66% {
|
|
fill: #00a94f;
|
|
}
|
|
100% {
|
|
fill: #00aeef;
|
|
}
|
|
}
|
|
|
|
.site-title {
|
|
grid-area: site;
|
|
font-size: var(--font-up-2);
|
|
color: var(--primary);
|
|
padding: 0 1em;
|
|
transition: color 0.25s ease-in-out;
|
|
text-decoration: none;
|
|
text-align: center;
|
|
white-space: nowrap;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
font-weight: bold;
|
|
@media screen and (max-width: 768px) {
|
|
margin-top: 0.8em;
|
|
line-height: 1.2;
|
|
text-align: right;
|
|
padding: 0;
|
|
}
|
|
@media screen and (max-width: 500px) {
|
|
font-size: var(--font-up-3);
|
|
text-align: left;
|
|
margin-top: 0;
|
|
}
|
|
}
|
|
|
|
.llm-name {
|
|
grid-area: llm;
|
|
font-size: var(--font-down-1);
|
|
padding: 0.5em 1em;
|
|
text-decoration: none;
|
|
text-align: right;
|
|
line-height: 1.2;
|
|
color: var(--primary-600);
|
|
@media screen and (max-width: 768px) {
|
|
padding: 0;
|
|
}
|
|
@media screen and (max-width: 500px) {
|
|
text-align: left;
|
|
margin-top: 0;
|
|
margin-bottom: 1.25em;
|
|
}
|
|
}
|
|
|
|
section {
|
|
max-width: 900px;
|
|
margin: 4em auto 8em;
|
|
background-color: var(--secondary);
|
|
border: 1px solid var(--primary-200);
|
|
border-radius: var(--border-radius-large);
|
|
box-shadow: var(--shadow-content);
|
|
@media screen and (max-width: 768px) {
|
|
margin-top: 0;
|
|
border: 0;
|
|
border-radius: 0;
|
|
margin-bottom: 0;
|
|
box-shadow: none;
|
|
}
|
|
}
|
|
|
|
.page-header {
|
|
text-align: center;
|
|
line-height: 1.2;
|
|
padding: 3em 2.5em;
|
|
@media screen and (max-width: 768px) {
|
|
padding: 2em 1em;
|
|
text-align: left;
|
|
}
|
|
@media screen and (max-width: 500px) {
|
|
padding: 1em;
|
|
}
|
|
}
|
|
|
|
.page-header h1 {
|
|
margin: 0;
|
|
font-size: var(--font-up-5);
|
|
font-weight: normal;
|
|
@media screen and (max-width: 768px) {
|
|
font-size: var(--font-up-3);
|
|
}
|
|
}
|
|
|
|
.page-header time {
|
|
display: block;
|
|
color: var(--primary-500);
|
|
margin-top: 0.5em;
|
|
@media screen and (max-width: 768px) {
|
|
font-size: var(--font-down-1);
|
|
}
|
|
}
|
|
|
|
article.post {
|
|
border-top: 1px solid var(--primary-200);
|
|
transition: border-color 0.25s ease-in-out;
|
|
}
|
|
|
|
@media screen and (min-width: 769px) {
|
|
article.post:hover {
|
|
border-top-color: var(--primary-300);
|
|
}
|
|
}
|
|
|
|
pre, code {
|
|
font-family: Consolas, Menlo, Monaco, "Lucida Console", "Liberation Mono", "DejaVu Sans Mono", "Bitstream Vera Sans Mono", "Courier New", monospace;
|
|
font-size: var(--font-down-1);
|
|
background-color: var(--primary-50);
|
|
font-size: inherit;
|
|
padding: 0;
|
|
background-color: transparent;
|
|
}
|
|
|
|
pre {
|
|
border-radius: var(--border-radius-small);
|
|
overflow-x: auto;
|
|
}
|
|
|
|
code {
|
|
padding: 0.2em 0.4em;
|
|
border-radius: var(--border-radius-small);
|
|
background: var(--primary-50);
|
|
}
|
|
|
|
code.hljs {
|
|
background-color: var(--primary-50);
|
|
|
|
}
|
|
|
|
h1 h2 h3 h4 h5 h6 {
|
|
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
|
|
margin-bottom: 0.5em;
|
|
}
|
|
|
|
.post {
|
|
padding: 1.75em 3em;
|
|
@media screen and (max-width: 768px) {
|
|
padding: 1em;
|
|
}
|
|
}
|
|
|
|
.post__header {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
align-items: baseline;
|
|
justify-content: start;
|
|
margin-bottom: 0.75em;
|
|
gap: 0 0.5em;
|
|
color: var(--primary-600);
|
|
font-size: var(--font-down-1);
|
|
line-height: 1.3;
|
|
}
|
|
|
|
.post__user {
|
|
font-weight: 700;
|
|
color: var(--primary-900);
|
|
}
|
|
|
|
.post__date, .post__agent {
|
|
font-size: var(--font-down-1);
|
|
}
|
|
|
|
.post__agent {
|
|
color: var(--primary-600);
|
|
}
|
|
|
|
.post__content {
|
|
line-height: 1.6;
|
|
color: var(--primary);
|
|
overflow: hidden;
|
|
}
|
|
|
|
.post__content img {
|
|
max-width: 100%;
|
|
}
|
|
|
|
.post__content h1,
|
|
.post__content h2,
|
|
.post__content h3,
|
|
.post__content h4,
|
|
.post__content h5,
|
|
.post__content h6 {
|
|
margin: 1.4em 0 0.6em;
|
|
line-height: 1.25;
|
|
color: var(--primary);
|
|
}
|
|
|
|
.post__content > :first-child {
|
|
margin-top: 0;
|
|
}
|
|
|
|
.post__content > :last-child {
|
|
margin-bottom: 0;
|
|
}
|
|
|
|
.post__content .md-table {
|
|
overflow-x: auto;
|
|
margin: 1em 0;
|
|
}
|
|
|
|
.post__content table {
|
|
border-collapse: collapse;
|
|
border-spacing: 0;
|
|
line-height: 1.5;
|
|
color: var(--primary);
|
|
font-variant-numeric: tabular-nums;
|
|
}
|
|
|
|
.post__content th,
|
|
.post__content td {
|
|
padding: 0.4em 0.75em 0.4em 0;
|
|
text-align: left;
|
|
vertical-align: top;
|
|
}
|
|
|
|
.post__content th {
|
|
padding-bottom: 0.35em;
|
|
border-bottom: 2px solid var(--primary-300);
|
|
color: var(--primary-900);
|
|
font-weight: 700;
|
|
}
|
|
|
|
.post__content td {
|
|
border-bottom: 1px solid var(--primary-200);
|
|
}
|
|
|
|
@media screen and (max-width: 500px) {
|
|
.post__content th,
|
|
.post__content td {
|
|
padding: 0.35em 0.6em 0.35em 0;
|
|
}
|
|
}
|
|
|
|
.post__content tbody tr:last-child td {
|
|
border-bottom: 0;
|
|
}
|
|
|
|
.post__content p:first-child {
|
|
margin-top: 0;
|
|
}
|
|
|
|
.post__content p:last-child {
|
|
margin-bottom: 0.4em;
|
|
}
|
|
|
|
.post__content blockquote p:last-child {
|
|
margin-bottom: 0;
|
|
}
|
|
|
|
.post__date {
|
|
color: var(--primary-500);
|
|
margin-left: auto;
|
|
display: none; /* hiding for now */
|
|
}
|
|
|
|
summary {
|
|
padding: 1em;
|
|
border-radius: var(--border-radius-small);
|
|
cursor: pointer;
|
|
color: var(--tertiary);
|
|
outline: none;
|
|
}
|
|
|
|
summary:hover {
|
|
background-color: var(--primary-100);
|
|
}
|
|
|
|
details {
|
|
background-color: var(--primary-50);
|
|
border-radius: var(--border-radius-small);
|
|
transition: background-color 0.3s ease;
|
|
padding: 0.5em;
|
|
}
|
|
|
|
details[open] {
|
|
padding-bottom: 0.75em;
|
|
}
|
|
|
|
details > *:not(summary) {
|
|
padding: 0 1em;
|
|
}
|
|
|
|
.post__content details p:last-child {
|
|
margin-bottom: 0;
|
|
}
|
|
|
|
details p {
|
|
margin-top: 10px;
|
|
color: var(--primary-800);
|
|
}
|
|
|
|
details[open] summary {
|
|
color: var(--tertiary);
|
|
border-radius: var(--border-radius-small) var(--border-radius-small) 0 0;
|
|
}
|
|
|
|
a {
|
|
text-decoration: none;
|
|
color: var(--tertiary);
|
|
transition: color 0.25s ease-in-out;
|
|
}
|
|
|
|
a:hover {
|
|
color: var(--tertiary);
|
|
text-decoration: underline;
|
|
}
|
|
|
|
ol {
|
|
list-style-type: decimal;
|
|
}
|
|
|
|
ul {
|
|
list-style-type: disc;
|
|
}
|
|
|
|
@media screen and (max-width: 500px) {
|
|
ol, ul {
|
|
padding-left: 1.33em;
|
|
}
|
|
}
|
|
|
|
li {
|
|
margin-bottom: 0.75em;
|
|
line-height: 1.6;
|
|
}
|
|
|
|
li:last-child {
|
|
margin-bottom: 0;
|
|
}
|
|
|
|
li, p {
|
|
overflow-wrap: break-word;
|
|
word-wrap: break-word;
|
|
word-break: break-word;
|
|
}
|
|
|
|
.lightbox-wrapper img {
|
|
width: auto;
|
|
height: auto;
|
|
}
|
|
|
|
aside .title,
|
|
blockquote {
|
|
background-color: var(--primary-50);
|
|
border-left: 6px solid var(--primary-200);
|
|
padding: 0.5em 1em;
|
|
margin: 1em 0;
|
|
}
|
|
|
|
aside .title + blockquote {
|
|
margin-top: 0;
|
|
}
|
|
|
|
aside .title {
|
|
margin: 0;
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
|
|
aside .title .avatar {
|
|
border-radius: 100%;
|
|
margin-right: 0.5em;
|
|
}
|
|
|
|
.lightbox-wrapper .meta .filename,
|
|
.lightbox-wrapper .meta svg,
|
|
.lightbox-wrapper .meta .informations {
|
|
display: none;
|
|
}
|
|
|
|
.lightbox-wrapper .meta .filename {
|
|
overflow-wrap: anywhere;
|
|
}
|
|
|
|
/*
|
|
custom code highlighting for dark mode support...
|
|
overrides highlightjs (https://highlightjs.org/) CSS colors.
|
|
*/
|
|
|
|
.hljs{
|
|
--hljs-red: #c63c1b;
|
|
--hljs-salmon: #ec8972;
|
|
--hljs-lime: #4dff4d;
|
|
--hljs-green: #090;
|
|
--hljs-sky: #47c2ff;
|
|
|
|
@media (prefers-color-scheme: dark) {
|
|
--hljs-red: #af3719;
|
|
--hljs-salmon: #c7705c;
|
|
--hljs-lime: #3fcf3f;
|
|
--hljs-green: #048504;
|
|
--hljs-sky: #379ccf;
|
|
}
|
|
|
|
--hljs-blue: var(--tertiary); /* already has a dark variant at root */
|
|
|
|
background:var(--primary-50);
|
|
color:var(--primary);
|
|
}
|
|
|
|
pre code.hljs{
|
|
display:block;
|
|
overflow-x:auto;
|
|
padding:1em
|
|
}
|
|
|
|
code.hljs{
|
|
padding:3px 5px
|
|
}
|
|
|
|
.hljs-attribute,.hljs-doctag,.hljs-keyword,.hljs-meta .hljs-keyword,.hljs-name,.hljs-selector-tag{
|
|
font-weight:700
|
|
}
|
|
|
|
.hljs-emphasis{
|
|
font-style:italic
|
|
}
|
|
.hljs-strong{
|
|
font-weight:700
|
|
}
|
|
|
|
.hljs-comment{
|
|
color: var(--hljs-comment);
|
|
}
|
|
|
|
.hljs-punctuation,.hljs-tag{
|
|
color:var(--primary-900);
|
|
}
|
|
|
|
.hljs-tag .hljs-attr,.hljs-tag .hljs-name{
|
|
color:var(--primary-900);
|
|
}
|
|
|
|
.hljs-deletion,.hljs-number,.hljs-quote,.hljs-selector-class,.hljs-selector-id,.hljs-string,.hljs-template-tag,.hljs-type{
|
|
color: var(--hljs-red);
|
|
}
|
|
|
|
.hljs-section,.hljs-title{
|
|
color: var(--hljs-red);
|
|
font-weight:700
|
|
}
|
|
|
|
.hljs-link,.hljs-operator,.hljs-regexp,.hljs-selector-attr,.hljs-selector-pseudo,.hljs-symbol,.hljs-template-variable,.hljs-variable{
|
|
color:var(--hljs-salmon);
|
|
}
|
|
|
|
.hljs-literal{
|
|
color: var(--hljs-lime);
|
|
}
|
|
|
|
.hljs-addition,.hljs-built_in,.hljs-bullet,.hljs-code{
|
|
color:var(--hljs-green);
|
|
}
|
|
|
|
.hljs-meta{
|
|
color:var(--hljs-blue);
|
|
}
|
|
|
|
.hljs-meta .hljs-string{
|
|
color:var(--hljs-sky);
|
|
}
|
|
|
|
aside.onebox {
|
|
border: 4px solid var(--primary-200);
|
|
padding: 1em;
|
|
font-size: 0.9em;
|
|
}
|
|
|
|
aside.onebox .source {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 0.5em;
|
|
font-size: 0.9em;
|
|
line-height: 1;
|
|
margin-bottom: 1em;
|
|
}
|
|
|
|
aside.onebox .source a {
|
|
color: var(--primary-700);
|
|
}
|
|
|
|
aside.onebox .site-icon {
|
|
width: 1em;
|
|
height: 1em;
|
|
}
|
|
|
|
.onebox-body {
|
|
display: grid;
|
|
grid-template-areas: "avatar title" "avatar body";
|
|
grid-template-columns: auto 1fr;
|
|
grid-template-rows: auto 1fr;
|
|
align-items: start;
|
|
}
|
|
|
|
aside.onebox h3 {
|
|
margin: 0 0 0.25em 0;
|
|
grid-area: title;
|
|
}
|
|
|
|
.onebox-avatar {
|
|
width: 5.5em;
|
|
height: auto;
|
|
grid-area: avatar;
|
|
margin: .5em 1.5em 0 0;
|
|
object-fit: cover;
|
|
}
|
|
|
|
.onebox-body p {
|
|
grid-area: body;
|
|
margin-top: 0.5em;
|
|
font-size: 0.95em;
|
|
}
|
|
|
|
.lazy-video-container {
|
|
position: relative;
|
|
}
|
|
|
|
.lazy-video-container a {
|
|
display: block;
|
|
width: 100%;
|
|
}
|
|
|
|
.lazy-video-container img {
|
|
width: 100%;
|
|
object-fit: cover;
|
|
}
|
|
|
|
.lazy-video-container:hover:before{
|
|
opacity: 1;
|
|
}
|
|
|
|
.lazy-video-container:before {
|
|
/* video play button */
|
|
content:"";
|
|
position: absolute;
|
|
display: block;
|
|
background-size: contain;
|
|
background-repeat: no-repeat;
|
|
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 384 512'%3E%3C!--!Font Awesome Free 6.5.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--%3E%3Cpath d='M73 39c-14.8-9.1-33.4-9.4-48.5-.9S0 62.6 0 80V432c0 17.4 9.4 33.4 24.5 41.9s33.7 8.1 48.5-.9L361 297c14.3-8.7 23-24.2 23-41s-8.7-32.2-23-41L73 39z' fill='white' /%3E%3C/svg%3E");
|
|
z-index: 2;
|
|
width: 5em;
|
|
height: 6.25em;
|
|
left: 0;
|
|
right: 0;
|
|
top: 32%;
|
|
pointer-events: none;
|
|
margin-left: auto;
|
|
margin-right: auto;
|
|
opacity: 0.85;
|
|
transition: opacity 0.25s ease-in-out;
|
|
}
|
|
|
|
.ai-artifact iframe {
|
|
height: 600px;
|
|
max-height: 600px;
|
|
}
|
|
|
|
.ai-artifact-controls {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
}
|
