CSS and JS Additions/fixes

css/cwv3.css

@@ -1,27 +1,42 @@
-/* Undocumented cBox colors */
+.cwv3.dialog-overlay {
-#cboxLoadingOverlay, #cboxContent, #cboxLoadedContent {
+  position: fixed;
-  background-color: #FFF !important;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  z-index: 99998;
 }
 
 /* Main CWV3 Dialog */
 .cwv3_dialog {
-  border: 3px solid #ccc;
+  border: 3px solid #cccccc;
-  background: #FFF;
+  background: white;
-}
+  width: 50%;
-.cwv3_dialog.js .auth {
+  height: 50%;
-  display: none;
+  position: fixed;
-}
+  top: 25%;
-.cwv3_dialog.js .denied {
+  left: 25%;
-  display: none;
+  -webkit-box-shadow: 2px 11px 48px black;
+  -moz-box-shadow: 2px 11px 48px black;
+  box-shadow: 2px 11px 48px black;
+  overflow: hidden;
+  z-index: 99999;
 }
 .cwv3_dialog div {
   padding: 0.25em;
 }
+.cwv3_dialog .cwv3.auth, .cwv3_dialog .cwv3.denied {
+  height: 100%;
+}
 .cwv3_dialog .cwv3_title {
-  color: #FFF;
+  color: white;
   font-weight: bold;
   text-align: center;
-  background: #f00;
+  background: red;
+}
+.cwv3_dialog .cwv3_content {
+  height: 84%;
+  overflow-y: scroll;
 }
 .cwv3_dialog .cwv3_btns {
   overflow: hidden;
@@ -30,7 +45,7 @@
   display: block;
   width: 100%;
   text-align: center;
-  color: #FFF;
+  color: white;
   font-weight: bold;
   text-decoration: none;
 }
@@ -39,12 +54,12 @@
   width: 40%;
 }
 .cwv3_dialog .cwv3_btns .cwv3_exit a {
-  background-color: #F00;
+  background-color: red;
 }
 .cwv3_dialog .cwv3_btns .cwv3_enter {
   float: left;
   width: 40%;
 }
 .cwv3_dialog .cwv3_btns .cwv3_enter a {
-  background-color: #0C3;
+  background-color: #00cc33;
 }

css/cwv3.min.css

@@ -1 +1 @@
-#cboxContent,#cboxLoadedContent,#cboxLoadingOverlay{background-color:#FFF!important}.cwv3_dialog{border:3px solid #ccc;background:#FFF}.cwv3_dialog.js .auth,.cwv3_dialog.js .denied{display:none}.cwv3_dialog div{padding:.25em}.cwv3_dialog .cwv3_title{color:#FFF;font-weight:700;text-align:center;background:red}.cwv3_dialog .cwv3_btns{overflow:hidden}.cwv3_dialog .cwv3_btns a{display:block;width:100%;text-align:center;color:#FFF;font-weight:700;text-decoration:none}.cwv3_dialog .cwv3_btns .cwv3_exit{float:right;width:40%}.cwv3_dialog .cwv3_btns .cwv3_exit a{background-color:red}.cwv3_dialog .cwv3_btns .cwv3_enter{float:left;width:40%}.cwv3_dialog .cwv3_btns .cwv3_enter a{background-color:#0C3}
+.cwv3.dialog-overlay{position:fixed;top:0;left:0;width:100%;height:100%;z-index:99998}.cwv3_dialog{border:3px solid #ccc;background:#fff;width:50%;height:50%;position:fixed;top:25%;left:25%;-webkit-box-shadow:2px 11px 48px #000;-moz-box-shadow:2px 11px 48px #000;box-shadow:2px 11px 48px #000;overflow:hidden;z-index:99999}.cwv3_dialog div{padding:.25em}.cwv3_dialog .cwv3.auth,.cwv3_dialog .cwv3.denied{height:100%}.cwv3_dialog .cwv3_title{color:#fff;font-weight:700;text-align:center;background:red}.cwv3_dialog .cwv3_content{height:84%;overflow-y:scroll}.cwv3_dialog .cwv3_btns{overflow:hidden}.cwv3_dialog .cwv3_btns a{display:block;width:100%;text-align:center;color:#fff;font-weight:700;text-decoration:none}.cwv3_dialog .cwv3_btns .cwv3_exit{float:right;width:40%}.cwv3_dialog .cwv3_btns .cwv3_exit a{background-color:red}.cwv3_dialog .cwv3_btns .cwv3_enter{float:left;width:40%}.cwv3_dialog .cwv3_btns .cwv3_enter a{background-color:#0c3}

css/sass/cwv3.scss

@@ -1,64 +1,3 @@
-/* Undocumented cBox colors */
+@import "partials/mixins";
-#cboxLoadingOverlay, #cboxContent, #cboxLoadedContent {
+@import "partials/variables";
-  background-color: #FFF !important;
+@import "partials/cwv3";
-}
-
-/* Main CWV3 Dialog */
-.cwv3_dialog{
-
-  &.js{
-
-    .auth{
-      display: none;
-    }
-
-    .denied{
-      display: none;
-    }
-    
-  }
-  
-  border: 3px solid #ccc;
-  background: #FFF;
-
-  div{
-    padding: 0.25em;
-  }
-
-
-  .cwv3_title {
-    color: #FFF;
-    font-weight: bold;
-    text-align: center;
-    background: #f00;
-  }
-
-  .cwv3_btns{
-    overflow: hidden;
-    a{
-      display: block;
-      width: 100%;
-      text-align: center;
-      color: #FFF;
-      font-weight: bold;
-      text-decoration: none;
-    }
-
-    .cwv3_exit{
-      float: right;
-      width: 40%;
-      a{
-        background-color: #F00;
-      }
-    }
-
-    .cwv3_enter{
-      float: left;
-      width: 40%;
-      a{
-        background-color: #0C3;
-      }
-    }
-  }
-
-}

