← Back
Editing: jquery-ui.css.diff
--- jquery-ui.css.orig 2016-09-08 12:47:27.000000000 +0200 +++ jquery-ui.css 2016-09-08 12:47:53.333000000 +0200 @@ -62,6 +62,8 @@ .ui-state-disabled { cursor: default !important; pointer-events: none; + background: #fafafa; + color: #333333; } @@ -196,12 +198,17 @@ left: 0; cursor: default; } +.ui-menu.ui-widget, .ui-menu { list-style: none; padding: 0; margin: 0; display: block; outline: 0; + background: #444; + border: 1px solid #999; + border-radius: 4px !important; + box-shadow: 0 2px 6px 0 #333; } .ui-menu .ui-menu { position: absolute; @@ -211,6 +218,26 @@ cursor: pointer; /* support: IE10, see #8844 */ list-style-image: url("data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7"); + color: #fff; + white-space: nowrap; + border-top: 1px solid #5a5a5a; +} +.ui-menu .ui-menu-item div, +.ui-menu .ui-menu-item a { + display: block; + line-height: 1.5; + padding: 6px 10px 4px; + text-shadow: 0 1px 1px #333; + background-color: #444; + border: 0; + border-radius: 0; + color: #fff; +} +.ui-menu .ui-menu-item:first-child { + border-top: 0; +} +.ui-menu .ui-menu-item:last-child { + border-bottom: 0; } .ui-menu .ui-menu-item-wrapper { position: relative; @@ -223,9 +250,16 @@ line-height: 0; border-width: 1px 0 0 0; } +.ui-menu .ui-menu-item .ui-state-focus, +.ui-menu .ui-menu-item .ui-state-active, .ui-menu .ui-state-focus, .ui-menu .ui-state-active { - margin: -1px; + background: #00aad6; + background: -moz-linear-gradient(top, #00aad6 0%, #008fc9 100%); + background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#00aad6), color-stop(100%,#008fc9)); + background: -o-linear-gradient(top, #00aad6 0%, #008fc9 100%); + background: -ms-linear-gradient(top, #00aad6 0%, #008fc9 100%); + background: linear-gradient(top, #00aad6 0%, #008fc9 100%); } /* icon support */ @@ -578,16 +612,24 @@ position: absolute; top: 0; left: 0; - padding: .2em; outline: 0; + padding: 3px; + background: #fff; + border-radius: 6px !important; + border: 0 !important; + box-shadow: 1px 1px 18px #666; } .ui-dialog .ui-dialog-titlebar { - padding: .4em 1em; + padding: 15px 1em 8px 1em; position: relative; + border: 0; + border-radius: 5px 5px 0 0; } .ui-dialog .ui-dialog-title { float: left; - margin: .1em 0; + margin: .1em 16px .1em 0; + font-size: 1.3em; + text-shadow: 1px 1px 1px #fff; white-space: nowrap; width: 90%; overflow: hidden; @@ -595,29 +637,53 @@ } .ui-dialog .ui-dialog-titlebar-close { position: absolute; - right: .3em; - top: 50%; - width: 20px; - margin: -10px 0 0 0; - padding: 1px; - height: 20px; + right: -15px; + top: -15px; + width: 30px; + margin: 0; + padding: 0; + height: 30px; + z-index: 99999; + border-width: 0 !important; + background: none !important; + filter: none !important; + box-shadow: none !important; +} +.ui-dialog .ui-dialog-titlebar-close.ui-state-focus { + outline: 2px solid #4fadd5; +} +.ui-dialog .ui-dialog-titlebar-close .ui-icon-closethick { + top: 0; + left: 0; + margin: 0; + width: 30px; + height: 30px; + background: url("images/ui-dialog-close.png") 0 0 no-repeat; +} +.no-close .ui-dialog-titlebar-close { + display: none !important; } .ui-dialog .ui-dialog-content { position: relative; border: 0; - padding: .5em 1em; + padding: 1.5em 1em 0.5em 1em; background: none; overflow: auto; } +.ui-dialog .ui-widget-content { + border: 0; +} .ui-dialog .ui-dialog-buttonpane { text-align: left; border-width: 1px 0 0 0; background-image: none; - margin-top: .5em; - padding: .3em 1em .5em .4em; + border-color: #ddd; + border-style: solid; + margin: 0; + padding: .3em 1em .5em .8em; } .ui-dialog .ui-dialog-buttonpane .ui-dialog-buttonset { - float: right; + float: left; } .ui-dialog .ui-dialog-buttonpane button { margin: .5em .4em .5em 0; @@ -647,8 +713,11 @@ height: 7px; } .ui-dialog .ui-resizable-se { - right: 0; - bottom: 0; + width: 14px; + height: 14px; + right: 3px; + bottom: 3px; + background-position: -80px -224px; } .ui-dialog .ui-resizable-sw { left: 0; @@ -742,7 +811,13 @@ font-size: .7em; display: block; border: 0; - background-position: 0 0; + background: #019bc6; + background: -moz-linear-gradient(top, #019bc6 0%, #017cb4 100%); + background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#019bc6), color-stop(100%,#017cb4)); + background: -o-linear-gradient(top, #019bc6 0%, #017cb4 100%); + background: -ms-linear-gradient(top, #019bc6 0%, #017cb4 100%); + background: linear-gradient(top, #019bc6 0%, #017cb4 100%); + filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#019bc6', endColorstr='#017cb4', GradientType=0); } /* support: IE8 - See #6727 */ @@ -835,23 +910,41 @@ padding: .2em; } .ui-tabs .ui-tabs-nav { - margin: 0; - padding: .2em .2em 0; + margin: 0; padding: 0; + border: 0; + background: transparent; + filter: none; + height: 44px; } .ui-tabs .ui-tabs-nav li { list-style: none; - float: left; position: relative; + display: inline-block; top: 0; - margin: 1px .2em 0 0; - border-bottom-width: 0; - padding: 0; + margin: 0; + border: 0 !important; + padding: 0 1px 0 0; white-space: nowrap; + background: #f8f8f8; + background: -moz-linear-gradient(top, #f8f8f8 0%, #d3d3d3 50%, #f8f8f8 100%); + background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f8f8f8), color-stop(50%,#d3d3d3), color-stop(100%,#f8f8f8)); + background: -webkit-linear-gradient(top, #f8f8f8 0%, #d3d3d3 50%, #f8f8f8 100%); + background: -o-linear-gradient(top, #f8f8f8 0%, #d3d3d3 50%, #f8f8f8 100%); + background: -ms-linear-gradient(top, #f8f8f8 0%, #d3d3d3 50%, #f8f8f8 100%); + background: linear-gradient(top, #f8f8f8 0%, #d3d3d3 50%, #f8f8f8 100%); + filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#f8f8f8', endColorstr='#d3d3d3', GradientType=0); +} +.ui-tabs .ui-tabs-nav li:last-child { + background: none; } .ui-tabs .ui-tabs-nav .ui-tabs-anchor { - float: left; - padding: .5em 1em; + display: inline-block; + padding: 15px; text-decoration: none; + font-size: 12px; + color: #999; + background: #fafafa; + border-right: 1px solid #fafafa; } .ui-tabs .ui-tabs-nav li.ui-tabs-active { margin-bottom: -1px; @@ -862,14 +955,26 @@ .ui-tabs .ui-tabs-nav li.ui-tabs-loading .ui-tabs-anchor { cursor: text; } +.ui-tabs .ui-tabs-nav li.ui-tabs-active .ui-tabs-anchor { + outline: none; + color: #004458; + background: #efefef; + background: -moz-linear-gradient(top, #fafafa 40%, #e4e4e4 100%); + background: -webkit-gradient(linear, left top, left bottom, color-stop(40%,#fff), color-stop(100%,#e4e4e4)); + background: -o-linear-gradient(top, #fafafa 40%, #e4e4e4 100%); + background: -ms-linear-gradient(top, #fafafa 40%, #e4e4e4 100%); + background: linear-gradient(top, #fafafa 40%, #e4e4e4 100%); + filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#fafafa', endColorstr='#e4e4e4', GradientType=0); +} .ui-tabs-collapsible .ui-tabs-nav li.ui-tabs-active .ui-tabs-anchor { cursor: pointer; } .ui-tabs .ui-tabs-panel { display: block; border-width: 0; - padding: 1em 1.4em; - background: none; + padding: 0.5em 1em; + margin-top: 0.2em; + background: #efefef; } .ui-tooltip { padding: 8px; @@ -897,22 +1002,25 @@ font-family: Arial,Helvetica,sans-serif; font-size: 1em; } -.ui-widget.ui-widget-content { - border: 1px solid #c5c5c5; -} .ui-widget-content { border: 1px solid #dddddd; background: #ffffff; color: #333333; } .ui-widget-content a { - color: #333333; + color: #0186ba; } .ui-widget-header { border: 1px solid #dddddd; - background: #e9e9e9; color: #333333; font-weight: bold; + background: #e4e4e4; + background: -moz-linear-gradient(top, #f2f2f2 0%, #e4e4e4 100%); + background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f2f2f2), color-stop(100%,#e4e4e4)); + background: -o-linear-gradient(top, #f2f2f2 0%, #e4e4e4 100%); + background: -ms-linear-gradient(top, #f2f2f2 0%, #e4e4e4 100%); + background: linear-gradient(top, #f2f2f2 0%, #e4e4e4 100%); + filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#f2f2f2', endColorstr='#e4e4e4', GradientType=0); } .ui-widget-header a { color: #333333; @@ -1073,27 +1181,7 @@ .ui-button .ui-icon { background-image: url("images/ui-icons_777777_256x240.png"); } -.ui-state-hover .ui-icon, -.ui-state-focus .ui-icon, -.ui-button:hover .ui-icon, -.ui-button:focus .ui-icon, -.ui-state-default .ui-icon { - background-image: url("images/ui-icons_555555_256x240.png"); -} -.ui-state-active .ui-icon, -.ui-button:active .ui-icon { - background-image: url("images/ui-icons_ffffff_256x240.png"); -} -.ui-state-highlight .ui-icon, -.ui-button .ui-state-highlight.ui-icon { - background-image: url("images/ui-icons_777620_256x240.png"); -} -.ui-state-error .ui-icon, -.ui-state-error-text .ui-icon { - background-image: url("images/ui-icons_cc0000_256x240.png"); -} -/* positioning */ .ui-icon-blank { background-position: 16px 16px; } .ui-icon-caret-1-n { background-position: 0 0; } .ui-icon-caret-1-ne { background-position: -16px 0; } @@ -1311,3 +1399,222 @@ -webkit-box-shadow: 0px 0px 5px #666666; box-shadow: 0px 0px 5px #666666; } + +/* Roundcube button styling */ +.ui-button.ui-state-default { + display: inline-block; + margin: 0 2px; + padding: 1px 2px; + text-shadow: 0px 1px 1px #fff; + border: 1px solid #c6c6c6; + border-radius: 4px; + background: #f7f7f7; + background: -moz-linear-gradient(top, #f9f9f9 0%, #e6e6e6 100%); + background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f9f9f9), color-stop(100%,#e6e6e6)); + background: -o-linear-gradient(top, #f9f9f9 0%, #e6e6e6 100%); + background: -ms-linear-gradient(top, #f9f9f9 0%, #e6e6e6 100%); + background: linear-gradient(top, #f9f9f9 0%, #e6e6e6 100%); + filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#f9f9f9', endColorstr='#e6e6e6', GradientType=0); + -webkit-box-shadow: 0 1px 1px 0 rgba(140, 140, 140, 0.3); + -moz-box-shadow: 0 1px 1px 0 rgba(140, 140, 140, 0.3); + -o-box-shadow: 0 1px 1px 0 rgba(140, 140, 140, 0.3); + box-shadow: 0 1px 1px 0 rgba(140, 140, 140, 0.3); + text-decoration: none; + outline: none; +} + +.ui-button.mainaction { + color: #ededed; + text-shadow: 0px 1px 1px #333; + border-color: #1f262c; + background: #505050; + background: -moz-linear-gradient(top, #505050 0%, #2a2e31 100%); + background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#505050), color-stop(100%,#2a2e31)); + background: -o-linear-gradient(top, #505050 0%, #2a2e31 100%); + background: -ms-linear-gradient(top, #505050 0%, #2a2e31 100%); + background: linear-gradient(top, #505050 0%, #2a2e31 100%); + filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#505050', endColorstr='#2a2e31', GradientType=0); + -moz-box-shadow: inset 0 1px 0 0 #777; + -webkit-box-shadow: inset 0 1px 0 0 #777; + -o-box-shadow: inset 0 1px 0 0 #777; + box-shadow: inset 0 1px 0 0 #777; +} + +.ui-button.ui-state-focus { + color: #525252; + border-color: #4fadd5; + -moz-box-shadow: 0 0 2px 1px rgba(71,135,177, 0.6); + -webkit-box-shadow: 0 0 2px 1px rgba(71,135,177, 0.6); + -o-box-shadow: 0 0 2px 1px rgba(71,135,177, 0.6); + box-shadow: 0 0 2px 1px rgba(71,135,177, 0.6); +} + +.ui-button.ui-state-active { + color: #525252; + border-color: #aaa; + background: #e6e6e6; + background: -moz-linear-gradient(top, #e6e6e6 0%, #f9f9f9 100%); + background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#e6e6e6), color-stop(100%,#f9f9f9)); + background: -o-linear-gradient(top, #e6e6e6 0%, #f9f9f9 100%); + background: -ms-linear-gradient(top, #e6e6e6 0%, #f9f9f9 100%); + background: linear-gradient(top, #e6e6e6 0%, #f9f9f9 100%); + filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#e6e6e6', endColorstr='#f9f9f9', GradientType=0); +} + +.ui-button.ui-state-focus.mainaction, +.ui-button.ui-state-hover.mainaction { + color: #fff; +} + +.ui-button.ui-state-focus.mainaction { + border-color: #1f262c; + -moz-box-shadow: 0 0 2px 1px rgba(71,135,177, 0.6), inset 0 1px 0 0 #777; + -webkit-box-shadow: 0 0 2px 1px rgba(71,135,177, 0.6), inset 0 1px 0 0 #777; + -o-box-shadow: 0 0 2px 1px rgba(71,135,177, 0.6), inset 0 1px 0 0 #777; + box-shadow: 0 0 2px 1px rgba(71,135,177, 0.6), inset 0 1px 0 0 #777; +} + +.ui-button.ui-state-active.mainaction { + color: #fff; + background: #515151; + background: -moz-linear-gradient(top, #2a2e31 0%, #505050 100%); + background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#2a2e31), color-stop(100%,#505050)); + background: -o-linear-gradient(top, #2a2e31 0%, #505050 100%); + background: -ms-linear-gradient(top, #2a2e31 0%, #505050 100%); + background: linear-gradient(top, #2a2e31 0%, #505050 100%); +} + +.ui-button[disabled], +.ui-button[disabled]:hover, +.ui-button.mainaction[disabled] { + color: #aaa !important; +} + +/* Roundcube's specific Datepicker style override */ +.ui-datepicker { + min-width: 20em; + padding: 0; + display: none; + border: 0; + border-radius: 3px; + -webkit-box-shadow: #666 1px 1px 10px; + -moz-box-shadow: 1px 1px 10px #666; + box-shadow: 1px 1px 16px #666; +} +.ui-datepicker .ui-datepicker-header { + padding: .3em 0; + border-radius: 3px 3px 0 0; + border: 0; + background: #3a3a3a; + filter: none; + color: #fff; + text-shadow: 0px 1px 1px #000; +} +.ui-datepicker .ui-datepicker-prev, +.ui-datepicker .ui-datepicker-next { + border: 0; + background: none; +} +.ui-datepicker .ui-datepicker-header .ui-icon { + background: url("images/ui-icons-datepicker.png") 0 0 no-repeat; +} +.ui-datepicker .ui-datepicker-header .ui-icon-circle-triangle-w { + background-position: 0 2px; +} +.ui-datepicker .ui-datepicker-header .ui-icon-circle-triangle-e { + background-position: -14px 2px; +} +.ui-datepicker .ui-datepicker-prev-hover, +.ui-datepicker .ui-datepicker-next-hover { + top: 2px; + border: 0; + background: none; +} +.ui-datepicker .ui-datepicker-prev, +.ui-datepicker .ui-datepicker-prev-hover { + left: 2px; +} +.ui-datepicker .ui-datepicker-next, +.ui-datepicker .ui-datepicker-next-hover { + right: 2px; +} +.ui-datepicker select.ui-datepicker-month, +.ui-datepicker select.ui-datepicker-year { + border: 0; + background: #3a3a3a; + outline: none; + color: #fff; + font-weight: bold; + width: auto; + margin-right: 4px; + padding-right: 4px; +} +.ui-datepicker .ui-datepicker-title select::-ms-expand { + display: none; +} +.ie10 .ui-datepicker .ui-datepicker-title select, +.webkit .ui-datepicker .ui-datepicker-title select, +.mozilla .ui-datepicker .ui-datepicker-title select { + background-image: url("images/ui-icons-datepicker.png"); + background-position: right -18px; + background-repeat: no-repeat; + padding-right: 14px; + -webkit-appearance: none; + -moz-appearance: none; + appearance: none; +} +.ui-datepicker .ui-datepicker-month:focus, +.ui-datepicker .ui-datepicker-year:focus { + outline: 1px solid #4fadd5; +} +.ui-datepicker table { + margin: 0; + border-spacing: 0; +} +.ui-datepicker table:focus { + outline: 2px solid #4fadd5; + outline-offset: -2px; +} +.ui-datepicker td { + border: 1px solid #bbb; + padding: 0; +} +.ui-datepicker td span, .ui-datepicker td a { + border: 0; + padding: .5em; + text-shadow: 0px 1px 1px #fff; +} +.ui-datepicker td a.ui-state-default { + border: 0px solid #fff; + border-top-width: 1px; + border-left-width: 1px; + background: #e6e6e6; + background: -moz-linear-gradient(top, #e6e6e6 0%, #d6d6d6 100%); + background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#e6e6e6), color-stop(100%,#d6d6d6)); + background: -o-linear-gradient(top, #e6e6e6 0%, #d6d6d6 100%); + background: -ms-linear-gradient(top, #e6e6e6 0%, #d6d6d6 100%); + background: linear-gradient(top, #e6e6e6 0%, #d6d6d6 100%); +} +.ui-datepicker td a.ui-priority-secondary { + background: #eee; +} +.ui-datepicker td a.ui-state-active { + color: #fff; + border-color: #0286ac !important; + text-shadow: 0px 1px 1px #00516e !important; + background: #00acd4 !important; + background: -moz-linear-gradient(top, #00acd4 0%, #008fc7 100%); + background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#00acd4), color-stop(100%,#008fc7)); + background: -o-linear-gradient(top, #00acd4 0%, #008fc7 100%); + background: -ms-linear-gradient(top, #00acd4 0%, #008fc7 100%); + background: linear-gradient(top, #00acd4 0%, #008fc7 100%); +} +.ui-datepicker .ui-state-highlight { + color: #0081c2; +} +.ui-datepicker td.ui-datepicker-days-cell-over a.ui-state-default { + color: #fff; + border-color: rgba(73,180,210,0.7); + background: rgba(73,180,210,0.7); + text-shadow: 0px 1px 1px #666; +}
Save File
Cancel