[!!!][FEATURE] Streamline Fluid Styled Content and CSS Styled Content
[Packages/TYPO3.CMS.git] / typo3 / sysext / css_styled_content / Configuration / TypoScript / Styling / setup.txt
1 plugin.tx_cssstyledcontent._CSS_DEFAULT_STYLE (
2     /* Headers */
3     .csc-header-alignment-center { text-align: center; }
4     .csc-header-alignment-right { text-align: right; }
5     .csc-header-alignment-left { text-align: left; }
6
7     div.csc-textpic-responsive, div.csc-textpic-responsive * { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box;  }
8
9     /* Clear floats after csc-textpic and after csc-textpic-imagerow */
10     div.csc-textpic, div.csc-textpic div.csc-textpic-imagerow, ul.csc-uploads li { overflow: hidden; }
11
12     /* Set padding for tables */
13     div.csc-textpic .csc-textpic-imagewrap table { border-collapse: collapse; border-spacing: 0; }
14     div.csc-textpic .csc-textpic-imagewrap table tr td { padding: 0; vertical-align: top; }
15
16     /* Settings for figure and figcaption (HTML5) */
17     div.csc-textpic .csc-textpic-imagewrap figure, div.csc-textpic figure.csc-textpic-imagewrap { margin: 0; display: table; }
18
19     /* Captions */
20     figcaption.csc-textpic-caption { display: table-caption; }
21     .csc-textpic-caption { text-align: left; caption-side: bottom; }
22     div.csc-textpic-caption-c .csc-textpic-caption, .csc-textpic-imagewrap .csc-textpic-caption-c { text-align: center; }
23     div.csc-textpic-caption-r .csc-textpic-caption, .csc-textpic-imagewrap .csc-textpic-caption-r { text-align: right; }
24     div.csc-textpic-caption-l .csc-textpic-caption, .csc-textpic-imagewrap .csc-textpic-caption-l { text-align: left; }
25
26     /* Float the columns */
27     div.csc-textpic div.csc-textpic-imagecolumn { float: left; }
28
29     /* Border just around the image */
30     {$styles.content.imgtext.borderSelector} {
31         border: {$styles.content.imgtext.borderThick}px solid {$styles.content.imgtext.borderColor};
32         padding: {$styles.content.imgtext.borderSpace}px {$styles.content.imgtext.borderSpace}px;
33     }
34
35     div.csc-textpic .csc-textpic-imagewrap img { border: none; display: block; }
36
37     /* Space below each image (also in-between rows) */
38     div.csc-textpic .csc-textpic-imagewrap .csc-textpic-image { margin-bottom: {$styles.content.imgtext.rowSpace}px; }
39     div.csc-textpic .csc-textpic-imagewrap .csc-textpic-imagerow-last .csc-textpic-image { margin-bottom: 0; }
40
41     /* colSpace around image columns, except for last column */
42     div.csc-textpic-imagecolumn, td.csc-textpic-imagecolumn .csc-textpic-image { margin-right: {$styles.content.imgtext.colSpace}px; }
43     div.csc-textpic-imagecolumn.csc-textpic-lastcol, td.csc-textpic-imagecolumn.csc-textpic-lastcol .csc-textpic-image { margin-right: 0; }
44
45     /* Add margin from image-block to text (in case of "Text & Images") */
46     div.csc-textpic-intext-left .csc-textpic-imagewrap,
47     div.csc-textpic-intext-left-nowrap .csc-textpic-imagewrap {
48         margin-right: {$styles.content.imgtext.textMargin}px;
49     }
50     div.csc-textpic-intext-right .csc-textpic-imagewrap,
51     div.csc-textpic-intext-right-nowrap .csc-textpic-imagewrap {
52         margin-left: {$styles.content.imgtext.textMargin}px;
53     }
54
55     /* Positioning of images: */
56
57     /* Center (above or below) */
58     div.csc-textpic-center .csc-textpic-imagewrap, div.csc-textpic-center figure.csc-textpic-imagewrap { overflow: hidden; }
59     div.csc-textpic-center .csc-textpic-center-outer { position: relative; float: right; right: 50%; }
60     div.csc-textpic-center .csc-textpic-center-inner { position: relative; float: right; right: -50%; }
61
62     /* Right (above or below) */
63     div.csc-textpic-right .csc-textpic-imagewrap { float: right; }
64     div.csc-textpic-right div.csc-textpic-text { clear: right; }
65
66     /* Left (above or below) */
67     div.csc-textpic-left .csc-textpic-imagewrap { float: left; }
68     div.csc-textpic-left div.csc-textpic-text { clear: left; }
69
70     /* Left (in text) */
71     div.csc-textpic-intext-left .csc-textpic-imagewrap { float: left; }
72
73     /* Right (in text) */
74     div.csc-textpic-intext-right .csc-textpic-imagewrap { float: right; }
75
76     /* Right (in text, no wrap around) */
77     div.csc-textpic-intext-right-nowrap .csc-textpic-imagewrap { float: right; }
78
79     /* Left (in text, no wrap around) */
80     div.csc-textpic-intext-left-nowrap .csc-textpic-imagewrap { float: left; }
81
82     div.csc-textpic div.csc-textpic-imagerow-last, div.csc-textpic div.csc-textpic-imagerow-none div.csc-textpic-last { margin-bottom: 0; }
83
84     /* Browser fixes: */
85     /* Fix for unordered and ordered list with image "In text, left" */
86     .csc-textpic-intext-left ol, .csc-textpic-intext-left ul { padding-left: 40px; overflow: auto; }
87
88     /* Textmedia */
89     .csc-textmedia,
90     .csc-textmedia-gallery { overflow: hidden; }
91     .csc-textmedia-gallery-column { float: left; }
92     .csc-textmedia-gallery-column { margin-right: {$styles.content.textmedia.columnSpacing}px; }
93     .csc-textmedia-gallery-column:last-child { margin-right: 0; }
94     .csc-textmedia-gallery-row { overflow: hidden; margin-bottom: {$styles.content.textmedia.rowSpacing}px; }
95     .csc-textmedia-gallery-row:last-child { margin-bottom: 0; }
96     .csc-textmedia-above .csc-textmedia-gallery { margin-bottom: {$styles.content.textmedia.textMargin}px; }
97     .csc-textmedia-above-right .csc-textmedia-gallery { float: right; }
98     .csc-textmedia-above-left .csc-textmedia-gallery { float: left; }
99     .csc-textmedia-above .csc-textmedia-text { clear: both; }
100     .csc-textmedia-above-center .csc-textmedia-gallery-outer,
101     .csc-textmedia-below-center .csc-textmedia-gallery-outer { position: relative; float: right; right: 50%; }
102     .csc-textmedia-above-center .csc-textmedia-gallery-inner,
103     .csc-textmedia-below-center .csc-textmedia-gallery-inner { position: relative; float: right; right: -50%; }
104     .csc-textmedia-below .csc-textmedia-gallery { margin-top: {$styles.content.textmedia.textMargin}px; }
105     .csc-textmedia-below-right .csc-textmedia-gallery { float: right; }
106     .csc-textmedia-below-left .csc-textmedia-gallery { float: left; }
107     .csc-textmedia-inside-right .csc-textmedia-gallery { float: right; margin-left: {$styles.content.textmedia.textMargin}px; }
108     .csc-textmedia-inside-left .csc-textmedia-gallery { float: left; margin-right: {$styles.content.textmedia.textMargin}px; }
109     .csc-textmedia-beside-right .csc-textmedia-gallery { float: right; margin-left: {$styles.content.textmedia.textMargin}px; }
110     .csc-textmedia-beside-right .csc-textmedia-text { overflow: hidden; }
111     .csc-textmedia-beside-left .csc-textmedia-gallery { float: left; margin-right: {$styles.content.textmedia.textMargin}px; }
112     .csc-textmedia-beside-left .csc-textmedia-text { overflow: hidden; }
113
114     /* Uploads */
115     .ce-uploads { margin: 0; padding: 0; }
116     .ce-uploads li { list-style: none outside none; margin: 1em 0; }
117     .ce-uploads img { float: left; margin-right: 1em; vertical-align: top; }
118     .ce-uploads span { display: block; }
119
120     /* Table */
121     .contenttable { width: 100%; max-width: 100%; }
122     .contenttable th, .contenttable td { padding: 0.5em 0.75em; vertical-align: top; }
123     .contenttable thead th { font-weight: bold; border-bottom: 2px solid #dadada; }
124     .contenttable th, .contenttable td { border-top: 1px solid #dadada; }
125     .contenttable-striped tbody tr:nth-of-type(odd) { background-color: rgba(0,0,0,.05); }
126     .contenttable-bordered th, .contenttable-bordered td { border: 1px solid #dadada; }
127
128     /* Space */
129     .csc-space-before-extra-small { margin-top: 1em; }
130     .csc-space-before-small { margin-top: 2em; }
131     .csc-space-before-medium { margin-top: 3em; }
132     .csc-space-before-large { margin-top: 4em; }
133     .csc-space-before-extra-large { margin-top: 5em; }
134     .csc-space-after-extra-small { margin-bottom: 1em; }
135     .csc-space-after-small { margin-bottom: 2em; }
136     .csc-space-after-medium { margin-bottom: 3em; }
137     .csc-space-after-large { margin-bottom: 4em; }
138     .csc-space-after-extra-large { margin-bottom: 5em; }
139
140     /* Frame */
141     .csc-frame-ruler-before:before { content: ''; display: block; border-top: 1px solid rgba(0,0,0,0.25); margin-bottom: 2em; }
142     .csc-frame-ruler-after:after { content: ''; display: block; border-bottom: 1px solid rgba(0,0,0,0.25); margin-top: 2em; }
143     .csc-frame-indent { margin-left: 15%; margin-right: 15%; }
144     .csc-frame-indent-left { margin-left: 33%; }
145     .csc-frame-indent-right { margin-right: 33%; }
146 )