mirror of
https://github.com/zulip/zulip.git
synced 2025-10-23 04:52:12 +00:00
bd935e07d8
Somehow defaultStyle was not getting applied in all cases, but defaultClass was getting applied in all cases. We don't have time to investigate, but using a class is better anyways, so this change should be fine.
106 lines
3.0 KiB
CSS
106 lines
3.0 KiB
CSS
:root {
|
|
/* Starlight base style headings are huge and distract from reading the text.
|
|
This is OK for some sites, but we are sparing with text and really want to
|
|
encourage users to read it. */
|
|
--sl-text-h1: 2rem;
|
|
--sl-text-h2: 1.4rem;
|
|
--sl-text-h3: 1.2rem;
|
|
--sl-text-h4: 1rem;
|
|
--sl-text-h5: 1rem;
|
|
|
|
/* Changed from 1.2 to 1 */
|
|
--sl-line-height-headings: 1;
|
|
|
|
/* Changed from 1.75 to make text easier to read. */
|
|
--sl-line-height: 1.5;
|
|
}
|
|
|
|
.non-clickable-sidebar-heading {
|
|
font-size: 1.15rem;
|
|
pointer-events: none;
|
|
cursor: default;
|
|
}
|
|
|
|
/* Eliminate the border inserted between the title and the rest of
|
|
the content. */
|
|
.content-panel + .content-panel {
|
|
border-top: 0;
|
|
}
|
|
|
|
/* Decrease padding for the content panel from 1.5rem to 1rem since
|
|
the padding looked too big after removing the content panel border. */
|
|
.content-panel {
|
|
padding: 1rem var(--sl-content-pad-x);
|
|
}
|
|
|
|
.zulip-unplugin-icon {
|
|
/* Make sure the icon does not occupy it's own row. */
|
|
display: inline;
|
|
vertical-align: text-bottom;
|
|
|
|
/* unplugin-icons sets height and width by itself.
|
|
It was setting the height to 1024 and 960 for some
|
|
icons. It is better to set the height explicitly. */
|
|
height: 1em;
|
|
width: 1em;
|
|
|
|
/* Some css rules in starlight insert these margins to tags
|
|
that fit certain criteria, e.g. if it's a first child of
|
|
an li item and similar cases, and the icon disturbs the
|
|
spacing of everything around it just because it was an
|
|
svg tag. We set this explicitly to zero to avoid those
|
|
issues. */
|
|
margin-bottom: 0;
|
|
margin-top: 0;
|
|
}
|
|
|
|
.sl-markdown-content {
|
|
img {
|
|
vertical-align: top;
|
|
box-shadow: 0 0 4px hsl(0deg 0% 0% / 5%);
|
|
border: 1px solid hsl(0deg 0% 87%);
|
|
border-radius: 4px;
|
|
margin-top: 0;
|
|
|
|
&.emoji-small {
|
|
display: inline-block;
|
|
width: 1.25em;
|
|
box-shadow: none;
|
|
border: none;
|
|
vertical-align: text-top;
|
|
}
|
|
|
|
&.emoji-big {
|
|
display: inline-block;
|
|
width: 1.5em;
|
|
box-shadow: none;
|
|
border: none;
|
|
vertical-align: text-top;
|
|
}
|
|
|
|
&.help-center-icon {
|
|
display: inline-block;
|
|
width: 1.25em;
|
|
box-shadow: none;
|
|
border: none;
|
|
vertical-align: text-top;
|
|
}
|
|
}
|
|
|
|
li > ul,
|
|
li > ol {
|
|
margin-top: 0.25rem;
|
|
}
|
|
|
|
& .sl-heading-wrapper:has(> :first-child:target) {
|
|
/* Increase the highlighted space around the text... */
|
|
/* We are trying to recreate `padding: 6px 0 6px 8px` below
|
|
using box-shadow since we don't want padding to affect the
|
|
layout. A spread of 6px will make sure of the 6px part of
|
|
the padding, and -2px will ensure a padding of 8px is
|
|
recreated on the left side. */
|
|
box-shadow: -2px 0 0 6px var(--sl-color-accent-low);
|
|
background-color: var(--sl-color-accent-low);
|
|
}
|
|
}
|