export const richEditorFlyoutClasses = useThemeCache(() => {
const vars = richEditorVariables();
const style = styleFactory("richEditorFlyout");
const shadows = shadowHelper();
const globalVars = globalVariables();
const root = style({
...shadows.dropDown(),
position: "absolute",
left: 0,
width: unit( vars.richEditorWidth + vars.emojiBody.padding.horizontal * 2),
zIndex: 6,
overflow: "hidden",
backgroundColor: colorOut(vars.colors.bg),
...borders(),
$nest: {
"&& .ReactVirtualized__Grid": {
width: important(unit(vars.richEditorWidth) as string),
},
},
});
const header = style("header", {
position: "relative",
borderBottom: singleBorder(),
...paddings(vars.emojiHeader.padding),
});
const title = style("title", {
display: "flex",
alignItems: "center",
...longWordEllipsis(),
margin: 0,
maxWidth: calc(`100% - ${unit(vars.menuButton.size)}`),
minHeight: vars.menuButton.size - vars.emojiBody.padding.horizontal,
fontSize: percent(100),
lineHeight: "inherit",
color: colorOut(globalVars.mainColors.fg),
$nest: {
"&:focus": {
outline: 0,
},
},
});
const body = style("body", {
...paddings(vars.emojiBody.padding),
width: unit( vars.richEditorWidth + vars.emojiBody.padding.horizontal * 2),
});
const footer = style("footer", {
borderTop: singleBorder(),
});
return { root, header, body, footer, title };
});
export const subcommunityTileClasses = useThemeCache(() => {
const vars = subcommunityTileVariables();
const globalVars = globalVariables();
const debug = debugHelper("subcommunityTile");
const shadow = shadowHelper();
const root = style({
display: "flex",
flexDirection: "column",
alignItems: "stretch",
width: percent(100),
padding: unit(vars.spacing.default),
...userSelect(),
flexGrow: 1,
...debug.name(),
});
const link = style({
...defaultTransition("box-shadow", "border"),
...paddings(vars.link.padding),
display: "block",
position: "relative",
cursor: "pointer",
flexGrow: 1,
color: vars.link.fg.toString(),
backgroundColor: colorOut(vars.link.bg),
borderRadius: unit(2),
minHeight: unit(vars.link.minHeight),
...shadowOrBorderBasedOnLightness(
globalVars.body.backgroundImage.color,
borders({
color: vars.link.fg.fade(0.3),
}),
shadow.embed(),
),
$nest: {
"&:hover": {
...shadowOrBorderBasedOnLightness(
globalVars.body.backgroundImage.color,
borders({
color: vars.link.fg.fade(0.5),
}),
shadow.embedHover(),
),
},
},
...debug.name("link"),
});
const main = style({
position: "relative",
...debug.name("main"),
});
const frame = style({
display: "flex",
alignItems: "center",
justifyContent: "center",
position: "relative",
height: unit(vars.frame.height),
width: unit(vars.frame.width),
marginTop: "auto",
marginRight: "auto",
marginLeft: "auto",
marginBottom: unit(vars.frame.bottomMargin),
...debug.name("iconFrame"),
});
const icon = style({
display: "block",
position: "absolute",
top: 0,
right: 0,
bottom: 0,
left: 0,
margin: "auto",
height: "auto",
maxWidth: percent(100),
maxHeight: percent(100),
...debug.name("icon"),
});
const title = style({
fontSize: unit(vars.title.fontSize),
lineHeight: vars.title.lineHeight,
textAlign: "center",
marginBottom: unit(vars.title.marginBottom),
...debug.name("title"),
});
const description = style({
position: "relative",
marginTop: unit(vars.description.marginTop),
fontSize: unit(vars.description.fontSize),
lineHeight: vars.description.lineHeight,
textAlign: "center",
...debug.name("description"),
});
const fallBackIcon = style({
...absolutePosition.middleOfParent(),
width: unit(vars.fallBackIcon.width),
height: unit(vars.fallBackIcon.height),
color: vars.fallBackIcon.fg.toString(),
...debug.name("fallbackicon"),
});
return { root, link, frame, icon, main, title, description, fallBackIcon };
});
export const dropDownClasses = useThemeCache(() => {
const vars = dropDownVariables();
const globalVars = globalVariables();
const style = styleFactory("dropDown");
const shadows = shadowHelper();
const mediaQueries = layoutVariables().mediaQueries();
const root = style({
position: "relative",
});
const contents = style("contents", {
position: "absolute",
minWidth: unit(vars.sizing.width),
backgroundColor: colorOut(vars.contents.bg),
color: colorOut(vars.contents.fg),
overflow: "auto",
...shadowOrBorderBasedOnLightness(vars.contents.bg, borders({}), shadows.dropDown()),
...borders(vars.contents.border),
zIndex: 3,
$nest: {
"&.isParentWidth": {
minWidth: "initial",
},
"&.isOwnWidth": {
width: "initial",
},
"&.isRightAligned": {
right: 0,
top: 0,
},
"& .frame": {
boxShadow: "none",
},
"&.noMinWidth": {
minWidth: 0,
},
"&.hasVerticalPadding": {
...paddings({
vertical: 12,
horizontal: important(0),
}),
},
"&:empty": {
display: "none",
},
},
});
const asModal = style("asModal", {
$nest: {
"&.hasVerticalPadding": paddings({
vertical: 12,
}),
},
});
const likeDropDownContent = style("likeDropDownContent", {
...shadows.dropDown(),
backgroundColor: colorOut(globalVars.mainColors.bg),
...borders(),
});
const items = style("items", {
fontSize: unit(globalVars.fonts.size.medium),
});
const metaItems = style("metaItems", {
$nest: {
"&&": {
display: "block",
},
},
...paddings(vars.metas.padding),
});
const metaItem = style("metaItem", {
$nest: {
"& + &": {
paddingTop: unit(vars.item.padding.top),
},
},
...fonts(vars.metas.font),
});
// wrapping element
const item = style("item", {
display: "flex",
alignItems: "center",
justifyContent: "flex-start",
width: percent(100),
color: "inherit",
...userSelect("none"),
textAlign: "left",
lineHeight: globalVars.lineHeights.condensed,
});
const section = style("section", {
display: "block",
});
const toggleButtonIcon = style("toggleButtonIcon", {
$nest: {
...buttonStates({
allStates: {
color: colorOut(globalVars.mainColors.primary),
},
}),
},
});
// Contents (button or link)
// Replaces: .dropDownItem-button, .dropDownItem-link
const action = style(
"action",
{
appearance: "none",
display: "flex",
alignItems: "center",
width: percent(100),
textAlign: "left",
color: colorOut(vars.item.colors.fg),
minHeight: unit(vars.item.minHeight),
lineHeight: unit(globalVars.lineHeights.condensed),
...paddings({
vertical: 4,
horizontal: 14,
}),
...borders({
color: "transparent",
radius: 0,
}),
...userSelect("none"),
...buttonStates({
allStates: {
textShadow: "none",
outline: 0,
},
hover: {
backgroundColor: colorOut(globalVars.states.hover.color),
},
focus: {
backgroundColor: colorOut(globalVars.states.focus.color),
},
active: {
backgroundColor: colorOut(globalVars.states.active.color),
},
accessibleFocus: {
borderColor: colorOut(globalVars.mainColors.primary),
},
}),
},
mediaQueries.oneColumnDown({
fontSize: unit(vars.item.mobile.fontSize),
fontWeight: globalVars.fonts.weights.semiBold,
minHeight: unit(vars.item.mobile.minHeight),
}),
);
const text = style("text", {
display: "block",
});
const separator = style("separator", {
height: unit(globalVars.separator.size),
backgroundColor: colorOut(globalVars.separator.color),
...margins(vars.spacer.margin),
});
const sectionHeading = style("sectionHeading", {
color: colorOut(globalVars.meta.text.color),
fontSize: unit(globalVars.fonts.size.small),
textTransform: "uppercase",
textAlign: "center",
fontWeight: globalVars.fonts.weights.semiBold,
...(paddings(vars.sectionTitle.padding) as NestedCSSProperties),
});
const sectionContents = style("sectionContents", {
display: "block",
});
const count = style("count", {
fontSize: unit(globalVars.fonts.size.small),
paddingLeft: "1em",
marginLeft: "auto",
});
const verticalPadding = style(
"verticalPadding",
{
...paddings({
vertical: vars.contents.padding.vertical,
horizontal: 0,
}),
},
mediaQueries.oneColumnDown({
...paddings({
vertical: 0,
}),
}),
);
const title = style("title", {
...fonts({
weight: globalVars.fonts.weights.semiBold as 400,
size: globalVars.fonts.size.medium,
lineHeight: globalVars.lineHeights.condensed,
}),
...paddings({
top: 0,
right: 0,
bottom: 0,
}),
flexGrow: 1,
color: colorOut(vars.title.color),
});
return {
root,
contents,
asModal,
likeDropDownContent,
items,
metaItems,
metaItem,
item,
section,
toggleButtonIcon,
action,
text,
separator,
sectionHeading,
sectionContents,
count,
verticalPadding,
title,
};
});
export const modalClasses = useThemeCache(() => {
const globalVars = globalVariables();
const vars = modalVariables();
const style = styleFactory("modal");
const mediaQueries = layoutVariables().mediaQueries();
const shadows = shadowHelper();
const titleBarVars = titleBarVariables();
const overlay = style("overlay", {
position: "fixed",
// Viewport units are useful here because
// we're actually fine this being taller than the initially visible viewport.
height: viewHeight(100),
width: percent(100),
top: 0,
left: 0,
right: 0,
bottom: 0,
background: colorOut(vars.colors.overlayBg),
zIndex: 10,
});
const root = style({
display: "flex",
flexDirection: "column",
width: percent(100),
maxWidth: percent(100),
maxHeight: viewHeight(80),
zIndex: 1,
backgroundColor: colorOut(vars.colors.bg),
position: "fixed",
top: percent(50),
left: percent(50),
bottom: "initial",
overflow: "hidden",
borderRadius: unit(vars.border.radius),
// NOTE: This transform can cause issues if anything inside of us needs fixed positioning.
// See http://meyerweb.com/eric/thoughts/2011/09/12/un-fixing-fixed-elements-with-css-transforms/
// See also https://www.w3.org/TR/2009/WD-css3-2d-transforms-20091201/#introduction
// This is why fullscreen unsets the transforms.
transform: translate(`-50%`, `-50%`),
...margins({ all: "auto" }),
$nest: {
"&&.isFullScreen": {
width: percent(100),
height: percent(100),
maxHeight: percent(100),
maxWidth: percent(100),
borderRadius: 0,
border: "none",
top: 0,
bottom: 0,
transform: "none",
left: 0,
right: 0,
},
"&.isLarge": {
width: unit(vars.sizing.large),
maxWidth: calc(`100% - ${unit(vars.spacing.horizontalMargin * 2)}`),
},
"&.isMedium": {
width: unit(vars.sizing.medium),
maxWidth: calc(`100% - ${unit(vars.spacing.horizontalMargin * 2)}`),
},
"&.isSmall": {
width: unit(vars.sizing.small),
maxWidth: calc(`100% - ${unit(vars.spacing.horizontalMargin * 2)}`),
},
"&&&.isSidePanel": {
left: unit(vars.dropDown.padding),
width: calc(`100% - ${unit(vars.dropDown.padding)}`),
display: "flex",
flexDirection: "column",
top: 0,
bottom: 0,
right: 0,
transform: "none",
borderTopRightRadius: 0,
borderBottomRightRadius: 0,
},
"&&.isDropDown": {
top: 0,
left: 0,
right: 0,
bottom: globalVars.gutter.size,
width: percent(100),
marginBottom: "auto",
transform: "none",
maxHeight: percent(100),
borderTopLeftRadius: 0,
borderTopRightRadius: 0,
},
"&.isShadowed": {
...shadows.dropDown(),
...borders(),
},
},
});
const scroll = style("scroll", {
// ...absolutePosition.fullSizeOfParent(),
width: percent(100),
maxHeight: percent(100),
overflow: "auto",
});
const content = style("content", shadows.modal());
const pageHeader = style(
"pageHeader",
sticky(),
{
...shadows.embed(),
top: 0,
display: "flex",
alignItems: "center",
justifyContent: "center",
height: unit(titleBarVars.sizing.height),
minHeight: unit(titleBarVars.sizing.height),
zIndex: 2,
background: colorOut(vars.colors.bg),
$nest: {
"&.noShadow": {
boxShadow: "none",
},
},
},
mediaQueries.oneColumnDown({
minHeight: unit(titleBarVars.sizing.mobile.height),
}),
);
return {
root,
scroll,
content,
pageHeader,
overlay,
};
});
export const userContentClasses = useThemeCache(() => {
const style = styleFactory("userContent");
const vars = userContentVariables();
const globalVars = globalVariables();
const listItem: NestedCSSProperties = {
position: "relative",
...margins({
top: vars.list.spacing.top,
left: vars.list.spacing.left,
}),
$nest: {
"&:first-child": {
marginTop: 0,
},
"&:last-child": {
marginBottom: 0,
},
},
};
const headingStyle = (tag: string, fontSize: FontSizeProperty<TLength>): NestedCSSProperties => {
return {
marginTop: globalVars.spacer.size,
fontSize,
$nest: lineHeightAdjustment(globalVars.lineHeights.condensed),
};
};
const headings: NestedCSSSelectors = {
"& h1": headingStyle("h1", vars.fonts.headings.h1),
"& h2": headingStyle("h2", vars.fonts.headings.h2),
"& h3": headingStyle("h3", vars.fonts.headings.h3),
"& h4": headingStyle("h4", vars.fonts.headings.h4),
"& h5": headingStyle("h5", vars.fonts.headings.h5),
"& h6": headingStyle("h6", vars.fonts.headings.h6),
};
const lists: NestedCSSSelectors = {
"& ol": {
listStylePosition: "inside",
},
"& ol li": {
...listItem,
listStyle: "decimal",
},
"& ul li": {
...listItem,
listStyle: "initial",
},
};
const paragraphSpacing: NestedCSSSelectors = {
"& p": {
marginTop: 0,
marginBottom: 0,
$nest: {
"&:not(:first-child)": {
marginTop: vars.blocks.margin * 0.5,
},
"&:first-child": {
$nest: lineHeightAdjustment(globalVars.lineHeights.base),
},
},
},
"&& > *:not(:last-child)": {
marginBottom: vars.blocks.margin,
},
"&& > *:first-child": {
marginTop: 0,
},
};
const linkColors = setAllLinkColors();
const linkStyle = {
color: linkColors.color,
$nest: {
...linkColors.nested,
"&:hover, &:focus": {
textDecoration: "underline",
},
},
};
const linkStyles: NestedCSSSelectors = {
a: linkStyle,
"p a": linkStyle,
"li a": linkStyle,
};
const codeStyles: NestedCSSSelectors = {
"& .code": {
position: "relative",
fontSize: vars.code.fontSize,
fontFamily: `Menlo, Monaco, Consolas, "Courier New", monospace`,
maxWidth: percent(100),
overflowX: "auto",
margin: 0,
color: colorOut(vars.code.fg),
backgroundColor: colorOut(vars.code.bg),
border: "none",
},
"&& .codeInline": {
whiteSpace: "normal",
...paddings({
top: vars.codeInline.paddingVertical,
bottom: vars.codeInline.paddingVertical,
left: vars.codeInline.paddingHorizontal,
right: vars.codeInline.paddingHorizontal,
}),
background: colorOut(vars.codeInline.bg),
borderRadius: vars.codeInline.borderRadius,
// We CAN'T use display: `inline` & position: `relative` together.
// This causes the cursor to disappear in a contenteditable.
// @see https://bugs.chromium.org/p/chromium/issues/detail?id=724821
display: "inline",
position: "static",
},
"&& .codeBlock": {
display: "block",
wordWrap: "normal",
lineHeight: vars.codeBlock.lineHeight,
borderRadius: vars.codeBlock.borderRadius,
flexShrink: 0, // Needed so code blocks don't collapse in the editor.
whiteSpace: "pre",
...paddings({
top: vars.codeBlock.paddingVertical,
bottom: vars.codeBlock.paddingVertical,
left: vars.codeBlock.paddingHorizontal,
right: vars.codeBlock.paddingHorizontal,
}),
},
};
// Blockquotes & spoilers
// These are temporarily kludged here due to lack of time.
// They should be fully converted in the future but at the moment
// Only the bare minimum is convverted in order to make the colors work.
const spoilersAndQuotes: NestedCSSSelectors = {
[`& .spoiler,
& .button-spoiler,
& .spoiler-icon`]: {
background: colorOut(vars.blocks.bg),
color: colorOut(vars.blocks.fg),
},
"& .spoiler-icon": {
margin: 0,
},
"& .embedExternal-content": {
borderRadius: vars.embeds.borderRadius,
$nest: {
"&::after": {
borderRadius: vars.embeds.borderRadius,
},
},
},
"& .embedText-content": {
background: colorOut(vars.embeds.bg),
color: colorOut(vars.embeds.fg),
overflow: "hidden",
...shadowOrBorderBasedOnLightness(
globalVars.body.backgroundImage.color,
borders({
color: vars.embeds.fg.fade(0.3),
}),
shadowHelper().embed(),
),
},
[`& .embedText-title,
& .embedLink-source,
& .embedLink-excerpt`]: {
color: colorOut(vars.blocks.fg),
},
"& .metaStyle": {
opacity: 0.8,
},
"& .embedLoader-box": {
background: colorOut(vars.embeds.bg),
...borders({
color: vars.embeds.fg.fade(0.3),
}),
},
};
const root = style({
// These CAN'T be flexed. That breaks margin collapsing.
display: important("block"),
position: "relative",
width: percent(100),
wordBreak: "break-word",
lineHeight: globalVars.lineHeights.base,
fontSize: vars.fonts.size,
$nest: {
...headings,
...lists,
...paragraphSpacing,
...linkStyles,
...codeStyles,
...spoilersAndQuotes,
},
});
return { root };
});
export const messagesClasses = useThemeCache(() => {
const vars = messagesVariables();
const globalVars = globalVariables();
const style = styleFactory("messages");
const titleBarVars = titleBarVariables();
const shadows = shadowHelper();
const mediaQueries = layoutVariables().mediaQueries();
// Fixed wrapper
const fixed = style("fixed", {
position: "fixed",
left: 0,
top: unit(titleBarVars.sizing.height - 8),
minHeight: unit(vars.sizing.minHeight),
width: percent(100),
maxWidth: viewWidth(100),
zIndex: 20,
});
const root = style(
{
width: percent(100),
},
margins({ horizontal: "auto" }),
);
const wrap = style(
"wrap",
{
display: "flex",
alignItems: "center",
justifyContent: "flex-start",
minHeight: unit(vars.sizing.minHeight),
backgroundColor: colorOut(vars.colors.bg),
width: percent(100),
...shadowOrBorderBasedOnLightness(
globalVars.body.backgroundImage.color,
borders({
color: globalVars.mainColors.fg,
}),
shadows.embed(),
),
margin: "auto",
color: colorOut(vars.colors.fg),
...paddings({
...vars.spacing.padding,
right: vars.spacing.padding.horizontal / 2,
}),
},
mediaQueries.xs({
flexWrap: "wrap",
paddingLeft: unit(vars.spacing.padding.horizontal / 2),
}),
);
const message = style("message", {
...userSelect(),
...fonts(vars.text.font),
flex: 1,
});
const setWidth = style("setWidth", {
width: unit(vars.sizing.width),
maxWidth: percent(100),
});
const actionButton = style(
"actionButton",
{
...paddings(vars.actionButton.padding),
minHeight: unit(vars.actionButton.minHeight),
whiteSpace: "nowrap",
...fonts(vars.actionButton.font),
...allButtonStates({
noState: {
color: colorOut(vars.colors.fg),
},
allStates: {
color: colorOut(vars.colors.states.fg),
},
focusNotKeyboard: {
outline: 0,
},
}),
},
mediaQueries.xs({
padding: 0,
width: percent(100),
textAlign: "center",
}),
);
return {
root,
wrap,
actionButton,
message,
fixed,
setWidth,
};
});
export const attachmentClasses = useThemeCache(() => {
const globalVars = globalVariables();
const formElementVars = formElementsVariables();
const vars = attachmentVariables();
const style = styleFactory("attachment");
const hoverFocusStates = {
"&:hover": {
boxShadow: `0 0 0 ${px(globalVars.embed.select.borderWidth)} ${globalVars.embed.focus.color.fade(
0.5,
)} inset`,
},
"&:focus": {
boxShadow: `0 0 0 ${px(
globalVars.embed.select.borderWidth,
)} ${globalVars.embed.focus.color.toString()} inset`,
},
};
const root = style({
display: "block",
position: "relative",
textDecoration: "none",
color: "inherit",
width: px(globalVars.embed.sizing.width),
maxWidth: percent(100),
margin: "auto",
overflow: "hidden",
...userSelect(),
...borders(vars.border),
...shadowOrBorderBasedOnLightness(
globalVars.body.backgroundImage.color,
borders({
color: vars.border.color,
}),
shadowHelper().embed(),
),
$nest: {
// These 2 can't be joined together or their pseudselectors don't get created properly.
"&.isLoading": {
cursor: "pointer",
$nest: hoverFocusStates,
},
"&.hasError": {
cursor: "pointer",
$nest: hoverFocusStates,
},
},
});
const link = style("link", {
...allLinkStates({
allStates: {
textDecoration: "none",
},
}),
});
const box = style("box", {
position: "relative",
display: "flex",
flexWrap: "nowrap",
alignItems: "flex-start",
justifyContent: "space-between",
padding: px(vars.padding.default),
width: percent(100),
...borders({
color: transparentColor,
width: 2,
radius: 0,
}),
});
const format = style("format", {
flexBasis: px(globalVars.icon.sizes.small + vars.padding.default),
height: unit(globalVars.icon.sizes.small),
paddingRight: unit(vars.padding.default),
flexShrink: 1,
});
const main = style("main", {
display: "flex",
flexDirection: "column",
alignItems: "flex-start",
justifyContent: "flex-start",
flexGrow: 1,
});
const title = style("title", {
fontSize: px(vars.text.fontSize),
color: vars.title.color.toString(),
fontWeight: globalVars.fonts.weights.semiBold,
lineHeight: px(globalVars.icon.sizes.small),
});
const metas = style("metas", {
marginBottom: px(0),
lineHeight: globalVars.lineHeights.condensed,
});
const close = style("close", {
...margins({
top: px(-((formElementVars.sizing.height - globalVars.icon.sizes.default) / 2)),
right: px(-((formElementVars.sizing.height - globalVars.icon.sizes.default) / 2)),
}),
pointerEvents: "all",
});
const loadingProgress = style("loadingProgress", {
...absolutePosition.bottomLeft(),
transition: `width ease-out .2s`,
height: px(3),
marginBottom: px(0),
width: 0,
maxWidth: percent(100),
backgroundColor: globalVars.mainColors.primary.toString(),
});
const loadingContent = style("loadingContent", {
$nest: {
".attachment-format": {
opacity: vars.loading.opacity,
},
".attachment-main": {
opacity: vars.loading.opacity,
},
},
});
return { root, link, box, format, main, title, metas, close, loadingProgress, loadingContent };
});