Light reskin of beta homepage

build/less/definitions/elements/button.less

@@ -277,6 +277,22 @@
   text-shadow: none !important;
 }
 
+.ui.inverted.buttons .button {
+  margin: @invertedGroupButtonOffset;
+}
+.ui.inverted.buttons .button:first-child {
+  margin-left: 0em;
+}
+.ui.inverted.vertical.buttons .button {
+  margin: @invertedVerticalGroupButtonOffset;
+}
+.ui.inverted.vertical.buttons .button:first-child {
+  margin-top: 0em;
+}
+.ui.inverted.buttons .button:hover {
+  position: relative;
+}
+
 .ui.inverted.button:hover {
   background: @white none;
   box-shadow: 0px 0px 0px 2px @white inset !important;
@@ -714,29 +730,30 @@
 .ui.basic.inverted.button {
   background-color: transparent !important;
   color: @offWhite !important;
-  box-shadow: @whiteBorderColor;
+  box-shadow: @basicInvertedBoxShadow !important;
 }
 .ui.basic.inverted.buttons .button:hover,
 .ui.basic.inverted.button:hover {
   color: @white !important;
-  box-shadow: @whiteBorderColor;
+  box-shadow: @basicInvertedHoverBoxShadow !important;
 }
 .ui.basic.inverted.buttons .button:active,
 .ui.basic.inverted.button:active {
   background-color: @transparentWhite !important;
   color: @white !important;
-  box-shadow: @selectedWhiteBorderColor !important;
+  box-shadow: @basicInvertedDownBoxShadow !important;
 }
 .ui.basic.inverted.buttons .button.active,
 .ui.basic.inverted.button.active {
   background-color: @transparentWhite;
   color: @invertedTextColor;
   text-shadow: @invertedTextShadow;
-  box-shadow: none;
+  box-shadow: @basicInvertedActiveBoxShadow;
 }
 .ui.basic.inverted.buttons .button.active:hover,
 .ui.basic.inverted.button.active:hover {
   background-color: @strongTransparentWhite;
+  box-shadow: @basicInvertedHoverBoxShadow !important;
 }
 
 /* Loading */
@@ -1158,7 +1175,7 @@
 .ui.inverted.black.buttons .basic.button,
 .ui.inverted.black.basic.button {
   background-color: transparent;
-  box-shadow: 0px 0px 0px 2px @white inset !important;
+  box-shadow: @basicInvertedBoxShadow !important;
   color: @white;
 }
 .ui.inverted.black.basic.buttons .button:hover,
@@ -1220,7 +1237,7 @@
 .ui.inverted.blue.buttons .basic.button,
 .ui.inverted.blue.basic.button {
   background-color: transparent;
-  box-shadow: 0px 0px 0px 2px @white inset !important;
+  box-shadow: @basicInvertedBoxShadow !important;
   color: @white;
 }
 .ui.inverted.blue.basic.buttons .button:hover,
@@ -1279,7 +1296,7 @@
 .ui.inverted.green.buttons .basic.button,
 .ui.inverted.green.basic.button {
   background-color: transparent;
-  box-shadow: 0px 0px 0px 2px @white inset !important;
+  box-shadow: @basicInvertedBoxShadow !important;
   color: @white;
 }
 .ui.inverted.green.basic.buttons .button:hover,
@@ -1337,7 +1354,7 @@
 .ui.inverted.orange.buttons .basic.button,
 .ui.inverted.orange.basic.button {
   background-color: transparent;
-  box-shadow: 0px 0px 0px 2px @white inset !important;
+  box-shadow: @basicInvertedBoxShadow !important;
   color: @white;
 }
 .ui.inverted.orange.basic.buttons .button:hover,
@@ -1395,7 +1412,7 @@
 .ui.inverted.pink.buttons .basic.button,
 .ui.inverted.pink.basic.button {
   background-color: transparent;
-  box-shadow: 0px 0px 0px 2px @white inset !important;
+  box-shadow: @basicInvertedBoxShadow !important;
   color: @white;
 }
 .ui.inverted.pink.basic.buttons .button:hover,
@@ -1453,7 +1470,7 @@
 .ui.inverted.purple.buttons .basic.button,
 .ui.inverted.purple.basic.button {
   background-color: transparent;
-  box-shadow: 0px 0px 0px 2px @white inset !important;
+  box-shadow: @basicInvertedBoxShadow !important;
   color: @white;
 }
 .ui.inverted.purple.basic.buttons .button:hover,
@@ -1511,7 +1528,7 @@
 .ui.inverted.red.buttons .basic.button,
 .ui.inverted.red.basic.button {
   background-color: transparent;
-  box-shadow: 0px 0px 0px 2px @white inset !important;
+  box-shadow: @basicInvertedBoxShadow !important;
   color: @white;
 }
 .ui.inverted.red.basic.buttons .button:hover,
@@ -1570,7 +1587,7 @@
 .ui.inverted.teal.buttons .basic.button,
 .ui.inverted.teal.basic.button {
   background-color: transparent;
-  box-shadow: 0px 0px 0px 2px @white inset !important;
+  box-shadow: @basicInvertedBoxShadow !important;
   color: @white;
 }
 .ui.inverted.teal.basic.buttons .button:hover,
@@ -1629,7 +1646,7 @@
 .ui.inverted.yellow.buttons .basic.button,
 .ui.inverted.yellow.basic.button {
   background-color: transparent;
-  box-shadow: 0px 0px 0px 2px @white inset !important;
+  box-shadow: @basicInvertedBoxShadow !important;
   color: @white;
 }
 .ui.inverted.yellow.basic.buttons .button:hover,
@@ -1738,7 +1755,7 @@
   margin: 0em;
   float: left;
   border-radius: 0em;
-  margin: 0px 0px 0px -1px;
+  margin: @groupButtonOffset;
 }
 .ui.buttons .button:first-child  {
   margin-left: 0em;
@@ -1758,7 +1775,7 @@
 .ui.vertical.buttons .button {
   display: block;
   float: none;
-  margin: 0px 0px -1px 0px;
+  margin: @verticalGroupOffset;
   box-shadow: @verticalBoxShadow;
 }
 .ui.vertical.buttons .button:first-child,

build/less/definitions/elements/icon.less

@@ -199,16 +199,6 @@ i.bordered.inverted.icon {
   box-shadow: none;
 }
 
-
-/*-------------------
-      Inverted
---------------------*/
-
-i.inverted.icon {
-  background-color: #222222;
-  color: #FFFFFF;
-}
-
 /*-------------------
        Colors
 --------------------*/
@@ -244,46 +234,84 @@ i.yellow.icon {
   color: @yellow !important;
 }
 
+
 /*-------------------
-   Inverted Colors
+      Inverted
 --------------------*/
 
+i.inverted.icon {
+  color: @white;
+}
 i.inverted.black.icon {
-  background-color: @lightBlack !important;
-  color: #FFFFFF !important;
+  color: @lightBlack !important;
 }
 i.inverted.blue.icon {
-  background-color: @lightBlue !important;
-  color: #FFFFFF !important;
+  color: @lightBlue !important;
 }
 i.inverted.green.icon {
-  background-color: @lightGreen !important;
-  color: #FFFFFF !important;
+  color: @lightGreen !important;
 }
 i.inverted.orange.icon {
-  background-color: @lightOrange !important;
-  color: #FFFFFF !important;
+  color: @lightOrange !important;
 }
 i.inverted.pink.icon {
-  background-color: @lightPink !important;
-  color: #FFFFFF !important;
+  color: @lightPink !important;
 }
 i.inverted.purple.icon {
-  background-color: @lightPurple !important;
-  color: #FFFFFF !important;
+  color: @lightPurple !important;
 }
 i.inverted.red.icon {
-  background-color: @lightRed !important;
-  color: #FFFFFF !important;
+  color: @lightRed !important;
 }
 i.inverted.teal.icon {
-  background-color: @lightTeal !important;
-  color: #FFFFFF !important;
+  color: @lightTeal !important;
 }
 i.inverted.yellow.icon {
-  background-color: @lightYellow !important;
+  color: @lightYellow !important;
+}
+
+/* Inverted Circular */
+i.inverted.circular.icon {
+  background-color: #222222 !important;
+  color: #FFFFFF !important;
+}
+i.inverted.circular.black.icon {
+  background-color: @black !important;
+  color: #FFFFFF !important;
+}
+i.inverted.circular.blue.icon {
+  background-color: @blue !important;
+  color: #FFFFFF !important;
+}
+i.inverted.circular.green.icon {
+  background-color: @green !important;
+  color: #FFFFFF !important;
+}
+i.inverted.circular.orange.icon {
+  background-color: @orange !important;
+  color: #FFFFFF !important;
+}
+i.inverted.circular.pink.icon {
+  background-color: @pink !important;
+  color: #FFFFFF !important;
+}
+i.inverted.circular.purple.icon {
+  background-color: @purple !important;
+  color: #FFFFFF !important;
+}
+i.inverted.circular.red.icon {
+  background-color: @red !important;
   color: #FFFFFF !important;
 }
+i.inverted.circular.teal.icon {
+  background-color: @teal !important;
+  color: #FFFFFF !important;
+}
+i.inverted.circular.yellow.icon {
+  background-color: @yellow !important;
+  color: #FFFFFF !important;
+}
+
 
 /*-------------------
         Sizes

build/less/themes/packages/default/elements/button.variables

@@ -59,7 +59,8 @@
 --------------------*/
 
 @verticalBoxShadow: 0px 0px 0px 1px @borderColor inset;
-
+@groupButtonOffset: 0px 0px 0px -1px;
+@verticalGroupOffset: 0px 0px -1px 0px;
 
 /*-------------------
         States
@@ -146,6 +147,10 @@
 @labeledIconLeftShadow: -1px 0px 0px 0px @labeledIconBorder inset;
 @labeledIconRightShadow: 1px 0px 0px 0px @labeledIconBorder inset;
 
+/* Inverted */
+@invertedGroupButtonOffset: 0px 0px 0px -2px;
+@invertedVerticalGroupButtonOffset: 0px 0px -2px 0px;
+
 /* Basic */
 @basicBoxShadow: 0px 0px 0px 1px @borderColor;
 @iconOffset: 0.05em;
@@ -156,7 +161,6 @@
 
 @basicDownBackground: rgba(0, 0, 0, 0.02);
 @basicDownBoxShadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.2);
