pjs/minimo/components/ssr/smallScreen.css

75 строки
1.9 KiB
CSS
Executable File

/* Note we added 'html' to all the rules. This is now here because with the previous rule
the following definition applied to everything including dialog windows. So far, only HTML content.
If you load other namespace SVG HTML many other things, small screen wont work */
html * {
/* on a small screen, we need to use a readable font */
font-size: small ! important;
}
/* for all elements but the root element and the body, let's */
/* cancel all annoying document's settings */
html *:not(select):not(option):not(optgroup) {
/* first cancel all size settings */
width: auto ! important;
height: auto ! important;
/* and make the width adjust to screen layout for the device */
max-width: 100% ! important;
/* max-heights should not apply to small screens */
max-height: none ! important;
/* remove all positioning */
position: static ! important;
/* remove all positioning offsets */
top: auto ! important;
left: auto ! important;
/* and cancel floats */
float: none ! important;
/* margins and paddings have to be changed */
padding: 0px ! important;
margin: 0px ! important;
/* avoid overflow on pre and table cells */
white-space: normal ! important;
}
html table,html tbody,html thead,html tfoot,html tr,html td,html th,html col,html colgroup {
/* we need to "flatten" all tables */
display: block ! important;
}
html img[width="1"], html img[height="1"] {
/* let's get rid of 1 pixel wide/high images */
display: none ! important;
}
html li {
/* better placement of the bullet on a small screen */
list-style-position: inside ! important;
}
html :-moz-any-link {
/* we need to make anchors more visible */
text-decoration: underline !important;
}
html ul,html ol {
display: block ! important;
}
html li {
display: list-item ! important;
}
html a {
background-image: none ! important;
}
html img[src*="spacer"] {
display: none ! important;
}