Merge pull request #5 from pixelant/pxamike_stylingfix

Pxamike stylingfix
pixelant · Apr 18, 2017 · a69406d · a69406d
2 parents 625dbbd + c011cdc
commit a69406d
Show file tree

Hide file tree

Showing 4 changed files with 48 additions and 35 deletions.
diff --git a/Configuration/TypoScript/constants.txt b/Configuration/TypoScript/constants.txt
@@ -28,16 +28,16 @@ plugin.tx_pxacookiebar {
         targetBlank = 0
 
         # cat=plugin.tx_pxacookiebar/pxacookiebar/025; type=options[Top=top,Bottom=bottomFix]; label=Position
-        position = top
+        position = bottomFix
 
         # cat=plugin.tx_pxacookiebar/pxacookiebar/030; type=boolean; label=Show only after FE user login
         showOnlyOnLogin = 0
 
         # cat=plugin.tx_pxacookiebar/pxacookiebar/035; type=options[Standart version=1,Styling version 2=2]; label=Styling version
         stylingVersion = 1
 
-        # cat=plugin.tx_pxacookiebar/pxacookiebar/040; type=boolean; label=Don't use ajax for cookie bar loading
-        disableAjaxLoading = 0
+		# cat=plugin.tx_pxacookiebar/pxacookiebar/040; type=boolean; label=Don't use ajax for cookie bar loading
+		disableAjaxLoading = 0
 
         prepantTo = 10
     }

diff --git a/README.md b/README.md
@@ -25,7 +25,7 @@ After installation, each site can decide whether to use active or passive consen
 
 ## Configurations ##
 ### Position of the cookie bar ###
-By default, the cookie bar is positioned at the top of the page. This can conflict with some sites with sticky menus. To position the cookie bar sticky at the bottom, set the typoscript constant `plugin.tx_pxacookiebar.settings.position` to `bottom`
+By default, the cookie bar is positioned to the bottom of the page to avoid conflict with some sites with sticky menus. To position the cookie bar sticky at the top, set the typoscript constant `plugin.tx_pxacookiebar.settings.position` to `top`
 
 ### Typoscript setup ###
 @TODO

diff --git a/Resources/Public/Css/bar_v_1.css b/Resources/Public/Css/bar_v_1.css
@@ -1,82 +1,84 @@
 /*  Cookies Popup*/
 .top-message-wrap {
-    position: static;
+    position: fixed;
     top: 0;
-    z-index: 200;
+    z-index: 7200;
     width: 100%;
-    color: #ffffff;
 }
 
 .bottom-message-wrap {
     position: fixed;
     bottom: 0;
     z-index: 2000;
     width: 100%;
-    color: #ffffff;
 }
 
 #pxa-cookie-mess p {
     color: #82787d;
     margin: 0;
     font-size: 11px;
     line-height: 15px;
-    font-family: Verdana, Arial;
+    font-family: Verdana, Arial, Helvetica, sans-serif;
     position: relative;
-    padding-right: 30px;
+    margin-bottom: 4px;
 }
 
 #pxa-cookie-mess .cookie-container {
     padding: 0 20px;
 }
 
 #pxa-cookie-mess .cookie-container .btn-close {
+    text-align: center;
+    min-width: 36px;
+    font-size: 19px;
+    line-height: 26px;
     float: right;
     cursor: pointer;
     text-decoration: none;
     border: 1px solid;
-    border-radius: 10px;
-    padding: 4px 6px 5px 6px;
-    /*position: absolute;
-    top: 5px;
-    right: 5px;
-    margin: -2px;*/
+    border-radius: 3px;
+    padding: 4px 6px 6px 6px;
+    font-family: Verdana, sans-serif;
 }
 
 #pxa-cookie-mess .cookie-container .btn-close:hover {
-    padding: 4px 6px 5px 6px;
-    /*margin: -1px;*/
     color: #000000;
-
 }
 
 #pxa-cookie-mess .cookie-container .agree-buttons {
+    text-align: center;
+    min-width: 30px;
     cursor: pointer;
     text-decoration: none;
     border: 1px solid;
