라이믹스용 레이아웃이나 스킨 중에 글의 본문 영역까지 모든 스타일을 없애 버리는 경우가 있다.
리스트나 제목과 같이 기본 스타일이 있었으면 하는 요소가 있었기 때문에, 파이어폭스의 기본 스타일을 참고해서 작성해보았다.
다음 코드를 SCSS로 읽어들이면 컨텐츠 영역의 스타일을 복원한다.
.xe_content {
/* This Source Code Form is subject to the terms of the Mozilla Public
* License, v. 2.0. If a copy of the MPL was not distributed with this
* file, You can obtain one at http://mozilla.org/MPL/2.0/. */
address,
article,
aside,
blockquote,
body,
caption,
center,
col,
colgroup,
dd,
dir,
div,
dl,
dt,
fieldset,
figcaption,
figure,
footer,
form,
h1,
h2,
h3,
h4,
h5,
h6,
header,
hgroup,
hr,
html,
legend,
li,
listing,
main,
marquee,
menu,
nav,
noframes,
ol,
p,
plaintext,
pre,
section,
summary,
table,
tbody,
td,
tfoot,
th,
thead,
tr,
ul,
xmp {
unicode-bidi: isolate;
}
bdi, output {
unicode-bidi: isolate;
}
/* blocks */
article,
aside,
details,
div,
dt,
figcaption,
footer,
form,
header,
hgroup,
html,
main,
nav,
section,
summary {
display: block;
}
body {
display: block;
margin: 8px;
}
p, dl, multicol {
display: block;
margin-top: 1em;
margin-bottom: 1em;
}
dd {
display: block;
margin-inline-start: 40px;
}
blockquote, figure {
display: block;
margin-top: 1em;
margin-bottom: 1em;
margin-inline-start: 40px;
margin-inline-end: 40px;
}
address {
display: block;
font-style: italic;
}
center {
display: block;
text-align: -moz-center;
}
blockquote[type=cite] {
display: block;
margin-top: 1em;
margin-bottom: 1em;
margin-inline-start: 0;
margin-inline-end: 0;
padding-inline-start: 1em;
}
span[_moz_quote=true] {
color: blue;
}
pre[_moz_quote=true] {
color: blue;
}
h1 {
display: block;
font-size: 2em;
font-weight: bold;
margin-top: .67em;
margin-bottom: .67em;
}
h2 {
display: block;
font-size: 1.5em;
font-weight: bold;
margin-top: .83em;
margin-bottom: .83em;
}
h3 {
display: block;
font-size: 1.17em;
font-weight: bold;
margin-top: 1em;
margin-bottom: 1em;
}
h4 {
display: block;
font-size: 1.00em;
font-weight: bold;
margin-top: 1.33em;
margin-bottom: 1.33em;
}
h5 {
display: block;
font-size: 0.83em;
font-weight: bold;
margin-top: 1.67em;
margin-bottom: 1.67em;
}
h6 {
display: block;
font-size: 0.67em;
font-weight: bold;
margin-top: 2.33em;
margin-bottom: 2.33em;
}
listing {
display: block;
font-family: -moz-fixed;
font-size: medium;
white-space: pre;
margin-top: 1em;
margin-bottom: 1em;
}
xmp, pre, plaintext {
display: block;
font-family: -moz-fixed;
white-space: pre;
margin-top: 1em;
margin-bottom: 1em;
}
/* tables */
table {
display: table;
border-spacing: 2px;
border-collapse: separate;
/* XXXldb do we want this if we're border-collapse:collapse ? */
box-sizing: border-box;
text-indent: 0;
}
table[align="left"] {
float: left;
}
table[align="right"] {
float: right;
text-align: start;
}
/* border collapse rules */
/* Set hidden if we have 'frame' or 'rules' attribute.
Set it on all sides when we do so there's more consistency
in what authors should expect */
/* Put this first so 'border' and 'frame' rules can override it. */
table[rules] {
border-width: thin;
border-style: hidden;
}
/* 'border' before 'frame' so 'frame' overrides
A border with a given value should, of course, pass that value
as the border-width in pixels -> attr mapping */
table[frame] {
border: thin hidden;
}
/* specificity must beat table:-moz-table-border-nonzero rule above */
table[frame="void"] { border-style: hidden; }
table[frame="above"] { border-style: outset hidden hidden hidden; }
table[frame="below"] { border-style: hidden hidden outset hidden; }
table[frame="lhs"] { border-style: hidden hidden hidden outset; }
table[frame="rhs"] { border-style: hidden outset hidden hidden; }
table[frame="hsides"] { border-style: outset hidden; }
table[frame="vsides"] { border-style: hidden outset; }
table[frame="box"],
table[frame="border"] { border-style: outset; }
/* Internal Table Borders */
/* 'border' cell borders first */
/* collapse only if rules are really specified */
table[rules]:not([rules="none"]):not([rules=""]) {
border-collapse: collapse;
}
/* only specified rules override 'border' settings
(increased specificity to achieve this) */
table[rules]:not([rules=""])> tr > td,
table[rules]:not([rules=""])> * > tr > td,
table[rules]:not([rules=""])> tr > th,
table[rules]:not([rules=""])> * > tr > th,
table[rules]:not([rules=""])> td,
table[rules]:not([rules=""])> th
{
border-width: thin;
border-style: none;
}
table[rules][rules="none"] > tr > td,
table[rules][rules="none"] > * > tr > td,
table[rules][rules="none"] > tr > th,
table[rules][rules="none"] > * > tr > th,
table[rules][rules="none"] > td,
table[rules][rules="none"] > th
{
border-width: thin;
border-style: none;
}
table[rules][rules="all"] > tr > td,
table[rules][rules="all"] > * > tr > td,
table[rules][rules="all"] > tr > th,
table[rules][rules="all"] > * > tr > th,
table[rules][rules="all"] > td,
table[rules][rules="all"] > th
{
border-width: thin;
border-style: solid;
}
table[rules][rules="rows"] > tr,
table[rules][rules="rows"] > * > tr {
border-block-start-width: thin;
border-block-end-width: thin;
border-block-start-style: solid;
border-block-end-style: solid;
}
table[rules][rules="cols"] > tr > td,
table[rules][rules="cols"] > * > tr > td,
table[rules][rules="cols"] > tr > th,
table[rules][rules="cols"] > * > tr > th {
border-inline-start-width: thin;
border-inline-end-width: thin;
border-inline-start-style: solid;
border-inline-end-style: solid;
}
table[rules][rules="groups"] > colgroup {
border-inline-start-width: thin;
border-inline-end-width: thin;
border-inline-start-style: solid;
border-inline-end-style: solid;
}
table[rules][rules="groups"] > tfoot,
table[rules][rules="groups"] > thead,
table[rules][rules="groups"] > tbody {
border-block-start-width: thin;
border-block-end-width: thin;
border-block-start-style: solid;
border-block-start-style: solid;
}
/* caption inherits from table not table-outer */
caption {
display: table-caption;
text-align: center;
}
table[align="center"] > caption {
margin-inline-start: auto;
margin-inline-end: auto;
}
table[align="center"] > caption[align="left"]:dir(ltr) {
margin-inline-end: 0;
}
table[align="center"] > caption[align="left"]:dir(rtl) {
margin-inline-start: 0;
}
table[align="center"] > caption[align="right"]:dir(ltr) {
margin-inline-start: 0;
}
table[align="center"] > caption[align="right"]:dir(rtl) {
margin-inline-end: 0;
}
tr {
display: table-row;
vertical-align: inherit;
}
col {
display: table-column;
}
colgroup {
display: table-column-group;
}
tbody {
display: table-row-group;
vertical-align: middle;
}
thead {
display: table-header-group;
vertical-align: middle;
}
tfoot {
display: table-footer-group;
vertical-align: middle;
}
/* for XHTML tables without tbody */
table > tr {
vertical-align: middle;
}
td {
display: table-cell;
vertical-align: inherit;
text-align: unset;
padding: 1px;
}
th {
display: table-cell;
vertical-align: inherit;
font-weight: bold;
padding: 1px;
}
tr > form:-moz-is-html, tbody > form:-moz-is-html,
thead > form:-moz-is-html, tfoot > form:-moz-is-html,
table > form:-moz-is-html {
/* Important: don't show these forms in HTML */
display: none !important;
}
table[bordercolor] > tbody,
table[bordercolor] > thead,
table[bordercolor] > tfoot,
table[bordercolor] > col,
table[bordercolor] > colgroup,
table[bordercolor] > tr,
table[bordercolor] > * > tr,
table[bordercolor] > tr > td,
table[bordercolor] > * > tr > td,
table[bordercolor] > tr > th,
table[bordercolor] > * > tr > th {
border-color: inherit;
}
/* inlines */
q:before {
content: open-quote;
}
q:after {
content: close-quote;
}
b, strong {
font-weight: bolder;
}
i, cite, em, var, dfn {
font-style: italic;
}
tt, code, kbd, samp {
font-family: -moz-fixed;
}
u, ins {
text-decoration: underline;
}
s, strike, del {
text-decoration: line-through;
}
big {
font-size: larger;
}
small {
font-size: smaller;
}
sub {
vertical-align: sub;
font-size: smaller;
}
sup {
vertical-align: super;
font-size: smaller;
}
nobr {
white-space: nowrap;
}
mark {
background: yellow;
color: black;
}
/* titles */
abbr[title], acronym[title] {
text-decoration: dotted underline;
}
/* lists */
ul, menu, dir {
display: block;
list-style-type: disc;
margin-left: 1em;
margin-right: 1em;
padding-left: 30px;
}
menu[type="context"] {
display: none !important;
}
ul, ol, menu {
counter-reset: list-item;
-moz-list-reversed: false;
}
ol[reversed] {
-moz-list-reversed: true;
}
ol {
display: block;
list-style-type: decimal;
margin-left: 1em;
margin-right: 1em;
padding-left: 30px;
}
li {
display: list-item;
text-align: match-parent;
}
/* leafs */
/* <hr> noshade and color attributes are handled completely by
* the nsHTMLHRElement attribute mapping code
*/
hr {
display: block;
border: 1px inset;
margin-left: 0.5em;
margin-right: 0.5em;
margin-inline: auto;
color: gray;
box-sizing: content-box;
}
hr[size="1"] {
border-style: solid none none none;
}
img[usemap], object[usemap] {
color: blue;
}
frameset {
display: block ! important;
overflow: -moz-hidden-unscrollable;
position: static ! important;
float: none ! important;
border: none ! important;
}
link {
display: none;
}
frame {
border-radius: 0 ! important;
}
iframe {
border: 2px inset;
}
noframes {
display: none;
}
spacer {
position: static ! important;
float: none ! important;
}
canvas {
user-select: none;
}
/* hidden elements */
base, basefont, datalist, head, meta, script, style, title,
noembed, param, template {
display: none;
}
area {
/* Don't give it frames other than its imageframe */
display: none ! important;
}
/* media elements */
video {
object-fit: contain;
}
audio:not([controls]) {
display: none;
}
audio[controls] {
/* This ensures that intrinsic sizing can reliably shrinkwrap our
controls (which are also always horizontal) and produce a
reasonable intrinsic size from them. */
writing-mode: horizontal-tb !important;
}
video > .caption-box {
width: 100%;
height: 100%;
position: relative;
}
dialog {
position: absolute;
inset-inline-start: 0;
inset-inline-end: 0;
color: black;
margin: auto;
border-width: initial;
border-style: solid;
border-color: initial;
border-image: initial;
padding: 1em;
background: white;
width: -moz-fit-content;
}
dialog:not([open]) {
display: none;
}
marquee {
inline-size: -moz-available;
display: inline-block;
vertical-align: text-bottom;
text-align: start;
}
marquee[direction="up"], marquee[direction="down"] {
block-size: 200px;
}
}
라이믹스가 과거 XE를 말하는건가요? 이름 바뀐지 몰랐네요.
이름이 바뀌었다기 보다도, 여러가지 일을 겪으면서 사용자 중심 프로젝트로 포크 되었습니다 ㅎㅎ
https://github.com/rhymix/rhymix 에서 진행되고 있으니 한번 살펴보세요