github-mirror/discourse
2
0
Fork 0
mirror of https://github.com/discourse/discourse.git synced 2025-01-18 16:52:45 +08:00
Code Issues Actions 1 Packages Projects Releases Wiki Activity

UX: Make crawler view usable under different color schemes

Browse Source 
- Ensure the set of rendered `<link rel=stylesheet>` tags is consistent
- Add var() references for all crawler-view styles. Basic color definitions are defined first, as a fallback for super old browsers
This commit is contained in:
David Taylor 2022-04-06 17:10:46 +01:00
parent e16f8a5ee6
commit 230e220710
2 changed files with 15 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

17
app/assets/stylesheets/common/base/crawler_layout.scss
View File

@ -1,12 +1,14 @@
// IMPORTANT: This stylesheet needs to work for super old browsers, including those
// without support for `var()`. Therefore every color definition needs to define a simple
// value first, as a fallback
body.crawler {
font-family: serif;
a {
// we want all links to look like links
color: blue !important;
color: var(--tertiary) !important;
text-decoration: underline !important;
&:visited {
color: purple !important;
}
}
> header {
// site header
@ -14,9 +16,11 @@ body.crawler {
width: 100%;
top: 0;
background-color: #fff;
background-color: var(--header_background);
padding: 10px;
box-shadow: none;
border-bottom: 1px solid #eee;
border-bottom: 1px solid var(--header_primary-medium);
}
.header-buttons {
@ -43,6 +47,7 @@ body.crawler {
thead {
border-bottom: 1px solid #ddd;
border-bottom: 1px solid var(--primary_low);
th {
padding: 0 0 0.5em;
}
@ -109,6 +114,7 @@ body.crawler {
.topic-list-item {
border-bottom: 1px solid #eee;
border-bottom: 1px solid var(--primary-low);
> * {
padding: 0.75em 0;
}
@ -149,6 +155,7 @@ body.crawler {
margin-bottom: 2em;
padding-top: 1.5em;
border-top: 1px solid #eee;
border-top: 1px solid var(--primary-low);
}
.crawler-post-meta {
@ -183,6 +190,7 @@ body.crawler {
display: block;
padding: 0.5em 0;
border-top: 1px solid #ddd;
border-top: 1px solid var(--primary-low);
}
}
@ -206,11 +214,13 @@ body.crawler {
blockquote,
aside.quote .title {
background: #eee;
background: var(--primary-low);
}
.md-table {
tr {
border: 1px solid #ddd;
border: 1px solid var(--primary-low);
}
th {
font-weight: bold;
@ -219,6 +229,7 @@ body.crawler {
th {
padding: 0.25em;
border-right: 1px solid #ddd;
border-right: 1px solid var(--primary-low);
}
}

9
app/views/layouts/crawler.html.erb
View File

@ -5,14 +5,7 @@
<title><%= content_for?(:title) ? yield(:title) : SiteSetting.title %></title>
<meta name="description" content="<%= @description_meta || SiteSetting.site_description %>">
<%= render partial: "layouts/head" %>
<%- if rtl? %>
<%= discourse_stylesheet_link_tag(mobile_view? ? :mobile_rtl : :desktop_rtl) %>
<%- else %>
<%= discourse_stylesheet_link_tag(mobile_view? ? :mobile : :desktop) %>
<%- end %>
<%- if theme_id.present? %>
<%= discourse_stylesheet_link_tag(mobile_view? ? :mobile_theme : :desktop_theme) %>
<%- end %>
<%= render partial: "common/discourse_stylesheet" %>
<%= theme_lookup("head_tag") %>
<%= render_google_universal_analytics_code %>
<%= yield :head %>