-
 @basicActiveBackground: @transparentBlack;
 @basicActiveColor: @selectedTextColor;
 
@@ -166,10 +170,10 @@
 @basicInvertedDownBackground: @transparentWhite;
 @basicInvertedActiveBackground: @transparentWhite;
 
-@basicInvertedBoxShadow: 0px 0px 0px 2px rgba(255, 255, 255, 0.5);
-@basicInvertedHoverBoxShadow: 0px 0px 0px 2px @selectedWhiteBorderColor;
-@basicInvertedDownBoxShadow: 0px 0px 0px 2px @selectedWhiteBorderColor;
-@basicInvertedActiveBoxShadow: 0px 0px 0px 2px @selectedWhiteBorderColor;
+@basicInvertedBoxShadow: 0px 0px 0px 2px #999999 inset;
+@basicInvertedHoverBoxShadow: 0px 0px 0px 2px #FFFFFF inset;
+@basicInvertedDownBoxShadow: 0px 0px 0px 2px #CCCCCC inset;
+@basicInvertedActiveBoxShadow: 0px 0px 0px 2px #DADADA inset;
 
 @basicInvertedColor: @darkWhite;
 @basicInvertedHoverColor: @darkWhiteHover;

build/packaged/definitions/css/semantic.css

@@ -5262,6 +5262,7 @@ body > .ui.grid:not(.page) {
 /* Or */
 /* Icon */
 /* Labeled Icon */
+/* Inverted */
 /* Basic */
 /* Basic Inverted */
 /* Basic Group */
@@ -5546,6 +5547,21 @@ body > .ui.grid:not(.page) {
   color: #ffffff;
   text-shadow: none !important;
 }
+.ui.inverted.buttons .button {
+  margin: 0px 0px 0px -2px;
+}
+.ui.inverted.buttons .button:first-child {
+  margin-left: 0em;
+}
+.ui.inverted.vertical.buttons .button {
+  margin: 0px 0px -2px 0px;
+}
+.ui.inverted.vertical.buttons .button:first-child {
+  margin-top: 0em;
+}
+.ui.inverted.buttons .button:hover {
+  position: relative;
+}
 .ui.inverted.button:hover {
   background: #ffffff none;
   -webkit-box-shadow: 0px 0px 0px 2px #ffffff inset !important;
@@ -5985,33 +6001,35 @@ body > .ui.grid:not(.page) {
 .ui.basic.inverted.button {
   background-color: transparent !important;
   color: #fafafa !important;
-  -webkit-box-shadow: rgba(255, 255, 255, 0.2);
-          box-shadow: rgba(255, 255, 255, 0.2);
+  -webkit-box-shadow: 0px 0px 0px 2px #999999 inset !important;
+          box-shadow: 0px 0px 0px 2px #999999 inset !important;
 }
 .ui.basic.inverted.buttons .button:hover,
 .ui.basic.inverted.button:hover {
   color: #ffffff !important;
-  -webkit-box-shadow: rgba(255, 255, 255, 0.2);
-          box-shadow: rgba(255, 255, 255, 0.2);
+  -webkit-box-shadow: 0px 0px 0px 2px #ffffff inset !important;
+          box-shadow: 0px 0px 0px 2px #ffffff inset !important;
 }
 .ui.basic.inverted.buttons .button:active,
 .ui.basic.inverted.button:active {
   background-color: rgba(255, 255, 255, 0.05) !important;
   color: #ffffff !important;
-  -webkit-box-shadow: rgba(255, 255, 255, 0.8) !important;
-          box-shadow: rgba(255, 255, 255, 0.8) !important;
+  -webkit-box-shadow: 0px 0px 0px 2px #cccccc inset !important;
+          box-shadow: 0px 0px 0px 2px #cccccc inset !important;
 }
 .ui.basic.inverted.buttons .button.active,
 .ui.basic.inverted.button.active {
   background-color: rgba(255, 255, 255, 0.05);
   color: #ffffff;
   text-shadow: none;
-  -webkit-box-shadow: none;
-          box-shadow: none;
+  -webkit-box-shadow: 0px 0px 0px 2px #dadada inset;
+          box-shadow: 0px 0px 0px 2px #dadada inset;
 }
 .ui.basic.inverted.buttons .button.active:hover,
 .ui.basic.inverted.button.active:hover {
   background-color: rgba(255, 255, 255, 0.01);
+  -webkit-box-shadow: 0px 0px 0px 2px #ffffff inset !important;
+          box-shadow: 0px 0px 0px 2px #ffffff inset !important;
 }
 /* Loading */
 .ui.basic.loading.button:after {
@@ -6401,8 +6419,8 @@ body > .ui.grid:not(.page) {
 .ui.inverted.black.buttons .basic.button,
 .ui.inverted.black.basic.button {
   background-color: transparent;
-  -webkit-box-shadow: 0px 0px 0px 2px #ffffff inset !important;
-          box-shadow: 0px 0px 0px 2px #ffffff inset !important;
+  -webkit-box-shadow: 0px 0px 0px 2px #999999 inset !important;
+          box-shadow: 0px 0px 0px 2px #999999 inset !important;
   color: #ffffff;
 }
 .ui.inverted.black.basic.buttons .button:hover,
@@ -6465,8 +6483,8 @@ body > .ui.grid:not(.page) {
 .ui.inverted.blue.buttons .basic.button,
 .ui.inverted.blue.basic.button {
   background-color: transparent;
-  -webkit-box-shadow: 0px 0px 0px 2px #ffffff inset !important;
-          box-shadow: 0px 0px 0px 2px #ffffff inset !important;
+  -webkit-box-shadow: 0px 0px 0px 2px #999999 inset !important;
+          box-shadow: 0px 0px 0px 2px #999999 inset !important;
   color: #ffffff;
 }
 .ui.inverted.blue.basic.buttons .button:hover,
@@ -6529,8 +6547,8 @@ body > .ui.grid:not(.page) {
 .ui.inverted.green.buttons .basic.button,
 .ui.inverted.green.basic.button {
   background-color: transparent;
-  -webkit-box-shadow: 0px 0px 0px 2px #ffffff inset !important;
-          box-shadow: 0px 0px 0px 2px #ffffff inset !important;
+  -webkit-box-shadow: 0px 0px 0px 2px #999999 inset !important;
+          box-shadow: 0px 0px 0px 2px #999999 inset !important;
   color: #ffffff;
 }
 .ui.inverted.green.basic.buttons .button:hover,
@@ -6593,8 +6611,8 @@ body > .ui.grid:not(.page) {
 .ui.inverted.orange.buttons .basic.button,
 .ui.inverted.orange.basic.button {
   background-color: transparent;
-  -webkit-box-shadow: 0px 0px 0px 2px #ffffff inset !important;
-          box-shadow: 0px 0px 0px 2px #ffffff inset !important;
+  -webkit-box-shadow: 0px 0px 0px 2px #999999 inset !important;
+          box-shadow: 0px 0px 0px 2px #999999 inset !important;
   color: #ffffff;
 }
 .ui.inverted.orange.basic.buttons .button:hover,
@@ -6657,8 +6675,8 @@ body > .ui.grid:not(.page) {
 .ui.inverted.pink.buttons .basic.button,
 .ui.inverted.pink.basic.button {
   background-color: transparent;
-  -webkit-box-shadow: 0px 0px 0px 2px #ffffff inset !important;
-          box-shadow: 0px 0px 0px 2px #ffffff inset !important;
+  -webkit-box-shadow: 0px 0px 0px 2px #999999 inset !important;
+          box-shadow: 0px 0px 0px 2px #999999 inset !important;
   color: #ffffff;
 }
 .ui.inverted.pink.basic.buttons .button:hover,
@@ -6721,8 +6739,8 @@ body > .ui.grid:not(.page) {
 .ui.inverted.purple.buttons .basic.button,
 .ui.inverted.purple.basic.button {
   background-color: transparent;
-  -webkit-box-shadow: 0px 0px 0px 2px #ffffff inset !important;
-          box-shadow: 0px 0px 0px 2px #ffffff inset !important;
+  -webkit-box-shadow: 0px 0px 0px 2px #999999 inset !important;
+          box-shadow: 0px 0px 0px 2px #999999 inset !important;
   color: #ffffff;
 }
 .ui.inverted.purple.basic.buttons .button:hover,
@@ -6785,8 +6803,8 @@ body > .ui.grid:not(.page) {
 .ui.inverted.red.buttons .basic.button,
 .ui.inverted.red.basic.button {
   background-color: transparent;
-  -webkit-box-shadow: 0px 0px 0px 2px #ffffff inset !important;
-          box-shadow: 0px 0px 0px 2px #ffffff inset !important;
+  -webkit-box-shadow: 0px 0px 0px 2px #999999 inset !important;
+          box-shadow: 0px 0px 0px 2px #999999 inset !important;
   color: #ffffff;
 }
 .ui.inverted.red.basic.buttons .button:hover,
@@ -6849,8 +6867,8 @@ body > .ui.grid:not(.page) {
 .ui.inverted.teal.buttons .basic.button,
 .ui.inverted.teal.basic.button {
   background-color: transparent;
-  -webkit-box-shadow: 0px 0px 0px 2px #ffffff inset !important;
-          box-shadow: 0px 0px 0px 2px #ffffff inset !important;
+  -webkit-box-shadow: 0px 0px 0px 2px #999999 inset !important;
+          box-shadow: 0px 0px 0px 2px #999999 inset !important;
   color: #ffffff;
 }
 .ui.inverted.teal.basic.buttons .button:hover,
@@ -6913,8 +6931,8 @@ body > .ui.grid:not(.page) {
 .ui.inverted.yellow.buttons .basic.button,
 .ui.inverted.yellow.basic.button {
   background-color: transparent;
-  -webkit-box-shadow: 0px 0px 0px 2px #ffffff inset !important;
-          box-shadow: 0px 0px 0px 2px #ffffff inset !important;
+  -webkit-box-shadow: 0px 0px 0px 2px #999999 inset !important;
+          box-shadow: 0px 0px 0px 2px #999999 inset !important;
   color: #ffffff;
 }
 .ui.inverted.yellow.basic.buttons .button:hover,
@@ -9429,13 +9447,6 @@ i.bordered.inverted.icon {
   -webkit-box-shadow: none;
           box-shadow: none;
 }
-/*-------------------
-      Inverted
---------------------*/
-i.inverted.icon {
-  background-color: #222222;
-  color: #FFFFFF;
-}
 /*-------------------
        Colors
 --------------------*/
@@ -9470,42 +9481,77 @@ i.yellow.icon {
   color: #ffcb08 !important;
 }
 /*-------------------
-   Inverted Colors
+      Inverted
 --------------------*/
+i.inverted.icon {
+  color: #ffffff;
+}
 i.inverted.black.icon {
-  background-color: #555555 !important;
-  color: #FFFFFF !important;
+  color: #555555 !important;
 }
 i.inverted.blue.icon {
-  background-color: #54c8ff !important;
-  color: #FFFFFF !important;
+  color: #54c8ff !important;
 }
 i.inverted.green.icon {
+  color: #2ecc40 !important;
+}
+i.inverted.orange.icon {
+  color: #ff851b !important;
+}
+i.inverted.pink.icon {
+  color: #ff8edf !important;
+}
+i.inverted.purple.icon {
+  color: #cdc6ff !important;
+}
+i.inverted.red.icon {
+  color: #ff695e !important;
+}
+i.inverted.teal.icon {
+  color: #6dffff !important;
+}
+i.inverted.yellow.icon {
+  color: #ffe21f !important;
+}
+/* Inverted Circular */
+i.inverted.circular.icon {
+  background-color: #222222 !important;
+  color: #FFFFFF !important;
+}
+i.inverted.circular.black.icon {
+  background-color: #333333 !important;
+  color: #FFFFFF !important;
+}
+i.inverted.circular.blue.icon {
+  background-color: #0074d9 !important;
+  color: #FFFFFF !important;
+}
+i.inverted.circular.green.icon {
   background-color: #2ecc40 !important;
   color: #FFFFFF !important;
 }
-i.inverted.orange.icon {
+i.inverted.circular.orange.icon {
   background-color: #ff851b !important;
   color: #FFFFFF !important;
 }
-i.inverted.pink.icon {
-  background-color: #ff8edf !important;
+i.inverted.circular.pink.icon {
+  background-color: #d9499a !important;
   color: #FFFFFF !important;
 }
-i.inverted.purple.icon {
-  background-color: #cdc6ff !important;
+i.inverted.circular.purple.icon {
+  background-color: #a24096 !important;
   color: #FFFFFF !important;
 }
-i.inverted.red.icon {
-  background-color: #ff695e !important;
+i.inverted.circular.red.icon {
+  background-color: #ff4136 !important;
   color: #FFFFFF !important;
 }
-i.inverted.teal.icon {
-  background-color: #6dffff !important;
+i.inverted.circular.teal.icon {
+  background-color: #39cccc !important;
   color: #FFFFFF !important;
 }
-i.inverted.yellow.icon {
-  background-color: #ffe21f !important;
+i.inverted.circular.yellow.icon {
+  background-color: #ffcb08 !important;
   color: #FFFFFF !important;
 }
 /*-------------------

build/uncompressed/definitions/elements/button.css

@@ -165,6 +165,7 @@
 /* Or */
 /* Icon */
 /* Labeled Icon */
+/* Inverted */
 /* Basic */
 /* Basic Inverted */
 /* Basic Group */
@@ -449,6 +450,21 @@
   color: #ffffff;
   text-shadow: none !important;
 }
+.ui.inverted.buttons .button {
+  margin: 0px 0px 0px -2px;
+}
+.ui.inverted.buttons .button:first-child {
+  margin-left: 0em;
+}
+.ui.inverted.vertical.buttons .button {
+  margin: 0px 0px -2px 0px;
+}
+.ui.inverted.vertical.buttons .button:first-child {
+  margin-top: 0em;
+}
+.ui.inverted.buttons .button:hover {
+  position: relative;
+}
 .ui.inverted.button:hover {
   background: #ffffff none;
   -webkit-box-shadow: 0px 0px 0px 2px #ffffff inset !important;
@@ -888,33 +904,35 @@
 .ui.basic.inverted.button {
   background-color: transparent !important;
   color: #fafafa !important;
-  -webkit-box-shadow: rgba(255, 255, 255, 0.2);
-          box-shadow: rgba(255, 255, 255, 0.2);
+  -webkit-box-shadow: 0px 0px 0px 2px #999999 inset !important;
+          box-shadow: 0px 0px 0px 2px #999999 inset !important;
 }
 .ui.basic.inverted.buttons .button:hover,
 .ui.basic.inverted.button:hover {
   color: #ffffff !important;
-  -webkit-box-shadow: rgba(255, 255, 255, 0.2);
-          box-shadow: rgba(255, 255, 255, 0.2);
+  -webkit-box-shadow: 0px 0px 0px 2px #ffffff inset !important;
+          box-shadow: 0px 0px 0px 2px #ffffff inset !important;
 }
 .ui.basic.inverted.buttons .button:active,
 .ui.basic.inverted.button:active {
   background-color: rgba(255, 255, 255, 0.05) !important;
   color: #ffffff !important;
-  -webkit-box-shadow: rgba(255, 255, 255, 0.8) !important;
-          box-shadow: rgba(255, 255, 255, 0.8) !important;
+  -webkit-box-shadow: 0px 0px 0px 2px #cccccc inset !important;
+          box-shadow: 0px 0px 0px 2px #cccccc inset !important;
 }
 .ui.basic.inverted.buttons .button.active,
 .ui.basic.inverted.button.active {
   background-color: rgba(255, 255, 255, 0.05);
   color: #ffffff;
   text-shadow: none;
-  -webkit-box-shadow: none;
-          box-shadow: none;
+  -webkit-box-shadow: 0px 0px 0px 2px #dadada inset;
+          box-shadow: 0px 0px 0px 2px #dadada inset;
 }
 .ui.basic.inverted.buttons .button.active:hover,
 .ui.basic.inverted.button.active:hover {
   background-color: rgba(255, 255, 255, 0.01);
+  -webkit-box-shadow: 0px 0px 0px 2px #ffffff inset !important;
+          box-shadow: 0px 0px 0px 2px #ffffff inset !important;
 }
 /* Loading */
 .ui.basic.loading.button:after {
@@ -1304,8 +1322,8 @@
 .ui.inverted.black.buttons .basic.button,
 .ui.inverted.black.basic.button {
   background-color: transparent;
-  -webkit-box-shadow: 0px 0px 0px 2px #ffffff inset !important;
-          box-shadow: 0px 0px 0px 2px #ffffff inset !important;
+  -webkit-box-shadow: 0px 0px 0px 2px #999999 inset !important;
+          box-shadow: 0px 0px 0px 2px #999999 inset !important;
   color: #ffffff;
 }
 .ui.inverted.black.basic.buttons .button:hover,
@@ -1368,8 +1386,8 @@
 .ui.inverted.blue.buttons .basic.button,
 .ui.inverted.blue.basic.button {
   background-color: transparent;
-  -webkit-box-shadow: 0px 0px 0px 2px #ffffff inset !important;
-          box-shadow: 0px 0px 0px 2px #ffffff inset !important;
+  -webkit-box-shadow: 0px 0px 0px 2px #999999 inset !important;
+          box-shadow: 0px 0px 0px 2px #999999 inset !important;
   color: #ffffff;
 }
 .ui.inverted.blue.basic.buttons .button:hover,
@@ -1432,8 +1450,8 @@
 .ui.inverted.green.buttons .basic.button,
 .ui.inverted.green.basic.button {
   background-color: transparent;
-  -webkit-box-shadow: 0px 0px 0px 2px #ffffff inset !important;
-          box-shadow: 0px 0px 0px 2px #ffffff inset !important;
+  -webkit-box-shadow: 0px 0px 0px 2px #999999 inset !important;
+          box-shadow: 0px 0px 0px 2px #999999 inset !important;
   color: #ffffff;
 }
 .ui.inverted.green.basic.buttons .button:hover,
@@ -1496,8 +1514,8 @@
 .ui.inverted.orange.buttons .basic.button,
 .ui.inverted.orange.basic.button {
   background-color: transparent;
-  -webkit-box-shadow: 0px 0px 0px 2px #ffffff inset !important;
-          box-shadow: 0px 0px 0px 2px #ffffff inset !important;
+  -webkit-box-shadow: 0px 0px 0px 2px #999999 inset !important;
+          box-shadow: 0px 0px 0px 2px #999999 inset !important;
   color: #ffffff;
 }
 .ui.inverted.orange.basic.buttons .button:hover,
@@ -1560,8 +1578,8 @@
 .ui.inverted.pink.buttons .basic.button,
 .ui.inverted.pink.basic.button {
   background-color: transparent;
-  -webkit-box-shadow: 0px 0px 0px 2px #ffffff inset !important;
-          box-shadow: 0px 0px 0px 2px #ffffff inset !important;
+  -webkit-box-shadow: 0px 0px 0px 2px #999999 inset !important;
+          box-shadow: 0px 0px 0px 2px #999999 inset !important;
   color: #ffffff;
 }
 .ui.inverted.pink.basic.buttons .button:hover,
@@ -1624,8 +1642,8 @@
 .ui.inverted.purple.buttons .basic.button,
 .ui.inverted.purple.basic.button {
   background-color: transparent;
-  -webkit-box-shadow: 0px 0px 0px 2px #ffffff inset !important;
-          box-shadow: 0px 0px 0px 2px #ffffff inset !important;
+  -webkit-box-shadow: 0px 0px 0px 2px #999999 inset !important;
+          box-shadow: 0px 0px 0px 2px #999999 inset !important;
   color: #ffffff;
 }
 .ui.inverted.purple.basic.buttons .button:hover,
@@ -1688,8 +1706,8 @@
 .ui.inverted.red.buttons .basic.button,
 .ui.inverted.red.basic.button {
   background-color: transparent;
-  -webkit-box-shadow: 0px 0px 0px 2px #ffffff inset !important;
-          box-shadow: 0px 0px 0px 2px #ffffff inset !important;
+  -webkit-box-shadow: 0px 0px 0px 2px #999999 inset !important;
+          box-shadow: 0px 0px 0px 2px #999999 inset !important;
   color: #ffffff;
 }
 .ui.inverted.red.basic.buttons .button:hover,
@@ -1752,8 +1770,8 @@
 .ui.inverted.teal.buttons .basic.button,
 .ui.inverted.teal.basic.button {
   background-color: transparent;
-  -webkit-box-shadow: 0px 0px 0px 2px #ffffff inset !important;
-          box-shadow: 0px 0px 0px 2px #ffffff inset !important;
+  -webkit-box-shadow: 0px 0px 0px 2px #999999 inset !important;
+          box-shadow: 0px 0px 0px 2px #999999 inset !important;
   color: #ffffff;
 }
 .ui.inverted.teal.basic.buttons .button:hover,
@@ -1816,8 +1834,8 @@
 .ui.inverted.yellow.buttons .basic.button,
 .ui.inverted.yellow.basic.button {
   background-color: transparent;
-  -webkit-box-shadow: 0px 0px 0px 2px #ffffff inset !important;
-          box-shadow: 0px 0px 0px 2px #ffffff inset !important;
+  -webkit-box-shadow: 0px 0px 0px 2px #999999 inset !important;
+          box-shadow: 0px 0px 0px 2px #999999 inset !important;
   color: #ffffff;
 }
 .ui.inverted.yellow.basic.buttons .button:hover,

build/uncompressed/definitions/elements/icon.css

@@ -325,13 +325,6 @@ i.bordered.inverted.icon {
   -webkit-box-shadow: none;
           box-shadow: none;
 }
-/*-------------------
-      Inverted
---------------------*/
-i.inverted.icon {
-  background-color: #222222;
-  color: #FFFFFF;
-}
 /*-------------------
        Colors
 --------------------*/
@@ -366,42 +359,77 @@ i.yellow.icon {
   color: #ffcb08 !important;
 }
 /*-------------------
-   Inverted Colors
+      Inverted
 --------------------*/
+i.inverted.icon {
+  color: #ffffff;
+}
 i.inverted.black.icon {
-  background-color: #555555 !important;
-  color: #FFFFFF !important;
+  color: #555555 !important;
 }
 i.inverted.blue.icon {
-  background-color: #54c8ff !important;
-  color: #FFFFFF !important;
+  color: #54c8ff !important;
 }
 i.inverted.green.icon {
+  color: #2ecc40 !important;
+}
+i.inverted.orange.icon {
+  color: #ff851b !important;
+}
+i.inverted.pink.icon {
+  color: #ff8edf !important;
+}
+i.inverted.purple.icon {
+  color: #cdc6ff !important;
+}
+i.inverted.red.icon {
+  color: #ff695e !important;
+}
+i.inverted.teal.icon {
+  color: #6dffff !important;
+}
+i.inverted.yellow.icon {
+  color: #ffe21f !important;
+}
+/* Inverted Circular */
+i.inverted.circular.icon {
+  background-color: #222222 !important;
+  color: #FFFFFF !important;
+}
+i.inverted.circular.black.icon {
+  background-color: #333333 !important;
+  color: #FFFFFF !important;
+}
+i.inverted.circular.blue.icon {
+  background-color: #0074d9 !important;
+  color: #FFFFFF !important;
+}
+i.inverted.circular.green.icon {
   background-color: #2ecc40 !important;
   color: #FFFFFF !important;
 }
-i.inverted.orange.icon {
+i.inverted.circular.orange.icon {
   background-color: #ff851b !important;
   color: #FFFFFF !important;
 }
-i.inverted.pink.icon {
-  background-color: #ff8edf !important;
+i.inverted.circular.pink.icon {
+  background-color: #d9499a !important;
   color: #FFFFFF !important;
 }
-i.inverted.purple.icon {
-  background-color: #cdc6ff !important;
+i.inverted.circular.purple.icon {
+  background-color: #a24096 !important;
   color: #FFFFFF !important;
 }
-i.inverted.red.icon {
-  background-color: #ff695e !important;
+i.inverted.circular.red.icon {
+  background-color: #ff4136 !important;
   color: #FFFFFF !important;
 }
-i.inverted.teal.icon {
-  background-color: #6dffff !important;
+i.inverted.circular.teal.icon {
+  background-color: #39cccc !important;
   color: #FFFFFF !important;
 }
-i.inverted.yellow.icon {
-  background-color: #ffe21f !important;
+i.inverted.circular.yellow.icon {
+  background-color: #ffcb08 !important;
   color: #FFFFFF !important;
 }
 /*-------------------

server/documents/index.html.eco

@@ -16,14 +16,17 @@ type   : 'Semantic'
     <div class="column">
       <div class="introduction">
         <h1 class="ui inverted header">Semantic UI
-          <a class="ui black pointing left label" href="https://github.com/semantic-org/Semantic-UI/blob/master/RELEASE%20NOTES.md">
+          <a class="ui black label" href="https://github.com/semantic-org/Semantic-UI/blob/master/RELEASE%20NOTES.md">
             1.0.0 ALPHA
           </a>
         </h1>
         <h2 class="ui inverted header">UI is the vocabulary of the web.</h2>
-        <p>Semantic empowers designers and developers by creating a language for sharing UI.</p>
-        <a class="ui large black view-ui button"><i class="icon list layout"></i> View UI</a>
-        <a class="ui large blue button" href="build/semantic.zip"><i class="awesome download cloud icon"></i> Download</a>
+        <div class="ui huge inverted buttons">
+          <a class="ui basic teal inverted view-ui button">UI Library</a>
+          <a class="ui disabled basic red inverted button"> Themes</a>
+          <a class="ui disabled basic green inverted button">Layouts</a>
+          <a class="ui basic inverted blue button" href="build/semantic.zip"><i class="awesome download cloud icon"></i> Download</a>
+        </div>
       </div>
       <div class="inverted advertisement">
         <% unless 'development' in @getEnvironments(): %>
@@ -41,8 +44,8 @@ type   : 'Semantic'
 <div class="stripe">
   <div class="ui page grid">
     <div class="ui column">
-      <h2 class="ui header">
-        <i class="world icon"></i>
+      <h2 class="ui center aligned icon header">
+        <i class="docs book icon"></i>
         <div class="content">
           Lose the Hieroglyphics
           <div class="sub header">Semantic is structured around natural language conventions to make development more intuitive.
@@ -127,7 +130,7 @@ type   : 'Semantic'
   <div class="ui page grid">
     <div class="column">
       <h2 class="ui huge inverted center aligned icon header">
-        <i class="circular emphasized inverted teal chat outline icon"></i>
+        <i class="inverted teal chat outline icon"></i>
         <div class="content">Have a conversation with your components<div class="sub header">Semantic gives you a variety of UI components with real-time debug output, letting your code tell you what its doing.</div>
         </div>
       </h2>

server/files/javascript/semantic.js

@@ -711,6 +711,18 @@ semantic.ready = function() {
     }
   };
 
+  $('.masthead')
+    .visibility({
+      once: false
+    })
+    .visibility('bottom visible', function(){
+      $('.main.menu').removeClass('filled');
+    })
+    .visibility('bottom passed', function(){
+      $('.main.menu').addClass('filled');
+    })
+  ;
+
   $(window)
     .on('resize', function() {
       clearTimeout(handler.timer);

server/files/stylesheets/semantic.css

@@ -267,16 +267,16 @@ body.guide .main.container > * {
 #example .masthead {
   position: relative;
   overflow: hidden;
-  background-color: #00B5AD;
+  background: #111111 url(../images/bg-moonlight.jpg);
+  background-size: cover;
   text-align: center;
-  margin-top: 36px;
-  padding: 50px 0px;
+  padding: 7em 0px;
   color: rgba(255, 255, 255, 0.9);
   margin-bottom: 0px;
   border-bottom: none;
 }
 #example .masthead:before {
-  background: #00B5AD url(/images/tile-bg.png) repeat fixed 0% 0%;
+  display: none;
   position: absolute;
   z-index: 1;
   width: 500%;
@@ -299,7 +299,7 @@ body.guide .main.container > * {
   -moz-animation-duration: 80s;
   -ms-animation-duration: 80s;
   -o-animation-duration: 80s;
-  animation-duration: 80s;
+  animation-duration: 0s;
 
   -webkit-animation-fill-mode: both;
   -moz-animation-fill-mode: both;
@@ -379,6 +379,16 @@ body.guide .main.container > * {
  }
 
 }
+#example.index .main.menu {
+  background-color: rgba(0, 0, 0, 0.3);
+  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.7);
+  -webkit-transition: all 1s ease;
+  transition: all 1s ease;
+}
+#example.index .filled.main.menu {
+  background-color: rgba(0, 0, 0, 0.9);
+  box-shadow: 0 2px 3px rgba(0, 0, 0, 0.1);
+}
 #example .masthead .grid {
   position: relative;
   z-index: 2;
@@ -390,6 +400,15 @@ body.guide .main.container > * {
   display: table-cell;
   vertical-align: top;
   width: 100%;
+  text-align: center;
+}
+#example .introduction .buttons {
+  margin-top: 3em;
+}
+#example .introduction .label {
+  position: absolute;
+  top: 1em;
+  right: 0em;
 }
 
 #example .introduction .theme.buttons {
@@ -461,7 +480,7 @@ body.guide .main.container > * {
 }
 #example .masthead h2 {
   font-weight: normal;
-  margin: -10px 0 16px 0px;
+  margin: 0px 0 16px 0px;
   font-size: 1.75em;
   border-bottom: none;
   line-height: 1;

src/definitions/behaviors/visibility.js

@@ -331,7 +331,7 @@ $.fn.visibility = function(parameters) {
           ;
           if(newCallback) {
             module.debug('Adding callback for bottom passed', newCallback);
-            settings.bottomPassed = newCallback;
+            settings.onBottomPassed = newCallback;
           }
           if(callback && calculations.bottomPassed) {
             module.execute(callback, callbackName);

src/definitions/elements/button.less

@@ -277,6 +277,22 @@
   text-shadow: none !important;
 }
 
+.ui.inverted.buttons .button {
+  margin: @invertedGroupButtonOffset;
+}
+.ui.inverted.buttons .button:first-child {
+  margin-left: 0em;
+}
+.ui.inverted.vertical.buttons .button {
+  margin: @invertedVerticalGroupButtonOffset;
+}
+.ui.inverted.vertical.buttons .button:first-child {
+  margin-top: 0em;
+}
+.ui.inverted.buttons .button:hover {
+  position: relative;
+}
+
 .ui.inverted.button:hover {
   background: @white none;
   box-shadow: 0px 0px 0px 2px @white inset !important;
@@ -714,29 +730,30 @@
 .ui.basic.inverted.button {
   background-color: transparent !important;
   color: @offWhite !important;
-  box-shadow: @whiteBorderColor;
+  box-shadow: @basicInvertedBoxShadow !important;
 }
 .ui.basic.inverted.buttons .button:hover,
 .ui.basic.inverted.button:hover {
   color: @white !important;
-  box-shadow: @whiteBorderColor;
+  box-shadow: @basicInvertedHoverBoxShadow !important;
 }
 .ui.basic.inverted.buttons .button:active,
 .ui.basic.inverted.button:active {
   background-color: @transparentWhite !important;
   color: @white !important;
-  box-shadow: @selectedWhiteBorderColor !important;
+  box-shadow: @basicInvertedDownBoxShadow !important;
 }
 .ui.basic.inverted.buttons .button.active,
 .ui.basic.inverted.button.active {
   background-color: @transparentWhite;
   color: @invertedTextColor;
   text-shadow: @invertedTextShadow;
-  box-shadow: none;
+  box-shadow: @basicInvertedActiveBoxShadow;
 }
 .ui.basic.inverted.buttons .button.active:hover,
 .ui.basic.inverted.button.active:hover {
   background-color: @strongTransparentWhite;
+  box-shadow: @basicInvertedHoverBoxShadow !important;
 }
 
 /* Loading */
@@ -1158,7 +1175,7 @@
 .ui.inverted.black.buttons .basic.button,
 .ui.inverted.black.basic.button {
   background-color: transparent;
-  box-shadow: 0px 0px 0px 2px @white inset !important;
+  box-shadow: @basicInvertedBoxShadow !important;
   color: @white;
 }
 .ui.inverted.black.basic.buttons .button:hover,
@@ -1220,7 +1237,7 @@
 .ui.inverted.blue.buttons .basic.button,
 .ui.inverted.blue.basic.button {
   background-color: transparent;
-  box-shadow: 0px 0px 0px 2px @white inset !important;
+  box-shadow: @basicInvertedBoxShadow !important;
   color: @white;
 }
 .ui.inverted.blue.basic.buttons .button:hover,
@@ -1279,7 +1296,7 @@
 .ui.inverted.green.buttons .basic.button,
 .ui.inverted.green.basic.button {
   background-color: transparent;
-  box-shadow: 0px 0px 0px 2px @white inset !important;
+  box-shadow: @basicInvertedBoxShadow !important;
   color: @white;
 }
 .ui.inverted.green.basic.buttons .button:hover,
@@ -1337,7 +1354,7 @@
 .ui.inverted.orange.buttons .basic.button,
 .ui.inverted.orange.basic.button {
   background-color: transparent;
-  box-shadow: 0px 0px 0px 2px @white inset !important;
+  box-shadow: @basicInvertedBoxShadow !important;
   color: @white;
 }
 .ui.inverted.orange.basic.buttons .button:hover,
@@ -1395,7 +1412,7 @@
 .ui.inverted.pink.buttons .basic.button,
 .ui.inverted.pink.basic.button {
   background-color: transparent;
-  box-shadow: 0px 0px 0px 2px @white inset !important;
+  box-shadow: @basicInvertedBoxShadow !important;
   color: @white;
 }
 .ui.inverted.pink.basic.buttons .button:hover,
@@ -1453,7 +1470,7 @@
 .ui.inverted.purple.buttons .basic.button,
 .ui.inverted.purple.basic.button {
   background-color: transparent;
-  box-shadow: 0px 0px 0px 2px @white inset !important;
+  box-shadow: @basicInvertedBoxShadow !important;
   color: @white;
 }
 .ui.inverted.purple.basic.buttons .button:hover,
@@ -1511,7 +1528,7 @@
 .ui.inverted.red.buttons .basic.button,
 .ui.inverted.red.basic.button {
   background-color: transparent;
-  box-shadow: 0px 0px 0px 2px @white inset !important;
+  box-shadow: @basicInvertedBoxShadow !important;
   color: @white;
 }
 .ui.inverted.red.basic.buttons .button:hover,
@@ -1570,7 +1587,7 @@
 .ui.inverted.teal.buttons .basic.button,
 .ui.inverted.teal.basic.button {
   background-color: transparent;
-  box-shadow: 0px 0px 0px 2px @white inset !important;
+  box-shadow: @basicInvertedBoxShadow !important;
   color: @white;
 }
 .ui.inverted.teal.basic.buttons .button:hover,
@@ -1629,7 +1646,7 @@
 .ui.inverted.yellow.buttons .basic.button,
 .ui.inverted.yellow.basic.button {
   background-color: transparent;
-  box-shadow: 0px 0px 0px 2px @white inset !important;
+  box-shadow: @basicInvertedBoxShadow !important;
   color: @white;
 }
 .ui.inverted.yellow.basic.buttons .button:hover,
@@ -1738,7 +1755,7 @@
   margin: 0em;
   float: left;
   border-radius: 0em;
-  margin: 0px 0px 0px -1px;
+  margin: @groupButtonOffset;
 }
 .ui.buttons .button:first-child  {
   margin-left: 0em;
@@ -1758,7 +1775,7 @@
 .ui.vertical.buttons .button {
   display: block;
   float: none;
-  margin: 0px 0px -1px 0px;
+  margin: @verticalGroupOffset;
   box-shadow: @verticalBoxShadow;
 }
 .ui.vertical.buttons .button:first-child,

src/themes/packages/default/elements/button.variables

@@ -59,7 +59,8 @@
 --------------------*/
 
 @verticalBoxShadow: 0px 0px 0px 1px @borderColor inset;
-
+@groupButtonOffset: 0px 0px 0px -1px;
+@verticalGroupOffset: 0px 0px -1px 0px;
 
 /*-------------------
         States
@@ -146,6 +147,10 @@
 @labeledIconLeftShadow: -1px 0px 0px 0px @labeledIconBorder inset;
 @labeledIconRightShadow: 1px 0px 0px 0px @labeledIconBorder inset;
 
+/* Inverted */
+@invertedGroupButtonOffset: 0px 0px 0px -2px;
+@invertedVerticalGroupButtonOffset: 0px 0px -2px 0px;
+
 /* Basic */
 @basicBoxShadow: 0px 0px 0px 1px @borderColor;
 @iconOffset: 0.05em;
@@ -156,7 +161,6 @@
 
 @basicDownBackground: rgba(0, 0, 0, 0.02);
 @basicDownBoxShadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.2);
-
 @basicActiveBackground: @transparentBlack;
 @basicActiveColor: @selectedTextColor;
 
@@ -166,10 +170,10 @@
 @basicInvertedDownBackground: @transparentWhite;
 @basicInvertedActiveBackground: @transparentWhite;
 
-@basicInvertedBoxShadow: 0px 0px 0px 2px rgba(255, 255, 255, 0.5);
-@basicInvertedHoverBoxShadow: 0px 0px 0px 2px @selectedWhiteBorderColor;
-@basicInvertedDownBoxShadow: 0px 0px 0px 2px @selectedWhiteBorderColor;
-@basicInvertedActiveBoxShadow: 0px 0px 0px 2px @selectedWhiteBorderColor;
+@basicInvertedBoxShadow: 0px 0px 0px 2px #999999 inset;
+@basicInvertedHoverBoxShadow: 0px 0px 0px 2px #FFFFFF inset;
+@basicInvertedDownBoxShadow: 0px 0px 0px 2px #CCCCCC inset;
+@basicInvertedActiveBoxShadow: 0px 0px 0px 2px #DADADA inset;
 
 @basicInvertedColor: @darkWhite;
 @basicInvertedHoverColor: @darkWhiteHover;