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;
+ max-width: 800px;
+ 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;
}
}
.bar.navbar {
- padding-left: calc(50% - (4 * 64px / 2));
+ padding-left: calc(min(50%, 800px / 2) - (4 * 64px / 2));
}
.bar.optionbar {
- bottom: 0;
+ bottom: 0;
}
.bar.optionbar.s1 {
- padding-left: calc(50% - (1 * 64px / 2));
+ padding-left: calc(min(50%, 800px / 2) - (1 * 64px / 2));
}
.bar.optionbar.s4 {
- padding-left: calc(50% - (4 * 64px / 2));
+ padding-left: calc(min(50%, 800px / 2) - (4 * 64px / 2));
}
.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;
}