css/sass/partials/_cwv3.scss

@@ -0,0 +1,73 @@
+.cwv3{
+  &.dialog-overlay{
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    z-index: 99998;
+  }
+}
+
+/* Main CWV3 Dialog */
+.cwv3_dialog{
+  border: 3px solid $dialog-border-color;
+  background: $dialog-background;
+  width: 50%;
+  height: 50%;
+  position: fixed;
+  top: 25%;
+  left: 25%;
+  @include box-shadow( 2px 11px 48px #000 );
+  overflow: hidden;
+  z-index: 99999;
+
+  div{
+    padding: 0.25em;
+  }
+
+  .cwv3.auth, .cwv3.denied{
+    height: 100%;
+  }
+
+  .cwv3_title {
+    color: $title-font-color;
+    font-weight: bold;
+    text-align: center;
+    background: $title-background;
+  }
+
+  .cwv3_content{
+    height: 84%;
+    overflow-y: scroll;
+  }
+
+  .cwv3_btns{
+    overflow: hidden;
+    a{
+      display: block;
+      width: 100%;
+      text-align: center;
+      color: $button-txt-color;
+      font-weight: bold;
+      text-decoration: none;
+    }
+
+    .cwv3_exit{
+      float: right;
+      width: 40%;
+      a{
+        background-color: $exit-button-color;
+      }
+    }
+
+    .cwv3_enter{
+      float: left;
+      width: 40%;
+      a{
+        background-color: $enter-button-color;
+      }
+    }
+  }
+
+}

css/sass/partials/_mixins.scss

@@ -0,0 +1,242 @@
+//
+// Mixins
+// --------------------------------------------------
+
+
+// Create REM values with PX fall back
+//
+// Generate a REM with PX fallback from
+// $baseFontSize. Enter the desired size based
+// on pixels in numerical form. Supports shorthand.
+//
+// Forked from: http://codepen.io/thejameskyle/pen/JmBjc
+//
+// @author Greg Rickaby
+// @since 1.0
+//
+// Usage: @include rem($property, $values);
+// Example Usage:
+//    @include rem(font-size, 16px);
+//    @include rem(margin, 0 24px 0 12px);
+//
+// Outputs:
+//    font-size: 16px;
+//    font-size: 1.6rem;
+//    margin: 0 24px 0 12px;
+//    margin: 0 2.4rem 0 1.2rem;
+// ----------------------------------
+$baseFontSize: 10; // Based on HTML reset html { font-size: 62.5%; }
+
+@function parseInt($n) {
+  @return $n / ($n * 0 + 1);
+}
+
+@mixin rem($property, $values) {
+	$px : ();
+	$rem: ();
+
+	$root: $baseFontSize;
+
+	@each $value in $values {
+		@if $value == 0 or $value == auto {
+			$px : append($px , $value);
+			$rem: append($rem, $value);
+		}
+
+		@else if type-of($value) == number {
+			$unit: unit($value);
+			$val: parseInt($value);
+
+			@if $unit == "px" {
+				$px : append($px,  $value);
+				$rem: append($rem, ($val / $root + rem));
+			}
+
+			@if $unit == "rem" {
+				$px : append($px,  ($val * $root + px));
+				$rem: append($rem, $value);
+			}
+		}
+
+		@else {
+			$px : append($px,  $value);
+			$rem: append($rem, $value);
+		}
+	}
+
+	@if $px == $rem {
+		#{$property}: $px;
+	} @else {
+		#{$property}: $px;
+		#{$property}: $rem;
+	}
+}
+
+@function rem($value) {
+	$root: $baseFontSize;
+	$val: parseInt($value);
+	$return: ();
+
+	@if unit($value) == "px" {
+		$return: append($return, ($val / $root + rem));
+	} @else {
+		$return: append($return, ($val * $root + px));
+	}
+
+	@return $return;
+}
+
+// Responsive Breakpoints
+// ----------------------------------
+
+@mixin breakpoint($point) {
+  @if $point == smallscreen {
+     @media screen and (max-width: 1380px) { @content; }
+  }
+
+  @else if $point == desktop {
+     @media screen and (max-width: 1140px) { @content; }
+  }
+
+  @else if $point == tablet {
+    @media screen and (max-width: 800px) { @content; }
+  }
+
+  @else if $point == tablet-small {
+    @media screen and (max-width: 700px) { @content; }
+  }
+
+  @else if $point == mobilelandscape {
+  	@media screen and (max-width: 600px) { @content; }
+  }
+
+  @else if $point == mobile {
+    @media screen and (max-width: 480px)  { @content; }
+  }
+}
+
+
+// Border Radius
+// ----------------------------------
+@mixin border-radius($radius) {
+	-webkit-border-radius: $radius;
+		 -moz-border-radius: $radius;
+					border-radius: $radius;
+}
+
+// Single Corner Border Radius
+// ----------------------------------
+@mixin border-top-left-radius($radius) {
+	-webkit-border-top-left-radius: $radius;
+			-moz-border-radius-topleft: $radius;
+					border-top-left-radius: $radius;
+}
+@mixin border-top-right-radius($radius) {
+	-webkit-border-top-right-radius: $radius;
+			-moz-border-radius-topright: $radius;
+					border-top-right-radius: $radius;
+}
+@mixin border-bottom-right-radius($radius) {
+	-webkit-border-bottom-right-radius: $radius;
+			-moz-border-radius-bottomright: $radius;
+					border-bottom-right-radius: $radius;
+}
+@mixin border-bottom-left-radius($radius) {
+	-webkit-border-bottom-left-radius: $radius;
+			-moz-border-radius-bottomleft: $radius;
+					border-bottom-left-radius: $radius;
+}
+
+// Single Side Border Radius
+// ----------------------------------
+@mixin border-top-radius($radius) {
+	@include border-top-right-radius($radius);
+	@include border-top-left-radius($radius);
+}
+@mixin border-right-radius($radius) {
+	@include border-top-right-radius($radius);
+	@include border-bottom-right-radius($radius);
+}
+@mixin border-bottom-radius($radius) {
+	@include border-bottom-right-radius($radius);
+	@include border-bottom-left-radius($radius);
+}
+@mixin border-left-radius($radius) {
+	@include border-top-left-radius($radius);
+	@include border-bottom-left-radius($radius);
+}
+
+// Drop shadows
+// ----------------------------------
+@mixin box-shadow($shadow...) {
+	-webkit-box-shadow: $shadow;
+		 -moz-box-shadow: $shadow;
+					box-shadow: $shadow;
+}
+
+// Box Sizing
+// ----------------------------------
+@mixin box-sizing($sizing...) {
+	-webkit-box-sizing: $sizing;
+		 -moz-box-sizing: $sizing;
+					box-sizing: $sizing;
+}
+
+// Transitions
+// ----------------------------------
+@mixin transition($transition...) {
+	-webkit-transition: $transition;
+		 -moz-transition: $transition;
+			 -o-transition: $transition;
+					transition: $transition;
+}
+@mixin transition-delay($transition-delay) {
+	-webkit-transition-delay: $transition-delay;
+		 -moz-transition-delay: $transition-delay;
+			 -o-transition-delay: $transition-delay;
+					transition-delay: $transition-delay;
+}
+@mixin transition-duration($transition-duration) {
+	-webkit-transition-duration: $transition-duration;
+		 -moz-transition-duration: $transition-duration;
+			 -o-transition-duration: $transition-duration;
+					transition-duration: $transition-duration;
+}
+
+// Transformations
+// ----------------------------------
+@mixin rotate($degrees) {
+	-webkit-transform: rotate($degrees);
+		 -moz-transform: rotate($degrees);
+			-ms-transform: rotate($degrees);
+			 -o-transform: rotate($degrees);
+					transform: rotate($degrees);
+}
+@mixin scale($ratio) {
+	-webkit-transform: scale($ratio);
+		 -moz-transform: scale($ratio);
+			-ms-transform: scale($ratio);
+			 -o-transform: scale($ratio);
+					transform: scale($ratio);
+}
+@mixin translate($x, $y) {
+	-webkit-transform: translate($x, $y);
+		 -moz-transform: translate($x, $y);
+			-ms-transform: translate($x, $y);
+			 -o-transform: translate($x, $y);
+					transform: translate($x, $y);
+}
+@mixin skew($x, $y) {
+	-webkit-transform: skew($x, $y);
+		 -moz-transform: skew($x, $y);
+			-ms-transform: skewX($x) skewY($y); // See https://github.com/twitter/bootstrap/issues/4885
+			 -o-transform: skew($x, $y);
+					transform: skew($x, $y);
+	-webkit-backface-visibility: hidden; // See https://github.com/twitter/bootstrap/issues/5319
+}
+@mixin translate3d($x, $y, $z) {
+	-webkit-transform: translate3d($x, $y, $z);
+		 -moz-transform: translate3d($x, $y, $z);
+			 -o-transform: translate3d($x, $y, $z);
+					transform: translate3d($x, $y, $z);
+}

css/sass/partials/_variables.scss

@@ -0,0 +1,13 @@
+///
+// General Variables for CWv3
+///
+
+$button-txt-color    : #FFFFFF;
+$exit-button-color   : #FF0000;
+$enter-button-color  : #00CC33;
+
+$title-background    : #FF0000;
+$title-font-color    : #FFFFFF;
+
+$dialog-background   : #FFFFFF;
+$dialog-border-color : #CCCCCC;

js/cwv3.js

@@ -11,8 +11,6 @@ window.cwv3 = ( function( window, document, $ ){
 		app.$enter  = app.$dialog.find( '.cwv3_enter' );
 		app.cookie_name = ( '' !== cwv3_params.cookie_name ) ? 'cwv3_cookie_' + cwv3_params.cookie_name : false;
 		app.redirect_url = ( '' === cwv3_params.redirect_url || '#' === cwv3_params.redirect_url ) ? 'http://google.com' : cwv3_params.redirect_url;
-
-		$.colorbox.resize();
 	};
 
 	app.init = function(){
@@ -56,7 +54,7 @@ window.cwv3 = ( function( window, document, $ ){
 				window.location.replace( app.redirect_url );
 			}
 		} else if( undefined === cookie_data ){
-			// app.$denial.remove(); // Remove the denied box instead.
+			app.$denial.remove(); // Remove the denied box instead.
 		}
 	};
 

js/cwv3.min.js

@@ -1 +1 @@
-window.cwv3=function(window,document,$){var app={};return app.cache=function(){app.$dialog=$(".cwv3_dialog"),app.$auth=app.$dialog.find(".cwv3.auth"),app.$denial=app.$dialog.find(".cwv3.denied"),app.$exit=app.$dialog.find(".cwv3_exit"),app.$enter=app.$dialog.find(".cwv3_enter"),app.cookie_name=""!==cwv3_params.cookie_name?"cwv3_cookie_"+cwv3_params.cookie_name:!1,app.redirect_url=""===cwv3_params.redirect_url||"#"===cwv3_params.redirect_url?"http://google.com":cwv3_params.redirect_url,$.colorbox.resize()},app.init=function(){app.cache(),$("body").on("click",".cwv3_enter",app.enter_handler),$("body").on("click",".cwv3_exit",app.exit_handler),app.cookie_name&&app.show_popup()},app.enter_handler=function(evt){evt.preventDefault()},app.exit_handler=function(evt){evt.preventDefault()},app.set_cookie=function(){},app.show_popup=function(){},app.dialog_switch=function(){var cookie_data=$.cookie(app.cookie_name);"denied"===cookie_data&&"redirect"===cwv3_params.denial_method&&window.location.replace(app.redirect_url)},$(document).ready(app.init),app}(window,document,jQuery);
+window.cwv3=function(window,document,$){var app={};return app.cache=function(){app.$dialog=$(".cwv3_dialog"),app.$auth=app.$dialog.find(".cwv3.auth"),app.$denial=app.$dialog.find(".cwv3.denied"),app.$exit=app.$dialog.find(".cwv3_exit"),app.$enter=app.$dialog.find(".cwv3_enter"),app.cookie_name=""!==cwv3_params.cookie_name?"cwv3_cookie_"+cwv3_params.cookie_name:!1,app.redirect_url=""===cwv3_params.redirect_url||"#"===cwv3_params.redirect_url?"http://google.com":cwv3_params.redirect_url},app.init=function(){app.cache(),$("body").on("click",".cwv3_enter",app.enter_handler),$("body").on("click",".cwv3_exit",app.exit_handler),app.cookie_name&&app.show_popup()},app.enter_handler=function(evt){evt.preventDefault()},app.exit_handler=function(evt){evt.preventDefault()},app.set_cookie=function(){},app.show_popup=function(){},app.dialog_switch=function(){var cookie_data=$.cookie(app.cookie_name);"denied"===cookie_data?"redirect"===cwv3_params.denial_method&&window.location.replace(app.redirect_url):void 0===cookie_data&&app.$denial.remove()},$(document).ready(app.init),app}(window,document,jQuery);