Terrible, but it's a start. See #298

raganwald · Jun 10, 2010 · 2fad255 · 2fad255
1 parent 2a31fe9
commit 2fad255
Show file tree

Hide file tree

Showing 9 changed files with 261 additions and 157 deletions.
diff --git a/c/application.css b/c/application.css
@@ -23,67 +23,19 @@
 .landscape .foot.toolbar {
   display: none; }
 
-.head.bubble {
-  margin-left: -200px; }
+.head.triangle-right {
+  left: 25%;
+  margin-left: -12.5%;
+  width: 25%;
+  margin-bottom: 10px;
+  z-index: 1; }
 
-.foot.bubble {
-  margin-left: 0;
-  /* NOTE: webkit gradient implementation is not as per spec */
-  background: -webkit-gradient(linear, left top, left bottom, from(#f9d835), to(#f3961c));
-  background: -moz-linear-gradient(top, #f9d835, #f3961c);
-  background: -o-linear-gradient(top, #f9d835, #f3961c);
-  background: linear-gradient(top, #f9d835, #f3961c); }
-  .foot.bubble:after {
-    top: -30px;
-    /* value = - border-top-width - border-bottom-width */
-    right: 50px;
-    /* controls horizontal position */
-    bottom: auto;
-    left: auto;
-    border-color: transparent transparent #f9d835; }
-
-.message {
-  width: 200px;
-  overflow: hidden;
-  position: relative;
-  left: 50%; }
-  .message .bubble {
-    margin-bottom: 1em; }
-
-.bubble {
-  /* #f3961c */
-  /* #f9d835 */
-  position: relative;
-  padding: 15px;
-  margin: 1em 0 3em;
-  color: black;
-  background: #f9d835;
-  /* default background for browsers without gradient support */
-  /* css3 */
-  -moz-border-radius: 10px;
-  -webkit-border-radius: 10px;
-  border-radius: 10px;
-  /* NOTE: webkit gradient implementation is not as per spec */
-  background: -webkit-gradient(linear, left top, left bottom, from(#f3961c), to(#f9d835));
-  background: -moz-linear-gradient(top, #f3961c, #f9d835);
-  background: -o-linear-gradient(top, #f3961c, #f9d835);
-  background: linear-gradient(top, #f3961c, #f9d835); }
-  .bubble:after {
-    content: "\00a0";
-    display: block;
-    /* reduce the damage in FF3.0 */
-    position: absolute;
-    z-index: -1;
-    bottom: -30px;
-    /* value = - border-top-width - border-bottom-width */
-    left: 50px;
-    /* controls horizontal position */
-    width: 0;
-    height: 0;
-    border-width: 15px 15px;
-    /* vary these values to change the angle of the vertex */
-    border-style: solid;
-    border-color: #f9d835 transparent transparent; }
+.foot.triangle-right {
+  left: 75%;
+  margin-left: -12.5%;
+  width: 25%;
+  z-index: 1;
+  margin-top: 10px; }
 
 .new_game ul li {
   position: relative !important; }
@@ -113,5 +65,14 @@
 .progress .ui-dialog-titlebar {
   display: none; }
 
-.iconButton {
-  float: right; }
+.board .captured img {
+  height: 30px;
+  width: 30px;
+  -o-background-size: 100%;
+  -webkit-background-size: 100%;
+  -khtml-background-size: 100%;
+  -moz-background-size: 100%; }
+.board .captured.black img {
+  background: url(../i/ghost-black.png); }
+.board .captured.white img {
+  background: url(../i/ghost-white.png); }
diff --git a/c/board.ipad.css b/c/board.ipad.css
@@ -340,17 +340,25 @@
   left: 100%;
   margin-left: -100%; }
 
-.landscape .move.play .board .head {
+.head, .foot {
+  height: 30px;
+  padding: 5px 5px 5px 5px; }
+
+.profile .move.play .board .head .guest {
+  display: inline;
+  float: right;
+  -webkit-transform: rotate(180deg); }
+.profile .move.play .board .foot .white {
   display: none; }
-.landscape .move.play .board .foot .black {
+.profile .move.play .board .foot .black {
   display: inline;
-  float: left;
-  margin-left: 10px; }
-  .landscape .move.play .board .foot .black:before {
-    content: url("../i/simple-black.png"); }
+  float: right; }
+
+.landscape .move.play .board .head {
+  display: none; }
 .landscape .move.play .board .foot .white {
   display: inline;
-  float: right;
-  margin-right: 10px; }
-  .landscape .move.play .board .foot .white:after {
-    content: url("../i/simple-white.png"); }
+  float: left; }
+.landscape .move.play .board .foot .black {
+  display: inline;
+  float: right; }
diff --git a/c/sass/application.sass b/c/sass/application.sass
@@ -30,68 +30,22 @@ $lightgrey: #333
 $messagewidth: 200px
 $bubblefrom: #f3961c
 $bubbleto: #f9d835
-
-.head.bubble
-  margin-left: -1 * $messagewidth
 
-.foot.bubble
-  margin-left: 0
-  /* NOTE: webkit gradient implementation is not as per spec
-  background: -webkit-gradient(linear, left top, left bottom, from($bubbleto), to($bubblefrom))
-  background: -moz-linear-gradient(top, $bubbleto, $bubblefrom)
-  background: -o-linear-gradient(top, $bubbleto, $bubblefrom)
-  background: linear-gradient(top, $bubbleto, $bubblefrom)
-  &:after
-    top: -30px
-    /* value = - border-top-width - border-bottom-width
-    right: 50px
-    /* controls horizontal position
-    bottom: auto
-    left: auto
-    border-color: transparent transparent $bubbleto
-
-.message
-  width: $messagewidth
-  overflow: hidden
-  position: relative
-  left: 50%
-  .bubble
-    margin-bottom: 1em
+$separation_between_board_and_bubble: 10px
 
-.bubble
-  /* #f3961c
-  /* #f9d835
-  position: relative
-  padding: 15px
-  margin: 1em 0 3em
-  color: $black
-  background: $bubbleto
-  /* default background for browsers without gradient support
-  /* css3
-  -moz-border-radius: 10px
-  -webkit-border-radius: 10px
-  border-radius: 10px
-  /* NOTE: webkit gradient implementation is not as per spec
-  background: -webkit-gradient(linear, left top, left bottom, from($bubblefrom), to($bubbleto))
-  background: -moz-linear-gradient(top, $bubblefrom, $bubbleto)
-  background: -o-linear-gradient(top, $bubblefrom, $bubbleto)
-  background: linear-gradient(top, $bubblefrom, $bubbleto)
-  &:after
-    content: "\00a0"
-    display: block
-    /* reduce the damage in FF3.0
-    position: absolute
-    z-index: -1
-    bottom: -30px
-    /* value = - border-top-width - border-bottom-width
-    left: 50px
-    /* controls horizontal position
-    width: 0
-    height: 0
-    border-width: 15px 15px
-    /* vary these values to change the angle of the vertex
-    border-style: solid
-    border-color: $bubbleto transparent transparent
+.head.triangle-right
+  left: 25%
+  margin-left: -12.5%
+  width: 25%
+  margin-bottom: $separation_between_board_and_bubble
+  z-index: 1
+
+.foot.triangle-right
+  left: 75%
+  margin-left: -12.5%
+  width: 25%
+  z-index: 1
+  margin-top: $separation_between_board_and_bubble
 
 .new_game
   ul
@@ -128,5 +82,18 @@ $bubbleto: #f9d835
   .ui-dialog-titlebar
     :display none
 
-.iconButton
-  :float right
+.board
+  .captured
+    img
+      height: 30px
+      width: 30px
+      -o-background-size: 100%
+      -webkit-background-size: 100%
+      -khtml-background-size: 100%
+      -moz-background-size: 100%
+    &.black
+      img
+        background: url(../i/ghost-black.png)
+    &.white
+      img
+        background: url(../i/ghost-white.png)
diff --git a/c/sass/board.ipad.sass b/c/sass/board.ipad.sass
@@ -384,22 +384,37 @@ $zoom_in_size: $large
       display: inline
       left: 100%
       margin-left: -100%
-
+
+$stonediameter: 30px
+
+.head,.foot
+  height: $stonediameter
+  padding: 5px 5px 5px 5px
+
+.profile
+  .move.play
+    .board
+      .head
+        .guest
+          display: inline
+          float: right
+          -webkit-transform: rotate(180deg)
+      .foot
+        .white
+          display: none
+        .black
+          display: inline
+          float: right
+
 .landscape
   .move.play
     .board
       .head
         display: none
       .foot
-        .black
+        .white
           display: inline
           float: left
-          margin-left: 10px
-          &:before 
-            content: url("../i/simple-black.png")
-        .white
+        .black
           display: inline
-          float: right
-          margin-right: 10px
-          &:after 
-            content: url("../i/simple-white.png")
+          float: right