html
{
font: @xf-fontSizeNormal / @xf-lineHeightDefault sans-serif;
font-family: @xf-fontFamilyUi;
font-weight: @xf-fontWeightNormal;
color: @xf-textColor;
margin: 0;
padding: 0;
word-wrap: break-word;
background-color: @xf-pageBg;
}
button, input, optgroup, select, textarea
{
font-family: @xf-fontFamilyUi;
line-height: @xf-lineHeightDefault;
}
img
{
max-width: 100%;
height: auto;
}
b, strong
{
font-weight: @xf-fontWeightHeavy;
}
a
{
.xf-link();
&:hover
{
.xf-linkHover();
}
}
{{ include('core_setup.less') }}
{{ include('core_utilities.less') }}
{{ include('core_list.less') }}
{{ include('core_categorylist.less') }}
{{ include('core_block.less') }}
{{ include('core_blockmessage.less') }}
{{ include('core_blockstatus.less') }}
{{ include('core_blocklink.less') }}
{{ include('core_blockend.less') }}
{{ include('core_fixedmessage.less') }}
{{ include('core_button.less') }}
{{ include('core_meter_bar.less') }}
.m-formElementExplain()
{
display: block;
font-style: normal;
.xf-formExplain();
.m-textColoredLinks();
}
{{ include('core_input.less') }}
{{ include('core_formrow.less') }}
{{ include('core_collapse.less') }}
{{ include('core_badge.less') }}
{{ include('core_tooltip.less') }}
{{ include('core_menu.less') }}
{{ include('core_offcanvas.less') }}
{{ include('core_tab.less') }}
{{ include('core_overlay.less') }}
{{ include('core_globalaction.less') }}
{{ include('core_avatar.less') }}
{{ include('core_datalist.less') }}
{{ include('core_filter.less') }}
{{ include('core_contentrow.less') }}
{{ include('core_pagenav.less') }}
{{ include('core_hscroller.less') }}
.flashMessage
{
display: none;
position: fixed;
top: 0;
left: 0;
right: 0;
z-index: @zIndex-9;
.xf-flashMessage();
.m-transitionFadeDown();
}
.autoCompleteList
{
.m-autoCompleteList();
margin-top: 2px;
}
.tagList,
.tagList > dt,
.tagList > dd
{
display: inline;
padding: 0;
margin: 0;
}
.tagItem
{
display: inline-block;
max-width: 100%;
padding: 0 6px 1px;
margin: 0 0 2px;
border-radius: @xf-borderRadiusMedium;
font-size: @xf-fontSizeSmaller;
.xf-chip();
&:hover
{
text-decoration: none;
color: @xf-chip--color;
.xf-chipHover();
}
}
.recaptcha
{
&.input
{
box-sizing: content-box;
max-width: 100%;
}
img
{
max-width: 100%;
}
}
.likesBar
{
.m-transitionFadeDown();
.xf-minorBlockContent();
border-left: @xf-borderSizeMinorFeature solid @xf-borderColorFeature;
padding: @xf-paddingMedium;
font-size: @xf-fontSizeSmaller;
margin-top: @xf-paddingMedium;
}
.likeIcon
{
&:before
{
.m-faBase();
.m-faContent(@fa-var-thumbs-up, 1em);
color: @xf-textColorFeature;
margin-right: .2em;
}
}
.reactionsBar
{
.m-transitionFadeDown();
.xf-minorBlockContent();
border-left: @xf-borderSizeMinorFeature solid @xf-borderColorFeature;
padding: @xf-paddingMedium;
font-size: @xf-fontSizeSmaller;
margin-top: @xf-paddingMedium;
}
.reactionSummary
{
display: inline-block;
.m-listPlain();
line-height: 16px;
height: 16px;
margin: 0 -2px;
vertical-align: text-top;
> li
{
display: inline-block;
height: 20px;
width: 20px;
padding: 2px;
margin: -2px 0;
background: @xf-contentBg;
border-radius: 50%;
position: relative;
margin-left: -6px;
&:nth-child(1)
{
z-index: 3;
margin-left: 0;
}
&:nth-child(2)
{
z-index: 2;
}
&:nth-child(3)
{
z-index: 1;
}
}
.reaction
{
position: absolute;
top: 0;
&.reaction
{
display: block;
}
}
}
.reactionsBar,
.message-responseRow
{
.reactionSummary
{
> li
{
background: @xf-contentAltBg;
}
.reaction
{
top: 2px;
}
}
}
.reactTooltip
{
padding: 0;
display: flex;
flex-wrap: wrap;
justify-content: center;
max-width: 100%;
.reaction
{
margin: @xf-paddingSmall;
.m-transition(transform);
&:hover
{
.m-transform(scale(1.2));
}
}
}
.colorChip
{
display: inline-block;
border: @xf-borderSize solid @xf-borderColor;
border-radius: @xf-borderRadiusMedium;
padding: 1px;
width: 100px;
}
.colorChip-inner
{
display: block;
background-color: transparent;
border-radius: @xf-borderRadiusSmall;
height: 1em;
}
.colorChip-value
{
display: none;
}
pre.sf-dump
{
z-index: @zIndex-1 !important;
}
.grecaptcha-badge
{
z-index: @zIndex-5;
}
.bookmarkLink
{
&:before
{
.m-faBase();
.m-faContent(@fa-var-bookmark);
font-weight: min(@xf-fontAwesomeWeight, @faWeight-regular);
}
&.is-bookmarked
{
&:before
{
font-weight: @faWeight-solid;
}
}
&.bookmarkLink--highlightable.is-bookmarked
{
color: @xf-textColorAttention;
&:hover
{
color: @xf-textColorAccentContent;
}
}
span
{
margin-left: .35em;
}
}
.dragHandle
{
cursor: move;
&:before
{
.m-faBase();
.m-faContent(@fa-var-bars);
}
.is-undraggable &
{
visibility: hidden;
cursor: default;
}
}
{{ include('core_action_bar.less') }}
{{ include('core_labels.less') }}
{{ include('core_pikaday.less') }}
{{ include('core_reaction.less') }}
{{ include('core_smilie.less') }}
{{ include('core_bbcode.less') }}
{{ include('core_fa.less') }}
.debugResolution
{
.debugResolution-output:before
{
content: "Full @{xf-responsiveWide} - @{xf-pageWidthMax}";
@media (min-width: @xf-pageWidthMax) { content: "Max > @{xf-pageWidthMax}"; }
@media (max-width: @xf-responsiveWide) { content: "Wide < @{xf-responsiveWide}"; }
@media (max-width: @xf-responsiveMedium) { content: "Medium < @{xf-responsiveMedium}"; }
@media (max-width: @xf-responsiveNarrow) { content: "Narrow < @{xf-responsiveNarrow}"; }
}
}