Z-index & like-widget

Please change the like-widget in posts so that it generates the code
that i will commit in "threadPostList.tpl"!

diff --git a/wcfsetup/install/files/acp/style/wcf.css b/wcfsetup/install/files/acp/style/wcf.css
index 5a38bda8e7c4518f842a462c330b2d8b7109d468..e3f070164efefa2cac71589fcfb896a2c96b5fd5 100644 (file)
--- a/wcfsetup/install/files/acp/style/wcf.css
+++ b/wcfsetup/install/files/acp/style/wcf.css
@@ -188,7 +188,7 @@ nav.topMenu {
        top: 0;
        right: 0;
        left: 0;        
-       z-index: 500;
+       z-index: 300;
        
        -webkit-box-shadow: 0 3px 7px rgba(0, 0, 0, .3);
        -moz-box-shadow: 0 3px 7px rgba(0, 0, 0, .3);
@@ -661,7 +661,7 @@ nav.topMenu {
        background-image: -o-linear-gradient(#fff, #e7f2fd);
        background-image: linear-gradient(#fff, #e7f2fd);
        
-       z-index: 100;
+       z-index: 10;
 }
 
 /* ToDo: Special */
@@ -876,7 +876,7 @@ section.content:after {
 }      
 
 section.content .content {
-       border: 1px solid #ccc;
+       /* Test: border: 1px solid #ccc;*/
        background-color: rgba(0, 0, 0, .01);
        padding: 13px 23px 23px;
 }
@@ -2725,7 +2725,7 @@ input[type='button'],
        height: 0;
        top: -4px;
        right: -15px;
-       z-index: 100;
+       z-index: 10;
 }
 
 .breadcrumbs > ul > li > .pointer > span {
@@ -2784,7 +2784,7 @@ input[type='button'],
        color: rgba(102, 102, 102, 1);
        background-color: #f9f9f9;
        position: relative;
-       z-index: 90;
+       z-index: 20;
 }
 
 .breadcrumbs > ul > li:hover > .pointer > span {
@@ -3113,7 +3113,7 @@ tr .columnURL {
 .pageNavigation ul li.children > a {
        margin-right: -30px;
        position: relative;
-       z-index: 100;
+       z-index: 10;
 }
 
 .pageNavigation ul li.children input {
@@ -3523,7 +3523,7 @@ div#ajaxExceptionStacktrace {
        background-color: rgba(0, 0, 0, .7);
        padding: 5px 10px 7px;
        max-width: 300px;
-       z-index: 900;
+       z-index: 800;
        
        -webkit-box-shadow: 0 3px 7px rgba(0, 0, 0, .3);
        -moz-box-shadow: 0 3px 7px rgba(0, 0, 0, .3);
@@ -3604,7 +3604,8 @@ input[type='button'],
 .badgeButton,
 .pageNavigation ul li:not(.children),
 .clipboardEditor > ul > li,
-.preInput .dropdownCaption {
+.preInput .dropdownCaption,
+.likeWidget > ul > li a {
        text-decoration: none;
        text-shadow: 0 1px 0 rgba(255, 255, 255, 1);
        color: rgba(153, 153, 153, 1);
@@ -3655,7 +3656,8 @@ input[type='button'].default:hover,
 .badgeButton:hover,
 .pageNavigation ul li:not(.disabled):not(.children):hover,
 .clipboardEditor > ul > li:hover,
-.preInput:hover .dropdownCaption {
+.preInput:hover .dropdownCaption,
+.likeWidget > ul > li a:hover {
        color: rgba(102, 102, 102, 1);
        border-width: 1px;
        border-style: solid;
@@ -3697,7 +3699,9 @@ input[type='button'].default:active,
 .badgeButton:active,
 .pageNavigation ul li:not(.disabled):not(.children):focus,
 .clipboardEditor > ul > li:active,
-.preInput .dropdownCaption:active {
+.preInput .dropdownCaption:active,
+.likeWidget > ul > li a:active,
+.likeWidget > ul > li.active a {
        color: #333;
        border-width: 1px;
        border-style: solid;
@@ -4007,7 +4011,8 @@ button[disabled='disabled'],
 input[disabled='disabled'],
 input[type='button'][disabled='disabled'],
 .smallButtons > li.disabled > a,
-.largeButtons > li.disabled > a {
+.largeButtons > li.disabled > a,
+.likeWidget > ul > li.disabled a {
        color: rgba(153, 153, 153, 1);
        cursor: default;
        border-width: 1px;
@@ -4310,4 +4315,114 @@ input[type='button'][disabled='disabled'],
        font-size: 110%;
 }
 
+
+
+
+
+
+
+/* ############## ToDo: Like Widget ############## */
+
+/*  @see theadPostList.tpl */
+
+/* -- -- -- -- Widget -- -- -- -- -- */
+
+/* Globals */
+
+.likeWidget {
+       margin: 3px 15px;
+       float: right;
+}
+
+/* Buttons */
+
+.likeWidget > ul > li {
+       text-align: right;
+       margin-top: 3px;
+       display: inline-block;
+}
+
+.likeWidget > ul > li > a {
+       padding: 3px 5px;
+}
+
+.likeWidget > ul > li:first-child {
+       margin-right: -5px;
+}
+
+.likeWidget > ul > li:first-child a {
+       border-radius: 7px 0 0 7px;
+}
+
+.likeWidget > ul > li:nth-child(2) a {
+       border-radius: 0 7px 7px 0;
+}
+
+.likeWidget > ul > li > a > .badge {
+       font-size: 75%;
+       color: rgba(255, 255, 255, 1);
+       background-color: rgba(0, 0, 0, .7);
+       margin-left: -1px;
+       margin-right: 0;
+       padding: 1px 3px;
+}
+
+/* Cummulative Likes Display */
+
+.likeWidget > .display {
+       border-width: 1px;
+       border-style: solid;
+       border-color: rgba(255, 255, 255, .7);
+       display: inline;
+       position: relative;
+       top: -42px;
+       right: -13%;
+}
+
+.likeWidget > .display > .displayText {
+       font-size: 75%;
+       color: rgba(255, 255, 255, 1);
+       border-radius: 3px;
+       background-color: rgba(0, 0, 0, .7);
+       padding: 2px 5px;
+}
+
+/* -- -- -- -- Like Widget Pointer -- -- -- -- -- */
+
+.likeWidget > .display > .pointer {    
+       border-width: 7px 7px 0 7px;
+       border-style: solid;
+       border-color: rgba(255, 255, 255, .7) transparent;
+       display: inline-block !important;
+       width: 0;
+       position: absolute;
+       bottom: -8px !important;
+       right: 10%;
+}
+
+.likeWidget > .display > .pointer span {       
+       border-width: 5px 5px 0 5px;
+       border-style: solid;
+       border-color: rgba(0, 0, 0, .7) transparent;
+       display: inline-block;
+       width: 0;
+       position: absolute;
+       bottom: 2px;
+       left: -5px;
+}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
 /* -- -- -- -- -- EOF -- -- -- -- -- */