#19114: Styling TinyMce popups

Work Item:
19114

--HG--
branch : 1.x
This commit is contained in:
Rebecca@RebeccaCloud.cable.rcn.com
2012-10-18 09:18:01 -04:00
parent 4ac6dbe255
commit 7c78182cf3
2 changed files with 96 additions and 34 deletions

View File

@@ -16,24 +16,45 @@
.clearlooks2 .mceTop .mceCenter {right:6px; width:100%; height:23px; background:url(img/horizontal.gif) 12px 0; clip:rect(auto auto auto 12px)}
.clearlooks2 .mceTop .mceRight {right:0; width:6px; height:23px; background:url(img/corners.gif) -12px 0}
.clearlooks2 .mceTop span {width:100%; text-align:center; vertical-align:middle; line-height:23px; font-weight:bold}
.clearlooks2 .mceFocus .mceTop .mceLeft {background:url(img/corners.gif) -6px 0}
.clearlooks2 .mceFocus .mceTop .mceCenter {background:url(img/horizontal.gif) 0 -23px}
.clearlooks2 .mceFocus .mceTop .mceRight {background:url(img/corners.gif) -18px 0}
.clearlooks2 .mceFocus .mceTop span {color:#FFF}
.clearlooks2 .mceFocus .mceTop .mceLeft {background:#2b2b2b;padding:15px 0;
/*CSS3 properties*/
-webkit-border-radius: 2px;
-moz-border-radius: 2px;
border-radius: 2px;
box-shadow: inset 0px 0px 1px rgba(64, 64, 64, 1.0), 1px 1px 1px rgba(54, 54, 65, 1.0);
-webkit-box-shadow: inset 0px 0px 1px rgba(64, 64, 64, 1.0), 1px 1px 1px rgba(54, 54, 65, 1.0);
-moz-box-shadow: inset 0px 0px 1px rgba(64, 64, 64, 1.0), 1px 1px 1px rgba(54, 54, 65, 1.0); url(img/corners.gif) -6px 0}
.clearlooks2 .mceFocus .mceTop .mceCenter {background:#323232;border:1px solid #404040;padding:15px 0;
/*CSS3 properties*/
-webkit-border-radius: 2px;
-moz-border-radius: 2px;
border-radius: 2px;
box-shadow: inset 0px 0px 1px rgba(64, 64, 64, 1.0), 1px 1px 1px rgba(54, 54, 65, 1.0);
-webkit-box-shadow: inset 0px 0px 1px rgba(64, 64, 64, 1.0), 1px 1px 1px rgba(54, 54, 65, 1.0);
-moz-box-shadow: inset 0px 0px 1px rgba(64, 64, 64, 1.0), 1px 1px 1px rgba(54, 54, 65, 1.0);}
.clearlooks2 .mceFocus .mceTop .mceRight {background:#323232;border:1px solid #404040;padding:15px 0;
/*CSS3 properties*/
-webkit-border-radius: 2px;
-moz-border-radius: 2px;
border-radius: 2px;
box-shadow: inset 0px 0px 1px rgba(64, 64, 64, 1.0), 1px 1px 1px rgba(54, 54, 65, 1.0);
-webkit-box-shadow: inset 0px 0px 1px rgba(64, 64, 64, 1.0), 1px 1px 1px rgba(54, 54, 65, 1.0);
-moz-box-shadow: inset 0px 0px 1px rgba(64, 64, 64, 1.0), 1px 1px 1px rgba(54, 54, 65, 1.0);}
.clearlooks2 .mceFocus .mceTop span {color:#FFF;font-family: Segoe UI,Trebuchet,Arial,Sans-Serif; text-align: center; font-weight: normal; font-size: 14px; padding-left: 5px; }
/* Middle */
.clearlooks2 .mceMiddle, .clearlooks2 .mceMiddle div {top:0}
.clearlooks2 .mceMiddle {width:100%; height:100%; clip:rect(23px auto auto auto)}
.clearlooks2 .mceMiddle .mceLeft {left:0; width:5px; height:100%; background:url(img/vertical.gif) -5px 0}
.clearlooks2 .mceMiddle .mceLeft {left:0; width:5px; height:100%; background: #323232;}
.clearlooks2 .mceMiddle span {top:23px; left:5px; width:100%; height:100%; background:#FFF}
.clearlooks2 .mceMiddle .mceRight {right:0; width:5px; height:100%; background:url(img/vertical.gif)}
.clearlooks2 .mceMiddle .mceRight {right:0; width:5px; height:100%; background: #323232;}
/* Bottom */
.clearlooks2 .mceBottom, .clearlooks2 .mceBottom div {height:6px}
.clearlooks2 .mceBottom {left:0; bottom:0; width:100%}
.clearlooks2 .mceBottom div {top:0}
.clearlooks2 .mceBottom .mceLeft {left:0; width:5px; background:url(img/corners.gif) -34px -6px}
.clearlooks2 .mceBottom .mceCenter {left:5px; width:100%; background:url(img/horizontal.gif) 0 -46px}
.clearlooks2 .mceBottom .mceCenter {left:5px; width:100%; background: #323232;}
.clearlooks2 .mceBottom .mceRight {right:0; width:5px; background: url(img/corners.gif) -34px 0}
.clearlooks2 .mceBottom span {display:none}
.clearlooks2 .mceStatusbar .mceBottom, .clearlooks2 .mceStatusbar .mceBottom div {height:23px}
@@ -44,24 +65,24 @@
/* Actions */
.clearlooks2 a {width:29px; height:16px; top:3px;}
.clearlooks2 .mceClose {right:6px; background:url(img/buttons.gif) -87px 0}
.clearlooks2 .mceMin {display:none; right:68px; background:url(img/buttons.gif) 0 0}
.clearlooks2 .mceMed {display:none; right:37px; background:url(img/buttons.gif) -29px 0}
.clearlooks2 .mceMax {display:none; right:37px; background:url(img/buttons.gif) -58px 0}
.clearlooks2 .mceMove {display:none;width:100%;cursor:move;background:url(img/corners.gif) no-repeat -100px -100px}
.clearlooks2 .mceMovable .mceMove {display:block}
.clearlooks2 .mceFocus .mceClose {right:6px; background:url(img/buttons.gif) -87px -16px}
.clearlooks2 .mceFocus .mceMin {right:68px; background:url(img/buttons.gif) 0 -16px}
.clearlooks2 .mceFocus .mceMed {right:37px; background:url(img/buttons.gif) -29px -16px}
.clearlooks2 .mceFocus .mceMax {right:37px; background:url(img/buttons.gif) -58px -16px}
.clearlooks2 .mceFocus .mceClose:hover {right:6px; background:url(img/buttons.gif) -87px -32px}
.clearlooks2 .mceFocus .mceClose:hover {right:6px; background:url(img/buttons.gif) -87px -32px}
.clearlooks2 .mceFocus .mceMin:hover {right:68px; background:url(img/buttons.gif) 0 -32px}
.clearlooks2 .mceFocus .mceMed:hover {right:37px; background:url(img/buttons.gif) -29px -32px}
.clearlooks2 .mceFocus .mceMax:hover {right:37px; background:url(img/buttons.gif) -58px -32px}
.clearlooks2 .mceClose {right:6px; background:url(img/buttons.gif) -87px 0; z-index: 999;}
.clearlooks2 .mceMin {display:none; right:68px; background:url(img/buttons.gif) 0 0; z-index: 999;}
.clearlooks2 .mceMed {display:none; right:37px; background:url(img/buttons.gif) -29px 0; z-index: 999;}
.clearlooks2 .mceMax {display:none; right:37px; background:url(img/buttons.gif) -58px 0; z-index: 999;}
.clearlooks2 .mceMove {display:none;width:100%;cursor:move;background:url(img/corners.gif) no-repeat -100px -100px; z-index: 999;}
.clearlooks2 .mceMovable .mceMove {display:block; z-index: 999;}
.clearlooks2 .mceFocus .mceClose {right:6px; background:url(img/buttons.gif) -87px -16px; z-index: 999;}
.clearlooks2 .mceFocus .mceMin {right:68px; background:url(img/buttons.gif) 0 -16px; z-index: 999;}
.clearlooks2 .mceFocus .mceMed {right:37px; background:url(img/buttons.gif) -29px -16px; z-index: 999;}
.clearlooks2 .mceFocus .mceMax {right:37px; background:url(img/buttons.gif) -58px -16px; z-index: 999;}
.clearlooks2 .mceFocus .mceClose:hover {right:6px; background:url(img/buttons.gif) -87px -32px; z-index: 999;}
.clearlooks2 .mceFocus .mceClose:hover {right:6px; background:url(img/buttons.gif) -87px -32px; z-index: 999;}
.clearlooks2 .mceFocus .mceMin:hover {right:68px; background:url(img/buttons.gif) 0 -32px; z-index: 999;}
.clearlooks2 .mceFocus .mceMed:hover {right:37px; background:url(img/buttons.gif) -29px -32px; z-index: 999;}
.clearlooks2 .mceFocus .mceMax:hover {right:37px; background:url(img/buttons.gif) -58px -32px; z-index: 999;}
/* Resize */
.clearlooks2 .mceResize {top:auto; left:auto; display:none; width:5px; height:5px; background:url(img/horizontal.gif) no-repeat 0 -75px}
.clearlooks2 .mceResize {top:auto; left:auto; display:none; width:5px; height:5px; background: #323232;}
.clearlooks2 .mceResizable .mceResize {display:block}
.clearlooks2 .mceResizable .mceMin, .clearlooks2 .mceMax {display:none}
.clearlooks2 .mceMinimizable .mceMin {display:block}

View File

@@ -1,6 +1,7 @@
/* Generic */
body {
font-family:Verdana, Arial, Helvetica, sans-serif; font-size:11px;
font-family: Segoe UI,Trebuchet,Arial,Sans-Serif;
color: #333;
scrollbar-3dlight-color:#F0F0EE;
scrollbar-arrow-color:#676662;
scrollbar-base-color:#F0F0EE;
@@ -15,8 +16,8 @@ margin:8px 8px 0 8px;
}
html {background:#F0F0EE;}
td {font-family:Verdana, Arial, Helvetica, sans-serif; font-size:10px;}
textarea {resize:none;outline:none;}
td {}
textarea {resize:none;outline:none; }
a:link, a:visited {color:black;}
a:hover {color:#2B6FB6;}
.nowrap {white-space: nowrap}
@@ -29,24 +30,64 @@ label.invalid {color:#EE0000; display:inline;}
input.invalid {border:1px solid #EE0000;}
input {background:#FFF; border:1px solid #CCC;}
input, select, textarea {font-family:Verdana, Arial, Helvetica, sans-serif; font-size:10px;}
input, select, textarea {border:1px solid #808080;}
input, select, textarea { }
input.radio {border:1px none #000000; background:transparent; vertical-align:middle;}
input.checkbox {border:1px none #000000; background:transparent; vertical-align:middle;}
.input_noborder {border:0;}
div#wrapline label {font-size: 11px; margin-right: 2px;}
/* Buttons */
#insert, #cancel, input.button, .updateButton {
border:0; margin:0; padding:0;
font-weight:bold;
float:left;
width:94px; height:26px;
background:url(img/buttons.png) 0 -26px;
cursor:pointer;
padding-bottom:2px;
float:left;
}
background:#6a7b42;
border:1px solid #487328;
color:#fff;
cursor: pointer;
display: inline-block;
font: 12px Arial,Helvetica,sans-serif;
padding: 5px 14px 5px 14px;
/*position: relative;*/
text-align: center;
text-decoration: none;
/*----CSS3 properties----*/
text-shadow: rgba(40,53,9,.2) 0px 0px 1px;
-webkit-box-shadow: inset 0px 0px 1px rgba(255, 255, 255, 1.0), 1px 1px 1px rgba(102, 102, 102, 0.2);
-moz-box-shadow: inset 0px 0px 1px rgba(255, 255, 255, 1.0), 1px 1px 1px rgba(102, 102, 102, 0.2);
box-shadow: inset 0px 0px 1px rgba(255, 255, 255, 1.0), 1px 1px 1px rgba(102, 102, 102, 0.2);
/*----In ie the first couplet sets the alpha value so 00=transparent and ff=opaque)----*/
filter:progid:DXImageTransform.Microsoft.Gradient(GradientType=0, startColorstr='#ff9bb36c', endColorstr='#ff809f43');
background: -webkit-gradient(linear, 0 0, 0 100%, from(rgba(155, 179, 108, 1.0)), to(rgba(128, 159, 67, 1.0)));
background: -moz-linear-gradient(top, rgba(155, 179, 108, 1.0), rgba(128, 159, 67, 1.0));
/*test - base green in pallet is 155,179,108*/
background: -moz-linear-gradient(top, rgba(155, 179, 108, 1.0), rgba(133, 154, 93, 1.0));
-webkit-border-radius: 2px;
-moz-border-radius: 2px;
border-radius: 2px;}
#insert:hover, #cancel:hover, input.button:hover, .updateButton:hover{
border-color:#3a822e;
color:#eefcec;
text-decoration:none;
background: #809f43;
/*CSS3 properties*/
filter:progid:DXImageTransform.Microsoft.Gradient(GradientType=0, startColorstr='#ff6e7f45', endColorstr='#ff6a7b42');
background: -webkit-gradient(linear, 0 0, 0 100%, from(rgba(110, 127, 69, 1.0)), to(rgba(106, 123, 66, 1.0)));
background: -moz-linear-gradient(top, rgba(110, 127, 69, 1.0), rgba(106, 123, 66, 1.0));}
#insert:active, #cancel:active, input.button:active, .updateButton:active{
text-decoration:none;
background:#6a7b42;
border:1px solid #487328;
color:#fff;
/*CSS3 properties*/
text-shadow: rgba(0,0,0,.5) 0px 0px 1px;
filter:progid:DXImageTransform.Microsoft.Gradient(GradientType=0, startColorstr='#ff9bb36c', endColorstr='#ff809f43');
background: -webkit-gradient(linear, 0 0, 0 100%, from(rgba(155, 179, 108, 1.0)), to(rgba(128, 159, 67, 1.0)));
background: -moz-linear-gradient(top, rgba(155, 179, 108, 1.0), rgba(128, 159, 67, 1.0));}
#cancel {float:right; margin-right: 4px;}
#insert {background:url(img/buttons.png) 0 -52px}
#cancel {background:url(img/buttons.png) 0 0; float:right}
/* Browse */
a.pickcolor, a.browse {text-decoration:none}
@@ -96,7 +137,7 @@ td.charmap, #charmap a {width:18px; height:18px; color:#000; border:1px solid #A
/* Titles */
h1, h2, h3, h4 {color:#2B6FB6; margin:0; padding:0; padding-top:5px;}
h3 {font-size:14px;}
.title {font-size:12px; font-weight:bold; color:#2B6FB6;}
.title {font-size:12px; font-weight:bold; color:#333;}
/* Dialog specific */
#link .panel_wrapper, #link div.current {height:125px;}