Differential D14137 Diff 37815 autotests/html/review128925-1.css.html

Changeset View

Standalone View

View Options

autotests/html/review128925-1.css.html

Show All 17 Lines
18<span style="color:#898887;"> * Block comment</span> 18​<span style="color:#898887;"> * Block comment</span>
19<span style="color:#898887;"> *</span> 19​<span style="color:#898887;"> *</span>
20<span style="color:#898887;"> * Alert keywords:</span> 20​<span style="color:#898887;"> * Alert keywords:</span>
21<span style="color:#898887;"> * </span><span style="color:#ca9219;background-color:#451e1a;font-weight:bold;">TODO</span><span style="color:#898887;"> </span><span style="color:#ca9219;background-color:#451e1a;font-weight:bold;">BUG</span><span style="color:#898887;"> </span><span style="color:#ca9219;background-color:#451e1a;font-weight:bold;">FIXME</span> 21​<span style="color:#898887;"> * </span><span style="color:#ca9219;background-color:#451e1a;font-weight:bold;">TODO</span><span style="color:#898887;"> </span><span style="color:#ca9219;background-color:#451e1a;font-weight:bold;">BUG</span><span style="color:#898887;"> </span><span style="color:#ca9219;background-color:#451e1a;font-weight:bold;">FIXME</span>
22<span style="color:#898887;"> */</span> 22​<span style="color:#898887;"> */</span>
23 23​
24<span style="color:#ff5500;">@charset</span> <span style="color:#bf0303;">&quot;UTF-8&quot;</span>; 24​<span style="color:#ff5500;">@charset</span> <span style="color:#bf0303;">&quot;UTF-8&quot;</span>;
25 25​
26<span style="color:#ff5500;">@import</span> url(<span style="color:#bf0303;">&quot;components/button.css&quot;</span>); 26​<span style="color:#ff5500;">@import</span> <span style="color:#644a9b;">url(</span><span style="color:#bf0303;">&quot;components/button.css&quot;</span><span style="color:#644a9b;">)</span>;
27 27​
28 28​
29<span style="color:#898887;">/* Properties */</span> 29​<span style="color:#898887;">/* Properties */</span>
30 30​
31html, body { 31​html, body {
32 <span style="font-weight:bold;">font-family</span>: <span style="color:#bf0303;">&quot;Droid Sans&quot;</span>, Arial, <span style="color:#b08000;">sans-serif</span>; 32​ <span style="font-weight:bold;">font-family</span>: <span style="color:#bf0303;">&quot;Droid Sans&quot;</span>, Arial, <span style="color:#b08000;">sans-serif</span>;
33 <span style="font-weight:bold;">font-size</span>: <span style="color:#b08000;">11pt</span>; 33​ <span style="font-weight:bold;">font-size</span>: <span style="color:#b08000;">11</span><span style="color:#0057ae;">pt</span>;
34 <span style="font-weight:bold;">line-height</span>: <span style="color:#b08000;">1.5em</span>; 34​ <span style="font-weight:bold;">line-height</span>: <span style="color:#b08000;">1.5</span><span style="color:#0057ae;">em</span>;
35 <span style="font-weight:bold;">max-width</span>: calc(<span style="color:#b08000;">100%</span> - <span style="color:#b08000;">300px</span>); 35​ <span style="font-weight:bold;">max-width</span>: <span style="color:#644a9b;">calc(</span><span style="color:#b08000;">100</span><span style="color:#0057ae;">%</span> - <span style="color:#b08000;">300</span><span style="color:#0057ae;">px</span><span style="color:#644a9b;">)</span>;
36 <span style="font-weight:bold;">background</span>: <span style="color:#b08000;">#fff000</span>; 36​ <span style="font-weight:bold;">background</span>: <span style="color:#aa5500;">#fff000</span>;
37 <span style="font-weight:bold;">text-shadow</span>: <span style="color:#b08000;">0</span> <span style="color:#b08000;">0</span> <span style="color:#b08000;">2px</span> <span style="color:#644a9b;">rgba</span>(<span style="color:#b08000;">0</span>, <span style="color:#b08000;">0</span>, <span style="color:#b08000;">0</span>, <span style="color:#b08000;">0.3</span>); 37​ <span style="font-weight:bold;">text-shadow</span>: <span style="color:#b08000;">0</span> <span style="color:#b08000;">0</span> <span style="color:#b08000;">2</span><span style="color:#0057ae;">px</span> <span style="color:#644a9b;">rgba(</span><span style="color:#b08000;">0</span>, <span style="color:#b08000;">0</span>, <span style="color:#b08000;">0</span>, <span style="color:#b08000;">0.3</span><span style="color:#644a9b;">)</span>;
38 <span style="font-weight:bold;">box-sizing</span>: <span style="color:#b08000;">border-box</span>; 38​ <span style="font-weight:bold;">box-sizing</span>: <span style="color:#b08000;">border-box</span>;
39} 39​}
40 40​
41 41​
42<span style="color:#898887;">/* Selectors */</span> 42​<span style="color:#898887;">/* Selectors */</span>
43 43​
44blockquote { 44​blockquote {
45 <span style="font-weight:bold;">margin</span>: <span style="color:#b08000;">0</span>; 45​ <span style="font-weight:bold;">margin</span>: <span style="color:#b08000;">0</span>;
46} 46​}
47 47​
48header <span style="color:#006e28;font-weight:bold;">#logo</span> { 48​header <span style="color:#006e28;font-weight:bold;">#logo</span> {
49 <span style="font-weight:bold;">width</span>: <span style="color:#b08000;">100px</span>; 49​ <span style="font-weight:bold;">width</span>: <span style="color:#b08000;">100</span><span style="color:#0057ae;">px</span>;
50} 50​}
51 51​
52div<span style="color:#006e28;font-weight:bold;">#footer</span> <span style="color:#644a9b;">.link</span> { 52​div<span style="color:#006e28;font-weight:bold;">#footer</span> <span style="color:#644a9b;">.link</span> {
53 <span style="font-weight:bold;">color</span>: <span style="color:#b08000;">blue</span>; 53​ <span style="font-weight:bold;">color</span>: <span style="color:#aa5500;">blue</span>;
54} 54​}
55 55​
56sidebar <span style="color:#006e28;font-weight:bold;">#subscribe</span> <span style="color:#644a9b;">.subscribe_form</span> input<span style="color:#0095ff;font-weight:bold;">[type=</span><span style="color:#bf0303;">&quot;text&quot;</span><span style="color:#0095ff;font-weight:bold;">]</span> { 56​sidebar <span style="color:#006e28;font-weight:bold;">#subscribe</span> <span style="color:#644a9b;">.subscribe_form</span> input<span style="color:#0095ff;font-weight:bold;">[type</span>=<span style="color:#bf0303;">&quot;text&quot;</span><span style="color:#0095ff;font-weight:bold;">]</span> {
57 <span style="font-weight:bold;">font-size</span>: <span style="color:#b08000;">20px</span>; 57​ <span style="font-weight:bold;">font-size</span>: <span style="color:#b08000;">20</span><span style="color:#0057ae;">px</span>;
58} 58​}
59 59​
60sidebar <span style="color:#006e28;font-weight:bold;">#subscribe</span> <span style="color:#644a9b;">.subscribe_form</span><span style="color:#b08000;font-style:italic;">:nth-child</span>(2n + 1)<span style="color:#b08000;font-style:italic;">:hover</span> input<span style="color:#0095ff;font-weight:bold;">[class*=</span><span style="color:#bf0303;">&quot;small-&quot;</span><span style="color:#0095ff;font-weight:bold;">]</span> { 60​sidebar <span style="color:#006e28;font-weight:bold;">#subscribe</span> <span style="color:#644a9b;">.subscribe_form</span><span style="color:#b08000;font-style:italic;">:nth-child(2n + 1):hover</span> input<span style="color:#0095ff;font-weight:bold;">[class</span>*=<span style="color:#bf0303;">&quot;small-&quot;</span><span style="color:#0095ff;font-weight:bold;">]</span> {
61 <span style="font-weight:bold;">font-weight</span>: <span style="color:#b08000;">bold</span>; 61​ <span style="font-weight:bold;">font-weight</span>: <span style="color:#b08000;">bold</span>;
62} 62​}
63 63​
64 64​
65<span style="color:#898887;">/* Media Queries */</span> 65​<span style="color:#898887;">/* Media Queries */</span>
66 66​
67<span style="color:#ff5500;">@media</span> <span style="color:#b08000;">print</span> { 67​<span style="color:#ff5500;">@media</span> <span style="color:#b08000;">print</span> {
68 <span style="color:#644a9b;">.container</span> { 68​ <span style="color:#644a9b;">.container</span> {
69 <span style="font-weight:bold;">width</span>: <span style="color:#b08000;">100%</span>; 69​ <span style="font-weight:bold;">width</span>: <span style="color:#b08000;">100</span><span style="color:#0057ae;">%</span>;
70 } 70​ }
71} 71​}
72 72​
73<span style="color:#ff5500;">@media</span> <span style="color:#b08000;">screen</span> and (<span style="font-weight:bold;">min-width</span>: <span style="color:#b08000;">768px</span>) { 73​<span style="color:#ff5500;">@media</span> <span style="color:#b08000;">screen</span> <span style="font-weight:bold;">and</span> (<span style="font-weight:bold;">min-width</span>: <span style="color:#b08000;">768</span><span style="color:#0057ae;">px</span>) {
74 <span style="color:#644a9b;">.container</span> { 74​ <span style="color:#644a9b;">.container</span> {
75 <span style="font-weight:bold;">width</span>: <span style="color:#b08000;">600px</span>; 75​ <span style="font-weight:bold;">width</span>: <span style="color:#b08000;">600</span><span style="color:#0057ae;">px</span>;
76 } 76​ }
77} 77​}
78 78​
79<span style="color:#ff5500;">@media</span> <span style="color:#b08000;">screen</span> and (<span style="font-weight:bold;">min-width</span>: <span style="color:#b08000;">768px</span>) and (<span style="font-weight:bold;">max-width</span>: <span style="color:#b08000;">960px</span>) { 79​<span style="color:#ff5500;">@media</span> <span style="color:#b08000;">screen</span> <span style="font-weight:bold;">and</span> (<span style="font-weight:bold;">min-width</span>: <span style="color:#b08000;">768</span><span style="color:#0057ae;">px</span>) <span style="font-weight:bold;">and</span> (<span style="font-weight:bold;">max-width</span>: <span style="color:#b08000;">960</span><span style="color:#0057ae;">px</span>) {
80 <span style="color:#644a9b;">.container</span> { 80​ <span style="color:#644a9b;">.container</span> {
81 <span style="font-weight:bold;">width</span>: <span style="color:#b08000;">720px</span>; 81​ <span style="font-weight:bold;">width</span>: <span style="color:#b08000;">720</span><span style="color:#0057ae;">px</span>;
82 } 82​ }
83} 83​}
84 84​
85 85​
86<span style="color:#898887;">/* Fontface */</span> 86​<span style="color:#898887;">/* Fontface */</span>
87 87​
88<span style="color:#ff5500;">@font-face</span> { 88​<span style="color:#ff5500;">@font-face</span> {
89 <span style="font-weight:bold;">font-family</span>: MyHelvetica; 89​ <span style="font-weight:bold;">font-family</span>: MyHelvetica;
90 <span style="font-weight:bold;">src</span>: <span style="color:#644a9b;">local</span>(<span style="color:#bf0303;">&quot;Helvetica Neue Bold&quot;</span>), 90​ <span style="font-weight:bold;">src</span>: <span style="color:#644a9b;">local(</span><span style="color:#bf0303;">&quot;Helvetica Neue Bold&quot;</span><span style="color:#644a9b;">)</span>,
91 <span style="color:#644a9b;">local</span>(<span style="color:#bf0303;">&quot;HelveticaNeue-Bold&quot;</span>), 91​ <span style="color:#644a9b;">local(</span><span style="color:#bf0303;">&quot;HelveticaNeue-Bold&quot;</span><span style="color:#644a9b;">)</span>,
92 <span style="color:#644a9b;">url</span>(MgOpenModernaBold<span style="color:#b08000;">.</span>ttf); 92​ <span style="color:#644a9b;">url(</span><span style="color:#bf0303;">MgOpenModernaBold.ttf</span><span style="color:#644a9b;">)</span>;
93 <span style="font-weight:bold;">font-weight</span>: <span style="color:#b08000;">bold</span>; 93​ <span style="font-weight:bold;">font-weight</span>: <span style="color:#b08000;">bold</span>;
94} 94​}
95 95​
96<span style="color:#898887;">/* Animation (Keyframes) */</span> 96​<span style="color:#898887;">/* Animation (Keyframes) */</span>
97 97​
98<span style="color:#ff5500;">@keyframes</span> slidein { 98​<span style="color:#ff5500;">@keyframes</span> slidein {
99 from { 99​ <span style="color:#b08000;">from</span> {
100 <span style="font-weight:bold;">margin-left</span>: <span style="color:#b08000;">100%</span>; 100​ <span style="font-weight:bold;">margin-left</span>: <span style="color:#b08000;">100</span><span style="color:#0057ae;">%</span>;
101 <span style="font-weight:bold;">width</span>: <span style="color:#b08000;">300%</span>; 101​ <span style="font-weight:bold;">width</span>: <span style="color:#b08000;">300</span><span style="color:#0057ae;">%</span>;
102 } 102​ }
103 103​
104 to { 104​ <span style="color:#b08000;">to</span> {
105 <span style="font-weight:bold;">margin-left</span>: <span style="color:#b08000;">0%</span>; 105​ <span style="font-weight:bold;">margin-left</span>: <span style="color:#b08000;">0</span><span style="color:#0057ae;">%</span>;
106 <span style="font-weight:bold;">width</span>: <span style="color:#b08000;">100%</span>; 106​ <span style="font-weight:bold;">width</span>: <span style="color:#b08000;">100</span><span style="color:#0057ae;">%</span>;
107 } 107​ }
108} 108​}
109 109​
110 110​
111<span style="color:#898887;">/* Region markers */</span> 111​<span style="color:#898887;">/* Region markers */</span>
112 112​
113<span style="color:#0057ae;background-color:#e0e9f8;">/*BEGIN Comment */</span> 113​<span style="color:#0057ae;background-color:#e0e9f8;">/*BEGIN Comment */</span>
114 114​
115 115​
116 116​
117<span style="color:#0057ae;background-color:#e0e9f8;">/*END Comment */</span> 117​<span style="color:#0057ae;background-color:#e0e9f8;">/*END Comment */</span>
118 118​
119</pre></body></html> 119​</pre></body></html>