html, body, .main {
margin: 0;
padding: 0;
- font-family : Verdana, "Bitstream Vera Sans", "DejaVu Sans", Tahoma, Geneva, Arial, Sans-serif;
+ font-family: Verdana, "Bitstream Vera Sans", "DejaVu Sans", Tahoma, Geneva, Arial, Sans-serif;
font-size: 12px;
- DISABLED_color: #635c4a;
height: 100%;
}
}
.main {
- display: block;
+ margin: auto;
}
.message {
- background-color: #ddffdd;
- border: 1px solid #88dd88;
- clear: left;
- border-radius: 5px;
- padding: 5px;
- margin: 10px;
+ background-color: #ddffdd;
+ border: 1px solid #88dd88;
+ clear: left;
+ border-radius: 5px;
+ padding: 5px;
+ margin: 10px;
}
.error {
- background-color: #ffdddd;
- border: 1px solid #dd8888;
- clear: left;
- border-radius: 5px;
- padding: 5px;
- margin: 10px;
+ background-color: #ffdddd;
+ border: 1px solid #dd8888;
+ clear: left;
+ border-radius: 5px;
+ padding: 5px;
+ margin: 10px;
}
/* all links and clickable should show a pointer cursor */
display: block;
background: white;
position: fixed;
+ margin: auto;
}
.viewer {
padding-bottom: 64px;
}
+.viewer.img {
+ margin: auto;
+ display: block;
+}
+
a.viewer.link:hover {
background-color: transparent;
}
padding-right: 10px;
}
-.bar.navbar {
- padding-left: calc(50% - (4 * 64px / 2));
-}
+.bar.navbar { padding-left: calc(50% - (4 * 64px / 2)); }
-.bar.optionbar {
- bottom: 0;
-}
+.bar.optionbar.s1 { padding-left: calc(50% - (1 * 64px / 2)); }
+.bar.optionbar.s4 { padding-left: calc(50% - (4 * 64px / 2)); }
-.bar.optionbar.s1 {
- padding-left: calc(50% - (1 * 64px / 2));
-}
-
-.bar.optionbar.s4 {
- padding-left: calc(50% - (4 * 64px / 2));
+.bar.optionbar {
+ bottom: 0;
}
.bar .button {
margin: 5px;
}
+.bar .button[disabled] {
+ pointer-events: none;
+ background-color: #aaa;
+ filter: grayscale(100%);
+ border-color: gray;
+}
+
.bar .button:hover {
background-color: bac2e1;
}
.bar .button.zoomreal { background-image: url('/actual_size-32x32.png'); }
.bar .button.zoomwidth { background-image: url('/fit_to_width-32x32.png'); }
.bar .button.zoomheight { background-image: url('/fit_to_height-32x32.png'); }
+
+@media(min-width: 800px) {
+ .main {
+ max-width: 800px;
+ }
+
+ .bar.navbar { padding-left: calc(400px - (4 * 64px / 2)); }
+
+ .bar.optionbar.s1 { padding-left: calc(400px - (1 * 64px / 2)); }
+ .bar.optionbar.s4 { padding-left: calc(400px - (4 * 64px / 2)); }
+}