-    border-radius: 10px;
-    padding: 4px 6px 5px 6px;
+    border-radius: 3px;
+    padding: 4px 15px 5px 15px;
     position: relative;
-    top: 7px;
+    margin: 7px 10px 0 0;
+    display: inline-block;
 }
 
 #pxa-cookie-mess .cookie-container #accept-cookie {
     color: #6FB536;
 }
 
 #pxa-cookie-mess .cookie-container #accept-cookie:hover {
-    color: #609C30;
+    color: #509815;
 }
 
 #pxa-cookie-mess .cookie-container #decline-cookie {
     color: #F14A29;
-    margin-left: 10px;
 }
 
 #pxa-cookie-mess .cookie-container #decline-cookie:hover {
-    color: #C43E23;
+    color: #b12408;
 }
 
 #pxa-cookie-mess .cookie-warning {
+    border-style: solid;
+    border-width: 0;
+    border-color: #808080;
+    color: #808080;
     padding: 10px 0 15px 0;
     background-image: -webkit-linear-gradient(-90deg, rgb(254, 254, 254) 0%, rgb(248, 248, 248) 68%, rgb(230, 230, 230) 100%);
     background-image: -ms-linear-gradient(-90deg, rgb(254, 254, 254) 0%, rgb(248, 248, 248) 68%, rgb(230, 230, 230) 100%);
@@ -85,6 +87,14 @@
     filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#fffefefe,endColorstr=#ffe6e6e6,GradientType=0)";
 }
 
+#pxa-cookie-mess.top-message-wrap .cookie-warning {
+    border-bottom-width: 1px;
+}
+
+#pxa-cookie-mess.bottom-message-wrap .cookie-warning {
+    border-top-width: 1px;
+}
+
 #pxa-cookie-mess .cookie-warning .close {
     margin: 2px 0 0 10px;
     font-size: 16px;
@@ -114,10 +124,6 @@
 }
 
 @media (max-width: 420px) {
-    .passive-consent .cookie-warning div {
-        display: block;
-    }
-
     .passive-consent .close-button {
         margin-top: 3px;
     }

diff --git a/Resources/Public/Css/bar_v_2.css b/Resources/Public/Css/bar_v_2.css
@@ -6,8 +6,8 @@
 
 .top-message-wrap {
     top: 0;
-    z-index: 200;
-    position: static;
+    z-index: 7200;
+    position: fixed;
 }
 
 .bottom-message-wrap {
@@ -20,7 +20,7 @@
     color: #fff;
     font-size: 14px;
     line-height: 20px;
-    font-family: Verdana, Arial;
+    font-family: Verdana, Arial, Helvetica, sans-serif;
     position: relative;
     margin: 0;
 }
@@ -37,7 +37,7 @@
 #pxa-cookie-mess .cookie-container .btn-close {
     font-size: 14px;
     line-height: 20px;
-    font-family: Verdana, Arial;
+    font-family: Verdana, Arial, Helvetica, sans-serif;
     cursor: pointer;
     text-decoration: none;
     border: none;
@@ -59,7 +59,7 @@
 #pxa-cookie-mess .cookie-container .agree-buttons {
     font-size: 14px;
     line-height: 20px;
-    font-family: Verdana, Arial;
+    font-family: Verdana, Arial, Helvetica, sans-serif;
     cursor: pointer;
     text-decoration: none;
     border: none;
@@ -97,6 +97,13 @@
 #pxa-cookie-mess .cookie-warning {
     padding: 10px 0 8px 0;
     background-color: black;
+}
+
+#pxa-cookie-mess.bottom-message-wrap .cookie-warning{
+    border-top: 1px solid #dc0432;
+}
+
+#pxa-cookie-mess.top-message-wrap .cookie-warning{
     border-bottom: 1px solid #dc0432;
 }
 
@@ -112,7 +119,7 @@
 #pxa-cookie-mess a {
     font-size: 14px;
     line-height: 20px;
-    font-family: Verdana, Arial;
+    font-family: Verdana, Arial, Helvetica, sans-serif;
     display: inline-block;
     color: #fff;
     text-decoration: underline;