summaryrefslogtreecommitdiff
path: root/www/css/index.css
diff options
context:
space:
mode:
Diffstat (limited to 'www/css/index.css')
-rw-r--r--www/css/index.css183
1 files changed, 101 insertions, 82 deletions
diff --git a/www/css/index.css b/www/css/index.css
index 2fedd0e..2883101 100644
--- a/www/css/index.css
+++ b/www/css/index.css
@@ -1,3 +1,4 @@
+/* font-face */
@font-face {
font-family: "Playtime";
/* src: url("playtime.ttf"); */
@@ -12,62 +13,55 @@
src: url("font/GentiumPlus.ttf");
src: url("font/GentiumPlus.woff");
}
-body {
- margin: 0;
- padding: 0;
- background: gray;
- font: 22px/27px Playtime, sans-serif;
-}
+
+/* general styling */
* {
-moz-user-select: -moz-none;
-webkit-user-select: none;
-ms-user-select: none;
user-select: none;
}
-#container, #bg, #vid {
- cursor: url("../dump/ui/mousecursor.png"), default;
- position: absolute;
+body {
+ margin: 0;
+ padding: 0;
+ background: gray;
+ font: 22px/27px Playtime, sans-serif;
}
-#container, #bg.scale, #vid.scale {
- top: 50%;
- left: 50%;
+h2 {
+ font: 20px/28px Playtime; /* yes, h2 has *smaller* font */
+ font-weight: bold;
}
-#container {
- width: 800px;
- height: 600px;
- margin-top: -300px;
- margin-left: -400px;
+
+/* input */
+label {
+ display: block;
}
-#who {
- color: black;
- position: absolute;
- top: 452px;
- left: 12px;
- font-weight: bold;
+.button, h2, label {
+ opacity: 0.4;
}
-.say {
- color: white;
+.button-disabled {
+ opacity: 0.1;
}
-#say {
- width: 750px;
- height: 90px;
- position: absolute;
- top: 493px;
- left: 28px;
+.button:not(.button-disabled):hover {
+ opacity: 1;
}
-#window-image {
- position: absolute;
- top: 440px;
- left: 0;
+input[type="checkbox"] {
+ display: none;
}
-#gray {
- position: absolute;
- width: 100%;
- height: 100%;
- background-color: rgb(64, 64, 64);
- background-color: rgba(64, 64, 64, 0.8);
- z-index: 9;
+input[type="checkbox"] + span:before {
+ display: inline-block;
+ height: 19px;
+ width: 20px;
+ content: "";
+ background-position: left -2px top -3px;
+ background-repeat: no-repeat;
+ background-image: url("../dump/ui/bt-cf-unchecked.png");
+}
+input[type="checkbox"]:checked + span:before {
+ background-image: url("../dump/ui/bt-cf-checked.png");
}
+
+/* warnings */
#warn-container {
visibility: hidden;
cursor: auto;
@@ -89,61 +83,78 @@ html.no-js #warn-container {
width: 600px;
z-index: 10;
}
-h2 {
- font: 20px/28px Playtime;
- font-weight: bold;
-}
-html.no-js #warn li:not(#js) { display: none; }
+html.no-js #warn li { display: none; }
+html.js #warn noscript { display: none; }
#warn li#ie { display: none; }
html.video #warn li#video { display: none; }
html.audio #warn li#audio { display: none; }
html.fontface #warn li#fontface { display: none; }
html.csstransforms #warn li#csstransforms { display: none; }
html.csstransitions #warn li#csstransitions { display: none; }
-label {
- display: block;
-}
-.button, h2, label {
- opacity: 0.4;
-}
-.button-disabled {
- opacity: 0.1;
-}
-.button-enabled:hover {
- opacity: 1;
-}
#gotit {
text-align: center;
}
html.no-js #gotit {
display: none;
}
-#main-menu-buttons .button {
- margin: 4px;
+
+/* wooo, the real content */
+#container, #vid {
+ cursor: url("../dump/ui/mousecursor.png"), default;
+ position: absolute;
+ -moz-backface-visibility: hidden;
+ -webkit-backface-visibility: hidden;
+ backface-visibility: hidden;
}
-input[type="checkbox"] {
- display: none;
+#container, #vid.scale {
+ top: 50%;
+ left: 50%;
}
-input[type="checkbox"] + span:before {
- display: inline-block;
- height: 19px;
- width: 20px;
- content: "";
- background: url("../dump/ui/bt-cf-unchecked.png") no-repeat left bottom;
+#container {
+ width: 800px;
+ height: 600px;
+ margin-top: -300px;
+ margin-left: -400px;
+ overflow: hidden;
}
-input[type="checkbox"]:checked + span:before {
- background: url("../dump/ui/bt-cf-checked.png") no-repeat left bottom;
+#show img {
+ position: absolute;
}
-#ctc, #nvlctc {
+#window {
+ background: url("../dump/ui/bg-say.png");
+ width: 800px;
+ height: 160px;
position: absolute;
- bottom: 20px;
- right: 10px;
- -webkit-animation: blink 2s infinite;
- -moz-animation: blink 2s infinite;
- animation: blink 2s infinite;
+ top: 440px;
+ left: 0;
}
-#nvlctc {
- bottom: 25px;
+#who {
+ color: black;
+ position: absolute;
+ top: 12px;
+ left: 12px;
+ font-weight: bold;
+}
+.say {
+ color: white;
+}
+#say {
+ width: 750px;
+ height: 90px;
+ position: absolute;
+ top: 53px;
+ left: 28px;
+}
+#gray {
+ position: absolute;
+ width: 100%;
+ height: 100%;
+ background-color: rgb(64, 64, 64);
+ background-color: rgba(64, 64, 64, 0.8);
+ z-index: 9;
+}
+#main-menu-buttons .button {
+ margin: 4px;
}
#nvl {
position: absolute;
@@ -160,6 +171,17 @@ input[type="checkbox"]:checked + span:before {
display: block;
margin: 10px 8px;
}
+#ctc, #nvlctc {
+ position: absolute;
+ bottom: 20px;
+ right: 10px;
+ -webkit-animation: blink 2s infinite;
+ -moz-animation: blink 2s infinite;
+ animation: blink 2s infinite;
+}
+#nvlctc {
+ bottom: 25px;
+}
.centered {
width: 100%;
text-align: center;
@@ -173,6 +195,3 @@ input[type="checkbox"]:checked + span:before {
background: url("../dump/ui/bg-choice.png") no-repeat top center;
height: 35px;
}
-#show img {
- position: absolute;
-}